/* 1. OBSCURO */
:root {
    --bg-principal: #0d0e12;
    --bg-tarjeta: #161820;
    --texto: #f0f2f5;
    --texto-secundario: #a0aec0;
    --borde: #2d3748;
    --color-completado: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(96, 165, 250, 0.2) 30%, rgba(30, 64, 175, 0.1) 60%, rgba(29, 78, 216, 0.45) 85%, rgba(17, 24, 39, 0.85) 100%);
    --color-activo: #3182ce;
}

/* 2. NOCHE PROFUNDA (OLED) */
body.deepdark {  
    --bg-principal: #000000;
    --bg-tarjeta: #0b0c10;
    --texto: #e5e9f0;
    --texto-secundario: #8892b0;
    --borde: #1f2335;
    --color-completado: linear-gradient(175deg, rgba(255, 255, 255, 0.45) 0%, rgba(102, 252, 241, 0.12) 25%, rgba(0, 180, 219, 0.05) 60%, rgba(0, 131, 176, 0.35) 85%, rgba(5, 25, 35, 0.8) 100%);
    --color-activo: #583775; /* Violeta oscuro apagado */
}

/* 3. RETRO CYBERPUNK */
body.cyberpunk {
    --bg-principal: #0a0512;
    --bg-tarjeta: #140926;
    --texto: #00ffff;
    --texto-secundario: #9d4edd;
    --borde: #ff007f;
    --color-completado: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 0, 127, 0.25) 30%, rgba(121, 40, 202, 0.08) 65%, rgba(121, 40, 202, 0.4) 88%, rgba(25, 5, 45, 0.85) 100%);
    /*--color-activo: #00ffff;  */
/*        --color-activo: #e0aaff; /* Un lavanda/magenta pastel brillante */
    --color-activo: #b39ddb; /* Lavanda opaco / mate */


}

body.semiclaro {  
    --bg-principal: #CBB479;
    --bg-tarjeta: #EADCB9;  
/*--bg-tarjeta: rgba(253, 251, 247, 0.35); /* Un crema ultra claro con 35% de opacidad */
    
    --texto: #2b2214;
    --texto-secundario: #70624d;
    --borde: #DCD0A1; /* Ajustado para que combine con la nueva tarjeta 
    --color-completado: linear-gradient(185deg, rgba(40, 115, 75, 0.85) 0%, rgba(56, 161, 105, 0.6) 60%, rgba(210, 195, 150, 0.4) 100%); */
    
--color-completado: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.60) 0%, 
    rgba(255, 255, 255, 0.25) 8%, 
    rgba(71, 85, 105, 0.12) 22%, 
    rgba(59, 73, 93, 0.03) 45%, 
    rgba(47, 55, 69, 0.08) 68%, 
    rgba(30, 41, 59, 0.25) 85%, 
    rgba(15, 23, 42, 0.65) 95%, 
    rgba(5, 8, 15, 0.85) 100%
);

    
    --color-activo: #1a365d;
}

body.atenuado {
    --bg-principal: #A2A7AD; /* Gris pizarra oscuro mate (no brilla, descansa la vista) */
    --bg-tarjeta: #363b45;   /* Gris ligeramente más claro para elevar los contenedores */
    --texto: #e2e8f0;        /* Blanco hueso/crema suave (evita el contraste agresivo del blanco puro) */
    --texto-secundario: #94a3b8; /* Gris medio para textos secundarios */
    --borde: #475569;        /* Bordes sutiles que delimitan sin saturar la pantalla */
    --color-completado: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(71, 85, 105, 0.25) 20%, rgba(59, 73, 93, 0.05) 50%, rgba(40, 50, 65, 0.35) 75%, rgba(20, 26, 35, 0.75) 92%, rgba(10, 15, 20, 0.9) 100%);
/*    --color-activo: #38bdf8;  */
    --color-activo: #64748b; /* Azul acero mate */

}

