/* Nubicont: contabilidad, impuestos y nómina venezolanos, en la nube.
   Hoja de estilos principal. Vive fuera del HTML para que el navegador la guarde en caché: la
   dirección lleva ?v=<huella del archivo>, así que al cambiarla el navegador pide la nueva.
   Lo exclusivo de pantallas chicas está en movil.css.

   Colores y letra: el sistema de diseño de Nubicont (https://claude.ai/artifact/RVTCJ3JAuMwxCN3tRX6kRo).
   La marca (--marca) es petróleo en el tema claro y aqua en el oscuro. El ámbar (--sello) solo marca
   lo que vence. Los documentos de la firma (expediente, calendario) conservan los colores de la firma. */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Colores de identidad de Nubicont (no cambian con el tema) */
  --petroleo: #0a6491; --aqua: #23bbc5; --aqua-profundo: #17929c;
  --deep: #052432; --sobre-deep: #e8f2f5;

  --radio: 10px;
  --radio-chico: 6px;
  --ancho-lateral: 248px;
  --alto-barra: 60px;
  --fuente: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: var(--fuente);
  --fuente-cifra: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Tema oscuro (el de siempre): fondo tinta, paneles un tono arriba, la marca en aqua. */
:root, [data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #071820;
  --surface: #0c222c;
  --surface-2: #122c38;
  --surface-3: #183745;
  --line: #1d3644;
  --line-fuerte: #5d7f8f;
  --text: #e8f2f5;
  --muted: #94adb8;
  --suave: #6f8d9a;
  --marca: #23bbc5;
  --marca-oscuro: #6fd8de;      /* al pasar el ratón, en oscuro se aclara */
  --sobre-marca: #04202a;       /* texto sobre la marca: nunca blanco sobre aqua */
  --marca-tenue: #0f3a44;
  --marca-tenue-texto: #6fd8de;
  --senal: #6fd8de;
  --enlace: #23bbc5;
  --ok: #74d8ba;      --ok-tenue: #10342d;     --ok-borde: rgba(116, 216, 186, .30);  --ok-solido: #287963;
  --alerta: #f0bb4f;  --alerta-tenue: #33290f; --alerta-borde: rgba(240, 187, 79, .32);
  --sello: #f0bb4f;   --sobre-sello: #041219;
  --error: #ff8f7a;   --error-tenue: #3a1f1a;  --error-borde: rgba(255, 143, 122, .32);
  --sombra: 0 14px 40px rgba(0, 0, 0, .45);
  --lateral: #041219;
  --lateral-linea: rgba(232, 242, 245, .10);
  --lateral-texto: #86a1ad;
  --lateral-activo: #e8f2f5;
  --logo-debe: #e8f2f5; --logo-haber: #23bbc5;
}

/* Tema claro: página casi blanca, paneles blancos, la marca en petróleo; la barra lateral sigue en tinta. */
[data-tema="claro"] {
  color-scheme: light;
  --bg: #f5f8f9;
  --surface: #ffffff;
  --surface-2: #eaf0f2;
  --surface-3: #dfe7ea;
  --line: #dce4e8;
  --line-fuerte: #7d919b;
  --text: #0f1d24;
  --muted: #566670;
  --suave: #7d919b;
  --marca: #0a6491;
  --marca-oscuro: #084f73;
  --sobre-marca: #ffffff;
  --marca-tenue: #d6f3f4;
  --marca-tenue-texto: #0b5560;
  --senal: #0a6491;
  --enlace: #0a6491;
  --ok: #287963;      --ok-tenue: #e8f5ef;     --ok-borde: #b6dacb;  --ok-solido: #287963;
  --alerta: #8a5f0c;  --alerta-tenue: #fbf0d6; --alerta-borde: #ecd39c;
  --sello: #e0a12a;   --sobre-sello: #052432;
  --error: #98302f;   --error-tenue: #fbe4e4;  --error-borde: #efc2c1;
  --sombra: 0 12px 32px rgba(15, 29, 36, .12);
  --lateral: #052432;
  --lateral-linea: rgba(232, 242, 245, .12);
  --lateral-texto: #93aebb;
  --lateral-activo: #e8f2f5;
  --logo-debe: #0a6491; --logo-haber: #17929c;
}

/* ------------------------------------------------------------- 2. Cimientos */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fuente);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--enlace); }
.ico { flex: 0 0 auto; display: block; }
[hidden] { display: none !important; }
.solo-movil { display: none !important; }

/* --------------------------------------------------------- 3. Estructura general */
.app { display: flex; min-height: 100vh; }
.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { padding: 28px 32px 90px; max-width: 1480px; width: 100%; }
.sin-sesion { max-width: none; padding: 0 16px; }

/* ------------------------------------------------------------ 4. Barra lateral */
/* Al pasar de una pantalla a otra la barra queda quieta y solo cambia el contenido (sin el parpadeo de página nueva). */
@view-transition { navigation: auto; }
.lateral { view-transition-name: lateral; }
::view-transition-group(lateral), ::view-transition-old(lateral), ::view-transition-new(lateral) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
.lateral {
  width: var(--ancho-lateral);
  flex: 0 0 var(--ancho-lateral);
  background: var(--lateral);
  border-right: 1px solid var(--lateral-linea);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 60;
  transition: width .18s ease, flex-basis .18s ease;
}
.lateral-marca {
  height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--lateral-linea);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lateral-activo); min-width: 0; }
.marca .marca-simbolo { width: 30px; height: 30px; flex: none; }
.marca-texto { font-family: var(--fuente-titulo); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }

.lateral-yo {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lateral-linea);
  text-decoration: none; color: inherit;
}
.lateral-yo:hover { background: rgba(255, 255, 255, .03); }
.lateral-yo-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lateral-yo-texto strong { color: var(--lateral-activo); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-yo-texto small { color: var(--lateral-texto); font-size: 12px; }

/* Iniciales en tinta sobre aqua, sin degradado. */
.avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: var(--radio-chico);
  background: var(--aqua);
  color: var(--deep); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
}

.lateral-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.lateral-pie { padding: 10px; border-top: 1px solid var(--lateral-linea); }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none; border-radius: 10px;
  background: none;
  color: var(--lateral-texto);
  font: inherit; font-size: 14.5px; font-weight: 500;
  text-decoration: none; text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: rgba(255, 255, 255, .045); color: var(--lateral-activo); }
.nav-item .ico { color: var(--lateral-texto); }
.nav-item:hover .ico { color: var(--lateral-activo); }
.nav-texto { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-flecha { display: flex; transition: transform .15s ease; }
.nav-etiqueta { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-sello); background: var(--sello); border-radius: var(--radio-chico); padding: 1px 6px; line-height: 1.4; }
.nav-grupo.abierto > .nav-item .nav-flecha { transform: rotate(90deg); }

/* Lo activo: fondo aqua tenue, texto claro y el ícono en aqua. Sin raya al margen (esa era la señal de SEVJY). */
.nav-item.activa, .nav-grupo.con-activa > .nav-item { color: var(--lateral-activo); }
.nav-item.activa { background: color-mix(in srgb, var(--aqua) 14%, transparent); font-weight: 600; }
.nav-item.activa .ico, .nav-grupo.con-activa > .nav-item .ico { color: var(--aqua); }

.nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 14px; border-left: 1px solid var(--lateral-linea); }
.nav-grupo.abierto .nav-sub { display: flex; }
.nav-sub a {
  padding: 7px 12px; border-radius: 8px;
  color: var(--lateral-texto); font-size: 14px; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-sub a:hover { color: var(--lateral-activo); background: rgba(255, 255, 255, .045); }
.nav-sub a.activa { color: var(--lateral-activo); font-weight: 600; background: color-mix(in srgb, var(--aqua) 14%, transparent); }

/* Menú contraído: solo iconos. */
.menu-contraido .lateral { width: 68px; flex-basis: 68px; }
.menu-contraido .marca-texto, .menu-contraido .nav-texto, .menu-contraido .nav-flecha, .menu-contraido .nav-etiqueta,
.menu-contraido .lateral-yo-texto, .menu-contraido .nav-sub { display: none !important; }
.menu-contraido .lateral-marca { padding: 0; justify-content: center; flex-direction: column; gap: 2px; height: auto; padding: 10px 0; }
.menu-contraido .lateral-yo { justify-content: center; padding: 12px 0; }
.menu-contraido .nav-item { justify-content: center; padding: 11px 0; }
.menu-contraido #contraer-menu .ico { transform: rotate(180deg); }

/* ------------------------------------------------------------ 5. Barra superior */
.barra {
  height: var(--alto-barra);
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 0 32px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.barra-titulo { font-weight: 600; font-size: 14.5px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migas { display: flex; align-items: center; gap: 7px; min-width: 0; }
.migas .miga { flex: none; color: var(--muted); font-weight: 500; text-decoration: none; }
.migas a.miga:hover { color: var(--text); text-decoration: underline; }
.miga-sep { flex: none; color: var(--suave); font-weight: 400; }
.miga-pagina { display: none; align-items: center; gap: 7px; min-width: 0; }
.miga-actual { overflow: hidden; text-overflow: ellipsis; }
.barra.con-titulo .miga-pagina { display: inline-flex; animation: miga-entra .18s ease-out; }
@keyframes miga-entra { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.boton-icono {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--muted);
  cursor: pointer; position: relative;
}
.boton-icono:hover { color: var(--text); border-color: var(--line-fuerte); background: var(--surface-2); }
.lateral .boton-icono { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; background: none; border-color: var(--lateral-linea); color: var(--lateral-texto); }
.lateral .boton-icono:hover { color: var(--lateral-activo); background: rgba(255, 255, 255, .05); }

[data-tema="oscuro"] .ver-en-claro, [data-tema="claro"] .ver-en-oscuro { display: none; }
.ver-en-oscuro, .ver-en-claro { display: grid; }

/* Búsqueda global: una lupa arriba que abre un recuadro con el campo y los resultados. */
.buscador { position: relative; flex: none; }
.buscador-panel { right: 0; width: min(480px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.buscador-campo {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--line); color: var(--senal);
}
.buscador-campo input[type=search], .buscador-campo input[type=search]:focus {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none; box-shadow: none; padding: 0;
  color: var(--text); font: inherit; font-size: 14.5px;
}
.buscador-campo input::placeholder { color: var(--suave); }
.buscador-campo input::-webkit-search-cancel-button { display: none; }
.buscador-campo kbd {
  font-family: var(--fuente-cifra); font-size: 11px; color: var(--suave);
  border: 1px solid var(--line-fuerte); border-radius: 5px; padding: 0 6px; line-height: 18px;
}
#buscador-boton[aria-expanded="true"] { color: var(--senal); border-color: var(--senal); }

/* Paneles flotantes (resultados de búsqueda y campana) */
.flotante {
  position: absolute; top: calc(100% + 8px); z-index: 80;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-fuerte); border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.flotante-titulo { padding: 12px 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.flotante-vacio { margin: 0; padding: 18px 16px 22px; color: var(--muted); font-size: 13.5px; text-align: center; }

.buscador-resultados { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; }
.resultado-grupo { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.resultado { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.resultado.elegido, .resultado:hover { background: var(--marca-tenue); }
.resultado-texto { flex: 1; min-width: 0; }
.resultado-texto strong { display: block; font-weight: 600; font-size: 14px; }
.resultado-texto small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-atajos { display: flex; gap: 4px; }
.resultado-atajos a { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-fuerte); color: var(--muted); text-decoration: none; }
.resultado-atajos a:hover { color: var(--senal); border-color: var(--senal); }

.campana { position: relative; }
.campana-cuenta {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 9px; border: 2px solid var(--bg);
  background: var(--sello); color: var(--sobre-sello);
  font-family: var(--fuente-cifra); font-size: 10.5px; font-weight: 600; line-height: 1;
}
.campana-cuenta.urgente { background: var(--error); color: var(--bg); }
.campana-panel { right: 0; width: min(390px, 92vw); }
#campana-lista { max-height: 62vh; overflow-y: auto; padding: 0 6px 8px; }
.aviso { display: flex; gap: 11px; padding: 10px; border-radius: 9px; text-decoration: none; color: var(--text); }
.aviso:hover { background: var(--marca-tenue); }
.aviso-punto { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: 0 0 8px; background: var(--suave); }
.aviso.vencido .aviso-punto { background: var(--error); }
.aviso.hoy .aviso-punto { background: var(--alerta); }
.aviso.pronto .aviso-punto { background: var(--senal); }
.aviso strong { display: block; font-size: 14px; font-weight: 600; }
.aviso small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.aviso-tipo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }

/* ------------------------------------------------------------------ 6. Títulos */
h1 { font-family: var(--fuente-titulo); font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 4px; }
h2 { font-size: 15.5px; font-weight: 600; margin: 30px 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
.subtitle, .sub { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; }
.muted { color: var(--muted); font-size: 13px; }
h2.primero, h3.primero { margin-top: 0; }

/* ------------------------------------------------------------- 7. Contenedores */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: 18px 20px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 22px; }
.card {
  position: relative; overflow: hidden;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radio);
  padding: 16px 18px;
  color: inherit; text-decoration: none;
}
.card .label { font-size: 13px; font-weight: 500; color: var(--muted); }
.card .value { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 5px; line-height: 1.15; }
.card .value.ok { color: var(--ok); }
.card .value.alerta { color: var(--alerta); }
.card .value.error { color: var(--error); }
/* Sin ícono de marca de agua: la cifra no compite con nada. */
.card > .ico { display: none; }
a.card { cursor: pointer; transition: border-color .12s; }
a.card:hover { border-color: var(--line-fuerte); }
.cards-gerencia { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 1400px) { .cards-gerencia { grid-template-columns: repeat(7, 1fr); } }
.tabla-analistas td a { color: inherit; text-decoration: none; }
a.panel { display: block; color: inherit; text-decoration: none; transition: border-color .12s; }
a.panel:hover { border-color: var(--line-fuerte); }
a.card.activa { border-color: var(--senal); box-shadow: inset 0 0 0 1px var(--senal); }

.filterbar {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: end;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radio);
  padding: 14px 18px; margin-bottom: 18px;
}
.filterbar label, .campo > label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.filterbar .crece { flex: 1; min-width: 200px; }
.filterbar.interna { border: none; border-radius: 0; background: none; padding: 16px 18px 18px; margin: 0; }

details.panel { padding: 0; }
details.panel > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  font-size: 14px; font-weight: 600; color: var(--enlace);
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::marker { content: ""; }
details.panel > summary::before { content: "+"; font-size: 17px; line-height: 1; }
details.panel[open] > summary { border-bottom: 1px solid var(--line); }
details.panel[open] > summary::before { content: "−"; }

/* ------------------------------------------------------------------ 8. Tablas */
.tabla-envoltura { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); }
.tabla-envoltura.sep, .tabla-envoltura + .tabla-envoltura { margin-bottom: 24px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 16px; text-align: left; font-size: 14px; vertical-align: middle; }
th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

tr.client-group td, tr.client-group:hover td {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 16px;
}
tr.client-group .derecha { float: right; text-transform: none; letter-spacing: 0; color: var(--text); font-family: var(--fuente-cifra); font-weight: 600; }

/* Estado de la fila: lo dice su etiqueta, con palabras ("Vencida hace 13 días"). Sin raya de color al
   margen. Lo ya hecho o inactivo solo se apaga. */
tr.declarado td, tr.no-aplica td { color: var(--muted); }
/* Fila con cambios todavía sin guardar: se tiñe, y abajo aparece la barra con "Guardar cambios". */
tr.sin-guardar td { background: var(--marca-tenue) !important; }
tr.guardando { opacity: .55; pointer-events: none; }
/* Un solo botón principal por pantalla: el "Guardar" de cada fila solo se ve en la fila que cambió
   (app.js pone la clase guardado-en-barra cuando la barra de cambios funciona; sin JavaScript se ven todos). */
.guardado-en-barra tr:not(.sin-guardar) .guardar-fila { visibility: hidden; }

td.cifra, .cifra { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-size: 13px; }
td.cifra { white-space: nowrap; }

/* Tablas muy largas (cartera completa): el navegador solo dibuja lo que se ve. */
table.tabla-larga tr { content-visibility: auto; contain-intrinsic-size: auto 46px; }

/* --------------------------------------------------------------- 9. Etiquetas */
/* Etiquetas de estado: siempre con texto. El ámbar (sello) solo para lo que vence o pide acción. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radio-chico);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.sin-punto::before { display: none; }
.badge.pendiente { background: var(--sello); color: var(--sobre-sello); }
.badge.declarado, .badge.si { background: var(--ok-tenue); color: var(--ok); }
.badge.no { background: var(--error-tenue); color: var(--error); }
.badge.neutral { background: var(--surface-2); color: var(--muted); }
.badge.marca { background: var(--marca-tenue); color: var(--marca-tenue-texto); }

/* -------------------------------------------------------------- 10. Controles */
button, select, input, textarea { font-family: inherit; font-size: 14px; color: var(--text); }
input[type=text], input[type=tel], input[type=date], input[type=password], input[type=number], input[type=email], input[type=search],
select, textarea {
  padding: 8px 11px;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-chico);
  background: var(--surface);
  max-width: 100%;
}
input::placeholder { color: var(--suave); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--senal); box-shadow: 0 0 0 1px var(--senal); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }
input[type=checkbox] { accent-color: var(--marca); width: 16px; height: 16px; vertical-align: middle; }
input:disabled, select:disabled { opacity: .45; }

