/**
 * ARCHIVO DE ESTILOS UNIFICADO MODIFICADO - PORTAL INCONEXO
 * Estética Corporativa: Paleta Slate, Gris y Tipografía Rubik Moderna.
 * Arquitectura: Nombres 100% en Español y Modular.
 */

:root { 
    /* Nueva Paleta de Colores Corporativa */
    --azul-pizarra: #53728f; 
    --gris-hierro: #454849; 
    --carbon: #53585b; 
    --acero-fresco: #7e95a7; 
    --negro-reactor: #22303e; 
    
    /* Variables funcionales mapeadas para mantener compatibilidad */
    --oro: var(--acero-fresco); /* Reemplazamos el tono dorado antiguo por el acero fresco */
    --fondo-oscuro: var(--negro-reactor); 
    --borde: rgba(126, 149, 167, 0.3); 
    --fondo-tarjeta: rgba(83, 88, 91, 0.2); 
    --fondo-tarjeta-olimpica: rgba(83, 114, 143, 0.15);
    
    /* Colores adicionales para mejorar legibilidad y contraste */
    --texto-claro: #f4f6f8;
    --texto-mutado: #94a3b8;
    
    /* Estados de Alerta (Ajustados para la nueva paleta oscura) */
    --exito: #2ecc71;
    --error: #e74c3c;
    --advertencia: #f1c40f;
}

/* ==========================================================================
   1. Ajustes Base y Lienzo Global
   ========================================================================== */
body { 
    margin: 0; 
    padding: 0;
    background: var(--fondo-oscuro); 
    color: var(--texto-claro); 
    font-family: 'Rubik', sans-serif; 
    overflow-x: hidden; 
}

.fondo-lujo { 
    position: fixed; 
    inset: 0; 
    background: radial-gradient(circle at 50% -20%, var(--carbon) 0%, var(--negro-reactor) 90%); 
    z-index: -1; 
}

/* ==========================================================================
   2. Estructura y Maquetación Común
   ========================================================================== */
.encabezado-principal { 
    padding: 30px 20px 15px; 
    text-align: center; 
}

.simbolo { 
    color: var(--azul-pizarra); 
    font-size: 1.5rem; 
    letter-spacing: 4px; 
    margin-bottom: 5px; 
}

h1 { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 700;
    font-size: 1.5rem; 
    letter-spacing: 2px; 
    margin: 0; 
    color: #fff; 
}

.subtitulo { 
    font-size: 0.75rem; 
    color: var(--acero-fresco); 
    letter-spacing: 2px; 
    margin-top: 5px; 
    font-weight: 500;
    opacity: 0.9; 
}

.texto-actualizacion { 
    font-size: 0.6rem; 
    color: var(--texto-mutado); 
    letter-spacing: 1px; 
    margin-top: 10px; 
    font-weight: 600; 
    text-transform: uppercase; 
}

.contenedor-contenido { 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* ==========================================================================
   3. Componente: Aviso Principal (Banner Homologado)
   ========================================================================== */
.aviso-principal { 
    max-width: 600px; 
    margin: 20px auto 10px; 
    padding: 15px; 
    background: linear-gradient(135deg, rgba(83, 114, 143, 0.15) 0%, rgba(34, 48, 62, 0.7) 100%); 
    border: 1px solid var(--azul-pizarra); 
    border-radius: 6px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); 
    text-align: center; 
}

.aviso-principal .etiqueta { 
    font-size: 0.65rem; 
    color: var(--acero-fresco); 
    letter-spacing: 1.5px; 
    font-weight: 600; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
}

.aviso-principal .titulo { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 600;
    font-size: 1.15rem; 
    color: #fff; 
    margin: 5px 0; 
    letter-spacing: 0.5px; 
    text-transform: uppercase; 
}

.aviso-principal .meta { 
    font-size: 0.8rem; 
    color: #cbd5e1; 
}

.aviso-principal .meta span { 
    color: var(--acero-fresco); 
    font-weight: 600; 
}

/* ==========================================================================
   4. Componente: Rutina de Carga Masónica Global
   ========================================================================== */
.rutina-de-carga { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 40vh; 
    text-align: center; 
    padding: 0 20px; 
}

.emblema-giratorio { 
    font-size: 2.5rem; 
    color: var(--azul-pizarra); 
    animation: rotarPulso 2s infinite ease-in-out; 
    margin-bottom: 20px; 
}

