/**
 * SIGCAP - Sistema de Gestión de Capacitaciones
 * Hoja de estilos para interfaz pública
 * Versión 4.0 - Réplica Exacta Portal SSÑ (Layout con Caja)
 * Diseño: Caja blanca de ancho fijo sobre fondo azul institucional
 */

/* ========================================
   RESET Y ESTILOS BASE
   ======================================== */

/* Reset universal para todos los elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* Estilos base del body */
body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Fuente para formularios y texto general */
    font-size: 16px; /* Tamaño base de texto */
    line-height: 1.6; /* Altura de línea para legibilidad */
    color: #333; /* Color de texto principal */
    background: linear-gradient(135deg, #0d3a5f 0%, #1a5280 50%, #0d3a5f 100%); /* Gradiente azul institucional */
    background-attachment: fixed; /* Fondo fijo al hacer scroll */
    min-height: 100vh; /* Altura mínima de viewport completo */
    padding: 0;
    margin: 0;
}

/* ========================================
   HEADER CON LOGO Y TÍTULO
   ======================================== */

/* Contenedor principal del header */
.site-header {
    background: linear-gradient(to bottom, #2c5f7d 0%, #1a4a63 60%, transparent 100%); /* Gradiente que se desvanece */
    padding: 40px 0 60px 0; /* Espaciado superior e inferior */
    text-align: center;
}

/* Contenedor de contenido centrado del header */
.header-content {
    max-width: 1200px; /* Ancho máximo igual al contenido principal */
    margin: 0 auto; /* Centrado horizontal */
    display: flex;
    flex-direction: column; /* Elementos en columna */
    align-items: center; /* Centrado horizontal de elementos hijos */
    gap: 20px; /* Espacio entre logo y título */
}

/* Contenedor del logo circular */
.logo-container {
    width: 120px;
    height: 120px;
}

/* Imagen del logo */
.site-logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene proporción del logo */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); /* Sombra para destacar */
}

/* Título principal del sitio */
.site-title h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 700; /* Negrita */
    color: #ffffff;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra de texto */
}

/* Subtítulo del sitio */
.site-title .subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 400; /* Peso normal */
    color: #ffffff;
    margin: 5px 0 0 0;
    letter-spacing: 1px; /* Espaciado entre letras */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========================================
   ESTRUCTURA DE CAJA PRINCIPAL
   ======================================== */

/* Contenedor del menú - fuera de la caja blanca */
.menu-wrapper {
    max-width: 1200px; /* Ancho máximo fijo */
    margin: 0 auto; /* Centrado horizontal */
    padding: 0; /* Sin padding para que el menú llegue a los bordes */
    position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
}

/* Separador visual entre menú y contenido (se integra con hover del menú) */
.menu-separator {
    height: 10px; /* Espacio de 10px */
    background: #5fb4d4; /* Azul más claro */
    max-width: 1200px; /* Mismo ancho que el menú */
    margin: 0 auto; /* Centrado horizontal */
    position: relative;
    z-index: 1; /* Debajo del menú para que el hover lo cubra */
}

/* Caja blanca principal que contiene todo el contenido */
.main-content-box {
    max-width: 1200px; /* Ancho máximo igual al menú */
    margin: 0 auto 40px auto; /* Centrado horizontal con margen inferior */
    background: #ffffff; /* Fondo blanco */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra pronunciada */
    border-radius: 0 0 8px 8px; /* Bordes redondeados solo abajo */
    overflow: hidden; /* Oculta desbordamiento */
}

/* ========================================
   NAVBAR PRINCIPAL - DISEÑO EXACTO SSÑ
   ======================================== */

/* Navegación principal con color corporativo */
.main-navigation {
    background: #1c6fb7; /* Color azul del menú SSÑ */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */
    border-radius: 8px 8px 0 0; /* Bordes redondeados solo arriba */
    position: relative;
    border: none; /* Sin borde de Bootstrap */
    margin-bottom: 0; /* Sin margen inferior */
    min-height: 0; /* Elimina altura mínima de Bootstrap */
}

/* Elimina padding de Bootstrap 3 para ajuste completo */
.main-navigation .container-fluid {
    padding: 0;
}

/* Header del navbar (contiene el botón hamburguesa en móvil) */
.main-navigation .navbar-header {
    float: none; /* No flotar en móvil */
    border-bottom: none; /* Sin borde */
    display: flex; /* Flexbox para alinear botón y link admin */
    justify-content: space-between; /* Separa botón hamburguesa y admin */
    align-items: center; /* Centra verticalmente */
}

/* Botón hamburguesa para menú móvil (Bootstrap 3) */
.main-navigation .navbar-toggle {
    background: transparent; /* Fondo transparente */
    border: 2px solid rgba(255, 255, 255, 0.5); /* Borde blanco semi-transparente */
    margin: 10px 15px; /* Margen para separar del borde */
    padding: 8px 10px; /* Padding interno */
    border-radius: 4px; /* Bordes redondeados */
}

