/* ==========================================
   COMPONENTS.CSS - Tarjetas, Menús y CTA Élite
   ========================================== */

/* 1. Header y Barra de XP */
.welcome-container { 
    padding: 40px; text-align: center; 
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); 
    border-bottom: 1px solid #1e293b; box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}
.xp-container { 
    margin-top: 20px; width: 100%; max-width: 350px; margin-inline: auto; 
    background: var(--glass); padding: 20px; border-radius: 16px; 
    border: 1px solid rgba(72, 225, 217, 0.1); 
}
.progress-bar-bg { background: #020617; height: 14px; border-radius: 10px; overflow: hidden; margin: 12px 0; border: 1px solid #1e293b; }
.progress-fill { background: linear-gradient(90deg, var(--cian), var(--purple)); height: 100%; width: 0%; transition: 1s; box-shadow: 0 0 15px var(--cian); }

/* 2. Grid del Menú Principal */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.card { 
    background: linear-gradient(145deg, #161616, #0a0a0a); 
    border: 1px solid #222; padding: 40px 30px; border-radius: 20px; 
    text-align: center; cursor: pointer; transition: 0.4s; 
}
.card:hover { border-color: var(--purple); transform: translateY(-8px); box-shadow: 0 10px 20px rgba(182, 95, 225, 0.15); }

/* Tarjetas Especiales */
.card-simulacro { border: 2px solid var(--cian); background: rgba(72, 225, 217, 0.05); margin-bottom: 25px; }
.card-simulacro:hover { box-shadow: 0 0 25px rgba(72, 225, 217, 0.3); }
.card-fundador { border: 2px solid gold !important; position: relative; overflow: hidden; grid-column: 1 / -1; margin-bottom: 10px; background: linear-gradient(145deg, #1a1a00, #000) !important; }
.card-fundador h2, .card-fundador p.fundador-subtitle { color: gold; }
.badge-diario { position: absolute; top: 10px; right: -30px; background: gold; color: black; padding: 5px 40px; font-size: 0.7rem; font-weight: bold; transform: rotate(45deg); }

/* Acordeón de Paquetes (NUEVO) */
.paquete-contenedor { margin-bottom: 10px; width: 100%; grid-column: 1 / -1; }
.paquete-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 15px 25px !important; border: 1px solid #333 !important; }
.paquete-contenido { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 15px; background: rgba(255,255,255,0.02); border-radius: 0 0 15px 15px; margin-top: -5px; }
.sub-card { padding: 15px !important; background: rgba(72, 225, 217, 0.05) !important; border: 1px dashed rgba(72, 225, 217, 0.3) !important; text-align: center; }
.flecha-icon { color: var(--cian); font-size: 0.8rem; transition: 0.3s; }
.open .flecha-icon { transform: rotate(180deg); }

/* 3. Pomodoro */
.enfoque-container { text-align: center; margin: 20px auto; max-width: 400px; background: var(--glass); padding: 15px; border-radius: 15px; border: 1px solid #222; }
.timer-display { color: var(--cian); font-size: 1.5rem; margin: 0; font-weight: bold; }

/* 4. Radar y Ranking (RADAR OPTIMIZADO A 300px) */
.radar-container { max-width: 300px !important; margin: 20px auto; padding: 0; }
.recomendaciones-box { margin-top: 20px; padding: 15px; background: var(--glass); border-radius: 15px; border-left: 4px solid gold; font-size: 0.9rem; }
.leaderboard-card { background: linear-gradient(180deg, #111, #050505); border: 1px solid #222; padding: 30px; border-radius: 20px; margin-top: 50px; text-align: center; }
.lista-ranking { list-style: none; padding: 0; }
.lista-ranking li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #222; }
.rank-item.gold { color: gold; font-weight: bold; font-size: 1.1rem; }

/* 5. Botones Básicos */
.btn-volver { background: none; color: white; border: 1px solid #444; padding: 10px 20px; margin-bottom: 25px; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.btn-volver:hover { border-color: var(--cian); color: var(--cian); }
.btn-pomodoro { background: var(--cian); color: black; border: none; padding: 8px 15px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-pomodoro:hover { background: white; box-shadow: 0 0 15px var(--cian); }
.btn-logout { background: transparent; color: #ff4444; border: 1px solid #ff4444; padding: 5px 12px; border-radius: 6px; cursor: pointer; margin-top: 15px; font-weight: bold; transition: 0.3s; }
.btn-logout:hover { background: #ff4444; color: white; }

/* ==========================================
   6. EL BOTÓN ÉLITE (LAVA & NEON IMPONENTE)
   ========================================== */
.btn-premium-pagar {
    width: 100%;
    padding: 22px !important; 
    font-size: 1.4rem !important; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(270deg, #48E1D9, #B65FE1, #48E1D9);
    background-size: 400% 400%;
    animation: lavaFlow 3s ease infinite, pulseGlow 1.5s infinite; 
    box-shadow: 0 0 30px rgba(72, 225, 217, 0.6);
    border: none; 
    border-radius: 12px; 
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-premium-pagar:hover {
    transform: scale(1.02);
    letter-spacing: 3px;
    box-shadow: 0 0 45px rgba(0, 251, 255, 0.9);
}

@keyframes lavaFlow {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(72, 225, 217, 0.4); }
    50% { box-shadow: 0 0 40px rgba(0, 251, 255, 0.8); }
}