/* 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);
}