/*
 * LA BASE COMPARTIDA: tokens de la marca, tema claro y oscuro, tipografía.
 *
 * La usan el sitio, la ayuda, la app y la consola. Ningún color se escribe a
 * mano en otra hoja: se usa un token. Cambiar la marca es cambiar este archivo.
 *
 * Marca: azul noche #13294B y turquesa #19E6DC (el del logo). El dinero tiene
 * sus colores propios —positivo, negativo, por asignar— porque se leen de un
 * vistazo y no pueden depender del tema.
 */
:root {
    color-scheme: light;
    --marca: #13294B;
    --marca-2: #1d3a66;
    --acento: #19E6DC;
    --acento-tinta: #0a6f6a;

    --fondo: #f5f7fb;
    --superficie: #ffffff;
    --superficie-2: #eef2f8;
    --borde: #dde3ee;
    --texto: #0f1b2d;
    --texto-2: #4b5a72;
    --texto-3: #5a667b;   /* 4,5:1 o más sobre todos los fondos claros (WCAG AA) */

    --positivo: #0f9d6b;
    --positivo-fondo: #e3f7ef;
    --negativo: #d93b3b;
    --negativo-fondo: #fde8e8;
    --aviso: #b7791f;
    --aviso-fondo: #fdf3dc;
    --info: #2563eb;
    --info-fondo: #e6efff;
    /* El verde y el rojo como TEXTO (sobre su fondo suave o el blanco) necesitan
       más tinta que como relleno para llegar a 4,5:1. Valen en claro y oscuro. */
    --positivo-tinta: color-mix(in srgb, var(--positivo) 72%, var(--texto));
    --negativo-tinta: color-mix(in srgb, var(--negativo) 80%, var(--texto));

    --sombra-1: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .08);
    --sombra-2: 0 6px 24px rgba(15, 27, 45, .12);
    --radio: 14px;
    --radio-chico: 10px;
    --radio-grande: 22px;

    --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --letra-cifras: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --seguro-arriba: env(safe-area-inset-top, 0px);
    --seguro-abajo: env(safe-area-inset-bottom, 0px);
    --seguro-izq: env(safe-area-inset-left, 0px);
    --seguro-der: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
        --fondo: #0b1424;
        --superficie: #12203a;
        --superficie-2: #182a48;
        --borde: #233757;
        --texto: #e8eef8;
        --texto-2: #a9b6cc;
        --texto-3: #8d9bb3;
        --acento-tinta: #19E6DC;
        --positivo: #34d399;
        --positivo-fondo: #0d2e25;
        --negativo: #f87171;
        --negativo-fondo: #3a1518;
        --aviso: #fbbf24;
        --aviso-fondo: #33270b;
        --info: #60a5fa;
        --info-fondo: #10264a;
        --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
        --sombra-2: 0 8px 28px rgba(0, 0, 0, .5);
    }
}
:root[data-tema="oscuro"] {
    color-scheme: dark;
    --fondo: #0b1424;
    --superficie: #12203a;
    --superficie-2: #182a48;
    --borde: #233757;
    --texto: #e8eef8;
    --texto-2: #a9b6cc;
    --texto-3: #8d9bb3;
    --acento-tinta: #19E6DC;
    --positivo: #34d399;
    --positivo-fondo: #0d2e25;
    --negativo: #f87171;
    --negativo-fondo: #3a1518;
    --aviso: #fbbf24;
    --aviso-fondo: #33270b;
    --info: #60a5fa;
    --info-fondo: #10264a;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 8px 28px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--letra);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--info); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.cifra { font-family: var(--letra-cifras); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.oculto { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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