/* Dentro de las tablas los campos parecen texto hasta que se tocan: menos ruido. */
table input[type=text], table input[type=tel], table input[type=email], table input[type=date], table input[type=number], table input[type=password], table select {
  border-color: transparent; background: transparent; padding: 5px 8px;
}
table input:hover, table select:hover, table input:focus, table select:focus { border-color: var(--line-fuerte); background: var(--surface-2); }

button, a.boton, a.primary, a.ok, a.warn, a.ghost, label.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio);
  background: var(--surface); color: var(--text);
  padding: 8px 15px;
  font-size: 13.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .1s, border-color .1s, color .1s;
}
button:hover, a.boton:hover, label.boton:hover { background: var(--surface-2); }
button.primary, a.primary { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
button.primary:hover, a.primary:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); }
button.ok, a.ok { background: var(--ok-solido); border-color: var(--ok-solido); color: #fff; }
button.ok:hover, a.ok:hover { filter: brightness(1.12); }
/* Reversibles (revertir, desactivar, reasignar): contorno ámbar. */
button.warn, a.warn { background: transparent; border-color: var(--alerta); color: var(--alerta); }
button.warn:hover, a.warn:hover { background: var(--alerta-tenue); }
/* Destructivas: solo texto rojo; se afirman al apuntarlas. */
button.peligro, a.peligro { background: none; border-color: transparent; color: var(--error); }
button.peligro:hover, a.peligro:hover { background: var(--error-tenue); border-color: var(--error-borde); }
button.ghost, a.ghost { background: transparent; color: var(--muted); }
button.ghost:hover, a.ghost:hover { background: var(--surface-2); color: var(--text); }
button.declarar { background: transparent; color: var(--ok); border-color: var(--ok-borde); }
button.declarar:hover { background: var(--ok-tenue); border-color: var(--ok); }
button.mini, a.mini { padding: 5px 11px; font-size: 12.5px; border-radius: var(--radio-chico); }
button:disabled { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }

/* Acción secundaria escondida (restablecer una clave): se ve al pulsar "Clave". */
details.clave-inline { display: inline-flex; align-items: center; gap: 6px; }
details.clave-inline > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 5px 11px; border: 1px solid var(--line-fuerte); border-radius: var(--radio-chico);
  background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600;
}
details.clave-inline > summary::-webkit-details-marker { display: none; }
details.clave-inline > summary::marker { content: ""; }
details.clave-inline > summary:hover, details.clave-inline[open] > summary { background: var(--surface-2); color: var(--text); }

/* Obligación que todavía no se puede declarar (la anterior sigue pendiente). */
.bloqueada { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 12.5px; font-weight: 600; cursor: help; }

.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented a, .segmented button { padding: 6px 14px; border: none; background: none; border-radius: 7px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.segmented a:hover, .segmented button:hover { background: var(--surface-2); color: var(--text); }
.segmented a.active, .segmented a.activa, .segmented button.activa { background: var(--marca); color: var(--sobre-marca); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radio-chico);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  text-decoration: none; vertical-align: middle;
}
.icon-btn:hover { color: var(--senal); border-color: var(--senal); }