/* 6. ALTO CONTRASTE */
body.highcontrast {
    --bg-principal: #000000;
    --bg-tarjeta: #000000;
    --texto: #FFFF00;  
    --texto-secundario: #ffffff;
    --borde: #ffffff;
    --color-completado: linear-gradient(155deg, #D1D1D1, #000000);
    --color-activo: #C1C10A;
}

/* 7. CAFE CON LECHE */
body.cafe_con_leche { 

    /* Chocolate amargo profundo (Fondo base que descansa la vista) */
    --bg-principal: #1a120b; 
    
    /* Chocolate oscuro (Un tono más claro para elevar contenedores y tarjetas) */
    --bg-tarjeta: #2c1e11;   
    
    /* Crema/Leche evaporada (Evita el brillo agresivo del blanco puro) */
    --texto: #f5ebe0;        
    
    /* Café con leche claro (Para textos secundarios y descripciones) */
    --texto-secundario: #d4a373; 
    
    /* Café tostado sutil (Para delimitar secciones sin ensuciar la pantalla) */
    --borde: #4a3728;        
    
    /* Degradado de moca a chocolate (Elegante para estados completados o éxitos) */
    /*--color-completado: linear-gradient(135deg, #6f4e37, #3c2a21); */
    --color-completado: linear-gradient(135deg, #1f110b 0%, #3d1c06 35%, #7a431d 70%, #d48248 100%);

    
    /*--color-activo: #2b1810; */
    --color-activo: #543325;

}

/* 8. PLATA CARD 
body.plata_card {
    --bg-principal: #e2e8f0; 
    --bg-tarjeta: #ffffff;   
    --texto: #1e293b;        
    --texto-secundario: #64748b; 
    --borde: #cbd5e1;        
    --color-completado: linear-gradient(135deg, #f1f5f9, #e2e8f0); 
    --color-activo: #ff5000; 
} */

body.plata_card {
    --bg-principal: #94a3b8; 
    --bg-tarjeta: #cbd5e1;   
    --texto: #0f172a;        
    --texto-secundario: #475569; 
    --borde: #cbd5e1;        
    /*--color-completado: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(203, 213, 225, 0.4) 50%, rgba(148, 163, 184, 0.8) 100%);  */
--color-completado: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.40) 10%, 
    rgba(241, 245, 249, 0.15) 30%, 
    rgba(203, 213, 225, 0.02) 55%, 
    rgba(148, 163, 184, 0.18) 80%, 
    rgba(100, 116, 139, 0.45) 94%, 
    rgba(51, 65, 85, 0.75) 100%
);
    
    --color-activo:#a04828;   /* #b85a38;  */
}

