/* Variables, tipografía y reinicio.
 * Estilo: plano y sobrio. Sin sombras ni degradados; las superficies se separan
 * con una línea fina y con espacio. Un solo color de acento.
 */
:root {
  /* Papel y tinta */
  --papel: #ffffff;
  --fondo: #f7f8fa;          /* superficies secundarias: cabeceras de tabla, pies */
  --fondo-2: #eff1f4;        /* hover sobre superficies */
  --tinta: #111827;
  --tinta-2: #4b5563;
  --tinta-3: #6b7280;        /* contraste 4.8:1 sobre blanco */
  --linea: #e6e8ec;
  --linea-fuerte: #d2d6dd;

  /* Azul de sello: el único color de acento */
  --sello: #2342b5;
  --sello-fuerte: #1a3290;
  --sello-suave: #eef2fc;
  --sello-anillo: #c4d0f5;

  /* Estados */
  --ok: #157347;
  --ok-suave: #ebf7f0;
  --espera: #94600a;
  --espera-suave: #fdf6e3;
  --error: #b42318;
  --error-suave: #fdf1f0;
  --neutro: #4b5563;
  --neutro-suave: #f1f2f5;

  /* Derivados (el modo oscuro y el color de la empresa los cambian) */
  --sello-texto: var(--sello);
  --sello-texto-fuerte: var(--sello-fuerte);
  --ok-borde: #cdebd9;
  --espera-borde: #f1e2b8;
  --espera-tinta: #6e4a00;
  --error-borde: #f5d0cc;
  --error-tinta: #8f1d14;
  --error-anillo: #f5c6c1;
  --error-fuerte: #912018;
  --peligro: #b42318;
  --borde-hover: #bfc4cd;
  --placeholder: #9aa1ad;
  --fila-hover: #fafbfc;
  --globo: #111827;
  --globo-borde: #111827;
  --velo: rgba(17, 24, 39, 0.5);
  --sombra: rgba(17, 24, 39, 0.07);
  /* Series de los gráficos de anillo */
  --serie-0: var(--sello);
  --serie-1: #0f9f6e;
  --serie-2: #d97706;
  --serie-3: #7c3aed;
  --serie-4: #db2777;
  --serie-5: #64748b;

  --radio: 8px;
  --radio-grande: 12px;

  --lateral: 248px;
  --alto-control: 40px;
  --fuente: 'Archivo', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Modo oscuro: lo pone js/core/tema.js en <html data-tema="oscuro"> (elección del equipo o la del sistema). */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --papel: #151922;
  --fondo: #1b202a;
  --fondo-2: #252b37;
  --tinta: #e8ebf1;
  --tinta-2: #b9c0cc;
  --tinta-3: #8f98a8;
  --linea: #2a303c;
  --linea-fuerte: #3a4150;

  --sello: #3b5bdb;
  --sello-fuerte: #5574e6;
  --sello-suave: #1c2440;
  --sello-anillo: #34488f;
  --sello-texto: #9db0ff;
  --sello-texto-fuerte: #c6d1ff;

  --ok: #4fd18b;
  --ok-suave: #12291d;
  --ok-borde: #1f4a33;
  --espera: #f2c14e;
  --espera-suave: #2b2412;
  --espera-borde: #594717;
  --espera-tinta: #f5d47e;
  --error: #ff8a80;
  --error-suave: #2f1719;
  --error-borde: #5e2a2c;
  --error-tinta: #ffb4ad;
  --error-anillo: #6b2d2d;
  --error-fuerte: #a92d23;
  --peligro: #c8382c;
  --neutro: #b9c0cc;
  --neutro-suave: #252b37;

  --borde-hover: #4a5366;
  --placeholder: #6f788a;
  --fila-hover: #1b202a;
  --globo: #2b3241;
  --globo-borde: #3a4150;
  --velo: rgba(0, 0, 0, 0.6);
  --sombra: rgba(0, 0, 0, 0.35);
  --serie-1: #34d399;
  --serie-2: #fbbf24;
  --serie-3: #a78bfa;
  --serie-4: #f472b6;
  --serie-5: #94a3b8;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* En el celular, deslizar hacia abajo no recarga la página (se perdería la venta a medio armar). */
html, body { overscroll-behavior-y: contain; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
table { border-collapse: collapse; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--sello-texto); text-underline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--sello-anillo); color: var(--tinta); }

