/* style.css - Estilos Globales del Simulador */

body { 
    background-color: #050914; /* Tono unificado para todo el sistema */
    color: white; 
    font-family: 'Segoe UI', sans-serif; 
}

/* Componentes UI */
.card-glass { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 15px; 
}

.color-cian { 
    color: #00f2ff; 
}

/* Dashboard - Pestañas */
.btn-tab { 
    border: 1px solid rgba(0, 242, 255, 0.2); 
    transition: all 0.3s; 
    cursor: pointer; 
    color: white; 
}
.btn-tab.active { 
    background: #00f2ff; 
    color: #050a14; 
    border-color: #00f2ff; 
    box-shadow: 0 0 10px #00f2ff; 
    font-weight: 900; 
}

/* Dashboard - Tarjetas de Nivel */
.nivel-card { 
    transition: transform 0.2s; 
    cursor: pointer; 
    border: 1px solid rgba(255,255,255,0.05); 
}
.nivel-card:hover:not(.locked) { 
    transform: scale(1.02); 
    background: rgba(0, 242, 255, 0.05); 
    border-color: #00f2ff; 
}
.locked { 
    opacity: 0.3; 
    filter: grayscale(1); 
    cursor: not-allowed; 
}

/* Examen - Layout y Opciones */
.grid-layout { 
    display: grid; 
    grid-template-columns: 360px 1fr; 
    height: 100vh; 
}
.option-selected { 
    border-color: #00f2ff !important; 
    background: rgba(0, 242, 255, 0.1) !important; 
}

/* Examen - Barra de Audio */
#audio-fill { 
    transition: width 0.1s; 
    background: #00f2ff; 
    height: 100%; 
    width: 0%; 
}

/* =========================================
   Estilos Específicos para Formularios (Login/Registro)
========================================= */
input[type="file"]::file-selector-button { 
    display: none; 
}
.password-toggle { 
    cursor: pointer; 
    color: #6b7280; 
    transition: color 0.2s; 
}
.password-toggle:hover { 
    color: #06b6d4; 
}

/* =========================================
   ESCUDOS DE EMERGENCIA (Antídoto Visual)
========================================= */
/* 1. Obliga a que la pantalla del Splash Video desaparezca de inmediato */
.hidden { 
    display: none !important; 
}

/* 2. Obliga a que el mensaje de celulares desaparezca si estás en una computadora */
@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
}

/* =========================================
   Ajustes UX/UI - EXCLUSIVO PARA INDEX (Landing Page)
========================================= */
/* 2. Igualar alturas de las tarjetas de acción */
#start-demo-btn, 
a[href="registro.html"].group {
    height: 100%;
    min-height: 120px; /* Asegura un colchón visual en móviles */
}

/* =========================================
   DISEÑO DE LISTAS TUKUR
========================================= */
.select-tukur {
    appearance: none !important;
    background-color: rgba(9, 15, 29, 0.6) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: white !important;
    font-size: 14px !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Flecha Cyan personalizada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2306b6d4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.2em !important;
}

.select-tukur:focus {
    outline: none !important;
    border-color: #06b6d4 !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3) !important;
    background-color: rgba(6, 182, 212, 0.05) !important;
}

.select-tukur optgroup {
    background-color: #050a14 !important; 
    color: #06b6d4 !important; 
    font-weight: 900 !important;
}

.select-tukur option {
    background-color: #0f172a !important; 
    color: #ffffff !important; 
    font-weight: 600 !important;
}

/* Contenedor de mensaje legal (Padrinos) */
.check-padrino-box {
    background: rgba(6, 182, 212, 0.1);
    border: 2px solid rgba(6, 182, 212, 0.5);
    border-radius: 16px;
    padding: 20px;
    margin-top: 15px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   ESTILOS NUEVOS: LANDING PADRINOS Y SCROLLBAR
========================================= */

/* 1. Scrollbar global estilo oscuro/neón para todo el proyecto */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050a14; 
}
::-webkit-scrollbar-thumb {
    background: #06b6d4; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #0891b2; 
}

/* 2. Efecto cristal específico con desenfoque (Usado en paquetes de padrinos) */
.bg-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 3. Menú de navegación flotante con desenfoque */
.nav-glass {
    background-color: rgba(5, 10, 20, 0.9);
    backdrop-filter: blur(12px);
}

/* 4. Sombra de neón profunda (Para resaltar el video de Sergio y el paquete de mayor precio) */
.shadow-neon {
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.15);
}

/* Utilidad extra para Padrinos */
.backdrop-blur-xl {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* =========================================
   ESTILOS ESPECÍFICOS DEL MOTOR DE EXAMEN
========================================= */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #06b6d4; }
.latex-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.latex-container mjx-container { outline: none; }
.mjx-chtml { margin: 0 !important; }