/* =============================================================================
 * Paquete común ASX · tokens de ESTRUCTURA
 *
 * Aquí vive lo que hace que las cuatro aplicaciones se sientan la misma casa:
 * el alto de la barra, la retícula, los espaciados, los radios y el apilado.
 * Ninguna aplicación los redefine.
 *
 * Lo que SÍ define cada aplicación son tres variables de marca, y solo tres:
 *
 *     :root {
 *       --asx-marca:            #14357E;   color de acento de la aplicación
 *       --asx-marca-contraste:  #ffffff;   texto legible SOBRE ese color
 *       --asx-marca-suave:      #E8EEFB;   fondo tenue del mismo tono
 *     }
 *
 * La barra es BLANCA en las cuatro (y oscura con el tema oscuro). La marca no
 * pinta el fondo: se usa en el avatar, en el botón destacado, en el foco y en
 * lo que está seleccionado. Así las cuatro se ven de la misma familia y cada
 * una conserva su color donde se nota.
 *
 * Si una aplicación necesita tocar algo de este archivo, es señal de que el
 * armazón se quedó corto: se arregla aquí, para las cuatro, no allá.
 *
 * LO QUE LA APLICACIÓN DECIDE VA EN `:where(:root)`, que tiene especificidad
 * cero y por lo tanto SIEMPRE pierde contra el `:root` de la aplicación, dé
 * igual en qué orden se carguen las hojas. Hace falta: en Control esta hoja
 * entra después de `asx.css` y, sin esto, el azul marino de aquí le ganaba a
 * su propio azul. Lo que el paquete manda se queda en `:root` normal.
 *
 * POR QUÉ DOS PREFIJOS. Todo lo estructural va en `--asxb-` y solo las tres
 * variables de marca usan `--asx-`. No es capricho: Control ya tenía sus
 * propios tokens con prefijo `--asx-`, y su `--asx-linea` era un color de borde
 * mientras que aquí era una altura de línea. La barra heredaba el color y se
 * descuadraba. Con `--asxb-` reservado para el paquete, una aplicación no puede
 * pisar la estructura ni queriendo.
 * ========================================================================== */

:root {
    /* --- Barra superior --------------------------------------------------- */
    --asxb-barra-alto: 56px;
    --asxb-barra-lados: clamp(12px, 2vw, 24px);

    /* --- Menú lateral ----------------------------------------------------- */
    /* Contraído queda el ancho del icono más su aire: se sigue pudiendo pulsar
       y se lee de un vistazo cuál es la sección activa. */
    --asxb-menu-ancho: 255px;
    --asxb-menu-mini: 68px;
    --asxb-menu-z: 1020;
    --asxb-barra-hueco: 8px;
    --asxb-barra-z: 1030;

    /* --- Espaciado (escala de 4) ----------------------------------------- */
    --asxb-esp-1: 4px;
    --asxb-esp-2: 8px;
    --asxb-esp-3: 12px;
    --asxb-esp-4: 16px;
    --asxb-esp-5: 24px;
    --asxb-esp-6: 32px;

    /* --- Radios ----------------------------------------------------------- */
    --asxb-radio-1: 6px;
    --asxb-radio-2: 10px;
    --asxb-radio-3: 14px;
    --asxb-radio-redondo: 999px;

    /* --- Tipografía ------------------------------------------------------- */
    --asxb-fuente: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --asxb-texto-xs: 12px;
    --asxb-texto-sm: 13.5px;
    --asxb-texto-base: 15px;
    --asxb-texto-lg: 17px;
    --asxb-alto-linea: 1.5;

    /* --- Superficies neutras (tema claro) --------------------------------- */
    --asxb-fondo: #ffffff;
    --asxb-fondo-tenue: #f6f7f9;
    --asxb-texto: #16233f;
    --asxb-texto-tenue: #5b6473;
    --asxb-borde: #e4e7ec;
    --asxb-sombra: 0 6px 18px rgba(31, 45, 61, 0.07);
    --asxb-sombra-alta: 0 12px 32px rgba(31, 45, 61, 0.16);

    /* --- Estados ---------------------------------------------------------- */
    --asxb-exito: #00ab55;
    --asxb-aviso: #e2a03f;
    --asxb-error: #e7515a;

    /* --- Zona táctil mínima (CT-04) --------------------------------------- */
    --asxb-toque: 44px;

}

/* --- Lo que decide la aplicación -------------------------------------------
 *
 * Especificidad cero a propósito (ver la cabecera): son valores por defecto
 * para que la barra se vea entera aunque una aplicación no declare nada, y
 * cualquier `:root` de la aplicación les gana sin importar el orden de carga.
 */
:where(:root) {
    /* Las tres de marca. */
    --asx-marca: #14357e;
    --asx-marca-contraste: #ffffff;
    --asx-marca-suave: #e8eefb;

    /* El contenido de la barra no va de borde a borde: se centra y tiene tope.
       Es EL ÚNICO `--asxb-*` que una aplicación redefine, y debe hacerlo para
       que la barra caiga sobre su propia columna de contenido:

         · el portal mide 1480 y se queda con este valor;
         · Gimnasio Mental lo apunta a `--gm-ancho` (1180);
         · Control y Membership son armazones con menú lateral fijo y contenido
           hasta el borde, así que lo ponen en `none`.

       Una barra más ancha que el contenido se lee bien; una más estrecha se lee
       como si estuviera suelta. */
    --asxb-ancho: 1480px;
}

/* Tema oscuro: solo cambian las superficies neutras. La marca la sigue
   decidiendo la aplicación, y la estructura no se mueve. */
:root[data-theme="dark"],
html.dark :root,
body.dark {
    --asxb-fondo: #0e1726;
    --asxb-fondo-tenue: #1b2e4b;
    --asxb-texto: #e0e6ed;
    --asxb-texto-tenue: #888ea8;
    --asxb-borde: #191e3a;
    --asxb-sombra: 0 6px 18px rgba(0, 0, 0, 0.35);
    --asxb-sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --asxb-transicion: none;
    }
}

:root {
    --asxb-transicion: 140ms ease;
}