/* Hover en botón hamburguesa */
.main-navigation .navbar-toggle:hover,
.main-navigation .navbar-toggle:focus {
    background: rgba(255, 255, 255, 0.1); /* Fondo blanco semi-transparente */
    border-color: #ffffff; /* Borde blanco sólido */
}

/* Barras del icono hamburguesa (Bootstrap 3) */
.main-navigation .navbar-toggle .icon-bar {
    background-color: #ffffff; /* Color blanco para las barras */
    height: 3px; /* Grosor de las barras */
    border-radius: 1px; /* Bordes redondeados */
}

/* Link Administrador en navbar-header (móvil) */
.navbar-admin-mobile {
    display: none; /* Oculto por defecto */
    padding: 10px 15px;
    color: #ffffff;
    background: #1a3d52; /* Azul oscuro */
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    transition: background 0.3s;
}

/* Hover en link Administrador móvil */
.navbar-admin-mobile:hover {
    background: #0f2838; /* Azul más oscuro */
    text-decoration: none;
    color: #ffffff;
}

/* Icono dentro del link admin móvil */
.navbar-admin-mobile i {
    margin-right: 5px;
}

/* Contenedor colapsable del menú (Bootstrap 3) */
.navbar-collapse {
    background: transparent; /* Sin fondo - usa el del main-navigation */
    position: relative;
    z-index: 9999; /* Sobre otros elementos */
    padding: 0; /* Elimina padding de Bootstrap para ajuste completo */
    margin: 0;
    border-radius: 8px 8px 0 0; /* Hereda bordes redondeados del navbar */
    overflow: hidden; /* Asegura que el contenido respete los bordes redondeados */
    border: none; /* Sin borde de Bootstrap */
}

/* Tablets y Desktop: menú siempre visible (≥768px) */
@media (min-width: 768px) {
    .navbar-collapse {
        display: block !important; /* Fuerza visibilidad */
        height: auto !important;
        padding: 0 !important;
    }
    
    .navbar-header {
        display: none; /* Ocultar navbar-header completo en desktop/tablet */
    }
    
    /* Mostrar link admin dentro del nav-menu en desktop/tablet */
    .nav-menu .menu-admin {
        display: flex !important;
    }
}

/* Móvil: menú colapsable con botón hamburguesa (<768px) */
@media (max-width: 767px) {
    .navbar-collapse {
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora sutil */
    }
    
    /* Cuando está expandido (Bootstrap 3 usa clase .in) */
    .navbar-collapse.in {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    /* Ocultar link admin del menú colapsable en móvil */
    .navbar-collapse .menu-admin {
        display: none !important;
    }
    
    /* Mostrar navbar-header en móvil */
    .navbar-header {
        display: flex !important;
    }
    
    /* Mostrar link admin móvil en navbar-header */
    .navbar-admin-mobile {
        display: inline-block !important;
    }
}

/* Lista de elementos del menú */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Permite salto a 2 filas en tablets */
    align-items: stretch; /* Estira items a la misma altura */
    justify-content: flex-start; /* Alineación a la izquierda */
}

/* Items individuales del menú */
.nav-menu > li {
    position: relative;
    margin: 0;
    flex: 0 0 auto; /* No crece ni se encoge */
}

/* Pseudo-elemento para extender el color del hover hacia abajo (sobre el separador) */
.nav-menu > li::after {
    content: '';
    position: absolute;
    top: 100%; /* Empieza justo debajo del enlace */
    left: 0;
    right: 0;
    height: 10px; /* Altura del separador */
    background: transparent; /* Transparente por defecto */
    transition: background 0.3s; /* Transición suave */
    z-index: 10; /* Por encima del separador */
}

/* Enlaces del menú */
.nav-menu > li > a {
    display: block;
    padding: 18px 20px; /* Espaciado interno */
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    font-family: 'Oswald', sans-serif; /* Fuente Oswald para el menú */
    font-weight: 300;
    font-size: 16px;
    transition: background 0.3s; /* Transición suave en hover */
    white-space: nowrap; /* No permite salto de línea en el texto */
    line-height: 1.2;
    border: none;
}

/* Hover en enlaces del menú */
.nav-menu > li > a:hover {
    background: #5fb4d4; /* Azul más claro */
}

/* Extiende el color del hover hacia abajo (sobre el separador) */
.nav-menu > li:hover::after {
    background: #5fb4d4; /* Mismo color del hover */
}

/* Item activo (página actual) */
.nav-menu > li.active > a {
    background: #5fb4d4;
}

/* Extiende el color del item activo hacia abajo */
.nav-menu > li.active::after {
    background: #5fb4d4; /* Mismo color del activo */
}

