/* =====================================================================
   tokens.css · variables del sistema visual

   ESTILO APPLE (2026-10-18, a petición de los usuarios).

   Lo que hace que algo "se sienta Apple" no es un color sino cuatro
   decisiones que aquí se fijan en un solo lugar:

     1. Fondo gris muy claro (#f5f5f7) y tarjetas blancas SIN borde: la
        separación la da el contraste de superficies, no las líneas.
     2. Letra del sistema a 17px, titulares grandes y apretados. En Mac y
        iPhone es San Francisco; en Windows cae a Segoe UI, que comparte la
        misma lógica de proporciones.
     3. Un solo azul de acción (#0071e3). Todo lo que se puede tocar es azul;
        lo demás es gris. El verde queda para el avance y el rojo,
        EXCLUSIVAMENTE, para faltantes reales de dinero.
     4. Listas agrupadas como en Ajustes del iPhone: renglones separados por
        una línea fina con sangría, dentro de un bloque redondeado.

   Los nombres de la rampa (--navy-*, --teal-*) se conservan para no tocar
   cientos de reglas: cambian sus VALORES, no su papel. --navy-900/800 son
   ahora la tinta de los titulares y --navy-700/600 el azul de acción.
   ===================================================================== */

:root {
  /* --- color ------------------------------------------------------ */
  --navy-900: #1d1d1f;   /* tinta de titulares y cifras */
  --navy-800: #1d1d1f;
  --navy-700: #0066cc;   /* azul de enlace / acción secundaria */
  --navy-600: #0071e3;   /* azul de acción */
  --navy-500: #0071e3;
  --navy-400: #86868b;   /* borde al pasar el cursor */
  --navy-100: #e8e8ed;   /* pistas de barras, bordes de avisos */
  --navy-050: #f5f5f7;   /* fondos suaves */

  --teal-700: #0a7a5f;
  --teal-600: #0e9a78;
  --teal-500: #2fbf96;
  --teal-100: #d4f1e7;
  --teal-050: #ecf9f4;

  --amber-700: #9a5300;
  --amber-600: #c96f00;
  --amber-100: #fde7c8;
  --amber-050: #fff6ea;

  --red-700: #c01f17;
  --red-600: #e0332a;
  --red-100: #fbd9d6;
  --red-050: #fff0ee;

  /* "Cromo": superficies que SIEMPRE son oscuras (barra superior, menú,
     tarjeta destacada, aviso flotante). Como la barra de apple.com: grafito
     casi negro y translúcido. Van con valores literales porque la rampa se
     invierte en el tema oscuro. */
  --chrome-bg: #1d1d1f;
  --chrome-bg-2: #2a2a2d;
  --chrome-bg-3: #3a3a3e;
  --chrome-glass: rgba(29, 29, 31, .78);
  --chrome-fg: #f5f5f7;
  --chrome-fg-soft: #d2d2d7;
  --chrome-fg-dim: #a1a1a6;
  --chrome-line: rgba(255, 255, 255, .12);
  --chrome-hover: rgba(255, 255, 255, .08);

  /* Botones sólidos. NO dependen de la rampa: esa se invierte en oscuro y un
     azul claro con texto blanco encima se ve como un botón desactivado. */
  --btn-primary-bg: #0071e3;
  --btn-primary-bg-hover: #0077ed;
  --btn-primary-fg: #ffffff;
  --btn-accent-bg: #0e9a78;
  --btn-accent-bg-hover: #0b8768;
  --btn-accent-fg: #ffffff;
  /* El botón secundario de Apple: relleno gris claro y texto azul. */
  --btn-soft-bg: #e8e8ed;
  --btn-soft-bg-hover: #dcdce1;

  --ink: #1d1d1f;
  --ink-soft: #424245;
  --muted: #6e6e73;
  --muted-soft: #86868b;
  --line: #e5e5ea;
  --line-strong: #d2d2d7;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-alt: #fbfbfd;
  --surface-sunken: #f2f2f7;   /* fondo de controles segmentados */
  --segment-on: #ffffff;       /* la opción elegida de un control segmentado */

  /* --- tipografía -------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  --tracking-display: -0.028em;
  --tracking-title: -0.018em;

  /* 17px de cuerpo, como el iPhone. Además resuelve un fallo de móvil: con
     menos de 16px, Safari hace zoom cada vez que se toca un campo. */
  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1.0625rem;   /* 17px */
  --fs-sm: 0.9375rem;     /* 15px */
  --fs-xs: 0.8125rem;     /* 13px */

  --lh-tight: 1.15;
  --lh-body: 1.47;

  /* --- espaciado ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-45: 1.25rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* --- ritmo ---------------------------------------------------------
     Espaciado CON SIGNIFICADO. Apple deja mucho aire alrededor de cada
     bloque y poco dentro de cada renglón: así los grupos se leen como
     grupos. */
  --pad-card: 1.5rem;
  --gap-card: 1.5rem;
  --gap-grid: 1.25rem;
  --gap-list: 0.625rem;
  --gap-field: 1.1rem;
  --pad-item: 0.9rem 1.05rem;
  --pad-input: 0.72rem 0.9rem;
  --pad-cell: 0.72rem 0.9rem;

  --measure: 68ch;

  /* --- formas ------------------------------------------------------ */
  --r-card: 20px;
  --r-input: 12px;
  --r-chip: 999px;
  --r-pill: 999px;

  /* Sombras casi invisibles: en Apple la tarjeta se separa del fondo por el
     contraste blanco sobre gris, no por la sombra. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .18);

  --focus: 0 0 0 4px rgba(0, 113, 227, .28);

  --max-w: 1120px;
  --header-h: 56px;

  /* Sin esto el navegador dibuja SUS controles (calendario, listas, barras
     de desplazamiento) en claro aunque la página sea oscura. */
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Tema oscuro, con la paleta oscura de Apple: negro puro de fondo y
   superficies grafito. Se aplica por preferencia del sistema Y por
   elección explícita, para que el interruptor gane en los dos sentidos.
   ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --navy-900: #f5f5f7;
    --navy-800: #f5f5f7;
    --navy-700: #2997ff;
    --navy-600: #0a84ff;
    --navy-500: #0a84ff;
    --navy-400: #636366;
    --navy-100: #2c3e57;
    --navy-050: #10223a;

    --teal-700: #4fd6b0;
    --teal-600: #30d158;
    --teal-500: #2fbf96;
    --teal-100: #17473a;
    --teal-050: #0f2e26;

    --amber-700: #ffb340;
    --amber-600: #ff9f0a;
    --amber-100: #4a3313;
    --amber-050: #2e210d;

    --red-700: #ff8a80;
    --red-600: #ff453a;
    --red-100: #4d1f1c;
    --red-050: #2e1412;

    --chrome-bg: #161617;
    --chrome-bg-2: #1c1c1e;
    --chrome-bg-3: #2c2c2e;
    --chrome-glass: rgba(22, 22, 23, .8);
    --chrome-line: rgba(255, 255, 255, .1);

    --btn-primary-bg: #0a84ff;
    --btn-primary-bg-hover: #409cff;
    --btn-primary-fg: #ffffff;
    --btn-accent-bg: #0e9a78;
    --btn-accent-bg-hover: #13b28b;
    --btn-accent-fg: #ffffff;
    --btn-soft-bg: #2c2c2e;
    --btn-soft-bg-hover: #3a3a3c;

    --ink: #f5f5f7;
    --ink-soft: #d1d1d6;
    --muted: #98989d;
    --muted-soft: #8e8e93;
    --line: #38383a;
    --line-strong: #48484a;
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-alt: #232325;
    --surface-sunken: #2c2c2e;
    --segment-on: #636366;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7);

    --focus: 0 0 0 4px rgba(10, 132, 255, .4);
  }
}

