/*!
 * micfdi.css · Sistema de diseño de miCFDI.com.mx (hecho por MagicCode.com.mx)
 * Versión 1.0 · octubre 2026
 *
 * Cómo se usa (detalle en 06-diseno-y-marca.md):
 *   1. Copia este archivo y la carpeta fuentes/ al panel (App_Themes/default/css/ o la ruta que diga el documento).
 *   2. Pon class="mc" en <body>. Todo lo visual (salvo los tokens de :root) vive bajo .mc, así que cargar
 *      este archivo en una página que no tenga .mc no cambia nada.
 *   3. Componentes nuevos: prefijo mc- (BEM en español: .mc-tarjeta, .mc-tarjeta__titulo, .mc-boton--primario).
 *   4. La sección 23 («Puente») viste las clases heredadas del panel WebForms (.boton, .contenedor-el,
 *      table.catalogo, .paginado…) para que las páginas que todavía no se migran se vean coherentes.
 *
 * No depende de nada externo. Funciona solo o encima de Bootstrap 5 (los nombres no chocan: todo es mc-).
 * Tema: sigue al sistema (prefers-color-scheme) y se fuerza con <html data-tema="claro|oscuro">.
 */

/* =============================================================================
   1. Fuentes
   Inter (SIL Open Font License 1.1, ver fuentes/OFL-Inter.txt), variable 400-800, solo latín.
   Si el archivo no está, el navegador usa la fuente del sistema (Segoe UI, SF, Roboto) sin error visible.
   ============================================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local("Inter Variable"), url("fuentes/InterVariable-latin.woff2") format("woff2");
}

/* =============================================================================
   2. Tokens (modo claro)
   Regla: los componentes usan solo tokens de rol (--mc-texto, --mc-primario…), nunca hex sueltos.
   Los contrastes AA están medidos en 06-diseno-y-marca.md §3.
   ============================================================================= */
:root {
  /* Marca */
  --mc-marca-azul: #0C3A6E;        /* azul miCFDI (encabezado de correo, «CFDI» del logotipo) */
  --mc-marca-verde: #00A699;       /* verde azulado miCFDI («mi» del logotipo). Solo gráfico, no texto sobre blanco */

  /* Rampa azul (derivada de #0C3A6E) */
  --mc-azul-50: #EEF4FB;
  --mc-azul-100: #D9E6F5;
  --mc-azul-200: #B4CDEB;
  --mc-azul-300: #85ADDD;
  --mc-azul-400: #4F86C9;
  --mc-azul-500: #2463AE;
  --mc-azul-600: #175AA8;
  --mc-azul-700: #0C3A6E;
  --mc-azul-800: #0A2F59;
  --mc-azul-900: #082444;
  --mc-azul-950: #051729;

  /* Rampa verde azulado (derivada de #00A699) */
  --mc-verde-50: #E4F6F3;
  --mc-verde-100: #C2EEE9;
  --mc-verde-200: #8EDFD6;
  --mc-verde-300: #4FCBBE;
  --mc-verde-400: #1BB8A9;
  --mc-verde-500: #00A699;
  --mc-verde-600: #00857A;
  --mc-verde-700: #007A70;
  --mc-verde-800: #00665E;
  --mc-verde-900: #034A45;

  /* Neutros (gris con un toque de azul) */
  --mc-gris-0: #FFFFFF;
  --mc-gris-25: #FBFCFE;
  --mc-gris-50: #F5F7FA;
  --mc-gris-100: #EEF2F7;
  --mc-gris-200: #DFE5EE;
  --mc-gris-300: #C6CFDC;
  --mc-gris-400: #98A4B5;
  --mc-gris-500: #7F8BA0;
  --mc-gris-600: #5F6B7E;
  --mc-gris-700: #4E5A6C;
  --mc-gris-800: #364152;
  --mc-gris-900: #151C27;
  --mc-gris-950: #0B1120;

  /* Roles: superficies y texto */
  --mc-fondo: var(--mc-gris-50);
  --mc-superficie: var(--mc-gris-0);
  --mc-superficie-2: var(--mc-gris-25);
  --mc-superficie-hundida: var(--mc-gris-100);
  --mc-superficie-hover: var(--mc-gris-100);
  --mc-superficie-seleccion: var(--mc-verde-50);
  --mc-borde: var(--mc-gris-200);
  --mc-borde-fuerte: var(--mc-gris-300);
  --mc-borde-control: var(--mc-gris-500);   /* 3.4:1 sobre blanco: límite de campos (WCAG 1.4.11) */
  --mc-texto: var(--mc-gris-900);
  --mc-texto-2: var(--mc-gris-700);
  --mc-texto-3: var(--mc-gris-600);
  --mc-texto-inverso: #FFFFFF;
  --mc-enlace: var(--mc-azul-600);
  --mc-enlace-hover: var(--mc-azul-700);

  /* Roles: acción */
  --mc-primario: var(--mc-verde-700);
  --mc-primario-hover: var(--mc-verde-800);
  --mc-primario-activo: var(--mc-verde-900);
  --mc-primario-texto: #FFFFFF;
  --mc-primario-suave: var(--mc-verde-50);
  --mc-primario-suave-texto: var(--mc-verde-800);
  --mc-foco: var(--mc-verde-600);
  --mc-seleccion-texto: #C2EEE9;

  /* Barra lateral */
  --mc-lateral-fondo: var(--mc-marca-azul);
  --mc-lateral-texto: #C8D6EA;
  --mc-lateral-texto-tenue: #9DB3D3;
  --mc-lateral-titulo: #8FA8CB;
  --mc-lateral-hover: rgba(255, 255, 255, .08);
  --mc-lateral-activo: #1A4A82;
  --mc-lateral-activo-texto: #FFFFFF;
  --mc-lateral-borde: rgba(255, 255, 255, .10);
  --mc-lateral-acento: var(--mc-marca-verde);

  /* Estados (texto / fondo / borde / sólido) */
  --mc-exito-texto: #0E6B3E;   --mc-exito-fondo: #E3F5EA;   --mc-exito-borde: #A6DDBD;   --mc-exito: #12A150;
  --mc-aviso-texto: #8A4B00;   --mc-aviso-fondo: #FFF3D6;   --mc-aviso-borde: #F3CF85;   --mc-aviso: #C77700;
  --mc-peligro-texto: #B42318; --mc-peligro-fondo: #FDECEA; --mc-peligro-borde: #F5B7B1; --mc-peligro: #D92D20;
  --mc-peligro-boton: #C4320A; --mc-peligro-boton-hover: #A3290A;
  --mc-info-texto: #1D4F91;    --mc-info-fondo: #E8F1FC;    --mc-info-borde: #B4CEF1;    --mc-info: #2E6FD1;
  --mc-neutro-texto: #3D4757;  --mc-neutro-fondo: #EEF1F5;  --mc-neutro-borde: #D3DAE4;  --mc-neutro: var(--mc-gris-500);

  /* Gráficas (paleta categórica validada para daltonismo; ver documento §3.4) */
  --mc-serie-1: #2A78D6;   /* Facturado (ingresos) */
  --mc-serie-2: #1BAF7A;   /* Cobrado (pagos) */
  --mc-serie-3: #EB6834;   /* Notas de crédito (egresos) */
  --mc-grafica-rejilla: var(--mc-gris-200);
  --mc-grafica-eje: var(--mc-gris-300);

  /* Tipografía */
  --mc-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mc-fuente-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --mc-t-xs: .75rem;      /* 12 */
  --mc-t-sm: .8125rem;    /* 13 */
  --mc-t-base: .875rem;   /* 14: texto del panel */
  --mc-t-md: 1rem;        /* 16 */
  --mc-t-lg: 1.125rem;    /* 18 */
  --mc-t-xl: 1.25rem;     /* 20 */
  --mc-t-2xl: 1.5rem;     /* 24: título de página */
  --mc-t-3xl: 1.875rem;   /* 30: cifra principal */
  --mc-t-4xl: 2.25rem;    /* 36 */
  --mc-interlineado: 1.5;
  --mc-peso-normal: 400;
  --mc-peso-medio: 500;
  --mc-peso-semi: 600;
  --mc-peso-negrita: 700;

  /* Espaciado (base 4px) */
  --mc-e-1: 4px;  --mc-e-2: 8px;  --mc-e-3: 12px; --mc-e-4: 16px; --mc-e-5: 20px;
  --mc-e-6: 24px; --mc-e-8: 32px; --mc-e-10: 40px; --mc-e-12: 48px; --mc-e-16: 64px;

  /* Radios */
  --mc-radio-sm: 6px;
  --mc-radio-md: 8px;
  --mc-radio-lg: 12px;
  --mc-radio-xl: 16px;
  --mc-radio-total: 999px;

  /* Sombras */
  --mc-sombra-1: 0 1px 2px rgba(16, 24, 40, .06);
  --mc-sombra-2: 0 4px 12px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --mc-sombra-3: 0 20px 40px -8px rgba(16, 24, 40, .22), 0 6px 12px -6px rgba(16, 24, 40, .10);
  --mc-sombra-foco: 0 0 0 3px rgba(0, 133, 122, .25);

  /* Medidas */
  --mc-alto-control: 38px;
  --mc-alto-control-sm: 32px;
  --mc-alto-control-lg: 44px;
  --mc-ancho-lateral: 264px;   /* 256 + la barra de desplazamiento delgada en pantallas de 768-900 px de alto */
  --mc-alto-encabezado: 60px;
  --mc-ancho-contenido: 1440px;

  /* Capas */
  --mc-z-encabezado: 30;
  --mc-z-lateral: 40;
  --mc-z-desplegable: 50;
  --mc-z-modal: 60;
  --mc-z-aviso: 70;

  /* Movimiento */
  --mc-transicion: 160ms cubic-bezier(.2, .7, .2, 1);
}

/* =============================================================================
   3. Tokens (modo oscuro): pasos propios, no una inversión automática.
   Sigue al sistema salvo que <html data-tema="claro">; data-tema="oscuro" lo fuerza.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --mc-fondo: #0B1120;
    --mc-superficie: #121A2A;
    --mc-superficie-2: #151F31;
    --mc-superficie-hundida: #0E1524;
    --mc-superficie-hover: #1A2538;
    --mc-superficie-seleccion: #0E2E2C;
    --mc-borde: #26334A;
    --mc-borde-fuerte: #34445F;
    --mc-borde-control: #61718C;
    --mc-texto: #E7ECF3;
    --mc-texto-2: #B3BFCF;
    --mc-texto-3: #8F9BB0;
    --mc-texto-inverso: #0B1120;
    --mc-enlace: #7DB0F0;
    --mc-enlace-hover: #A9CBF6;
    --mc-primario: #2CC4B5;
    --mc-primario-hover: #4FD1C5;
    --mc-primario-activo: #7DE3D7;
    --mc-primario-texto: #04201D;
    --mc-primario-suave: #0E2E2C;
    --mc-primario-suave-texto: #7DE3D7;
    --mc-foco: #4FD1C5;
    --mc-seleccion-texto: #134E4A;
    --mc-lateral-fondo: #0A1424;
    --mc-lateral-texto: #B8C7DC;
    --mc-lateral-texto-tenue: #8EA2BF;
    --mc-lateral-titulo: #7F94B3;
    --mc-lateral-hover: rgba(255, 255, 255, .06);
    --mc-lateral-activo: #16253D;
    --mc-lateral-borde: rgba(255, 255, 255, .07);
    --mc-exito-texto: #7EE2AE;   --mc-exito-fondo: #0F2A1F;   --mc-exito-borde: #1F5A3D;   --mc-exito: #34C77B;
    --mc-aviso-texto: #FFC56B;   --mc-aviso-fondo: #2E2209;   --mc-aviso-borde: #6A4A12;   --mc-aviso: #E9A23B;
    --mc-peligro-texto: #FFA39A; --mc-peligro-fondo: #3A1614; --mc-peligro-borde: #7A2A24; --mc-peligro: #F0645A;
    --mc-peligro-boton: #C4320A; --mc-peligro-boton-hover: #D23C14;
    --mc-info-texto: #9CC3F5;    --mc-info-fondo: #122640;    --mc-info-borde: #27497A;    --mc-info: #5B9BEB;
    --mc-neutro-texto: #C9D2DF;  --mc-neutro-fondo: #222D3F;  --mc-neutro-borde: #34435C;  --mc-neutro: #8F9BB0;
    --mc-serie-1: #3987E5;
    --mc-serie-2: #199E70;
    --mc-serie-3: #D95926;
    --mc-grafica-rejilla: #223047;
    --mc-grafica-eje: #34445F;
    --mc-sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
    --mc-sombra-2: 0 6px 16px -4px rgba(0, 0, 0, .55);
    --mc-sombra-3: 0 24px 48px -12px rgba(0, 0, 0, .70);
    --mc-sombra-foco: 0 0 0 3px rgba(79, 209, 197, .30);
  }
}
:root[data-tema="oscuro"] {
  --mc-fondo: #0B1120;
  --mc-superficie: #121A2A;
  --mc-superficie-2: #151F31;
  --mc-superficie-hundida: #0E1524;
  --mc-superficie-hover: #1A2538;
  --mc-superficie-seleccion: #0E2E2C;
  --mc-borde: #26334A;
  --mc-borde-fuerte: #34445F;
  --mc-borde-control: #61718C;
  --mc-texto: #E7ECF3;
  --mc-texto-2: #B3BFCF;
  --mc-texto-3: #8F9BB0;
  --mc-texto-inverso: #0B1120;
  --mc-enlace: #7DB0F0;
  --mc-enlace-hover: #A9CBF6;
  --mc-primario: #2CC4B5;
  --mc-primario-hover: #4FD1C5;
  --mc-primario-activo: #7DE3D7;
  --mc-primario-texto: #04201D;
  --mc-primario-suave: #0E2E2C;
  --mc-primario-suave-texto: #7DE3D7;
  --mc-foco: #4FD1C5;
  --mc-seleccion-texto: #134E4A;
  --mc-lateral-fondo: #0A1424;
  --mc-lateral-texto: #B8C7DC;
  --mc-lateral-texto-tenue: #8EA2BF;
  --mc-lateral-titulo: #7F94B3;
  --mc-lateral-hover: rgba(255, 255, 255, .06);
  --mc-lateral-activo: #16253D;
  --mc-lateral-borde: rgba(255, 255, 255, .07);
  --mc-exito-texto: #7EE2AE;   --mc-exito-fondo: #0F2A1F;   --mc-exito-borde: #1F5A3D;   --mc-exito: #34C77B;
  --mc-aviso-texto: #FFC56B;   --mc-aviso-fondo: #2E2209;   --mc-aviso-borde: #6A4A12;   --mc-aviso: #E9A23B;
  --mc-peligro-texto: #FFA39A; --mc-peligro-fondo: #3A1614; --mc-peligro-borde: #7A2A24; --mc-peligro: #F0645A;
  --mc-peligro-boton: #C4320A; --mc-peligro-boton-hover: #D23C14;
  --mc-info-texto: #9CC3F5;    --mc-info-fondo: #122640;    --mc-info-borde: #27497A;    --mc-info: #5B9BEB;
  --mc-neutro-texto: #C9D2DF;  --mc-neutro-fondo: #222D3F;  --mc-neutro-borde: #34435C;  --mc-neutro: #8F9BB0;
  --mc-serie-1: #3987E5;
  --mc-serie-2: #199E70;
  --mc-serie-3: #D95926;
  --mc-grafica-rejilla: #223047;
  --mc-grafica-eje: #34445F;
  --mc-sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
  --mc-sombra-2: 0 6px 16px -4px rgba(0, 0, 0, .55);
  --mc-sombra-3: 0 24px 48px -12px rgba(0, 0, 0, .70);
  --mc-sombra-foco: 0 0 0 3px rgba(79, 209, 197, .30);
}
/* color-scheme (barras de desplazamiento, controles nativos, fondo del lienzo) solo donde ya está el diseño
   nuevo: sin .mc el panel heredado se ve igual aunque el sistema esté en modo oscuro. */