.texto-carga { 
    font-family: 'Rubik', sans-serif; 
    font-size: 0.85rem; 
    color: var(--acero-fresco); 
    letter-spacing: 1.5px; 
    line-height: 1.6; 
    max-width: 500px; 
    text-transform: uppercase; 
}

@keyframes rotarPulso { 
    0% { transform: rotate(0deg) scale(1); opacity: 0.5; } 
    50% { transform: rotate(180deg) scale(1.05); opacity: 1; } 
    100% { transform: rotate(360deg) scale(1); opacity: 0.5; } 
}

/* ==========================================================================
   5. Componente: Sistema de Pestañas y Secciones (Diseño Responsivo Híbrido)
   ========================================================================== */
.pestanas-navegacion { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    margin: 25px 0; 
    border-bottom: 1px solid var(--borde);
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    padding: 0 10px; 
}

.pestanas-navegacion::-webkit-scrollbar {
    display: none;
}

.item-pestana { 
    background: none; 
    border: none; 
    color: var(--texto-mutado); 
    padding: 12px 8px; 
    font-family: 'Rubik', sans-serif; 
    font-weight: 500;
    font-size: 0.8rem; 
    letter-spacing: 0.5px; 
    cursor: pointer; 
    transition: 0.3s; 
    flex-shrink: 0; 
    white-space: nowrap; 
}

.item-pestana:hover { 
    color: #fff; 
}

.item-pestana.activa { 
    color: var(--azul-pizarra); 
    border-bottom: 2px solid var(--azul-pizarra); 
}

.vista-seccion { 
    display: none; 
}

.vista-seccion.activa { 
    display: block; 
    animation: aparicionSuave 0.5s ease; 
}

@media (max-width: 600px) {
    .pestanas-navegacion {
        justify-content: flex-start; 
    }
}

/* ==========================================================================
   6. Componente: Módulo Miniolimpiadas (Podio y Clasificación)
   ========================================================================== */
.bloque-disciplina { 
    margin-bottom: 70px; 
}

.titulo-disciplina { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 600;
    text-align: center; 
    color: var(--azul-pizarra); 
    font-size: 1.2rem; 
    margin-bottom: 30px; 
    letter-spacing: 2px; 
    border-bottom: 1px double var(--borde); 
    padding-bottom: 12px; 
}

.contenedor-podio { 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    gap: 10px; 
    max-width: 800px; 
    margin: 0 auto 30px; 
}

.tarjeta-podio { 
    flex: 1; 
    min-width: 0; 
    background: var(--fondo-tarjeta-olimpica); 
    border: 1px solid var(--borde); 
    border-radius: 6px; 
    text-align: center; 
    padding: 20px 5px; 
}

.tarjeta-podio.oro { 
    height: 165px; 
    border-color: var(--azul-pizarra); 
    background: rgba(83, 114, 143, 0.25); 
    transform: translateY(-8px); 
}

.tarjeta-podio.plata { 
    height: 135px; 
    border-color: var(--acero-fresco); 
    background: rgba(126, 149, 167, 0.15); 
}

.tarjeta-podio.bronce { 
    height: 115px; 
    border-color: var(--carbon); 
    background: rgba(83, 88, 91, 0.15); 
}

.etiqueta-podio { 
    font-size: 0.6rem; 
    letter-spacing: 0.5px; 
    font-weight: 600; 
    margin-bottom: 5px; 
    color: var(--texto-mutado); 
}

.tarjeta-podio.oro .etiqueta-podio { 
    color: var(--acero-fresco); 
}

.puntaje-podio { 
    font-family: 'Rubik', sans-serif; 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: #fff; 
}

.nombre-podio { 
    font-size: 0.7rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    margin-top: 10px; 
    line-height: 1.2; 
    letter-spacing: 0.5px; 
}

.lista-ranking { 
    max-width: 500px; 
    margin: 0 auto; 
}

.item-lista-ranking { 
    display: flex; 
    align-items: center; 
    padding: 12px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    font-size: 0.8rem; 
}

.lista-historial { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.tarjeta-historial { 
    background: rgba(255,255,255,0.01); 
    border: 1px solid var(--borde); 
    border-radius: 6px; 
    margin-bottom: 15px; 
    overflow: hidden; 
}

.cabecera-historial { 
    background: rgba(83, 114, 143, 0.15); 
    padding: 8px 15px; 
    font-size: 0.75rem; 
    color: var(--acero-fresco); 
    border-bottom: 1px solid var(--borde); 
    font-weight: 600; 
    letter-spacing: 1px; 
}

.tarjeta-historial ul { 
    list-style: none; 
    padding: 12px; 
    margin: 0; 
}

.tarjeta-historial li { 
    display: flex; 
    justify-content: space-between; 
    padding: 6px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.02); 
    font-size: 0.8rem; 
}

