/* Ancho real de la barra de scroll vertical, medido por
   js/scrollbar-width.js (carga en TODAS las páginas). 0px es el
   valor de respaldo mientras el JS no ha corrido, o si llegara a
   fallar — equivale al comportamiento de macOS con scrollbar
   superpuesta (0px reservados). Se usa para corregir el bug de
   "width:100vw incluye el ancho de la scrollbar" en cualquier
   técnica full-bleed del sitio (ver sección del encabezado). */
:root {
    --sbw: 0px;
}

/* ============================================================ */
/* ===== 0. RED DE SEGURIDAD: CONTENCIÓN DE CARRUSELES SLICK === */
/* ============================================================ */
/* Por qué existe esta sección:
   Slick.js calcula el ancho de cada slide MIDIENDO en JavaScript
   el contenedor donde vive. Si ese contenedor no tiene un límite
   de ancho definido (por ejemplo, si un CSS de página específica
   falla al cargar, o si el layout es un flex-item sin min-width),
   el cálculo se puede disparar sin control: se detectó un caso
   real donde un slide terminó con un ancho de 17.444px, generando
   un scroll horizontal de más de 120.000px en toda la página.

   Esta regla vive aquí (style.css = carga en TODAS las páginas)
   en vez de en home.css, porque el problema no es exclusivo de
   la portada: cualquier carrusel Slick del sitio puede sufrirlo. */

/* Corrige el bug clásico de Flexbox: un hijo con contenido más
   ancho que su columna puede forzar el crecimiento de la columna
   completa (y de la página) si esta no tiene min-width: 0.
   "overflow: hidden" es igual de necesario: min-width:0 evita que
   LA COLUMNA crezca, pero sin esto, un hijo que igual se desborda
   por dentro (por ejemplo un Slick mal medido) sigue empujando el
   ancho de toda la página aunque la columna se vea del tamaño
   correcto — se detectó exactamente este caso en un carrusel de
   Views que aún no tiene su propio CSS. */
.layout__region {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* El "visor" del carrusel siempre debe recortar lo que no cabe. */
.slick-list {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Tope de emergencia: ningún slide individual debería necesitar
   más que el ancho de la ventana. Si Slick calcula mal (como en
   el incidente descrito arriba), esto evita que se repita. */
.slick-slide {
    max-width: 100vw !important;
}

/* ============================================================ */
/* ===== 1. RESETEO Y FUENTES GLOBALES =====                    */
/* ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
li,
button,
input {
    font-family: 'Karla', sans-serif !important;
}

#page-wrapper p,
#page-wrapper li {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #333333;
}

html,
body,
#page-wrapper {
    /* overflow-x: hidden !important; ELIMINADO PARA PERMITIR STICKY HEADER */
    /* "overflow: hidden" convierte al elemento en un contenedor de
       scroll, y eso rompe "position: sticky" en el encabezado si
       queda entre el header y el viewport — por eso se quitó.
       "overflow: clip" recorta visualmente igual que "hidden" pero
       NO crea un contenedor de scroll, así que no interfiere con
       el sticky. Esto tapa el resto de scroll horizontal (~15-17px)
       típico de mezclar "width: 100vw" con la barra de scroll
       vertical del navegador (100vw incluye el ancho de la barra,
       el viewport visible no) — se ve solo en Windows/Chrome con
       scrollbar clásica, por eso no siempre es reproducible. */
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar enlace de accesibilidad */
.skip-link,
.visually-hidden-focusable,
a.skip-link {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================ */
/* ===== 2. CORRECCIÓN LÍNEA BLANCA SUPERIOR =====              */
/* ============================================================ */
/* Forzamos a cero todos los márgenes fantasma de Drupal */
html,
body,
#page-wrapper,
#page,
header#header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================ */
/* ===== 3. TOP BAR GOV.CO (AZUL OFICIAL) =====                 */
/* ============================================================ */
.region-top-header {
    background-color: #004884 !important;
    /* Azul Gov.co - Cumple la norma */
    margin: 0 !important;
    padding: 8px 0 !important;
    width: 100% !important;
}

/* Contenedor interno centrado */
.region-top-header .block-content-basic {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.region-top-header,
#navbar-top,
.top-header {
    background-color: #0943b5 !important;
    padding: 0 20px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.region-top-header img {
    height: 55px !important;
    width: auto !important;
    margin-top: -3px !important;
    transition: transform 0.3s ease;
}

.region-top-header img:hover {
    transform: scale(1.1);
}

/* ============================================================ */
/* ===== 3. HEADER BLANCO FIJO (LOGOS, MENÚ Y EFECTOS PRO) ==== */
/* ============================================================ */
/* Dejamos el overflow visible para que el Sticky despierte */
body,
html,
#page,
#page-wrapper,
.layout-container,
header,
#header {
    overflow: visible !important;
}

#header .navbar-expand-md {
    background: #ffffff !important;
    position: sticky;
    top: 0;
    z-index: 400;
    /* Corregido con --sbw (ver arriba): "100vw" por sí solo incluye
       el ancho de la scrollbar vertical y deja el header corrido
       ~7-8px en cada lado en Windows/Chrome. Antes esto se tapaba
       con "overflow-x: clip" en html/body, pero eso solo oculta el
       síntoma (evita el scrollbar) sin corregir el ancho real del
       elemento — por eso seguía viéndose un corte en el borde. */
    width: calc(100vw - var(--sbw)) !important;
    margin-left: calc(50% - 50vw + (var(--sbw) / 2)) !important;
    margin-right: calc(50% - 50vw + (var(--sbw) / 2)) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box !important;

    /* FIJAMOS EL TAMAÑO PARA QUE NO CREZCA LA BARRA AL AGRANDAR LOGOS */
    height: 90px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(20px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(20px, calc((100vw - 1200px) / 2)) !important;

    /* ALINEACIÓN PERFECTA (Mismo espacio a la izquierda y derecha) */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

/* Compensa la barra de Admin de Drupal */
body.toolbar-fixed #header .navbar-expand-md {
    top: 39px;
}

body.toolbar-fixed.toolbar-tray-open #header .navbar-expand-md {
    top: 79px;
}

/* --------------------------------------------------- */
/* LOGOS A LA IZQUIERDA                                */
/* --------------------------------------------------- */
/* Atacamos los IDs específicos de tus bloques para ponerlos en línea */
.block-block-content8d14defc-add5-4515-8fd9-fbb9115ff668,
.block-block-content90e60b1a-9dbf-4fe5-97c6-5f98b259fece,
#header .navbar-expand-md>div.block-block-content {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 20px !important;
    margin-left: 0 !important;
}

#header .navbar-expand-md img {
    height: 70px !important;
    width: auto;
    max-width: 100%;
    transition: transform 0.3s ease;
    padding: 2px 0;
}

/* --------------------------------------------------- */
/* MENÚ A LA DERECHA Y EFECTOS HOVER                   */
/* --------------------------------------------------- */
/* EL TRUCO DEL RESORTE: margin-left: auto empuja el menú a la derecha */
#block-subalab-subtheme-menudenavegacion,
#header .navbar-expand-md>nav {
    margin-left: auto !important;
}