:root:has(> body.mc), .mc-raiz { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):has(> body.mc), :root:not([data-tema="claro"]) .mc-raiz { color-scheme: dark; }
}
:root[data-tema="oscuro"]:has(> body.mc), :root[data-tema="oscuro"] .mc-raiz { color-scheme: dark; }

/* =============================================================================
   4. Base (solo dentro de .mc)
   ============================================================================= */
.mc,
.mc *,
.mc *::before,
.mc *::after { box-sizing: border-box; }

body.mc,
.mc-raiz {
  margin: 0;
  min-height: 100vh;
  background: var(--mc-fondo);
  color: var(--mc-texto);
  font-family: var(--mc-fuente);
  font-size: var(--mc-t-base);
  line-height: var(--mc-interlineado);
  letter-spacing: normal;
  font-feature-settings: "cv11" 1;   /* Inter: «a» de un piso, más legible en cifras y RFC */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.mc ::selection { background: var(--mc-seleccion-texto); color: var(--mc-texto); }

/* Elementos base con especificidad cero (:where): cualquier clase de componente les gana sin pelear. */
:where(.mc) :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--mc-texto);
  font-family: var(--mc-fuente);
  font-weight: var(--mc-peso-semi);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
}
:where(.mc) :where(h1) { font-size: var(--mc-t-2xl); letter-spacing: -.02em; }
:where(.mc) :where(h2) { font-size: var(--mc-t-xl); }
:where(.mc) :where(h3) { font-size: var(--mc-t-lg); }
:where(.mc) :where(h4) { font-size: var(--mc-t-md); }
:where(.mc) :where(h5, h6) { font-size: var(--mc-t-base); }
:where(.mc) :where(p) { margin: 0 0 var(--mc-e-3); }
:where(.mc) :where(p:last-child) { margin-bottom: 0; }
:where(.mc) :where(small) { font-size: var(--mc-t-sm); }
:where(.mc) :where(strong, b) { font-weight: var(--mc-peso-semi); }
:where(.mc) :where(a) { color: var(--mc-enlace); text-decoration: none; text-underline-offset: 2px; }
:where(.mc) :where(a:hover) { color: var(--mc-enlace-hover); text-decoration: underline; }
:where(.mc) :where(p a, .mc-texto-largo a) { text-decoration: underline; }
:where(.mc) :where(code, kbd, samp, pre) { font-family: var(--mc-fuente-mono); font-size: .92em; }
.mc kbd {
  display: inline-block; min-width: 1.6em; padding: 0 .4em; border: 1px solid var(--mc-borde-fuerte);
  border-bottom-width: 2px; border-radius: var(--mc-radio-sm); background: var(--mc-superficie-2);
  color: var(--mc-texto-2); font-size: var(--mc-t-xs); line-height: 1.6; text-align: center;
}
:where(.mc) :where(hr) { height: 1px; margin: var(--mc-e-6) 0; border: 0; background: var(--mc-borde); }
:where(.mc) :where(img, svg) { vertical-align: middle; }
:where(.mc) :where(img) { max-width: 100%; }
:where(.mc) :where(img[width][height]) { height: auto; }
:where(.mc) :where(button, input, select, textarea) { font: inherit; }
.mc :focus { outline: none; }
.mc :focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc [hidden] { display: none !important; }

/* Íconos SVG (sprite iconos.svg o en línea) */
.mc-icono {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mc-icono--sm { width: 16px; height: 16px; }
.mc-icono--lg { width: 24px; height: 24px; }
.mc-icono--xl { width: 32px; height: 32px; stroke-width: 1.6; }

/* =============================================================================
   5. Utilidades (pocas y con nombre claro)
   ============================================================================= */
.mc .mc-solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mc .mc-saltar {
  position: absolute; left: var(--mc-e-4); top: -100px; z-index: 100; padding: var(--mc-e-2) var(--mc-e-4);
  border-radius: var(--mc-radio-md); background: var(--mc-primario); color: var(--mc-primario-texto);
}
.mc .mc-saltar:focus { top: var(--mc-e-3); }
.mc .mc-numero, .mc .mc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc .mc-mono { font-family: var(--mc-fuente-mono); font-size: .92em; letter-spacing: .01em; }
.mc .mc-sin-salto { white-space: nowrap; }
.mc .mc-rfc { font-family: var(--mc-fuente-mono); font-size: .92em; letter-spacing: .02em; text-transform: uppercase; }
.mc .mc-tenue { color: var(--mc-texto-2); }
.mc .mc-muy-tenue { color: var(--mc-texto-3); }
.mc .mc-derecha { text-align: right; }
.mc .mc-centro { text-align: center; }
.mc .mc-recortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mc .mc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-3); }
.mc .mc-fila--entre { justify-content: space-between; }
.mc .mc-fila--fin { justify-content: flex-end; }
.mc .mc-pila { display: flex; flex-direction: column; gap: var(--mc-e-4); }
.mc .mc-pila--sm { gap: var(--mc-e-2); }
.mc .mc-pila--lg { gap: var(--mc-e-6); }
.mc .mc-crecer { flex: 1 1 auto; min-width: 0; }
.mc .mc-mt-0 { margin-top: 0 !important; }
.mc .mc-mb-0 { margin-bottom: 0 !important; }
.mc .mc-solo-movil { display: none !important; }

/* =============================================================================
   6. Estructura de la aplicación
   <div class="mc-app"> <aside class="mc-lateral"> <div class="mc-velo"> <div class="mc-marco">
     <header class="mc-encabezado"> <main class="mc-contenido"> <footer class="mc-pie">
   ============================================================================= */
.mc-app {
  display: grid;
  grid-template-columns: var(--mc-ancho-lateral) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--mc-fondo);
}
.mc-marco { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.mc-contenido {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--mc-ancho-contenido);
  margin: 0 auto;
  padding: var(--mc-e-6) var(--mc-e-8) var(--mc-e-12);
}
.mc-contenido--angosto { max-width: 960px; }
.mc-pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mc-e-2) var(--mc-e-4);
  padding: var(--mc-e-4) var(--mc-e-8); border-top: 1px solid var(--mc-borde);
  color: var(--mc-texto-3); font-size: var(--mc-t-sm);
}
.mc-pie a { color: var(--mc-texto-2); text-decoration: underline; text-underline-offset: 2px; }
.mc-velo { display: none; }

/* La maqueta incrustada (vista-previa.html) no usa alturas de ventana */
.mc-app--incrustada { position: relative; }
.mc-app--incrustada, .mc-app--incrustada .mc-marco { min-height: 0; }
.mc-app--incrustada .mc-lateral { position: relative; height: auto; }

/* =============================================================================
   7. Barra lateral y navegación
   ============================================================================= */
.mc-lateral {
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  background: var(--mc-lateral-fondo);
  color: var(--mc-lateral-texto);
  z-index: var(--mc-z-lateral);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.mc-lateral__marca {
  display: flex; align-items: center; gap: var(--mc-e-3);
  height: var(--mc-alto-encabezado); padding: 0 var(--mc-e-5); flex: none;
  border-bottom: 1px solid var(--mc-lateral-borde);
}
.mc-lateral__marca img { height: 26px; width: auto; }
.mc-lateral__accion { padding: var(--mc-e-4) var(--mc-e-4) var(--mc-e-2); }
.mc-lateral__accion .mc-boton { width: 100%; }
.mc-lateral__pie {
  margin-top: auto; padding: var(--mc-e-4) var(--mc-e-5) var(--mc-e-5);
  border-top: 1px solid var(--mc-lateral-borde); font-size: var(--mc-t-sm);
}
.mc-lateral__pie a { color: var(--mc-lateral-texto); }
.mc-lateral__credito { margin-top: var(--mc-e-3); color: var(--mc-lateral-texto-tenue); font-size: var(--mc-t-xs); }
.mc-lateral__credito a { color: var(--mc-lateral-texto); text-decoration: none; }

.mc-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--mc-e-2) var(--mc-e-3) var(--mc-e-4); }
.mc-nav__seccion { display: flex; flex-direction: column; gap: 2px; }
.mc-nav__grupo {
  margin: var(--mc-e-4) var(--mc-e-3) var(--mc-e-1);
  color: var(--mc-lateral-titulo);
  font-size: var(--mc-t-xs); font-weight: var(--mc-peso-semi); letter-spacing: .06em; text-transform: uppercase;
}
.mc-nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--mc-e-3);
  min-height: 38px; padding: 0 var(--mc-e-3);
  border-radius: var(--mc-radio-md);
  color: var(--mc-lateral-texto);
  font-weight: var(--mc-peso-medio);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mc-transicion), color var(--mc-transicion);
}
.mc .mc-nav__item:hover { background: var(--mc-lateral-hover); color: #FFFFFF; text-decoration: none; }
.mc .mc-nav__item[aria-current="page"],
.mc .mc-nav__item.es-activo {
  background: var(--mc-lateral-activo); color: var(--mc-lateral-activo-texto);
}
.mc-nav__item[aria-current="page"]::before,
.mc-nav__item.es-activo::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--mc-lateral-acento);
}
.mc-nav__item .mc-icono { color: var(--mc-lateral-texto-tenue); }
.mc-nav__item:hover .mc-icono, .mc-nav__item[aria-current="page"] .mc-icono { color: currentColor; }
.mc-nav__item:focus-visible { outline-color: var(--mc-lateral-acento); }
.mc-nav__texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-nav__contador {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--mc-radio-total);
  background: rgba(255, 255, 255, .12); color: #FFFFFF; font-size: var(--mc-t-xs); font-weight: var(--mc-peso-semi);
  line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.mc-nav__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--mc-lateral-acento); flex: none; }
.mc-nav__punto--aviso { background: #F5B748; }

/* Submenú con <details> (funciona sin JavaScript) */
.mc-nav__sub > summary { list-style: none; }
.mc-nav__sub > summary::-webkit-details-marker { display: none; }
.mc-nav__sub > summary .mc-nav__flecha { margin-left: auto; transition: transform var(--mc-transicion); }
.mc-nav__sub[open] > summary .mc-nav__flecha { transform: rotate(180deg); }
.mc-nav__lista { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--mc-e-2); padding-left: 34px; }
.mc-nav__lista .mc-nav__item { min-height: 34px; font-weight: var(--mc-peso-normal); }
.mc-nav__lista .mc-nav__item[aria-current="page"]::before { left: -46px; }

/* Medidor de timbres en el pie de la lateral */
.mc-lateral .mc-medidor { --mc-medidor-pista: rgba(255, 255, 255, .14); }
.mc-lateral .mc-medidor__etiqueta { color: var(--mc-lateral-texto); }
.mc-lateral .mc-medidor__valor { color: #FFFFFF; }

/* =============================================================================
   8. Encabezado superior
   ============================================================================= */
.mc-encabezado {
  position: sticky; top: 0; z-index: var(--mc-z-encabezado);
  display: flex; align-items: center; gap: var(--mc-e-3);
  height: var(--mc-alto-encabezado);
  padding: 0 var(--mc-e-6);
  background: var(--mc-superficie);
  background: color-mix(in srgb, var(--mc-superficie) 92%, transparent);
  border-bottom: 1px solid var(--mc-borde);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
.mc .mc-encabezado .mc-encabezado__menu { display: none; }
.mc-encabezado__acciones { display: flex; align-items: center; gap: var(--mc-e-2); margin-left: auto; }

/* Buscador global (Ctrl+K) */
.mc-buscador { position: relative; flex: 0 1 380px; min-width: 0; }
.mc-buscador .mc-icono { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--mc-texto-3); pointer-events: none; }
.mc .mc-buscador input {
  width: 100%; height: 36px; padding: 0 56px 0 38px;
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-md);
  background: var(--mc-superficie-2); color: var(--mc-texto); font: inherit;
}
.mc .mc-buscador input::placeholder { color: var(--mc-texto-3); }
.mc .mc-buscador input:focus { border-color: var(--mc-foco); background: var(--mc-superficie); box-shadow: var(--mc-sombra-foco); outline: none; }
.mc-buscador kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.mc-buscador__resultados { position: absolute; left: 0; right: 0; top: calc(100% + 6px); }

/* Desplegable genérico con <details> (selector de empresa, menú de usuario, acciones) */
.mc-desplegable { position: relative; }
.mc-desplegable > summary { list-style: none; cursor: pointer; }
.mc-desplegable > summary::-webkit-details-marker { display: none; }
.mc-desplegable__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--mc-z-desplegable);
  min-width: 240px; max-width: min(92vw, 400px);
  padding: var(--mc-e-2);
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-3);
  color: var(--mc-texto);
}
.mc-desplegable--derecha .mc-desplegable__panel { left: auto; right: 0; }
.mc-desplegable:not([open]) > .mc-desplegable__panel { display: none; }
.mc-menu { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.mc-menu__titulo { padding: var(--mc-e-2) var(--mc-e-3) var(--mc-e-1); color: var(--mc-texto-3); font-size: var(--mc-t-xs); font-weight: var(--mc-peso-semi); letter-spacing: .04em; text-transform: uppercase; }
.mc .mc-menu__item {
  display: flex; align-items: center; gap: var(--mc-e-3); width: 100%;
  min-height: 36px; padding: var(--mc-e-2) var(--mc-e-3);
  border: 0; border-radius: var(--mc-radio-md); background: none;
  color: var(--mc-texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.mc .mc-menu__item:hover, .mc .mc-menu__item:focus-visible { background: var(--mc-superficie-hover); color: var(--mc-texto); text-decoration: none; }
.mc .mc-menu__item .mc-icono { color: var(--mc-texto-3); }
.mc .mc-menu__item--peligro { color: var(--mc-peligro-texto); }
.mc .mc-menu__item--peligro .mc-icono { color: currentColor; }
.mc-menu__separador { height: 1px; margin: var(--mc-e-1) 0; background: var(--mc-borde); }

/* Selector de empresa (multi-RFC) */
.mc-selector-empresa > summary {
  display: flex; align-items: center; gap: var(--mc-e-3);
  max-width: 340px; height: 44px; padding: 0 var(--mc-e-3) 0 6px;
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie); transition: border-color var(--mc-transicion), background var(--mc-transicion);
}
.mc-selector-empresa > summary:hover { border-color: var(--mc-borde-fuerte); background: var(--mc-superficie-2); }
.mc-selector-empresa[open] > summary { border-color: var(--mc-foco); box-shadow: var(--mc-sombra-foco); }
.mc-selector-empresa__texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mc-selector-empresa__nombre { overflow: hidden; color: var(--mc-texto); font-weight: var(--mc-peso-semi); text-overflow: ellipsis; white-space: nowrap; }
.mc-selector-empresa__rfc { color: var(--mc-texto-3); font-family: var(--mc-fuente-mono); font-size: var(--mc-t-xs); letter-spacing: .03em; }
.mc-selector-empresa .mc-desplegable__panel { width: 380px; padding: 0; }
.mc-selector-empresa__buscar { padding: var(--mc-e-3); border-bottom: 1px solid var(--mc-borde); }
.mc-selector-empresa__lista { max-height: 320px; overflow-y: auto; padding: var(--mc-e-2); }
.mc-selector-empresa__opcion { align-items: center; }
.mc-selector-empresa__opcion[aria-current="true"] { background: var(--mc-superficie-seleccion); }
.mc-selector-empresa__opcion .mc-selector-empresa__check { margin-left: auto; color: var(--mc-primario); }
.mc-selector-empresa__rol { margin-left: auto; padding-left: var(--mc-e-2); color: var(--mc-texto-3); font-size: var(--mc-t-xs); white-space: nowrap; }
.mc-selector-empresa__rol + .mc-selector-empresa__check { margin-left: var(--mc-e-2); }
.mc-selector-empresa__pie { display: flex; gap: var(--mc-e-2); padding: var(--mc-e-2); border-top: 1px solid var(--mc-borde); }
.mc-selector-empresa__pie .mc-menu__item { flex: 1; justify-content: center; }

/* Selector fijo: mientras no exista el multi-RFC (05 A1) muestra la empresa de la sesión y no se despliega (06 §9.6) */
.mc-selector-empresa--fija { display: flex; align-items: center; gap: var(--mc-e-3); min-width: 0; max-width: 340px; height: 44px; padding: 0 var(--mc-e-2) 0 6px; }

/* Botones del encabezado: punto de avisos, saldo de timbres (solo con el menú en cajón), tema y progreso */
.mc-encabezado__punto { position: absolute; top: 7px; right: 7px; box-shadow: 0 0 0 2px var(--mc-superficie); }
.mc .mc-saldo {
  display: none; align-items: center; gap: 6px; height: 32px; padding: 0 var(--mc-e-3);
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-total); color: var(--mc-texto-2);
  font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
.mc .mc-saldo:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); text-decoration: none; }
.mc .mc-saldo--aviso { border-color: var(--mc-aviso-borde); background: var(--mc-aviso-fondo); color: var(--mc-aviso-texto); }
.mc .mc-saldo--peligro { border-color: var(--mc-peligro-borde); background: var(--mc-peligro-fondo); color: var(--mc-peligro-texto); }
.mc-tema-alternar__sol, :root[data-tema="oscuro"] .mc-tema-alternar__luna { display: none; }
:root[data-tema="oscuro"] .mc-tema-alternar__sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .mc-tema-alternar__luna { display: none; }
  :root:not([data-tema]) .mc-tema-alternar__sol { display: block; }
}
.mc-encabezado__progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--mc-transicion); }
.mc-encabezado__progreso::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: var(--mc-primario); animation: mc-progreso 1.1s ease-in-out infinite; }
[data-mc-cargando] .mc-encabezado__progreso { opacity: 1; }
@keyframes mc-progreso { to { left: 100%; } }
.mc .mc-cuenta { width: 284px; }
.mc-cuenta__encabezado { display: flex; flex-direction: column; gap: 2px; padding: var(--mc-e-2) var(--mc-e-3) var(--mc-e-3); }
.mc-menu__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e-3); padding: var(--mc-e-1) var(--mc-e-1) var(--mc-e-1) var(--mc-e-3); color: var(--mc-texto-2); }

