/* =========================================================
   PLADIEX - BRANDING THEME
   Colores extraídos del landing page oficial
========================================================= */

:root {
    --pladiex-light: #99D8DD;     /* Celeste claro */
    --pladiex-cyan: #5CB3C1;      /* Cyan medio */
    --pladiex-dark: #01587A;      /* Azul oscuro principal */
    --pladiex-yellow: #E7BA11;    /* Amarillo */
    --pladiex-pink: #ff4d6d;      /* Acento (mantenido para gráficas/alertas) */
}

/* Evita que el body genere barras de desplazamiento fantasma */
body, html {
    overflow-x: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. FONDO DEL LOGIN (Corregido para pantalla completa) */
#modal-login {
    background: linear-gradient(135deg, rgba(24, 160, 169, 0.9) 0%, rgba(2, 90, 112, 0.95) 50%, rgba(232, 183, 29, 0.9) 100%) !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important; /* Sobrescribe cualquier restricción de tu style.css */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Modificando la tarjeta blanca de login para que resalte y se mantenga centrada */
#modal-login > div {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 4px solid var(--pladiex-cyan) !important;
    /* Aseguramos que la tarjeta no herede el 100vw */
    width: 90% !important; 
    max-width: 400px !important;
}

/* 2. BOTONES PRINCIPALES */
.btn-glass, button[type="submit"], #btn-guardar-actividad-firebase {
    background-color: var(--pladiex-dark) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-glass:hover, button[type="submit"]:hover {
    background-color: var(--pladiex-cyan) !important;
    box-shadow: 0 4px 15px rgba(24, 160, 169, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Botones secundarios (Outline) */
.btn-glass-outline {
    color: var(--pladiex-dark) !important;
    border-color: var(--pladiex-dark) !important;
    transition: all 0.3s ease !important;
}

.btn-glass-outline:hover {
    background-color: var(--pladiex-dark) !important;
    color: #ffffff !important;
}

/* 3. TEXTOS, TÍTULOS Y MARCA */
h2, h3, .brand-name {
    color: var(--pladiex-dark) !important;
}

/* Resaltar PLADIEX en el login */
#modal-login .brand-name {
    color: var(--pladiex-dark) !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}

/* 4. DASHBOARD ADMIN Y SIDEBAR */
/* Le damos el tono oscuro corporativo a la barra lateral del admin */
.admin-sidebar {
    background: linear-gradient(180deg, var(--pladiex-dark) 0%, #013b4a 100%) !important;
    border-right: none !important;
}

.admin-sidebar .admin-tab {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s ease !important;
}

.admin-sidebar .admin-tab.activo, .admin-sidebar .admin-tab:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-left: 4px solid var(--pladiex-yellow) !important;
}

.admin-sidebar .brand-name {
    color: #ffffff !important;
}

/* 5. TARJETAS DE ESTADÍSTICAS (Sustituyendo los colores base) */
.admin-card[style*="border-left: 4px solid #111827"] { border-left-color: var(--pladiex-dark) !important; }
.admin-card[style*="border-left: 4px solid #3b82f6"] { border-left-color: var(--pladiex-cyan) !important; }
.admin-card[style*="border-left: 4px solid #10b981"] { border-left-color: var(--pladiex-yellow) !important; }
.admin-card[style*="border-left: 4px solid #f59e0b"] { border-left-color: var(--pladiex-pink) !important; }

#stat-admins { color: var(--pladiex-dark) !important; }
#stat-alumnos { color: var(--pladiex-cyan) !important; }
#stat-cursos { color: var(--pladiex-yellow) !important; }
#stat-progreso { color: var(--pladiex-pink) !important; }

/* 6. MODALES Y CABECERAS EXTRA */
/* Header del generador de actividades */
#modal-generador-actividades header {
    background-color: var(--pladiex-dark) !important;
    border-bottom: 2px solid var(--pladiex-yellow) !important;
}

/* Acentos verdes del instalador que ahora serán Cyan corporativo */
h2[style*="color: #10b981"] {
    color: var(--pladiex-cyan) !important;
}