/* Iconos dentro de los enlaces */
.nav-menu > li > a i {
    margin-right: 6px; /* Espacio entre icono y texto */
}

/* Estilos para desktop grande (≥1080px) */
@media (min-width: 1080px) {
    /* Menú en 1 sola fila */
    .nav-menu {
        flex-wrap: nowrap; /* No permite salto de línea */
    }
    
    /* Borde redondeado en primer item */
    .nav-menu > li:first-child > a {
        border-radius: 5px 0 0 0;
    }

    /* Item Administrador alineado a la derecha */
    .nav-menu > li.menu-admin {
        margin-left: auto; /* Empuja a la derecha */
    }

    /* Estilo especial para botón Administrador */
    .nav-menu > li.menu-admin > a {
        background: #1a3d52; /* Azul oscuro */
        font-weight: 600; /* Más negrita */
        border-radius: 0 5px 0 0; /* Borde redondeado superior derecho */
    }

    /* Hover en botón Administrador */
    .nav-menu > li.menu-admin > a:hover {
        background: #0f2838; /* Azul más oscuro */
    }
}

/* Estilos para tablets (768px a 1079px) */
@media (min-width: 768px) and (max-width: 1079px) {
    /* Menú en 2 filas con distribución equilibrada */
    .nav-menu {
        flex-wrap: wrap; /* Permite salto a múltiples filas */
        justify-content: flex-start; /* Alineación a la izquierda */
        gap: 0; /* Sin gaps adicionales */
        position: relative; /* Contexto para posicionamiento absoluto del admin */
        padding-right: 180px; /* Reserva espacio para link Administrador a la derecha */
    }
    
    /* Items normales (8 items) distribuidos en el espacio disponible */
    .nav-menu > li:not(.menu-admin) {
        flex: 1 1 auto; /* Crecen para llenar el espacio disponible */
        min-width: 140px; /* Ancho mínimo para cada item */
    }
    
    /* Enlaces con padding reducido y centrado del texto */
    .nav-menu > li > a {
        padding: 15px 10px; /* Padding más compacto */
        font-size: 14px; /* Texto más pequeño para ajustar */
        text-align: center; /* Centra el texto */
        white-space: normal; /* Permite wrap si es necesario */
        line-height: 1.3; /* Altura de línea ajustada */
    }
    
    /* Item Administrador: alineado a la derecha en la primera fila */
    .nav-menu > li.menu-admin {
        position: absolute; /* Posicionamiento absoluto */
        right: 0; /* Pegado a la derecha */
        top: 0; /* En la primera fila */
        margin-left: 0;
        flex: none; /* No participa en el flujo flex */
        width: 180px; /* Ancho fijo para el botón admin */
    }
    
    /* Estilo para botón Administrador en tablets */
    .nav-menu > li.menu-admin > a {
        background: #1a3d52; /* Azul oscuro */
        font-weight: 600; /* Más negrita */
        padding: 15px 20px; /* Padding específico */
        border-radius: 0 5px 0 0; /* Borde redondeado superior derecho */
        white-space: nowrap; /* No permite salto de línea */
    }
    
    /* Hover en botón Administrador */
    .nav-menu > li.menu-admin > a:hover {
        background: #0f2838; /* Azul más oscuro */
    }
    
    /* Elimina el pseudo-elemento ::after en TODA la tablet view para evitar solapamiento */
    .nav-menu > li::after {
        display: none !important; /* Oculta completamente la extensión del hover */
    }
    
    /* Elimina también el hover del pseudo-elemento */
    .nav-menu > li:hover::after,
    .nav-menu > li.active::after {
        display: none !important;
    }
}

/* Estilos para móvil (pantallas pequeñas <768px) */
@media (max-width: 767px) {
    /* Menú en columna vertical */
    .nav-menu {
        flex-direction: column;
        flex-wrap: nowrap; /* No es necesario wrap en columna */
    }

    /* Items ocupan ancho completo */
    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador */
        flex: none;
    }
    
    /* Elimina el pseudo-elemento ::after en móvil (no es necesario) */
    .nav-menu > li::after {
        display: none;
    }

    /* Dropdown sin posicionamiento absoluto en móvil */
    .nav-menu .dropdown-menu {
        position: static; /* Sin posicionamiento absoluto */
        background: rgba(0, 0, 0, 0.1); /* Fondo más oscuro para distinguir */
        box-shadow: none;
        border-radius: 0;
        padding-left: 0; /* Sin indentación */
        margin-top: 0; /* Sin margen superior */
    }
    
    /* Items del dropdown en móvil */
    .nav-menu .dropdown-menu li a {
        padding-left: 40px; /* Indentación para sub-items */
        background: transparent; /* Sin fondo propio */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separador más sutil */
        color: #ffffff !important;
    }
    
    /* Hover en dropdown items en móvil */
    .nav-menu .dropdown-menu li a:hover {
        background: rgba(255, 255, 255, 0.1); /* Hover más sutil */
        color: #ffffff !important;
    }
    
    /* Dropdown siempre visible cuando el padre tiene clase .open (Bootstrap 3) */
    .nav-menu .dropdown.open .dropdown-menu {
        display: block;
    }
}