/* Avatar con iniciales (empresa o usuario). El color sale de data-color="1..8" (fijo por empresa) */
.mc-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--mc-radio-md);
  background: var(--mc-azul-100); color: var(--mc-azul-800);
  font-size: var(--mc-t-xs); font-weight: var(--mc-peso-negrita); letter-spacing: .02em; text-transform: uppercase;
  overflow: hidden;
}
.mc-avatar img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; }
.mc-avatar--sm { width: 24px; height: 24px; border-radius: var(--mc-radio-sm); font-size: 10px; }
.mc-avatar--lg { width: 44px; height: 44px; border-radius: var(--mc-radio-lg); font-size: var(--mc-t-sm); }
.mc-avatar--redondo { border-radius: 50%; }
.mc-avatar[data-color="1"] { background: #D9E6F5; color: #0A2F59; }
.mc-avatar[data-color="2"] { background: #C2EEE9; color: #034A45; }
.mc-avatar[data-color="3"] { background: #FDE2D3; color: #7A2E0B; }
.mc-avatar[data-color="4"] { background: #E9E3FB; color: #3B2A86; }
.mc-avatar[data-color="5"] { background: #FCE3EC; color: #7D1F45; }
.mc-avatar[data-color="6"] { background: #E2F2D9; color: #2D5A12; }
.mc-avatar[data-color="7"] { background: #FFF0C7; color: #6B4700; }
.mc-avatar[data-color="8"] { background: #E3E8EF; color: #2C3646; }

/* =============================================================================
   9. Encabezado de página y migas
   ============================================================================= */
.mc-pagina { display: flex; flex-direction: column; gap: var(--mc-e-6); }
.mc-pagina-encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mc-e-4); }
.mc-pagina-encabezado__titulo { display: flex; flex-direction: column; gap: var(--mc-e-1); min-width: 0; }
.mc-pagina-encabezado__descripcion { margin: 0; color: var(--mc-texto-2); }
.mc-pagina-encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); }
.mc-contenido > .mc-pagina-encabezado { margin-bottom: var(--mc-e-6); }
.mc .mc-contenido:focus-visible { outline: none; }
.mc-migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-1); margin: 0; padding: 0; list-style: none; color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-migas li + li::before { content: "/"; margin-right: var(--mc-e-1); color: var(--mc-borde-fuerte); }
.mc-migas a { color: var(--mc-texto-2); }
.mc-seccion-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e-3); margin: 0 0 var(--mc-e-3); }
.mc-seccion-titulo h2, .mc-seccion-titulo h3 { font-size: var(--mc-t-md); }

/* =============================================================================
   10. Tarjetas, rejilla y cifras (KPI)
   ============================================================================= */
.mc-tarjeta {
  position: relative;
  min-width: 0;
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-1);
}
.mc-tarjeta__encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e-3);
  padding: var(--mc-e-4) var(--mc-e-5); border-bottom: 1px solid var(--mc-borde);
}
.mc-tarjeta__titulo { margin: 0; font-size: var(--mc-t-md); font-weight: var(--mc-peso-semi); }
.mc-tarjeta__subtitulo { margin: 2px 0 0; color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-tarjeta__cuerpo { padding: var(--mc-e-5); }
.mc-tarjeta__cuerpo--sin-relleno { padding: 0; }
.mc-tarjeta__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mc-e-2);
  padding: var(--mc-e-3) var(--mc-e-5); border-top: 1px solid var(--mc-borde);
  background: var(--mc-superficie-2); border-radius: 0 0 var(--mc-radio-lg) var(--mc-radio-lg);
}
.mc-tarjeta--plana { box-shadow: none; }
.mc-tarjeta--resalte { border-color: var(--mc-primario); box-shadow: 0 0 0 1px var(--mc-primario); }
.mc .mc-tarjeta--enlace { display: block; color: inherit; text-decoration: none; transition: border-color var(--mc-transicion), box-shadow var(--mc-transicion), transform var(--mc-transicion); }
.mc .mc-tarjeta--enlace:hover { border-color: var(--mc-borde-fuerte); box-shadow: var(--mc-sombra-2); text-decoration: none; color: inherit; }

.mc-rejilla { display: grid; gap: var(--mc-e-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mc-rejilla--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mc-col-3 { grid-column: span 3; } .mc-col-4 { grid-column: span 4; } .mc-col-5 { grid-column: span 5; }
.mc-col-6 { grid-column: span 6; } .mc-col-7 { grid-column: span 7; } .mc-col-8 { grid-column: span 8; }
.mc-col-9 { grid-column: span 9; } .mc-col-12 { grid-column: 1 / -1; }

.mc-kpi { display: flex; flex-direction: column; gap: var(--mc-e-2); padding: var(--mc-e-5); }
.mc-kpi__etiqueta { display: flex; align-items: center; gap: var(--mc-e-2); color: var(--mc-texto-2); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-medio); }
.mc-kpi__valor { color: var(--mc-texto); font-size: var(--mc-t-3xl); font-weight: var(--mc-peso-semi); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mc-kpi__valor small { color: var(--mc-texto-3); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-medio); letter-spacing: 0; }
.mc-kpi__detalle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-2); color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-variacion { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--mc-peso-semi); font-variant-numeric: tabular-nums; }
.mc-variacion--sube { color: var(--mc-exito-texto); }
.mc-variacion--baja { color: var(--mc-peligro-texto); }
.mc-variacion--igual { color: var(--mc-texto-3); }

/* Lista de datos (clave: valor) para detalles de CFDI, empresa, certificado */
.mc-datos { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--mc-e-2) var(--mc-e-5); margin: 0; }
.mc-datos dt { color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-datos dd { margin: 0; color: var(--mc-texto); font-weight: var(--mc-peso-medio); overflow-wrap: anywhere; }

/* =============================================================================
   11. Botones
   ============================================================================= */
.mc .mc-boton {
  --b-fondo: var(--mc-superficie); --b-texto: var(--mc-texto); --b-borde: var(--mc-borde-fuerte);
  --b-fondo-hover: var(--mc-superficie-hover); --b-texto-hover: var(--mc-texto);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-e-2);
  height: var(--mc-alto-control); min-width: var(--mc-alto-control);
  padding: 0 var(--mc-e-4);
  border: 1px solid var(--b-borde); border-radius: var(--mc-radio-md);
  background: var(--b-fondo); color: var(--b-texto);
  box-shadow: var(--mc-sombra-1);
  font: inherit; font-size: var(--mc-t-base); font-weight: var(--mc-peso-semi); line-height: 1;
  letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background var(--mc-transicion), border-color var(--mc-transicion), color var(--mc-transicion), box-shadow var(--mc-transicion);
}
.mc .mc-boton:hover { background: var(--b-fondo-hover); color: var(--b-texto-hover); text-decoration: none; }
.mc .mc-boton:active { transform: translateY(1px); }
.mc .mc-boton:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc .mc-boton--primario {
  --b-fondo: var(--mc-primario); --b-texto: var(--mc-primario-texto); --b-borde: transparent;
  --b-fondo-hover: var(--mc-primario-hover); --b-texto-hover: var(--mc-primario-texto);
}
.mc .mc-boton--primario:active { background: var(--mc-primario-activo); }
.mc .mc-boton--marca {
  --b-fondo: var(--mc-marca-azul); --b-texto: #FFFFFF; --b-borde: transparent;
  --b-fondo-hover: var(--mc-azul-800); --b-texto-hover: #FFFFFF;
}
.mc .mc-boton--peligro {
  --b-fondo: var(--mc-peligro-boton); --b-texto: #FFFFFF; --b-borde: transparent;
  --b-fondo-hover: var(--mc-peligro-boton-hover); --b-texto-hover: #FFFFFF;
}
.mc .mc-boton--peligro-suave {
  --b-fondo: var(--mc-superficie); --b-texto: var(--mc-peligro-texto); --b-borde: var(--mc-peligro-borde);
  --b-fondo-hover: var(--mc-peligro-fondo); --b-texto-hover: var(--mc-peligro-texto);
}
.mc .mc-boton--fantasma {
  --b-fondo: transparent; --b-texto: var(--mc-texto-2); --b-borde: transparent;
  --b-fondo-hover: var(--mc-superficie-hover); --b-texto-hover: var(--mc-texto);
  box-shadow: none;
}
.mc .mc-boton--enlace {
  --b-fondo: transparent; --b-texto: var(--mc-enlace); --b-borde: transparent;
  --b-fondo-hover: transparent; --b-texto-hover: var(--mc-enlace-hover);
  height: auto; min-width: 0; padding: 0; box-shadow: none; font-weight: var(--mc-peso-medio);
}
.mc .mc-boton--enlace:hover { text-decoration: underline; }
.mc .mc-boton--sm { height: var(--mc-alto-control-sm); min-width: var(--mc-alto-control-sm); padding: 0 var(--mc-e-3); font-size: var(--mc-t-sm); }
.mc .mc-boton--lg { height: var(--mc-alto-control-lg); min-width: var(--mc-alto-control-lg); padding: 0 var(--mc-e-5); font-size: var(--mc-t-md); }
.mc .mc-boton--bloque { width: 100%; }
.mc .mc-boton--icono { width: var(--mc-alto-control); padding: 0; }
.mc .mc-boton--icono.mc-boton--sm { width: var(--mc-alto-control-sm); }
.mc .mc-boton[disabled], .mc .mc-boton[aria-disabled="true"], .mc .mc-boton.aspNetDisabled {
  opacity: .55; cursor: not-allowed; pointer-events: none; box-shadow: none;
}
/* Estado «trabajando» (timbrando, enviando): pon aria-busy="true" y se muestra un giro */
.mc .mc-boton[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.mc .mc-boton[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid var(--b-texto); border-right-color: transparent; border-radius: 50%;
  animation: mc-girar .7s linear infinite;
}
@keyframes mc-girar { to { transform: rotate(360deg); } }
.mc-grupo-botones { display: inline-flex; }
.mc .mc-grupo-botones > .mc-boton { border-radius: 0; box-shadow: none; }
.mc .mc-grupo-botones > .mc-boton + .mc-boton { margin-left: -1px; }
.mc .mc-grupo-botones > .mc-boton:first-child { border-radius: var(--mc-radio-md) 0 0 var(--mc-radio-md); }
.mc .mc-grupo-botones > .mc-boton:last-child { border-radius: 0 var(--mc-radio-md) var(--mc-radio-md) 0; }
.mc .mc-grupo-botones > .mc-boton[aria-pressed="true"] { background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); border-color: var(--mc-primario); z-index: 1; }

/* Barra de acciones fija al pie (editor de factura en celular, formularios largos) */
.mc-barra-acciones {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mc-e-3);
  margin-top: var(--mc-e-6);
  padding: var(--mc-e-3) var(--mc-e-5);
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie);
  background: color-mix(in srgb, var(--mc-superficie) 94%, transparent);
  box-shadow: var(--mc-sombra-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mc-barra-acciones__resumen { margin-right: auto; color: var(--mc-texto-2); }
.mc-barra-acciones__resumen strong { color: var(--mc-texto); font-size: var(--mc-t-lg); font-variant-numeric: tabular-nums; }

/* =============================================================================
   12. Formularios
   ============================================================================= */
.mc-formulario { display: flex; flex-direction: column; gap: var(--mc-e-6); }
.mc-seccion-formulario { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--mc-e-6); padding-bottom: var(--mc-e-6); border-bottom: 1px solid var(--mc-borde); }
.mc-seccion-formulario:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-seccion-formulario__ayuda h3 { font-size: var(--mc-t-md); margin-bottom: var(--mc-e-1); }
.mc-seccion-formulario__ayuda p { color: var(--mc-texto-2); font-size: var(--mc-t-sm); }
.mc-campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mc-e-4) var(--mc-e-4); }
.mc-campos > .mc-campo { grid-column: span 6; }
.mc-campos > .mc-campo--1-3 { grid-column: span 4; }
.mc-campos > .mc-campo--2-3 { grid-column: span 8; }
.mc-campos > .mc-campo--1-4 { grid-column: span 3; }
.mc-campos > .mc-campo--3-4 { grid-column: span 9; }
.mc-campos > .mc-campo--completo { grid-column: 1 / -1; }

.mc-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc .mc-etiqueta, .mc .mc-campo > label:where(:not(.mc-casilla, .mc-interruptor)) {
  display: flex; align-items: baseline; gap: var(--mc-e-1);
  margin: 0; color: var(--mc-texto); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); line-height: 1.3;
}
.mc-etiqueta__opcional { color: var(--mc-texto-3); font-weight: var(--mc-peso-normal); }
.mc-etiqueta__requerido { color: var(--mc-peligro-texto); }
.mc-ayuda { margin: 0; color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-error { display: flex; align-items: center; gap: var(--mc-e-1); margin: 0; color: var(--mc-peligro-texto); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-medio); }

