/* ─────────────────────────────────────────────────────────────
   Finanzas Anime · tokens
   Un solo archivo define todo el color del producto.
   Ningún componente escribe un hex. Nunca.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}

:root {
  color-scheme: light dark;

  /* ── Familia y escala tipográfica ───────────────────────── */
  --fuente: 'Archivo', system-ui, -apple-system, sans-serif;

  --txt-1: 12px;   /* etiqueta en versalitas. nunca prosa    */
  --txt-2: 15px;   /* cuerpo. mínimo absoluto                */
  --txt-3: 17px;   /* nombre de deuda, título de subpantalla */
  --txt-4: 22px;   /* cifra de bloque                        */
  --txt-5: 34px;   /* cifra destacada. una por pantalla      */

  --peso-normal: 400;
  --peso-medio: 600;
  --peso-fuerte: 800;

  --alto-linea: 1.5;
  --alto-linea-cifra: 1.1;
  --track-etiqueta: 0.14em;
  --track-cifra: -0.02em;

  /* ── Espaciado · base 4 ─────────────────────────────────── */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;

  /* ── Estructura ─────────────────────────────────────────── */
  --radio: 0;
  --regla-fina: 1px;
  --regla: 2px;
  --regla-activa: 3px;
  --toque-min: 44px;
  --ancho-min: 360px;
  --margen-pantalla: var(--e-4);

  /* ── Área segura ────────────────────────────────────────── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ═══ TEMA CLARO ═══════════════════════════════════════════ */
:root,
[data-tema='claro'] {
  color-scheme: light;

  --superficie:          #f3f2f2;
  --superficie-elevada:  #eae9e9;
  --superficie-hundida:  #e2e0df;
  --texto:               #201e1d;
  --texto-suave:         #605d5d;
  --texto-tenue:         #7d7979;
  --texto-invertido:     #f3f2f2;
  --borde:               #d7d3d3;
  --borde-fuerte:        #201e1d;

  --acento:              #ec3013;
  --acento-texto:        #ae1800;  /* prosa sobre superficie */
  --acento-fondo:        #ffe0d9;
  --acento-pulsado:      #dd2b0f;

  /* interés · el dinero que se quema */
  --interes:             #ae1800;
  --interes-trazo:       #ec3013;
  --interes-fondo:       #ffe0d9;

  /* capital liquidado · deuda muerta */
  --capital:             #10714a;
  --capital-fondo:       #d5ece0;

  /* urgencia · tres niveles. glifo ▲ ◆ ● + días escritos */
  --urgencia-alta:       #ae1800;
  --urgencia-alta-fondo: #ffe0d9;
  --urgencia-media:      #8a5a00;
  --urgencia-media-fondo:#f6e8cd;
  --urgencia-baja:       #605d5d;
  --urgencia-baja-fondo: transparent;

  /* meta alcanzada · el único bloque que invierte la tinta */
  --meta-fondo:          #201e1d;
  --meta-texto:          #f3f2f2;
  --meta-regla:          #ec3013;

  /* procedencia del dato · pantalla de verificación */
  --dato-ocr:            #605d5d;
  --dato-manual:         #201e1d;
  --dato-corregido:      #8a5a00;
  --dato-dudoso-fondo:   #f6e8cd;

  /* gráfica */
  --graf-linea:          var(--texto);
  --graf-area:           color-mix(in srgb, var(--texto) 7%, transparent);
  --graf-interes:        var(--interes-trazo);
  --graf-hito-relleno:   var(--superficie);
  --graf-hito-trazo:     var(--texto);
  --graf-hito-final:     var(--capital);
  --graf-eje:            var(--borde);
  --graf-eje-texto:      var(--texto-suave);
}

/* ═══ TEMA OSCURO ══════════════════════════════════════════ */
[data-tema='oscuro'] {
  color-scheme: dark;

  --superficie:          #1a1918;
  --superficie-elevada:  #242220;
  --superficie-hundida:  #121110;
  --texto:               #f2f0ef;
  --texto-suave:         #a9a4a1;
  --texto-tenue:         #857f7d;
  --texto-invertido:     #1a1918;
  --borde:               #383533;
  --borde-fuerte:        #f2f0ef;

  --acento:              #ff563c;
  --acento-texto:        #ff9783;
  --acento-fondo:        #45150a;
  --acento-pulsado:      #ff9783;

  --interes:             #ff9783;
  --interes-trazo:       #ff563c;
  --interes-fondo:       #45150a;

  --capital:             #52c98f;
  --capital-fondo:       #0e2e21;

  --urgencia-alta:       #ff9783;
  --urgencia-alta-fondo: #45150a;
  --urgencia-media:      #d9a441;
  --urgencia-media-fondo:#33270c;
  --urgencia-baja:       #a9a4a1;
  --urgencia-baja-fondo: transparent;

  --meta-fondo:          #f2f0ef;
  --meta-texto:          #1a1918;
  --meta-regla:          #ff563c;

  --dato-ocr:            #a9a4a1;
  --dato-manual:         #f2f0ef;
  --dato-corregido:      #d9a441;
  --dato-dudoso-fondo:   #33270c;

  --graf-area:           color-mix(in srgb, var(--texto) 12%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;
    --superficie:          #1a1918;
    --superficie-elevada:  #242220;
    --superficie-hundida:  #121110;
    --texto:               #f2f0ef;
    --texto-suave:         #a9a4a1;
    --texto-tenue:         #857f7d;
    --texto-invertido:     #1a1918;
    --borde:               #383533;
    --borde-fuerte:        #f2f0ef;
    --acento:              #ff563c;
    --acento-texto:        #ff9783;
    --acento-fondo:        #45150a;
    --acento-pulsado:      #ff9783;
    --interes:             #ff9783;
    --interes-trazo:       #ff563c;
    --interes-fondo:       #45150a;
    --capital:             #52c98f;
    --capital-fondo:       #0e2e21;
    --urgencia-alta:       #ff9783;
    --urgencia-alta-fondo: #45150a;
    --urgencia-media:      #d9a441;
    --urgencia-media-fondo:#33270c;
    --urgencia-baja:       #a9a4a1;
    --meta-fondo:          #f2f0ef;
    --meta-texto:          #1a1918;
    --meta-regla:          #ff563c;
    --dato-ocr:            #a9a4a1;
    --dato-manual:         #f2f0ef;
    --dato-corregido:      #d9a441;
    --dato-dudoso-fondo:   #33270c;
    --graf-area:           color-mix(in srgb, var(--texto) 12%, transparent);
  }
}

/* ═══ BASE ═════════════════════════════════════════════════ */
html { background: var(--superficie); }

body {
  margin: 0;
  min-width: var(--ancho-min);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--txt-2);
  line-height: var(--alto-linea);
  padding:
    var(--safe-top) var(--safe-right)
    var(--safe-bottom) var(--safe-left);
  -webkit-font-smoothing: antialiased;
}

/* Toda cifra del producto pasa por aquí. Sin excepción. */
.cifra {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-cifra);
  white-space: nowrap;
}

.etiqueta {
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

:focus-visible {
  outline: var(--regla) solid var(--acento);
  outline-offset: var(--e-1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}