/* -----------------------------------------------------------------------------
RUTA            : wwwroot/css/gaia/brand.css
Qué hace        : Define los tokens visuales SSoT de marca GAIA VIP y utilidades de logo.
Especial        : Centraliza colores, fondos, textos, bordes, radios, sombras,
                  botones, menú y marcos para evitar paletas paralelas.
ENTRADA         : Variables CSS usadas por layout, páginas y componentes visuales.
SALIDA          : Sistema visual común basado en Maintenance: fondo oscuro premium,
                  borde cian/azul, acentos oro y verde GAIA.
Última modifi.  : 2026-05-14
----------------------------------------------------------------------------- */

:root {
    /* =====================================================================
       Marca base
       ===================================================================== */
    --gaia-brand-bg-deep: #030a17;
    --gaia-brand-bg-panel: #071426;
    --gaia-brand-bg-panel-soft: #0a1a30;
    --gaia-brand-bg-panel-strong: #051121;

    /* Superficies premium homologadas: menos efecto glass, más cuerpo visual. */
    --gaia-surface-1: linear-gradient(180deg, rgba(6, 18, 34, .98) 0%, rgba(3, 10, 23, .99) 100%);
    --gaia-surface-2: linear-gradient(180deg, rgba(8, 26, 47, .98) 0%, rgba(4, 13, 27, .99) 100%);
    --gaia-surface-panel: linear-gradient(145deg, rgba(7, 21, 39, .98) 0%, rgba(3, 10, 23, .99) 100%);
    --gaia-surface-elevated: linear-gradient(180deg, rgba(10, 31, 55, .98) 0%, rgba(5, 15, 30, .99) 100%);
    --gaia-surface-legend: linear-gradient(180deg, rgba(6, 18, 34, .99) 0%, rgba(3, 10, 23, .99) 100%);
    --gaia-surface-muted: rgba(8, 22, 40, .94);

    --gaia-brand-cyan: #22dfff;
    --gaia-brand-cyan-soft: rgba(34, 223, 255, .15);
    --gaia-brand-cyan-hover: #8eefff;

    --gaia-brand-blue: #1b78ff;
    --gaia-brand-blue-soft: rgba(27, 120, 255, .18);

    --gaia-brand-green: #42c643;
    --gaia-brand-green-dark: #0c7f28;
    --gaia-brand-green-soft: rgba(66, 198, 67, .14);

    --gaia-brand-gold: #ffd15a;
    --gaia-brand-gold-soft: rgba(255, 209, 90, .18);
    --gaia-brand-gold-deep: #b47a19;

    --gaia-brand-text: #f7fbff;
    --gaia-brand-text-soft: #e8f1fb;
    --gaia-brand-text-muted: #c4d1e2;
    --gaia-brand-text-disabled: #788596;

    --gaia-brand-border: rgba(0, 204, 255, .58);
    --gaia-brand-border-soft: rgba(0, 180, 230, .32);
    --gaia-brand-border-muted: rgba(255, 255, 255, .10);

    --gaia-brand-radius-sm: 10px;
    --gaia-brand-radius-md: 14px;
    --gaia-brand-radius-lg: 18px;
    --gaia-brand-radius-xl: 28px;
    --gaia-brand-radius-pill: 999px;

    --gaia-brand-shadow-cyan: 0 0 0 1px rgba(34, 223, 255, .16), 0 0 24px rgba(0, 183, 255, .18);
    --gaia-brand-shadow-cyan-strong: 0 0 0 1px rgba(34, 223, 255, .24), 0 0 32px rgba(0, 183, 255, .28);
    --gaia-brand-shadow-panel: 0 18px 36px rgba(0, 0, 0, .28);

    /* =====================================================================
       Fondos compartidos
       ===================================================================== */
    --gaia-bg-app:
        radial-gradient(circle at 76% 18%, rgba(0, 180, 255, .10) 0%, rgba(0, 180, 255, 0) 30%),
        radial-gradient(circle at 18% 78%, rgba(36, 208, 255, .07) 0%, rgba(36, 208, 255, 0) 30%),
        linear-gradient(135deg, #020714 0%, #071426 48%, #020713 100%);
    --gaia-bg-sidebar: linear-gradient(180deg, rgba(3, 10, 23, .98) 0%, rgba(5, 17, 33, .98) 100%);
    --gaia-bg-topbar: linear-gradient(90deg, rgba(5, 17, 33, .98) 0%, rgba(7, 20, 38, .96) 100%);
    --gaia-bg-surface: var(--gaia-surface-1);
    --gaia-bg-surface-soft: var(--gaia-surface-muted);
    --gaia-bg-frame: var(--gaia-surface-panel);

    /* =====================================================================
       Menú lateral: normal / hover / active / disabled
       ===================================================================== */
    --gaia-menu-normal-bg: rgba(255, 255, 255, .025);
    --gaia-menu-normal-border: rgba(255, 255, 255, .09);
    --gaia-menu-normal-text: #cbd6e4;

    --gaia-menu-hover-bg: rgba(34, 223, 255, .08);
    --gaia-menu-hover-border: rgba(34, 223, 255, .55);
    --gaia-menu-hover-text: #ffffff;

    --gaia-menu-active-bg: linear-gradient(180deg, rgba(9, 31, 54, .98) 0%, rgba(5, 17, 33, .96) 100%);
    --gaia-menu-active-border: rgba(34, 223, 255, .82);
    --gaia-menu-active-text: #ffffff;
    --gaia-menu-active-shadow: 0 0 0 1px rgba(34, 223, 255, .12), 0 0 28px rgba(34, 223, 255, .18);

    --gaia-menu-disabled-bg: rgba(255, 255, 255, .015);
    --gaia-menu-disabled-border: rgba(255, 255, 255, .06);
    --gaia-menu-disabled-text: #7a8795;

    /* =====================================================================
       Botones / chips / cards
       ===================================================================== */
    --gaia-control-bg: linear-gradient(180deg, rgba(9, 31, 54, .92) 0%, rgba(5, 17, 33, .90) 100%);
    --gaia-control-border: rgba(34, 223, 255, .42);
    --gaia-control-text: var(--gaia-brand-text-soft);
    --gaia-control-hover-bg: rgba(34, 223, 255, .10);
    --gaia-control-hover-border: rgba(34, 223, 255, .72);
    --gaia-control-hover-text: #ffffff;

    --gaia-card-border: var(--gaia-brand-border-soft);
    --gaia-card-bg: var(--gaia-surface-panel);
    --gaia-card-shadow: inset 0 0 0 1px rgba(34, 223, 255, .035), var(--gaia-brand-shadow-panel);
    --gaia-card-shadow-strong: inset 0 0 0 1px rgba(34, 223, 255, .05), 0 18px 42px rgba(0, 0, 0, .42);

    /* =====================================================================
       Compatibilidad con tokens antiguos usados por CSS existente
       ===================================================================== */
    --bg-shell: var(--gaia-bg-app);
    --bg-sidebar: var(--gaia-bg-sidebar);
    --bg-topbar: var(--gaia-bg-topbar);
    --bg-surface: var(--gaia-bg-surface);
    --bg-surface-soft: var(--gaia-bg-surface-soft);

    --text-main: var(--gaia-brand-text);
    --text-muted: var(--gaia-brand-text-muted);
    --border-subtle: var(--gaia-brand-border-muted);

    --accent-primary: var(--gaia-brand-cyan);
    --accent-primary-strong: var(--gaia-brand-green);
    --accent-warning: var(--gaia-brand-gold);

    --bs-primary: var(--gaia-brand-cyan);
    --bs-warning: var(--gaia-brand-gold);
}

.gaia-brand-logo-stacked {
    display: block;
    width: min(100%, 260px);
    height: auto;
    object-fit: contain;
}

.gaia-brand-globe-only {
    display: block;
    width: min(100%, 112px);
    height: auto;
    object-fit: contain;
}

.gaia-brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: .28em;
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: .95;
}

.gaia-brand-wordmark-gaia {
    color: var(--gaia-brand-green);
    text-shadow: 0 0 16px rgba(66, 198, 67, .18);
}

.gaia-brand-wordmark-vip {
    color: var(--gaia-brand-gold);
    text-shadow: 0 0 18px rgba(255, 209, 90, .20);
}