/* Controles: con clase .mc-control o como hijo directo de .mc-campo (especificidad baja a propósito,
   para que los modificadores --mono, --numero y aria-invalid siempre ganen) */
.mc .mc-control,
.mc-campo > input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"])),
.mc-campo > select,
.mc-campo > textarea {
  display: block; width: 100%;
  height: var(--mc-alto-control);
  padding: 0 var(--mc-e-3);
  border: 1px solid var(--mc-borde-control); border-radius: var(--mc-radio-md);
  background-color: var(--mc-superficie); color: var(--mc-texto);
  font-family: var(--mc-fuente); font-size: var(--mc-t-base); font-weight: var(--mc-peso-normal); letter-spacing: normal;
  box-shadow: none;
  transition: border-color var(--mc-transicion), box-shadow var(--mc-transicion);
  -webkit-appearance: none; appearance: none;
}
.mc .mc-control::placeholder, .mc-campo > input::placeholder, .mc-campo > textarea::placeholder { color: var(--mc-texto-3); opacity: 1; }
.mc .mc-control:hover, .mc-campo > input:hover, .mc-campo > select:hover, .mc-campo > textarea:hover { border-color: var(--mc-texto-3); }
.mc .mc-control:focus, .mc-campo > input:focus, .mc-campo > select:focus, .mc-campo > textarea:focus {
  border-color: var(--mc-foco); box-shadow: var(--mc-sombra-foco); outline: none;
}
.mc textarea.mc-control, .mc .mc-campo > textarea { height: auto; min-height: 88px; padding: var(--mc-e-2) var(--mc-e-3); line-height: var(--mc-interlineado); resize: vertical; }
.mc select.mc-control, .mc .mc-campo > select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F8BA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.mc .mc-control[readonly], .mc .mc-campo > input[readonly] { background-color: var(--mc-superficie-hundida); color: var(--mc-texto-2); }
.mc .mc-control:disabled, .mc .mc-campo > input:disabled, .mc .mc-campo > select:disabled { background-color: var(--mc-superficie-hundida); color: var(--mc-texto-3); cursor: not-allowed; }
.mc .mc-control--numero, .mc .mc-campo > .mc-control--numero { text-align: right; font-variant-numeric: tabular-nums; }
.mc .mc-control--mono, .mc .mc-campo > .mc-control--mono { font-family: var(--mc-fuente-mono); letter-spacing: .03em; text-transform: uppercase; }
.mc .mc-control--mono::placeholder { font-family: var(--mc-fuente); letter-spacing: normal; text-transform: none; }
.mc .mc-control--sm { height: var(--mc-alto-control-sm); font-size: var(--mc-t-sm); }
/* Estado de error: aria-invalid="true" en el control */
.mc .mc-control[aria-invalid="true"], .mc .mc-campo > [aria-invalid="true"], .mc .mc-campo--error .mc-control {
  border-color: var(--mc-peligro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-peligro) 18%, transparent);
}
.mc .mc-campo--valido .mc-control { border-color: var(--mc-exito); }

/* Control con prefijo o sufijo ($ … MXN, % …) */
.mc-control-grupo { display: flex; align-items: stretch; width: 100%; }
.mc .mc-control-grupo .mc-control { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.mc .mc-control-grupo .mc-control:first-child { border-radius: var(--mc-radio-md) 0 0 var(--mc-radio-md); }
.mc .mc-control-grupo .mc-control:last-child { border-radius: 0 var(--mc-radio-md) var(--mc-radio-md) 0; }
.mc-control-grupo__extra {
  display: inline-flex; align-items: center; padding: 0 var(--mc-e-3);
  border: 1px solid var(--mc-borde-control); background: var(--mc-superficie-2); color: var(--mc-texto-2);
  font-size: var(--mc-t-sm); white-space: nowrap;
}
.mc-control-grupo__extra:first-child { border-right: 0; border-radius: var(--mc-radio-md) 0 0 var(--mc-radio-md); }
.mc-control-grupo__extra:last-child { border-left: 0; border-radius: 0 var(--mc-radio-md) var(--mc-radio-md) 0; }
/* Control con botón dentro (mostrar contraseña, limpiar) */
.mc-control-con-boton { position: relative; }
.mc .mc-control-con-boton .mc-control { padding-right: 44px; }
.mc .mc-control-con-boton .mc-boton { position: absolute; right: 3px; top: 3px; height: calc(var(--mc-alto-control) - 6px); width: calc(var(--mc-alto-control) - 6px); min-width: 0; box-shadow: none; }

/* Casillas, radios e interruptor */
.mc .mc-casilla { display: inline-flex; align-items: flex-start; gap: var(--mc-e-2); cursor: pointer; font-weight: var(--mc-peso-normal); color: var(--mc-texto); }
.mc .mc-casilla input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  border: 1px solid var(--mc-borde-control); border-radius: 5px; background: var(--mc-superficie);
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; cursor: pointer;
}
.mc .mc-casilla input[type="radio"] { border-radius: 50%; }
.mc .mc-casilla input:checked { border-color: var(--mc-primario); background: var(--mc-primario); }
.mc .mc-casilla input[type="checkbox"]:checked::before {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border: 2px solid var(--mc-primario-texto); border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.mc .mc-casilla input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-primario-texto); }
.mc .mc-casilla input:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc .mc-interruptor { display: inline-flex; align-items: center; gap: var(--mc-e-3); cursor: pointer; }
.mc .mc-interruptor input {
  position: relative; flex: none; width: 36px; height: 20px; margin: 0;
  border-radius: var(--mc-radio-total); background: var(--mc-gris-300);
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: background var(--mc-transicion);
}
.mc .mc-interruptor input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--mc-transicion);
}
.mc .mc-interruptor input:checked { background: var(--mc-primario); }
.mc .mc-interruptor input:checked::before { transform: translateX(16px); }
.mc .mc-interruptor input:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }

/* Opciones grandes (tipo de comprobante, método de pago): radios con tarjeta */
.mc-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mc-e-3); }
.mc .mc-opcion { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--mc-e-3) var(--mc-e-4); border: 1px solid var(--mc-borde-fuerte); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); cursor: pointer; }
.mc .mc-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.mc .mc-opcion__titulo { font-weight: var(--mc-peso-semi); }
.mc .mc-opcion__detalle { color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc .mc-opcion:has(input:checked) { border-color: var(--mc-primario); background: var(--mc-primario-suave); box-shadow: 0 0 0 1px var(--mc-primario); }
.mc .mc-opcion:has(input:focus-visible) { outline: 2px solid var(--mc-foco); outline-offset: 2px; }

/* Carga de archivos (CSD .cer/.key, logo) */
.mc .mc-carga {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mc-e-2);
  min-height: 120px; padding: var(--mc-e-5);
  border: 1.5px dashed var(--mc-borde-control); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie-2); color: var(--mc-texto-2); text-align: center; cursor: pointer;
  transition: border-color var(--mc-transicion), background var(--mc-transicion);
}
.mc .mc-carga:hover, .mc .mc-carga.es-arrastrando { border-color: var(--mc-primario); background: var(--mc-primario-suave); }
.mc .mc-carga input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mc .mc-carga__titulo { color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .mc-carga--lista { border-style: solid; border-color: var(--mc-exito-borde); background: var(--mc-exito-fondo); color: var(--mc-exito-texto); }

/* Filtros de listados */
.mc-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mc-e-3); padding: var(--mc-e-4) var(--mc-e-5); border-bottom: 1px solid var(--mc-borde); }
.mc-filtros .mc-campo { flex: 1 1 160px; max-width: 260px; }
.mc-filtros .mc-campo--buscar { flex: 2 1 260px; max-width: 420px; }
.mc-filtros__acciones { display: flex; gap: var(--mc-e-2); margin-left: auto; }
.mc-chips { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); }
.mc .mc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--mc-e-3);
  border: 1px solid var(--mc-borde-fuerte); border-radius: var(--mc-radio-total);
  background: var(--mc-superficie); color: var(--mc-texto-2); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-medio); cursor: pointer;
}
.mc .mc-chip[aria-pressed="true"], .mc .mc-chip.es-activo { border-color: var(--mc-primario); background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); }
.mc .mc-chip__quitar { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }

/* =============================================================================
   13. Insignias de estado (siempre con texto; el color nunca va solo)
   ============================================================================= */
.mc-insignia {
  --i-texto: var(--mc-neutro-texto); --i-fondo: var(--mc-neutro-fondo); --i-borde: var(--mc-neutro-borde); --i-punto: var(--mc-neutro);
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--i-borde); border-radius: var(--mc-radio-total);
  background: var(--i-fondo); color: var(--i-texto);
  font-size: var(--mc-t-xs); font-weight: var(--mc-peso-semi); line-height: 1; letter-spacing: .01em; white-space: nowrap;
}
.mc-insignia::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--i-punto); }
.mc-insignia--sin-punto::before { display: none; }
.mc-insignia--vigente  { --i-texto: var(--mc-exito-texto);   --i-fondo: var(--mc-exito-fondo);   --i-borde: var(--mc-exito-borde);   --i-punto: var(--mc-exito); }
.mc-insignia--cancelado { --i-texto: var(--mc-peligro-texto); --i-fondo: var(--mc-peligro-fondo); --i-borde: var(--mc-peligro-borde); --i-punto: var(--mc-peligro); }
.mc-insignia--en-proceso { --i-texto: var(--mc-aviso-texto); --i-fondo: var(--mc-aviso-fondo);   --i-borde: var(--mc-aviso-borde);   --i-punto: var(--mc-aviso); }
.mc-insignia--en-proceso::before { animation: mc-latido 1.6s ease-in-out infinite; }
.mc-insignia--borrador { --i-texto: var(--mc-neutro-texto); --i-fondo: var(--mc-superficie); --i-borde: var(--mc-borde-fuerte); --i-punto: var(--mc-neutro); border-style: dashed; }
.mc-insignia--pagado   { --i-texto: var(--mc-info-texto);    --i-fondo: var(--mc-info-fondo);    --i-borde: var(--mc-info-borde);    --i-punto: var(--mc-info); }
.mc-insignia--por-cobrar { --i-texto: var(--mc-texto-2);     --i-fondo: var(--mc-superficie);    --i-borde: var(--mc-borde-fuerte);  --i-punto: var(--mc-aviso); }
.mc-insignia--vencida  { --i-texto: var(--mc-peligro-texto); --i-fondo: var(--mc-superficie);    --i-borde: var(--mc-peligro-borde); --i-punto: var(--mc-peligro); }
.mc-insignia--info     { --i-texto: var(--mc-info-texto);    --i-fondo: var(--mc-info-fondo);    --i-borde: var(--mc-info-borde);    --i-punto: var(--mc-info); }
.mc-insignia--prueba   { --i-texto: var(--mc-aviso-texto);   --i-fondo: var(--mc-aviso-fondo);   --i-borde: var(--mc-aviso-borde);   --i-punto: var(--mc-aviso); text-transform: uppercase; letter-spacing: .05em; }
.mc-insignia--marca    { --i-texto: var(--mc-primario-suave-texto); --i-fondo: var(--mc-primario-suave); --i-borde: transparent; --i-punto: var(--mc-marca-verde); }
/* Por nivel, sin significado de estatus del CFDI (vigencia del CSD, saldo de timbres: 07 §4.6) */
.mc-insignia--aviso    { --i-texto: var(--mc-aviso-texto);   --i-fondo: var(--mc-aviso-fondo);   --i-borde: var(--mc-aviso-borde);   --i-punto: var(--mc-aviso); }
.mc-insignia--peligro  { --i-texto: var(--mc-peligro-texto); --i-fondo: var(--mc-peligro-fondo); --i-borde: var(--mc-peligro-borde); --i-punto: var(--mc-peligro); }
@keyframes mc-latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Punto de estado solo (en tablas densas), siempre acompañado de texto visible o mc-solo-lector */
.mc-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-neutro); vertical-align: middle; }
.mc-punto--vigente { background: var(--mc-exito); }
.mc-punto--cancelado { background: var(--mc-peligro); }
.mc-punto--en-proceso { background: var(--mc-aviso); }

/* =============================================================================
   14. Alertas y avisos flotantes
   ============================================================================= */
.mc-alerta {
  --a-texto: var(--mc-info-texto); --a-fondo: var(--mc-info-fondo); --a-borde: var(--mc-info-borde); --a-icono: var(--mc-info);
  display: flex; align-items: flex-start; gap: var(--mc-e-3);
  padding: var(--mc-e-3) var(--mc-e-4);
  border: 1px solid var(--a-borde); border-radius: var(--mc-radio-lg);
  background: var(--a-fondo); color: var(--mc-texto);
}
.mc-alerta > .mc-icono { margin-top: 1px; color: var(--a-icono); }
.mc-alerta__cuerpo { flex: 1 1 auto; min-width: 0; }
.mc-alerta__titulo { margin: 0 0 2px; color: var(--a-texto); font-size: var(--mc-t-base); font-weight: var(--mc-peso-semi); }
.mc-alerta__texto { margin: 0; color: var(--mc-texto-2); }
.mc-alerta__acciones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); margin-top: var(--mc-e-2); }
.mc-alerta__acciones a { color: var(--a-texto); font-weight: var(--mc-peso-semi); }
.mc-alerta__cerrar { margin: -4px -6px -4px 0; }
.mc-alerta--exito { --a-texto: var(--mc-exito-texto); --a-fondo: var(--mc-exito-fondo); --a-borde: var(--mc-exito-borde); --a-icono: var(--mc-exito); }
.mc-alerta--aviso { --a-texto: var(--mc-aviso-texto); --a-fondo: var(--mc-aviso-fondo); --a-borde: var(--mc-aviso-borde); --a-icono: var(--mc-aviso); }
.mc-alerta--peligro { --a-texto: var(--mc-peligro-texto); --a-fondo: var(--mc-peligro-fondo); --a-borde: var(--mc-peligro-borde); --a-icono: var(--mc-peligro); }
.mc-alerta--franja { border-radius: 0; border-width: 0 0 1px; padding: var(--mc-e-2) var(--mc-e-6); justify-content: center; align-items: center; }

.mc-avisos { position: fixed; right: var(--mc-e-5); bottom: var(--mc-e-5); z-index: var(--mc-z-aviso); display: flex; flex-direction: column; gap: var(--mc-e-2); width: min(380px, calc(100vw - 32px)); }
.mc-aviso {
  display: flex; align-items: flex-start; gap: var(--mc-e-3); padding: var(--mc-e-3) var(--mc-e-4);
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-3); color: var(--mc-texto);
  animation: mc-entrar 200ms cubic-bezier(.2, .7, .2, 1);
}
.mc-aviso--exito > .mc-icono { color: var(--mc-exito); }
.mc-aviso--peligro > .mc-icono { color: var(--mc-peligro); }
@keyframes mc-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   15. Tablas
   ============================================================================= */
