/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULO CONTABLE · JUSAVA.NET
   Inspirado en la IDEA de Siigo —portada de acciones, no de menús— pero con
   identidad propia. Ni sus colores de marca ni su tipografía comercial.
   Animaciones con criterio: 150-250 ms, nunca estorban, y prefers-reduced-motion
   se respeta quitando la TRANSICIÓN, jamás el elemento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA CINTA ───────────────────────────────────────────────────────────────
   Antes del software, el instrumento del oficio era la sumadora de cinta:
   escribías, y el papel salía impreso renglón a renglón con el total marcado.
   De ahí sale todo lo de aquí — el monoespaciado como tipografía principal, el
   violeta tinta, el naranja de tóner— y de ahí sale la cinta de la portada.

   El monoespaciado no es un guiño retro: es lo que hace que una columna de
   cifras se lea. Manda en los números, en los rótulos y en los titulares; la
   sans queda para los textos corridos, que en mono cansan.

   Todos los pares de color de aquí están medidos: el texto pequeño llega a
   4,5:1 sobre su fondo, en los dos temas. Un par que se quedó corto —el
   naranja sobre el panel oscuro, a 4,46— se aclaró hasta #EA6238. */

:root {
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* claro · la misma identidad, con la cinta como fondo */
  --tinta:      #17132B;      /* el violeta de la barra lateral, en los dos temas */
  --tinta-2:    #201B3A;
  --tinta-3:    #2C2550;
  --acento:     #C4441F;      /* naranja de tóner: lo que pide acción */
  --acento-alt: #A63817;
  --acento-txt: #ffffff;      /* lo que va ENCIMA del naranja */
  --menta:      #0B7A57;      /* una sola cosa: que el libro cuadra */
  --ambar:      #A96B04;
  --rojo:       #C6303A;
  --azul:       #3C4FBF;

  --fondo:      #F4F2F8;
  --panel:      #FFFFFF;
  --linea:      #E2DEEE;
  --linea-2:    #EEEBF5;
  --texto:      #221E38;
  --suave:      #55506E;
  --tenue:      #6E6890;

  --r:   10px;
  --r-s: 7px;
  --r-g: 14px;
  --sombra:   0 1px 2px rgba(34,30,56,.05), 0 4px 14px rgba(34,30,56,.07);
  --sombra-g: 0 8px 24px rgba(34,30,56,.12), 0 24px 60px rgba(34,30,56,.14);
  --lateral: 244px;
  --cabecera: 56px;
}

/* oscuro · el natural de esta dirección */
:root[data-tema="oscuro"] {
  --fondo: #17132B; --panel: #201B3A; --linea: #2C2550; --linea-2: #251F44;
  --texto: #EFECF8; --suave: #A9A2C4; --tenue: #8D87A8;
  --tinta: #141024; --tinta-2: #1B1633;
  --acento: #EA6238; --acento-alt: #E4572E; --acento-txt: #17132B;
  --menta: #34C79A; --ambar: #E8A33D; --rojo: #FF6B6B; --azul: #8E9BFF;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.4);
  --sombra-g: 0 8px 24px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* el atributo pierde contra display:grid */

html, body { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 14px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                     /* el cuerpo NUNCA rueda en horizontal */
}
/* Los titulares van en mono con el tracking cerrado. Es lo que le da voz a
   esta dirección; en sans serían los de cualquier panel de control. */
h1,h2,h3,h4 {
  margin: 0; font-family: var(--mono); font-weight: 700;
  letter-spacing: -.03em; color: var(--texto);
}
a { color: var(--acento); }
button { font: inherit; }

/* ─────────────────────────── ARMAZÓN ─────────────────────────── */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }

