/* ========================================
   VARIABLES GLOBALES Y RESET
   ======================================== */

:root {
    /* Colores principales */
    --bg-primary: #0a0c12;
    --bg-secondary: #14161f;
    --bg-card: #1e2130;
    --bg-modal: #1a1e2f;
    --bg-input: #0e1120;
    
    /* Colores de acento */
    --accent: #5f7aff;
    --accent-hover: #2d325a;
    --accent-dark: #4f5a9e;
    
    /* Estados de reproducción */
    --playing-toggle: #4caf50;
    --playing-normal: #ffea00;
    
    /* Colores de texto */
    --text-primary: #eef2ff;
    --text-secondary: #8a8faa;
    --text-muted: #b9c3ff;
    
    /* Colores de estado */
    --error-bg: #8b2c3d;
    --error-dark: #a12a3e;
    --success-bg: #2a6b4e;
    
    /* Layout */
    --container-max: 1600px;
    --border-radius-card: 0.8rem;
    --border-radius-modal: 1rem;
    --border-radius-btn: 2rem;
    
    /* Grid */
    --grid-min-width: 130px;
    --grid-max-width: 150px;
    --grid-gap: 0.8rem;
    
    /* Transiciones */
    --transition-fast: 0.05s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-index */
    --z-modal: 1000;
    --z-toast: 1100;
    --z-context-menu: 2000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    background: linear-gradient(145deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    min-height: 100vh;
    padding: 0.8rem;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.3rem;
}

/* Utilidades */
.hidden {
    display: none;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #151a2a;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-dark);
    border-radius: 10px;
}