.mc-tabla-contenedor { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mc-tabla { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--mc-texto); font-size: var(--mc-t-base); }
.mc-tabla th, .mc-tabla td { padding: var(--mc-e-2) var(--mc-e-4); height: 48px; border-bottom: 1px solid var(--mc-borde); text-align: left; vertical-align: middle; }
.mc-tabla thead th {
  position: sticky; top: 0; z-index: 1;
  height: 40px; padding-top: 0; padding-bottom: 0; background: var(--mc-superficie-2); color: var(--mc-texto-2);
  font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); white-space: nowrap;
}
.mc-tabla tbody tr { transition: background var(--mc-transicion); }
.mc-tabla tbody tr:hover { background: var(--mc-superficie-2); }
.mc-tabla tbody tr[aria-selected="true"], .mc-tabla tbody tr.es-seleccionado { background: var(--mc-superficie-seleccion); }
.mc-tabla tbody tr:last-child td { border-bottom: 0; }
.mc-tabla .mc-tabla__num, .mc-tabla td.mc-derecha, .mc-tabla th.mc-derecha { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-tabla .mc-tabla__acciones { width: 1%; text-align: right; white-space: nowrap; }
.mc-tabla .mc-tabla__casilla { width: 44px; padding-right: 0; }
.mc-tabla__principal { color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .mc-tabla a.mc-tabla__principal:hover { color: var(--mc-enlace); }
.mc-tabla__secundario { display: block; color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-tabla--compacta th, .mc-tabla--compacta td { height: 40px; padding: 0 var(--mc-e-3); }
.mc-tabla--bordes td + td, .mc-tabla--bordes th + th { border-left: 1px solid var(--mc-borde); }
.mc-tabla tfoot td { height: 44px; background: var(--mc-superficie-2); font-weight: var(--mc-peso-semi); border-bottom: 0; }
/* Ordenar: botón dentro del th con aria-sort en el th */
.mc .mc-tabla__ordenar { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mc-tabla th[aria-sort="ascending"] .mc-tabla__ordenar::after { content: "↑"; }
.mc-tabla th[aria-sort="descending"] .mc-tabla__ordenar::after { content: "↓"; }
/* Barra sobre la tabla (selección múltiple, totales) */
.mc-tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e-3); padding: var(--mc-e-3) var(--mc-e-5); border-bottom: 1px solid var(--mc-borde); background: var(--mc-superficie-seleccion); }

/* Conceptos del editor de factura: celdas con controles */
.mc-tabla--edicion td { height: auto; padding-top: var(--mc-e-2); padding-bottom: var(--mc-e-2); vertical-align: top; }
.mc .mc-tabla--edicion .mc-control { height: var(--mc-alto-control-sm); }

/* =============================================================================
   16. Paginación
   ============================================================================= */
.mc-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mc-e-3); padding: var(--mc-e-3) var(--mc-e-5); border-top: 1px solid var(--mc-borde); color: var(--mc-texto-2); font-size: var(--mc-t-sm); }
.mc-paginacion__paginas { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mc .mc-paginacion__pagina {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 var(--mc-e-2);
  border: 1px solid transparent; border-radius: var(--mc-radio-md);
  background: none; color: var(--mc-texto-2); font: inherit; font-weight: var(--mc-peso-medio); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
}
.mc .mc-paginacion__pagina:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); text-decoration: none; }
.mc .mc-paginacion__pagina[aria-current="page"] { border-color: var(--mc-primario); background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); }
.mc .mc-paginacion__pagina[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.mc-paginacion__tamano { display: flex; align-items: center; gap: var(--mc-e-2); }
.mc .mc-paginacion__tamano select {
  width: auto; height: 32px; padding: 0 30px 0 10px; border: 1px solid var(--mc-borde-control); border-radius: var(--mc-radio-md);
  background: var(--mc-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237F8BA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--mc-texto); font: inherit; font-size: var(--mc-t-sm); -webkit-appearance: none; appearance: none;
}

/* =============================================================================
   17. Modales: <dialog class="mc-modal"> (nativo, con ::backdrop)
   ============================================================================= */
.mc-modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  margin: auto; padding: 0;
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-xl);
  background: var(--mc-superficie); color: var(--mc-texto); box-shadow: var(--mc-sombra-3);
  overflow: hidden;
}
.mc-modal[open] { display: flex; flex-direction: column; animation: mc-entrar 180ms cubic-bezier(.2, .7, .2, 1); }
.mc-modal::backdrop { background: rgba(8, 14, 28, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mc-modal--lg { width: min(860px, calc(100vw - 32px)); }
.mc-modal--sm { width: min(420px, calc(100vw - 32px)); }
.mc-modal__encabezado { display: flex; align-items: flex-start; gap: var(--mc-e-3); padding: var(--mc-e-5) var(--mc-e-6) var(--mc-e-3); }
.mc-modal__titulo { margin: 0; font-size: var(--mc-t-lg); }
.mc-modal__subtitulo { margin: 4px 0 0; color: var(--mc-texto-2); }
.mc-modal__icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mc-primario-suave); color: var(--mc-primario); }
.mc-modal__icono--peligro { background: var(--mc-peligro-fondo); color: var(--mc-peligro); }
.mc-modal__icono--aviso { background: var(--mc-aviso-fondo); color: var(--mc-aviso); }
.mc-modal__cerrar { margin-left: auto; }
.mc-modal__cuerpo { padding: var(--mc-e-2) var(--mc-e-6) var(--mc-e-5); overflow-y: auto; }
.mc-modal__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mc-e-2); padding: var(--mc-e-4) var(--mc-e-6); border-top: 1px solid var(--mc-borde); background: var(--mc-superficie-2); }
/* Modal estático (para documentar o para el puente con ModalPopupExtender) */
.mc-modal--estatico { position: relative; display: flex; flex-direction: column; margin: 0; }

/* =============================================================================
   18. Pestañas y pasos
   ============================================================================= */
.mc-pestanas { display: flex; gap: var(--mc-e-1); border-bottom: 1px solid var(--mc-borde); overflow-x: auto; scrollbar-width: none; }
.mc .mc-pestana {
  position: relative; display: inline-flex; align-items: center; gap: var(--mc-e-2);
  height: 42px; padding: 0 var(--mc-e-3); border: 0; background: none;
  color: var(--mc-texto-2); font: inherit; font-weight: var(--mc-peso-medio); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.mc .mc-pestana:hover { color: var(--mc-texto); text-decoration: none; }
.mc .mc-pestana[aria-selected="true"], .mc .mc-pestana[aria-current="page"] { color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .mc-pestana[aria-selected="true"]::after, .mc .mc-pestana[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--mc-e-2); right: var(--mc-e-2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--mc-primario);
}
.mc-pestana__contador { padding: 0 6px; border-radius: var(--mc-radio-total); background: var(--mc-superficie-hundida); color: var(--mc-texto-2); font-size: var(--mc-t-xs); line-height: 18px; font-variant-numeric: tabular-nums; }

.mc-pasos { display: flex; gap: var(--mc-e-2); margin: 0; padding: 0; list-style: none; counter-reset: mc-paso; }
.mc-paso { flex: 1 1 0; min-width: 0; counter-increment: mc-paso; }
.mc .mc-paso > a, .mc .mc-paso > span {
  display: flex; align-items: center; gap: var(--mc-e-2); padding: var(--mc-e-2) 0;
  border-top: 3px solid var(--mc-borde); color: var(--mc-texto-3); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-medio); text-decoration: none;
}
.mc .mc-paso > a::before, .mc .mc-paso > span::before {
  content: counter(mc-paso); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px;
  border: 1.5px solid var(--mc-borde-fuerte); border-radius: 50%; font-size: var(--mc-t-xs); font-weight: var(--mc-peso-semi);
}
.mc .mc-paso--hecho > a, .mc .mc-paso--hecho > span { border-top-color: var(--mc-primario); color: var(--mc-texto-2); }
.mc .mc-paso--hecho > a::before, .mc .mc-paso--hecho > span::before { content: "✓"; border-color: var(--mc-primario); background: var(--mc-primario); color: var(--mc-primario-texto); }
.mc .mc-paso[aria-current="step"] > a, .mc .mc-paso[aria-current="step"] > span { border-top-color: var(--mc-primario); color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .mc-paso[aria-current="step"] > a::before, .mc .mc-paso[aria-current="step"] > span::before { border-color: var(--mc-primario); color: var(--mc-primario); }
.mc .mc-paso--error > a, .mc .mc-paso--error > span { border-top-color: var(--mc-peligro); color: var(--mc-peligro-texto); }
/* Variante compacta (registro de 7 pasos): solo números y el texto del paso actual */
.mc-pasos--compacto .mc-paso { flex: 0 0 auto; }
.mc-pasos--compacto .mc-paso[aria-current="step"] { flex: 1 1 auto; }
.mc-pasos--compacto .mc-paso:not([aria-current="step"]) .mc-paso__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mc-pasos--compacto .mc-paso > a, .mc-pasos--compacto .mc-paso > span { min-width: 34px; }

/* =============================================================================
   19. Estados vacíos, esqueletos, medidor
   ============================================================================= */
.mc-vacio { display: flex; flex-direction: column; align-items: center; gap: var(--mc-e-3); max-width: 440px; margin: 0 auto; padding: var(--mc-e-10) var(--mc-e-5); text-align: center; }
.mc-vacio__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--mc-radio-xl); background: var(--mc-primario-suave); color: var(--mc-primario); }
.mc-vacio__titulo { margin: 0; font-size: var(--mc-t-lg); }
.mc-vacio__texto { margin: 0; color: var(--mc-texto-2); }
.mc-vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mc-e-2); margin-top: var(--mc-e-2); }

.mc-esqueleto {
  display: block; height: 12px; border-radius: var(--mc-radio-sm);
  background: linear-gradient(90deg, var(--mc-superficie-hundida) 25%, var(--mc-superficie-hover) 37%, var(--mc-superficie-hundida) 63%);
  background-size: 400% 100%; animation: mc-brillo 1.4s ease infinite;
}
.mc-esqueleto--titulo { height: 20px; width: 40%; }
.mc-esqueleto--linea { width: 100%; }
@keyframes mc-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.mc-medidor { --mc-medidor-color: var(--mc-primario); --mc-medidor-pista: var(--mc-primario-suave); display: flex; flex-direction: column; gap: 6px; }
.mc-medidor__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mc-e-2); }
.mc-medidor__etiqueta { color: var(--mc-texto-2); font-size: var(--mc-t-sm); }
.mc-medidor__valor { color: var(--mc-texto); font-weight: var(--mc-peso-semi); font-variant-numeric: tabular-nums; }
.mc-medidor__barra { height: 8px; border-radius: var(--mc-radio-total); background: var(--mc-medidor-pista); overflow: hidden; }
.mc-medidor__relleno { display: block; height: 100%; width: var(--valor, 0%); border-radius: inherit; background: var(--mc-medidor-color); }
.mc-medidor--aviso { --mc-medidor-color: var(--mc-aviso); --mc-medidor-pista: var(--mc-aviso-fondo); }
.mc-medidor--peligro { --mc-medidor-color: var(--mc-peligro); --mc-medidor-pista: var(--mc-peligro-fondo); }

/* Lista de pendientes (tablero: certificados por vencer, folios por agotarse…) */
.mc-lista { margin: 0; padding: 0; list-style: none; }
.mc-lista__item { display: flex; align-items: flex-start; gap: var(--mc-e-3); padding: var(--mc-e-3) var(--mc-e-5); border-bottom: 1px solid var(--mc-borde); }
.mc-lista__item:last-child { border-bottom: 0; }
.mc-lista__icono { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--mc-radio-md); background: var(--mc-superficie-hundida); color: var(--mc-texto-2); }
.mc-lista__icono--aviso { background: var(--mc-aviso-fondo); color: var(--mc-aviso); }
.mc-lista__icono--peligro { background: var(--mc-peligro-fondo); color: var(--mc-peligro); }
.mc-lista__icono--exito { background: var(--mc-exito-fondo); color: var(--mc-exito); }
.mc-lista__titulo { margin: 0; font-weight: var(--mc-peso-semi); }
.mc-lista__texto { margin: 2px 0 0; color: var(--mc-texto-2); font-size: var(--mc-t-sm); }

/* Totales del comprobante */
.mc-totales { display: grid; grid-template-columns: 1fr auto; gap: var(--mc-e-2) 0; margin: 0; font-variant-numeric: tabular-nums; }
.mc-totales dt { color: var(--mc-texto-2); }
.mc-totales dd { margin: 0; padding-left: var(--mc-e-4); text-align: right; font-weight: var(--mc-peso-medio); }
.mc-totales__total { padding-top: var(--mc-e-3); border-top: 1px solid var(--mc-borde); color: var(--mc-texto) !important; font-size: var(--mc-t-lg); font-weight: var(--mc-peso-semi) !important; }

/* =============================================================================
   20. Gráfica de barras agrupadas (HTML/CSS, sin librerías)
   Cada mes es un grupo con foco y tooltip; los valores van en --v (0 a 100 % del máximo).
   ============================================================================= */
.mc-grafica { display: flex; flex-direction: column; gap: var(--mc-e-3); }
.mc-grafica__leyenda { display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-5); margin: 0; padding: 0; list-style: none; color: var(--mc-texto-2); font-size: var(--mc-t-sm); }
.mc-grafica__leyenda li { display: inline-flex; align-items: center; gap: var(--mc-e-2); }
.mc-grafica__muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--mc-serie-1); }
.mc-grafica__muestra--2 { background: var(--mc-serie-2); }
.mc-grafica__muestra--3 { background: var(--mc-serie-3); }
.mc-grafica__lienzo { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--mc-e-2); height: 240px; }
.mc-grafica__eje-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 22px; color: var(--mc-texto-3); font-size: var(--mc-t-xs); text-align: right; font-variant-numeric: tabular-nums; }
.mc-grafica__area {
  position: relative; display: flex; align-items: stretch; gap: 2px;
  padding-bottom: 22px;
  background-image: linear-gradient(to top, var(--mc-grafica-rejilla) 1px, transparent 1px);
  background-size: 100% calc((100% - 22px) / 4);
  background-position: 0 calc(100% - 22px);
  border-bottom: 0;
}
.mc-grafica__area::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: var(--mc-grafica-eje); }
.mc-grafica__grupo { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-width: 0; border-radius: var(--mc-radio-sm); outline-offset: 0; }
.mc-grafica__grupo:hover, .mc-grafica__grupo:focus-visible { background: color-mix(in srgb, var(--mc-texto) 5%, transparent); }
.mc-grafica__barra { width: min(12px, 26%); height: var(--v, 0%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--mc-serie-1); }
.mc-grafica__barra--2 { background: var(--mc-serie-2); }
.mc-grafica__barra--3 { background: var(--mc-serie-3); }
.mc-grafica__mes { position: absolute; left: 0; right: 0; bottom: -22px; color: var(--mc-texto-3); font-size: var(--mc-t-xs); line-height: 22px; text-align: center; }
.mc-grafica__tip {
  position: absolute; bottom: calc(100% - 8px); left: 50%; z-index: 5; transform: translateX(-50%);
  display: none; min-width: 168px; padding: var(--mc-e-2) var(--mc-e-3);
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-md);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-2); color: var(--mc-texto);
  font-size: var(--mc-t-xs); white-space: nowrap; pointer-events: none;
}
.mc-grafica__grupo:hover .mc-grafica__tip, .mc-grafica__grupo:focus-visible .mc-grafica__tip { display: block; }
.mc-grafica__tip strong { display: block; margin-bottom: 4px; font-size: var(--mc-t-sm); }
.mc-grafica__tip span { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-variant-numeric: tabular-nums; }
.mc-grafica__tip span i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: auto; }
.mc-grafica__grupo:first-child .mc-grafica__tip { left: 0; transform: none; }
.mc-grafica__grupo:last-child .mc-grafica__tip { left: auto; right: 0; transform: none; }
.mc-grafica__tabla summary { color: var(--mc-enlace); font-size: var(--mc-t-sm); cursor: pointer; }

