/*  ===========================================================================
    TOKENS — la única fuente de valores del sistema

    Acá viven TODOS los colores, tamaños, espacios, radios y sombras. Fuera de
    este archivo no se escribe ni un hex ni un px de espaciado. Si un componente
    necesita un valor que no está, se agrega el token acá; no se escribe el
    número suelto.

    Este archivo lo carga `headAdmin.html` PRIMERO y SIEMPRE. Ninguna pantalla
    puede olvidarlo ni cambiarlo de lugar.
    =========================================================================== */


/*  ---------------------------------------------------------------------------
    LA FUENTE

    Está guardada acá adentro, en static/vendor/fonts/. No se baja de internet:
    la charcutería no siempre tiene conexión, y una pantalla sin fuentes es una
    pantalla que no se puede usar.

    Es "variable": un solo archivo trae todos los grosores. Con la monoespaciada
    pesan 83 KB las dos.
    --------------------------------------------------------------------------- */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../vendor/fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../vendor/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../vendor/fonts/jetbrains-mono-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: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../vendor/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/*  ===========================================================================
    PARA CAMBIAR DE RUBRO  (charcutería  ->  ferretería, farmacia, lo que sea)

    Se toca SOLO este bloque. Todo lo de abajo se deriva de acá.

    Si cambiás el acento y la tipografía y el panel entero cambia de cara, el
    sistema está sano. Si algo se quedó del color viejo, es que ese algo tiene
    un color escrito a mano en vez de un token: hay que ir a arreglarlo.

    (Eso es la "prueba de la ferretería", y está en la skill sistema-visual.)
    =========================================================================== */

:root {
    --fuente-base: 'Manrope', ui-sans-serif, sans-serif;

    /*  La monoespaciada. Va en cédulas, teléfonos, precios, stock y lotes: hace
        que los números queden en columna y no bailen de fila en fila. */
    --fuente-mono-base: 'JetBrains Mono', ui-monospace, monospace;

    /*  El acento: terracota. El color del jamón curado y del papel de
        carnicería. No es el azul de todos los sistemas y le queda al rubro sin
        ser una caricatura. Cambiando esta rampa cambia el panel entero. */
    --acento-50:  #fdf4f0;
    --acento-100: #fae4d9;
    --acento-200: #f5c3ac;
    --acento-300: #f0a988;
    --acento-400: #e28a63;
    --acento-500: #d97757;
    --acento-600: #c25f3f;
    --acento-700: #9d4a2f;

    /*  Qué tan redondo es todo. */
    --r-1: 8px;
    --r-2: 11px;
    --r-3: 16px;
    --r-4: 20px;
    --r-redondo: 999px;

    /*  El marco de la pantalla. */
    --alto-header: 68px;
    --alto-footer: 26px;
    --ancho-menu: 248px;
    /*  08-08-2026: de 1800 a 2400. En un monitor de 2560 sobraban 760px de
        vidrio a los costados mientras la tabla de productos apretaba siete
        columnas. Esto no es un blog: acá el ancho se usa para ver más filas y
        más columnas de una vez, que es exactamente para lo que alguien compra
        una pantalla grande.

        Se pone un tope igual y no se deja libre: sin tope, en un monitor
        ultrawide el nombre de un producto y su precio quedan a medio metro de
        distancia y hay que seguir el renglón con el dedo. */
    --ancho-max: 2400px;
}


/*  ---------------------------------------------------------------------------
    PRIMITIVOS

    La paleta cruda. NO se usan fuera de este archivo: los componentes usan los
    tokens con nombre de abajo (--fondo, --texto, --acento...). Así el modo
    claro/oscuro se resuelve en un solo lugar.
    --------------------------------------------------------------------------- */

:root {
    /*  Grises fríos, casi neutros. El extremo oscuro llega hasta el negro puro
        porque el diseño se apoya en ese contraste. */
    --gris-0:   #ffffff;
    --gris-25:  #fafafa;
    --gris-50:  #f4f4f5;
    --gris-100: #e9e9ec;
    --gris-200: #d8d8dd;
    --gris-300: #b4b4bc;
    --gris-400: #8e8e98;
    --gris-500: #71717a;
    --gris-600: #52525b;
    --gris-700: #3f3f46;
    --gris-800: #27272a;
    --gris-850: #1c1c20;
    --gris-880: #151518;
    --gris-900: #0e0e11;
    --gris-925: #09090b;
    --gris-950: #000000;

    --rojo-100:  #ffe4e6;
    --rojo-300:  #fb7185;
    --rojo-500:  #e11d48;
    --rojo-600:  #be123c;

    --ambar-100: #fef3c7;
    --ambar-300: #fbbf24;
    --ambar-500: #d97706;
    --ambar-600: #b45309;

    --verde-100: #d1fae5;
    --verde-300: #34d399;
    --verde-500: #059669;
    --verde-600: #047857;

    --cian-100:  #cffafe;
    --cian-300:  #22d3ee;
    --cian-500:  #0891b2;
    --cian-600:  #0e7490;
}


