/* =====================================================================
   VetCarnet · Design tokens
   Fuente unica de color, tipografia, espaciado y elevacion.
   Toda la UI se construye con estas variables: no hardcodear colores.
   ===================================================================== */

:root {
    /* --- Marca --- */
    --marca-50:  #eefbf7;
    --marca-100: #d4f5ec;
    --marca-200: #a9ebd9;
    --marca-300: #74dbc2;
    --marca-400: #3cc3a5;
    --marca-500: #17a88b;
    --marca-600: #0d8872;
    --marca-700: #0d6c5c;
    --marca-800: #0f564b;
    --marca-900: #0f473f;

    /* --- Neutros --- */
    --gris-0:   #ffffff;
    --gris-25:  #fbfcfd;
    --gris-50:  #f6f8fa;
    --gris-100: #eef1f5;
    --gris-200: #e2e7ee;
    --gris-300: #cbd3de;
    --gris-400: #98a4b6;
    --gris-500: #6b7889;
    --gris-600: #4d5869;
    --gris-700: #39424f;
    --gris-800: #232b36;
    --gris-900: #151b23;
    --gris-950: #0d1117;

    /* --- Semanticos --- */
    --exito:   #15803d;
    --exito-bg: #dcfce7;
    --alerta:  #b45309;
    --alerta-bg: #fef3c7;
    --peligro: #b91c1c;
    --peligro-bg: #fee2e2;
    --info:    #1d4ed8;
    --info-bg: #dbeafe;
    --neutro-bg: var(--gris-100);

    /* --- Roles de superficie (tema claro) --- */
    --fondo:            var(--gris-50);
    --superficie:       var(--gris-0);
    --superficie-alt:   var(--gris-25);
    --superficie-hover: var(--gris-50);
    --superficie-activa: var(--marca-50);
    --borde:            var(--gris-200);
    --borde-fuerte:     var(--gris-300);
    --texto:            var(--gris-900);
    --texto-suave:      var(--gris-600);
    --texto-tenue:      var(--gris-500);
    --texto-inverso:    var(--gris-0);
    --primario:         var(--marca-600);
    --primario-hover:   var(--marca-700);
    --primario-suave:   var(--marca-50);
    --primario-texto:   var(--marca-700);
    --anillo:           color-mix(in srgb, var(--marca-500) 40%, transparent);

    /* --- Barra lateral --- */
    --nav-fondo:        var(--gris-900);
    --nav-texto:        #b9c2ce;
    --nav-texto-activo: var(--gris-0);
    --nav-activo:       color-mix(in srgb, var(--marca-500) 22%, transparent);
    --nav-hover:        rgba(255, 255, 255, 0.06);
    --nav-borde:        rgba(255, 255, 255, 0.08);

    /* --- Tipografia --- */
    --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
    --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --txt-xs:  0.75rem;
    --txt-sm:  0.8125rem;
    --txt-md:  0.875rem;
    --txt-base: 0.9375rem;
    --txt-lg:  1.0625rem;
    --txt-xl:  1.25rem;
    --txt-2xl: 1.5rem;
    --txt-3xl: 1.875rem;

    --peso-normal: 400;
    --peso-medio:  500;
    --peso-semi:   600;
    --peso-bold:   700;

    /* --- Espaciado --- */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.25rem;
    --e-6: 1.5rem;
    --e-8: 2rem;
    --e-10: 2.5rem;
    --e-12: 3rem;

    /* --- Radios --- */
    --r-sm: 6px;
    --r-md: 9px;
    --r-lg: 13px;
    --r-xl: 18px;
    --r-full: 999px;

    /* --- Elevacion --- */
    --sombra-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sombra-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --sombra-md: 0 4px 10px -2px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
    --sombra-lg: 0 14px 28px -6px rgba(16, 24, 40, 0.12), 0 6px 12px -6px rgba(16, 24, 40, 0.07);
    --sombra-xl: 0 26px 50px -12px rgba(16, 24, 40, 0.22);

    /* --- Layout --- */
    --ancho-nav: 250px;
    --ancho-nav-mini: 68px;
    --alto-cabecera: 62px;
    --ancho-max: 1440px;

    /* --- Movimiento --- */
    --trans-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --trans: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --trans-lenta: 280ms cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Paleta de graficos ---------------------------------------
       Orden fijo, nunca ciclado. Los pasos estan verificados para
       vision con deficiencia de color sobre superficie clara y oscura.
       El teal de marca NO se usa para datos: es color de interfaz.
       Los graficos de una sola serie usan siempre --serie-1.
       ---------------------------------------------------------------- */
    --serie-1: #2a78d6;  /* azul     */
    --serie-2: #eb6834;  /* naranja  */
    --serie-3: #1baf7a;  /* aqua     */
    --serie-4: #eda100;  /* amarillo */
    --serie-5: #e87ba4;  /* magenta  */
    --serie-6: #008300;  /* verde    */
    --serie-7: #4a3aa7;  /* violeta  */
    --serie-8: #e34948;  /* rojo     */

    /* Superficie sobre la que se dibujan los graficos (la usa el anillo de 2px) */
    --grafico-superficie: var(--superficie);
}