/* =============================================================================
   21. Visor de documentos (PDF del CFDI y visores DevExpress existentes)
   El documento es «papel»: se queda blanco también en modo oscuro.
   ============================================================================= */
.mc-visor {
  position: relative; width: 100%;
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie-hundida); overflow: hidden;
}
.mc-visor iframe, .mc-visor embed, .mc-visor object { display: block; width: 100%; height: min(78vh, 1100px); border: 0; background: #FFFFFF; }
.mc-visor__hoja { margin: var(--mc-e-6) auto; width: min(816px, calc(100% - 32px)); aspect-ratio: 8.5 / 11; background: #FFFFFF; box-shadow: var(--mc-sombra-2); color: #151C27; }
.mc-visor__marca-agua {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: rgba(217, 45, 32, .18); font-size: clamp(40px, 9vw, 120px); font-weight: var(--mc-peso-negrita); letter-spacing: .1em; transform: rotate(-24deg);
}
.mc-visor .dxrpControl, .mc-visor .dxrpViewer, .mc-visor table[id*="rvFicha"] { background: #FFFFFF; color: #151C27; }

/* =============================================================================
   22. Acceso: inicio de sesión, registro y recuperación
   <body class="mc"><div class="mc-acceso"><aside class="mc-acceso__marca">…</aside><main class="mc-acceso__panel">…
   ============================================================================= */
.mc-acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; background: var(--mc-superficie); }
.mc-acceso__marca {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--mc-e-8);
  padding: var(--mc-e-10) var(--mc-e-12); overflow: hidden;
  background: var(--mc-marca-azul); color: #DCE6F3;
}
.mc-acceso__marca::after {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 166, 153, .45), rgba(0, 166, 153, 0)); pointer-events: none;
}
.mc-acceso__marca img { align-self: flex-start; height: 34px; width: auto; }
.mc-acceso__lema { max-width: 440px; margin: 0; color: #FFFFFF; font-size: var(--mc-t-4xl); font-weight: var(--mc-peso-semi); line-height: 1.15; letter-spacing: -.025em; }
.mc-acceso__lema em { font-style: normal; color: #5FD8CB; }
.mc-acceso__puntos { display: flex; flex-direction: column; gap: var(--mc-e-3); margin: 0; padding: 0; list-style: none; }
.mc-acceso__puntos li { display: flex; gap: var(--mc-e-3); align-items: flex-start; }
.mc-acceso__puntos .mc-icono { color: #5FD8CB; margin-top: 1px; }
.mc-acceso__credito { color: #9DB3D3; font-size: var(--mc-t-sm); }
.mc-acceso__credito a { color: #FFFFFF; }
.mc-acceso__panel { display: flex; flex-direction: column; justify-content: center; padding: var(--mc-e-10) var(--mc-e-8); }
.mc-acceso__caja { width: 100%; max-width: 400px; margin: 0 auto; }
.mc-acceso__caja--ancha { max-width: 560px; }
.mc-acceso__titulo { margin: 0 0 var(--mc-e-1); font-size: var(--mc-t-2xl); }
.mc-acceso__subtitulo { margin: 0 0 var(--mc-e-6); color: var(--mc-texto-2); }
.mc-acceso__pie { margin-top: var(--mc-e-6); color: var(--mc-texto-2); text-align: center; }
.mc-acceso__legal { margin-top: var(--mc-e-8); color: var(--mc-texto-3); font-size: var(--mc-t-xs); text-align: center; }
.mc-acceso__legal a { color: var(--mc-texto-2); }
.mc-separador-texto { display: flex; align-items: center; gap: var(--mc-e-3); color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-separador-texto::before, .mc-separador-texto::after { content: ""; flex: 1; height: 1px; background: var(--mc-borde); }
.mc-fuerza { display: flex; gap: 4px; }
.mc-fuerza span { flex: 1; height: 4px; border-radius: 2px; background: var(--mc-superficie-hundida); }
.mc-fuerza[data-nivel="1"] span:nth-child(-n+1) { background: var(--mc-peligro); }
.mc-fuerza[data-nivel="2"] span:nth-child(-n+2) { background: var(--mc-aviso); }
.mc-fuerza[data-nivel="3"] span:nth-child(-n+3) { background: var(--mc-exito); }
.mc-fuerza[data-nivel="4"] span { background: var(--mc-exito); }

/* 07 §4.2-§5.3 · Complementos del acceso: avisos de campo, código de verificación, medidor con texto y elegir empresa */
.mc-acceso__enlace { font-size: var(--mc-t-sm); }
.mc .mc-ayuda--aviso { color: var(--mc-aviso-texto); }
.mc-acceso .mc-alerta, .mc-cuenta-marco .mc-contenido > .mc-alerta { margin-bottom: var(--mc-e-5); }
.mc-fuerza__texto { min-height: 1.3em; margin: 0; color: var(--mc-texto-3); font-size: var(--mc-t-xs); }
.mc .mc-control--codigo { height: 56px; padding-left: .5em; font-family: var(--mc-fuente-mono); font-size: var(--mc-t-2xl); font-weight: var(--mc-peso-semi); letter-spacing: .5em; text-align: center; }
.mc-empresas { display: flex; flex-direction: column; gap: var(--mc-e-3); margin: 0; padding: 0; list-style: none; }
.mc .mc-empresa-opcion {
  display: flex; align-items: center; gap: var(--mc-e-4); width: 100%; padding: var(--mc-e-4);
  border: 1px solid var(--mc-borde-fuerte); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); box-shadow: var(--mc-sombra-1);
  color: var(--mc-texto); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--mc-transicion), box-shadow var(--mc-transicion);
}
.mc .mc-empresa-opcion:hover { border-color: var(--mc-primario); box-shadow: var(--mc-sombra-2); }
.mc .mc-empresa-opcion:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc .mc-empresa-opcion[aria-current="true"] { border-color: var(--mc-primario); background: var(--mc-superficie-seleccion); }
.mc-empresa-opcion__texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.mc-empresa-opcion__nombre { overflow: hidden; font-weight: var(--mc-peso-semi); text-overflow: ellipsis; white-space: nowrap; }
.mc-empresa-opcion__detalle { color: var(--mc-texto-3); font-size: var(--mc-t-sm); }
.mc-empresa-opcion__insignias { display: flex; flex-wrap: wrap; gap: var(--mc-e-1); margin-top: var(--mc-e-1); }
.mc-empresa-opcion__ir { flex: none; color: var(--mc-texto-3); }
/* Registro en pasos y bienvenida (07 §5.1-§5.3) */
.mc-acceso .mc-pasos { margin-bottom: var(--mc-e-6); }
.mc-registro__avisos { margin: var(--mc-e-1) 0 0; padding-left: 1.2em; }
.mc-registro__avisos li + li { margin-top: var(--mc-e-1); }
.mc-registro__cambiar { margin-top: var(--mc-e-5); padding-top: var(--mc-e-5); border-top: 1px solid var(--mc-borde); }
.mc .mc-carga:focus-within { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
.mc-bienvenida__logo { display: flex; justify-content: center; padding: var(--mc-e-4); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: #FFFFFF; }
.mc-bienvenida__logo img { max-width: 100%; height: auto; max-height: 96px; width: auto; object-fit: contain; }
.mc-acceso__pie.mc-fila { flex-wrap: wrap; }
/* Mi cuenta (07 §4.6-§4.8): pestañas, formularios por tarjeta, empresas con sus acciones y la franja del correo */
.mc-mi-cuenta__angosto { max-width: 440px; }
.mc .mc-empresa-fila { align-items: flex-start; }
.mc-empresa-fila__acciones { gap: var(--mc-e-2); }
.mc-tarjeta__encabezado > .mc-boton { flex: none; }
.mc-mi-cuenta .mc-tarjeta__encabezado { flex-wrap: wrap; }
.mc-mi-cuenta .mc-tarjeta__encabezado > div { flex: 1 1 260px; min-width: 0; }
.mc-mi-cuenta .mc-lista__item > .mc-boton { flex: none; }
.mc-franja-correo { align-items: center; flex-wrap: wrap; margin-bottom: var(--mc-e-5); }
.mc-franja-correo .mc-alerta__cuerpo { flex: 1 1 240px; }
.mc-aviso > .mc-crecer { margin: 0; padding-top: 1px; }
/* «Mi cuenta» con el diseño clásico del panel: encabezado propio y contenido angosto (07 §4.6) */
.mc-cuenta-marco { min-height: 100vh; background: var(--mc-fondo); }
.mc-cuenta-marco .mc-encabezado__logo img { display: block; height: 26px; width: auto; }
.mc-cuenta-marco .mc-encabezado__logo { display: inline-flex; }
.mc-cuenta-marco .mc-encabezado { padding: 0 var(--mc-e-6); }
.mc-cuenta-marco .mc-encabezado__logo .mc-logo--oscuro, :root[data-tema="oscuro"] .mc-cuenta-marco .mc-encabezado__logo .mc-logo--claro { display: none; }
:root[data-tema="oscuro"] .mc-cuenta-marco .mc-encabezado__logo .mc-logo--oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .mc-cuenta-marco .mc-encabezado__logo .mc-logo--claro { display: none; }
  :root:not([data-tema]) .mc-cuenta-marco .mc-encabezado__logo .mc-logo--oscuro { display: block; }
}

/* =============================================================================
   23. Puente con el panel heredado (WebForms)
   Viste las clases que ya usan las páginas t* (tcomprobantes, tpagos…) y main.js, sin cambiar su markup.
   No cambia comportamiento: .ocultar sigue ocultando, los id y data-* siguen igual.
   Se quita cuando la última página esté migrada a componentes mc-.
   ============================================================================= */
/* main.css fija html { font-size: 14px }: con eso cada rem de este archivo mediría 7/8. Se regresa al tamaño del
   navegador (16 px por omisión, y respeta a quien lo agranda). */
:root:has(> body.mc) { font-size: 100%; }
.mc ::placeholder { color: var(--mc-texto-3); font-size: 100%; opacity: 1; }
/* main.css viste h1-h6, a, b, input y select con selectores de elemento (0,0,1), que le ganan a la base :where()
   de §4. Aquí se igualan con la misma especificidad y, por ir después, ganan; cualquier clase sigue ganando. */
:where(.mc) h1, :where(.mc) h2, :where(.mc) h3, :where(.mc) h4, :where(.mc) h5, :where(.mc) h6 { color: var(--mc-texto); font-family: var(--mc-fuente); font-weight: var(--mc-peso-semi); }
:where(.mc) h1 { font-size: var(--mc-t-2xl); } :where(.mc) h2 { font-size: var(--mc-t-xl); } :where(.mc) h3 { font-size: var(--mc-t-lg); }
:where(.mc) h4 { font-size: var(--mc-t-md); } :where(.mc) h5, :where(.mc) h6 { font-size: var(--mc-t-base); }
:where(.mc) a { color: var(--mc-enlace); }
:where(.mc) b, :where(.mc) strong { font-family: inherit; font-weight: var(--mc-peso-semi); }
:where(.mc) input, :where(.mc) select, :where(.mc) textarea, :where(.mc) button { font-family: inherit; letter-spacing: normal; }
.mc .vista {
  display: block; margin: 0 0 var(--mc-e-5); padding: var(--mc-e-5);
  border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-1);
}
.mc .vista h4, .mc #contendedorDisenios > header h4 {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e-3);
  margin: 0 0 var(--mc-e-4); padding: 0; color: var(--mc-texto);
  font-family: var(--mc-fuente); font-size: var(--mc-t-md); font-weight: var(--mc-peso-semi); letter-spacing: normal; text-transform: none;
}
.mc .vista .row { display: flex; flex-wrap: wrap; gap: var(--mc-e-4); margin: 0 0 var(--mc-e-4); }
.mc .vista .row > [class*="ancho"] { flex: 1 1 200px; width: auto; min-width: 0; margin: 0; padding: 0; }
.mc .vista .row > .ancho100 { flex-basis: 100%; }
.mc .vista .row > .ancho50, .mc .vista .row > .ancho60, .mc .vista .row > .ancho65, .mc .vista .row > .ancho70, .mc .vista .row > .ancho80 { flex-basis: 320px; }

/* Campos */
.mc .contenedor-el { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; font-family: var(--mc-fuente); letter-spacing: normal; }
.mc .contenedor-el > div:has(> label) { display: flex; flex-direction: column; gap: 6px; }   /* UpdatePanel con su etiqueta adentro */
.mc .contenedor-el label, .mc .contenedor-el > span:not([class*="icon-"]):not(.mc-boton) {
  margin: 0; padding: 0; color: var(--mc-texto); font-family: var(--mc-fuente); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi);
  letter-spacing: normal; text-transform: none; line-height: 1.3;
}
.mc .contenedor-el input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
.mc .contenedor-el select,
.mc .contenedor-el textarea,
.mc div.filtros .contenedor-el input,
.mc div.filtros .contenedor-el select,
.mc table.conceptos .contenedor-el input {
  width: 100% !important; max-width: none;
  height: var(--mc-alto-control); margin: 0; padding: 0 var(--mc-e-3);
  border: 1px solid var(--mc-borde-control); border-radius: var(--mc-radio-md);
  background-color: var(--mc-superficie); color: var(--mc-texto);
  font-family: var(--mc-fuente); font-size: var(--mc-t-base); font-weight: var(--mc-peso-normal); letter-spacing: normal;
  box-shadow: none;
}
.mc .contenedor-el textarea { height: auto; min-height: 88px; padding: var(--mc-e-2) var(--mc-e-3); }
.mc .contenedor-el input:focus, .mc .contenedor-el select:focus, .mc .contenedor-el textarea:focus { border-color: var(--mc-foco); box-shadow: var(--mc-sombra-foco); outline: none; }
.mc .contenedor-el input.error, .mc .contenedor-el select.error, .mc [required].error { border-color: var(--mc-peligro) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-peligro) 18%, transparent) !important; }
.mc .contenedor-el input.mostrarValor + span { right: 10px; color: var(--mc-texto-3); }
.mc .contenedor-error, .mc .contenedor-error span { color: var(--mc-peligro-texto); font-size: var(--mc-t-sm); }

/* Botones y enlaces heredados */
.mc .boton, .mc a.boton, .mc input.boton, .mc span.boton, .mc .forma-acciones .boton, .mc .navegacion .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-e-2);
  width: auto; height: var(--mc-alto-control); min-width: var(--mc-alto-control); margin: 0;
  padding: 0 var(--mc-e-4); line-height: 1;
  border: 1px solid transparent; border-radius: var(--mc-radio-md);
  background: var(--mc-primario); color: var(--mc-primario-texto); box-shadow: var(--mc-sombra-1);
  font-family: var(--mc-fuente); font-size: var(--mc-t-base); font-weight: var(--mc-peso-semi); letter-spacing: normal; text-transform: none; text-decoration: none;
  cursor: pointer;
}
.mc .boton:hover { background: var(--mc-primario-hover); color: var(--mc-primario-texto); text-decoration: none; }
.mc .boton:focus-visible { outline: 2px solid var(--mc-foco); outline-offset: 2px; }
/* Acciones masivas de los listados (Desactivar / Eliminar con data-accion="estatus"): no son la acción principal */
.mc .boton[data-accion="estatus"] { border-color: var(--mc-peligro-borde); background: var(--mc-superficie); color: var(--mc-peligro-texto); box-shadow: none; }
.mc .boton[data-accion="estatus"]:hover { background: var(--mc-peligro-fondo); color: var(--mc-peligro-texto); }
/* Botones de «regresar» o «cancelar» heredados que deben verse secundarios: agrega la clase mc-secundario en CssClass */
.mc .boton.mc-secundario, .mc .mc-secundario > .boton { border-color: var(--mc-borde-fuerte); background: var(--mc-superficie); color: var(--mc-texto); }
.mc .boton.mc-secundario:hover, .mc .mc-secundario > .boton:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); }
.mc a:has(> span.boton) { display: inline-flex; text-decoration: none; }
.mc .link, .mc span.link, .mc a.link { color: var(--mc-enlace); font-family: var(--mc-fuente); font-size: var(--mc-t-base); letter-spacing: normal; text-decoration: none; cursor: pointer; }
.mc .link:hover { color: var(--mc-enlace-hover); text-decoration: underline; }
.mc .forma-acciones, .mc nav.navegacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mc-e-3); margin: var(--mc-e-5) 0 0; padding: 0; }
.mc .forma-acciones br { display: none; }
.mc .cont-icon { display: inline-flex; align-items: center; gap: var(--mc-e-2); margin: 0 0 var(--mc-e-2); }

