@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');

/* ============================================
   TOKENS DE DISEÑO - LIGA DISTRITAL HUD
   ============================================ */
:root {
    /* Tema Claro */
    --bg-base:       #F1F2F6;
    --bg-sidebar:    #FFFFFF;
    --bg-card:       #FFFFFF;
    --bg-card-hover: #F8F9FC;
    --bg-input:      #F1F2F6;
    --text-primary:  #0F172A;
    --text-secondary:#64748B;
    --border-color:  #E2E8F0;

    /* Acentos Globales */
    --accent-orange: #FF6B00;
    --accent-orange-dim: rgba(255,107,0,0.12);
    --accent-green:  #10B981;
    --accent-green-dim: rgba(16,185,129,0.12);
    --accent-red:    #EF4444;
    --accent-red-dim: rgba(239,68,68,0.12);
    --accent-blue:   #3B82F6;
    --accent-blue-dim: rgba(59,130,246,0.12);
    --accent-gray-dim: rgba(100,116,139,0.12);

    /* Gender Colors */
    --color-male:    #3B82F6;
    --color-female:  #EC4899;

    --font-mono: 'JetBrains Mono', monospace;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
    --transition: 0.2s ease;
}

[data-theme="dark"] {
    --bg-base:       #000000;
    --bg-sidebar:    #0A0A0A;
    --bg-card:       #121212;
    --bg-card-hover: #1A1A1A;
    --bg-input:      #1A1A1A;
    --text-primary:  #F1F5F9;
    --text-secondary:#6B7280;
    --border-color:  #1E1E1E;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* ============================================
   RESET BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-mono);
    transition: background-color 0.3s ease, color 0.3s ease;
}

ul { list-style: none; }
a  { text-decoration: none; color: inherit; }

.hidden { display: none !important; }

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }