/* ==========================================================================
   gesti-tokens.css — Marca GESTI (14-oct-2026)
   Única fuente de colores, tipografía, radios y sombras. gesti-ui.css y
   gesti-login.css solo usan estas variables.
   Modo oscuro: NO implementado. Cuando se haga, alcanza con redefinir estas
   variables bajo :root[data-theme="dark"] / prefers-color-scheme.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-var.woff2') format('woff2');
}

:root {
    /* ---- Marca: violeta índigo ---- */
    --brand-50:  #F1F0FD;   /* fondo de seleccionado / activo */
    --brand-100: #E3E0FB;
    --brand-200: #C7C1F6;
    --brand-400: #8B80E8;
    --brand-500: #5B4BDB;   /* color de marca: primario, punto del logo */
    --brand-600: #4A3BC4;   /* hover del primario, links */
    --brand-700: #3C2FA3;   /* pressed, texto sobre brand-50 */
    --brand-800: #2E2480;

    /* ---- Grises con leve tinte frío ---- */
    --gray-0:   #FFFFFF;
    --gray-25:  #FAFAFC;    /* fondo general */
    --gray-50:  #F5F5F8;    /* cards secundarias, encabezado de tabla */
    --gray-100: #ECECF1;    /* hover de filas, separadores suaves */
    --gray-200: #DCDCE4;    /* bordes de inputs y tablas */
    --gray-300: #C4C4CF;    /* bordes en hover */
    --gray-400: #9A9AA8;    /* placeholders, íconos inactivos (no para texto) */
    --gray-500: #71717F;    /* texto secundario (sobre blanco) */
    --gray-600: #62626F;    /* texto secundario sobre fondos gray-50/100 (AA) */
    --gray-700: #3F3F4B;    /* labels */
    --gray-900: #18181E;    /* texto principal */

    /* ---- Estados (reservados: nunca como color de marca) ---- */
    --success: #15803D;  --success-bg: #ECFDF3;
    --warning: #B45309;  --warning-bg: #FFF7E6;
    --danger:  #B91C1C;  --danger-bg:  #FEF1F1;
    --danger-700: #991B1B;

    /* ---- Transparencias derivadas ---- */
    --overlay:     rgba(24, 24, 30, 0.40);   /* fondo detrás de modales/drawers */
    --on-brand:    #FFFFFF;                  /* texto sobre brand-500 */
    --on-brand-80: rgba(255, 255, 255, 0.85);   /* "blanco al 80%": 0.80 da 4,49:1, 0.85 pasa AA */
    --on-brand-70: rgba(255, 255, 255, 0.70);

    /* ---- Forma ---- */
    --radius-control: 6px;   /* botones, inputs, selects, chips */
    --radius-card:    10px;  /* cards, modales, drawers, popups */
    --radius-pill:    999px;
    --border:         1px solid var(--gray-200);

    /* ---- Sombras: solo modales y dropdowns ---- */
    --shadow-dropdown: 0 4px 16px rgba(24, 24, 30, 0.08), 0 1px 3px rgba(24, 24, 30, 0.06);
    --shadow-modal:    0 12px 32px rgba(24, 24, 30, 0.12), 0 2px 6px rgba(24, 24, 30, 0.06);

    /* ---- Foco de teclado (nunca eliminar) ---- */
    --focus-ring:   2px solid var(--brand-500);
    --focus-offset: 2px;

    /* ---- Controles ---- */
    --control-h:    36px;
    --control-h-sm: 32px;
    --control-h-lg: 40px;

    /* ---- Tipografía ---- */
    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-logo: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fs-12: 12px;   /* ayuda / meta */
    --fs-13: 13px;   /* encabezados de tabla */
    --fs-14: 14px;   /* base */
    --fs-16: 16px;   /* subtítulos */
    --fs-20: 20px;   /* título de página */
    --fs-24: 24px;
    --lh: 1.5;
}

/* ---- Logo (partial g_logo() en g_ui_helper.php) ---- */
.g-logo {
    display: inline-flex; align-items: baseline;
    font-family: var(--font-logo); font-weight: 800; letter-spacing: -0.03em;
    line-height: 1; white-space: nowrap; text-decoration: none;
    font-size: 20px;
}
.g-logo:hover { text-decoration: none; }
.g-logo .g-logo-g  { color: var(--gray-900); }
.g-logo .g-logo-p  { color: var(--brand-500); }
.g-logo .g-logo-ar { color: var(--gray-500); font-weight: 500; }
.g-logo.blanco .g-logo-g  { color: var(--on-brand); }
.g-logo.blanco .g-logo-p  { color: var(--brand-200); }
.g-logo.blanco .g-logo-ar { color: var(--on-brand-70); }

.g-isotipo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 22%;
    background: var(--brand-500); color: var(--on-brand);
    font-family: var(--font-logo); font-weight: 800; letter-spacing: -0.03em;
    font-size: 17px; line-height: 1; flex-shrink: 0;
}

/* ---- Punto de estado (motivo del logo) ---- */
.g-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); vertical-align: middle; margin-right: 6px; flex-shrink: 0; }
.g-dot.ok   { background: var(--success); }
.g-dot.warn { background: var(--warning); }
.g-dot.err  { background: var(--danger); }
.g-dot.brand{ background: var(--brand-500); }