/* ====================================================================
   NIKLAS PARTNERS - ENCABEZADO (logo + menú)
   Archivo único para el header. Reemplaza a:
   - css/custom-fix-logo.css
   - las reglas de nav/logo del <style> interno de index.html
   - el script enforceLogoStyles y js/force-logo.js
   Cargar SIEMPRE después de theme-1.css y custom.css.

   Desktop:     1200px en adelante (menú horizontal)
   Responsive:  hasta 1199px (menú hamburguesa)
   ==================================================================== */

/* --------------------------------------------------------------------
   COMÚN
   -------------------------------------------------------------------- */
.nav-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* El nav deja de ser absolute/fixed dentro del contenedor fijo:
   así el contenedor tiene altura real y nada se descuadra al hacer scroll */
.nav-container nav.top-bar,
.nav-container nav.top-bar.nav-sticky {
    position: relative !important;
    top: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.nav-container .top-bar > .container {
    position: relative;
}

/* Enlace e imagen del logo: sin desplazamientos heredados del theme */
.nav-container .top-bar .nav-menu > .col-md-3 > a {
    display: block !important;
    line-height: 0 !important;
}

.nav-container .top-bar .nav-menu img.logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Sin pseudo-elementos sobrantes (la famosa letra "a") */
.nav-container .mobile-toggle:before,
.nav-container .mobile-toggle:after,
.nav-container .has-dropdown:after {
    content: none !important;
    display: none !important;
}

/* --------------------------------------------------------------------
   DESKTOP: 1200px en adelante
   Fila en flex: logo y menú comparten el mismo centro vertical
   -------------------------------------------------------------------- */
@media (min-width: 1200px) {

    .nav-container nav.top-bar,
    .nav-container nav.top-bar.nav-sticky {
        padding: 4px 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .nav-container .top-bar .nav-menu {
        display: flex !important;
        align-items: center !important;
        padding-top: 0 !important;
    }

    .nav-container .top-bar .nav-menu > .col-md-3 {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        line-height: normal !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .nav-container .top-bar .nav-menu img.logo {
        height: 40px !important;
    }

    .nav-container .top-bar .menu {
        display: inline-block !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-container .top-bar .menu li {
        float: left !important;
        margin: 0 56px 0 0 !important;
        padding: 0 !important;
    }

    .nav-container .top-bar .menu li:last-child {
        margin-right: 0 !important;
    }

    /* Padding simétrico arriba/abajo = texto centrado */
    .nav-container .top-bar .menu li a {
        padding: 40px 0 !important;
        line-height: 14px !important;
    }

    .nav-container .mobile-toggle {
        display: none !important;
    }
}

/* --------------------------------------------------------------------
   RESPONSIVE: hasta 1199px
   Barra de 80px con logo centrado; el menú se despliega debajo
   -------------------------------------------------------------------- */
@media (max-width: 1199px) {

    .nav-container nav.top-bar,
    .nav-container nav.top-bar.nav-sticky {
        padding: 0 !important;
        max-height: 80px !important;
        overflow: hidden !important;
        -webkit-transition: max-height .4s ease !important;
        transition: max-height .4s ease !important;
    }

    /* Menú abierto (scripts.js agrega .open-nav al hacer clic) */
    .nav-container nav.top-bar.open-nav,
    .nav-container nav.top-bar.nav-sticky.open-nav {
        max-height: 600px !important;
        overflow-y: auto !important;
    }

    .nav-container .top-bar .nav-menu {
        display: block !important;
        padding-top: 0 !important;
    }

    .nav-container .top-bar .nav-menu > .columns {
        width: 100% !important;
        float: none !important;
    }

    /* Columna del logo: exactamente la altura de la barra */
    .nav-container .top-bar .nav-menu > .col-md-3 {
        display: flex !important;
        align-items: center !important;
        height: 80px !important;
        line-height: normal !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 70px !important; /* espacio para el botón hamburguesa */
    }

    .nav-container .top-bar .nav-menu img.logo {
        height: 30px !important;
    }

    /* Columna del menú: altura libre, alineado a la izquierda */
    .nav-container .top-bar .nav-menu > .col-md-9 {
        height: auto !important;
        line-height: normal !important;
        text-align: left !important;
        padding-bottom: 16px !important;
    }

    .nav-container .top-bar .menu {
        display: block !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 8px 0 0 !important;
        border-top: 1px solid #eeeeee;
    }

    .nav-container .top-bar .menu li {
        float: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-container .top-bar .menu li a {
        display: block !important;
        padding: 12px 0 !important;
        line-height: 16px !important;
        color: #777777 !important;
    }

    .nav-container .top-bar .menu li a:hover {
        color: #333333 !important;
    }

    /* Botón hamburguesa centrado en la barra de 80px */
    .nav-container .mobile-toggle {
        display: block !important;
        position: absolute !important;
        top: 24px !important;
        right: 15px !important;
        height: 32px !important;
        font-size: 32px !important;
        line-height: 32px !important;
        color: #333333 !important;
        cursor: pointer !important;
        z-index: 5 !important;
    }

    .nav-container .mobile-toggle i {
        display: inline-block !important;
        font-style: normal !important;
        line-height: 32px !important;
    }
}

/* --------------------------------------------------------------------
   FOCO DE LOS ENLACES DEL MENÚ
   Bootstrap 3 dibuja un recuadro (outline) en a:focus al hacer clic.
   Se elimina para mouse/táctil y se mantiene una marca discreta
   solo al navegar con teclado (accesibilidad).
   -------------------------------------------------------------------- */
.nav-container .top-bar .menu li a:focus,
.nav-container .top-bar .menu li a:active,
.nav-container .top-bar .nav-menu > .col-md-3 > a:focus,
.nav-container .mobile-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

.nav-container .top-bar .menu li a:focus-visible,
.nav-container .top-bar .nav-menu > .col-md-3 > a:focus-visible {
    color: #333333 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}