/* Títulos: la misma familia, más angosta y pesada, como los rótulos de un comprobante. */
h1, h2, h3 { font-stretch: 86%; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }

:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; border-radius: 4px; }

.icono { flex: none; display: block; }

/* Texto solo para lectores de pantalla */
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Números alineados en columnas */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num--alerta { color: var(--error); font-weight: 600; }
.codigo { font-stretch: 82%; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; }
.tenue { color: var(--tinta-3); }
.nowrap { white-space: nowrap; }

.enlace { background: none; border: 0; padding: 0; color: var(--sello-texto); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sello-anillo); text-underline-offset: 3px; cursor: pointer; }
.enlace:hover { color: var(--sello-texto-fuerte); text-decoration-color: currentColor; }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
:root[data-movimiento="no"] *, :root[data-movimiento="no"] *::before, :root[data-movimiento="no"] *::after {
  animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
}

/* Esquinas elegidas en este equipo (Configuración > Aplicación). */
:root[data-esquinas="redondeadas"] { --radio: 12px; --radio-grande: 18px; }
:root[data-esquinas="rectas"] { --radio: 3px; --radio-grande: 4px; }

/* Alto contraste: textos secundarios y líneas más marcados, en claro y en oscuro. */
:root[data-tema="claro"][data-contraste="alto"] {
  --tinta: #000000; --tinta-2: #1f2937; --tinta-3: #374151; --linea: #9ca3af; --linea-fuerte: #6b7280;
  --placeholder: #4b5563; --borde-hover: #374151; --fondo: #f1f2f4;
}
:root[data-tema="oscuro"][data-contraste="alto"] {
  --papel: #0b0d12; --fondo: #12151c; --tinta: #ffffff; --tinta-2: #e5e7eb; --tinta-3: #d1d5db;
  --linea: #5b6474; --linea-fuerte: #8b94a5; --placeholder: #9ca3af; --borde-hover: #d1d5db;
}
:root[data-contraste="alto"] :focus-visible { outline: 3px solid var(--sello-texto); outline-offset: 2px; }

/* ---------- Pantalla de inicio (mientras abre el sistema; ver index.html y js/app.js) ---------- */
.arranque {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; background: var(--papel); color: var(--tinta); text-align: center;
  /* En el navegador aparece con un instante de retraso: si todo carga rápido, ni se nota. */
  animation: arranque-entra .25s ease-out .2s both;
}
.arranque__icono { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); }
.arranque__nombre { margin: 4px 0 0; font-size: 17px; font-weight: 650; letter-spacing: .01em; }
.arranque__barra { position: relative; width: 120px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(127, 127, 127, .22); }
.arranque__barra::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: var(--sello); animation: arranque-barra 1.1s ease-in-out infinite; }
.arranque__lento { min-height: 2.9em; margin: 0; max-width: 260px; font-size: 13px; color: var(--tinta-2); }
@keyframes arranque-barra { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes arranque-entra { from { opacity: 0; } to { opacity: 1; } }
/* En la app instalada (y la de Android): como su pantalla de bienvenida, azul de la marca y sin retraso. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .arranque { background: #2342b5; color: #fff; animation: none; }
  .arranque__icono { box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
  .arranque__barra { background: rgba(255, 255, 255, .25); }
  .arranque__barra::after { background: #fff; }
  .arranque__lento { color: rgba(255, 255, 255, .85); }
}
@media (prefers-reduced-motion: reduce) {
  .arranque { animation: none; }
  .arranque__barra::after { animation-duration: 2.4s; }
}