/*
 * base.css: tokens de RESI (copiados de app/public/tokens.css, mismos nombres), fuentes propias,
 * base, botones, campos y la pantalla de entrada. Lo comparten login.html e index.html.
 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fuentes/manrope-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fuentes/archivo-latin.woff2') format('woff2');
}

:root {
  --texto: #0F1B2D;
  --texto-2: #5B6B80;
  --texto-3: #5F6E82;

  --fondo: #F4F6F9;
  --superficie: #FFFFFF;
  --suave: #F1F4F8;
  --fila-hover: #F9FBFD;
  --seleccionado: #F5FBFE;
  --boton-hover: #F7F9FC;

  --borde: #E6EAF0;
  --borde-suave: #EEF1F5;
  --borde-fila: #F1F4F8;
  --borde-input: #DCE2EA;
  --borde-input-hover: #B8C2D0;

  --primario: #1A9FE0;
  --primario-oscuro: #127CB5;
  --primario-tint: #E8F5FD;
  --check: #0F6FAF;

  --navy: #0F1B2D;
  --navy-sup: #182740;
  --navy-borde: #24364F;
  --navy-texto-2: #9FB0C4;
  --navy-texto: #C9D6E5;
  --orbe-claro: #4DB8F0;

  --exito: #2FB36A;
  --exito-texto: #1E7F45;
  --exito-tint: #E6F6EC;
  --aviso: #E8A33C;
  --aviso-icono: #C77D12;
  --aviso-texto: #9A6009;
  --aviso-tint: #FDF3E3;
  --alerta: #C0392B;
  --alerta-texto: #A93226;
  --alerta-tint: #FBE9E7;

  --foco: var(--primario-oscuro);

  --fuente: 'Manrope', Helvetica, Arial, sans-serif;
  /* Cifras grandes: Archivo, una sans de la marca con buenas cifras. */
  --fuente-cifras: 'Archivo', 'Manrope', Helvetica, Arial, sans-serif;
  --fuente-codigo: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --e1: 2px;  --e2: 4px;  --e3: 6px;  --e4: 8px;   --e5: 10px;
  --e6: 12px; --e7: 14px; --e8: 16px; --e9: 20px;  --e10: 24px; --e11: 28px;
  --e12: 36px; --e13: 40px; --e14: 48px; --e15: 64px;

  --r-chip: 7px;
  --r-sm: 9px;
  --r-input: 10px;
  --r-boton: 11px;
  --r-nav: 12px;
  --r-panel: 14px;
  --r-tile: 16px;
  --r-card: 20px;
  --r-pill: 999px;

  --sombra-tab: 0 1px 3px rgba(15, 27, 45, .10);
  --sombra-card-hover: 0 12px 32px rgba(15, 27, 45, .08);
  --sombra-cta: 0 6px 16px rgba(26, 159, 224, .30);
  --sombra-flotante: 0 16px 40px rgba(15, 27, 45, .12);

  --mov-1: 150ms;
  --mov-2: 200ms;
  --mov-3: 300ms;
  --curva: cubic-bezier(.2, 0, .2, 1);
  /* Salida exponencial para lo que entra (cifras, barras). */
  --curva-salida: cubic-bezier(.16, 1, .3, 1);

  --ancho: 1200px;

  /* Series de los gráficos (validadas: CVD, contraste 3:1 sobre blanco). Anthropic = 1, Deepgram = 2. */
  --serie-1: #1690D0;
  --serie-2: #D2700A;
  --serie-3: #7C5CD6;
  --serie-4: #C2417A;
  /* Las mismas dos series, en pasos validados sobre el navy. */
  --serie-1-navy: #3197D6;
  --serie-2-navy: #D27A22;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--primario-tint); color: var(--texto); }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--borde-input-hover) transparent; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  caret-color: var(--primario);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.dato { font-weight: 600; font-variant-numeric: tabular-nums; }
