/* ==========================================================================
   Tokens de Tebillegar (docs/DISENO.md §2, §4, §6): la ÚNICA fuente de las variables --tb-*.
   base.html la carga antes que cualquier otra hoja, en TODAS las pantallas (migradas o no). Solo define
   variables: no cambia el dibujo de nada por sí sola (las de Bootstrap, --bs-*, siguen en tebillegar.css).
   Lo exige gestion/test_accesibilidad_barra_comun.py.
   ========================================================================== */
:root {
    /* Marca */
    --tb-violeta-900: #2E1A47;
    --tb-violeta-700: #4A2D6E;
    --tb-violeta-500: #6B4A94;
    --tb-violeta-100: #ECE6F4;
    --tb-violeta-50:  #F5F3F8;
    --tb-dorado-500:  #E8A33D;
    --tb-dorado-600:  #D18E28;
    --tb-dorado-100:  #FBF0DC;

    /* Neutros */
    --tb-texto:       #241536;
    --tb-texto-suave: #625A70;
    --tb-borde:       #DDD7E6;  /* separadores y tarjetas (no cumple 3:1: no usar en controles) */
    --tb-borde-campo: #8A8199;  /* campos, selects y casillas: 3.7:1 sobre blanco */
    --tb-superficie:  #FFFFFF;

    /* Estados */
    --tb-exito:             #167B56;  /* 4.62:1 sobre --tb-exito-fondo */
    --tb-exito-fondo:       #E5F4EE;
    --tb-advertencia:       #AB4F09;  /* 4.68:1 sobre --tb-advertencia-fondo */
    --tb-advertencia-fondo: #FDEBD8;
    --tb-error:             #B42318;
    --tb-error-fondo:       #FDECEA;
    /* No está en DISENO.md: hover del botón Peligro, derivado del token de error */
    --tb-error-hover:       color-mix(in srgb, var(--tb-error) 85%, black);
    --tb-info:              #6B4A94;
    --tb-info-fondo:        #ECE6F4;

    /* Estados de una opción (Tarea A, DISENO.md §5 "Estados interactivos"): listas, selects y menús desplegables */
    --tb-opcion-hover-fondo: var(--tb-violeta-100);       /* hover y foco; con --tb-opcion-hover-texto, 12,69:1 */
    --tb-opcion-hover-texto: var(--tb-violeta-900);
    --tb-opcion-elegida-fondo: var(--tb-violeta-50);      /* la elegida (peso 600 y ✓); --tb-texto encima, 15,42:1 */
    --tb-opcion-elegida-marca: var(--tb-violeta-500);     /* el ✓: 6,29:1 (5,67:1 sobre el fondo de hover) */
    --tb-opcion-desactivada-texto: var(--tb-borde-campo); /* 3,7:1: se distingue, WCAG no lo exige a lo inactivo */
    --tb-lista-alto-maximo: calc(var(--tb-area-tactil) * 8 + 8px); /* una lista larga: 8 opciones a la vista */

    /* Tipografía */
    --tb-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Radios */
    --tb-radio-sm:    8px;   /* tooltips, chips */
    --tb-radio:       12px;  /* campos, selects, botones */
    --tb-radio-lg:    16px;  /* tarjetas */
    --tb-radio-xl:    20px;  /* modales, paneles inferiores */
    --tb-radio-pill:  999px; /* insignias, barra de avance */

    /* Sombras (tinte violeta) */
    --tb-sombra-tarjeta: 0 1px 2px rgba(46, 26, 71, .06), 0 4px 16px rgba(46, 26, 71, .06);
    --tb-sombra-menu:    0 8px 32px rgba(46, 26, 71, .16);

    /* Foco (§6) */
    --tb-anillo-claro:  0 0 0 3px rgba(107, 74, 148, .35);
    --tb-anillo-oscuro: 0 0 0 3px rgba(232, 163, 61, .6);

    /* Movimiento */
    --tb-transicion: 150ms ease-out;

    /* Controles */
    --tb-alto-control: 48px;
    --tb-area-tactil:  44px;
}