/* ============================================================
   Alpha Link · las variables del diseño, en un solo lugar.

   Esta hoja va PRIMERO en todas las páginas y es la única que
   declara variables. Las demás (style.css, redesign.css, p2p.css,
   motion.css) solo las consumen.

   Antes cada hoja traía su propio `:root` — style.css con la
   paleta navy/dorado y redesign.css con la paleta `--al-*` — y
   pisaba a la anterior según el orden de carga. Eso dejaba
   páginas con colores, radios y sombras que no eran los mismos
   aunque el componente sí lo fuera: el botón de «Arrancar
   rotación» salía navy y el de «Convertir» carbón, porque cada
   uno leía un sistema distinto (y `--brand`, que la rotación
   pedía, no existía en ninguno).

   Cómo se lee:
   - `--al-*` es el nombre canónico (la capa 2026 del panel);
   - los nombres viejos (`--navy`, `--card`, `--fs-*`, `--r-*`…)
     siguen existiendo como alias al final, derivados de los
     canónicos, para que style.css no se tenga que reescribir
     entero y para que nada quede fuera de sincronía.
   ============================================================ */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* --- Superficies ------------------------------------------------
       La estructura de Uglycash (fondo plano, módulos blancos sin borde,
       titulares condensados, píldoras, halo) con los colores de Alpha
       Link: un gris apenas cálido, el marino de la marca donde la
       referencia usa negro y el dorado del logo como acento. */
    --al-bg: #f2f0eb;
    --al-surface: #ffffff;
    --al-surface-soft: #f2f0eb;
    /* El marino del panel: navegación activa y rellenos sólidos. */
    --al-chrome: #131c2e;
    --al-chrome-ink: #ffffff;
    /* Alias histórico de --al-chrome. */
    --al-surface-strong: var(--al-chrome);
    /* El bloque oscuro de la página (Operar, el comprobante, el acceso):
       marino en los dos temas, con sus teclas un tono más claro. */
    --al-bloque: #131c2e;
    --al-bloque-ink: #ffffff;
    --al-bloque-muted: rgba(255, 255, 255, .62);
    --al-bloque-tecla: #1f2b44;

    /* --- Texto ------------------------------------------------------ */
    --al-ink: #131722;
    --al-muted: #626670;
    --al-faint: #7c7f87;
    --al-line: #e2dfd8;

    /* --- Marca ------------------------------------------------------
       Dorado del logo como acento y brillo; en rellenos y halos. Como
       texto sobre blanco no alcanza el contraste: para eso está
       --al-accent-ink. --al-pop es la etiqueta («Modo real», «En vivo»):
       el dorado claro con tinta marina encima. */
    --al-accent: #d79245;
    --al-accent-soft: #f7e6cc;
    --al-accent-ink: #7b481b;   /* acento legible sobre superficie clara */
    --al-accent-bright: #f2c990;
    --al-glow: color-mix(in srgb, #d79245 55%, transparent);
    --al-pop: #f2c990;
    --al-on-pop: #131c2e;
    --al-blue: #213b69;
    --al-blue-deep: #121c2e;

    /* --- Estado (un solo juego para todo el panel) ------------------- */
    --al-green: #188052;
    --al-green-soft: #daf0e4;
    --al-warning: #bc5d1d;
    --al-warning-soft: #fdeedd;
    --al-danger: #b53f3f;
    --al-danger-soft: #f8e6e6;
    /* `--al-ok` lo piden las tablas del extracto; antes no existía y caía
       en un verde neón de respaldo (#3ddc97) ilegible sobre el crema. */
    --al-ok: var(--al-green);
    /* Azul informativo: las conversiones cripto, que necesitan un tono
       propio para no confundirse con una salida (dorado). */
    --al-info: var(--al-blue);
    --al-info-soft: #e2e9f5;
    /* Lo que va encima de un relleno de estado (el icono del comprobante,
       una insignia llena): en oscuro el verde/ámbar/rojo se aclaran y el
       blanco deja de contrastar. */
    --al-on-estado: #ffffff;

    /* --- Relleno sólido de lo seleccionado -------------------------
       Botón primario, chip activo, filtro activo. En claro es el carbón;
       en oscuro pasa al acento (el carbón se perdería contra el fondo).
       Todo lo que se «prende» usa esta pareja, así nunca se van por
       caminos distintos. */
    --al-solid: var(--al-chrome);
    --al-on-solid: var(--al-chrome-ink);
    /* El trazo de un icono sobre ese relleno (el menú): dorado sobre el
       marino en claro; en oscuro el relleno ya es dorado y va su tinta. */
    --al-on-icono: var(--al-pop);

    /* --- Geometría -------------------------------------------------- */
    --al-radius-xs: 12px;
    --al-radius-sm: 16px;
    --al-radius-md: 24px;
    --al-radius-lg: 32px;
    --al-radius-pill: 999px;

    /* Alturas de control: tres, no ocho. */
    --al-alto-chip: 38px;      /* chips, filtros, botones secundarios chicos */
    --al-alto-boton: 46px;     /* botón secundario, acciones en línea */
    --al-alto-campo: 54px;     /* input y botón primario */

    --al-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    --al-shadow-alta: 0 28px 80px rgba(0, 0, 0, .22);

    /* --- Tipografía ------------------------------------------------- */
    /* Las dos fuentes de la referencia, servidas desde static/fonts
       (la CSP solo admite fuentes propias): Archivo condensada para los
       titulares, en lugar de Helvetica Now Display Condensed, e Inter
       para el texto. Solo el subconjunto latino, que cubre el español. */
    --al-fuente: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --al-fuente-display: Archivo, "Helvetica Neue", "Roboto Condensed",
                 "Arial Narrow", Arial, sans-serif;
    --al-fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- Movimiento ------------------------------------------------- */
    --al-ease: cubic-bezier(.22, .78, .26, 1);
    --mv-fast: .16s;
    --mv-base: .22s;
    --mv-slow: .42s;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Negro puro de fondo y módulos grafito neutros, sin tinte azul
           (el marino se queda para el tema claro); el dorado encendido. */
        --al-bg: #000000;
        --al-surface: #141414;
        --al-surface-soft: #222222;
        --al-bloque: #0b0b0b;
        --al-bloque-tecla: #1e1e1e;

        --al-ink: #f3f1ec;
        --al-muted: #a8a6a1;
        --al-faint: #8f8d88;
        --al-line: #2c2c2c;

        --al-accent: #e3b16f;
        --al-accent-soft: #35291c;
        --al-accent-ink: #efc88f;
        --al-accent-bright: #efc88f;
        --al-glow: color-mix(in srgb, #e3b16f 50%, transparent);
        --al-pop: #efc88f;
        --al-on-pop: #141414;
        --al-blue: #31558d;
        --al-blue-deep: #0d1420;

        --al-green: #63d49a;
        --al-green-soft: #123324;
        --al-warning: #f0a35e;
        --al-warning-soft: #3a2410;
        --al-danger: #ee8686;
        --al-danger-soft: #331a1a;
        --al-info-soft: #1a2436;
        --al-on-estado: #141414;

        /* Lo seleccionado se prende en dorado, como antes del rediseño. */
        --al-solid: #e3b16f;
        --al-on-solid: #141414;
        --al-on-icono: var(--al-on-solid);

        --al-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --al-shadow-alta: 0 28px 80px rgba(0, 0, 0, .6);
    }
}

