/* ═══════════════════════════════════════════════════════════════════════
   DIDO+ DESIGN TOKENS — Variables CSS globales (single source of truth)
   ───────────────────────────────────────────────────────────────────────
   Cargar PRIMERO en cualquier layout, antes de:
   - app.css      (base)
   - dido-pro.css (refinamiento Netflix)
   - dido-premium.css (UX premium)

   Estos tokens son la fuente única de la paleta DIDO+. Cualquier
   componente debe consumirlos vía `var(--dido-*)`. NO redeclarar.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
    /* ─── Layout shell ─────────────────────────────────────────────── */
    --dido-bg:           #05070D;
    --dido-bg-2:         #0A0E16;
    --dido-side-w:       64px;       /* sidebar fijo desktop */
    --dido-side-w-open:  64px;       /* mismo (sidebar es estático ahora) */
    --dido-top-h:        68px;

    /* ─── Brand primarios (DIDO+ DNA) ─────────────────────────────── */
    --dido-purple:       #6B2BE2;
    --dido-magenta:      #D928E5;
    --dido-purple-soft:  #8B5CF6;
    --dido-grad-brand:   linear-gradient(135deg, #6B2BE2 0%, #D928E5 100%);
    --dido-grad-brand-soft: linear-gradient(135deg, rgba(107,43,226,.18), rgba(217,40,229,.18));

    /* ─── Semánticos (uso restringido) ────────────────────────────── */
    --dido-gold:         #FFD76A;    /* premium VIP / wallet                 */
    --dido-green:        #00FF9C;    /* D-Credits / success                  */
    --dido-red:          #FF3B3B;    /* live on-air                          */

    /* ─── Texto ───────────────────────────────────────────────────── */
    --dido-text:         #EAF1FF;
    --dido-text-muted:   rgba(234,241,255,.65);
    --dido-text-dim:     rgba(234,241,255,.42);
}

/* ═══════════════════════════════════════════════════════════════════════
   Reset + body base (global, antes de app.css)
   ═══════════════════════════════════════════════════════════════════════ */
body{
    background: var(--dido-bg);
    color: var(--dido-text);
    margin: 0;
    padding: 0;
    padding-left: var(--dido-side-w);
    padding-top: var(--dido-top-h);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (max-width: 768px){
    body{ padding-left: 0; }
}

/* Ocultar el navbar legacy si existe (lo reemplaza el shell DIDO+) */
.navbar{ display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FIX GLOBAL: dropdown <option> visible en tema oscuro
   Los <option> nativos heredan del SO/navegador. En Windows con tema
   claro pueden quedar texto blanco sobre fondo blanco. !important solo
   en bg-color y color (críticos); el resto sigue cascada normal.
   ═══════════════════════════════════════════════════════════════════════ */
select{ color-scheme: dark; }
select option,
select optgroup{
    background-color: var(--dido-bg-2) !important;
    color: var(--dido-text) !important;
    padding: .5rem .75rem;
    font-weight: 500;
}
select option:checked,
select option:hover{
    background-color: rgba(217, 40, 229, .45) !important;
    color: #fff !important;
    font-weight: 700;
}
select optgroup{
    color: var(--dido-gold) !important;
    font-weight: 900;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .06em;
}