/* Repetición de estilos de iconos (consolidar) */
.nav-menu > li > a i {
    margin-right: 6px;
}

/* Menú desplegable (Dropdown) */
.nav-menu .dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Debajo del item padre */
    left: 0;
    background: #1c6fb7;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Sombra pronunciada */
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000; /* Sobre el contenido */
    border-radius: 0 0 4px 4px; /* Bordes redondeados abajo */
}

/* Muestra dropdown al hacer hover en desktop */
.nav-menu .dropdown:hover .dropdown-menu {
    display: block;
}

/* Items dentro del dropdown */
.nav-menu .dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: #ffffff !important;
    background: #1c6fb7;
    text-decoration: none;
    transition: background 0.3s;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Separador */
}

/* Último item sin borde inferior */
.nav-menu .dropdown-menu li:last-child a {
    border-bottom: none;
    border-radius: 0 0 4px 4px;
}

/* Hover en items del dropdown */
.nav-menu .dropdown-menu li a:hover {
    background: #5fb4d4;
    color: #ffffff !important;
}

/* Icono de flecha en dropdown */
.nav-menu .dropdown-toggle i {
    font-size: 9px; /* Tamaño pequeño */
    margin-left: 5px; /* Espacio antes de la flecha */
}

/* ========================================
   HERO CAROUSEL
   ======================================== */

/* Sección del carousel principal */
.hero-carousel {
    position: relative;
    background: #f8f9fa; /* Fondo gris claro por defecto */
}

/* Contenedor interno del carousel con altura fija */
.hero-carousel .carousel-inner {
    border-radius: 0;
    min-height: 400px; /* Altura mínima forzada */
    max-height: 400px; /* Altura máxima forzada */
}

/* Item individual del carousel (slide) */
.hero-carousel .item {
    position: relative;
    height: 400px; /* Altura fija */
    min-height: 400px; /* Evita colapso */
    max-height: 400px; /* Evita expansión */
    background: #1a3a52; /* Fondo azul oscuro */
    overflow: hidden; /* Oculta desbordamiento de imagen */
}

/* Imagen dentro del carousel */
.hero-carousel .item img {
    display: block !important; /* Fuerza display block sobre .img-responsive */
    width: 100% !important; /* Ancho completo */
    height: 400px !important; /* Altura fija igual al contenedor */
    max-width: 100% !important;
    object-fit: contain; /* Ajusta sin recortar, mantiene proporción */
    object-position: center; /* Centra la imagen */
}

/* Caption (texto sobre la imagen) */
.hero-carousel .carousel-caption {
    background: linear-gradient(to top, rgba(26, 58, 82, 0.9) 0%, rgba(26, 58, 82, 0.7) 70%, transparent 100%); /* Gradiente oscuro de abajo hacia arriba */
    bottom: 0; /* Anclado al fondo */
    left: 0;
    right: 0;
    padding: 30px 0;
    text-align: left; /* Texto alineado a la izquierda */
}

/* Container dentro del caption */
.hero-carousel .carousel-caption .container {
    max-width: 100%;
    padding: 0 40px; /* Padding lateral */
}

/* Título del caption */
.hero-carousel .carousel-caption h3 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidad */
}

/* Párrafo del caption */
.hero-carousel .carousel-caption p {
    font-size: 16px;
    color: #f0f0f0;
    margin-bottom: 0;
}

/* Controles de navegación (flechas) */
.hero-carousel .carousel-control {
    width: 50px; /* Ancho reducido */
    opacity: 0.8; /* Semi-transparente */
}

/* Hover en controles */
.hero-carousel .carousel-control:hover {
    opacity: 1; /* Opacidad completa */
}

/* Indicadores (puntos) del carousel */
.hero-carousel .carousel-indicators {
    margin-bottom: 20px; /* Separación del borde inferior */
}

/* Indicador individual */
.hero-carousel .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Circular */
    margin: 0 5px; /* Espaciado entre indicadores */

    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparente */
}

/* Indicador activo */
.hero-carousel .carousel-indicators button.active {
    background-color: #ffffff; /* Blanco sólido */
}

/* ========================================
   SECCIÓN DE CONTENIDO (CURSOS Y PÁGINAS)
   ======================================== */

/* Contenedor general con padding */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Título de sección centrado */
.section-title {
    text-align: center;
    margin-bottom: 40px;
    color: #1a3a52;
}