/*  ---------------------------------------------------------------------------
    LOS TOKENS CON NOMBRE

    Esto es lo que usan los componentes. Cada uno se define UNA sola vez, con
    `light-dark(claro, oscuro)`: el navegador elige según el tema.

    Gracias a esto, el modo "automático" (seguir al equipo) funciona sin una
    sola línea de JavaScript, y los <select>, las barras de scroll y demás
    controles del sistema se ponen oscuros solos.

    REGLA: si un componente necesita su propia regla [data-theme="dark"], es
    que usó un color escrito a mano. Andá a arreglar eso, no agregues la regla.
    --------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* --- Superficies ---------------------------------------------------- */
    --fondo:            light-dark(var(--gris-50),  var(--gris-950));
    --fondo-2:          light-dark(var(--gris-0),   var(--gris-900));
    --fondo-3:          light-dark(var(--gris-100), var(--gris-925));
    --fondo-menu:       light-dark(var(--gris-0),   var(--gris-925));
    --superficie-modal: light-dark(var(--gris-0),   var(--gris-850));
    --velo:             light-dark(hsl(240 6% 10% / .5), hsl(0 0% 0% / .72));

    /* --- Texto ---------------------------------------------------------- */
    --texto:           light-dark(var(--gris-850), var(--gris-25));
    --texto-2:         light-dark(var(--gris-600), var(--gris-400));
    --texto-3:         light-dark(var(--gris-400), var(--gris-500));
    --texto-invertido: light-dark(var(--gris-0),   var(--gris-0));
    --texto-acento:    light-dark(var(--acento-600), var(--acento-300));

    /* --- Bordes --------------------------------------------------------- */
    --borde:        light-dark(var(--gris-100), var(--gris-850));
    --borde-fuerte: light-dark(var(--gris-200), var(--gris-800));
    /*  Existe porque antes no había UN SOLO :focus en los formularios. Quien
        usa el teclado no sabía dónde estaba parado. */
    --borde-foco:   light-dark(var(--acento-500), var(--acento-300));

    /* --- Acento --------------------------------------------------------- */
    --acento:        light-dark(var(--acento-600), var(--acento-500));
    --acento-hover:  light-dark(var(--acento-700), var(--acento-400));
    --acento-suave:  light-dark(var(--acento-50),  #2a1710);
    --acento-borde:  light-dark(var(--acento-200), #4a2a1c);
    --sobre-acento:  var(--gris-0);

    /* --- Estados -------------------------------------------------------- */
    --exito:         light-dark(var(--verde-600), var(--verde-300));
    --exito-suave:   light-dark(var(--verde-100), #0b2a22);
    --peligro:       light-dark(var(--rojo-600),  var(--rojo-300));
    --peligro-suave: light-dark(var(--rojo-100),  #2c1119);
    --aviso:         light-dark(var(--ambar-600), var(--ambar-300));
    --aviso-suave:   light-dark(var(--ambar-100), #2c2110);
    --info:          light-dark(var(--cian-600),  var(--cian-300));
    --info-suave:    light-dark(var(--cian-100),  #0a2730);

    /*  Superficies de fila. SÓLIDAS, nunca transparentes.
        Aprendido a los golpes: Tabulator pinta su tabla de BLANCO por dentro.
        Un color de fila con transparencia se mezclaba con ese blanco y salía un
        tono sucio que no era el que decía el token. Si un fondo puede apoyarse
        sobre algo que pinta una librería, va sólido y se acabó. */
    --fila:            light-dark(var(--gris-0),   var(--gris-900));
    --fila-alt:        light-dark(var(--gris-25),  #101014);
    --fila-hover:      light-dark(var(--acento-50), #1d1512);
    --fila-nota:       light-dark(var(--ambar-100), #221a0e);
    --fila-nota-hover: light-dark(#fdeec2,          #2b2113);
    /*  La fila de algo agotado o vencido. Rojo apagado: tiene que verse desde
        lejos sin volver la lista ilegible cuando hay quince seguidas. */
    --fila-mala:       light-dark(var(--rojo-100),  #24100f);
    --fila-mala-hover: light-dark(#fcdcd8,          #2e1614);
    /*  Las barras del gráfico de la semana, salvo la de hoy (que va en
        `--acento`). Es el acento bajado de intensidad: las barras se tienen que
        ver todas para leer la forma de la semana, pero sin competir con el día
        de hoy, que es el que importa. */
    --grafico-barra:   light-dark(var(--acento-100), #4a2a1e);

    /* --- Sombras -------------------------------------------------------- */
    /*  En oscuro bajan de fuerza a propósito: una sombra negra sobre fondo
        negro no levanta nada. Ahí el que separa es el borde. */
    --sombra-1: light-dark(0 1px 2px hsl(240 6% 20% / .06),
                           0 1px 2px hsl(0 0% 0% / .4));
    --sombra-2: light-dark(0 4px 14px hsl(240 6% 20% / .10),
                           0 4px 14px hsl(0 0% 0% / .5));
    --sombra-3: light-dark(0 20px 48px hsl(240 6% 18% / .18),
                           0 20px 48px hsl(0 0% 0% / .65));
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }
/*  Sin el atributo = automático = sigue al equipo. El JavaScript que ya existe
    borra el atributo cuando el tema es "auto", y eso ahora es exactamente lo
    correcto. Los valores se quedan en inglés (light/dark) porque es lo que ese
    JavaScript escribe: cambiarlos sería romperlo por gusto.

    El tema que viene de fábrica es OSCURO — así se diseñó el panel. Quien
    prefiera claro lo cambia en Ajustes y se le guarda. */


/*  ---------------------------------------------------------------------------
    MEDIDAS

    No dependen del tema, así que van aparte.
    --------------------------------------------------------------------------- */

:root {
    /* --- Espaciado. Base 4, ocho pasos. Nada intermedio. ----------------- */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 22px;
    --e-6: 32px;
    --e-7: 48px;
    --e-8: 64px;

    /* --- Tipografía ----------------------------------------------------- */
    --fuente: var(--fuente-base);
    --fuente-mono: var(--fuente-mono-base);

    --t-xs:   0.6875rem; /* 11px — etiquetas en mayúscula, notas al pie */
    --t-sm:   0.75rem;   /* 12px — texto secundario, badges */
    --t-base: 0.8125rem; /* 13px — el cuerpo y las celdas */
    --t-md:   0.875rem;  /* 14px — títulos de tarjeta */
    --t-lg:   1rem;      /* 16px — campos (16 evita que el celular haga zoom) */
    --t-xl:   1.375rem;  /* 22px — el título de la pantalla */
    --t-2xl:  1.625rem;  /* 26px — el número grande de un KPI */

    --lh-ajustado: 1.2;
    --lh-normal:   1.45;
    --lh-suelto:   1.65;

    --peso-normal: 400;
    --peso-medio:  550;
    --peso-fuerte: 700;

    /* --- Movimiento ----------------------------------------------------- */
    /*  El movimiento acá tiene un trabajo: decir qué respondió al clic y de
        dónde salió lo que apareció. No es decoración. */
    --dur-rapida: 120ms;
    --dur-normal: 200ms;
    --dur-lenta:  320ms;

    --curva: cubic-bezier(.2, .6, .3, 1);
    --curva-salida: cubic-bezier(.16, 1, .3, 1);
    --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);

    /* --- Capas ---------------------------------------------------------- */
    /*  Un desplegable que cae DENTRO del contenido: la lista del buscador de la
        caja. Va debajo del encabezado a propósito —la barra de arriba nunca se
        tapa— pero encima de todo lo que tenga al lado. Es la capa más baja de
        las que existen, y por eso arranca en 10 y no en 50: si mañana hace falta
        meter algo entre esto y el encabezado, hay lugar. */
    --z-desplegable: 10;
    --z-header: 100;
    --z-menu:   200;
    --z-velo:   900;
    --z-modal:  1000;
    --z-toast:  2000;

    /* --- Gráficos ------------------------------------------------------- */
    /*  Los usan el gráfico de ventas del Panel y las barras de Informes.
        Van acá, con light-dark(), como todo lo demás: así se ponen oscuros
        solos y la prueba de la ferretería los alcanza. */
    --grafico-1: var(--acento-300);
    --grafico-2: light-dark(var(--verde-500), var(--verde-300));
    --grafico-3: light-dark(var(--cian-500),  var(--cian-300));
    --grafico-4: light-dark(var(--ambar-500), var(--ambar-300));
    --grafico-5: light-dark(#7c3aed, #a78bfa);
    --grafico-6: light-dark(var(--rojo-500), var(--rojo-300));
    --grafico-eje:    var(--texto-3);
    --grafico-grilla: var(--borde);
}


/*  Quien pidió menos movimiento, recibe menos movimiento.
    Se apagan las duraciones Y las animaciones de entrada: si alguien marcó esa
    opción en su equipo suele ser por mareo, no por gusto. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-rapida: 0s;
        --dur-normal: 0s;
        --dur-lenta:  0s;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;   /* !important: le gana a cualquier
                                                    animación puntual */
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}