/* ============================================================
   Alias de los nombres viejos.
   Todo lo de aquí abajo se deriva de lo de arriba: cambiar un
   color de marca es cambiar una línea, no quince.
   ============================================================ */

:root {
    /* Superficies y texto (style.css) */
    --bg: var(--al-bg);
    --card: var(--al-surface);
    --card-2: var(--al-surface-soft);
    --line: var(--al-line);
    --ink: var(--al-ink);
    --ink-2: var(--al-muted);
    --ink-3: var(--al-faint);

    /* Marca */
    --navy: var(--al-blue);
    --navy-2: var(--al-blue-deep);
    --gold: var(--al-accent);
    --gold-ink: var(--al-accent-ink);
    --gold-bright: var(--al-accent-bright);
    --gold-soft: var(--al-accent-soft);

    /* Estado */
    --green: var(--al-green);
    --green-soft: var(--al-green-soft);
    --amber: var(--al-warning);
    --amber-soft: var(--al-warning-soft);
    --red: var(--al-danger);
    --red-soft: var(--al-danger-soft);

    /* Los cuatro que p2p.css pedía con respaldo y nadie definía: sin
       esto la rotación pintaba con los grises genéricos del respaldo
       (#6b7280, #111827) y su botón primario en navy (#0e1e3c). */
    --text: var(--al-ink);
    --muted: var(--al-muted);
    --ok: var(--al-green);
    --brand: var(--al-solid);

    /* Roles Material 3 que usa style.css */
    --md-primary: var(--al-solid);
    --md-on-primary: var(--al-on-solid);
    --md-primary-container: var(--al-accent-soft);
    --md-on-primary-container: var(--al-accent-ink);
    --md-secondary-container: var(--al-accent-soft);
    --md-on-secondary-container: var(--al-accent-ink);
    --md-surface: var(--al-surface);
    --md-surface-container: var(--al-surface-soft);
    --md-surface-container-high: color-mix(in srgb, var(--al-surface-soft) 78%, var(--al-ink));
    --md-outline: color-mix(in srgb, var(--al-muted) 70%, var(--al-line));

    /* Espaciado */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

    /* Escala tipográfica */
    --fs-1: .75rem;     /* 12px · referencias, hora, notas al pie */
    --fs-2: .75rem;     /* 12px · badges */
    --fs-3: .8125rem;   /* 13px · texto secundario, filtros */
    --fs-4: .875rem;    /* 14px · densidad de lista */
    --fs-5: .9375rem;   /* 15px · cuerpo */
    --fs-6: 1.0625rem;  /* 17px · headline, botón primario */
    --fs-7: 1.25rem;    /* 20px · título de sección */
    --fs-8: 1.5rem;     /* 24px · título de página */
    --fs-9: 2rem;       /* 32px · monto grande */
    --fs-hero: clamp(1.875rem, 8vw, 2.5rem);

    /* Radios viejos, apuntando a la misma escala */
    --r-xs: var(--al-radius-xs);
    --r-sm: var(--al-radius-sm);
    --r-md: var(--al-radius-md);
    --r-lg: var(--al-radius-lg);
    --r-full: var(--al-radius-pill);

    /* Elevación */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-2: var(--al-shadow);
    --shadow-3: var(--al-shadow-alta);
    --shadow: var(--shadow-1);
    --shadow-lift: var(--shadow-2);

    /* Tiempos */
    --dur-fast: var(--mv-fast);
    --dur-base: var(--mv-base);
    --dur-slow: var(--mv-slow);
    --ease: var(--al-ease);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
    }
}