@media (min-width: 769px) {
    .navbar-toggler {
        display: none !important;
    }

    .nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
        align-items: center !important;
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }
}

.nav {
    list-style: none !important;
    padding-left: 0 !important;
}

/* ESTADO NORMAL DEL BOTÓN (Reseteo para evitar bugs de Drupal) */
.nav-link {
    color: #4a4a4a !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    transform: scale(1) !important;
    box-shadow: none !important;
}

/* EL EFECTO MÁGICO (ZOOM + CAJA CYAN) - ¡Solo al pasar el mouse! */
.nav-link:hover {
    color: #00e7ff !important;
    background-color: rgba(0, 231, 255, 0.08) !important;
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 231, 255, 0.15) !important;
}

/* ESTADO ACTIVO REAL (Sutil, para saber en qué página estás) */
.nav-link.is-active {
    color: #004884 !important;
    /* El azul oficial de la barra superior */
}

/* --------------------------------------------------- */
/* MÓVILES                                             */
/* --------------------------------------------------- */
.navbar-toggler {
    border: none !important;
    background: transparent !important;
    margin-left: auto !important;
}

.navbar-toggler::after {
    content: "☰";
    font-size: 26px;
    color: #333;
}

@media (max-width: 768px) {

    #block-subalab-subtheme-menudenavegacion,
    #header .navbar-expand-md>nav {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* DISEÑO DE LA CAJA DESPLEGABLE MÓVIL */
    .navbar-collapse {
        width: 100% !important;
        background: #f9f9f9 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        padding: 0 !important;
    }

    .navbar-collapse.show .nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }

    /* CONTROL EXACTO DE CUANDO SE MUESTRA/OCULTA */
    .navbar-collapse:not(.show) {
        display: none !important;
    }

    #header .navbar-expand-md {
        padding: 10px 20px !important;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    #header .navbar-expand-md img {
        height: 45px !important;
    }

    .nav-link:hover {
        transform: scale(1.02) !important;
    }

    /* Zoom suave en móvil */
}

/* ============================================================ */
/* ===== 5. AJUSTES MÓVILES (REPARACIÓN DE PANTALLA ROTA) ===== */
/* ============================================================ */
@media (max-width: 768px) {

    /* Alineación de los dos logos en celular */
    .block-block-content8d14defc-add5-4515-8fd9-fbb9115ff668,
    .block-block-content90e60b1a-9dbf-4fe5-97c6-5f98b259fece {
        display: inline-block !important;
        margin: 0 5px !important;
    }

    #header .navbar-expand-md img {
        height: 45px !important;
    }

    #header .navbar-expand-md img[src*="aprende"],
    #header .navbar-expand-md img[src*="Aprende"] {
        height: 55px !important;
    }

    /* Menú Hamburguesa en la derecha */
    .navbar-toggler {
        margin-left: auto !important;
        border: none !important;
        background: transparent !important;
        padding: 5px !important;
    }

    .navbar-toggler::after {
        content: "☰";
        font-size: 28px;
        color: #004884;
    }

    /* Despliegue del menú en celular */
    .navbar-collapse.show .nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        background: #f9f9f9 !important;
        padding: 20px !important;
        border-radius: 10px !important;
        margin-top: 15px !important;
    }
}

