/* NADKOR Fiscal. El acomodo, los neutros, el semáforo y las medidas son los del escritorio
   (App/Tema.xaml y App/VentanaPrincipal.xaml): barra lateral oscura, tarjetas de 14 px, tablas en
   blanco con cabecera gris claro, botones de 40-44 px. Lo que sigue siendo de NADKOR es la marca:
   el violeta de acción (el color que identifica a la submarca Fiscal, marca/GUIA_USO.md), el
   petróleo de la barra (el #0f2a3d del escritorio es casi el mismo) y los logotipos, que son los
   archivos del kit tal cual, en /marca. El ocre es acento exclusivo de marca,
   nunca un color de estado.

   El semáforo (verde, ámbar, rojo) son DATOS, no decoración: dice si una e.firma venció o si una
   opinión salió negativa. Es el mismo del escritorio para que las dos versiones digan lo mismo. */

/* Inter (latin), servida desde aquí: la CSP solo permite font-src 'self'. SIL OFL 1.1 (/fonts/LICENSE-Inter.txt). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/inter-latin-800.woff2") format("woff2"); }

:root {
  /* Neutros del escritorio */
  /* Fondo gris claro para que las superficies blancas (tablas, tarjetas, campos) se despeguen. */
  --fondo: #E9EDF1;
  --blanco: #FFFFFF;
  --texto: #15232F;
  --texto-secundario: #52606D;
  --texto-tenue: #8A97A3;
  --borde: #D8DFE5;
  --borde-fuerte: #BFC9D2;
  --linea: #E8EDF1;
  --linea-suave: #EEF2F5;
  --cabecera-tabla: #F8FAFB;
  --renglon-encima: #F5F8FA;
  --fondo-segmentos: #EEF2F5;
  --titulo: #15232F;

  /* Acción: violeta de Fiscal, más oscuro que el del sello (decisión del 25/09/2026): mismo tono
     que #76639A, más saturado. Blanco encima 8.3:1; sobre --accion-suave 7.2:1. */
  --accion: #58447E;
  --accion-hover: #483767;
  --accion-suave: #F1EEF7;

  /* Semáforo: solo comunica estado, nunca adorno (los del escritorio) */
  --exito: #17693A;
  --exito-suave: #E3F3E8;
  --exito-punto: #1E8449;
  --advertencia: #8A5A08;
  --advertencia-suave: #FBF0DC;
  --advertencia-punto: #B9770E;
  --error: #A3301F;
  --error-suave: #F8E3E0;
  --error-punto: #C0392B;

  /* Barra lateral: violeta oscuro de Fiscal (25/09/2026), oscurecido el 29/09/2026. Blanco encima
     15.6:1; el texto tenue #CBC2E2 da 10.4:1. */
  --nav: #291F3C;
  --nav-fin: #211832;
  --nav-texto: #FFFFFF;
  --nav-tenue: #CBC2E2;
  --nav-linea: #43375A;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-actual: rgba(255, 255, 255, 0.11);
  --nav-acento: #B3A5D1;
  /* Franja del logotipo: gris claro-medio con el logo a color. Un gris más oscuro apaga el ocre y
     el turquesa del monograma (GUIA_USO.md, regla 6); aquí el petróleo del logo da 9.9:1. */
  --nav-marca: #EEF1F4;
  /* Recuadro destacado del contenido (el barrido): violeta clarito, texto oscuro */
  --destacada: #EEEAF6;
  --destacada-borde: #D9D1EA;

  /* Marca NADKOR: fijos */
  --marca-petroleo-profundo: #0C2F3D;
  --marca-navy: #123F50;
  --marca-teal: #278F91;
  --marca-ocre: #D6A445;
  /* Color de identificación de la submarca Fiscal (marca/GUIA_USO.md): el del sello y la barra del
     logotipo. La interfaz usa tonos más oscuros del mismo (--nav, --accion); nunca de estado. */
  --marca-fiscal: #76639A;

  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --radio: 10px;
  --radio-tarjeta: 14px;
  --sombra: 0 1px 2px rgba(15, 42, 61, 0.06), 0 6px 16px -6px rgba(15, 42, 61, 0.12);
  --ancho: 72rem;
  --menu: 272px;          /* abierta */
  --menu-cerrado: 76px;   /* solo íconos, como el escritorio */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }
h1, h2 { color: var(--titulo); line-height: 1.2; }
a { color: var(--accion); }
a:focus-visible, .boton:focus-visible, .menu-item:focus-visible { outline: 3px solid var(--marca-teal); outline-offset: 2px; }

/* --- Barra superior (sin sesión) --- */
.barra {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}
.barra-marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
/* El logotipo de Fiscal ya lleva la barra violeta y «FISCAL»: nada de texto aparte al lado. */
.barra-logo { height: 36px; width: auto; display: block; }
.barra-acciones { display: flex; align-items: center; gap: 0.25rem 1rem; flex-wrap: wrap; justify-content: flex-end; }

/* =====================================================================
   Armazón con sesión: barra lateral + contenido (VentanaPrincipal.xaml)
   ===================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 36px; height: 36px; display: block; }
.ico-linea { width: 22px; height: 22px; }

body.con-menu { display: block; font-size: 15px; }
.menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--menu);
  /* Un degradado apenas perceptible y un filo de luz a la derecha: la barra deja de verse plana. */
  background: linear-gradient(180deg, var(--nav) 0%, var(--nav-fin) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
  color: var(--nav-texto);
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
  /* Solo la lista se desplaza (.menu-nav): el recuadro del logo y la cuenta se quedan fijos. */
  overflow: hidden;
  transition: width 0.18s ease, box-shadow 0.18s ease;
}
/* El recuadro gris del logotipo va dentro de la barra, con un marco del mismo violeta alrededor
   (29/09/2026): los márgenes dejan ver la barra por los cuatro lados. */
