/* ===================================
   HEADER CONTAINER - ESPECIFICACIONES EXACTAS
   =================================== */

.header {
    width: 1897px;
    height: 140px;
    background: #ffffff;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
    position: relative;
    margin: 0 auto;
    z-index: 1001; /* MÁS ALTO que el submenu */
}

/* Logo - Imagen izquierda */
.logo-container {
    position: absolute;
    top: 20px;
    left: 32px;
    width: 888px;
    height: 100px;
}

.logo-container img,
.site-logo {
    width: 888px;
    height: 100px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* Navbar wrapper - Contenedor relativo para posicionamiento absoluto de items */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
}

/* Menu items - Contenedor sin flex */
.nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    height: 140px;
}

.nav-menu li {
    position: absolute;
    height: 32px;
    top: 57px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.nav-menu a {
    font-family: 'Bebas Neue Pro', 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-stretch: semi-expanded;
    font-size: 28px;
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    height: 32px;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    color: #394049 !important;
    padding: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: #ffffff !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-menu a:hover,
.nav-menu a:focus {
    color: #00A499 !important;
    border-bottom: 3px solid #EA7600 !important;
    background: #ffffff !important;
}

/* Estado activo - cuando estás en esa página */
.nav-menu a.active {
    color: #00A499 !important;
    border-bottom: 3px solid #EA7600 !important;
    background: #ffffff !important;
}

/* Posiciones y anchos exactos según Figma */
.nav-menu li:nth-child(1) {
    left: 782px;
    width: 78px;
}

.nav-menu li:nth-child(2) {
    left: 904px;
    width: 142px;
}

.nav-menu li:nth-child(3) {
    left: 1077px;
    width: 118px;
}

.nav-menu li:nth-child(4) {
    left: 1232px;
    width: 93px;
}

.nav-menu li:nth-child(5) {
    left: 1354px;
    width: 127px;
}

.nav-menu li:nth-child(6) {
    left: 1515px;
    width: 154px;
}

.nav-menu li:nth-child(7) {
    left: 1697px;
    width: 61px;
}

/* ===================================
   DROPDOWNS - NAVBAR
   =================================== */

/* Contenedor del submenu - BASE */
.sub-menu {
    position: fixed;
    top: 171px;
    left: 893px;
    width: 887px;
    height: 409px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* AGREGADO: Crear un área invisible arriba del submenu para mantener el hover */
.sub-menu::before {
    content: '';
    position: absolute;
    top: -31px;
    left: 0;
    width: 100%;
    height: 31px;
    background: transparent;
    z-index: 1;
}

/* Mostrar submenu cuando el padre está hover O cuando está sobre el submenu */
.nav-menu li:hover > .sub-menu,
.sub-menu:hover {
    display: block;
}

/* Elemento del submenu */
.sub-menu li {
    position: absolute;
    height: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent !important;
    z-index: 2;
}

/* ========================================
   MENÚ JEFATURA (segundo elemento del nav)
   ======================================== */

/* CAMBIADO: Posicionamiento movido más abajo */
.nav-menu > li:nth-child(2) .sub-menu li:nth-child(1) {
    top: 30px;
    left: 42px;
    width: 82px;
}

.nav-menu > li:nth-child(2) .sub-menu li:nth-child(2) {
    top: 93px;
    left: 41px;
    width: 348px;
}

.nav-menu > li:nth-child(2) .sub-menu li:nth-child(3) {
    top: 156px;
    left: 42px;
    width: 276px;
}

.nav-menu > li:nth-child(2) .sub-menu li:nth-child(4) {
    top: 219px;
    left: 42px;
    width: 288px;
}

/* ========================================
   MENÚ ESTUDIANTES (tercer elemento del nav)
   ======================================== */

.nav-menu > li:nth-child(3) .sub-menu li:nth-child(1) {
    top: 30px; 
    left: 200px;
    width: 261px;
}

.nav-menu > li:nth-child(3) .sub-menu li:nth-child(2) {
    top: 93px; 
    left: 201px;
    width: 175px;
}

.nav-menu > li:nth-child(3) .sub-menu li:nth-child(3) {
    top: 156px;
    left: 200px;
    width: 348px;
}

.nav-menu > li:nth-child(3) .sub-menu li:nth-child(4) {
    top: 219px; 
    left: 201px;
    width: 276px;
}

.nav-menu > li:nth-child(3) .sub-menu li:nth-child(5) {
    top: 282px; 
    left: 201px;
    width: 288px;
}

/* ========================================
   MENÚ DOCENTES (cuarto elemento del nav)
   ======================================== */

.nav-menu > li:nth-child(4) .sub-menu li:nth-child(1) {
    top: 30px; 
    left: 351px; /* 1244px - 893px */
    width: 130px;
}

.nav-menu > li:nth-child(4) .sub-menu li:nth-child(2) {
    top: 93px; 
    left: 352px; /* 1245px - 893px */
    width: 82px;
}

.nav-menu > li:nth-child(4) .sub-menu li:nth-child(3) {
    top: 156px; 
    left: 351px; /* 1244px - 893px */
    width: 348px;
}

.nav-menu > li:nth-child(4) .sub-menu li:nth-child(4) {
    top: 219px; 
    left: 352px; /* 1245px - 893px */
    width: 276px;
}

.nav-menu > li:nth-child(4) .sub-menu li:nth-child(5) {
    top: 282px; 
    left: 352px; /* 1245px - 893px */
    width: 288px;
}

/* ========================================
   MENÚ FUNCIONARIOS (quinto elemento del nav)
   ======================================== */

.nav-menu > li:nth-child(5) .sub-menu li:nth-child(1) {
    top: 30px; 
    left: 470px; /* 1363px - 893px */
    width: 130px;
}

.nav-menu > li:nth-child(5) .sub-menu li:nth-child(2) {
    top: 93px; 
    left: 471px; /* 1364px - 893px */
    width: 82px;
}

.nav-menu > li:nth-child(5) .sub-menu li:nth-child(3) {
    top: 156px; 
    left: 470px; /* 1363px - 893px */
    width: 348px;
}

.nav-menu > li:nth-child(5) .sub-menu li:nth-child(4) {
    top: 219px; 
    left: 471px; /* 1364px - 893px */
    width: 276px;
}

.nav-menu > li:nth-child(5) .sub-menu li:nth-child(5) {
    top: 282px;
    left: 471px; /* 1364px - 893px */
    width: 288px;
}

/* ========================================
   MENÚ DOCUMENTACIÓN (sexto elemento del nav)
   ======================================== */

.nav-menu > li:nth-child(6) .sub-menu li:nth-child(1) {
    top: 30px; 
    left: 625px; /* 1518px - 893px */
    width: 116px;
}

.nav-menu > li:nth-child(6) .sub-menu li:nth-child(2) {
    top: 93px; 
    left: 626px; /* 1519px - 893px */
    width: 98px;
}

.nav-menu > li:nth-child(6) .sub-menu li:nth-child(3) {
    top: 156px; 
    left: 625px; /* 1518px - 893px */
    width: 90px;
}

.nav-menu > li:nth-child(6) .sub-menu li:nth-child(4) {
    top: 219px; 
    left: 626px; /* 1519px - 893px */
    width: 101px;
}

.nav-menu > li:nth-child(6) .sub-menu li:nth-child(5) {
    top: 282px; 
    left: 626px; /* 1519px - 893px */
    width: 194px;
}

.nav-menu > li:nth-child(6) .sub-menu li:nth-child(6) {
    top: 345px; 
    left: 626px; /* 1519px - 893px */
    width: 157px;
}

/* Links del submenu */
.sub-menu a {
    width: 100%;
    height: 32px;
    font-family: 'Bebas Neue Pro', sans-serif;
    font-weight: 700;
    font-stretch: semi-expanded;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #394049 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 !important;
    transition: background-color 0.3s ease;
    text-decoration: none;
    border-radius: 0;
    box-sizing: border-box;
    position: relative;
    left: 0;
    top: 0;
}

/* Hover state para JEFATURA - rectángulo movido a la izquierda */
.nav-menu > li:nth-child(2) .sub-menu a:hover::before,
.nav-menu > li:nth-child(2) .sub-menu a:focus::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 393px;
    height: 60px;
    background-color: #00A4994D;
    border-radius: 5px;
    z-index: -1;
}

/* Hover state para ESTUDIANTES - rectángulo según posición */
.nav-menu > li:nth-child(3) .sub-menu a:hover::before,
.nav-menu > li:nth-child(3) .sub-menu a:focus::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 393px;
    height: 60px;
    background-color: #00A4994D;
    border-radius: 5px;
    z-index: -1;
}

/* Hover state para DOCENTES - rectángulo según posición */
.nav-menu > li:nth-child(4) .sub-menu a:hover::before,
.nav-menu > li:nth-child(4) .sub-menu a:focus::before {
    content: '';
    position: absolute;
    left: -22px; /* 1222px - 1244px = -22px */
    top: 50%;
    transform: translateY(-50%);
    width: 393px;
    height: 60px;
    background-color: #00A4994D;
    border-radius: 5px;
    z-index: -1;
}

/* Hover state para FUNCIONARIOS - rectángulo según posición */
.nav-menu > li:nth-child(5) .sub-menu a:hover::before,
.nav-menu > li:nth-child(5) .sub-menu a:focus::before {
    content: '';
    position: absolute;
    left: -21px; /* 1342px - 1363px = -21px */
    top: 50%;
    transform: translateY(-50%);
    width: 393px;
    height: 60px;
    background-color: #00A4994D;
    border-radius: 5px;
    z-index: -1;
}

/* Hover state para DOCUMENTACIÓN - rectángulo según posición */
.nav-menu > li:nth-child(6) .sub-menu a:hover::before,
.nav-menu > li:nth-child(6) .sub-menu a:focus::before {
    content: '';
    position: absolute;
    left: -21px; /* 1497px - 1518px = -21px */
    top: 50%;
    transform: translateY(-50%);
    width: 246px; /* Ancho específico para Documentación */
    height: 60px;
    background-color: #00A4994D;
    border-radius: 5px;
    z-index: -1;
}

.sub-menu a:hover,
.sub-menu a:focus {
    color: #394049 !important;
    background: transparent !important;
    border: none !important;
}

/* Sobrescribir cualquier clase de WordPress que agregue fondos */
.sub-menu li.current-menu-item,
.sub-menu li.current-menu-parent,
.sub-menu li.menu-item {
    background: transparent !important;
}

.sub-menu li.current-menu-item > a,
.sub-menu li.current-menu-parent > a {
    background: transparent !important;
    color: #394049 !important;
}

/* Agregar esto al elemento del navbar que tiene el submenu JEFATURA */
.nav-menu > li:nth-child(2) {
    left: 904px;
    width: 142px;
}

/* AGREGADO: Extender el área de hover hacia abajo para JEFATURA */
.nav-menu > li:nth-child(2)::after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 31px;
    background: transparent;
    z-index: 998;
}

/* AGREGADO: Extender el área de hover hacia abajo para ESTUDIANTES */
.nav-menu > li:nth-child(3)::after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 31px;
    background: transparent;
    z-index: 998;
}

/* AGREGADO: Extender el área de hover hacia abajo para DOCENTES */
.nav-menu > li:nth-child(4)::after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 31px;
    background: transparent;
    z-index: 998;
}

/* AGREGADO: Extender el área de hover hacia abajo para FUNCIONARIOS */
.nav-menu > li:nth-child(5)::after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 31px;
    background: transparent;
    z-index: 998;
}

/* AGREGADO: Extender el área de hover hacia abajo para DOCUMENTACIÓN */
.nav-menu > li:nth-child(6)::after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 31px;
    background: transparent;
    z-index: 998;
}