/* Tablas heredadas (table.catalogo) */
.mc table.catalogo { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); overflow: hidden; font-family: var(--mc-fuente); letter-spacing: normal; }
.mc table.catalogo thead tr td, .mc table.catalogo thead th {
  height: 40px; padding: 0 var(--mc-e-4); border-bottom: 1px solid var(--mc-borde); background: var(--mc-superficie-2);
  color: var(--mc-texto-2); font-family: var(--mc-fuente); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); text-transform: none; letter-spacing: normal;
}
.mc table.catalogo tbody td { height: 48px; padding: 0 var(--mc-e-4); border-bottom: 1px solid var(--mc-borde); color: var(--mc-texto); font-family: var(--mc-fuente); font-size: var(--mc-t-base); letter-spacing: normal; }
.mc table.catalogo tbody tr:hover td { background: var(--mc-superficie-2); }
.mc table.catalogo tbody tr:last-child td { border-bottom: 0; }
.mc table.catalogo tbody td:first-child, .mc table.catalogo tbody td:last-child { border-left: 0; border-right: 0; }
/* responsive-tables (main.js) en celular: columna fija (.pinned) + copia desplazable; se ven como una sola tarjeta */
.mc div.table-wrapper { border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); }
.mc div.table-wrapper table.catalogo { border: 0; border-radius: 0; }
.mc div.table-wrapper .pinned { border: 0; border-right: 1px solid var(--mc-borde); border-radius: 0; background: var(--mc-superficie); }
.mc table.catalogo tbody a { color: var(--mc-enlace); }
.mc table.catalogo .icon-SubMenu, .mc table.catalogo .icon-Menu, .mc .vista .icon-Menu.dropdown-trigger {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--mc-radio-md); color: var(--mc-texto-2); cursor: pointer;
}
.mc table.catalogo .icon-SubMenu:hover, .mc .dropdown-trigger.selected { background: var(--mc-superficie-hover); color: var(--mc-texto); }

/* Editor de comprobantes heredado: tabla de conceptos y totales (main.css fija negros y blancos) */
.mc table.conceptos thead tr td, .mc table.conceptos tbody td { color: var(--mc-texto-2); font-family: var(--mc-fuente); letter-spacing: normal; }
.mc table.conceptos thead tr td { font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); }
.mc table.conceptos tbody textarea { background-color: transparent; color: var(--mc-texto); font-family: var(--mc-fuente); }
.mc table.conceptos tbody a { color: var(--mc-enlace); }
.mc .contenedor-totales, .mc table.conceptos .contenedor-totales { border-color: var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); overflow: hidden; }
.mc .contenedor-totales > .table, .mc .contenedor-totales > .table > :first-child, .mc .contenedor-totales > .table > :first-child > :first-child { border-color: var(--mc-borde) !important; }
.mc .contenedor-totales label, .mc table.conceptos .contenedor-totales label { color: var(--mc-texto-2); font-family: var(--mc-fuente); letter-spacing: normal; }
.mc .contenedor-totales > .table > :first-child, .mc table.conceptos .contenedor-totales > .table > :first-child { color: var(--mc-texto); font-family: var(--mc-fuente); font-weight: var(--mc-peso-semi); }
.mc .contenedor-totales input, .mc table.conceptos .contenedor-totales input { background-color: transparent; color: var(--mc-texto); font-family: var(--mc-fuente); font-variant-numeric: tabular-nums; letter-spacing: normal; }

/* Estatus heredados → insignias */
.mc .fondo-color, .mc table.catalogo .fondo-color {
  display: inline-flex; align-items: center; gap: 6px; width: auto; height: 22px; padding: 0 8px; line-height: 1;
  border: 1px solid var(--mc-neutro-borde); border-radius: var(--mc-radio-total);
  background: var(--mc-neutro-fondo); color: var(--mc-neutro-texto); font-family: var(--mc-fuente); font-size: var(--mc-t-xs); font-weight: var(--mc-peso-semi); letter-spacing: normal;
}
.mc .fondo-color::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mc .fondo-color.fondo-color-azul { border-color: var(--mc-info-borde); background: var(--mc-info-fondo); color: var(--mc-info-texto); }
.mc .fondo-color.fondo-color-rojo { border-color: var(--mc-borde-fuerte); background: var(--mc-superficie); color: var(--mc-texto-2); }   /* «Pendiente» de pago: no es un error */
.mc .fondo-color.fondo-color-rojo::before { background: var(--mc-aviso); }
.mc .fondo-color.cancelado, .mc table.catalogo .cancelado { border-color: var(--mc-peligro-borde); background: var(--mc-peligro-fondo); color: var(--mc-peligro-texto); }
.mc .circulo-verde, .mc .circulo-rojo, .mc .circulo-azul, .mc table.catalogo .circulo-verde { width: 8px; height: 8px; margin-right: var(--mc-e-2); border-radius: 50%; }
.mc .circulo-verde, .mc table.catalogo .circulo-verde { background: var(--mc-exito); }
.mc .circulo-rojo { background: var(--mc-peligro); }
.mc .circulo-azul { background: var(--mc-marca-verde); }

/* Filtros heredados */
.mc .header-filtros h4 { display: flex; align-items: center; gap: var(--mc-e-2); margin: 0 0 var(--mc-e-3); color: var(--mc-texto-2); font-family: var(--mc-fuente); font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); letter-spacing: normal; text-transform: none; cursor: pointer; }
.mc div.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mc-e-3); margin: 0 0 var(--mc-e-4); padding: 0; }
.mc div.filtros .contenedor-el { flex: 1 1 150px; max-width: 260px; }
.mc div.filtros .contenedor-el:last-child { margin: 0; }

/* Paginado heredado (main.js lee .paginado .total span y .paginado .offset .selected; no cambiar el markup) */
.mc nav.paginado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mc-e-3); height: auto; margin: var(--mc-e-3) 0 0; color: var(--mc-texto-2); font-family: var(--mc-fuente); font-size: var(--mc-t-sm); letter-spacing: normal; }
.mc nav.paginado > * { width: auto; font-size: inherit; }
.mc nav.paginado .pagination { position: static; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: inherit; }
.mc nav.paginado .pagination li a, .mc nav.paginado .pagination li span {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--mc-radio-md);
  background: none; color: var(--mc-texto-2); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
}
.mc nav.paginado .pagination li a:hover { background: var(--mc-superficie-hover); color: var(--mc-texto); }
.mc nav.paginado .pagination li.active a, .mc nav.paginado .pagination li.active span { border-color: var(--mc-primario); background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); }
.mc nav.paginado .pagination li.disabled a { color: var(--mc-texto-3); font-weight: var(--mc-peso-normal); pointer-events: none; }
.mc nav.paginado .offset a { padding: 2px 6px; border-radius: var(--mc-radio-sm); color: var(--mc-enlace); cursor: pointer; }
.mc nav.paginado .offset a.selected { background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); font-weight: var(--mc-peso-semi); }

/* Menús desplegables heredados (main.js los posiciona con left/top) */
.mc .dropdown-content {
  position: absolute; z-index: var(--mc-z-desplegable); display: flex; flex-direction: column; gap: 1px;
  width: 270px; padding: var(--mc-e-2); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-3);
}
.mc .dropdown-content.ocultar { display: none !important; }
.mc .dropdown-content a { display: flex; align-items: center; height: auto; min-height: 36px; padding: 0 var(--mc-e-3); border: 0; border-radius: var(--mc-radio-md); color: var(--mc-texto) !important; font-family: var(--mc-fuente); font-size: var(--mc-t-base); line-height: 1.3; letter-spacing: normal; text-decoration: none; }
.mc .dropdown-content a:hover { background: var(--mc-superficie-hover); color: var(--mc-texto) !important; text-decoration: none; }
.mc .dropdown-content a[data-accion^="CANCELAR"] { color: var(--mc-peligro-texto) !important; }
.mc .dropdown-background { position: fixed; inset: 0; z-index: calc(var(--mc-z-desplegable) - 1); background: transparent; }

/* Modales heredados: AjaxControlToolkit ModalPopupExtender (.modal-net + BackgroundCssClass="background") */
.mc .background:not(.mc-no-velo) { background: rgba(8, 14, 28, .55) !important; }
.mc .modal-net {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  padding: var(--mc-e-6); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-xl);
  background: var(--mc-superficie); box-shadow: var(--mc-sombra-3); color: var(--mc-texto); font-family: var(--mc-fuente); letter-spacing: normal;
}
.mc .modal-net h5 { margin: 0 0 var(--mc-e-4); font-size: var(--mc-t-lg); font-weight: var(--mc-peso-semi); }
.mc .modal-net p { display: flex; justify-content: flex-end; gap: var(--mc-e-3); margin: var(--mc-e-4) 0 0; }
.mc .modal-net .background { display: none; }

/* jquery-confirm (theme 'my-simple'), usado por Alerta() de master.js */
.mc .jconfirm .jconfirm-bg { background: rgba(8, 14, 28, .55); opacity: 1; }
.mc .jconfirm .jconfirm-box {
  padding: var(--mc-e-6) !important; border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-xl) !important;
  background: var(--mc-superficie) !important; box-shadow: var(--mc-sombra-3) !important; color: var(--mc-texto); font-family: var(--mc-fuente); text-align: left;
}
.mc .jconfirm .jconfirm-box:focus-visible { outline: none; }   /* el foco real va al botón; la caja solo lo recibe para Escape */
.mc .jconfirm .jconfirm-box .jconfirm-title-c .jconfirm-title { color: var(--mc-texto); font-family: var(--mc-fuente); font-size: var(--mc-t-lg) !important; font-weight: var(--mc-peso-semi) !important; }
.mc .jconfirm .jconfirm-box div.jconfirm-content { color: var(--mc-texto-2); font-family: var(--mc-fuente); font-size: var(--mc-t-base); }
.mc .jconfirm .jconfirm-box .jconfirm-buttons { display: flex; flex-direction: row-reverse; gap: var(--mc-e-2); float: none; }
.mc .jconfirm .jconfirm-box .jconfirm-buttons button {
  height: var(--mc-alto-control); margin: 0 !important; padding: 0 var(--mc-e-4) !important; line-height: 1; border: 1px solid var(--mc-borde-fuerte) !important; border-radius: var(--mc-radio-md) !important;
  background: var(--mc-superficie) !important; color: var(--mc-texto) !important; font-family: var(--mc-fuente); font-size: var(--mc-t-base) !important; font-weight: var(--mc-peso-semi) !important; text-transform: none !important;
}
.mc .jconfirm .jconfirm-box .jconfirm-buttons button:first-child { border-color: transparent !important; background: var(--mc-primario) !important; color: var(--mc-primario-texto) !important; }
.mc .jconfirm .jconfirm-box .jconfirm-closeIcon { color: var(--mc-texto-3); }

/* chosen (selects con búsqueda) */
.mc .chosen-container { height: auto; font-family: var(--mc-fuente); font-size: var(--mc-t-base); letter-spacing: normal; }
.mc .chosen-container-single .chosen-single span { margin-right: 0; color: inherit; font-size: inherit; line-height: normal; }
.mc .chosen-container-single .chosen-single div { top: 0; right: 10px; display: flex; align-items: center; width: 16px; }
.mc .chosen-container-single .chosen-single div b { height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F8BA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px !important; }
.mc .chosen-container-single .chosen-single {
  display: flex; align-items: center; height: var(--mc-alto-control); padding: 0 36px 0 var(--mc-e-3);
  border: 1px solid var(--mc-borde-control); border-radius: var(--mc-radio-md); background: var(--mc-superficie); box-shadow: none; color: var(--mc-texto); line-height: 1;
}
.mc .chosen-container-active .chosen-single, .mc .chosen-container-active.chosen-with-drop .chosen-single { border-color: var(--mc-foco); box-shadow: var(--mc-sombra-foco); background: var(--mc-superficie); }
.mc .chosen-container .chosen-drop { margin-top: 4px; border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-md); background: var(--mc-superficie); box-shadow: var(--mc-sombra-3); }
.mc .chosen-container .chosen-results { color: var(--mc-texto); }
.mc .chosen-container .chosen-results li { padding: 8px 12px; border-radius: var(--mc-radio-sm); }
.mc .chosen-container .chosen-results li.highlighted { background: var(--mc-primario-suave); color: var(--mc-primario-suave-texto); }
.mc .chosen-container-single .chosen-search input[type="text"] { height: 34px; border: 1px solid var(--mc-borde-control); border-radius: var(--mc-radio-md); background-color: var(--mc-superficie); color: var(--mc-texto); }