.lateral {
  background: var(--tinta-2); color: #CFC9E4; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.marca {
  display: flex; align-items: center; gap: 11px; padding: 0 18px;
  height: var(--cabecera); flex: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.07);
}
.marca-icono {
  width: 32px; height: 32px; border-radius: var(--r-s); display: grid; place-items: center;
  background: var(--acento-alt); color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: -.02em;
}
.marca b { color: #fff; font-family: var(--mono); font-size: 14px; letter-spacing: -.02em; display: block; line-height: 1.15; }
.marca small { color: #9E96BE; font-size: 11px; }

.nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px 18px; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.nav-grupo {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: #8D87A8; padding: 16px 12px 7px;
}
.nav button {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 1px; border: 0; border-radius: var(--r-s);
  background: transparent; color: #CFC9E4; font-size: 13.2px; text-align: left;
  cursor: pointer; position: relative;
  transition: background .16s ease, color .16s ease;
}
.nav button i { font-style: normal; font-size: 15px; width: 20px; text-align: center; opacity: .85; }
.nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav button.activo { background: #2C2550; color: #fff; font-weight: 600; }
.nav button.activo::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  background: var(--acento); border-radius: 0 3px 3px 0;
}
.nav-num {
  margin-left: auto; background: var(--rojo); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; min-width: 19px; height: 19px;
  display: grid; place-items: center; padding: 0 6px;
}
.lateral-pie { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size: 10.5px; color: #8D87A8; }

/* ─────────────────────────── CABECERA ─────────────────────────── */
.principal { display: flex; flex-direction: column; min-width: 0; }
.cabecera {
  height: var(--cabecera); flex: 0 0 auto; background: var(--panel);
  border-bottom: 1px solid var(--linea); display: flex; align-items: center;
  gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.buscador { position: relative; flex: 1 1 auto; max-width: 460px; }
.buscador input {
  width: 100%; height: 36px; border: 1px solid var(--linea); border-radius: 999px;
  padding: 0 14px 0 38px; background: var(--fondo); color: var(--texto); font-size: 13px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.buscador input:focus {
  outline: 0; border-color: var(--acento); background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
.buscador::before {
  content: "⌕"; position: absolute; left: 14px; top: 50%; transform: translateY(-52%);
  color: var(--tenue); font-size: 17px; pointer-events: none;
}
.cab-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icono-btn {
  width: 36px; height: 36px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--suave); display: grid; place-items: center;
  cursor: pointer; font-size: 16px; transition: background .16s, color .16s, border-color .16s;
}
.icono-btn:hover { background: var(--fondo); color: var(--texto); border-color: var(--linea); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tinta-3), var(--tinta-2)); color: #fff;
  font-weight: 700; font-size: 12px;
}

/* ─────────────────────────── CONTENIDO ─────────────────────────── */
/* El mínimo en cero es obligatorio en toda la cadena, no solo aquí: un hijo de
   rejilla o de flex nace con min-width:auto y NO encoge por debajo de su
   contenido mínimo. Basta una línea de la cinta con nowrap para que en el
   móvil todo se desplace 13 px a la derecha. Y como el cuerpo lleva
   overflow-x:hidden, el desborde no se ve: simplemente se corta el borde
   derecho de las tarjetas y nadie se entera. */
.vista { padding: 22px 24px 40px; min-width: 0; flex: 1 1 auto; }
.cinta-zona, .cifras, .acciones { min-width: 0; }
.cinta-zona > *, .cinta-rollo { min-width: 0; }
.titulo { margin-bottom: 20px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.titulo h1 { font-size: 22px; }
.titulo p { margin: 3px 0 0; color: var(--suave); font-size: 13px; }
.titulo-acciones { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* ───────────────────────── AVISOS ───────────────────────── */
.aviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px;
  border-radius: var(--r); margin-bottom: 12px; font-size: 13.2px; line-height: 1.5;
  border: 1px solid; animation: entrar .3s ease both;
}
.aviso b { display: block; margin-bottom: 1px; }
.aviso-alto  { background: color-mix(in srgb, var(--rojo) 8%, var(--panel)); border-color: color-mix(in srgb, var(--rojo) 28%, transparent); }
.aviso-medio { background: color-mix(in srgb, var(--ambar) 12%, var(--panel)); border-color: color-mix(in srgb, var(--ambar) 34%, transparent); }
.aviso-ok    { background: color-mix(in srgb, var(--menta) 10%, var(--panel)); border-color: color-mix(in srgb, var(--menta) 30%, transparent); }
.aviso-icono { font-size: 17px; line-height: 1.3; }

/* ─────────────────────── ACCIONES DE PORTADA ───────────────────────
   La idea que Siigo tiene bien resuelta: lo primero que ves no es un menú,
   son las cosas que vas a hacer. */
.acciones {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.accion {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r);
  /* EL COLOR, EXPLÍCITO. Un <button> no hereda `color`: usa el del sistema,
     que es negro. Con el tema claro de antes eso pasaba por bueno de pura
     casualidad —negro sobre blanco—; al pasar el oscuro a tema de arranque,
     los ocho títulos de la portada quedaron en negro sobre violeta, o sea
     ilegibles. Nunca dar por hecho que un botón hereda del cuerpo. */
  color: var(--texto);
  padding: 17px 16px; text-align: left; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 9px; overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
  animation: subir .32s cubic-bezier(.2,.8,.3,1) both;
  border-bottom-width: 3px;      /* la tecla de la máquina */
}
.accion:hover { transform: translateY(-2px); box-shadow: var(--sombra-g); border-color: var(--acento); }
.accion:active { border-bottom-width: 1px; }
.accion:active { transform: translateY(-1px); }
.accion:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.accion-icono {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 18px; background: color-mix(in srgb, var(--acento) 12%, transparent);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.accion:hover .accion-icono { transform: scale(1.08) rotate(-4deg); }
/* El título de la tarjeta va en blanco y en negrilla. Es lo primero que se
   lee en la portada y tiene que destacar sobre el resto de la tarjeta, no
   competir con ella. */
.accion b {
  font-family: var(--mono); font-size: 13.4px; letter-spacing: -.02em;
  font-weight: 700; color: var(--texto);
}
:root[data-tema="oscuro"] .accion b { color: #ffffff; }
.accion small { color: var(--suave); font-size: 11.8px; line-height: 1.45; }

/* ───────────────────────── LA CINTA ─────────────────────────
   El resumen del año impreso como saldría de una sumadora: un renglón por
   concepto, el signo delante, el subtotal y el total marcados. Lleva sus
   perforaciones a los lados y termina en dentado, como si se hubiera cortado.

   Se dibuja SIEMPRE sobre papel claro, también en el tema oscuro: una cinta
   negra no es una cinta. Por eso estos colores son fijos y no salen de las
   variables del tema. */
.cinta-zona { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
.cinta-rollo { position: relative; margin-bottom: 11px; }

.cinta {
  --papel: #FBFAF7;
  --papel-linea: #C9C4B8;
  --papel-tinta: #221E38;
  --papel-suave: #7C7768;
  position: relative; background: var(--papel); color: var(--papel-tinta);
  padding: 20px 24px 24px; border-radius: 3px 3px 0 0;
  box-shadow: 0 14px 34px rgba(20,16,36,.28);
  background-image:
    radial-gradient(circle 2.5px, var(--fondo) 96%, transparent 100%),
    radial-gradient(circle 2.5px, var(--fondo) 96%, transparent 100%);
  background-position: 7px 0, calc(100% - 7px) 0;
  background-size: 14px 21px;
  background-repeat: repeat-y;
}
/* el corte dentado del final */
.cinta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;
  background: conic-gradient(from 135deg at 50% 0, var(--papel) 0 90deg, transparent 0) 0 0/18px 100% repeat-x;
}
.cinta-interior { padding: 0 13px; }

.cinta-cab {
  text-align: center; border-bottom: 1px dashed var(--papel-linea);
  padding-bottom: 12px; margin-bottom: 13px;
}
.cinta-cab b {
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; color: var(--papel-tinta); display: block;
}
.cinta-cab span { font-family: var(--mono); font-size: 10.5px; color: var(--papel-suave); }

.cinta-linea {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--papel-tinta); padding: 3.5px 0;
}
.cinta-linea .signo { width: 11px; flex: none; color: var(--papel-suave); }
.cinta-linea .que { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cinta-linea .val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cinta-linea.sub { border-top: 1px solid var(--papel-linea); margin-top: 7px; padding-top: 8px; }
.cinta-linea.tot {
  border-top: 2px solid var(--papel-tinta); margin-top: 8px; padding-top: 9px;
  font-size: 16px; font-weight: 700;
}
.cinta-linea.tot .signo { color: var(--papel-tinta); }

.cinta-veredicto {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--papel-linea);
  text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: #0B7A57;
}
.cinta-veredicto.mal { color: #C6303A; }
.cinta-veredicto .punto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 7px; vertical-align: middle;
}

@media (min-width: 900px) {
  /* A lo ancho la cinta va al lado de las cifras, no encima: el ojo compara.
     El tope de anchura es a propósito: sin él, en un monitor grande las cuatro
     tarjetas se estiran hasta los 600 px cada una y el bloque deja de leerse
     como un grupo. */
  .cinta-zona {
    grid-template-columns: 370px minmax(0, 1fr); gap: 22px; align-items: start;
    max-width: 1150px;
  }
  .cinta-zona .cifras { margin-bottom: 0; grid-template-columns: repeat(2, 1fr); }
}

/* ───────────────────────── TARJETAS DE CIFRA ───────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cifra {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 15px 17px; animation: subir .32s cubic-bezier(.2,.8,.3,1) both;
}
.cifra-rotulo {
  font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .14em;
}
.cifra-valor {
  font-family: var(--mono); font-size: 25px; font-weight: 700; letter-spacing: -.035em;
  margin: 5px 0 2px; font-variant-numeric: tabular-nums;
}
.cifra-pie { font-size: 11.8px; color: var(--tenue); }
/* «verde» es el nombre que usa el marcado desde el principio; el color que
   hay detrás es la menta, y sigue significando lo mismo: que algo cuadra. */
.verde { color: var(--menta); } .rojo { color: var(--rojo); } .ambar { color: var(--ambar); }

/* ───────────────────────── PANELES Y TABLAS ───────────────────────── */
.panel {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r);
  margin-bottom: 16px; overflow: hidden; animation: subir .34s cubic-bezier(.2,.8,.3,1) both;
}
.panel-cab {
  display: flex; align-items: center; gap: 12px; padding: 14px 17px;
  border-bottom: 1px solid var(--linea-2);
}
.panel-cab h3 { font-size: 14.5px; }
.panel-cab .sub { margin-left: auto; font-size: 12px; color: var(--suave); }
.panel-cuerpo { padding: 16px 17px; }
.panel-cuerpo > p:first-child { margin-top: 0; }

.tabla-caja { overflow-x: auto; }        /* lo ancho desborda AQUÍ, no en la página */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; color: var(--tenue);
  padding: 10px 14px; background: var(--linea-2); white-space: nowrap;
  position: sticky; top: 0;
}
tbody td { padding: 11px 14px; border-top: 1px solid var(--linea-2); vertical-align: top; }
tbody tr { transition: background .13s; }
tbody tr:hover { background: color-mix(in srgb, var(--acento) 4%, transparent); }
.num {
  text-align: right; font-family: var(--mono); font-size: 12.6px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.4px; }
td .sub, .sub { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 2px; }

/* Las filas entran escalonadas: se lee de arriba abajo, como se mira. */
tbody tr { animation: aparecer .3s ease both; }
tbody tr:nth-child(1){animation-delay:.02s} tbody tr:nth-child(2){animation-delay:.04s}
tbody tr:nth-child(3){animation-delay:.06s} tbody tr:nth-child(4){animation-delay:.08s}
tbody tr:nth-child(5){animation-delay:.10s} tbody tr:nth-child(6){animation-delay:.12s}
tbody tr:nth-child(7){animation-delay:.14s} tbody tr:nth-child(8){animation-delay:.16s}

/* ───────────────────────── ETIQUETAS ───────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-verde { background: color-mix(in srgb, var(--menta) 14%, transparent); color: var(--menta); }
.pill-ambar { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: var(--ambar); }
.pill-rojo  { background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); }
.pill-gris  { background: var(--linea-2); color: var(--suave); }
.pill-azul  { background: color-mix(in srgb, var(--azul) 12%, transparent); color: var(--azul); }


/* ───────────────────────── BOTONES ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 8px 16px; border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--panel); color: var(--texto);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.btn:hover { background: var(--fondo); border-color: var(--tenue); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn-principal {
  font-family: var(--mono); letter-spacing: -.02em; font-weight: 700;
  background: var(--acento); border-color: var(--acento); color: var(--acento-txt);
}
.btn-principal:hover { background: var(--acento-alt); border-color: var(--acento-alt); filter: none; }
.btn-peligro { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }
.btn-chico { min-height: 31px; padding: 5px 11px; font-size: 12px; }

/* ───────────────────────── VACÍO Y CARGA ───────────────────────── */
.vacio { padding: 44px 24px; text-align: center; color: var(--suave); }
.vacio-icono { font-size: 34px; opacity: .45; margin-bottom: 10px; }
.vacio b { display: block; color: var(--texto); margin-bottom: 5px; font-size: 15px; }

.esqueleto { padding: 20px; }
.esq-linea {
  height: 13px; border-radius: 6px; margin-bottom: 11px;
  background: linear-gradient(90deg, var(--linea-2) 25%, var(--linea) 50%, var(--linea-2) 75%);
  background-size: 200% 100%; animation: brillo 1.3s linear infinite;
}

/* ───────────────────────── ENTRAR ───────────────────────── */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #17304a 0%, var(--tinta) 55%); }
.entrada-caja {
  width: min(400px, 100%); background: var(--panel); border-radius: var(--r-g);
  padding: 34px 32px; box-shadow: var(--sombra-g); animation: subir .45s cubic-bezier(.2,.8,.3,1) both;
}
.entrada-caja h1 { font-size: 19px; margin-bottom: 4px; }
.entrada-caja p { color: var(--suave); font-size: 13px; margin: 0 0 22px; }
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 12px; font-weight: 700; color: var(--suave); }
.campo input, .campo select, .campo textarea {
  height: 40px; border: 1px solid var(--linea); border-radius: var(--r-s);
  padding: 0 12px; font: inherit; font-size: 13.5px; background: var(--panel); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { height: auto; padding: 10px 12px; min-height: 78px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(0,163,122,.15);
}
.campo .pista { font-size: 11.5px; color: var(--tenue); }

/* ───────────────────────── ANIMACIONES ───────────────────────── */
@keyframes subir   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aparecer{ from { opacity: 0; } to { opacity: 1; } }
@keyframes entrar  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes brillo  { to { background-position: -200% 0; } }
@keyframes latir   { 50% { transform: scale(1.04); } }
.late { animation: latir 1.4s ease-in-out infinite; }

/* Escalonado de las tarjetas: entran de a una, no todas de golpe. */
.acciones .accion:nth-child(1){animation-delay:.03s} .acciones .accion:nth-child(2){animation-delay:.06s}
.acciones .accion:nth-child(3){animation-delay:.09s} .acciones .accion:nth-child(4){animation-delay:.12s}
.acciones .accion:nth-child(5){animation-delay:.15s} .acciones .accion:nth-child(6){animation-delay:.18s}
.acciones .accion:nth-child(7){animation-delay:.21s} .acciones .accion:nth-child(8){animation-delay:.24s}
.cifras .cifra:nth-child(1){animation-delay:.04s} .cifras .cifra:nth-child(2){animation-delay:.08s}
.cifras .cifra:nth-child(3){animation-delay:.12s} .cifras .cifra:nth-child(4){animation-delay:.16s}

/* ───────────────────────── MODAL ───────────────────────── */
.telon {
  position: fixed; inset: 0; z-index: 50; background: rgba(9,16,28,.55);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px;
  animation: aparecer .18s ease both;
}
.modal {
  background: var(--panel); border-radius: var(--r-g); width: min(680px, 96vw);
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  animation: subir .26s cubic-bezier(.2,.8,.3,1) both;
  /* Un filo blanco que hace de sombra: recorta el modal contra el telón
     oscuro y le da relieve sin cargar la pantalla de gris. Va como `ring`
     —una sombra sin desenfoque— y no como `border`, para que no altere el
     tamaño de la caja ni la alineación de lo que lleva dentro. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5),
    0 0 0 4px rgba(255,255,255,.09),
    var(--sombra-g);
}
/* En el tema claro ese filo se perdería sobre el papel: allí el relieve lo
   da un borde de la propia paleta. */
:root:not([data-tema="oscuro"]) .modal {
  box-shadow: 0 0 0 1px var(--linea), 0 0 0 4px rgba(34,30,56,.06), var(--sombra-g);
}
.modal > header {
  display: flex; align-items: center; gap: 14px; padding: 17px 21px;
  border-bottom: 1px solid var(--linea); flex: 0 0 auto;
}
.modal > header h2 { font-size: 16px; }
.modal > header button {
  margin-left: auto; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--linea); background: transparent; color: var(--suave);
  cursor: pointer; font-size: 19px; transition: background .15s, color .15s;
}
.modal > header button:hover { background: var(--fondo); color: var(--texto); }
.modal-cuerpo { padding: 20px 21px; overflow-y: auto; flex: 1 1 auto; }
.modal-pie {
  display: flex; justify-content: flex-end; gap: 9px; padding: 14px 21px;
  border-top: 1px solid var(--linea); background: var(--fondo); flex: 0 0 auto;
}
.rejilla { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .rejilla { grid-template-columns: repeat(2, 1fr); } .rejilla .ancho { grid-column: 1/-1; } }

/* ───────────────────────── ADAPTACIÓN ───────────────────────── */
@media (max-width: 1119px) { :root { --lateral: 68px; } .marca b, .marca small, .nav button span, .nav-grupo, .lateral-pie { display: none; }
  .nav button { justify-content: center; padding: 11px 0; } .marca { justify-content: center; padding: 0; } }
@media (max-width: 719px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 244px; z-index: 60;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.8,.3,1); }
  :root { --lateral: 0px; }
  .lateral.abierto { transform: none; box-shadow: var(--sombra-g); }
  .lateral .marca b, .lateral .marca small, .lateral .nav button span, .lateral .nav-grupo, .lateral .lateral-pie { display: block; }
  .lateral .nav button { justify-content: flex-start; padding: 9px 12px; }
  .lateral .marca { justify-content: flex-start; padding: 0 18px; }
  .vista { padding: 16px 14px 32px; }
  .telon { padding: 0; place-items: stretch; }
  .modal { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal-pie .btn { flex: 1 1 0; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
}
.abre-lateral { display: none; }
@media (max-width: 719px) { .abre-lateral { display: grid; } }

/* REDUCIR MOVIMIENTO = quitar la transición, NUNCA el elemento.
   El dueño de esta casa tiene las animaciones de Windows desactivadas, así que
   esta consulta se le cumple SIEMPRE. Un display:none aquí le haría desaparecer
   media pantalla. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
    /* EL RETARDO TAMBIÉN. Acortar la duración y dejarse el `animation-delay`
       sale caro: con `animation-fill-mode: both` el elemento adopta el PRIMER
       fotograma mientras espera su turno, y el primer fotograma de `aparecer`
       es `opacity: 0`. Resultado: las ocho primeras filas de cada tabla salían
       EN BLANCO —el texto estaba en el HTML, pero no se pintaba—. Reducir el
       movimiento es quitar la animación, nunca esconder el contenido. */
    animation-delay: 0s !important; transition-delay: 0s !important;
  }
}

/* ───────────────── SELECCIÓN Y FACTURACIÓN EN BLOQUE ─────────────────
   La barra solo existe cuando hay algo marcado. Una barra siempre visible con
   un botón que no hace nada hasta que seleccionas es ruido. */
.barra-sel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--acento) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  border-radius: var(--r); padding: 11px 15px; margin-bottom: 14px;
}
.barra-sel > span { font-size: 13.5px; }
.barra-sel b { font-family: var(--mono); color: var(--acento); }
.barra-sel .btn-principal { margin-left: auto; }