/* Pequeños detalles de interfaz */
input:focus, select:focus, textarea:focus {
    border-color: var(--pladiex-cyan) !important;
    box-shadow: 0 0 0 2px rgba(24, 160, 169, 0.2) !important;
}
/* =========================================================
   7. DASHBOARD PRINCIPAL Y HEADER (Fondo Integrado)
========================================================= */

/* Fondo general con el gradiente de la marca a pantalla completa */
#modal-dashboard {
    background: linear-gradient(135deg, rgba(24, 160, 169, 0.95) 0%, rgba(2, 90, 112, 1) 50%, rgba(232, 183, 29, 0.85) 100%) !important;
    background-attachment: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow-y: auto !important; /* Permite hacer scroll */
}

/* Cabecera estilo Glassmorphism (Cristal) para fusionarse con el fondo */
.dashboard-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Forzar que el texto de la cabecera sea blanco para contrastar */
.dashboard-header h2, 
.dashboard-header #titulo-dashboard,
.dashboard-header .nombre-usuario {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; /* Sombra sutil para lectura */
}

/* Destacar el ícono/avatar de usuario con el amarillo de la marca */
.icono-usuario {
    background-color: var(--pladiex-yellow) !important;
    color: var(--pladiex-dark) !important;
    border: 2px solid #ffffff !important;
    font-weight: bold;
}

/* Tarjetas Blancas (Hacemos que floten sobre el fondo oscuro) */
.admin-card {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: 12px !important;
}

/* Títulos de las tarjetas para alinearlos a la paleta */
.admin-card h3 {
    color: var(--pladiex-dark) !important;
    font-weight: 700 !important;
}

/* Dropdown del perfil de usuario */
#dropdown-perfil {
    border-top: 3px solid var(--pladiex-cyan) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}
#dropdown-perfil a:hover {
    background-color: var(--pladiex-light) !important;
    color: var(--pladiex-cyan) !important;
}
/* =========================================================
   8. ESPACIADO Y DISEÑO DEL PANEL (Layout - CORREGIDO)
========================================================= */

/* 1. Contenedores principales: Solo aplicamos el flex si tienen la clase .activo */
#dashboard-vista-admin.activo, 
#dashboard-vista-alumno.activo {
    padding: 40px 5% !important;
    box-sizing: border-box !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important; 
    gap: 40px !important; 
    width: 100% !important;
}

/* 1.1 Blindaje extra: Si el JS dice que está oculto, lo ocultamos a la fuerza */
#dashboard-vista-admin.oculto, 
#dashboard-vista-alumno.oculto {
    display: none !important;
}

/* 2. Forzamos la separación de las tarjetas dentro de sus contenedores */
#dashboard-vista-admin > div[style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 40px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Tarjetas: más espacio interior para respirar */
.admin-card {
    padding: 30px 25px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 4. Separación extra para el botón de ir al panel de admin */
#btn-ir-panel-admin {
    margin-top: 20px !important;
}

/* 5. Darle espacio a las gráficas respecto a sus títulos */
.admin-card canvas {
    margin-top: 20px !important;
    max-width: 90% !important;
}
/* =========================================================
   9. PANEL DE ADMINISTRADOR (Vista Admin Interna)
========================================================= */

/* Eliminar márgenes blancos globales por defecto */
body, html {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fondo general del modal con el gradiente de PLADIEX a pantalla completa real */
#modal-admin {
    background: linear-gradient(135deg, rgba(24, 160, 169, 0.95) 0%, rgba(2, 90, 112, 1) 50%, rgba(232, 183, 29, 0.85) 100%) !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    position: fixed !important; /* Ancla el panel a la ventana */
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important; /* Asegura que cubra todo */
}

/* 1. Barra Lateral (Sidebar) - Modo Cristal Oscuro */
.admin-sidebar {
    background: rgba(2, 90, 112, 0.7) !important; /* Teal oscuro transparente */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Modificamos el botón "Volver a Cursos" en la sidebar para que resalte */
#btn-salir-admin {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#btn-salir-admin:hover {
    background: var(--pladiex-pink) !important; /* Acento rosa al pasar el mouse */
    border-color: var(--pladiex-pink) !important;
}

/* 2. Área principal de contenido - Cristal Claro */
.admin-content {
    background: rgba(243, 246, 248, 0.85) !important; /* Blanco translúcido */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 40px 50px !important;
}