/* ----------------------------------------------------------------- 11. Avisos */
.flash { padding: 11px 15px; border-radius: var(--radio); margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.flash.error { background: var(--error-tenue); color: var(--error); }
.flash.ok { background: var(--marca-tenue); color: var(--marca-tenue-texto); }

.tostadas { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.tostada {
  pointer-events: auto;
  max-width: min(420px, 90vw);
  padding: 11px 15px; border-radius: var(--radio);
  background: var(--lateral); color: var(--lateral-activo);
  border: 1px solid var(--lateral-linea);
  box-shadow: var(--sombra);
  font-size: 14px;
  animation: entra .18s ease-out;
}
.tostada a { color: var(--aqua); font-weight: 600; }
.tostada { cursor: pointer; }
.tostada.error { background: var(--error-tenue); color: var(--error); border-color: var(--error-borde); display: flex; gap: 12px; align-items: flex-start; }
.tostada-cerrar { margin-left: auto; color: var(--lateral-texto); font-size: 18px; line-height: 1; }
.tostada.error .tostada-cerrar { color: var(--error); }
.tostada.sale { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.barra-cambios {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 190;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 18px;
  background: var(--surface-3); border: 1px solid var(--senal); border-radius: 14px;
  box-shadow: var(--sombra);
  font-size: 14px; font-weight: 600;
}

/* ------------------------------------------------------- 12. Barras de avance */
.minibar-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.minibar-row strong { color: var(--text); font-family: var(--fuente-cifra); font-weight: 600; font-size: 14.5px; }
.minibar-track { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.minibar-fill { height: 100%; border-radius: 3px; background: var(--senal); }
.minibar-fill.ok { background: var(--ok); }
.minibar-fill.alerta { background: var(--alerta); }
.minibar-fill.error { background: var(--error); }

/* ------------------------------------------------------- 13. Ayudas de reparto */
.fila { display: flex; gap: 16px; flex-wrap: wrap; }
.fila > .crece { flex: 1; min-width: 260px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.acciones { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.pila { display: flex; flex-direction: column; gap: 14px; }
.ancho { width: 100%; }
.nowrap { white-space: nowrap; }
.sep { margin-bottom: 22px; }
.sep-chico { display: block; margin-bottom: 8px; }
.centro { text-align: center; }
.campo > input, .campo > select { width: 100%; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
label.casilla { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.aviso-rojo { color: var(--error); }
.con-copiar { display: flex; align-items: center; gap: 8px; }
.copiar-btn { background: none; border: none; padding: 5px; color: var(--suave); border-radius: 6px; }
.copiar-btn:hover { background: var(--marca-tenue); color: var(--senal); }
.paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }

/* ------------------------------------------------------------ 14. Inicio de sesión */
/* La pantalla de acceso es de Nubicont (no de la firma): tinta azul noche y el celeste de la nube.
   A la izquierda la marca; a la derecha el formulario, que sigue el tema claro u oscuro. */
:root { --nb-tinta: #081422; --nb-tinta-2: #0c1d31; --nb-cielo: #3fb6ef; --nb-cielo-claro: #6fcaf4; --nb-nube: #eaf3fb; }
.acceso {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(400px, 1fr); min-height: 100vh; min-height: 100dvh;
}
.sin-sesion:has(> .acceso) { padding: 0; }
.nb-simbolo { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.nb-debe { fill: var(--nb-nube); }
.nb-haber { fill: var(--nb-cielo); }
.acceso-logo { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 22px; letter-spacing: -.025em; color: #fff; }

.acceso-marca {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 44px clamp(32px, 5vw, 72px);
  color: #9fb3c8;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(63, 182, 239, .20), transparent 62%),
    radial-gradient(700px 480px at -10% 110%, rgba(63, 182, 239, .09), transparent 60%),
    repeating-linear-gradient(to bottom, transparent 0 35px, rgba(255, 255, 255, .028) 35px 36px),
    linear-gradient(160deg, var(--nb-tinta-2), var(--nb-tinta) 60%);
}
/* Las dos columnas del libro (debe y haber), apenas marcadas. */
.acceso-marca::before {
  content: ""; position: absolute; inset: 0 auto 0 clamp(18px, 3vw, 44px); width: 5px; z-index: -1;
  border-left: 1px solid rgba(63, 182, 239, .16); border-right: 1px solid rgba(63, 182, 239, .16);
}
.acceso-fondo { position: absolute; width: 640px; height: 640px; right: -230px; bottom: -150px; z-index: -1; opacity: .06; }
.acceso-fondo .nb-haber { fill: var(--nb-nube); }
.acceso-mensaje { max-width: 480px; }
.acceso-mensaje h2 {
  margin: 0 0 14px; color: #fff; font-weight: 600; text-wrap: balance;
  font-size: clamp(30px, 3.3vw, 46px); line-height: 1.07; letter-spacing: -.035em;
}
.acceso-mensaje p { margin: 0; font-size: 16px; line-height: 1.5; color: #9fb3c8; }
.acceso-puntos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.acceso-puntos li { display: flex; align-items: center; gap: 13px; color: #dbe6f0; font-size: 14.5px; }
.acceso-puntos li > span {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px;
  color: var(--nb-cielo); background: rgba(63, 182, 239, .10); border: 1px solid rgba(63, 182, 239, .22);
}
.acceso-pie { margin: 0; font-size: 12.5px; color: #6f86a0; }

.acceso-formulario { display: grid; place-items: center; padding: 48px 28px; background: var(--bg); }
.acceso-caja { width: 100%; max-width: 360px; }
.acceso-caja h1 { margin: 0 0 6px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.acceso-sub { margin: 0 0 30px; color: var(--muted); font-size: 14.5px; }
.acceso-caja label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.acceso-caja input[type=email], .acceso-caja input[type=password], .acceso-caja input[type=text] {
  width: 100%; height: 46px; padding: 0 14px; font-size: 15px; border-radius: 11px; margin: 0 0 20px;
  transition: border-color .15s, box-shadow .15s;
}
.acceso-caja input:focus { border-color: var(--nb-cielo); box-shadow: 0 0 0 3px rgba(63, 182, 239, .22); }
.acceso-caja .campo-clave { position: relative; display: block; margin-bottom: 26px; }
.acceso-caja .campo-clave input { margin: 0; padding-right: 46px; }
.acceso-caja .ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 8px; border-radius: 8px; color: var(--suave); cursor: pointer; }
.acceso-caja .ojo:hover { color: var(--text); background: none; }
.acceso-entrar {
  width: 100%; height: 48px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--nb-cielo); color: #06121f; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 8px 24px -10px rgba(63, 182, 239, .65);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.acceso-entrar:hover { background: var(--nb-cielo-claro); }
.acceso-entrar:active { transform: translateY(1px); box-shadow: 0 4px 14px -8px rgba(63, 182, 239, .6); }
.acceso-entrar:focus-visible { outline: 2px solid var(--nb-cielo); outline-offset: 3px; }
.acceso-entrar:disabled { opacity: .75; cursor: progress; }
.acceso-aviso {
  display: flex; align-items: flex-start; gap: 10px; margin: -8px 0 22px; padding: 11px 13px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.4; background: var(--error-tenue); border: 1px solid var(--error-borde); color: var(--error);
}
.acceso-aviso .ico { margin-top: 1px; }
.acceso-ayuda { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; font-size: 12.5px; color: var(--suave); text-align: center; }
.acceso .solo-angosto { display: none; }
[data-tema="claro"] .acceso-formulario .nb-debe { fill: var(--nb-tinta); }
.logo-debe { fill: var(--logo-debe); }
.logo-haber { fill: var(--logo-haber); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ----------------------------------------------------------------- 15. Impresión */
@media print {
  .lateral, .barra, .filterbar, .acciones, .tostadas, .barra-cambios, button { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
}

/* ------------------------------------------------ 16. Contabilidad: flujo de revisión de los EEFF */
.flujo-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.flujo-paso {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); text-decoration: none; font-size: 12.5px; line-height: 1.25;
}
.flujo-paso strong { font-family: var(--fuente-cifra); font-size: 20px; color: var(--text); }
.flujo-paso:hover { border-color: var(--line-fuerte); }
.flujo-paso.activa { border-color: var(--senal); box-shadow: inset 0 0 0 1px var(--senal); }
.flujo-paso.por_aprobar strong { color: var(--enlace); }
.flujo-paso.devuelto strong { color: var(--error); }
.flujo-paso.aprobado strong { color: var(--alerta); }
.flujo-paso.entregado strong { color: var(--ok); }

td.flujo { min-width: 230px; }
details.paso > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 5px 11px; border-radius: var(--radio-chico);
  border: 1px solid var(--marca); background: var(--marca); color: var(--sobre-marca);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
details.paso > summary::-webkit-details-marker { display: none; }
details.paso > summary::marker { content: ""; }
details.paso[open] > summary { background: transparent; color: var(--enlace); border-color: var(--line-fuerte); margin-bottom: 8px; }
details.paso > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 6px 0 3px; }
details.paso input[type=text], details.paso select { width: 100%; border-color: var(--line-fuerte) !important; background: var(--surface-2) !important; margin-bottom: 6px; }
details.paso.discreto { margin-top: 6px; }
details.paso.discreto > summary { background: none; border-color: transparent; color: var(--suave); padding: 2px 0; font-weight: 500; }
details.paso.discreto > summary:hover { color: var(--text); }

td.revision { max-width: 300px; font-size: 13px; }
.nota-revision { color: var(--text); margin-bottom: 3px; }
details.historial > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.historial-paso { padding: 6px 0 0; font-size: 12.5px; line-height: 1.4; }

/* Comentario vigente de un cliente, debajo de su nombre en Impuestos. */
tr.nota-cliente td, tr.nota-cliente:hover td {
  background: var(--alerta-tenue); color: var(--text);
  font-size: 13px; padding: 7px 16px;
  border-bottom: 1px solid var(--alerta-borde);
}
tr.nota-cliente .ico { display: inline-block; vertical-align: -2px; color: var(--alerta); margin-right: 3px; }

/* Comentarios en la ficha del cliente */
.comentario { padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.comentario.archivado { opacity: .55; }

/* Tasas BCV: los días de un mes se abren justo debajo de su fila. */
tr.mes-abierto td { background: var(--marca-tenue); }
tr.detalle-mes > td, tr.detalle-mes:hover > td { background: var(--bg); padding: 16px 18px 20px; }
.detalle-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.detalle-cabecera h3 { margin: 0; }
/* Cuánto se movió la tasa respecto al día anterior. */
td.sube { color: var(--ok); }
td.baja { color: var(--error); }
table.tabla-interna { background: var(--surface); }
table.tabla-interna th, table.tabla-interna td { padding: 7px 14px; }

/* ------------------------------------ 17. Pantalla incrustada (cotizador de propuestas) */
.marco-incrustado {
  height: calc(100vh - var(--alto-barra) - 150px);
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;   /* la propuesta es un documento en papel blanco, no sigue el tema */
}
.marco-incrustado iframe { width: 100%; height: 100%; border: 0; display: block; }


/* ------------------------------- 18. Expediente del cliente (documento en papel blanco)
   Colores fijos, no los del tema: es un documento para imprimir o mandar al cliente. */
.expediente { background:white; color:#12181b; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:36px 40px; border-top:4px solid #006f91; }
.membrete { display:flex; align-items:center; gap:14px; padding-bottom:18px; margin-bottom:22px; border-bottom:3px solid #03212b; }
.membrete img { height:48px; width:auto; }
.firma-nombre { font-size:17px; font-weight:800; color:#03212b; letter-spacing:-.01em; }
.firma-sub { font-size:12px; color:#006f91; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.expediente h2 { color:#03212b; margin-top:0; font-size:19px; }
.expediente h3 { color:white; background:#006f91; margin:26px 0 10px; padding:6px 12px; border-radius:6px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
table.datos { border-collapse:collapse; width:100%; max-width:700px; }
table.datos td { padding:7px 10px; border-bottom:1px solid #dde3e6; }
table.datos td:first-child { font-weight:600; color:#5f6a70; width:220px; }
table.datos-tabla { border-collapse:collapse; width:100%; margin-top:2px; }
table.datos-tabla th, table.datos-tabla td { padding:7px 10px; border:1px solid #dde3e6; text-align:left; font-size:13px; }
table.datos-tabla th { background:#eff8fb; color:#006f91; }
.pie { margin-top:32px; padding-top:14px; border-top:1px solid #dde3e6; font-size:11px; color:#5f6a70; text-align:center; }
@media print {
  @page { size: auto; margin: 10mm; }
  .no-print, header.topbar { display:none !important; }
  body { background:white; }
  main { margin:0; padding:0; max-width:100%; }
  .expediente { box-shadow:none; border-radius:0; border-top:3px solid #006f91; padding:14px 18px; font-size:11.5px; }
  .membrete { padding-bottom:8px; margin-bottom:10px; gap:10px; }
  .membrete img { height:32px; }
  .firma-nombre { font-size:14px; }
  .firma-sub { font-size:10px; }
  .expediente h1 { font-size:16px; margin-bottom:1px; }
  .expediente .subtitle { font-size:10.5px; margin-bottom:10px !important; }
  .expediente h2 { font-size:14.5px; }
  .expediente h3 { font-size:11px; margin:10px 0 6px; padding:4px 10px; page-break-after:avoid; }
  table.datos td { padding:3px 8px; font-size:11px; }
  table.datos-tabla th, table.datos-tabla td { padding:3px 6px; font-size:10.5px; }
  table.datos, table.datos-tabla { page-break-inside:avoid; }
  .pie { margin-top:12px; padding-top:6px; font-size:9px; }
}

.expediente .muted { color:#5f6a70; }
.expediente table, .expediente td, .expediente th { background:transparent; }
.expediente tr:hover td { background:transparent; }

/* ------------------------------------------------- 19. Panel lateral derecho (expediente) */
.panel-velo { position: fixed; inset: 0; z-index: 140; background: rgba(2, 16, 21, .55); }
.panel-lateral {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(760px, 92vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line-fuerte);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .35);
  animation: entra-panel .18s ease-out;
}
@keyframes entra-panel { from { transform: translateX(24px); opacity: .4; } }
.panel-lateral-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-lateral-cabecera strong { font-size: 14.5px; }
.panel-lateral-cuerpo { flex: 1; overflow-y: auto; padding: 18px; background: var(--bg); }
.panel-lateral-cuerpo .expediente { box-shadow: none; }

/* Al imprimir con el panel abierto sale solo el expediente. */
@media print {
  body.con-panel > .app, body.con-panel .panel-velo, body.con-panel .panel-lateral-cabecera { display: none !important; }
  body.con-panel .panel-lateral { position: static; width: auto; border: none; box-shadow: none; }
  body.con-panel .panel-lateral-cuerpo { overflow: visible; padding: 0; background: #fff; }
}

.panel-lateral.guardando { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------ 17. Nómina: recibos e informes */
.expediente .num, table.datos-tabla th.num, table.datos-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recibo + .recibo { margin-top: 24px; }
@media print { .recibo { page-break-after: always; box-shadow: none; } .recibo:last-child { page-break-after: auto; } }
.informe-filtros [data-filtro] { display: none; }
.informe-filtros [data-filtro].visible { display: block; }
/* Informes: en la barra de filtros, el grupo y el informe del grupo (dos listas cortas), y al lado los filtros que le tocan. */
.informe-filtros .filterbar { margin-bottom: 16px; }
@media print { .informe-filtros .filterbar { display: none; } }
table.informe td.num, table.informe th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.informe tr.total td { font-weight: 700; border-top: 2px solid var(--line-fuerte); }

/* ------------------------------------------------- 18. Menos texto: ayuda plegada y barra de acciones */
/* La explicación de cada pantalla vive detrás del icono (i) junto al título. */
h1 .ayuda {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 22px; height: 22px; margin-left: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer;
}
h1 .ayuda:hover, h1 .ayuda.activa { color: var(--text); border-color: var(--line-fuerte); background: var(--surface-2); }
.subtitle.plegado { display: none; }
.subtitle.plegado.visible { display: block; }
/* Los formularios plegables de una pantalla se vuelven una fila de botones con icono; se abre uno a la vez. */
.barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.barra-acciones .chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--radio-chico); background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.barra-acciones .chip:hover { border-color: var(--line-fuerte); background: var(--surface-2); }
.barra-acciones .chip.activa { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.barra-acciones .chip svg { width: 15px; height: 15px; }
.barra-acciones a.boton { background: var(--surface); border-color: var(--line); }
.barra-acciones a.boton:hover { border-color: var(--line-fuerte); background: var(--surface-2); }
details.panel.en-barra > summary { display: none; }
details.panel.en-barra { margin-bottom: 16px; }
@media print { h1 .ayuda, .barra-acciones { display: none !important; } }

/* ------------------------------------------------- 19. Confirmar en la página, filas que abren, sumas y restas */
dialog.confirmar { border: 1px solid var(--line-fuerte); border-radius: var(--radio); background: var(--surface); color: var(--text); padding: 22px 24px; max-width: 440px; font-size: 14.5px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
dialog.confirmar::backdrop { background: rgba(2, 16, 21, .55); }
tr.fila-enlace { cursor: pointer; }
tr.fila-enlace:hover td { background: var(--surface-2); }
.resta { color: var(--error); }
.suma { color: var(--ok); }
table.datos-tabla td.resta, table.datos-tabla th.resta { color: #b42318; }

/* ------------------------------------------------- 19b. Administrativo: la factura se carga con la forma de una factura, sin huecos */
.doc-form .doc-fila { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.doc-form .doc-fila > div > label { display: block; margin-bottom: 4px; }
.doc-form .doc-fila .crece { flex: 1; min-width: 240px; }
.doc-hoja { padding: 16px 18px 14px; max-width: 1320px; }
.doc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px 10px; align-items: end; }
.doc-grid > div > label { display: block; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-grid .c1 { grid-column: span 1; } .doc-grid .c2 { grid-column: span 2; } .doc-grid .c3 { grid-column: span 3; } .doc-grid .c4 { grid-column: span 4; }
.doc-grid .c5 { grid-column: span 5; } .doc-grid .c8 { grid-column: span 8; } .doc-grid .c12 { grid-column: span 12; }
.doc-grid .busca { font-size: 15px; }
.doc-nuevo { padding: 10px 12px; border: 1px dashed var(--line-fuerte); border-radius: var(--radio-chico); }
.doc-nuevo-campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; margin-top: 8px; }
.doc-nuevo-campos > div > label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.doc-nuevo-campos .ancho-2 { grid-column: span 2; }
.doc-nuevo-campos .ancho-3 { grid-column: span 3; }
.rif-campo { display: flex; align-items: center; gap: 4px; }
.rif-campo select { width: 58px; flex: none; }
.rif-campo input { flex: 1; min-width: 0; }
.rif-campo .rif-dv { flex: none; font-family: var(--fuente-cifra); font-weight: 600; min-width: 22px; }
.doc-nuevo-pie { display: flex; align-items: center; gap: 10px; align-self: end; }
.doc-nuevo-aviso { font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-nuevo-aviso.error { color: var(--error); }
@media (max-width: 760px) { .doc-nuevo-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-nuevo-campos .ancho-3 { grid-column: span 2; } }
table.doc-lineas { margin-top: 12px; border-top: 1px solid var(--line); }
table.doc-lineas th { padding: 8px 8px; }
table.doc-lineas td { padding: 4px 8px; vertical-align: middle; }
table.doc-lineas input[type=text], table.doc-lineas select { width: 100%; }
table.doc-lineas input.monto { text-align: right; }
table.doc-lineas td.num { text-align: right; }
table.doc-lineas .acciones-linea button.mini { padding: 4px 7px; min-width: 0; opacity: 0; transition: opacity .12s; }
table.doc-lineas tr:hover .acciones-linea button.mini, table.doc-lineas tr:focus-within .acciones-linea button.mini { opacity: 1; }
table.doc-lineas tfoot td { border-bottom: none; padding: 3px 8px; font-size: 14px; }
table.doc-lineas tfoot tr:first-child td { border-top: 1px solid var(--line); padding-top: 8px; }
table.doc-lineas tfoot td.eti { text-align: right; color: var(--muted); white-space: nowrap; }
table.doc-lineas tfoot tr:hover td { background: transparent; }
table.doc-lineas tfoot input.monto { width: 100%; text-align: right; }
table.doc-lineas tfoot input.pct { width: 54px; text-align: right; padding: 3px 6px; margin: 0 2px 0 6px; }
table.doc-lineas tfoot select { max-width: 230px; margin-left: 6px; padding: 3px 6px; font-size: 13px; }
table.doc-lineas tfoot td.eti { white-space: normal; }
table.doc-lineas tfoot tr.doc-total td { padding-top: 7px; }
table.doc-lineas tfoot tr.doc-total td.eti { color: var(--text); font-weight: 600; }
table.doc-lineas tfoot tr.doc-total td.cifra { font-size: 17px; font-weight: 700; }
table.doc-lineas tfoot tr.doc-pagar td.cifra { color: var(--senal); }
.doc-contador { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radio); }
table.doc-lineas.sin-codigo th:first-child, table.doc-lineas.sin-codigo td:first-child { display: none; }
@media (max-width: 800px) { .doc-grid > div { grid-column: span 6 !important; } .doc-grid .c12 { grid-column: span 12 !important; } }

/* ------------------------------------------------- 20. Contable: buscador de cuenta o tercero en las líneas */
.busca-envoltura { position: relative; display: block; }
.busca-envoltura .sugerencias { position: absolute; left: 0; top: 100%; z-index: 60; min-width: 100%; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--radio-chico); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.busca-envoltura .sugerencias div { padding: 7px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.busca-envoltura .sugerencias div.activa, .busca-envoltura .sugerencias div:hover { background: var(--marca); color: var(--sobre-marca); }
.busca-lista > .busca { width: 100%; }
.busca-lista .sugerencias { max-height: 320px; }
.busca-lista .sugerencias div { white-space: normal; }
.busca.falta { outline: 2px solid var(--alerta); }
.busca.sin-elegir { outline: 2px solid var(--error); }
.busca.nuevo { outline: 2px dashed var(--alerta); }
/* Líneas del asiento: una fila por línea; el auxiliar y la divisa van debajo, solo cuando hacen falta. */
.asiento-lineas th, .asiento-lineas td { padding: 7px 8px; }
.asiento-lineas td { vertical-align: top; }
.asiento-lineas input[type=text], .asiento-lineas select { width: 100%; }
.asiento-lineas input.monto { text-align: right; }
.asiento-lineas th.num, .asiento-lineas td.cifra { text-align: right; }
.asiento-lineas .sub { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.asiento-lineas .sub[hidden], .asiento-lineas .sub [hidden] { display: none; }
.asiento-lineas .sub .busca-envoltura { flex: 1; min-width: 0; }
.asiento-lineas .sub input[name=documento] { width: 96px; flex: none; }
.asiento-lineas .sub select { width: 72px; flex: none; }
.asiento-lineas select.sel-centro { width: 100%; }
.asiento-lineas .sub input.divisa { flex: 1; max-width: 180px; }
.asiento-lineas .acciones-linea { white-space: nowrap; text-align: right; }
.asiento-lineas .acciones-linea button.mini { padding: 4px 7px; min-width: 0; opacity: 0; transition: opacity .12s; }
.asiento-lineas tr:hover .acciones-linea button.mini, .asiento-lineas tr:focus-within .acciones-linea button.mini, .asiento-lineas .acciones-linea button.mini:focus { opacity: 1; }
.asiento-lineas .divisa-toggle.activo { color: var(--senal); border-color: var(--senal); opacity: 1; }
.asiento-lineas tr.total td { vertical-align: middle; }
#lineas td { overflow: visible; }

/* 20. Conciliación bancaria */
.concilia { width: auto; min-width: 420px; border-collapse: collapse; }
.concilia td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.concilia td.num { min-width: 130px; }
.concilia tr.total td { border-top: 1px solid var(--text); font-weight: 600; }
.concilia tr.ok td.num { color: var(--ok); font-weight: 600; }
.concilia tr.alerta td.num { color: var(--error); font-weight: 600; }
td.recorte { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tabla-banco { table-layout: fixed; }
table.tabla-banco th:nth-child(2), table.tabla-banco th:nth-child(3) { width: 11%; }
table.tabla-banco th:nth-child(5) { width: 13%; }
table.tabla-banco th:nth-child(7) { width: 100px; }
.filtros-banco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.filtros-banco .segmented button .n { font-weight: 400; opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }
.filtros-banco input.busca { flex: 1 1 260px; max-width: 420px; }
.barra-lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--marca); border-radius: var(--radio-chico); background: color-mix(in srgb, var(--marca) 6%, transparent); }
.barra-lote select { max-width: 240px; }
table.concilia-informe td.sangria { padding-left: 28px; }
table.concilia-informe tr.total td { font-weight: 700; border-top: 1px solid #12181b; }
table.concilia-informe tr.ok td.num { color: #1b7f4b; }
table.concilia-informe tr.alerta td.num { color: #b42318; }
table.facturas-reparto { width: 100%; font-size: 12.5px; }
table.facturas-reparto th { padding: 3px 6px; font-size: 10.5px; }
table.facturas-reparto td { padding: 3px 6px; border-bottom: none; }
table.facturas-reparto input.monto { width: 100%; text-align: right; padding: 3px 6px; }
.en-fila .en-fila-titulo { font-size: 13px; }
form#form-facturas.en-fila { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin: -4px 0; border: 1px solid var(--marca); border-radius: var(--radio-chico); background: color-mix(in srgb, var(--marca) 6%, transparent); }
form#form-cuenta.en-fila { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin: -4px 0; border: 1px solid var(--marca); border-radius: var(--radio-chico); background: color-mix(in srgb, var(--marca) 6%, transparent); }
form#form-cuenta.en-fila .busca-envoltura { display: block; }
form#form-cuenta.en-fila .en-fila-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
table.tabla-banco td .busca-envoltura .sugerencias { z-index: 5; }
.cards-concilia { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cards-concilia .card .value { font-size: 22px; white-space: nowrap; }
.cards-concilia .card .muted { margin-top: 3px; font-size: 12.5px; }
.cards-concilia .card .value.resta { color: var(--text); }
table.tabla-banco td.recorte.ancha { max-width: none; }
table.tabla-banco td.recorte.ancha select { max-width: 100%; }
table.tabla-banco form.inline { display: block; }
table.tabla-banco .nota-cliente { font-size: 12px; color: var(--marca); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tabla-banco select.sugerido { border-color: var(--marca); color: var(--marca); font-weight: 600; }
/* «Sin cruzar» de cada fila: botón con la sugerencia y un menú propio */
.fila-estado { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12.5px; text-align: left; cursor: pointer; }
.fila-estado:hover, .fila-estado[aria-expanded="true"] { border-color: var(--line-fuerte); background: var(--surface-2); }
.fila-estado .eti { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--alerta-tenue); color: var(--alerta); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.fila-estado .sug { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-estado.sugerido { border-color: color-mix(in srgb, var(--marca) 45%, transparent); }
.fila-estado.sugerido .sug { color: var(--marca); font-weight: 600; }
.fila-estado .ico { flex: none; color: var(--muted); }
.menu-fila { position: fixed; z-index: 80; max-width: 520px; max-height: 320px; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--radio-chico); box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 13px; }
.menu-fila .menu-grupo { padding: 8px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-fila .menu-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-fila .menu-item.activa, .menu-fila .menu-item:hover { background: var(--marca); color: var(--sobre-marca); }
.menu-fila .menu-item.activa .menu-sug, .menu-fila .menu-item:hover .menu-sug { color: var(--sobre-marca); opacity: .85; }
.menu-fila .menu-sug { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--marca); }

/* 21. Botones de solo icono (con su título como ayuda) y cuadre del asiento a la vista */
a.boton.solo-icono, .barra-acciones a.boton.solo-icono, .barra-acciones .chip.solo-icono { padding: 7px 10px; min-width: 0; line-height: 0; }
.barra-acciones .chip svg:only-child { margin: 0; }
.cuadre { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cuadre.si { color: var(--ok); }
.cuadre.si::before { content: "✓ "; }
.cuadre.no { color: var(--error); }

/* 22. Panel emergente con formularios (nueva compra, venta, cobro, pago) y pie del documento a dos columnas */
.panel-lateral.amplio { width: min(1140px, 96vw); }
.panel-lateral-cuerpo .subtitle, .panel-lateral-cuerpo [data-volver], .panel-lateral-cuerpo .no-print:empty { display: none; }
.panel-lateral-cuerpo .doc-hoja { max-width: none; }
.doc-pie { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px 32px; align-items: start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.doc-pie-izq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.doc-nota { margin-top: 10px; }
.doc-nota input { width: 100%; }
.doc-pie-izq > div > label { display: block; margin-bottom: 3px; }
.doc-retenciones { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.doc-retenciones > div > label { display: block; margin-bottom: 3px; white-space: nowrap; }
.doc-retenciones .crece { flex: 1; min-width: 220px; }
.doc-retenciones input.pct { width: 64px; text-align: right; }
table.doc-totales { width: 100%; border-collapse: collapse; }
table.doc-totales td { padding: 4px 8px; border: none; font-size: 14px; }
table.doc-totales td.eti { text-align: right; color: var(--muted); white-space: nowrap; width: 60%; }
table.doc-totales td.num { text-align: right; }
table.doc-totales input.monto { width: 100%; text-align: right; }
table.doc-totales tr.doc-total td { border-top: 1px solid var(--line); padding-top: 7px; }
table.doc-totales tr.doc-total td.eti { color: var(--text); font-weight: 600; }
table.doc-totales tr.doc-total td.cifra { font-size: 17px; font-weight: 700; }
table.doc-totales tr.doc-pagar td.cifra { color: var(--senal); }
@media (max-width: 800px) { .doc-pie { grid-template-columns: 1fr; } }

/* 23. Ficha del documento guardado: la misma hoja del formulario, en limpio */
.doc-ficha .doc-grid { align-items: start; row-gap: 12px; }
.doc-ficha .dato > label, .doc-pie-izq .dato > label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.doc-ficha .dato { font-size: 14.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.doc-ficha table.doc-lineas td { padding: 7px 8px; }
.doc-ficha .doc-pie-izq .dato div { margin-top: 2px; }
.doc-ficha .dato a { white-space: nowrap; }
/* Pasar de un documento a otro: ‹ 3 / 10 › en la fila de botones */
.paginador { align-items: center; align-self: center; }
.paginador a { display: inline-flex; align-items: center; padding: 6px 8px; color: var(--text); }
.paginador a.inactivo { opacity: .3; pointer-events: none; }
.paginador .paginador-pos { padding: 0 4px; font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* La hoja de una factura: a la izquierda quién, a la derecha los datos del documento alineados como en una factura. */
.doc-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px 48px; align-items: start; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.eti-chica { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.doc-nombre { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.doc-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 16px; margin: 0; font-size: 14px; }
.doc-datos dt { color: var(--muted); font-weight: 400; }
.doc-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.doc-datos dd .muted { font-weight: 400; }
@media (max-width: 800px) { .doc-cabecera { grid-template-columns: 1fr; } }
.doc-asiento { margin-top: 14px; }
/* Facturas leídas de fotos: una tarjeta por factura, la foto a la izquierda y sus datos como en Nueva compra */
.lecturas-barra { margin: 0 0 10px; gap: 12px; }
.lecturas { display: flex; flex-direction: column; gap: 12px; }
.lectura { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 16px; transition: opacity .15s; }
.lectura.apagada { opacity: .5; }
.lectura-foto a { display: block; }
.lectura-foto img { width: 150px; height: 190px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); display: block; background: #fff; }
.lectura-pdf { width: 150px; height: 190px; border-radius: 8px; border: 1px dashed var(--line-fuerte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.lectura-foto a:hover img, .lectura-foto a:hover .lectura-pdf { border-color: var(--marca); }
.lectura-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lectura-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.lectura-cabeza .crece, .lectura .nuevo-campos .crece { flex: 1; }
.lectura-cabeza .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; display: inline-block; vertical-align: bottom; }
.lectura .doc-grid > div > label { font-size: 12px; }
.lectura .nuevo-campos { display: flex; gap: 10px; align-items: end; }
.lectura .nuevo-campos .c-rif { width: 200px; }
.lectura .nuevo-campos > div > label { display: block; margin-bottom: 3px; font-size: 12px; }
.lectura input.monto { text-align: right; }
.lectura-total .total-fila { font-size: 18px; font-weight: 700; text-align: right; padding: 6px 2px 4px; }
.lectura-notas { font-size: 13px; border-top: 1px solid var(--line); padding-top: 8px; }
.lectura-notas summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.lectura-notas summary::-webkit-details-marker { display: none; }
.lectura-notas summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.lectura-notas[open] summary::before { transform: rotate(90deg); }
.lectura-notas .ln-titulo { font-weight: 600; }
.lectura-notas .ln-que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.lectura-notas .fl-chip { font-size: 11.5px; padding: 1px 8px; }
.ln-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; margin-top: 10px; }
.ln-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ln-puntos, .ln-renglones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ln-puntos li { position: relative; padding: 5px 8px 5px 26px; border-radius: 6px; background: var(--surface-2); line-height: 1.45; }
.ln-puntos li::before { content: "i"; position: absolute; left: 8px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--line-fuerte); color: var(--surface); font-size: 9.5px; font-weight: 700; text-align: center; line-height: 13px; font-style: italic; }
.ln-puntos li.alerta { background: var(--alerta-tenue); color: var(--text); box-shadow: inset 3px 0 0 var(--alerta); }
.ln-puntos li.alerta::before { content: "!"; background: var(--alerta); font-style: normal; }
.ln-renglones li { padding: 3px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ln-renglones li:last-child { border-bottom: none; }
@media (max-width: 760px) { .lectura { grid-template-columns: 1fr; } .lectura-foto img, .lectura-pdf { width: 100%; height: 160px; } }
/* Avance de la lectura en lote */
.lectura-progreso { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radio-chico); background: var(--surface); }
.lectura-progreso .lp-cabeza { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lectura-progreso .lp-barra { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 8px 0 10px; overflow: hidden; }
.lectura-progreso .lp-barra span { display: block; height: 100%; width: 0; background: var(--marca); transition: width .3s; }
.lectura-progreso .lp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-height: 260px; overflow-y: auto; }
.lectura-progreso li { display: flex; gap: 12px; justify-content: space-between; }
.lectura-progreso .lp-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lectura-progreso .lp-estado { flex: none; text-align: right; }
.lectura-progreso .lp-ok { color: var(--ok); }
.lectura-progreso .lp-error { color: var(--error); white-space: normal; max-width: 60%; }
.foto-estado { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radio-chico); border: 1px solid var(--line); font-size: 13px; }
.foto-estado.leyendo { color: var(--muted); }
.foto-estado.ok { border-color: var(--ok-borde); background: var(--ok-tenue); }
.foto-estado.alerta { border-color: var(--alerta-borde); background: var(--alerta-tenue); }
.foto-estado.error { border-color: var(--error-borde); background: var(--error-tenue); color: var(--error); }
.foto-estado .girando { display: inline-block; animation: girar 1s linear infinite; }
.foto-estado { padding: 10px; }
.foto-estado.error { color: var(--text); }
.fl { display: flex; gap: 14px; align-items: flex-start; }
.fl-foto { flex: none; display: block; }
.fl-foto img, .fl-pdf { width: 64px; height: 82px; border-radius: 6px; border: 1px solid var(--line-fuerte); object-fit: cover; object-position: top; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #5f6a70; }
.fl-foto:hover img, .fl-foto:hover .fl-pdf { border-color: var(--marca); }
.fl-cuerpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fl-titulo { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.fl-titulo .fl-cerrar { margin-left: auto; padding: 2px 8px; }
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.fl-chip.ok { color: var(--ok); border-color: var(--ok-borde); background: var(--ok-tenue); }
.fl-chip.alerta { color: var(--alerta); border-color: var(--alerta-borde); background: var(--alerta-tenue); }
.fl-chip.error { color: var(--error); border-color: var(--error-borde); background: var(--error-tenue); }
.fl-chip.marca { color: var(--enlace); border-color: var(--line-fuerte); background: var(--marca-tenue); }
.fl-chip.neutral { color: var(--muted); }
.fl-notas { border-top: none; padding-top: 0; }
/* Lo que el lector llenó se ilumina un momento para que se vea qué cambió */
@keyframes recienLeido { from { box-shadow: 0 0 0 2px var(--marca); background-color: var(--marca-tenue); } to { box-shadow: 0 0 0 0 transparent; } }
.recien-leido { animation: recienLeido 2.4s ease-out; }
@keyframes girar { to { transform: rotate(360deg); } }
.doc-hoja.no-aplica { opacity: .6; }
.doc-nombre a { color: inherit; text-decoration: none; }
.doc-nombre a:hover { text-decoration: underline; }
.doc-asiento table.doc-lineas tfoot td { padding-top: 8px; border-top: 1px solid var(--line-fuerte); }
table.doc-totales .bs-eq { min-width: 110px; }
table.doc-totales.con-bs td.eti { width: auto; }
table.doc-totales.con-bs input.monto { min-width: 96px; }
.doc-pie:has(table.doc-totales.con-bs) { grid-template-columns: minmax(0, 1fr) 470px; }
table.doc-totales tr.cabecera-eq td { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 2px; border-bottom: none; }
table.doc-historia { width: 100%; margin-top: 4px; font-size: 13.5px; }
table.doc-historia td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.doc-historia tr:last-child td { border-bottom: none; }
table.doc-historia td.num { text-align: right; white-space: nowrap; }
.doc-ficha .doc-pie { grid-template-columns: minmax(0, 1fr) 400px; gap: 12px 48px; }
.doc-ficha .doc-pie-izq { gap: 14px; }
.doc-botones { flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.doc-botones .boton { white-space: nowrap; }
span.boton { cursor: default; }

/* 24. Ver como cliente, y la barra de guardar del formulario */
.ver-como { margin: 0; }
.ver-como button.nav-item { width: 100%; background: none; border: none; cursor: pointer; font: inherit; text-align: left; }
.aviso-ver-como { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radio-chico); background: var(--alerta-tenue); color: var(--alerta); border: 1px solid var(--alerta-borde); font-size: 13px; }
.aviso-ver-como form { margin: 0; }
.doc-acciones { align-items: center; }
.doc-acciones .crece { flex: 1; }
.panel-lateral-cuerpo .doc-acciones { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 10px 18px 14px; background: var(--bg); border-top: 1px solid var(--line); z-index: 2; }

/* 25. "Contabilizar" sin filas marcadas: el botón avisa en rojo */
.boton.sin-marcar { border-color: var(--error) !important; color: var(--error) !important; background: var(--error-tenue) !important; animation: sin-marcar .35s ease-out 2; }
@keyframes sin-marcar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* 26. Pestañas (ficha del empleado y otras pantallas largas) */
.pestanas { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 6px 0 16px; }
.pestanas button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; margin-bottom: -1px;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: none; }
.pestanas button:hover { color: var(--text); }
.pestanas button.activa { color: var(--text); border-bottom-color: var(--marca); }
.pestanas .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 11px; text-align: center; }
.con-pestanas [data-seccion]:not(.activa) { display: none; }
.ficha-datos { margin: 2px 0 14px; }
@media print { .con-pestanas [data-seccion] { display: block !important; } }

/* 27. Lista de empleados: título con acciones, pestañas como enlaces, nombre en dos líneas con iniciales */
.titulo-acciones { align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.titulo-acciones > .acciones { margin-top: 6px; gap: 10px; }
.pestanas a { display: inline-block; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 600; text-decoration: none; }
.pestanas a:hover { color: var(--text); }
.pestanas a.activa { color: var(--text); border-bottom-color: var(--marca); }
.emp-celda { display: flex; align-items: center; gap: 12px; }
.emp-celda .muted { font-size: 12.5px; margin-top: 1px; }
.avatar-fila { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--marca-tenue); color: var(--enlace); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.card .value small.moneda { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.tabla-envoltura th.num, .tabla-envoltura td.num { text-align: right; }
.emp-celda strong { white-space: nowrap; }

/* 28. Empresa en la que se trabaja: pastilla en la barra de arriba, con un color propio por empresa */
.empresa-pastilla { position: relative; flex: 0 1 auto; min-width: 0; }
.empresa-boton { display: inline-flex; align-items: center; gap: 8px; max-width: 420px; height: 36px; padding: 0 12px 0 10px; cursor: pointer;
  background: color-mix(in srgb, var(--empresa-color) 9%, var(--surface)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--empresa-color) 35%, var(--line-fuerte)); border-left: 4px solid var(--empresa-color);
  border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; }
.empresa-boton:hover { border-color: var(--empresa-color); }
.empresa-boton svg { flex: none; color: var(--muted); }
.empresa-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--empresa-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--empresa-color) 22%, transparent); }
.empresa-boton .empresa-punto { display: none; }
.empresa-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-rif { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 500; color: var(--muted); }
.empresa-flecha { flex: none; color: var(--muted); font-size: 11px; }
.empresa-lista { left: 0; min-width: 320px; max-height: 70vh; overflow-y: auto; padding-bottom: 6px; }
.empresa-lista form { margin: 0; }
.empresa-filtro { padding: 0 12px 8px; }
.empresa-filtro input { width: 100%; }
.empresa-opcion { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; background: none; border: none; border-radius: 0;
  color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; box-shadow: none; }
.empresa-opcion:hover, .empresa-opcion:focus { background: var(--surface-2); outline: none; }
.empresa-opcion.actual { font-weight: 700; }
.empresa-opcion-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 29. Menú "Más" (acciones poco frecuentes de una pantalla) */
.menu-mas { position: relative; }
.menu-mas > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  border: 1px solid var(--line-fuerte); border-radius: var(--radio-chico); background: var(--surface-2); color: var(--text);
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas > summary:hover, .menu-mas[open] > summary { background: var(--surface-3); }
.menu-mas-lista { right: 0; min-width: 240px; padding: 6px; }
.menu-mas-lista a, .menu-mas-lista button { display: flex; width: 100%; justify-content: flex-start; gap: 10px; padding: 9px 12px;
  border: none; border-radius: 8px; background: none; color: var(--text); font-size: 13.5px; font-weight: 500; text-decoration: none; box-shadow: none; }
.menu-mas-lista a:hover, .menu-mas-lista button:hover { background: var(--surface-2); }
.menu-mas-lista svg { color: var(--muted); }

/* 30. Guardar cambios: aparece abajo cuando un formulario largo (ficha, configuración) tiene algo sin guardar */
.guardar-cambios { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 10px 12px 10px 16px; border: 1px solid var(--line-fuerte); border-left: 3px solid var(--marca); border-radius: 10px;
  background: var(--surface-3); box-shadow: var(--sombra); font-size: 13.5px; animation: entra .18s ease-out; }
.guardar-cambios[hidden] { display: none; }
.guardar-cambios .acciones { gap: 8px; }
fieldset.sin-marco { border: none; padding: 0; margin: 0; min-width: 0; }
fieldset.sin-marco > section + section { margin-top: 0; }

/* 31. Ficha del empleado (encabezado con iniciales y estado, tres cifras) y pestañas con ícono en una fila (ficha, configuración) */
.ficha-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar-ficha { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--marca-tenue); color: var(--enlace); font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.ficha-titulo { flex: 1; min-width: 180px; }
.ficha-titulo h1, .ficha-nombre { margin: 0; font-size: 22px; line-height: 1.2; }
.ficha-nombre { font-family: var(--fuente-titulo, inherit); font-weight: 700; }
.ficha-titulo .muted { font-size: 13.5px; margin-top: 2px; }
.ficha-estado { flex: none; }
.ficha-cabeza + .ficha-datos { margin: 10px 0 16px; font-size: 13px; }
.ficha-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.ficha-cifras .card { padding: 12px 14px; }
.ficha-cifras .card .value { font-size: 20px; }
.ficha-cifras .card .muted { font-size: 12px; margin-top: 2px; }
.con-pestanas { container-type: inline-size; }
.pestanas-iconos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--alto-barra); z-index: 15; background: var(--bg); margin-top: 0; }
.panel-lateral .pestanas-iconos { top: -18px; padding-top: 6px; }
.pestanas-iconos::-webkit-scrollbar { display: none; }
.pestanas-iconos button { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 10px 12px; }
.pestanas-iconos button svg { color: var(--suave); }
.pestanas-iconos button.activa svg, .pestanas-iconos button:hover svg { color: var(--marca); }
.pestanas-iconos .cuenta { margin-left: 1px; }
/* Si no caben las siete, las que no están abiertas quedan solo con su ícono. */
@container (max-width: 660px) { .pestanas-iconos button:not(.activa) .txt { display: none; } .pestanas-iconos button { padding: 10px 11px; } }
details.plegable { border-top: 1px solid var(--line); padding-top: 12px; }
details.plegable > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; align-items: center; gap: 6px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before { content: '›'; display: inline-block; transition: transform .15s; color: var(--muted); font-size: 16px; }
details.plegable[open] > summary::before { transform: rotate(90deg); }
details.plegable[open] > .pila { margin-top: 12px; }
@media (max-width: 700px) { .ficha-cifras { grid-template-columns: 1fr 1fr; } }

/* 32. Expediente del trabajador: lo que tiene (o le falta), con su estado, y lo que Nubicont genera */
ul.expediente { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radio); background: var(--surface); overflow: hidden; }
.exp-fila { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.exp-fila:first-child { border-top: none; }
.exp-icono { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--marca-tenue); color: var(--enlace); }
.exp-falta .exp-icono { background: var(--surface-2); color: var(--suave); }
.exp-vencido .exp-icono { background: var(--error-tenue); color: var(--error); }
.exp-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.exp-texto strong { font-size: 14px; }
.exp-texto span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-falta .exp-texto strong { color: var(--muted); }
.exp-acciones { flex: none; display: inline-flex; gap: 6px; align-items: center; }
.pestanas .cuenta.aviso { background: var(--alerta-tenue); color: var(--alerta); }
.generar-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.generar-lista a { flex: 1 1 auto; white-space: nowrap; }
.generar-lista a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); text-decoration: none; }
.generar-lista a:hover { border-color: var(--line-fuerte); background: var(--surface-2); }
.generar-lista a > svg { flex: none; color: var(--enlace); }
.generar-lista strong { font-size: 13.5px; }
@media (max-width: 560px) { .exp-fila { flex-wrap: wrap; } .exp-texto { flex-basis: calc(100% - 50px); } .exp-fila .badge { margin-left: 48px; } }

/* 33. Ícono de información: la nota sale en un cuadrito al pasar el mouse o al llegar con el teclado */
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); cursor: help; outline: none; }
.info:hover, .info:focus-visible { color: var(--text); border-color: var(--line-fuerte); background: var(--surface-2); }
.info::after { content: attr(data-info); position: absolute; top: calc(100% + 8px); left: -10px; z-index: 60; width: max-content; max-width: min(300px, 70vw);
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line-fuerte); background: var(--surface-3); color: var(--text); box-shadow: var(--sombra);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .12s, transform .12s; }
.info:hover::after, .info:focus-visible::after { opacity: 1; transform: none; }
h3.con-info { display: flex; align-items: center; }

/* 34. Una nómina: cifras que caben, revisión antes de cerrar y el menú "Más" con su acción de borrar */
.cards-nomina { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.cards-nomina .card { padding: 14px 16px; }
.cards-nomina .card .value { font-size: 20px; white-space: nowrap; }
.cards-nomina .card .muted { font-size: 12px; margin-top: 3px; }
.cards-nomina .card:first-child { border-color: var(--ok-borde); background: var(--ok-tenue); }
.cards-nomina .card:first-child .value { color: var(--ok); }
.revision { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--alerta-borde); border-left: 3px solid var(--alerta);
  border-radius: var(--radio); background: var(--surface); }
.revision-icono { flex: none; color: var(--alerta); margin-top: 1px; }
.revision ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.revision li + li { margin-top: 2px; }
.menu-mas-lista form { margin: 0; }
.menu-mas-lista button.peligro, .menu-mas-lista button.peligro svg { color: var(--error); }
.menu-mas-lista button.peligro:hover { background: var(--error-tenue); }

/* 35. Parámetros de nómina: agrupados por tema, con su nombre y su unidad */
.tabla-parametros tr.grupo-fila td { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding-top: 10px; padding-bottom: 8px; }
.tabla-parametros td:first-child { font-weight: 600; }

/* 36. Pasos de una nómina */
ol.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--suave); }
ol.pasos li { display: inline-flex; align-items: center; gap: 6px; }
ol.pasos li + li::before { content: ''; width: 18px; height: 1px; background: var(--line-fuerte); margin-right: 12px; }
ol.pasos .paso-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line-fuerte); font-size: 11px; font-weight: 700; }
ol.pasos li.hecho { color: var(--ok); }
ol.pasos li.actual { color: var(--text); font-weight: 600; }
ol.pasos li.actual .paso-n { border-color: var(--marca); background: var(--marca); color: var(--sobre-marca); }

/* 37. Por qué una nómina todavía no se puede calcular, cerrar o reabrir (el orden de las nóminas) */
.aviso-orden { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line-fuerte); border-radius: var(--radio);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; }
.aviso-orden svg { flex: none; color: var(--muted); margin-top: 1px; }
.aviso-orden a { font-weight: 600; margin-left: 4px; }

input.solo-lectura, input.solo-lectura:focus { background: var(--surface-2); color: var(--muted); border-style: dashed; box-shadow: none; cursor: default; }

/* 38. Aumento general: cómo queda cada trabajador */
#aumento-vista .aumento-diferencia { color: var(--ok); }
#aumento-vista tr.aumento-total th, #aumento-vista tr.aumento-total td { background: var(--surface-2); font-weight: 700; }

/* 39. Recibo de pago: título a la derecha, neto con letras, firma con huella y el cestaticket separado por una línea de corte */
.recibo .recibo-titulo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; font-size: 11px; color: #5f6a70; }
.recibo .recibo-titulo strong { color: #03212b; font-size: 13px; }
.recibo .recibo-neto { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: 12px; text-align: right; }
.recibo .recibo-neto strong { font-size: 16px; }
.recibo .recibo-neto strong .muted { font-weight: 400; font-size: 12.5px; }
.recibo .recibo-neto > span { font-size: 11.5px; }
.recibo .recibo-firmas { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.recibo .recibo-firma { text-align: center; font-size: 11px; min-width: 260px; }
.recibo .recibo-linea { border-bottom: 1px solid #12181b; height: 34px; margin-bottom: 4px; }
.recibo .recibo-huella { flex: none; width: 64px; height: 78px; border: 1px solid #9aa4a9; border-radius: 6px; display: flex; align-items: flex-end;
  justify-content: center; padding-bottom: 4px; font-size: 9.5px; color: #5f6a70; }
.recibo .recibo-corte { margin: 22px -40px 18px; border-top: 1px dashed #9aa4a9; }
@media print { .recibo .recibo-corte { margin: 14px -18px 12px; } .recibo .recibo-linea { height: 26px; } .recibo .recibo-huella { width: 54px; height: 64px; } }
/* Firmas de todos los recibos de nómina: la empresa (con su firma y sello cargados) y el trabajador, en la misma línea. */
.recibo .recibo-firmas-todas { align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 4px; }
.recibo .recibo-firmas-todas .recibo-firma { flex: 1; min-width: 0; max-width: 300px; }
.recibo .recibo-firmas-todas .recibo-linea { height: 0; }
.recibo .recibo-firma-imagenes { height: 62px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-bottom: -10px; position: relative; }
.recibo .recibo-rubrica { max-height: 56px; max-width: 170px; object-fit: contain; }
.recibo .recibo-sello { max-height: 66px; max-width: 90px; object-fit: contain; opacity: .92; }
@media print { .recibo .recibo-firma-imagenes { height: 54px; } }
.recibo .recibo-nota { margin: 8px 0 0; font-size: 11.5px; }
/* Cambio de régimen: la fecha solo aparece si se elige otro régimen */
.regimen-fecha { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.regimen-fecha[hidden] { display: none; }
.regimen-fecha input { width: auto; }
.carta-firma-imagenes { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 64px; margin-bottom: -14px; }
.carta-firma-imagenes img { max-height: 58px; max-width: 170px; object-fit: contain; }
.carta-firma-imagenes img.sello { max-height: 70px; max-width: 90px; }
/* Kit de egreso: cada documento en su hoja */
.kit-egreso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.kit-egreso .casilla { margin: 0; }
.kit-hoja + .kit-hoja { margin-top: 24px; }
@media print { .kit-hoja { page-break-after: always; } .kit-hoja:last-child { page-break-after: auto; } .kit-hoja + .kit-hoja { margin-top: 0; } }
@media (max-width: 760px) { .kit-egreso { grid-template-columns: 1fr; } }
.recibo .relacion-prestaciones th, .recibo .relacion-prestaciones td { font-size: 11px; padding-left: 4px; padding-right: 4px; }
.recibo .recibo-declaracion { margin: 14px 0 4px; font-size: 13px; line-height: 1.6; text-align: justify; }


.dato-fijo { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border: 1px dashed var(--line-fuerte); border-radius: var(--radio-chico);
  background: var(--surface-2); color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.menu-mas-lista .menu-nota { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; color: var(--muted); font-size: 12.5px; max-width: 280px; white-space: normal; }

/* 41. Formularios en rejilla (nómina especial u otras fechas) y la tasa como un solo dato */
.form-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; align-items: end; }
.form-rejilla > div { min-width: 0; }
.form-rejilla .ancho-2 { grid-column: span 2; }
.form-rejilla label { display: block; margin-bottom: 5px; }
.form-nota { margin: 10px 0 0; font-size: 12.5px; }
.form-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modos-nomina { margin: 2px 0 16px; }
.dato-tasa { gap: 6px; }
.dato-tasa input, .dato-tasa input:focus { width: 9ch; padding: 0; border: none; background: none; box-shadow: none; color: var(--text); font: inherit;
  font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; }
.campo-tasa .dato-fijo { width: 100%; }
@media (max-width: 560px) { .form-rejilla .ancho-2 { grid-column: auto; } .modos-nomina { display: flex; flex-wrap: wrap; } }

/* 42. Calcular a un solo trabajador (dentro de la barra de los recibos) */
.filterbar .uno-solo { display: flex; gap: 8px; align-items: end; margin-left: auto; }
.filterbar .uno-solo select { min-width: 200px; }
.filterbar .uno-solo .con-info { display: flex; align-items: center; gap: 4px; }

/* 43. Vacaciones de un trabajador: resumen arriba y sus períodos en orden */
.vac-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.vac-resumen > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radio); background: var(--surface); }
.vac-resumen strong { font-size: 15px; }
.vac-periodos td { vertical-align: top; }

/* 44. Acciones a la vista: botón de solo ícono y el de eliminar, discreto hasta que se le pasa el mouse */
button.solo-icono { padding: 8px 10px; line-height: 0; }
button.boton-peligro { color: var(--error); }
button.boton-peligro:hover:not(:disabled) { background: var(--error-tenue); border-color: var(--error-borde); }
button.boton-peligro:disabled { opacity: .4; cursor: not-allowed; }

/* 45. Conceptos: qué afecta cada uno */
fieldset.afectaciones { border: 1px solid var(--line); border-radius: var(--radio); padding: 10px 14px 12px; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
fieldset.afectaciones legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
fieldset.afectaciones .casilla { margin: 0; }

/* 46. Fecha de pago y tasa de una nómina abierta: una barra corta, pegada al encabezado */
.filterbar.pago-y-tasa { margin: 0 0 14px; padding: 10px 14px; gap: 12px; align-items: end; width: fit-content; max-width: 100%; }
.filterbar.pago-y-tasa .campo-tasa { min-width: 220px; }

label.boton { cursor: pointer; margin: 0; }

/* Resumen de la empresa. Series validadas (dataviz) contra la superficie de cada tema: ventas azul, compras naranja. */
:root, [data-tema="oscuro"] { --serie-1: #3987e5; --serie-2: #d95926; }
[data-tema="claro"] { --serie-1: #2a78d6; --serie-2: #eb6834; }
.serie-1 { background: var(--serie-1); } .serie-2 { background: var(--serie-2); }
.cards-tablero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cards-tablero .card .value { font-size: 20px; white-space: nowrap; }
.cards-tablero .card .muted { margin-top: 3px; font-size: 12.5px; }
.tablero-rejilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; margin-bottom: 14px; }
.tablero-rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tablero-rejilla > .panel, .tablero-lista { padding: 14px 16px; margin: 0; }
.tablero-rejilla h3, .tablero-lista h3 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
@media (max-width: 980px) { .tablero-rejilla, .tablero-rejilla.tres { grid-template-columns: 1fr; } }
.grafico-leyenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.grafico-leyenda i, .grafico-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.grafico { position: relative; height: 230px; margin: 8px 0 4px 54px; overflow: visible; }
.tablero-grafico { min-width: 0; }
.grafico-ejes { position: absolute; inset: 0 0 22px 0; }
.grafico-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.grafico-linea span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafico-meses { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grafico-mes { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; text-decoration: none; color: var(--muted); border-radius: 6px; }
.grafico-mes:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.grafico-mes .barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding-top: 4px; }
.grafico-mes .col { display: block; width: min(18px, 34%); min-height: 1px; border-radius: 4px 4px 0 0; }
.grafico-mes .mes { height: 22px; line-height: 22px; font-size: 11.5px; }
.grafico-mes.actual .mes { color: var(--text); font-weight: 700; }
.grafico-tip { position: absolute; top: 0; z-index: 5; pointer-events: none; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-fuerte); box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 12.5px; white-space: nowrap; }
.grafico-tip b { font-variant-numeric: tabular-nums; margin-left: 6px; }
.grafico-tabla { font-size: 13px; margin-top: 6px; }
.grafico-tabla summary { cursor: pointer; }
.top, .proximo { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.top:last-child, .proximo:last-child { border-bottom: none; }
.proximo { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.proximo:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.top-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-barra { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.top-barra span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.top .cifra, .proximo .cifra { text-align: right; font-variant-numeric: tabular-nums; }
.vencen { list-style: none; margin: 0; padding: 0; }
.vencen li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.vencen li:last-child { border-bottom: none; }
.vence-fecha { font-variant-numeric: tabular-nums; color: var(--muted); }
.vence-fecha.pronto { color: var(--alerta); font-weight: 700; }
.vence-fecha.vencido { color: var(--error); font-weight: 700; }
.vence-que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Portal del cliente: módulos y usuarios */
.modulos-portal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 16px; }
.modulo-op { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radio-chico); cursor: pointer; }
.modulo-op:hover { border-color: var(--line-fuerte); }
.modulo-op > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.modulo-op .muted { font-size: 12px; }
.modulos-pie { grid-column: 1 / -1; }
.usuarios-portal { display: flex; flex-direction: column; gap: 10px; }
.usuario-portal { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr) auto; gap: 16px; align-items: center; padding: 12px 16px; margin: 0; }
.up-quien { display: flex; gap: 10px; align-items: center; min-width: 0; }
.up-quien .muted { overflow: hidden; text-overflow: ellipsis; }
.up-inicial { width: 34px; height: 34px; border-radius: 10px; background: var(--marca-tenue); color: var(--enlace); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.up-permisos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.permisos-op { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.permisos-op.apagada { opacity: .45; }
.permisos-op .casilla { margin: 0; }
@media (max-width: 900px) { .usuario-portal { grid-template-columns: 1fr; } }

/* Panel de una declaración: comprobantes adjuntos y la lectura previa */
.dc-cabeza { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 14px; font-size: 13.5px; }
.dc-archivos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dc-archivo { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radio-chico); font-size: 13px; }
.dc-tipo { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.dc-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-leido { font-size: 12px; white-space: nowrap; }
.dc-soltar { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px; border: 1.5px dashed var(--line-fuerte); border-radius: var(--radio-chico); cursor: pointer; font-size: 13px; }
.dc-soltar:hover { border-color: var(--marca); }
.dc-soltar input { margin-top: 6px; }
.dc-previa { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 13px; }
.dc-p { padding: 8px 10px; border-radius: var(--radio-chico); border: 1px solid var(--line); }
.dc-p.ok { border-color: var(--ok-borde); background: var(--ok-tenue); }
.dc-p.mal { border-color: var(--alerta-borde); background: var(--alerta-tenue); }
.dc-aviso { color: var(--alerta); font-weight: 600; margin-top: 3px; }
.dc-confirmar { margin: 6px 0; }
.dc-subir .acciones { margin-top: 10px; gap: 8px; }
@media (max-width: 700px) { .dc-archivo { grid-template-columns: 1fr auto; } .dc-leido { display: none; } }

/* Declaraciones de la empresa */
.dcl-mes { padding: 12px 16px; margin: 0 0 12px; container-type: inline-size; }
.dcl-mes h3 { margin: 0 0 6px; font-size: 14px; }
.dcl-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) 104px 128px 112px minmax(0, 2fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dcl-cab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: none; padding-top: 0; }
.dcl-fila .num { text-align: right; }
.dcl-fila .cifra { white-space: nowrap; }
.dcl-archivos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dcl-arch { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-fuerte); font-size: 12px; text-decoration: none; color: var(--text); }
.dcl-arch:hover { border-color: var(--marca); color: var(--marca); }
.dcl-arch.libro_compras, .dcl-arch.libro_ventas { border-style: dashed; }
.tablero-rejilla.solo { grid-template-columns: minmax(0, 1fr); }
@container (max-width: 680px) { .dcl-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; } .dcl-fila > span:nth-child(3) { grid-column: 1; } .dcl-fila > span:nth-child(4) { grid-column: 2; } .dcl-fila > span:nth-child(4):empty { display: none; } .dcl-fila > span:nth-child(5) { grid-column: 2; justify-content: flex-end; } .dcl-cab { display: none; } }

/* Los botones de la pantalla abierta en el panel, en la cabecera junto al nombre. */
.panel-lateral-cabecera { flex-wrap: wrap; }
.panel-lateral-cabecera strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-propias { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.panel-propias:empty { display: none; }
.panel-propias form.inline { display: inline-flex; }
.panel-propias .boton, .panel-propias .primary, .panel-propias button, .panel-propias label.boton { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }

.filterbar .tablero-tasa { align-self: flex-end; padding-bottom: 9px; font-size: 12.5px; }

/* Conceptos de venta */
.cpt-nuevo, .cpt-lista { padding: 12px 16px; margin: 0 0 14px; }
.cpt-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px 96px 130px 64px; gap: 10px; align-items: end; }
.cpt-nuevo .cpt-fila { grid-template-columns: 110px minmax(0, 1fr) 190px 96px 130px auto; }
.cpt-lista .cpt-fila { align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }
.cpt-lista .cpt-cab { border-top: none; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.cpt-fila input, .cpt-fila select { width: 100%; }
.cpt-codigo { font-family: var(--mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .04em; }
.cpt-precio { text-align: right; }
.cpt-activo { text-align: center; }
.cpt-fila.inactivo input[type=text] { opacity: .55; }
.cpt-guardar { display: flex; justify-content: flex-end; padding-top: 10px; }
@media (max-width: 760px) { .cpt-fila, .cpt-nuevo .cpt-fila { grid-template-columns: 1fr 1fr; } .cpt-fila .crece { grid-column: 1 / -1; } .cpt-cab { display: none !important; } }

/* Lo que el lector pide revisar: pocas líneas, a la vista. */
.fl-revisar { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.fl-revisar li { display: flex; gap: 7px; align-items: baseline; color: var(--text); }
.fl-revisar li::before { content: "!"; flex: none; width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--alerta, #d29922); border: 1px solid currentColor; transform: translateY(2px); }
/* Las seis cifras del Inicio: en una fila si caben; si no, de tres en tres (nunca cinco y una sola). */
.cards-tablero:has(> .card:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1360px) { .cards-tablero:has(> .card:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards-tablero:has(> .card:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Título y botones en la misma fila: los botones no bajan a una fila aparte debajo del título. */
@media (min-width: 900px) {
  .titulo-acciones { flex-wrap: nowrap; }
  .titulo-acciones > div:first-child { min-width: 0; flex: 1 1 auto; }
  .titulo-acciones > .acciones { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .titulo-acciones > .acciones :is(.boton, .primary, button, a, label) { white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1320px) {
  .titulo-acciones h1 { font-size: 23px; }
  .titulo-acciones > .acciones { gap: 6px; }
  .titulo-acciones > .acciones :is(.boton, .primary, a.boton, button.boton, label.boton) { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 900px) and (max-width: 1320px) {
  .titulo-acciones h1 { font-size: 22px; }
  .titulo-acciones .paginador > * { padding-left: 7px; padding-right: 7px; }
}
/* Con espacio suficiente, el título cede (el estado baja bajo el nombre) antes que los botones. */
@media (min-width: 1100px) {
  .titulo-acciones > div:first-child { flex: 1 1 0; min-width: 220px; }
  .titulo-acciones > .acciones { flex: 0 0 auto; max-width: calc(100% - 236px); }
}

/* Cabecera de la factura en una sola fila: quién, documento, números, fechas y moneda. */
.doc-hoja { container-type: inline-size; }
.doc-grid.doc-una-fila { grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(128px, 1.15fr) minmax(128px, 1.15fr) minmax(0, .75fr); }
.doc-grid.doc-una-fila > div { grid-column: auto; }
.doc-grid.doc-una-fila > .doc-nuevo { grid-column: 1 / -1; }
.doc-grid.doc-una-fila > #caja-afecta { grid-column: span 2; }
@container (max-width: 860px) {
  .doc-grid.doc-una-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .doc-grid.doc-una-fila > div:first-child { grid-column: span 2; }
}

/* Filtros del Inicio en la fila del título. */
.filtros-titulo { display: flex; gap: 8px; align-items: center; margin: 0; }
.filtros-titulo select { width: auto; min-width: 0; padding-top: 7px; padding-bottom: 7px; }

.doc-lineas input.codigo { text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; }
.doc-lineas input.codigo.sin-concepto { border-color: var(--alerta-borde, var(--alerta)); }

/* Lista de códigos de venta: código, descripción y precio, alineados. */
.codigos-lista { position: fixed; z-index: 200; width: 440px; max-width: 92vw; max-height: 300px; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--radio-chico, 8px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.codigos-lista > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 9px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.codigos-lista > div i { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.codigos-lista > div.activa i, .codigos-lista > div:hover i { color: rgba(255,255,255,.8); }
.codigos-lista > div b { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codigos-lista > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codigos-lista > div em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.codigos-lista > div.activa, .codigos-lista > div:hover { background: var(--marca); color: var(--sobre-marca); }
.codigos-lista > div.activa em, .codigos-lista > div:hover em { color: rgba(255,255,255,.8); }
.codigos-lista > p { margin: 6px 9px; font-size: 12.5px; color: var(--muted); }
.doc-nota { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Calendario de obligaciones del Inicio: el mes en cuadrícula; en pantallas angostas, una lista. */
.cal-panel { margin: 0 0 14px; container-type: inline-size; }
.cal-cabeza { align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-cabeza h3 { margin: 0; }
.cal-leyenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.cal-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dia-nombre { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 6px 4px; }
.cal-celda { min-height: 74px; padding: 5px 6px; border-radius: 8px; background: var(--surface-2, rgba(255,255,255,.03)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-celda.vacia { background: transparent; border-color: transparent; }
.cal-celda.finde:not(.vacia) { opacity: .7; }
.cal-celda.hoy { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.cal-num { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.cal-celda.hoy .cal-num { color: var(--marca); font-weight: 700; }
.cal-ob { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid currentColor; background: var(--surface); }
.cal-ob.declarada, .cal-punto.declarada { color: var(--ok, #3fb950); }
.cal-ob.pendiente, .cal-punto.pendiente { color: var(--text); }
.cal-punto.pendiente { background: var(--muted); }
.cal-ob.pronto { color: var(--alerta); }
.cal-ob.vencida, .cal-punto.vencida { color: var(--error, #f85149); }
.cal-punto.declarada { background: var(--ok, #3fb950); }
.cal-punto.vencida { background: var(--error, #f85149); }
.cal-ob.declarada { text-decoration: none; opacity: .85; }
.cal-lista { display: none; list-style: none; margin: 0; padding: 0; }
.cal-lista li { display: grid; grid-template-columns: 92px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cal-lista li:first-child { border-top: none; }
@container (max-width: 620px) { .cal-rejilla { display: none; } .cal-lista { display: block; } }

/* Inicio: tasa, estados financieros, documentos y lo pagado en el año. */
.tasa-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-fuerte); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tasa-chip b { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.tasa-chip small { color: var(--muted); }
.tablero-rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tablero-rejilla.dos.solo { grid-template-columns: minmax(0, 1fr); }
.eeff { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; border-left: 3px solid var(--muted); background: var(--surface-2, rgba(255,255,255,.03)); }
.eeff.lista { border-left-color: var(--ok); }
.eeff.falta { border-left-color: var(--alerta); }
.eeff-mes { font-size: 12px; margin-bottom: 2px; }
.pagado-anio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.pagado-anio strong { font-size: 18px; font-variant-numeric: tabular-nums; }
/* Documentos */
.doce-nuevo, .doce-lista { padding: 12px 16px; margin: 0 0 14px; }
.doce-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, .9fr) 136px 136px minmax(0, 1.4fr) auto; gap: 10px; align-items: end; }
.doce-fila input, .doce-fila select { width: 100%; }
.doce-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.doce-item:first-child { border-top: none; }
.doce-icono { color: var(--muted); display: inline-flex; }
.doce-item.vencido .doce-icono { color: var(--error); }
.doce-item.por_vencer .doce-icono { color: var(--alerta); }
.doce-que { display: flex; flex-direction: column; min-width: 0; }
.doce-que .muted { font-size: 12.5px; }
.doce-acciones { display: flex; gap: 6px; }
@media (max-width: 1100px) { .doce-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .doce-fila { grid-template-columns: 1fr 1fr; } .doce-item { grid-template-columns: 22px minmax(0, 1fr) auto; } .doce-estado { grid-column: 2; } }
/* Calendario del año, para imprimir */
.cala-hoja { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.cala-membrete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid var(--marca); }
.cala-membrete > div:first-child { display: flex; flex-direction: column; }
.cala-membrete > div:first-child span { font-size: 12.5px; color: var(--muted); }
.cala-membrete > div:last-child { text-align: right; font-size: 12.5px; }
.cala-titulo { font-family: var(--fuente-titulo); font-size: 20px; font-weight: 700; text-align: center; }
.cala-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 18px; }
.cala-mes { break-inside: avoid; }
.cala-mes h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--marca); }
.cala-mes table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cala-mes td { padding: 3px 4px; border-top: 1px solid var(--line); vertical-align: baseline; }
.cala-mes td.cifra { width: 26px; font-weight: 700; }
.cala-mes .cala-estado { text-align: right; white-space: nowrap; font-size: 11.5px; }
.cala-mes tr.declarada .cala-estado { color: var(--ok); }
.cala-mes tr.vencida .cala-estado { color: var(--error); }
@media print {
  main:has(.cala-hoja) .titulo-acciones { display: none !important; }
  .cala-hoja { border: none; padding: 0; background: #fff; color: #000; }
  .cala-meses { grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
  .cala-mes h3 { color: #006f91; }
  .cala-mes td { border-top-color: #ddd; color: #000; }
  .cala-mes .muted, .cala-membrete .muted { color: #555 !important; }
  .cala-mes tr.declarada .cala-estado { color: #1a7f37; }
  .cala-mes tr.vencida .cala-estado { color: #c62828; }
}
.proximo.doc-prox { grid-template-columns: minmax(0, 1fr) auto; }
.proximo.doc-prox > :last-child { justify-self: end; }
.cal-cabeza .cal-pdf { margin-left: auto; }
.cal-cabeza .cal-leyenda { width: 100%; }
@container (min-width: 760px) { .cal-cabeza .cal-leyenda { width: auto; } }
/* Mi empresa: pestañas; el mes como calendario de pared (colores por tipo, feriados en rojo) y el año en PDF. */
.me-pestanas { margin: 0 0 14px; }
.me-pestanas a { display: inline-flex; align-items: center; gap: 6px; }
.me-cal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.me-mes { padding: 14px 16px; margin: 0; container-type: inline-size; }
.me-mes-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.me-nav { display: flex; align-items: center; gap: 8px; }
.me-nav h2 { margin: 0 4px; font-size: 18px; min-width: 150px; text-align: center; }
.me-nav .desactivado { opacity: .35; pointer-events: none; }
.me-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.me-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.me-leyenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.me-leyenda .feriado { color: var(--error); }
.me-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line-fuerte); border-radius: 8px; overflow: hidden; }
.me-sem { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 5px 7px; background: var(--surface-2, rgba(255,255,255,.03)); border-bottom: 1px solid var(--line-fuerte); }
.me-dia { min-height: 92px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.me-rejilla > .me-dia:nth-child(7n) { border-right: 0; }
.me-dia.finde { background: var(--surface-2, rgba(255,255,255,.025)); }
.me-dia.fuera > * { opacity: .3; }
.me-dia.hoy { box-shadow: inset 0 0 0 2px var(--marca); }
.me-num { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.me-num small { font-size: 9.5px; font-weight: 600; color: var(--error); text-align: right; line-height: 1.15; }
.me-dia.feriado .me-num > span { color: var(--error); }
.me-dia.hoy .me-num > span { color: var(--marca); }
.me-chip { font-size: 11px; line-height: 1.25; padding: 2px 5px 2px 6px; border-left: 3px solid var(--c); border-radius: 3px; background: color-mix(in srgb, var(--c) 16%, transparent); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.me-lista { display: none; list-style: none; margin: 0; padding: 0; }
.me-lista li { display: grid; grid-template-columns: 62px 9px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.me-lista li i, .me-prox i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; align-self: center; }
@container (max-width: 640px) { .me-rejilla { display: none; } .me-lista { display: block; } }
.me-lado { display: flex; flex-direction: column; gap: 14px; }
.me-bloque { padding: 14px 16px; margin: 0; }
.me-bloque h3 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.me-bloque p { margin: 0 0 10px; font-size: 12.5px; }
.me-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.me-telefono { width: 100%; justify-content: center; }
.me-nota { margin-top: 8px !important; font-size: 12px !important; }
.me-prox { display: grid; grid-template-columns: 54px 9px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.me-prox:first-of-type { border-top: none; }
.me-prox small { display: block; font-size: 11.5px; }
@media (max-width: 1100px) { .me-cal { grid-template-columns: minmax(0, 1fr); } }

/* Mi empresa → Documentos: todos los tipos a la vista, cada uno con su estado y su botón para subir. */
.dx-resumen { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.dx-avance { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.dx-avance strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.dx-barra { display: inline-block; width: 160px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-left: 6px; }
.dx-barra i { display: block; height: 100%; background: var(--marca); border-radius: inherit; }
.dx-grupo { margin: 0 0 18px; }
.dx-titulo { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dx-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dx-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ok); }
.dx-tarjeta.falta, .dx-tarjeta.opcional { border-left-color: var(--line-fuerte); border-style: dashed; border-left-style: solid; background: transparent; }
.dx-tarjeta.por_vencer { border-left-color: var(--alerta); }
.dx-tarjeta.vencido { border-left-color: var(--error); }
.dx-tarjeta.sin_vencimiento, .dx-tarjeta.vigente { border-left-color: var(--ok); }
.dx-cabeza { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dx-cabeza strong { font-size: 13.5px; line-height: 1.25; }
.dx-icono { color: var(--muted); display: inline-flex; }
.dx-tarjeta.falta .dx-icono, .dx-tarjeta.falta strong { color: var(--muted); }
.dx-falta { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dx-datos { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.dx-archivo { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.dx-archivo a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.dx-archivo a:hover { color: var(--marca); }
.dx-quitar { background: none; border: none; padding: 2px; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.dx-tarjeta:hover .dx-quitar, .dx-quitar:focus-visible { opacity: 1; }
.dx-vacio { margin: 0; font-size: 12px; color: var(--muted); }
.dx-subir { margin-top: auto; }
.dx-subir > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; width: fit-content; }
.dx-subir > summary::-webkit-details-marker { display: none; }
.dx-subir[open] > summary { margin-bottom: 8px; }
.dx-subir form { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dx-subir label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.dx-subir input { width: 100%; }
.dx-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dx-subir button { align-self: flex-end; }

/* ------------------------------------------------------------ Inventario */
.inv-ficha { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.inv-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.inv-check input { margin-top: 3px; flex: none; }
.inv-check-grande { padding: 4px 0 2px; }
.inv-resumen { display: flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; }
.inv-almacenes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.inv-almacenes em { font-style: normal; color: var(--muted); margin-right: 4px; }
.inv-vacio { max-width: 640px; }
.inv-vacio p { margin: 8px 0 14px; }
.inv-dos { grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr); align-items: start; }
@media (max-width: 900px) { .inv-dos { grid-template-columns: 1fr; } }
.inv-toma input.monto { width: 120px; text-align: right; }
.inv-toma tr.inv-sobra .l-dif { color: var(--ok); font-weight: 600; }
.inv-toma tr.inv-falta .l-dif { color: var(--error); font-weight: 600; }
.inv-almacenes-tabla td form.inline input[type=text] { width: 100%; max-width: 360px; }
table.doc-lineas td.l-desc { font-size: 13px; }

/* ------------------------------------------------------------ Cuentas automáticas de un módulo */
.cta-cabeza { align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cta-resumen { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cta-filtro { margin: 0 0 8px; }
.cta-tabla th.cta-cambiar, .cta-tabla td.cta-cambiar { width: 300px; }
.cta-tabla td.cta-cambiar select { width: 100%; max-width: 300px; }
.cta-tabla tr.cta-grupo td { padding: 12px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: none; background: transparent; }
.cta-tabla tr.cta-grupo:hover td { background: transparent; }
.cta-codigo { font-family: var(--fuente-cifra); font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.cta-origen { font-size: 12px; margin-left: 6px; }
.cta-tabla tr.cta-propia td:nth-child(2) { font-weight: 600; }
.cta-tabla tr.cta-falta td:nth-child(2) { color: var(--error); }
.cta-tabla tr.cta-cambiada td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
.cta-acciones { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
@media (max-width: 760px) { .cta-tabla th.cta-cambiar, .cta-tabla td.cta-cambiar { width: auto; } }
.cta-filtro input[type=search] { width: 100%; max-width: 440px; }

/* Logo, firma y sello de la empresa (configuración) y su lugar en los comprobantes de retención */
.img-empresa-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.img-empresa { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radio); }
.img-empresa-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.img-empresa-vista { height: 96px; display: grid; place-items: center; border-radius: 8px; color: var(--suave);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.img-empresa-vista img { max-height: 84px; max-width: 90%; object-fit: contain; }
.img-empresa p { margin: 0; font-size: 12.5px; }
.img-empresa input[type=file] { font-size: 12.5px; max-width: 100%; }
.img-empresa .acciones { display: flex; align-items: center; gap: 8px; }
.comprobante-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 34px; text-align: center; }
.comprobante-firmas .firma-espacio { position: relative; height: 86px; display: flex; align-items: flex-end; justify-content: center; }
.comprobante-firmas .firma-img { max-height: 72px; max-width: 220px; object-fit: contain; position: relative; z-index: 1; margin-bottom: -6px; }
.comprobante-firmas .sello-img { max-height: 86px; max-width: 120px; object-fit: contain; opacity: .9; margin-left: -28px; }
.comprobante-firmas .firma-linea { border-top: 1px solid currentColor; padding-top: 5px; font-size: 11.5px; }
.temporada-igp .igp-fecha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ Mi perfil */
.perfil-tarjeta { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.perfil-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  color: var(--sobre-marca); background: var(--marca); }
.perfil-quien { min-width: 0; }
.perfil-quien h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.perfil-sub { color: var(--muted); margin: 2px 0 10px; }
.perfil-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted); }
.perfil-chip { display: inline-flex; align-items: center; gap: 5px; }
.perfil-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; max-width: 980px; }
.perfil-titulo { margin: 0; display: flex; align-items: center; gap: 7px; }
.perfil-rejilla label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.perfil-datos { display: grid; grid-template-columns: 90px 1fr; gap: 8px 14px; margin: 0; }
.perfil-datos dt { color: var(--muted); font-size: 13px; }
.perfil-datos dd { margin: 0; }
.perfil-nota { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; }
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 40px; }
.campo-clave .ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; color: var(--suave); cursor: pointer; }
.campo-clave .ojo.activo, .campo-clave .ojo:hover { color: var(--text); background: none; }
.perfil-fuerza { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); min-height: 16px; }
.perfil-fuerza i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); position: relative; overflow: hidden; }
.perfil-fuerza i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; transition: width .2s, background .2s; }
.perfil-fuerza[data-nivel="corta"] i::after { width: 15%; background: var(--error); }
.perfil-fuerza[data-nivel="debil"] i::after { width: 40%; background: var(--error); }
.perfil-fuerza[data-nivel="media"] i::after { width: 70%; background: var(--alerta); }
.perfil-fuerza[data-nivel="fuerte"] i::after { width: 100%; background: var(--ok); }
.perfil-fuerza:not([data-nivel]) i, .perfil-fuerza[data-nivel=""] i { visibility: hidden; }
@media (max-width: 600px) { .perfil-tarjeta { flex-direction: column; text-align: center; } .perfil-chips { justify-content: center; } }
.perfil-rejilla .acciones { display: flex; align-items: center; }

/* Foto de perfil: donde haya iniciales, la foto si la persona la cargó */
.avatar.con-foto, .perfil-avatar.con-foto, .avatar-mini.con-foto { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar.con-foto img, .perfil-avatar.con-foto img, .avatar-mini.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-foto { position: relative; flex: none; }
.perfil-foto-cambiar { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-fuerte); color: var(--text); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.perfil-foto-cambiar:hover { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.perfil-foto-quitar { position: absolute; left: -2px; bottom: -2px; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-fuerte); color: var(--muted); opacity: 0; transition: opacity .15s; cursor: pointer; }
.perfil-foto:hover .perfil-foto-quitar, .perfil-foto-quitar:focus-visible { opacity: 1; }
.perfil-foto-quitar:hover { color: var(--error); }
.con-avatar { display: inline-flex; align-items: center; gap: 8px; }
.avatar-mini { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600;
  background: var(--marca-tenue); color: var(--marca-tenue-texto); }

/* Nómina → Recibo: el logo, la firma y el sello de la empresa (se cargan en Administrativo → Configuración) */
.nom-imagenes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nom-imagen { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.nom-imagen-vista { width: 64px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.nom-imagen-vista img { max-width: 60px; max-height: 32px; object-fit: contain; }
.nom-imagenes-carga { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.nom-imagen-carga { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radio); }
.nom-imagen-carga input[type=file] { font-size: 12.5px; max-width: 100%; }

/* ---------------------------------------- Recibos de cobro de la firma (dentro de Honorarios) */
.recibo-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.recibo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.recibo-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.recibo-rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recibo-ancho { grid-column: 1 / -1; }
.recibo-form textarea { width: 100%; min-height: 60px; resize: vertical; }
.recibo-form input.cifra { font-size: 14px; }
.recibo-etiqueta { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.recibo-radios { display: flex; gap: 18px; flex-wrap: wrap; }
.recibo-ayuda { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.recibo-resumen { position: sticky; top: 16px; }
.recibo-renglon { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.recibo-renglon span:last-child { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; }
.recibo-renglon.menos span:last-child { color: var(--error); }
.recibo-renglon.sub { border-top: 1px solid var(--line); font-weight: 600; margin-top: 4px; padding-top: 8px; }
.recibo-renglon[hidden] { display: none; }
.recibo-total { margin-top: 14px; background: var(--nb-noche, #081422); color: #fff; border: 1px solid var(--line-fuerte); border-radius: 10px; padding: 14px 16px; }
.recibo-total small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7ce0fb; font-weight: 700; }
.recibo-total strong { display: block; font-family: var(--fuente-cifra); font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.recibo-total em { display: block; font-style: normal; font-size: 12.5px; color: #dcf0f6; margin-top: 2px; }
.recibo-emitir { width: 100%; margin-top: 16px; padding: 12px 18px; font-size: 14.5px; }
.recibo-acciones { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.recibo-acciones form.recibo-acciones { gap: 12px; }
.recibo-marco { height: calc(100vh - var(--alto-barra) - 120px); }
tr.recibo-anulado td { opacity: .55; }
.recibo-sin-impuestos { margin: 0 0 14px; font-size: 14px; }
.recibo-apagado { opacity: .4; pointer-events: none; }
@media (max-width: 900px) { .recibo-form { grid-template-columns: 1fr; } .recibo-resumen { position: static; } }

/* ---------------------------------------- Novedades (franja arriba de la pantalla y su lista) */
.novedad { display: flex; align-items: flex-start; gap: 12px; margin: 20px 32px 0; max-width: 1416px; padding: 12px 16px; border-radius: 10px; font-size: 14px;
  background: var(--marca-tenue); border: 1px solid var(--line-fuerte); border-left: 3px solid var(--senal); }
.novedad-icono { display: flex; padding-top: 1px; color: var(--senal); }
.novedad-texto { flex: 1; min-width: 0; }
.novedad-texto strong { display: block; }
.novedad-texto ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.novedad-acciones { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.novedades-lista { display: grid; gap: 14px; max-width: 760px; }
.novedad-nota header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.novedad-nota header h2 { margin-bottom: 0; }
.novedad-nota header .muted { margin-left: auto; }
.novedad-nota ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.5; }
@media (max-width: 760px) { .novedad { margin: 12px 16px 0; flex-wrap: wrap; } }
@media print { .novedad { display: none; } }