.codigo { font-family: var(--fuente-codigo); font-size: 12px; letter-spacing: 0; overflow-wrap: anywhere; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.icono { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ Botones ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e3);
  min-height: 40px; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none;
  padding: var(--e5) var(--e9); border-radius: var(--r-boton); border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--mov-1) var(--curva), border-color var(--mov-1) var(--curva),
              color var(--mov-1) var(--curva), box-shadow var(--mov-1) var(--curva), transform var(--mov-1) var(--curva);
}
.btn-1 { background: var(--primario-oscuro); color: var(--superficie); box-shadow: var(--sombra-cta); }
.btn-1:hover { background: var(--check); }
.btn-2 { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.btn-2:hover { background: var(--boton-hover); border-color: var(--borde-input-hover); }
.btn-3 { background: none; color: var(--texto-2); }
.btn-3:hover { background: var(--suave); color: var(--texto); }
.btn.chico { min-height: 34px; font-size: 13px; padding: var(--e3) var(--e6); border-radius: var(--r-sm); }
.btn.chico.btn-1 { box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--suave); color: var(--texto-3); border-color: var(--borde); box-shadow: none; cursor: not-allowed;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
@media (pointer: coarse) { .btn, .btn.chico { min-height: 44px; } }

/* ═══ Campos ════════════════════════════════════════════════════════════ */
.campo { display: flex; flex-direction: column; gap: var(--e3); text-align: left; }
.campo label, .campo .rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.entrada-texto {
  width: 100%; min-height: 42px;
  font-size: 15px; font-weight: 400; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde-input); border-radius: var(--r-input);
  padding: var(--e5) var(--e6);
  transition: border-color var(--mov-1) var(--curva), box-shadow var(--mov-1) var(--curva);
}
.entrada-texto:hover:not(:focus) { border-color: var(--borde-input-hover); }
.entrada-texto:focus { outline: 2px solid var(--primario); outline-offset: -1px; border-color: var(--primario); }
.entrada-texto[aria-invalid="true"] { border-color: var(--alerta); }
.ayuda { font-size: 12px; color: var(--texto-3); }

.aviso-error {
  display: flex; gap: var(--e4); align-items: flex-start;
  padding: var(--e5) var(--e6); border-radius: var(--r-input);
  background: var(--alerta-tint); color: var(--alerta-texto); font-size: 13px; font-weight: 600; line-height: 1.45;
  animation: aparece var(--mov-2) var(--curva-salida);
}
.aviso-error .icono { margin-top: 1px; }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } }

.girando { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ═══ Pantalla de entrada ═══════════════════════════════════════════════ */
.entrada {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--e10) var(--e8);
  background:
    radial-gradient(1200px 520px at 50% -10%, var(--primario-tint), transparent 70%),
    var(--fondo);
}
.entrada-caja {
  width: 100%; max-width: 400px;
  padding: var(--e12) var(--e11) var(--e11);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-card);
  box-shadow: var(--sombra-card-hover);
  animation: sube var(--mov-3) var(--curva-salida);
}
@keyframes sube { from { opacity: 0; transform: translateY(8px); } }
.entrada-marca { display: flex; align-items: center; gap: var(--e6); margin-bottom: var(--e11); }
.entrada-marca img { width: 44px; height: 44px; border-radius: var(--r-panel); }
.entrada-marca b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.entrada-marca span { font-size: 13px; color: var(--texto-3); }
.entrada h1 { font-size: 22px; margin-bottom: var(--e3); }
.entrada-sub { margin-bottom: var(--e10); font-size: 14px; color: var(--texto-3); }
.entrada form { display: flex; flex-direction: column; gap: var(--e8); }
.entrada .btn { width: 100%; margin-top: var(--e2); }
.entrada-pie { margin-top: var(--e10); font-size: 12px; color: var(--texto-3); text-align: center; }
@media (max-width: 420px) {
  .entrada-caja { padding: var(--e11) var(--e9) var(--e10); }
}