.menu-marca {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: -10px 0 18px; padding: 14px 12px 10px;
  background: var(--nav-marca); text-decoration: none; color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.menu-logo-completo { width: 196px; height: auto; display: block; }
.menu-logo-corto { width: 44px; height: auto; display: none; }
.menu-marca small { display: block; padding-left: 2px; font-size: 12px; font-weight: 600; color: #52606D; line-height: 1.3; }
.menu-en-curso small { display: block; font-size: 12px; color: var(--nav-tenue); line-height: 1.3; font-weight: 400; }
.menu-yo small { display: block; font-size: 12px; color: var(--nav-tenue); line-height: 1.3; }
.menu-nav {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-linea) transparent;
}
.menu-nav > * { flex-shrink: 0; }
/* Menú sobrio (29/09/2026): los íconos 3D sin placa y con el color apagado; toman su color al pasar
   el mouse o en la opción activa. */
.menu-nav .menu-ico { width: 34px; height: 34px; border-radius: 9px; }
.menu-nav .ico { width: 24px; height: 24px; filter: saturate(0.45) brightness(0.95); opacity: 0.9; transition: filter 0.15s ease, opacity 0.15s ease; }
.menu-nav .menu-item:hover .ico, .menu-nav .menu-item[aria-current="page"] .ico { filter: none; opacity: 1; }
/* Títulos de sección: texto chico y tenue, sin adornos. */
.menu-seccion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-tenue);
  opacity: 0.75;
  white-space: nowrap;
}
.menu-seccion:first-child { margin-top: 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 2px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #E6E0F2;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.menu-item:hover { background: var(--nav-hover); color: #FFFFFF; }
/* La opción activa: un tono apenas más claro y una rayita violeta a la izquierda. */
.menu-item[aria-current="page"] { background: var(--nav-actual); color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--nav-acento); }
.menu-item[aria-current="page"]:hover { background: var(--nav-actual); color: #FFFFFF; }
.menu-item[aria-current="page"] strong { color: #FFFFFF; }
.menu-item[aria-current="page"] small { color: var(--nav-tenue); }
.menu a:focus-visible, .menu .menu-item:focus-visible { outline-color: #FFFFFF; }
.menu-ico { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.menu-texto { min-width: 0; }
.menu-pie { border-top: 1px solid var(--nav-linea); margin-top: 16px; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.menu-yo strong { display: block; color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-iniciales {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accion-suave); color: var(--accion); font-weight: 700; font-size: 13px;
}
.menu-salir { margin: 0; }
.menu-salir .menu-item { color: var(--nav-tenue); }
/* El contribuyente activo: una tarjeta con sus iniciales, nombre y RFC; sus módulos van en pestañas. */
.menu-activo { padding: 6px 8px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.menu-activo strong { display: block; color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-activo small { display: block; font-size: 12px; color: var(--nav-tenue); font-family: Consolas, "Cascadia Mono", monospace; }
.menu-activo-vacio strong { color: var(--nav-tenue); font-weight: 500; }
.menu-activo-vacio small { font-family: inherit; }
.menu-cambiar { align-self: flex-start; margin: 4px 0 0 64px; font-size: 12px; color: var(--nav-tenue); text-decoration: underline; text-underline-offset: 2px; }
.menu-cambiar:hover { color: #FFFFFF; }
/* Lo de administración va abajo, en renglones más chicos. */
.menu-abajo { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nav-linea); display: flex; flex-direction: column; gap: 1px; }
.menu-seccion + .menu-abajo, .menu-nav > .menu-abajo:first-child { margin-top: 18px; }
.menu-abajo .menu-item { font-size: 13px; color: var(--nav-tenue); padding: 2px 8px; }
.menu-abajo .menu-item[aria-current="page"] { color: #FFFFFF; }
.menu-nav .menu-abajo .menu-ico { width: 30px; height: 30px; border-radius: 9px; margin: 0 2px; }
.menu-nav .menu-abajo .ico { width: 20px; height: 20px; }
/* Visores SAT: un grupo que se abre (details, sin JavaScript) con facturas y nómina. */
.menu-grupo > summary { list-style: none; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary::after {
  content: ""; flex: none; margin-left: auto; margin-right: 6px;
  width: 6px; height: 6px; border-right: 2px solid var(--nav-tenue); border-bottom: 2px solid var(--nav-tenue);
  transform: rotate(-45deg); opacity: 0.7; transition: transform 0.15s ease;
}
.menu-grupo[open] > summary::after { transform: rotate(45deg); }
.menu-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 14px; padding-left: 8px; border-left: 1px solid var(--nav-linea); }
.menu-sub .menu-item { font-size: 13.5px; }
.menu-nav .menu-sub .menu-ico { width: 30px; height: 30px; }
.menu-nav .menu-sub .ico { width: 21px; height: 21px; }

.app { margin-left: var(--menu); min-height: 100vh; display: flex; flex-direction: column; }
.app main.contenido { flex: 1; max-width: 1440px; margin: 0; padding: 28px 36px 24px; }
.pie-app { justify-content: flex-start; background: transparent; border-top: 1px solid var(--borde); padding: 1rem 36px; font-size: 0.8rem; }
.app .aviso-cuenta { padding-left: 36px; padding-right: 36px; }
.app .aviso-cuenta p { margin-left: 0; }

/* Como el escritorio: la barra se queda en íconos y se abre encima al pasar el mouse. Solo en
   pantallas muy anchas se queda abierta, porque ahí sobra lugar para la tabla y el lateral. */
@media (max-width: 1599px) and (min-width: 721px) {
  .menu { width: var(--menu-cerrado); }
  .menu .menu-texto { opacity: 0; transition: opacity 0.12s ease; white-space: nowrap; }
  .menu-logo-completo, .menu-marca small { display: none; }
  .menu-logo-corto { display: block; }
  .menu:hover .menu-logo-completo, .menu:focus-within .menu-logo-completo,
  .menu:hover .menu-marca small, .menu:focus-within .menu-marca small { display: block; }
  .menu:hover .menu-logo-corto, .menu:focus-within .menu-logo-corto { display: none; }
  .menu-seccion { height: 1px; margin: 12px 8px 8px; background: var(--nav-linea); width: 36px; }
  .menu-seccion:first-child { margin-top: 0; }
  /* Cerrada, el recuadro del logo se angosta al monograma; el marco violeta se queda. */
  .menu-marca { padding: 8px 6px; align-items: center; }
  .menu-grupo > summary::after { display: none; }
  .menu-sub { margin-left: 0; padding-left: 0; border-left: 0; }
  .menu:hover, .menu:focus-within { width: var(--menu); box-shadow: 8px 0 32px rgba(15, 42, 61, 0.35); }
  .menu:hover .menu-texto, .menu:focus-within .menu-texto { opacity: 1; white-space: normal; }
  .menu:hover .menu-seccion, .menu:focus-within .menu-seccion { height: auto; width: auto; background: none; margin: 18px 10px 4px; }
  .menu:hover .menu-marca, .menu:focus-within .menu-marca { padding: 14px 12px 10px; align-items: flex-start; }
  .menu:hover .menu-grupo > summary::after, .menu:focus-within .menu-grupo > summary::after { display: block; }
  .menu:hover .menu-sub, .menu:focus-within .menu-sub { margin-left: 14px; padding-left: 8px; border-left: 1px solid var(--nav-linea); }
  .app { margin-left: var(--menu-cerrado); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item, .menu-nav .ico, .menu-grupo > summary::after { transition: none; }
}

/* --- Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radio);
  padding: 0 16px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.boton-principal { background: var(--accion); color: var(--blanco); min-height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600; }
.boton-principal:hover { background: var(--accion-hover); }
.boton-claro { background: var(--blanco); color: var(--texto); border-color: var(--borde-fuerte); }
.boton-claro:hover { background: var(--cabecera-tabla); border-color: var(--accion); }
/* Google: botón blanco con la «G» de cuatro colores (sus lineamientos de marca). */
.boton-google { min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.ico-google { width: 18px; height: 18px; flex: none; }
.o-bien { display: flex; align-items: center; gap: 12px; max-width: 22rem; margin: 1.25rem 0 0.5rem; color: var(--texto-secundario); font-size: 13px; }
.o-bien::before, .o-bien::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }
.boton-contorno { background: var(--blanco); color: var(--accion); border-color: var(--accion); font-weight: 600; }
.boton-contorno:hover { background: var(--accion-suave); }

/* --- Portada --- */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: center;
  padding: 4rem 0 3rem;
}
.sobretitulo {
  color: var(--accion);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  margin: 0 0 0.4rem;
}
.portada h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; margin: 0 0 1rem; }
.bajada { color: var(--texto-secundario); font-size: 1.1rem; margin: 0 0 1.75rem; max-width: 36rem; }
.portada-simbolo { width: 100%; max-width: 20rem; justify-self: center; }

/* --- Tarjetas --- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 16px;
  padding-bottom: 2rem;
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
  padding: 20px 24px;
}
.tarjeta h2 { font-size: 16px; font-weight: 600; margin: 0 0 0.4rem; }
.tarjeta p { margin: 0; color: var(--texto-secundario); font-size: 14px; }
.tarjeta-ico { display: block; margin-bottom: 10px; }
.tarjeta-ico .ico { width: 40px; height: 40px; }
/* La tarjeta entera lleva a su pantalla: el botón queda abajo, alineado entre tarjetas. */
.tarjetas .tarjeta { display: flex; flex-direction: column; }
.tarjetas .tarjeta > .boton:last-child { margin-top: auto; align-self: flex-start; }
.tarjetas .tarjeta > p:last-of-type { margin-bottom: 1rem; }

/* --- Avisos (entrar, errores) --- */
.aviso {
  max-width: 32rem;
  margin: 4rem auto;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 2rem;
  text-align: center;
}
.aviso h1 { margin-top: 0; font-size: 1.5rem; }
.aviso p { color: var(--texto-secundario); }

/* --- Formularios --- */
.caja {
  max-width: 28rem;
  margin: 3rem auto;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
  padding: 2rem;
}
.app .caja { margin: 0 0 2rem; }
.caja h1 { margin-top: 0; font-size: 1.6rem; }
.formulario { display: flex; flex-direction: column; gap: 0.35rem; margin: 1rem 0; max-width: 28rem; }
.formulario label { font-weight: 600; color: var(--texto-secundario); font-size: 12px; margin-top: 0.6rem; }
.formulario .boton { margin-top: 1rem; align-self: flex-start; }
.formulario-ancho { max-width: 44rem; }
.formulario-linea { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; max-width: none; }
.formulario-linea > div { display: flex; flex-direction: column; gap: 0.35rem; min-width: 14rem; }
.formulario-linea label { margin-top: 0; }
.formulario-linea .boton { margin-top: 0; }
input, select {
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }
input:focus, select:focus { outline: 3px solid var(--accion-suave); border-color: var(--accion); }
.campo-codigo { font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; max-width: 12rem; font-variant-numeric: tabular-nums; }
.nota { color: var(--texto-secundario); }
.ayuda { color: var(--texto-secundario); font-size: 13px; margin: 0.25rem 0 0; }
.paso { font-weight: 700; color: var(--marca-teal); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
.pasos { padding-left: 1.25rem; margin: 0.5rem 0; }
.requisito-app { margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--accion); background: var(--accion-suave); border-radius: 6px; }
.requisito-app p { margin: 0 0 0.5rem; }
.requisito-app .lista-circulos { margin: 0; font-size: inherit; line-height: 1.6; font-weight: 600; }
.pasos li { margin: 0.35rem 0; }
.qr { display: block; margin: 0.75rem auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #FFFFFF; }
.clave-manual { margin: 0.5rem 0 1rem; color: var(--texto-secundario); font-size: 0.9rem; }
.clave-manual code { display: block; margin-top: 0.5rem; font-size: 1rem; letter-spacing: 0.08em; color: var(--texto); word-break: break-all; }

/* --- Avisos --- */
.alerta { border-radius: var(--radio); padding: 0.75rem 1rem; margin: 0 0 1rem; border: 1px solid transparent; font-size: 14px; }
.alerta-error { background: var(--error-suave); color: var(--error); border-color: #EBC3BC; }
.alerta-exito { background: var(--exito-suave); color: var(--exito); border-color: #BFE0CA; }
.alerta-aviso { background: var(--advertencia-suave); color: var(--texto); border-color: #EFD9AE; }
.tarjeta .estado { margin-right: 0.3rem; }
.tabla td .estado + span { margin-left: 0.3rem; }
.liga { background: var(--accion-suave); border: 1px solid var(--accion); border-radius: var(--radio); padding: 1rem; margin: 1rem 0; }
.liga p { margin: 0 0 0.75rem; }
.liga-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.liga-campo { flex: 1; min-width: 14rem; font-size: 0.9rem; }

/* --- Encabezado de pantalla: título a la izquierda, acciones a la derecha (DockPanel del escritorio) --- */
.encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: end;
  padding: 2.5rem 0 1.25rem;
}
.app .encabezado { padding: 0 0 20px; }
.encabezado > * { grid-column: 1; }
.encabezado > form, .encabezado > .boton, .encabezado-acciones {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  justify-self: end;
}
.encabezado-acciones { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.encabezado-acciones form { margin: 0; }
.encabezado h1 { margin: 0; font-size: 26px; font-weight: 700; }
.encabezado .sobretitulo { margin-bottom: 6px; }
.encabezado .sobretitulo a { color: inherit; text-decoration: none; }
.encabezado .sobretitulo a:hover { text-decoration: underline; }
.encabezado .nota { margin: 6px 0 0; font-size: 14px; max-width: 52rem; }
.encabezado form { margin: 0; }
.encabezado .formulario-linea > div { min-width: 8rem; }
.encabezado .formulario-linea label { font-size: 12px; }

/* --- Ficha del cliente: la tarjeta del cliente activo del escritorio --- */
.ficha {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  border-radius: var(--radio-tarjeta);
  padding: 18px 24px;
  margin-bottom: 20px;
}
.ficha-iniciales {
  width: 52px; height: 52px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accion-suave); color: var(--accion); font-size: 18px; font-weight: 700;
}
.ficha-datos { flex: 1; min-width: 0; }
.ficha-datos .sobretitulo { margin-bottom: 2px; }
.ficha-datos .sobretitulo a { color: inherit; text-decoration: none; }
.ficha-datos h1 { margin: 0; font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-datos p { margin: 4px 0 0; font-size: 14px; color: var(--texto-secundario); }
.ficha-datos .rfc { font-family: var(--mono); color: var(--texto); margin-right: 14px; }
.ficha-acciones { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ficha-acciones form { margin: 0; }
.ficha-acciones .formulario-linea > div { min-width: 8rem; }
.pildora {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  background: var(--fondo-segmentos); color: var(--texto-secundario); white-space: nowrap;
}

/* --- Resumen: los contadores con su punto de color (Vigentes / Por vencer / Vencidos) --- */
.resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.resumen-caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 16px 20px; }
.resumen-rotulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.resumen-rotulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.resumen-ok { color: var(--exito); }
.resumen-ok::before { background: var(--exito-punto); }
.resumen-aviso { color: var(--advertencia); }
.resumen-aviso::before { background: var(--advertencia-punto); }
.resumen-error { color: var(--error); }
.resumen-error::before { background: var(--error-punto); }
.resumen-neutro { color: var(--texto-secundario); }
.resumen-neutro::before { background: var(--texto-tenue); }
.resumen-numero { margin: 4px 0 0; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--texto); font-variant-numeric: tabular-nums; }

/* --- Dos columnas: la tabla y a la derecha el lateral de 320 px (Auditoría masiva) --- */
.con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.lateral { display: flex; flex-direction: column; gap: 16px; }
.lateral .formulario { max-width: none; margin: 0; }
.lateral .tarjeta h2 { font-size: 15px; margin-bottom: 8px; }
/* Se llama «oscura» por historia; hoy es el recuadro destacado en violeta clarito. */
.tarjeta-oscura { background: var(--destacada); border: 1px solid var(--destacada-borde); color: var(--texto); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 20px; }
.tarjeta-oscura h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--titulo); font-size: 15px; font-weight: 600; }
.tarjeta-oscura h2 .ico { width: 24px; height: 24px; }
.tarjeta-oscura p { margin: 14px 0 0; font-size: 14px; line-height: 22px; }
.tarjeta-oscura .estado-baja { background: transparent; color: var(--texto-secundario); border-color: var(--borde-fuerte); }
.tarjeta-oscura .boton { margin-top: 14px; }
.tarjeta-oscura .boton-claro { color: var(--accion); border-color: var(--destacada-borde); font-weight: 600; }

/* --- Tablas: dentro de su tarjeta, en blanco, renglones de 44 px --- */
h2 { font-size: 18px; margin: 2rem 0 0.75rem; }
h2.separado { margin-top: 3rem; }
.tabla-marco {
  overflow-x: auto;
  position: relative;   /* lo .oculto de adentro no se sale del marco y ensancha la página en el celular */
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla th:first-child, .tabla td:first-child { padding-left: 20px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 20px; }
.tabla th {
  color: var(--texto-secundario);
  font-weight: 600;
  font-size: 12px;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--cabecera-tabla);
  border-bottom-color: var(--linea);
  white-space: nowrap;
}
.tabla tbody tr:hover { background: var(--renglon-encima); }
.tabla td:first-child { min-width: 11rem; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .vacio { color: var(--texto-secundario); text-align: center; padding: 1.75rem; }
.tabla-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--linea);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--texto-secundario);
}
.tabla-pie p { margin: 0; }
/* La leyenda del inicio: lista con viñetas en 3 columnas (1 en el teléfono). */
.leyenda-lista { margin: 0; padding-left: 1.1rem; columns: 3; column-gap: 28px; width: 100%; }
.leyenda-lista li { break-inside: avoid; margin: 2px 0; }
.leyenda-lista .marca { font-size: 14px; }
@media (max-width: 720px) { .leyenda-lista { columns: 1; } }
.acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.acciones form { margin: 0; }
/* En una tabla la celda sigue siendo celda (con flex se salía del renglón): botones en línea, a la derecha. */
.tabla td.acciones { display: table-cell; text-align: right; white-space: nowrap; }
.tabla td.acciones > * { display: inline-flex; vertical-align: middle; margin-left: 0.4rem; }
.tabla td.acciones > form > .boton { margin: 0; }
.tabla td.acciones > .ayuda { display: inline; }
.corto { max-width: 14rem; }
.boton-chico { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.boton-principal.boton-chico { min-height: 32px; padding: 0 12px; font-size: 13px; }
.boton-peligro { background: var(--blanco); color: var(--error); border-color: #E3B8B1; }
.boton-peligro:hover { background: var(--error-suave); }
.etiqueta { font-size: 0.75rem; font-weight: 600; color: var(--accion); background: var(--accion-suave); border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.35rem; }
.estado { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; border: 1px solid transparent; }
.estado-ok { color: var(--exito); background: var(--exito-suave); }
.estado-aviso { color: var(--advertencia); background: var(--advertencia-suave); }
.estado-error { color: var(--error); background: var(--error-suave); }
/* Lo que corre plazo (una notificación del buzón): el ⚠ en rojo con «Atención», para distinguirlo del ⚠ ámbar. */
.marca-atencion { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--error); white-space: nowrap; }
.marca-atencion .marca { color: var(--error-punto); }
.boton-completa { color: var(--accion); border-color: var(--accion); background: var(--accion-suave); }
.boton-completa:hover { background: var(--blanco); }
.form-completa { display: inline-block; }
td .form-completa { margin-top: 4px; }
.leyenda-baja { display: block; margin-top: 4px; font-size: 12px; color: var(--error); max-width: 32rem; white-space: normal; }
.rfc { font-family: var(--mono); font-size: 0.93em; letter-spacing: 0.01em; white-space: nowrap; }
.caja-ancha { max-width: 36rem; }
.caja .sobretitulo a { color: inherit; }
input[type="file"] { padding: 0.45rem; background: var(--fondo); }
.boton:disabled { opacity: 0.45; cursor: progress; }
.estado-baja { color: var(--texto-secundario); background: var(--fondo-segmentos); border-color: var(--borde); }
.proximamente { margin-top: 0.75rem !important; font-size: 0.85rem; font-weight: 600; color: var(--texto-secundario); }
.estado-curso { color: var(--accion); background: var(--accion-suave); }
.subtitulo { font-size: 16px; font-weight: 600; margin: 1.75rem 0 0.6rem; }
.tabla .ayuda { display: block; }
.sin-marco { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sin-marco label { font-weight: 600; color: var(--texto-secundario); font-size: 12px; margin-top: 0.6rem; }
.sin-marco label:first-child { margin-top: 0; }
.sin-marco .boton { margin-top: 1rem; align-self: flex-start; }
.dato { font-size: 1.3rem; font-weight: 600; color: var(--titulo); margin: 0.25rem 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Pie --- */
.pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--texto-secundario);
  font-size: 0.85rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--borde);
  background: var(--blanco);
}
.pie-simbolo { height: 20px; width: auto; }

@media (max-width: 1100px) {
  .con-lateral { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .portada { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .portada-simbolo { max-width: 9rem; order: -1; justify-self: start; }
  .barra-logo { height: 30px; }
  .barra { flex-wrap: wrap; gap: 0.5rem; }
  .caja { margin: 1.5rem auto; padding: 1.25rem; }
  .encabezado { padding-top: 1.5rem; grid-template-columns: minmax(0, 1fr); }
  .encabezado > form, .encabezado > .boton, .encabezado-acciones { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  .encabezado-acciones { justify-content: flex-start; }
  .acciones { justify-content: flex-start; }
  .resumen { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .resumen-caja { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .resumen-numero { margin: 0; font-size: 24px; }
  .ficha { flex-wrap: wrap; padding: 16px; }
  .ficha-acciones { width: 100%; }

  /* Sin espacio para la barra lateral: arriba, con los módulos en una tira que se desliza. */
  .menu { position: sticky; top: 0; inset: auto; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px; overflow: visible; }
  .menu-marca { margin: 0; padding: 8px 12px; flex: 1; align-self: stretch; justify-content: center; }
  .menu-logo-completo { width: 150px; }
  .menu-nav { order: 3; flex: 1 1 100%; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; }
  .menu-seccion { display: none; }
  .menu-nav .menu-item { width: auto; flex: none; padding: 2px 10px 2px 2px; white-space: nowrap; font-size: 13px; }
  .menu-nav .menu-ico { width: 36px; height: 36px; }
  .menu-nav .ico { width: 28px; height: 28px; }
  .menu-pie { flex-direction: row; border: 0; margin: 0; padding: 0; }
  .menu-pie .menu-texto { display: none; }
  .menu-pie .menu-item { width: auto; padding: 0; }
  .app { margin-left: 0; }
  .app main.contenido { padding: 20px 16px; }
  .pie-app { padding: 1rem 16px; }
  .app .aviso-cuenta { padding-left: 16px; padding-right: 16px; }
}

/* --- Documentos legales (/legal) y ventana de aceptación --- */
.pie { flex-wrap: wrap; }
.pie-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-left: auto; }
.pie-legal a { color: var(--texto-secundario); }
.doc-legal { max-width: 48rem; margin: 2rem auto 3rem; }
.app .doc-legal { margin: 0 0 3rem; }
.doc-legal h1 { font-size: 1.9rem; margin: 0 0 0.25rem; }
.doc-legal h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.doc-legal h3 { font-size: 1.05rem; color: var(--titulo); margin: 1.25rem 0 0.4rem; }
.doc-legal li { margin: 0.25rem 0; }
.doc-meta { color: var(--texto-secundario); font-size: 0.9rem; margin: 0 0 1.5rem; }
.indice-doc { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.75rem 1.25rem; }
.indice-doc ol { margin: 0.4rem 0 0; columns: 2; column-gap: 2rem; }
.recuadro { background: var(--accion-suave); border-left: 4px solid var(--accion); border-radius: var(--radio); padding: 0.75rem 1.25rem; margin: 1rem 0; }
.recuadro p { margin: 0.5rem 0; }
.tabla-envoltura { overflow-x: auto; }
.tabla-legal { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: 0.92rem; }
.tabla-legal th, .tabla-legal td { border: 1px solid var(--borde); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.tabla-legal th { background: var(--fondo); color: var(--texto-secundario); }
.tabla-legal ul { margin: 0; padding-left: 1.1rem; }
mark.hueco { background: var(--advertencia-suave); color: var(--texto); padding: 0 0.2rem; border-radius: 3px; }
.aviso-borrador { background: var(--advertencia-suave); border: 1px solid var(--advertencia); border-radius: var(--radio); padding: 0.75rem 1rem; margin-bottom: 1.5rem; }
.lista-docs { list-style: none; padding: 0; }
.lista-docs li { margin: 0 0 1rem; }
.lista-docs p { margin: 0.2rem 0 0; color: var(--texto-secundario); }
.sin-vinetas { list-style: none; padding-left: 0; }
.sin-vinetas .casilla::before { content: "☐"; margin-right: 0.5rem; }
.firma-linea { display: flex; gap: 3rem; margin-top: 4rem; }
.firma-linea > div { flex: 1; border-top: 1px solid var(--texto); padding-top: 0.5rem; text-align: center; }
.aviso-corto { font-size: 0.85rem; color: var(--texto-secundario); border-top: 1px solid var(--borde); padding-top: 0.75rem; margin-top: 1.5rem; }
.doc-imprimir { margin-top: 2rem; }
/* Ventana de aceptación (/aceptar-terminos): cada documento en su caja con scroll y la casilla al final. */
.aceptar-tarjeta { max-width: 52rem; }
.lectura-doc { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); margin: 0.9rem 0; }
.lectura-doc > summary { cursor: pointer; padding: 0.8rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; }
.lectura-titulo { font-weight: 600; color: var(--titulo); }
.lectura-estado { font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--texto-secundario); background: var(--fondo); border: 1px solid var(--borde); }
.lectura-version { flex-basis: 100%; margin: 0; }
.lectura-caja { max-height: 26rem; overflow-y: auto; border-top: 1px solid var(--borde); padding: 0 1rem; }
.lectura-caja:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
.lectura-cuerpo.doc-legal { margin: 0; max-width: none; font-size: 0.92rem; }
.lectura-fin { border-top: 1px dashed var(--borde); padding: 1rem 0 1.2rem; margin-top: 1rem; }
.lectura-acepto { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; }
.lectura-acepto input { margin-top: 0.25rem; flex: none; }
.lectura-pista { padding: 0 1rem 0.8rem; }
.aceptar-form .boton-principal { margin-top: 1rem; }
.aceptar-form .boton-principal:disabled { cursor: not-allowed; }
.aceptar-salir { margin-top: 0.75rem; }
/* Declaración de cada contribuyente (alta de e.firma) y contrato de encargo. */
.declaracion { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.6rem 0.9rem 0.8rem; margin: 0.9rem 0 0.3rem; }
.declaracion legend { font-weight: 600; color: var(--titulo); font-size: 0.95rem; padding: 0 0.3rem; }
.formulario .declaracion .opcion { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400; color: var(--texto); margin-top: 0.45rem; font-size: 14px; }
.declaracion .opcion input { margin-top: 0.3rem; flex: none; }
.estado-contrato p { margin: 0.2rem 0; }
.estado-contrato .estado { margin-right: 0.4rem; }
.contrato-texto { max-width: 52rem; }
.firmar-contrato { margin-top: 1.5rem; }
.formulario .lectura-acepto { font-weight: 500; color: var(--texto); }
.aviso-cuenta { background: var(--advertencia-suave); border-bottom: 1px solid var(--advertencia); padding: 0.6rem 1.25rem; font-size: 0.92rem; }
.aviso-cuenta.grave { background: var(--error-suave); border-color: var(--error); }
.aviso-plan { background: var(--destacada); border-color: var(--destacada-borde); }
.aviso-plan .boton { margin-left: 8px; vertical-align: middle; }
.aviso-cuenta p { margin: 0.15rem auto; max-width: 72rem; }
@media (max-width: 720px) {
  .indice-doc ol { columns: 1; }
  .firma-linea { flex-direction: column; gap: 2.5rem; }
  .pie-legal { margin-left: 0; }
}
/* --- Auditoría masiva y contribuyente activo (lienzo del 25/09/2026) --- */
.resumen-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.titulo-con-chip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chip-activo {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--destacada-borde); border-radius: 999px; background: var(--destacada);
  color: var(--texto); font-size: 13px; text-decoration: none;
}
.chip-activo:hover { border-color: var(--accion); }
.chip-iniciales {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accion); color: #FFFFFF; font-size: 12px; font-weight: 700;
}

/* Buscador y filtros encima de la tabla. */
.barra-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.buscador { display: flex; gap: 8px; flex: 1; min-width: 16rem; max-width: 30rem; margin: 0; }
.buscador input { flex: 1; min-width: 0; }
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--fondo-segmentos); border: 1px solid var(--borde); border-radius: 12px; }
.segmentos a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px;
  color: var(--texto-secundario); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.segmentos a:hover { color: var(--texto); background: rgba(255, 255, 255, 0.6); }
.segmentos a[aria-current="page"] { background: var(--blanco); color: var(--texto); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 42, 61, 0.14); }
.segmentos .cuenta { font-size: 12px; font-weight: 600; color: var(--texto-secundario); background: var(--linea-suave); border-radius: 999px; padding: 0 7px; }
.segmentos-anchos { margin: 4px 0 12px; }

/* Tablas del resumen: el renglón del contribuyente activo y los urgentes resaltan. */
.nombre-fila { font-weight: 600; color: var(--texto); text-decoration: none; }
a.nombre-fila:hover { color: var(--accion); text-decoration: underline; }
.tabla tbody tr.fila-activa { background: var(--accion-suave); box-shadow: inset 3px 0 0 var(--accion); }
.tabla tbody tr.fila-urgente { box-shadow: inset 3px 0 0 var(--error-punto); }
.dato-celda { display: block; color: var(--texto); font-weight: 500; }
.tabla td .estado + .dato-celda { margin: 4px 0 0; }
.tabla td.acciones-columna > * { margin-left: 0.4rem; }
.tabla-buzon td { vertical-align: top; }
.tabla-buzon td:nth-child(2), .tabla-buzon td:nth-child(4) { min-width: 14rem; }
.tabla-buzon td:nth-child(3) { min-width: 10rem; }
.tabla-pie-acciones { justify-content: space-between; }

/* Ficha del contribuyente activo y sus pestañas. */
.ficha-contribuyente { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ficha-contribuyente .estado { margin-left: 4px; }
.ficha-dato { margin-right: 14px; }
.pestanas {
  display: flex; gap: 2px; overflow-x: auto; margin: 0 0 20px; padding: 0 12px;
  background: var(--blanco); border: 1px solid var(--borde); border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta); box-shadow: var(--sombra);
  scrollbar-width: thin;
}
.pestanas a {
  padding: 12px 14px 10px; border-bottom: 3px solid transparent; color: var(--texto-secundario);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pestanas a:hover { color: var(--texto); border-bottom-color: var(--borde-fuerte); }
.pestanas a[aria-current="page"] { color: var(--accion); font-weight: 600; border-bottom-color: var(--accion); }
.barra-herramientas { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.barra-herramientas form { margin: 0; }
.barra-herramientas .formulario-linea > div { min-width: 8rem; }
.barra-titulo { display: flex; align-items: center; gap: 10px; margin-right: auto; align-self: center; }
.barra-titulo h2 { margin: 0; font-size: 18px; }
.barra-titulo .ico { width: 30px; height: 30px; }
.barra-herramientas > .estado { align-self: center; }
.alerta-con-accion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alerta-con-accion p, .alerta-con-accion form { margin: 0; }
.alerta-varias p { margin: 0; }
.alerta-varias p + p { margin-top: 0.35rem; }
.alerta a { color: inherit; font-weight: 600; margin-left: 6px; }
.tarjetas-modulo { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta-modulo-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tarjeta-modulo-cabeza .tarjeta-ico { margin: 0; }
.tarjeta-modulo-cabeza h2 { flex: 1; margin: 0; font-size: 15px; }
.tarjetas .tarjeta-modulo > p.tarjeta-modulo-estado { margin: 0 0 8px; }
.tarjetas .tarjeta-modulo > p.ayuda { margin: 6px 0 14px; font-size: 12px; }

/* Matriz obligación × mes: ✓ presentada, C complementaria (azul de dato), ✕ falta, punteado aún no vence. */
.tabla-matriz th:not(:first-child), .tabla-matriz td.celda { text-align: center; padding-left: 4px; padding-right: 4px; width: 44px; }
.tabla-matriz th.mes-novence, .tabla-matriz td.mes-novence { background: #F6F8FA; }
.marca {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; font-size: 13px; font-weight: 700; line-height: 1; vertical-align: middle;
}
.celda-ok { background: var(--exito-suave); color: var(--exito); }
.celda-comp { background: #DCEEF4; color: #2D7E9C; }
.celda-falta { background: var(--blanco); color: var(--error); border: 2px solid var(--error-punto); }
.celda-novence { background: var(--blanco); border: 1.5px dashed var(--borde-fuerte); }
.celda-nd { background: var(--blanco); border: 1px solid var(--borde); }
/* Salvedad: faltaba, y la cuenta lo verificó con una observación. */
.celda-verificada { background: var(--accion-suave); color: var(--accion); }
.tabla-consolidado td.mes-novence .celda-novence { border-style: solid; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .marca { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dos-columnas .tarjeta h2 { margin-bottom: 10px; }
.lista-faltan { margin: 0 0 14px; }
.lista-faltan li { padding: 6px 0; border-bottom: 1px solid var(--linea-suave); font-size: 14px; color: var(--texto-secundario); }
.lista-faltan li strong { color: var(--texto); margin-right: 6px; }
.salvedad-form { margin-top: 8px; padding: 10px 12px; background: var(--cabecera-tabla); border: 1px solid var(--linea); border-radius: 8px; }
.salvedad-form summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accion); }
.salvedad-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin: 10px 0 4px; }
.salvedad-campos label { display: block; font-size: 12px; margin-bottom: 3px; }
.salvedad-campos select, .salvedad-campos input { width: 100%; box-sizing: border-box; }
.salvedad-campos input:disabled { opacity: .45; }
@media (max-width: 560px) { .salvedad-campos { grid-template-columns: 1fr; } }
.salvedad-form textarea { width: 100%; min-height: 64px; box-sizing: border-box; font: inherit; font-size: 13px; }
.lista-salvedades { margin: 0; }
.lista-salvedades li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--linea-suave); font-size: 14px; color: var(--texto-secundario); }
.lista-salvedades li strong { color: var(--texto); }
.lista-salvedades .observacion { display: block; margin-top: 2px; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.notas { margin: 0; padding-left: 18px; font-size: 14px; color: var(--texto-secundario); }
.notas li + li { margin-top: 6px; }
.ficha-datos p.ficha-regimen { margin-top: 6px; font-size: 13px; }
.ficha-regimen span { font-weight: 600; color: var(--texto); }
.ficha-contabilidad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; font-size: 13px; color: var(--texto-secundario); }
/* Un mes sin declaración, al final de la tabla de acuses. */
.tabla tbody tr.fila-falta { background: #FDF6F5; box-shadow: inset 3px 0 0 var(--error-punto); }
.tabla tbody tr.fila-falta td:first-child { font-weight: 600; color: var(--error); }
.texto-falta { margin-left: 8px; color: var(--texto-secundario); font-size: 13px; }
.liga-salvedad { margin-left: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Al llegar desde una advertencia (#que-falta), que no quede pegado al borde. */
#que-falta { scroll-margin-top: 16px; }
.barra-segmentos { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.barra-segmentos form { margin: 0; }
.subtitulo-con-accion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.subtitulo-con-accion form { margin: 0; }
/* Feed de actividad del lateral. */
.lista-actividad { margin: 0; display: flex; flex-direction: column; }
.lista-actividad li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea-suave); font-size: 13px; }
.lista-actividad li:last-child { border-bottom: 0; }
.lista-actividad div { min-width: 0; }
.lista-actividad a { display: block; font-weight: 600; color: var(--texto); text-decoration: none; }
.lista-actividad a:hover { color: var(--accion); text-decoration: underline; }
.lista-actividad span { display: block; color: var(--texto-secundario); }
.lista-actividad small { display: block; color: var(--texto-tenue); font-size: 12px; }
.punto { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; padding: 0; border: 0; }
.punto.estado-ok { background: var(--exito-punto); }
.punto.estado-aviso { background: var(--advertencia-punto); }
.punto.estado-error { background: var(--error-punto); }
.punto.estado-curso { background: var(--accion); }

/* Inicio: la auditoría masiva y «por contribuyente» lado a lado. */
.inicio-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; margin-top: 20px; align-items: start; }
.panel-inicio { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 20px; }
.panel-inicio-cabeza h2 { margin: 0; font-size: 17px; }
.panel-inicio-cabeza .ayuda { margin: 4px 0 16px; }
.bloques { display: flex; flex-direction: column; gap: 10px; }
.bloque {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; color: var(--texto); text-decoration: none;
}
.bloque:hover { border-color: var(--accion); background: var(--accion-suave); }
.bloque-titulo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.bloque-titulo .ico { width: 30px; height: 30px; }
.bloque-cifras { display: flex; gap: 6px; flex-wrap: wrap; }
.franja-barrido {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px;
  background: var(--destacada); border: 1px solid var(--destacada-borde); border-radius: 12px; font-size: 13px;
}
.franja-barrido .ico { width: 24px; height: 24px; }
.franja-barrido a { color: var(--texto); text-decoration: none; }
.franja-barrido a:hover strong { color: var(--accion); text-decoration: underline; }
.franja-barrido span { color: var(--texto-secundario); margin-left: 4px; }
.panel-inicio .buscador { max-width: none; margin-bottom: 14px; }
.lista-contribuyentes { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-contribuyentes a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--texto); text-decoration: none;
}
.lista-contribuyentes a:hover { background: var(--renglon-encima); }
.lista-contribuyentes-texto { flex: 1; min-width: 0; }
.lista-contribuyentes-texto strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-contribuyentes-texto small { display: block; font-size: 12px; color: var(--texto-secundario); }
.liga-mas { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--accion); font-weight: 600; }
.franja-pendientes {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px;
  padding: 16px 20px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra);
}
.franja-pendientes h2 { margin: 0 0 6px; font-size: 16px; }
.franja-pendientes p { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.franja-pendientes-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .inicio-columnas, .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .resumen-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .resumen-cuatro { grid-template-columns: minmax(0, 1fr); }
  .barra-titulo { width: 100%; }
  .buscador { max-width: none; }
  /* En la tira del menú del celular todo va en una fila; «Cambiar contribuyente» ya está en su ficha. */
  .menu-abajo { flex-direction: row; margin: 0; padding: 0; border: 0; gap: 4px; }
  .menu-cambiar { display: none; }
}

@media print {
  .barra, .pie, .menu, .no-imprimir { display: none !important; }
  .app { margin-left: 0; }
  body { background: #FFFFFF; }
  .doc-legal { margin: 0; max-width: none; }
  .recuadro, .indice-doc { break-inside: avoid; }
}

/* Inicio: la tabla de estatus, un contribuyente por renglón y un valor por módulo (28/09/2026). */
.tabla-estatus th:not(:first-child), .tabla-estatus td.celda-estatus { text-align: center; }
.tabla-estatus th { white-space: normal; min-width: 5.5rem; }
.celda-estatus a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 32px; text-decoration: none; color: inherit; border-radius: 8px; }
.celda-estatus a:hover, .celda-estatus a:focus-visible { background: var(--fondo-segmentos); }
/* La columna «Estado» del tablero de un módulo: la misma marca del inicio, con su porqué debajo. */
.liga-estado { text-decoration: none; color: inherit; }
.liga-estado:hover .estado, .liga-estado:focus-visible .estado { text-decoration: underline; }
/* La cabecera de cada módulo (01/10/2026): título y semáforo a la izquierda, la consulta automática en una tarjeta
   cuadrada a la derecha, a la misma altura; la tabla va abajo, a todo lo ancho. */
.cabecera-modulo { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 24px; align-items: center; margin-bottom: 16px; }
.cabecera-modulo .resumen { margin-bottom: 0; }
.cabecera-modulo .consulta-automatica { display: flex; flex-direction: column; min-height: 250px; padding: 18px; }
.consulta-automatica p { margin: 10px 0 0; font-size: 13px; line-height: 20px; }
.consulta-automatica .consulta-proxima { color: var(--titulo); }
.consulta-automatica .boton { margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) {
  .cabecera-modulo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cabecera-modulo .consulta-automatica { min-height: 0; }
  .consulta-automatica .boton { margin-top: 14px; }
}
/* El servicio suspendido (falla del SAT): los botones que piden consultas se apagan. */
.sat-suspendido form[action*="handler=Consultar"] button { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.aviso-servicio { border-bottom: 1px solid var(--error); background: var(--error-suave); color: var(--error); padding: 0.6rem 1.25rem; font-size: 0.92rem; }
.aviso-servicio.aviso-nadkor { border-color: var(--advertencia); background: var(--advertencia-suave); color: var(--texto); }
.aviso-servicio p { margin: 0.15rem auto; max-width: 72rem; }
.aviso-servicio a { color: inherit; font-weight: 600; margin-left: 6px; }
/* Los módulos de «Otros módulos» en Programar consultas automáticas: lista con viñetas de círculo. */
/* Programar: el formulario llena la tarjeta y «Guardar» queda abajo, a la misma altura en las tres. */
.tarjetas-programa .tarjeta > form { flex: 1; display: flex; flex-direction: column; margin-top: 1rem; }
.tarjetas-programa .tarjeta > form > .sin-marco { flex: 1; }
.tarjetas-programa .sin-marco .empuje { flex: 1; min-height: 1rem; }
.tarjetas-programa .sin-marco .boton { margin-top: 0; }
.lista-circulos { list-style: circle; margin: 6px 0 0; padding-left: 1.4rem; font-size: 14px; line-height: 22px; }
.servicio-sat { margin-bottom: 24px; }
.servicio-sat .formulario { max-width: 40rem; margin-top: 16px; }
.servicio-sat textarea { width: 100%; }
/* Declaraciones mensuales: las casillas por mes dentro de la tabla del módulo. */
.tabla-meses th.mes, .tabla-meses td.celda { text-align: center; padding-left: 3px; padding-right: 3px; width: 40px; }
.tabla-meses th.mes-novence, .tabla-meses td.mes-novence { background: #F6F8FA; }
.tabla-meses td.mes-novence .celda-novence { border-style: solid; }
.marca { font-size: 18px; line-height: 1; font-weight: 700; }
.marca-ok { color: var(--exito); }
.marca-aviso { color: var(--advertencia); }
.marca-revisar { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-secundario); white-space: nowrap; }
.marca-revisar-x { font-size: 14px; color: var(--texto-secundario); }
.tabla-estatus th:first-child, .tabla-estatus td:first-child { position: sticky; left: 0; z-index: 1; background: var(--blanco); }
.tabla-estatus thead th:first-child { background: var(--cabecera-tabla); z-index: 2; }

/* --- Confirmación dentro de la página (<form data-confirmar>, lo arma fiscal.js) --- */
dialog.confirmar {
  width: min(440px, calc(100% - 32px)); padding: 22px 22px 18px; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  background: var(--blanco); color: var(--texto); box-shadow: 0 12px 40px -8px rgba(15, 42, 61, 0.35);
}
dialog.confirmar::backdrop { background: rgba(15, 42, 61, 0.45); }
.confirmar-texto { margin: 0 0 18px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.confirmar-botones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.confirmar-botones .boton { margin: 0; }

/* --- Declaraciones mensuales: una obligación a la vez, cada renglón en una línea (28/09/2026) --- */
.segmentos-sub { display: flex; margin: 0 0 12px; background: transparent; border-color: transparent; padding: 0; }
.segmentos-sub a { border: 1px solid var(--borde); background: var(--blanco); font-size: 13px; padding: 5px 12px; }
.segmentos-sub a[aria-current="page"] { border-color: var(--accion); color: var(--accion); box-shadow: none; }
.tabla-una-linea th, .tabla-una-linea td { white-space: nowrap; }
.tabla-una-linea tr.fila-falta td { white-space: normal; }
.tabla th.num, .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Plan y pagos (/panel/plan, 02/10/2026) --- */
.plan-actual, .plan-datos { margin-bottom: 24px; max-width: 52rem; }
.plan-actual p + p, .plan-datos p + details { margin-top: 8px; }
.plan-actual .alerta { margin: 12px 0 0; }
.plan-portal { margin-top: 14px; }
.plan-catalogo { margin-bottom: 8px; }
.plan-catalogo-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.plan-catalogo-cabeza h2 { margin: 0; font-size: 20px; }
.plan-tipo { font-size: 16px; font-weight: 600; margin: 18px 0 2px; }
.plan-niveles { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); padding-bottom: 8px; margin-top: 10px; }
.plan-nivel h4, .plan-contacto h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.tarjeta .plan-precio { color: var(--texto); font-size: 14px; margin-bottom: 4px; }
.plan-precio strong { font-size: 24px; font-weight: 700; }
.plan-precio span { color: var(--texto-secundario); font-size: 13px; }
.plan-nivel-no { opacity: 0.6; }
.plan-pagar { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; }
.plan-pagar .boton { width: 100%; }
.plan-contacto { max-width: 28rem; margin: 8px 0 16px; }
.plan-notas { max-width: 52rem; margin-bottom: 24px; }
.plan-datos details { margin-top: 10px; }
.plan-datos summary { cursor: pointer; color: var(--accion); font-weight: 600; font-size: 14px; }
.plan-datos .formulario { max-width: 26rem; }

/* --- Entrar y registro (07/10/2026): una tarjeta centrada con el símbolo simple de Fiscal arriba, los botones a todo
   lo ancho y, al pie, el cambio entre entrar y registrarse. También el código, la invitación y el regreso de Google. --- */
.acceso {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 1rem;
  background: radial-gradient(38rem 16rem at 50% 0, var(--accion-suave), transparent 70%);
}
.caja-acceso {
  width: 100%;
  max-width: 27rem;
  margin: 0;
  padding: 1.75rem 2rem 1.5rem;
  border-top: 4px solid var(--marca-fiscal);
}
.acceso-marca { display: block; width: 92px; margin: 0 auto 0.85rem; border-radius: 8px; }
.acceso-marca svg { display: block; width: 100%; height: auto; }
.caja-acceso h1 { text-align: center; font-size: 1.45rem; margin: 0 0 0.35rem; }
.acceso-bajada { text-align: center; color: var(--texto-secundario); font-size: 14px; margin: 0 0 1.25rem; }
.caja-acceso .formulario { max-width: none; margin: 0.25rem 0 0; }
.caja-acceso .formulario label:first-child { margin-top: 0; }
.caja-acceso .formulario .boton, .caja-acceso .boton-google { width: 100%; align-self: stretch; }
.caja-acceso .boton-google { display: flex; }
.caja-acceso .formulario .campo-codigo { max-width: none; }
.caja-acceso .o-bien { max-width: none; margin: 1.15rem 0; }
.caja-acceso .lista-circulos { margin-bottom: 1rem; }
.caja-acceso .qr { display: block; margin: 0.5rem auto; }
.acceso-olvido { margin-top: 1rem; }
.acceso-olvido a { font-weight: 600; }
/* Qué hacer si se perdió la app autenticadora (_AppPerdida): cerrado, para no estorbar al que sí la tiene. */
.acceso-app-perdida { margin-top: 0.75rem; font-size: 13px; color: var(--texto-secundario); }
.acceso-app-perdida > summary { cursor: pointer; color: var(--accion); font-weight: 600; }
.acceso-app-perdida p { margin: 0.5rem 0 0; }
.acceso-cambio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin: 1.5rem -2rem 0;
  padding: 1.1rem 2rem 0;
  border-top: 1px solid var(--linea);
  font-size: 14px;
  color: var(--texto-secundario);
}
.acceso-legal { max-width: 27rem; margin: 0.75rem auto 0; color: var(--texto-tenue); font-size: 12px; text-align: center; }
.acceso-legal:last-child { margin-bottom: 2.5rem; }
.acceso-legal .aviso-corto { margin: 0; padding: 0; border: 0; font-size: 12px; text-align: left; }
.acceso-legal a { color: var(--texto-secundario); }
/* La trampa para robots del registro: fuera de la vista y del orden del teclado. */
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) {
  .acceso { padding: 1.25rem 0 0.75rem; }
  .caja-acceso { padding: 1.5rem 1.25rem 1.25rem; }
  .acceso-cambio { margin: 1.25rem -1.25rem 0; padding: 1rem 1.25rem 0; }
}

/* ---- Estado de cálculo: árbol de cada declaración ---- */
.nodos { list-style: none; margin: 0; padding: 0; }
.nodos .nodos { margin-left: 18px; border-left: 2px solid var(--borde, #D9DEE5); padding-left: 10px; }
.nodo { margin: 0; padding: 2px 0; }
.nodo-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr) 140px 110px; gap: 4px 10px; align-items: baseline; padding: 4px 6px; border-radius: 6px; }
.nodo-fila:hover { background: #F6F8FA; }
.nodo-signo { font-weight: 700; text-align: center; color: var(--texto-secundario, #5B6573); }
.nodo-rotulo { overflow-wrap: anywhere; }
.nodo-importe { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nodo-sindato { color: var(--texto-secundario, #5B6573); font-style: italic; }
.nodo-origen { grid-column: 2 / -1; font-size: 12px; }
.nodo-resultado > .nodo-fila { font-weight: 700; border-top: 1px solid var(--borde, #D9DEE5); }
.nodo-informativo > .nodo-fila { color: var(--texto-secundario, #5B6573); }
.nodo-supuesto > .nodo-fila { background: #F6F8FA; }
.nodo-diferencia { margin: 2px 0 6px 38px; padding: 6px 10px; border-left: 3px solid var(--error, #B42318); background: #FEF3F2; font-size: 13px; }
.calculo-mes { border: 1px solid var(--borde, #D9DEE5); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.calculo-mes > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.calculo-lados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; }
.calculo-lados dt { font-weight: 600; }
.calculo-lados dd { margin: 0; }
.calculo-dif { background: #FEF3F2; color: var(--error, #B42318); font-weight: 700; }
.calculo-leyenda p { margin: 0; }
@media (max-width: 640px) {
  .nodo-fila { grid-template-columns: 22px minmax(0, 1fr) 110px; }
  .nodo-estado { grid-column: 2 / -1; }
}

/* ---- Conciliación: la matriz liga a la ficha de cada regla (todos los meses, los dos lados y de dónde sale cada importe) ---- */
.tabla-matriz a.marca { text-decoration: none; }
.tabla-matriz a.celda-nd, .tabla-matriz a.celda-novence { color: var(--texto); }
.tabla-matriz a.marca:hover, .tabla-matriz a.marca:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
.tabla-matriz td.celda-ejercicio { text-align: left; padding-left: 8px; }
.tabla-matriz td.celda-ejercicio .ayuda { display: inline; margin: 0 0 0 6px; }
.etiqueta-supuesto { color: var(--advertencia); background: var(--advertencia-suave); }
.calculo-ficha { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; margin: 10px 0; scroll-margin-top: 12px; }
.calculo-ficha > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.calculo-ficha > summary .etiqueta { margin-left: 0; }
.calculo-ficha:target { border-color: var(--accion); }
.tabla-ficha th.numero, .tabla-ficha td.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-ficha td:first-child { min-width: 0; }
.tabla-ficha tr.ficha-mes td:first-child { white-space: nowrap; }
.tabla-ficha tr.ficha-mes td { border-bottom: 0; padding-bottom: 4px; }
.tabla-ficha tr.ficha-detalle td { padding-top: 0; font-size: 12px; color: var(--texto-secundario); }
.tabla-ficha tr.ficha-detalle .calculo-lados { margin: 0; }
.tabla-ficha tbody tr.ficha-detalle:hover { background: none; }
.tabla-ficha tr.ficha-mes { scroll-margin-top: 12px; }
.tabla-ficha tr.ficha-mes:target td, .tabla-ficha tr.ficha-mes:target + tr.ficha-detalle td { background: var(--accion-suave); }
.tabla-ficha .marca { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; margin-right: 4px; }