/* 9. MILITAR */
body.militar {
            /* Paleta Táctica y Militar */
            --bg-principal: #1b201a;       /* Verde oliva ultra oscuro (Fondo general mate) */
            --bg-tarjeta: #283026;         /* Verde militar medio (Contenedores elevados) */
            --verde-olivo: #4b5340;        /* Verde base de guarnición */
            --verde-camu: #3a4132;         /* Tono complementario tierra oscuro */
            --texto-principal: #f4f6f0;    /* Blanco hueso de alta visibilidad táctica */
            --texto-secundario: #a2a89b;   /* Gris verdoso apagado para datos secundarios */
            --borde-tactico: #5c6650;      /* Bordes limpios que simulan blindaje o equipo */
            
            /* Colores de Acentuación y Rango */
            --oro-insignia: #d4af37;       /* Oro brillante para rangos, estrellas y medallas */
            --alerta-rojo: #991b1b;        /* Rojo apagado para advertencias o zonas críticas */
/*            --degradado-militar: linear-gradient(135deg, #3a4132, #242920); */

            --color-completado:  linear-gradient(135deg, #161a14 0%, rgba(58, 65, 50, 0.9) 35%, rgba(76, 187, 23, 0.45) 75%, rgba(132, 234, 45, 0.75) 100%);
    
    --color-activo:#7cbd53;       
    
    /*--color-activo:#4c6d32;        */
  /*  --color-activo:#3b5323;        */
    
            
        }

/* ==========================================
   RESET Y ESTILOS GENERALES
   ========================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', system-ui, sans-serif; 
}
body { 
    background-color: var(--bg-principal); 
    color: var(--texto); 
    transition: background 0.3s, color 0.3s; 
    padding-top: 90px; 
}
main { 
    max-width: 1100px; 
    margin: 30px auto; 
    padding: 0 20px; 
}

/* ==========================================
   BARRA SUPERIOR (HEADER)
   ========================================== */
.navbar-fija {
    position: fixed;
    top: 0; left: 0; right: 0; height: 75px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px; background-color: var(--bg-tarjeta);
    border-bottom: 1px solid var(--borde); z-index: 1000;
}
.logo h2 { font-weight: 600; letter-spacing: 0.5px; font-size: 1.4rem; }
.user-actions { display: flex; align-items: center; gap: 15px; }
.user-name { font-weight: 500; font-size: 1rem; margin-right: 10px; }
.theme-select { background: var(--bg-principal); color: var(--texto); border: 1px solid var(--borde); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }

/* BOTONES GLOBALES */
.btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: 0.2s; }
.btn-pass { background-color: transparent; color: var(--texto-secundario); border: 1px solid var(--borde); }
.btn-pass:hover { color: var(--texto); background-color: var(--borde); }
.btn-logout { background-color: #e53e3e; color: white; }
.btn-logout:hover { background-color: #c53030; }

/* ==========================================
   PÁGINA DE INICIO (ENTRADA.PHP)
   ========================================== */
.titulo-seccion { margin-bottom: 25px; font-weight: 400; font-size: 1.5rem; }
.roadmap { display: flex; flex-direction: column; gap: 20px; }
.level-row { display: flex; align-items: center; background: var(--bg-tarjeta); padding: 20px; border-radius: 12px; border: 1px solid var(--borde); gap: 20px; transition: 0.3s; }
.level-info { width: 130px; flex-shrink: 0; }
/* .level-title { font-weight: 600; font-size: 1.1rem; } */

/* --- TÍTULO DE LOS NIVELES MÁS PEQUEÑO Y ESTILIZADO --- */
.level-title {
    font-size: 0.95rem !important; /* Letra más pequeña (el original tenía 1.2rem) */
    font-weight: 600;              /* Seminegrita para que mantenga buena legibilidad */
    text-transform: uppercase;     /* Opcional: En mayúsculas se ve muy ordenado */
    letter-spacing: 0.5px;         /* Un pequeño espacio entre letras para darle estilo */
    color: var(--texto);
}

.level-status { font-size: 0.8rem; color: var(--texto-secundario); margin-top: 4px; }
.exercises-grid { display: flex; gap: 12px; flex-grow: 1; justify-content: space-between; }

/* TARJETAS DE EJERCICIO */
.exercise-card {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-weight: bold; font-size: 0.95rem; text-decoration: none;
    transition: all 0.25s ease; position: relative;
}
.completado { background: var(--color-completado); color: white; box-shadow: 0 4px 12px rgba(255, 62, 108, 0.15); }
.completado:hover { transform: translateY(-3px); filter: brightness(1.1); }

.activo { background: var(--color-activo); color: white; animation: pulso 2s infinite; }
.activo:hover { transform: scale(1.08); }
.bloqueado { background: var(--bg-principal); color: var(--texto-secundario); border: 1px solid var(--borde); opacity: 0.35; pointer-events: none; }

.exam-card { border-radius: 50%; font-size: 1.2rem; }
.exam-card.desbloqueado { background: linear-gradient(135deg, #bc4e9c, #f12711); color: white; }

@keyframes pulso {
    0% { box-shadow: 0 0 0 0 rgba(49, 130, 206, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(49, 130, 206, 0); }
    100% { box-shadow: 0 0 0 0 rgba(49, 130, 206, 0); }
}

/* ==========================================
   PÁGINAS INDIVIDUALES / FORMULARIOS (CAMBIAR_PASSWORD.PHP Y EJERCICIO.PHP)
   ========================================== */
.container-ejercicio { max-width: 800px; margin: 40px auto; padding: 30px; background: var(--bg-tarjeta); border: 1px solid var(--borde); border-radius: 12px; }
.btn-regresar { display: inline-block; margin-bottom: 20px; color: var(--color-activo); text-decoration: none; font-size: 0.9rem; }

.form-container { max-width: 480px; margin: 50px auto; background-color: var(--bg-tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 35px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
.form-container h2 { font-weight: 500; margin-bottom: 10px; font-size: 1.6rem; letter-spacing: 0.5px; }
.form-container p.subtitulo { color: var(--texto-secundario); font-size: 0.9rem; margin-bottom: 25px; }
.form-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input { padding: 12px; background-color: var(--bg-principal); border: 1px solid var(--borde); border-radius: 8px; color: var(--texto); font-size: 1rem; transition: border-color 0.2s; }
.form-group input:focus { outline: none; border-color: var(--color-activo); }
.form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; }
.btn-submit { background-color: var(--color-activo); color: white; padding: 12px 24px; font-weight: 600; }
.btn-submit:hover { filter: brightness(1.1); }
.link-volver { color: var(--texto-secundario); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.link-volver:hover { color: var(--texto); }

.alert-box { padding: 12px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 20px; font-weight: 500; }
.msg-error { background-color: rgba(229, 62, 62, 0.15); color: #fc8181; border: 1px solid rgba(229, 62, 62, 0.3); }
.msg-exito { background-color: rgba(72, 187, 120, 0.15); color: #68d391; border: 1px solid rgba(72, 187, 120, 0.3); }

/* ==========================================
   PIE DE PÁGINA (FOOTER)
   ========================================== */
.footer-portal { margin-top: 60px; padding: 20px; text-align: center; background-color: var(--bg-tarjeta); border-top: 1px solid var(--borde); font-size: 0.85rem; color: var(--texto-secundario); }
.footer-portal a { color: var(--color-activo); text-decoration: none; margin-left: 10px; }
.footer-portal a:hover { text-decoration: underline; }

/* NUEVOS EFECTOS */

/* --- ANIMACIÓN DE PULSO BRILLANTE --- */
@keyframes pulsoActivo {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(56, 189, 248, 0.4);
        transform: scale(1.04); /* Se agranda un 4% de forma sutil */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
        transform: scale(1);
    }
}

/* --- CLASE PARA EL EJERCICIO ACTIVO --- */
.exercise-card.activo {
    animation: pulsoActivo 2s infinite ease-in-out;
    border-color: var(--color-activo) !important;
    color: var(--color-activo) !important;
    font-weight: 900;
    position: relative;
    z-index: 10; /* Asegura que el brillo se vea por encima de las demás tarjetas */
}

/* Efecto opcional: Cuando el alumno pasa el cursor sobre el ejercicio activo */
.exercise-card.activo:hover {
    background-color: rgba(56, 189, 248, 0.1) !important;
    transform: scale(1.08) !important;
    transition: all 0.2s ease;
}

/* mas efectos */

/* --- EFECTO DE SALTO PRONUNCIADO PARA LOS EJERCICIOS COMPLETADOS --- */
.exercise-card.completado {
    background: linear-gradient(135deg, #f97316, #ea580c); /* Tu degradado naranja actual */
    color: white;
    border-color: transparent;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; /* Transición con efecto "resorte" */
}

.exercise-card.completado:hover {
    /* El salto: se mueve 8 píxeles hacia arriba y se agranda un 10% */
    transform: translateY(-8px) scale(1.1); 
    
    /* Sombra profunda: simula que el cuadrito está flotando más alto */
    box-shadow: 0 12px 20px rgba(234, 88, 12, 0.4); 
    
    cursor: pointer;
}

/* ANIMACION CON CONFETTI ************************** */

/* --- CONFIGURACIÓN BASE DEL BOTÓN EXAMEN --- */
.exam-card {
    position: relative;
    overflow: visible !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* El trofeo se agranda sutilmente y da un pequeño giro de alegría */
.exam-card.desbloqueado:hover {
    transform: scale(1.15) rotate(5deg);
    cursor: pointer;
}

/* --- DETALLES DE CELEBRACIÓN SUTIL (Serpentinas minimalistas) --- */
.exam-card.desbloqueado::before,
.exam-card.desbloqueado::after {
    content: "✨"; /* Usamos un carácter nativo limpio en lugar de texturas pesadas */
    position: absolute;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
}

/* Posición inicial de las partículas detrás del trofeo */
.exam-card.desbloqueado::before { top: 10px; left: 10px; color: #eab308; } /* Destello dorado */
.exam-card.desbloqueado::after { top: 10px; right: 10px; color: #38bdf8; } /* Destello celeste */

/* --- ACTIVACIÓN DE LA MINI-EXPLOSIÓN AL PASAR EL MOUSE (HOVER) --- */
.exam-card.desbloqueado:hover::before {
    animation: estallidoIzquierda 0.6s forwards ease-out;
}

.exam-card.desbloqueado:hover::after {
    animation: estallidoDerecha 0.6s forwards ease-out;
}

/* --- ANIMACIONES MICRO-INTERACTIVAS --- */
@keyframes estallidoIzquierda {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    50% {
        opacity: 1; /* Aparece a mitad de camino */
    }
    100% {
        /* Sale disparado sutilmente hacia arriba a la izquierda y se desvanece */
        transform: translate(-25px, -25px) scale(1.2) rotate(-15deg);
        opacity: 0;
    }
}

@keyframes estallidoDerecha {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        /* Sale disparado hacia arriba a la derecha y se desvanece */
        transform: translate(25px, -25px) scale(1.2) rotate(15deg);
        opacity: 0;
    }
}