/* La elección explícita gana sobre la preferencia del sistema, en los dos
   sentidos: por eso el tema oscuro se declara otra vez aquí. */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --navy-900: #f5f5f7;
  --navy-800: #f5f5f7;
  --navy-700: #2997ff;
  --navy-600: #0a84ff;
  --navy-500: #0a84ff;
  --navy-400: #636366;
  --navy-100: #2c3e57;
  --navy-050: #10223a;

  --teal-700: #4fd6b0;
  --teal-600: #30d158;
  --teal-500: #2fbf96;
  --teal-100: #17473a;
  --teal-050: #0f2e26;

  --amber-700: #ffb340;
  --amber-600: #ff9f0a;
  --amber-100: #4a3313;
  --amber-050: #2e210d;

  --red-700: #ff8a80;
  --red-600: #ff453a;
  --red-100: #4d1f1c;
  --red-050: #2e1412;

  --chrome-bg: #161617;
  --chrome-bg-2: #1c1c1e;
  --chrome-bg-3: #2c2c2e;
  --chrome-glass: rgba(22, 22, 23, .8);
  --chrome-line: rgba(255, 255, 255, .1);

  --btn-primary-bg: #0a84ff;
  --btn-primary-bg-hover: #409cff;
  --btn-primary-fg: #ffffff;
  --btn-accent-bg: #0e9a78;
  --btn-accent-bg-hover: #13b28b;
  --btn-accent-fg: #ffffff;
  --btn-soft-bg: #2c2c2e;
  --btn-soft-bg-hover: #3a3a3c;

  --ink: #f5f5f7;
  --ink-soft: #d1d1d6;
  --muted: #98989d;
  --muted-soft: #8e8e93;
  --line: #38383a;
  --line-strong: #48484a;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-alt: #232325;
  --surface-sunken: #2c2c2e;
  --segment-on: #636366;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7);

  --focus: 0 0 0 4px rgba(10, 132, 255, .4);
}