/* Títulos de sección */
.admin-seccion h2 {
    color: var(--pladiex-dark) !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
}

/* 3. Tarjetas de Formularios y Tablas */
.admin-content .admin-card {
    background: rgba(255, 255, 255, 0.95) !important; /* Blanco casi sólido para leer bien */
    border: none !important;
    border-top: 4px solid var(--pladiex-cyan) !important; /* Detalle corporativo arriba */
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 30px !important;
}

/* 4. Estilos de las Tablas (Gestión de Usuarios, etc.) */
.admin-table {
    width: 100% !important;
    border-collapse: collapse !important;
}
.admin-table th {
    background-color: rgba(24, 160, 169, 0.1) !important; /* Cyan muy suave */
    color: var(--pladiex-dark) !important;
    padding: 15px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--pladiex-cyan) !important;
}
.admin-table td {
    padding: 15px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #374151 !important;
}

/* 5. Inputs y Formularios Admin */
.admin-form input, 
.admin-form select {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    transition: all 0.3s ease !important;
}
.admin-form input:focus, 
.admin-form select:focus {
    border-color: var(--pladiex-cyan) !important;
    box-shadow: 0 0 0 3px rgba(24, 160, 169, 0.2) !important;
    background-color: #ffffff !important;
    outline: none !important;
}
/* =========================================================
   10. VISOR DE APRENDIZAJE (Diseño de Paneles Flotantes)
========================================================= */

/* Fondo general con el nuevo gradiente oficial */
/* Asegurar que toda la página ocupe exactamente el viewport */
html,
body {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Fondo general del visor */
#visor-curso {
    background: linear-gradient(
        135deg,
        var(--pladiex-cyan) 0%,
        var(--pladiex-dark) 50%,
        var(--pladiex-yellow) 100%
    ) !important;

    /* CLAVE: ocupar TODO el viewport */
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    z-index: 9999 !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: row !important;
}

/* Estado oculto */
#visor-curso.oculto {
    display: none !important;
}

/* Estado activo */
#visor-curso.activo,
#visor-curso:not(.oculto) {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* 1. Barra Lateral (Temario) - Ahora es Flotante y del color oscuro oficial */
.visor-sidebar {
    background: rgba(1, 88, 122, 0.95) !important; /* #01587A con 95% de opacidad */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; /* Sombra para separarla del fondo */
    color: #ffffff !important;
    padding: 20px !important;
    width: 300px !important;
    min-width: 300px !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 25px 0 25px 25px !important; /* Márgenes para separarla de la orilla */
    border-radius: 12px !important; /* Bordes redondeados */
}

/* Botón Volver */
#btn-volver-dashboard {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}
#btn-volver-dashboard:hover {
    background: var(--pladiex-cyan) !important;
    border-color: var(--pladiex-cyan) !important;
}

#lista-temas-estudiante {
    color: rgba(255, 255, 255, 0.9) !important;
    flex: 1 !important;
    overflow-y: auto !important; 
}
#lista-temas-estudiante p, 
#lista-temas-estudiante span, 
#lista-temas-estudiante div {
    color: inherit !important; 
}

/* 2. Área principal - Tarjeta Blanca Flotante */
.visor-contenido {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    border-radius: 12px !important;

    margin: 25px !important;
    padding: 30px !important;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;

    /* ELIMINADO:
       max-width: calc(100% - 350px);
    */
}

.contenido-header h2 {
    color: var(--pladiex-dark) !important;
    border-bottom: 2px solid var(--pladiex-cyan) !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    font-weight: 800 !important;
}

#visor-contenido-estudiante h3,
#visor-contenido-estudiante h4 {
    color: var(--pladiex-cyan) !important;
    margin-bottom: 15px !important;
}

/* 3. Controles de navegación */
.contenido-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-top: 20px !important;
    margin-top: auto !important;
    display: flex !important;
    justify-content: space-between !important;
}

#btn-anterior, #btn-siguiente {
    background-color: var(--pladiex-dark) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#btn-anterior:hover, #btn-siguiente:hover {
    background-color: var(--pladiex-cyan) !important;
    box-shadow: 0 4px 15px rgba(92, 179, 193, 0.4) !important; /* Sombra actualizada al nuevo cyan */
}