/* =====================================================================
   BASE · Tokens, reset y tipografía  ·  Tema OSCURO YAesYA
   Azul marino profundo + acento dorado (tomados del logo).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Superficies (oscuro, base azul marino) */
  --canvas:      #071426;   /* fondo de la app */
  --surface:     #0E2138;   /* tarjetas */
  --surface-2:   #14304F;   /* hover / filas */
  --sidebar:     #04101F;   /* barra lateral (más profundo) */

  /* Marca */
  --navy:        #03345F;   /* azul del logo */
  --gold:        #D99E1C;   /* dorado del logo */
  --gold-bright: #EBB63F;
  --gold-tint:   rgba(217,158,28,.14);

  /* Texto */
  --ink:         #EAF0F7;   /* texto principal (claro) */
  --ink-soft:    #90A2B9;   /* secundario */
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  /* Estados financieros */
  --verde:       #34C387;   /* positivo / capital / ganancia */
  --verde-tint:  rgba(52,195,135,.14);
  --brick:       #E86A50;   /* mora / pérdida / destructivo */
  --brick-tint:  rgba(232,106,80,.14);
  --amber:       var(--gold);
  --amber-tint:  var(--gold-tint);

  /* Tipografía */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica. Reducida ~7% respecto al tamaño original para que
     quepa más información sin sacrificar legibilidad. Al ser variables, el
     cambio se propaga a todo el sistema. */
  --fs-xs: 0.6875rem; --fs-sm: 0.75rem; --fs-md: 0.875rem;
  --fs-lg: 1.0625rem; --fs-xl: 1.375rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem;
  --radius: 8px; --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5);
  --sidebar-w: 248px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans); font-size: var(--fs-md);
  color: var(--ink); background: var(--canvas);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; color: var(--ink); }
h1 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

.num, td.num, .kpi-valor { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}

.txt-verde { color: var(--verde); }
.txt-brick { color: var(--brick); }
.txt-soft  { color: var(--ink-soft); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }