/* =========================================
   NIVELES — Estilos específicos
========================================= */

/* Canvas y wrapper */
#canvas3d { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.content-wrapper { position: relative; z-index: 1; padding-top: 120px; }

/* Navbar propia de niveles */
.nav-niveles {
    position: fixed; top: 15px; left: 50%; transform: translateX(-50%);
    width: 95%; max-width: 1400px;
    background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: 100px;
    padding: 10px 25px; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
}
.btn-back { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.btn-back:hover { color: var(--accent); }

/* Contenedor y título */
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
h1 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; text-shadow: 0 0 20px var(--accent); }

/* Cards de nivel */
.level-card {
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border); border-radius: 35px;
    margin-bottom: 25px; overflow: hidden;
}
.level-header {
    padding: 30px 40px; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: 0.3s;
}
.level-header:hover { background: rgba(255, 255, 255, 0.03); }

.units-grid { max-height: 0; overflow: hidden; transition: max-height 0.8s; padding: 0 40px; }
.units-grid.active { max-height: 20000px; padding-bottom: 50px; }

.unit-card {
    background: rgba(255, 255, 255, 0.03); border-radius: 20px; padding: 25px;
    margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.08);
}
.unit-title { color: var(--accent); font-weight: 700; margin-bottom: 15px; display: block; }

/* Grid de acciones */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.btn-section {
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
    padding: 15px 10px; border-radius: 15px; color: var(--text-primary);
    cursor: pointer; transition: 0.3s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 0.8rem; text-decoration: none;
}
.btn-section i { font-size: 1.2rem; color: var(--accent); }
.btn-section:hover { background: var(--accent); color: var(--bg-primary); transform: translateY(-3px); }
.btn-section:hover i { color: var(--bg-primary); }

/* Botón Eni */
.btn-section.eni-btn { background: rgba(255, 217, 90, 0.12); border-color: rgba(255, 217, 90, 0.3); }
.btn-section.eni-btn i { color: #ffd95a; }
.btn-section.eni-btn:hover { background: #ffd95a; color: var(--bg-primary); }
.btn-section.eni-btn:hover i { color: var(--bg-primary); }

/* Botón Workbook */
.btn-section.workbook-btn { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.3); }
.btn-section.workbook-btn i { color: #a855f7; }
.btn-section.workbook-btn:hover { background: #a855f7; color: var(--bg-primary); }
.btn-section.workbook-btn:hover i { color: var(--bg-primary); }

/* Subunidades */
.unit-header {
    padding: 15px 20px; background: rgba(56, 189, 248, 0.1); border-radius: 15px;
    margin-bottom: 10px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; transition: 0.3s;
}
.unit-header:hover { background: rgba(56, 189, 248, 0.2); }
.subunits-grid { max-height: 0; overflow: hidden; transition: max-height 0.5s; }

/* Descripción de nivel */
.level-description {
    background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 25px; margin: 20px 0;
    border-left: 4px solid var(--accent); line-height: 1.7; font-size: 0.95rem;
}
.level-description h3 { color: var(--accent); margin: 15px 0 10px 0; font-size: 1.2rem; }
.level-goal { background: rgba(56, 189, 248, 0.2); padding: 12px; border-radius: 10px; margin-top: 15px; font-weight: 600; }

/* Exámenes */
.exam-card {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(99, 102, 241, 0.15));
    border: 1px solid var(--glass-border); border-radius: 20px; padding: 20px; margin: 25px 0;
    text-align: center; backdrop-filter: blur(8px);
}
.exam-header { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: var(--accent); font-size: 1.1rem; margin-bottom: 8px; }
.exam-header i { font-size: 1.3rem; }
.exam-info { font-size: 0.95rem; opacity: 0.85; color: #e2e8f0; }

/* 🟢 MID-TERM — LIMA ELÉCTRICA (alto resalte) */
.exam-card.midterm {
    --mt: 163,230,53;
    --mt-solid: #a3e635;
    background: linear-gradient(135deg, rgba(var(--mt), 0.22), rgba(var(--mt), 0.10));
    border: 1px solid var(--mt-solid);
}
.exam-card.midterm .exam-header { color: var(--mt-solid); }
.exam-card.midterm .exam-info { color: rgba(var(--mt), 0.85); }
.exam-card.midterm:hover {
    box-shadow: 0 8px 30px rgba(var(--mt), 0.35), 0 0 50px rgba(var(--mt), 0.15);
    transform: translateY(-3px);
}

/* Modo claro: lima más oscuro para mantener contraste */
[data-theme="light"] .exam-card.midterm {
    --mt: 101,163,13;
    --mt-solid: #65a30d;
    background: linear-gradient(135deg, rgba(var(--mt), 0.15), rgba(var(--mt), 0.06));
}
[data-theme="light"] .exam-card.midterm .exam-header { color: var(--mt-solid); }
[data-theme="light"] .exam-card.midterm .exam-info { color: rgba(var(--mt), 0.9); }

.exam-card.final { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.15)); border-color: #f87171; }
.exam-card.final .exam-header { color: #f87171; }

/* Responsive */
@media (max-width: 640px) {
    .level-header { padding: 20px; }
    .units-grid { padding: 0 20px; }
    h1 { font-size: 1.8rem; }
}
/* ===== BADGES DE ESTADO ===== */
.level-status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-top: 6px;
}

/* 🟢 ACTIVO COMPLETO — Verde esmeralda sólido */
.status-active {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #020617;
    border: 1px solid #34d399;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* 🟡 ACTIVO EN DESARROLLO — Dorado brillante con pulso */
.status-progress {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #020617;
    border: 1px solid #fbbf24;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
    animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.8); }
}

/* ⚪ PRÓXIMAMENTE — Gris neutro discreto */
.status-soon {
    background: rgba(248, 250, 252, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

/* ===== MENSAJES DE ESTADO ===== */
.status-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}
.status-message i {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.status-message-progress {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    color: var(--gold);
}
.status-message-soon {
    background: rgba(248,250,252,0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

/* ===== BOTÓN SADI (antes Eni) ===== */
.sadi-btn {
    background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
    color: white !important;
}
.sadi-btn i {
    color: white !important;
}

/* ===== ENLACES DESHABILITADOS (soon) ===== */
a[href*="en-construccion"] {
    cursor: not-allowed;
}
a[href*="en-construccion"]:hover {
    transform: none !important;
}

/* ===== Readings ===== */
.btn-section.reading-btn {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}
.btn-section.reading-btn i {
    color: #10b981;
}
.btn-section.reading-btn:hover {
    background: #10b981;
    color: var(--bg-primary);
}
.btn-section.reading-btn:hover i {
    color: var(--bg-primary);
}

/* =========================================
   COLORES POR NIVEL
   ========================================= */
.level-a1 { --level-color: #f59e0b; --level-rgb: 245,158,11; }
.level-a2 { --level-color: #38bdf8; --level-rgb: 56,189,248; }
.level-b1 { --level-color: #a855f7; --level-rgb: 168,85,247; }
.level-b2 { --level-color: #ef4444; --level-rgb: 239,68,68; }
.level-c1 { --level-color: #10b981; --level-rgb: 16,185,129; }
.level-c2 { --level-color: #fb923c; --level-rgb: 251,146,60; }

/* =========================================
   ESTILOS DE TARJETA POR COLOR
   ========================================= */
.level-card {
    border-left: 4px solid var(--level-color, var(--accent));
    background: linear-gradient(135deg, 
        rgba(var(--level-rgb, 56,189,248), 0.08) 0%, 
        rgba(var(--level-rgb, 56,189,248), 0.02) 100%);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.level-card:hover {
    box-shadow: 0 8px 30px rgba(var(--level-rgb, 56,189,248), 0.25);
    transform: translateY(-4px);
    border-left-width: 6px;
}

/* Badge del nivel con color */
.level-card .level-header > div > div > div:first-child {
    color: var(--level-color, var(--accent)) !important;
}

/* Status badge con color del nivel */
.level-card .level-status-badge {
    background: rgba(var(--level-rgb, 56,189,248), 0.15);
    border: 1px solid rgba(var(--level-rgb, 56,189,248), 0.4);
    color: var(--level-color, var(--accent));
}

/* Descripción del nivel */
.level-card .level-description {
    border-left-color: var(--level-color, var(--accent));
}

.level-card .level-description h3 {
    color: var(--level-color, var(--accent));
}

.level-card .level-goal {
    background: rgba(var(--level-rgb, 56,189,248), 0.1);
    border-left: 3px solid var(--level-color, var(--accent));
}

/* Icono de chevron con color */
.level-card .level-header > i {
    color: var(--level-color, var(--accent));
}

/* =========================================
   MODO CLARO - AJUSTES
   ========================================= */
[data-theme="light"] .level-card {
    background: linear-gradient(135deg, 
        rgba(var(--level-rgb, 56,189,248), 0.12) 0%, 
        rgba(var(--level-rgb, 56,189,248), 0.04) 100%);
}

[data-theme="light"] .level-card:hover {
    box-shadow: 0 8px 30px rgba(var(--level-rgb, 56,189,248), 0.2);
}

[data-theme="light"] .level-card .level-status-badge {
    background: rgba(var(--level-rgb, 56,189,248), 0.2);
}

[data-theme="light"] .level-card .level-goal {
    background: rgba(var(--level-rgb, 56,189,248), 0.15);
}

/* =========================================
   EFECTOS ESPECIALES POR NIVEL
   ========================================= */

/* A1 - Star Genesis: brillo dorado suave */
.level-a1:hover {
    box-shadow: 0 8px 35px rgba(245,158,11,0.35),
                0 0 60px rgba(245,158,11,0.15);
}

/* A2 - Star Discovery: brillo cyan (ya lo tienen) */
.level-a2:hover {
    box-shadow: 0 8px 35px rgba(56,189,248,0.35),
                0 0 60px rgba(56,189,248,0.15);
}

/* B1 - Star Voyager: brillo púrpura intenso */
.level-b1:hover {
    box-shadow: 0 8px 35px rgba(168,85,247,0.35),
                0 0 60px rgba(168,85,247,0.15);
}

/* B2 - Star Commander: brillo rojo energético */
.level-b2:hover {
    box-shadow: 0 8px 35px rgba(239,68,68,0.35),
                0 0 60px rgba(239,68,68,0.15);
}

/* C1 - Galactic Master: brillo verde esmeralda */
.level-c1:hover {
    box-shadow: 0 8px 35px rgba(16,185,129,0.35),
                0 0 60px rgba(16,185,129,0.15);
}

/* C2 - Celestial Legend: brillo naranja/bronce */
.level-c2:hover {
    box-shadow: 0 8px 35px rgba(251,146,60,0.35),
                0 0 60px rgba(251,146,60,0.15);
}

/* =========================================
   RESPONSIVE ADICIONAL
   ========================================= */
@media (max-width: 768px) {
    .level-card {
        border-left-width: 3px;
    }
    .level-card:hover {
        border-left-width: 4px;
    }
}