.section-title h2 {
    font-family: 'Oswald', sans-serif; /* Fuente Oswald para títulos de sección */
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title h4 {
    font-family: 'Oswald', sans-serif; /* Fuente Oswald para subtítulos de sección */
    font-size: 18px;
    font-weight: 400;
    color: #555;
    margin-bottom: 0;
}

/* Tabla de cursos con diseño moderno */
.courses-table {
    width: 100%;
    max-width: 900px; /* Limita el ancho total de la tabla */
    margin: 0 auto; /* Centrado horizontal */
    border-collapse: separate;
    border-spacing: 0 20px; /* Espacio entre filas */
}

.courses-table tr {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.courses-table tr:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.courses-table td {
    padding: 0;
    vertical-align: middle;
}

.courses-table td:first-child {
    width: 40%; /* 40% para las imágenes */
    padding: 0;
}

.courses-table td:first-child img {
    width: 100%;
    height: auto;
    display: block;
}

.courses-table td:last-child {
    width: 60%; /* 60% para el texto */
    padding: 30px;
}

.courses-table p {
    margin-bottom: 15px;
}

.courses-table h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1a3a52;
    margin-bottom: 10px;
}

/* Texto destacado en rojo corporativo SSÑ */
.text-ssn-rojo {
    color: #c1272d;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botones base */
.btn {
    display: inline-block;
    padding: 10px 25px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

/* Botón primario (azul corporativo) */
.btn-primary {
    background: #1c6fb7;
    color: #ffffff;
}

.btn-primary:hover {
    background: #155a94;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(28, 111, 183, 0.3);
}

/* Botón danger (rojo corporativo) */
.btn-danger {
    background: #c1272d;
    color: #ffffff;
}

.btn-danger:hover {
    background: #9d1f24;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(193, 39, 45, 0.3);
}

/* Utilidades de Bootstrap que se usan */
.mt-4 {
    margin-top: 1.5rem;
}

/* Responsive para tabla de cursos */
@media (max-width: 768px) {
    .courses-table tr {
        display: flex;
        flex-direction: column;
    }
    
    .courses-table td:first-child {
        width: 100%;
    }
    
    .courses-table td:last-child {
        padding: 20px;
    }
}

/* ========================================
   GALERÍA FOTOGRÁFICA
   ======================================== */

/* Contenedor principal de la galería sin margen (pegado al footer) */
.gallery-carousel {
    position: relative; /* Necesario para posicionamiento interno */
    margin-bottom: 0; /* Sin espacio antes del footer - pegado directamente */
}

/* Barra de título con fondo azul corporativo (NO overlay, sino barra estática) */
.gallery-title-overlay {
    background: #1a3a52; /* Fondo azul corporativo sólido */
    padding: 15px 0; /* Padding vertical para crear barra de ~60px total */
    text-align: center; /* Texto centrado */
    color: #ffffff; /* Texto blanco para contraste */
}

/* Título principal de la galería */
.gallery-title-overlay h2 {
    font-size: 24px; /* Tamaño apropiado para barra compacta */
    font-weight: 600; /* Peso medio-grueso */
    margin-bottom: 5px; /* Pequeño margen antes del subtítulo */
    text-transform: uppercase; /* Mayúsculas para énfasis */
    letter-spacing: 1.5px; /* Espaciado entre letras para legibilidad */
}

/* Subtítulo de la galería */
.gallery-title-overlay p {
    font-size: 14px; /* Tamaño compacto para subtítulo */
    margin-bottom: 0; /* Sin margen inferior */
    opacity: 0.9; /* Ligera transparencia para jerarquía visual */
}

/* Contenedor interno del carousel de galería con altura fija */
.gallery-carousel .carousel-inner {
    min-height: 400px; /* Altura mínima forzada - igual al hero */
    max-height: 400px; /* Altura máxima forzada - igual al hero */
}

/* Item individual del carousel de galería */
.gallery-carousel .item {
    position: relative;
    height: 400px; /* Altura fija igual al hero carousel */
    min-height: 400px; /* Evita colapso durante transición */
    max-height: 400px; /* Evita expansión durante transición */
    background: #1a3a52; /* Fondo azul oscuro para espacios vacíos */
    overflow: hidden; /* Oculta desbordamiento de imagen */
}

/* Imagen dentro del carousel de galería */
.gallery-carousel .item img {
    display: block !important; /* Fuerza display block sobre .img-responsive */
    width: 100% !important; /* Ancho completo */
    height: 400px !important; /* Altura fija igual al hero */
    max-width: 100% !important;
    object-fit: contain; /* Ajusta proporcionalmente sin recortar */
    object-position: center; /* Centra la imagen */
}

/* Caption del carousel de galería */
.gallery-carousel .carousel-caption {
    background: linear-gradient(to top, rgba(26, 58, 82, 0.85) 0%, transparent 100%); /* Gradiente más suave */
    bottom: 0; /* Anclado al fondo */
    left: 0;
    right: 0;
    padding: 20px 0;
}

/* Container dentro del caption de galería */
.gallery-carousel .carousel-caption .container {
    max-width: 100%;
    padding: 0 20px; /* Padding lateral reducido */
}

/* Texto del caption de galería */
.gallery-carousel .carousel-caption p {
    font-size: 16px; /* Igualado con hero carousel para consistencia */
    color: #ffffff;
    margin-bottom: 0;
}

/* Cursor pointer en imágenes para indicar que son clicables */
.gallery-carousel .item img {
    cursor: pointer; /* Indica que la imagen es clickeable */
}

/* Indicadores del carousel de galería */
.gallery-carousel .carousel-indicators {
    margin-bottom: 15px; /* Separación del borde inferior */
}

/* ========================================
   LIGHTBOX DE GALERÍA
   ======================================== */

/* Overlay oscuro de fondo del lightbox */
.lightbox-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Posición fija sobre toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Fondo negro casi opaco */
    z-index: 9999; /* Por encima de todo */
    cursor: zoom-out; /* Indica que se puede cerrar */
    animation: fadeIn 0.3s ease; /* Animación de aparición */
}

/* Lightbox activo */
.lightbox-overlay.active {
    display: flex; /* Muestra el lightbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
}

/* Imagen dentro del lightbox */
.lightbox-overlay img {
    max-width: 95%; /* Máximo 95% del ancho de pantalla */
    max-height: 95%; /* Máximo 95% del alto de pantalla */
    object-fit: contain; /* Mantiene proporción */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* Sombra pronunciada */
    animation: zoomIn 0.3s ease; /* Animación de zoom */
    cursor: default; /* Cursor normal sobre la imagen */
}

/* Botón de cerrar lightbox */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #ffffff;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Hover en botón cerrar */
.lightbox-close:hover {
    color: #ff4444;
    transform: scale(1.2);
}

/* Animación de aparición del overlay */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animación de zoom de la imagen */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========================================
   FOOTER
   ======================================== */

/* Footer principal con gradiente azul */
.footer {
    background: linear-gradient(to right, #1a3a52 0%, #2c5f7d 100%); /* Gradiente horizontal */
    color: #ffffff;
    padding: 40px 20px 20px 20px; /* Padding asimétrico */
    margin-top: auto; /* Se empuja al fondo */
}

/* Container fluido del footer */
.footer .container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Sección de call center (deprecada) */
.footer .call-center-footer {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: transparent;
    border-radius: 0;
}

/* Imagen en call center */
.footer .call-center-footer img {
    margin-bottom: 10px;
}

/* Texto en call center */
.footer .call-center-footer p {
    margin: 5px 0;
    font-size: 14px;
}

/* Enlace "ir arriba" (deprecado) */
.footer .ir-arriba-footer {
    text-align: center;
    margin-bottom: 30px;
}

/* Enlace dentro de ir-arriba */
.footer .ir-arriba-footer a {
    color: #ffffff;
    text-decoration: none;
    display: block;
}

/* Hover en enlace ir-arriba */
.footer .ir-arriba-footer a:hover {
    opacity: 0.8;
}

/* Título de bloque en footer */
.footer .block-title {
    font-family: 'Oswald', sans-serif; /* Fuente Oswald para títulos del footer */
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase; /* Mayúsculas */
    border-bottom: 2px solid rgba(255, 255, 255, 0.3); /* Línea separadora */
    padding-bottom: 8px;
}

/* Listas de enlaces en footer */
.footer .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Items de lista en footer */
.footer .menu li {
    margin-bottom: 8px; /* Espaciado entre items */
}

/* Enlaces en footer */
.footer .menu li a {
    color: #f0f0f0; /* Blanco hueso */
    text-decoration: none;
    font-size: 14px;
}

/* Hover en enlaces del footer */
.footer .menu li a:hover {
    color: #ffffff; /* Blanco puro */
    text-decoration: underline; /* Subrayado */
}

/* Texto pie de página (dirección) */
.footer .texto-pie-footer {
    text-align: right; /* Alineado a la derecha */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea separadora superior */
}

/* Párrafo en pie de página */
.footer .texto-pie-footer p {
    margin: 0;
    font-size: 13px;
}

/* Sección de contacto del footer */
.footer-contact-section {
    text-align: left;
    margin-top: 0;
    padding: 0;
    border-top: none;
}

/* Oculta imagen de teléfono (redundante) */
.footer-contact-section img {
    display: none !important;
}

/* Título de sección de contacto */
.footer-contact-section .contact-title {
    font-family: 'Oswald', sans-serif; /* Fuente Oswald para título de contacto */
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Espaciado de letras */
    line-height: 1.2;
}

/* Información de contacto */
.footer-contact-section .contact-info {
    font-size: 14px;
    color: #f0f0f0;
    margin: 0;
    line-height: 1.8; /* Mayor altura de línea para legibilidad */
    font-weight: 400;
}

/* Bloque de contenido en footer derecho */
.footer .region-footer-right .block-block {
    padding: 0 15px;
    margin-top: 0;
    display: block !important;
    width: 100%;
    clear: both; /* Limpia flotantes */
}

/* Imagen en bloque de footer derecho */
.footer .region-footer-right .block-block .img-fluid {
    margin: 0 auto 20px auto; /* Centrado horizontal */
    display: block;
    clear: both;
    float: none !important; /* Sin flotante */
    max-width: 100% !important;
}

/* Región derecha del footer */
.footer .region-footer-right {
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-align: left;
    margin-left: 0 !important;
}

/* Sobrescribe estilos de style.min.css antiguo */
.footer .region-footer-left,
.footer .region-footer-center,
.footer .region-footer-right {
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border: none !important;
}

/* Igualar ancho de columnas del footer y alinearlas */
.footer .row.mt-4 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.footer .row.mt-4 > [class*='col-'] {
    flex: 1 1 0;
    max-width: 33.333%;
    min-width: 0;
}

@media (max-width: 767px) {
    .footer .row.mt-4 > [class*='col-'] {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Elimina pseudo-elementos ::before en regiones */
.footer .region-footer-left::before,
.footer .region-footer-center::before,
.footer .region-footer-right::before {
    display: none !important;
}

/* Elimina ::before en bloques de menú */
.footer .block-menu::before {
    display: none !important;
}

/* Sobrescribe padding de h2 en footer */
.footer .region-footer-center h2.block-title,
.footer .region-footer-left h2.block-title {
    padding-left: 0 !important;
    padding-top: 0 !important;
}

/* FUERZA ELIMINACIÓN DE TODAS LAS ANIMACIONES EN EL FOOTER */
/* Aplica a todos los elementos y pseudo-elementos */
.footer *,
.footer *::before,
.footer *::after {
    animation: none !important; /* Sin animaciones CSS */
    transition: none !important; /* Sin transiciones */
    transform: none !important; /* Sin transformaciones */
    -webkit-animation: none !important; /* Safari/Chrome */
    -webkit-transition: none !important;
    -webkit-transform: none !important;
    -moz-animation: none !important; /* Firefox */
    -moz-transition: none !important;
    -moz-transform: none !important;
    opacity: 1 !important; /* Opacidad completa siempre */
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablets y pantallas medianas (máx 991px) */
@media (max-width: 991px) {
    /* Reduce altura de hero carousel */
    .hero-carousel .item,
    .hero-carousel .item img {
        height: 350px;
    }

    /* Reduce tamaño de título en hero */
    .hero-carousel .carousel-caption h3 {
        font-size: 24px;
    }

    /* Reduce altura de carousel de galería */
    .content-section .item,
    .content-section .item img {
        height: 300px;
    }

    /* Reduce margen inferior de caja blanca */
    .main-content-box {
        margin-bottom: 20px;
    }
}

/* Móviles grandes (máx 768px) */
@media (max-width: 768px) {
    /* Menú en columna */
    #navbar .menu {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Items de menú a ancho completo */
    #navbar .menu > li {
        width: 100%;
    }

    /* Enlaces de menú a ancho completo */
    #navbar .menu > li > a {
        width: 100%;
    }

    /* Reduce altura de hero carousel */
    .hero-carousel .item,
    .hero-carousel .item img {
        height: 280px;
    }

    /* Reduce tamaño de título en hero */
    .hero-carousel .carousel-caption h3 {
        font-size: 20px;
    }

    /* Reduce tamaño de párrafo en hero */
    .hero-carousel .carousel-caption p {
        font-size: 14px;
    }

    /* Reduce altura de carousel de galería en tablets */
    .gallery-carousel .carousel-inner,
    .gallery-carousel .item,
    .gallery-carousel .item img {
        height: 350px !important;
        min-height: 350px;
        max-height: 350px;
    }

    /* Reduce padding de barra de título en tablets */
    .gallery-title-overlay {
        padding: 12px 0; /* Barra más compacta en tablets */
    }

    /* Reduce tamaño de título de galería en tablets */
    .gallery-title-overlay h2 {
        font-size: 20px;
    }

    .gallery-title-overlay p {
        font-size: 13px;
    }
    
    /* Ajustes para evitar margen extraño en móviles */
    .main-content-box,
    .menu-wrapper,
    .menu-separator {
        margin-left: 10px;
        margin-right: 10px;
        max-width: calc(100% - 20px);
    }
    
    /* Ajustar padding del container interno */
    .main-content-box .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Centra texto del pie de página */
    .footer .texto-pie-footer {
        text-align: center;
    }

    /* Elimina bordes redondeados de caja en móvil */
    .main-content-box {
        border-radius: 0;
        margin-bottom: 0;
    }
}

/* Móviles pequeños (máx 576px) */
@media (max-width: 576px) {
    /* Centra menú superior */
    #menu-top .menu {
        text-align: center;
    }

    /* Reduce margen entre items de menú */
    #menu-top .menu li {
        margin: 0 10px;
    }

    /* Reduce altura de hero carousel */
    .hero-carousel .item,
    .hero-carousel .item img {
        height: 220px;
    }

    /* Reduce padding de caption en hero */
    .hero-carousel .carousel-caption {
        padding: 15px 0;
    }

    /* Reduce tamaño de título en hero */
    .hero-carousel .carousel-caption h3 {
        font-size: 18px;
    }

    /* Reduce altura de carousel de galería en móviles pequeños */
    .gallery-carousel .carousel-inner,
    .gallery-carousel .item,
    .gallery-carousel .item img {
        height: 250px !important;
        min-height: 250px;
        max-height: 250px;
    }

    /* Reduce padding de barra de título en móviles pequeños */
    .gallery-title-overlay {
        padding: 10px 0; /* Barra muy compacta en móviles */
    }

    /* Reduce tamaño de título en móviles pequeños */
    .gallery-title-overlay h2 {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .gallery-title-overlay p {
        font-size: 11px;
    }
}
/* ========================================
   ESTILOS PARA CARDS DE CURSOS (DIFUSIÓN)
   ======================================== */

/* Contenedor de cards - igualar altura de columnas en la misma fila */
#table_publicadas {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

#table_publicadas > [class*='col-'] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important; /* Anula float de Bootstrap 3 */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.course-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100% !important;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.course-card .course-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

.course-card .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card .course-code-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #c0392b;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.course-card .course-content {
    padding: 20px;
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
}

.course-card .course-title {
    color: #113B6A;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px 0;
    line-height: 1.5em;
}

.course-card .course-info-wrapper {
    display: flex;
    gap: 15px;
    margin-top: auto !important; /* Empuja este elemento y los siguientes hacia abajo */
    margin-bottom: 10px;
    align-items: center;
}

.course-card .course-details {
    flex: 1;
    color: #23527c;
    font-size: 13px;
}

.course-card .course-details p {
    margin: 5px 0;
}

.course-card .course-details i {
    width: 20px;
}

.course-card .pdf-button-wrapper {
    display: flex;
    align-items: center;
}

.course-card .btn-pdf {
    padding: 12px 15px;
    white-space: nowrap;
}

.course-card .btn-pdf span {
    font-size: 10px;
}

.course-card .action-buttons {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.course-card .btn-info-compact {
    flex: 0 0 auto;
    padding: 8px 15px;
}

.course-card .btn-primary-large {
    flex: 1;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: bold;
}

/* ========================================
   ALERTAS DE COUNTDOWN
   ======================================== */

.countdown-alert {
    font-size: 12px;
    margin-bottom: 15px;
    min-height: 45px !important; /* Reserva espacio fijo para countdown */
    display: flex !important;
    align-items: center !important;
}

.countdown-banner {
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
}

.countdown-blue {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.countdown-red {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
/* ========================================
   MODALES - SIEMPRE ENCIMA DE TODO
   ======================================== */

/* Asegurar que las modales siempre est�n por encima del navbar y otros elementos */
.modal {
    z-index: 100000 !important; /* Por encima de navbar (z-index: 9999) */
}

.modal-backdrop {
    z-index: 99999 !important; /* Justo debajo de la modal pero encima del navbar */
}

/* Desactivar interacciones del navbar cuando hay modal abierta */
body.modal-open .main-navigation,
body.modal-open .navbar-collapse {
    pointer-events: none; /* Desactiva clicks y hover */
}

/* Restaurar interacciones solo en la modal */
body.modal-open .modal,
body.modal-open .modal * {
    pointer-events: auto;
}

/* ========================================
   PAGINACI�N MODERNA
   ======================================== */

.pagination-wrapper {
    display: inline-block;
}

.pagination-wrapper ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.pagination-wrapper ul li {
    display: inline-block;
}

.pagination-wrapper ul li a,
.pagination-wrapper ul li strong {
    display: block;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #113B6A;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination-wrapper ul li a:hover {
    background: #1c6fb7;
    color: #fff;
    border-color: #1c6fb7;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(28, 111, 183, 0.3);
}

.pagination-wrapper ul li strong {
    background: #1c6fb7;
    color: #fff;
    border-color: #1c6fb7;
}

.pagination-wrapper ul li.disabled a {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 576px) {
    .pagination-wrapper ul li a,
    .pagination-wrapper ul li strong {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* ========================================
   ESTILOS PARA AUTORIZACI�N DE JEFATURA
   ======================================== */

.authorization-buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.btn-authorization {
    padding: 10px 20px;
    white-space: nowrap;
}