/* =====================================================================
   Tema oscuro: se redefinen solo los roles, nunca la escala de marca.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fondo:            var(--gris-950);
        --superficie:       #171d26;
        --superficie-alt:   #1c232d;
        --superficie-hover: #202834;
        --superficie-activa: color-mix(in srgb, var(--marca-500) 16%, transparent);
        --borde:            #2a333f;
        --borde-fuerte:     #3a4552;
        --texto:            #e8edf3;
        --texto-suave:      #a5b1c0;
        --texto-tenue:      #7d8b9c;
        --primario:         var(--marca-400);
        --primario-hover:   var(--marca-300);
        --primario-suave:   color-mix(in srgb, var(--marca-500) 15%, transparent);
        --primario-texto:   var(--marca-300);

        --exito-bg:   color-mix(in srgb, #22c55e 18%, transparent);
        --exito:      #4ade80;
        --alerta-bg:  color-mix(in srgb, #f59e0b 18%, transparent);
        --alerta:     #fbbf24;
        --peligro-bg: color-mix(in srgb, #ef4444 18%, transparent);
        --peligro:    #f87171;
        --info-bg:    color-mix(in srgb, #3b82f6 18%, transparent);
        --info:       #60a5fa;
        --neutro-bg:  #232b36;

        --nav-fondo:  #10151c;
        --nav-borde:  rgba(255, 255, 255, 0.06);

        /* Los mismos ocho matices, re-escalonados para la superficie oscura */
        --serie-1: #3987e5;
        --serie-2: #d95926;
        --serie-3: #199e70;
        --serie-4: #c98500;
        --serie-5: #d55181;
        --serie-6: #008300;
        --serie-7: #9085e9;
        --serie-8: #e66767;

        --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.45);
        --sombra-lg: 0 16px 32px rgba(0, 0, 0, 0.5);
        --sombra-xl: 0 28px 56px rgba(0, 0, 0, 0.6);
    }
}

:root[data-tema="oscuro"] {
    --fondo:            var(--gris-950);
    --superficie:       #171d26;
    --superficie-alt:   #1c232d;
    --superficie-hover: #202834;
    --superficie-activa: color-mix(in srgb, var(--marca-500) 16%, transparent);
    --borde:            #2a333f;
    --borde-fuerte:     #3a4552;
    --texto:            #e8edf3;
    --texto-suave:      #a5b1c0;
    --texto-tenue:      #7d8b9c;
    --primario:         var(--marca-400);
    --primario-hover:   var(--marca-300);
    --primario-suave:   color-mix(in srgb, var(--marca-500) 15%, transparent);
    --primario-texto:   var(--marca-300);

    --exito-bg:   color-mix(in srgb, #22c55e 18%, transparent);
    --exito:      #4ade80;
    --alerta-bg:  color-mix(in srgb, #f59e0b 18%, transparent);
    --alerta:     #fbbf24;
    --peligro-bg: color-mix(in srgb, #ef4444 18%, transparent);
    --peligro:    #f87171;
    --info-bg:    color-mix(in srgb, #3b82f6 18%, transparent);
    --info:       #60a5fa;
    --neutro-bg:  #232b36;

    --nav-fondo:  #10151c;
    --nav-borde:  rgba(255, 255, 255, 0.06);

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
    --serie-6: #008300;
    --serie-7: #9085e9;
    --serie-8: #e66767;

    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 16px 32px rgba(0, 0, 0, 0.5);
    --sombra-xl: 0 28px 56px rgba(0, 0, 0, 0.6);
}