/* ============================================================ */
/* SECCIÓN 6 Y 7: MIGRADO OFICIALMENTE A HOME.CSS               */
/* ============================================================ */


/* ============================================================ */
/* ============================================================ */
/* SECCIÓN 8: GRID DE CURSOS -> MIGRADO A HOME.CSS              */
/* ============================================================ */

/* ============================================================ */
/* ===== 9. FOOTER PRO (TEXTOS VISIBLES Y ORDENADOS) =====      */
/* ============================================================ */
footer.site-footer {
    background: #1a1a24 !important;
    /* Forza el color oscuro de fondo */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}

.region-footer-fifth {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    background: transparent !important;
    width: 100% !important;
    max-width: 1200px !important;
    /* Centrado estricto como Atenea */
    margin: 0 auto !important;
    padding: 60px 20px 20px 20px !important;
    box-sizing: border-box;
}

/* Hacemos visibles los textos sobre fondo negro */
.region-footer-fifth p,
.region-footer-fifth li,
.region-footer-fifth div {
    color: #d1d1d1 !important;
}

.region-footer-fifth ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.region-footer-fifth li {
    margin-bottom: 12px;
}

.region-footer-fifth a {
    color: #00e7ff !important;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 15px;
}

.region-footer-fifth a:hover {
    filter: brightness(1.2);
}

.region-footer-fifth h2 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
}

/* Políticas ordenadas y sin aplastar */
nav.menu--enlaces-pie-de-pagina ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Copyright centrado abajo */
.region-footer-fifth>.block:last-child {
    grid-column: 1 / -1;
    text-align: center;
    border-top: 1px solid #33333e;
    padding-top: 25px;
    margin-top: 20px;
    color: #7a7a8c !important;
    font-size: 14px;
    width: 100%;
}

@media (max-width: 768px) {
    .region-footer-fifth {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 20px 20px 20px !important;
    }
}

/* =========================================
   11. SECCIÓN LAB EN MOVIMIENTO (2 Columnas)
========================================= */
.layout--twocol-section {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
}

.layout--twocol-section .layout__region--first {
    padding-right: 40px !important; /* Crea el espacio sin romper la grilla de columnas de Drupal */
    box-sizing: border-box !important;
}

.layout--twocol-section .layout__region img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 15px auto;
}

/* ============================================================ */
/* ============================================================ */
/* SECCIÓN 13: CARRUSEL SUBA-TIC -> MIGRADO A HOME.CSS          */
/* ============================================================ */

/* ============================================================ */
/* ===== 14. CORRECCIONES Y FIXES RESPONSIVOS CELULAR ========= */
/* ============================================================ */
@media (max-width: 768px) {
    /* 3. Lab en movimiento - 2 columnas -> 1 columna */
    .layout--twocol-section {
        flex-direction: column !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 40px !important;
    }
    .layout--twocol-section .layout__region--first {
        padding-right: 0 !important;
        margin-bottom: 30px !important;
        width: 100% !important;
        text-align: center !important;
    }
    .layout--twocol-section .layout__region--second {
        width: 100% !important;
    }
    
    /* 4. Solución del Header blanco desplazado */
    #header .navbar-expand-md {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* =========================================
   PIE DE PÁGINA (FOOTER) CENTRADO SIMPLE
========================================= */
/* Limpiar cualquier fondo de Drupal nativo o bordes */
footer, #footer, .site-footer, .footer-wrapper, #footer-wrapper, 
.site-footer div, .site-footer section, .site-footer ul, .site-footer li, .site-footer p {
    background: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

/* El fondo único del footer (Color institucional plano y profundo) */
footer, #footer, .site-footer, footer.bg-dark {
    background: #0d2240 !important; /* El color de fondo único */
    padding: 50px 0 20px 0 !important;
    border-top: 5px solid #28a745 !important; /* Delineado verde sutil (color Suba) */
    text-align: center !important; /* Todo centrado */
}

/* Anular el Flexbox que rompía la estructura y forzar centrado de bloques */
.site-footer > .container > .row,
.site-footer > .container,
.site-footer .region {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* Forzar que TODO el texto sea BLANCO IMPOLUTO */
.site-footer, .site-footer * {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* Arreglar listas (Enlaces de politicas) para que no tengan puntos y se centren */
.site-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px auto !important;
    display: inline-block !important; /* Ayuda a que la lista se centre */
}

.site-footer ul li {
    padding: 5px 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Enlaces (Cian por contraste, pero planos) */
.site-footer a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: normal !important;
    display: inline-block !important;
    margin-bottom: 5px !important;
}
.site-footer a:hover {
    color: #38bdf8 !important; /* Toque tenue al pasar el mouse por si acaso */
}

/* Espaciado del copyright */
.site-footer__bottom, .footer-bottom, .region-footer-fifth {
    margin-top: 30px !important;
}