.col-sel { width: 38px; text-align: center; }
.col-sel input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }

.sub-titulo {
  margin: 20px 0 10px; font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tenue);
}
.sub-inline { font-size: 11.5px; color: var(--tenue); }

/* Los renglones del formulario: en pantalla ancha van en fila; en móvil se
   apilan, porque seis campos en fila a 375 px no son campos, son rendijas. */
.renglon-form { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.renglon-form .campo { margin: 0; }
.renglon-form label { min-height: 0; }
@media (min-width: 700px) {
  .renglon-form { grid-template-columns: 1fr 70px 120px 62px 96px 36px; align-items: end; margin-bottom: 8px; }
  .renglon-form .btn-chico { height: 38px; }
}

.lista-sel { max-height: 190px; overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--r-s); }
.uno-sel {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 13px; border-bottom: 1px solid var(--linea-2); font-size: 13px;
}
.uno-sel:last-child { border-bottom: 0; }

.casilla {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 15px;
  font-size: 13px; color: var(--suave); cursor: pointer;
}
.casilla input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--acento); flex: none; }

/* ───────────────── CARGAR EL RUT ───────────────── */
.soltar {
  border: 2px dashed var(--linea); border-radius: var(--r-g); padding: 28px 20px;
  text-align: center; transition: border-color .16s ease, background .16s ease;
}
.soltar.encima { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); }
.soltar-icono { font-size: 30px; opacity: .6; margin-bottom: 8px; }
.soltar b { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: -.02em; }
.soltar p { margin: 4px 0 14px; }

.ficha-rut {
  border: 1px solid var(--linea); border-radius: var(--r); padding: 15px 16px; margin-top: 14px;
  background: var(--panel);
}
.ficha-rut-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--linea-2);
}
.ficha-rut-cab b { font-family: var(--mono); font-size: 14px; letter-spacing: -.02em; }
.ficha-rut-datos { display: grid; grid-template-columns: 1fr; gap: 7px 18px; font-size: 13px; }
@media (min-width: 620px) { .ficha-rut-datos { grid-template-columns: 1fr 1fr; } }
.rot-rut {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tenue);
}
.ficha-rut-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }