/* --- 1. IMPORTAR FUENTE POPPINS --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- 2. VARIABLES DE COLOR (GOOGLE MATERIAL DARK B&W) --- */
:root { 
    --bg: #000000;            /* Fondo absoluto */
    --surface: #111111;       /* Fondo de las tarjetas/formularios */
    --text: #ffffff;          /* Texto principal */
    --text-muted: #9aa0a6;    /* Texto secundario (Gris estilo Google) */
    --border: #3c4043;        /* Bordes estilo Google Dark Mode */
    --hover: #202124;         /* Color de hover suave */
}

/* --- 3. ESTILOS GENERALES --- */
body { 
    background: var(--bg); 
    color: var(--text); 
    font-family: 'Poppins', sans-serif; /* Aplicamos Poppins a toda la web */
    margin: 0; 
    padding: 20px; 
    text-align: center; 
    -webkit-font-smoothing: antialiased; /* Suaviza la fuente */
}

.mac-dark-container { 
    background: var(--surface); 
    border: 1px solid var(--border); 
    padding: 40px; 
    border-radius: 16px; /* Bordes de tarjeta Google */
    max-width: 600px; 
    margin: 0 auto; 
    text-align: left; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra suave de elevación */
}

/* --- 4. GRID DE ASIGNATURAS (ESTILO MATERIAL CARDS) --- */
.assignmentgridmainmenuexam { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 16px; /* Separación entre tarjetas */
    margin-top: 40px; 
}

.menu-categorymainmenuexam { 
    background-color: var(--surface); 
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 30px 15px; 
    cursor: pointer; 
    text-align: center; 
    transition: all 0.2s ease-in-out; /* Animación Google fluida */
}

.menu-categorymainmenuexam:hover { 
    background-color: var(--hover); 
    transform: translateY(-3px); /* Se levanta al pasar el ratón */
    border-color: var(--text); /* Borde blanco puro al destacar */
}

.menu-categorymainmenuexam.completed { 
    opacity: 0.3; 
    pointer-events: none; 
    filter: grayscale(100%);
}

.menu-categorymainmenuexam i { 
    font-size: 32px; 
    display: block; 
    margin-bottom: 12px; 
    color: var(--text); 
}

.menu-categorymainmenuexam button { 
    background: none; 
    border: none; 
    color: var(--text); 
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px; 
    pointer-events: none; 
}

/* --- 5. BOTONES E INPUTS --- */
.mac-btn { 
    width: 100%; 
    background: var(--text); 
    color: var(--bg); 
    border: none; 
    padding: 14px 24px; 
    border-radius: 24px; /* Botones píldora estilo Google */
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 15px;
    cursor: pointer; 
    margin-top: 10px; 
    transition: opacity 0.2s, transform 0.1s;
}

.mac-btn:hover:not(:disabled) { 
    opacity: 0.9;
    transform: scale(0.99); /* Efecto de pulsación */
}

.mac-btn:disabled { 
    background: var(--border); 
    color: var(--text-muted); 
    cursor: not-allowed; 
}

.mac-input { 
    width: 100%; 
    background: transparent; 
    border: 1px solid var(--border); 
    color: var(--text); 
    font-family: 'Poppins', sans-serif;
    padding: 14px 16px; 
    margin-bottom: 20px; 
    border-radius: 8px; /* Inputs modernos */
    box-sizing: border-box; 
    transition: border-color 0.2s;
}

.mac-input:focus {
    outline: none;
    border-color: var(--text); /* Highlight en blanco puro al escribir */
}

/* --- 6. EXAMEN Y TEMPORIZADOR --- */
#exam-questions { 
    max-width: 800px; 
    margin: 0 auto; 
    text-align: left; 
}

#exam-timer { 
    background-color: var(--surface);
    color: var(--text) !important; 
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 16px !important;
    border: 1px solid var(--border); 
    border-radius: 20px; /* Estilo píldora */
    padding: 8px 20px; 
    display: inline-block; 
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- 7. SWEETALERT2 B&W GOOGLE MATERIAL THEME --- */
div:where(.swal2-container) {
    font-family: 'Poppins', sans-serif !important; /* Forzamos Poppins en las alertas */
}
div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important; /* Bordes suaves */
    box-shadow: 0 24px 48px rgba(0,0,0,0.6) !important;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    color: #ffffff !important;
    font-weight: 600 !important;
}
div:where(.swal2-container) div:where(.swal2-html-container) {
    color: var(--text-muted) !important;
}
/* Botón de Confirmar (Blanco con texto negro) */
div:where(.swal2-container) button:where(.swal2-confirm) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 20px !important; /* Botón píldora */
    font-weight: 600 !important;
    padding: 10px 24px !important;
}
/* Botón de Cancelar (Gris oscuro con texto blanco) */
div:where(.swal2-container) button:where(.swal2-cancel) {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
}
/* Iconos (Warning, Info, Success, Error) pasados a Blanco */
div:where(.swal2-container) .swal2-warning { border-color: #ffffff !important; color: #ffffff !important; }
div:where(.swal2-container) .swal2-info { border-color: #ffffff !important; color: #ffffff !important; }
div:where(.swal2-container) .swal2-success { border-color: #ffffff !important; color: #ffffff !important; }
div:where(.swal2-container) .swal2-success [class^=swal2-success-line] { background-color: #ffffff !important; }
div:where(.swal2-container) .swal2-success .swal2-success-ring { border-color: rgba(255,255,255,0.2) !important; }
div:where(.swal2-container) .swal2-error { border-color: #ffffff !important; color: #ffffff !important; }
div:where(.swal2-container) .swal2-error [class^=swal2-error-line] { background-color: #ffffff !important; }
/* Input de contraseña para el Hack */
div:where(.swal2-container) input:where(.swal2-input) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
div:where(.swal2-container) input:where(.swal2-input):focus {
    border-color: #ffffff !important;
    box-shadow: none !important;
}