/* jQuery UI datepicker (campos .fecha) */
.mc .ui-datepicker { z-index: var(--mc-z-desplegable) !important; padding: var(--mc-e-3); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); box-shadow: var(--mc-sombra-3); color: var(--mc-texto); font-family: var(--mc-fuente); }
.mc .ui-datepicker .ui-datepicker-header { border: 0; background: none; color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .ui-datepicker td a, .mc .ui-datepicker td span { border: 0 !important; border-radius: var(--mc-radio-sm); background: none !important; color: var(--mc-texto) !important; text-align: center; }
.mc .ui-datepicker td a:hover { background: var(--mc-superficie-hover) !important; }
.mc .ui-datepicker td a.ui-state-active { background: var(--mc-primario) !important; color: var(--mc-primario-texto) !important; }
.mc .ui-datepicker td a.ui-state-highlight { box-shadow: inset 0 0 0 1px var(--mc-primario); }

/* AjaxControlToolkit: CalendarExtender (8 usos) */
.mc .ajax__calendar_container { z-index: var(--mc-z-desplegable) !important; width: 232px; padding: var(--mc-e-2); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); box-shadow: var(--mc-sombra-3); color: var(--mc-texto); font-family: var(--mc-fuente); font-size: var(--mc-t-sm); }
.mc .ajax__calendar_header, .mc .ajax__calendar_title { color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .ajax__calendar_day, .mc .ajax__calendar_month, .mc .ajax__calendar_year { border-radius: var(--mc-radio-sm); }
.mc .ajax__calendar_hover .ajax__calendar_day, .mc .ajax__calendar_hover .ajax__calendar_month, .mc .ajax__calendar_hover .ajax__calendar_year { background: var(--mc-superficie-hover); color: var(--mc-texto); }
.mc .ajax__calendar_active .ajax__calendar_day, .mc .ajax__calendar_active .ajax__calendar_month, .mc .ajax__calendar_active .ajax__calendar_year { background: var(--mc-primario); color: var(--mc-primario-texto); }
.mc .ajax__calendar_today .ajax__calendar_day { box-shadow: inset 0 0 0 1px var(--mc-primario); }
.mc .ajax__calendar_other .ajax__calendar_day { color: var(--mc-texto-3); }

/* Avisos del master heredado (campana: «Hoy» y «Novedades») dentro del desplegable nuevo */
.mc .mc-notificaciones { width: 360px; max-height: 70vh; overflow-y: auto; padding: 0; }
.mc .mc-notificaciones ul { margin: 0; padding: 0; list-style: none; }
.mc .mc-notificaciones li { padding: var(--mc-e-3) var(--mc-e-4); border-bottom: 1px solid var(--mc-borde); }
.mc .mc-notificaciones li:last-child { border-bottom: 0; }
.mc .mc-notificaciones li h2 { display: flex; justify-content: space-between; gap: var(--mc-e-2); margin: 0 0 2px; font-size: var(--mc-t-base); font-weight: var(--mc-peso-semi); }
.mc .mc-notificaciones li p { margin: 0 0 var(--mc-e-1); color: var(--mc-texto-2); font-size: var(--mc-t-sm); }
.mc .mc-notificaciones li a { font-size: var(--mc-t-sm); font-weight: var(--mc-peso-semi); }
.mc .mc-notificaciones .icon-Cerrar { cursor: pointer; color: var(--mc-texto-3); }
.mc .mc-notificaciones .mc-menu__titulo { padding: var(--mc-e-3) var(--mc-e-4) var(--mc-e-1); }
.mc .mc-notificaciones .mc-lista__titulo { margin: 0; color: var(--mc-texto); font-size: var(--mc-t-base); }
.mc .mc-notificaciones .mc-lista__item .mc-boton { flex: none; margin: -4px -6px 0 0; }
.mc .mc-notificaciones .mc-vacio { padding: var(--mc-e-6) var(--mc-e-5); }

/* Estados vacíos heredados del inicio */
.mc .no-registros { display: flex; flex-direction: column; align-items: center; gap: var(--mc-e-3); padding: var(--mc-e-10) var(--mc-e-5); color: var(--mc-texto-2); text-align: center; }

/* Inicio heredado (accesos rápidos, gráfica, totales del mes) hasta que se migre a la maqueta 1 (06 §10.2) */
.mc .accesosRapidos { display: block; margin: 0 0 var(--mc-e-6); }
.mc .accesosRapidos > .contenedor-el { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 40%), 1fr)); gap: var(--mc-e-4); }
.mc .btnAccesoRapido { display: flex; flex-direction: column; width: auto; height: auto; margin: 0; border: 1px solid var(--mc-borde) !important; border-radius: var(--mc-radio-lg); background: var(--mc-superficie); box-shadow: var(--mc-sombra-1); }
.mc .btnAccesoRapido > div:first-child { display: flex; align-items: center; gap: var(--mc-e-3); width: auto; height: auto; padding: var(--mc-e-4) var(--mc-e-4) var(--mc-e-2); background: none; color: var(--mc-texto); font-weight: var(--mc-peso-semi); }
.mc .btnAccesoRapido > div:first-child > div { width: auto; }
.mc .btnAccesoRapido .iconMaxSize { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--mc-radio-md); background: var(--mc-primario-suave); color: var(--mc-primario); font-size: 22px !important; }
.mc .btnAccesoRapido .enlace { margin-top: auto; padding: 0 var(--mc-e-4) var(--mc-e-3) 68px; text-align: left; font-size: var(--mc-t-sm); }
.mc .tablero { margin: 0 !important; }
.mc .tablero .misclientes-ingresosegresos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--mc-e-6); margin-bottom: var(--mc-e-6); }
.mc .tablero .misclientes-ingresosegresos > *, .mc .tablero .mistimbres-miscomprobantes > * { display: block; width: auto; padding: 0; }
.mc .tablero .misclientes-ingresosegresos > :last-child { display: flex; flex-direction: column; gap: var(--mc-e-4); }
.mc .tablero .ingresos .table, .mc .tablero .egresos .table { display: flex; align-items: center; gap: var(--mc-e-3); margin-top: var(--mc-e-2); padding: var(--mc-e-4) var(--mc-e-5); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie) !important; box-shadow: var(--mc-sombra-1); }
.mc .tablero .ingresos .table > *, .mc .tablero .egresos .table > * { width: auto; padding: 0; }
.mc .tablero .ingresos .table > :last-child, .mc .tablero .egresos .table > :last-child { color: var(--mc-texto); font-family: var(--mc-fuente); font-size: var(--mc-t-3xl); font-weight: var(--mc-peso-semi); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mc .tablero .mistimbres-miscomprobantes { display: flex; flex-wrap: wrap; gap: var(--mc-e-6); margin-top: var(--mc-e-6) !important; }
.mc .tablero .mistimbres-miscomprobantes > :first-child { flex: 0 1 280px; }
.mc .tablero .mistimbres-miscomprobantes > :last-child { flex: 1 1 480px; min-width: 0; }
.mc .tablero .mistimbres-miscomprobantes > [style*="820px"] { flex: 1 1 100%; width: auto !important; }
.mc .tablero .mis-timbres { width: auto; }
.mc .tablero .mis-timbres > div, .mc .tablero .no-registros { margin-top: var(--mc-e-2); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: var(--mc-superficie); }
.mc .tablero .mis-timbres .timbres-total { color: var(--mc-texto); font-family: var(--mc-fuente); }

/* Visor DevExpress heredado: la barra (imprimir, guardar) se queda visible porque en reportes es la única forma de exportar.
   Solo se le da marco; el documento sigue en blanco también en modo oscuro. */
.mc .reportVistaPrevia { margin: 0 0 var(--mc-e-3); padding: var(--mc-e-1) var(--mc-e-2); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-md); background: #FFFFFF; color: #151C27; }
/* Vista previa heredada: documento y acciones en dos columnas (06 §10.6); cancelar ante el SAT no es la acción principal */
.mc .comprobantes-emision-vistaprevia > .table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--mc-e-6); align-items: start; margin: 0; padding: 0; background: none; }
.mc .comprobantes-emision-vistaprevia > .table > * { display: block; width: auto; max-width: none; }
.mc .comprobantes-emision-vistaprevia .cont-icon { display: flex; margin: 0 0 var(--mc-e-1); }
.mc #lnkCancelar > .boton { border-color: var(--mc-peligro-borde); background: var(--mc-superficie); color: var(--mc-peligro-texto); box-shadow: none; }
.mc #lnkCancelar > .boton:hover { background: var(--mc-peligro-fondo); }
.mc #lnkListado > .boton, .mc #lnkNotaVenta > .boton { border-color: var(--mc-borde-fuerte); background: var(--mc-superficie); color: var(--mc-texto); }
.mc .comprobantes-emision-vistaprevia iframe[id$="pdfView"] { width: 100% !important; height: min(78vh, 1100px) !important; border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-lg); background: #FFFFFF; }
.mc .markWaterReport label { color: rgba(217, 45, 32, .35); font-weight: var(--mc-peso-negrita); letter-spacing: .1em; }

/* =============================================================================
   24. Adaptable (celular y tableta)
   ============================================================================= */
@media (max-width: 1199px) {
  .mc-contenido { padding: var(--mc-e-5) var(--mc-e-6) var(--mc-e-10); }
  .mc .tablero .misclientes-ingresosegresos, .mc .comprobantes-emision-vistaprevia > .table { grid-template-columns: minmax(0, 1fr); }
  .mc .comprobantes-emision-vistaprevia > .table > :last-child { order: -1; }
  .mc-col-3 { grid-column: span 6; }
  .mc-col-4, .mc-col-5, .mc-col-7, .mc-col-8 { grid-column: span 12; }
}
@media (max-width: 1023px) {
  .mc-app { grid-template-columns: minmax(0, 1fr); }
  .mc-lateral {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100%; visibility: hidden;
    transform: translateX(-102%); transition: transform 220ms cubic-bezier(.2, .7, .2, 1), visibility 0s 220ms; box-shadow: var(--mc-sombra-3);
  }
  .mc-app[data-menu="abierto"] .mc-lateral { transform: none; visibility: visible; transition-delay: 0s; }
  .mc .mc-saldo { display: inline-flex; }
  .mc-app[data-menu="abierto"] .mc-velo { display: block; position: fixed; inset: 0; z-index: calc(var(--mc-z-lateral) - 1); background: rgba(8, 14, 28, .5); }
  .mc-app--incrustada .mc-lateral { position: absolute; }
  .mc-app--incrustada[data-menu="abierto"] .mc-velo { position: absolute; }
  .mc-encabezado { padding: 0 var(--mc-e-4); }
  .mc .mc-encabezado .mc-encabezado__menu { display: inline-flex; }
  .mc-buscador { flex-basis: 260px; }
  .mc-seccion-formulario { grid-template-columns: minmax(0, 1fr); gap: var(--mc-e-3); }
  .mc-acceso { grid-template-columns: minmax(0, 1fr); }
  .mc-acceso__marca { padding: var(--mc-e-6) var(--mc-e-6) var(--mc-e-5); gap: var(--mc-e-4); }
  .mc-acceso__lema { font-size: var(--mc-t-2xl); }
  .mc-acceso__puntos, .mc-acceso__marca .mc-acceso__credito { display: none; }
  .mc .mc-empresa-opcion { gap: var(--mc-e-3); padding: var(--mc-e-3); }
}
@media (max-width: 767px) {
  .mc .mc-solo-escritorio { display: none !important; }
  .mc .mc-solo-movil { display: revert !important; }
  .mc-contenido { padding: var(--mc-e-4) var(--mc-e-4) var(--mc-e-10); }
  .mc-pie { padding: var(--mc-e-4); }
  .mc-encabezado { gap: var(--mc-e-2); padding: 0 var(--mc-e-3); }
  .mc-buscador { display: none; }
  .mc-selector-empresa > summary { max-width: 200px; height: 40px; }
  .mc-selector-empresa .mc-desplegable__panel { position: fixed; top: calc(var(--mc-alto-encabezado) + 4px); left: 8px; right: 8px; width: auto; max-width: none; }
  .mc-desplegable--derecha .mc-desplegable__panel { position: fixed; top: calc(var(--mc-alto-encabezado) + 4px); left: auto; right: 8px; }
  .mc-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--mc-e-3); }
  .mc-rejilla > [class*="mc-col-"] { grid-column: 1 / -1; }
  .mc-rejilla--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-kpi { padding: var(--mc-e-4); }
  .mc-kpi__valor { font-size: var(--mc-t-2xl); }
  .mc-pagina-encabezado { align-items: stretch; }
  .mc-pagina-encabezado__acciones { width: 100%; }
  .mc-pagina-encabezado__acciones .mc-boton--primario { flex: 1 1 auto; }
  .mc-campos > [class*="mc-campo"] { grid-column: 1 / -1; }
  .mc-tarjeta__encabezado, .mc-tarjeta__cuerpo:not(.mc-tarjeta__cuerpo--sin-relleno) { padding-left: var(--mc-e-4); padding-right: var(--mc-e-4); }
  .mc-filtros { padding: var(--mc-e-3) var(--mc-e-4); }
  .mc-filtros .mc-campo, .mc-filtros .mc-campo--buscar { flex-basis: 100%; max-width: none; }
  .mc-pasos .mc-paso__texto { display: none; }
  .mc-modal { width: 100vw; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: var(--mc-radio-xl) var(--mc-radio-xl) 0 0; }
  .mc-barra-acciones { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; border-width: 1px 0 0; padding: var(--mc-e-3) var(--mc-e-4) calc(var(--mc-e-3) + env(safe-area-inset-bottom)); }
  .mc-contenido:has(.mc-barra-acciones) { padding-bottom: 140px; }
  .mc-app--incrustada .mc-contenido:has(.mc-barra-acciones) { padding-bottom: var(--mc-e-10); }
  .mc-app--incrustada .mc-barra-acciones { position: sticky; }
  .mc-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mc-datos dd { margin-bottom: var(--mc-e-2); }
  /* iOS no hace zoom al enfocar si el texto mide 16px */
  .mc .mc-control, .mc .mc-campo > input, .mc .mc-campo > select, .mc .mc-campo > textarea, .mc .contenedor-el input, .mc .contenedor-el select { font-size: 16px; }

  /* Tablas apilables: cada fila es una tarjeta; cada td lleva data-etiqueta="Cliente" */
  .mc-tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mc-tabla--apilable, .mc-tabla--apilable tbody, .mc-tabla--apilable tr, .mc-tabla--apilable td { display: block; width: 100%; }
  .mc-tabla--apilable tbody tr { position: relative; padding: var(--mc-e-3) var(--mc-e-4); border-bottom: 1px solid var(--mc-borde); }
  .mc-tabla--apilable tbody tr:last-child { border-bottom: 0; }
  .mc-tabla--apilable td { display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); column-gap: var(--mc-e-3); justify-items: end; align-items: baseline; height: auto; padding: 3px 0; border: 0; text-align: right; }
  .mc-tabla--apilable td::before { content: attr(data-etiqueta); grid-column: 1; grid-row: 1 / span 4; justify-self: start; color: var(--mc-texto-3); font-size: var(--mc-t-sm); text-align: left; }
  .mc-tabla--apilable td > * { grid-column: 2; }
  .mc-tabla--apilable td.mc-tabla__titulo-movil { display: block; justify-items: start; padding-right: 44px; text-align: left; font-size: var(--mc-t-md); }
  .mc-tabla--apilable td.mc-tabla__titulo-movil::before { display: none; }
  .mc-tabla--apilable td.mc-tabla__acciones { position: absolute; top: var(--mc-e-2); right: var(--mc-e-2); width: auto; padding: 0; }
  .mc-tabla--apilable td.mc-tabla__acciones::before, .mc-tabla--apilable td.mc-tabla__casilla { display: none; }
  .mc-paginacion { justify-content: center; }
  .mc-paginacion__resumen, .mc-paginacion__tamano { width: 100%; justify-content: center; text-align: center; }

  .mc .tablero .mistimbres-miscomprobantes > * { flex-basis: 100%; }
  .mc .btnAccesoRapido > div:first-child { flex-direction: column; align-items: flex-start; }
  .mc .btnAccesoRapido .enlace { padding-left: var(--mc-e-4); }
  /* Puente: tablas heredadas con scroll horizontal en lugar de desbordar */
  .mc table.catalogo { display: block; overflow-x: auto; white-space: nowrap; }
  .mc .vista { padding: var(--mc-e-4); }
}
@media (max-width: 420px) {
  .mc-selector-empresa__texto { display: none; }
  .mc-selector-empresa--fija .mc-selector-empresa__texto { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mc-selector-empresa > summary { padding-right: 6px; }
  .mc-rejilla--kpi { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   25. Movimiento reducido, alto contraste e impresión
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mc *, .mc *::before, .mc *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mc .mc-encabezado__progreso::before { left: 0; width: 100%; animation: none; }
}
@media (forced-colors: active) {
  .mc .mc-boton, .mc .mc-insignia, .mc .mc-chip, .mc .mc-paginacion__pagina[aria-current="page"] { border: 1px solid CanvasText; }
  .mc .mc-nav__item[aria-current="page"] { outline: 2px solid Highlight; }
  .mc .mc-grafica__barra { forced-color-adjust: none; }
}
@media print {
  .mc .mc-lateral, .mc .mc-encabezado, .mc .mc-pie, .mc .mc-barra-acciones, .mc .mc-pagina-encabezado__acciones, .mc .mc-avisos { display: none !important; }
  .mc-app { display: block; }
  .mc-contenido { max-width: none; padding: 0; }
  .mc-tarjeta { box-shadow: none; break-inside: avoid; }
  body.mc { background: #FFFFFF; color: #000000; }
}