.tarjeta-historial li:last-child { 
    border-bottom: none; 
}

/* ==========================================================================
   7. Componente: Módulo Aprendices (Calendario y Biblioteca Drive)
   ========================================================================== */
.tarjeta-evento { 
    background: var(--fondo-tarjeta); 
    border: 1px solid var(--borde); 
    border-radius: 6px; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    text-align: left; 
}

.fecha-evento { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 600;
    font-size: 0.95rem; 
    color: var(--acero-fresco); 
}

.tema-evento { 
    font-size: 1.05rem; 
    color: #fff; 
    margin: 0; 
}

/* Árbol Arborescente de Documentos */
.nodo-carpeta { 
    text-align: left; 
    margin: 8px 0; 
}

.cabecera-carpeta { 
    background: rgba(83, 114, 143, 0.1); 
    border: 1px solid var(--borde); 
    padding: 12px; 
    border-radius: 6px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-weight: 600; 
    font-size: 0.9rem; 
}

.cabecera-carpeta:hover { 
    border-color: var(--azul-pizarra); 
}

.contenido-carpeta { 
    display: none; 
    padding-left: 15px; 
    border-left: 1px dashed var(--borde); 
    margin-top: 5px; 
}

.contenido-carpeta.abierto { 
    display: block; 
    animation: aparicionSuave 0.3s ease; 
}

.enlace-archivo { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 10px 12px; 
    margin: 5px 0; 
    background: rgba(255,255,255,0.01); 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 6px; 
    color: var(--texto-claro); 
    text-decoration: none; 
    font-size: 0.85rem; 
    transition: 0.2s; 
}

.enlace-archivo:hover { 
    background: rgba(83, 114, 143, 0.15); 
    border-color: var(--azul-pizarra); 
    color: #fff; 
}

.icono-pdf { 
    color: #ff4a4a; 
    font-weight: 700; 
    font-size: 0.75rem; 
    border: 1px solid #ff4a4a; 
    padding: 1px 4px; 
    border-radius: 3px; 
}

/* ==========================================================================
   8. Componente: Sistema de Alertas Técnico (Manual de Estilos)
   ========================================================================== */
.alerta-mensaje { 
    padding: 12px 15px; 
    border-radius: 6px; 
    font-size: 0.85rem; 
    margin: 10px 0; 
    line-height: 1.4; 
}

.alerta-exito { 
    background: rgba(46, 204, 113, 0.1); 
    border: 1px solid var(--exito); 
    color: #cfebd9; 
}

.alerta-error { 
    background: rgba(231, 76, 60, 0.1); 
    border: 1px solid var(--error); 
    color: #f9d6d2; 
}

.alerta-advertencia { 
    background: rgba(241, 196, 15, 0.1); 
    border: 1px solid var(--advertencia); 
    color: #fef5d1; 
}

/* ==========================================================================
   9. Botones Nativos y Retorno
   ========================================================================== */
.area-retorno { 
    margin-top: 20px; 
    text-align: center; 
    padding-bottom: 40px; 
}

.enlace-retorno, .boton-estandar { 
    display: inline-block; 
    padding: 10px 25px; 
    background: transparent;
    border: 1px solid var(--borde); 
    color: #fff; 
    text-decoration: none; 
    font-size: 0.8rem; 
    letter-spacing: 1px; 
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
}

.enlace-retorno:hover, .boton-estandar:hover { 
    background: rgba(83, 114, 143, 0.15); 
    border-color: var(--azul-pizarra); 
    color: var(--acero-fresco); 
}

/* ==========================================================================
   10. Animaciones Globales
   ========================================================================== */
@keyframes aparicionSuave { 
    from { opacity: 0; transform: translateY(3px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* =========================================================================
   PIE DE PÁGINA AUTOMATIZADO 
   ========================================================================= */
.contenedor-pie-pagina {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    padding: 15px 0;
    border-top: 1px solid rgba(126, 149, 167, 0.1);
}

.texto-version {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--texto-mutado);
    font-family: 'Rubik', sans-serif;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.separador-version {
    color: var(--azul-pizarra);
    opacity: 0.7;
    margin: 0 3px;
}