/* ============================================
   ORANGETUBE - THEMES & GLASSMORPHISM
   Fondo completo + Efectos de Cristal
   ============================================ */

/* Variables base por defecto (Tema Oscuro) */
:root {
    --app-bg: #0f0f0f;
    --glass-bg: #0f0f0f;
    --glass-border: transparent;
    --glass-blur: none;
    --text-primary: #ffffff;
    --text-muted: #aaaaaa;
}

/* Aplicar el fondo a TODA la pantalla */
body {
    background: var(--app-bg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-primary);
    transition: background 0.5s ease;
}

/* Hacer transparentes los paneles para que se vea el fondo */
.topbar, 
.sidebar, 
.status-section, 
.category-chips .chip {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-color: var(--glass-border) !important;
    transition: background 0.3s, backdrop-filter 0.3s;
}

/* ============================================
   PALETA DE TEMAS
   ============================================ */

/* 1. Naranja Profundo */
body[data-theme='orange'] {
    --app-bg: linear-gradient(135deg, #2a0a00, #140500);
    --glass-bg: rgba(20, 5, 0, 0.7);
    --glass-border: rgba(255, 107, 0, 0.2);
    --glass-blur: blur(16px);
    --text-muted: #ffc499;
}

/* 2. Océano Profundo (Azul) */
body[data-theme='ocean'] {
    --app-bg: linear-gradient(135deg, #001a33, #000a14);
    --glass-bg: rgba(0, 10, 20, 0.75);
    --glass-border: rgba(0, 153, 255, 0.2);
    --glass-blur: blur(16px);
    --text-muted: #99ccff;
}

/* 3. Bosque Oscuro (Verde) */
body[data-theme='forest'] {
    --app-bg: linear-gradient(135deg, #0a1f0f, #030a05);
    --glass-bg: rgba(3, 10, 5, 0.8);
    --glass-border: rgba(0, 255, 100, 0.2);
    --glass-blur: blur(16px);
    --text-muted: #99ffbb;
}

/* 4. Cyberpunk (Neón) */
body[data-theme='cyberpunk'] {
    --app-bg: linear-gradient(135deg, #1a0033, #001133);
    --glass-bg: rgba(10, 0, 20, 0.7);
    --glass-border: rgba(255, 0, 128, 0.3);
    --glass-blur: blur(20px);
    --text-muted: #ff99cc;
}

/* 5. Carmesí (Rojo) */
body[data-theme='crimson'] {
    --app-bg: linear-gradient(135deg, #330000, #140000);
    --glass-bg: rgba(20, 0, 0, 0.8);
    --glass-border: rgba(255, 0, 0, 0.2);
    --glass-blur: blur(16px);
    --text-muted: #ff9999;
}

/* ============================================
   FONDOS ANIMADOS
   ============================================ */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body[data-theme='anim-waves'] {
    --app-bg: linear-gradient(-45deg, #0f0f0f, #3d1800, #000000, #1f0b00);
    background-size: 400% 400%;
    animation: moveGradient 12s ease infinite;
    --glass-bg: rgba(10, 10, 10, 0.6);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(20px);
}

body[data-theme='anim-aurora'] {
    --app-bg: linear-gradient(-45deg, #0a001a, #002233, #0f0f0f, #15001f);
    background-size: 400% 400%;
    animation: moveGradient 15s ease infinite;
    --glass-bg: rgba(10, 10, 10, 0.6);
    --glass-blur: blur(20px);
}

/* ============================================
   IMAGEN PERSONALIZADA (Con mejora de calidad)
   ============================================ */
body[data-theme='custom'] {
    background-image: var(--custom-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    image-rendering: high-quality; /* Fuerza renderizado HD */
    
    --glass-bg: rgba(0, 0, 0, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(24px); /* Mucho desenfoque para resaltar la UI */
}

/* Filtro invisible para aumentar nitidez y color de la imagen de fondo */
body[data-theme='custom']::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    backdrop-filter: contrast(1.15) saturate(1.25);
    pointer-events: none;
}

/* ============================================
   CORRECCIÓN BOTÓN SIDEBAR (Alineación)
   ============================================ */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}
.sidebar-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Ocultar barra de desplazamiento en los modales de temas */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 16px;
    padding-bottom: 20px;
}
.theme-card {
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.theme-card:hover { transform: scale(1.05); background: rgba(255,255,255,0.1); }
.theme-card.active { border-color: #ff6b00; }
.theme-preview { width: 100%; height: 50px; border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.1); }