/*
 * Barra superior en si: lo que no es el menu de cuenta (cuenta-usuario.css), ni el
 * panel de cada modulo (megamenu.css), ni la busqueda global (busqueda-global.css).
 *
 *   - Ayuda y campana: botones de icono y contador de notificaciones.
 *   - Barra de escritorio: hamburguesa (solo <980px) y modulo de la seccion actual.
 *   - Barra apilada (<980px, tablet vertical o ventana angosta): busqueda en la
 *     primera fila, grupo derecho al final, etiquetas de los iconos, seccion actual.
 *   - Barra movil (celular): contador de la campana. El cajon del menu y la barra fija
 *     estan en cajon-movil.css.
 *
 * Se carga despues de cuenta-usuario.css y megamenu.css (header.php). Los selectores
 * llevan la cadena completa del tema para ganarle sin !important; las trampas del
 * tema estan en la seccion "La barra superior" de agents/marca_blanca/AGENTS.md.
 */

/* ===== 1. Ayuda y campana =====
   Botones de 38x38, iguales en reposo y en hover. El tema les daba padding en el
   li, el enlace y el icono (~53px entre centros) y en hover cambiaba esas medidas
   para dibujar la pastilla, asi que el icono saltaba. */

html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li),
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li):hover,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li).open {
    padding: 6px 2px;
}

html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li) > a.glyphicons,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li):hover > a.glyphicons,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li).open > a.glyphicons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    line-height: 1;
    transition: background-color .15s ease;
}

html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li):hover > a.glyphicons,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li).open > a.glyphicons {
    background: rgba(0, 0, 0, .2);
}

html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li) > a.glyphicons:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li) > a.glyphicons > i,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li):hover > a.glyphicons > i,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li).open > a.glyphicons > i {
    position: relative;
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    line-height: 1;
}

html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li) > a.glyphicons > i:before,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li):hover > a.glyphicons > i:before,
html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li).open > a.glyphicons > i:before {
    position: static;
    display: block;
    height: auto;
    line-height: 1;
}

/* Contador de la campana como insignia blanca. El tema solo lo subia 8px, sin
   posicion horizontal, y en rojo sobre la barra roja. Vacio (sin notificaciones),
   no se ve. La posicion en movil se ajusta en la seccion 6. */
html.top-full .navbar.main .topnav.pull-right > li.soporte > a.glyphicons > i > #notification-count,
html.top-full .navbar.main .topnav.sesion > li.account > a.notificaciones > i > #notification-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 2px var(--siag-brand, #4888be);
    box-sizing: border-box;
    color: var(--siag-brand-dark-3, #2f6492);
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

html.top-full .navbar.main .topnav.pull-right > li.soporte > a.glyphicons > i > #notification-count:empty,
html.top-full .navbar.main .topnav.sesion > li.account > a.notificaciones > i > #notification-count:empty {
    display: none;
}

/* Insignia del contador: el <i> de la campana mide lo que la barra (49px) y el
   glifo va centrado, asi que se ancla al <i> y se baja hasta el borde del glifo */
html.top-full .navbar.main .topnav.sesion > li.account > a.notificaciones > i {
    position: relative;
}

html.top-full .navbar.main .topnav.sesion > li.account > a.notificaciones > i > #notification-count {
    top: 8px;
    right: 2px;
}

/* Con la tarjeta o la lista abiertas el tema aplica .open a todo el li y encoge el
   <i> a 22px con el glifo arriba: la insignia vuelve a la esquina del glifo */
html.top-full .navbar.main .topnav.sesion > li.account.open > a.notificaciones > i > #notification-count,
html.top-full .navbar.main .topnav.sesion > li.account:hover > a.notificaciones > i > #notification-count {
    top: -7px;
    right: -6px;
}

/* ===== Etiquetas de ayuda, campana y lupa en la barra apilada =====
   En la barra horizontal van solo los iconos (convencion de barra superior y espacio
   reservado por navigationResize). Apilada (<980px), cada uno ocupa una fila como los
   modulos, que si llevan nombre: ahi la etiqueta evita adivinar que hace cada icono. */
.navbar.main .barra-etiqueta {
    display: none;
}

@media (max-width: 979px) {
    html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li) > a.glyphicons,
    html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li):hover > a.glyphicons,
    html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li).open > a.glyphicons {
        justify-content: flex-start;
        gap: 12px;
        width: auto;
        padding: 0 14px;
    }

    html.top-full .navbar.main .topnav.pull-right > li.soporte:not(.cuenta-li) > a.glyphicons > i {
        flex: 0 0 18px;
        text-align: center;
    }

    html.top-full .navbar.main .topnav.pull-right > li.soporte > a.glyphicons > .barra-etiqueta {
        display: inline;
        float: none;
        padding: 0;
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        line-height: 1;
    }
}

/* ===== Modulo de la seccion actual en la barra =====
   El tema usa la misma "pastilla" oscura para la seccion actual (.active), el menu
   abierto (.open) y el hover: con Inicio activo y SGSV abierto se veian dos iguales y
   parecian marcados los dos. La seccion actual es una capsula clara (fondo blanco
   translucido y contorno blanco fino, como en la barra apilada); la pastilla oscura
   queda para el abierto y el hover. La geometria no cambia, asi que el
   boton no salta al pasar de un estado a otro. */
@media (min-width: 980px) {
    html.top-full .navbar.main #nav > li.primerNivel.active:not(.open):not(:hover) > a {
        border-color: rgba(255, 255, 255, .55);
        border-radius: 8px;
        background: rgba(255, 255, 255, .12);
        box-shadow: none;
        font-weight: 600;
    }
}

/* ===== Boton hamburguesa de la barra de escritorio =====
   Desde 980px no hace nada visible: alterna .menu-hidden de una barra lateral (#menu)
   que este template no tiene. Solo sirve por debajo, donde despliega el menu apilado
   (tablet vertical o ventana angosta). La barra movil usa su propio boton (.dl-trigger). */
@media (min-width: 980px) {
    html.top-full .navbar.main > .btn-navbar.navbar-toggle {
        display: none;
    }

    /* Sin el boton, el primer modulo quedaba pegado al borde */
    html.top-full .navbar.main #nav {
        margin-left: 8px;
    }
}

/* ===== Barra apilada: grupo derecho =====
   El tema da 43px de margen al primer li de cada .topnav apilado, pensado para el
   primer modulo (deja sitio a la hamburguesa). Con la lupa como primer elemento del
   grupo derecho, la lupa quedaba metida respecto a la ayuda y la campana. */
@media (max-width: 979px) {
    html.top-full .navbar.main .topnav.pull-right > li:first-child {
        margin-left: 0;
    }
}

/* ===== Barra apilada (<980px): busqueda primero y seccion actual =====
   La busqueda va en la primera fila, junto a la hamburguesa, y se ve aun con el menu
   plegado; la fila "Buscar en el menu" del grupo derecho sobra y se oculta. El primer
   modulo ya no comparte fila con la hamburguesa, asi que pierde los 43px de margen. */
.navbar.main .busqueda-apilada {
    display: none;
}

@media (max-width: 979px) {
    html.top-full .navbar.main .busqueda-apilada {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 38px;
        margin: 6px 8px 6px 52px;
        padding: 0 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .9);
        font-size: 13px;
        text-decoration: none;
    }

    html.top-full .navbar.main .busqueda-apilada:hover,
    html.top-full .navbar.main .busqueda-apilada:focus-visible {
        background: rgba(255, 255, 255, .22);
        color: #fff;
        outline: none;
    }

    html.top-full .navbar.main .busqueda-apilada svg {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

    html.top-full .navbar.main #nav > li:first-child {
        margin-left: 0;
    }

    html.top-full .navbar.main .topnav.pull-right > li.busqueda-li {
        display: none !important;
    }

    /* Seccion actual: barra blanca a la izquierda, no la pastilla del tema */
    html.top-full .navbar.main #nav > li.primerNivel.active:not(.open) > a {
        border-color: transparent;
        background: rgba(255, 255, 255, .1);
        box-shadow: inset 3px 0 0 #fff;
    }
}

/* En pantalla tactil el hover se queda pegado tras tocar: la fila tocada seguia
   resaltada junto a la seccion actual. Sin raton, no hay resaltado de hover. */
@media (max-width: 979px) and (hover: none) {
    html.top-full .navbar.main #nav > li.primerNivel:hover:not(.open):not(.active) > a {
        border-color: transparent;
        background: transparent;
    }
}

/* Entre 768 y 979px el tema saca el grupo derecho (ayuda, campana, cuenta) como una
   columna absoluta arriba a la derecha, que tapaba la busqueda y las primeras filas.
   En toda barra apilada va al final de la lista, a todo el ancho, como en celular. */
@media (max-width: 979px) {
    /* clear: la lista de modulos va flotada; sin el, estas filas se montaban
       encima de las primeras y la cuenta tapaba a Registro */
    /* :not(.sesion): la barra de celular tambien tiene un .topnav.pull-right
       (con la clase .sesion) y sin esto sus iconos bajaban a una segunda fila */
    html.top-full .navbar.main .topnav.pull-right:not(.sesion) {
        position: static;
        float: none !important;
        clear: both;
        width: 100%;
    }
}

/* ===== Atajos Alt+1...9 (megamenu.js) =====
   El numero de cada modulo aparece solo mientras se mantiene Alt; el megamenu
   muestra su atajo junto al total de opciones. */
body.atajos-visibles .navbar.main .topnav > li.primerNivel > a[data-atajo] {
    position: relative;
}

body.atajos-visibles .navbar.main .topnav > li.primerNivel > a[data-atajo]::after {
    content: attr(data-atajo);
    /* Dentro de la barra: con top negativo quedaba recortada por el borde superior
       de la ventana, porque la barra es fija y empieza en y=0 */
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 0 0 2px var(--siag-brand, #4888be), 0 2px 6px rgba(15, 23, 42, .3);
    box-sizing: border-box;
    color: var(--siag-brand-dark-3, #2f6492);
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

/* Con un megamenu abierto se numeran sus opciones (data-atajo-op) y no los modulos */
body.atajos-en-panel .navbar.main .topnav > li.primerNivel > a[data-atajo]::after {
    display: none;
}

body.atajos-en-panel .megamenu a[data-atajo-op] {
    position: relative;
}

body.atajos-en-panel .megamenu a[data-atajo-op]::after {
    content: attr(data-atajo-op);
    position: absolute;
    top: 50%;
    left: -12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--siag-brand-solido, #3d74a3);
    box-shadow: 0 0 0 2px #fff;
    box-sizing: border-box;
    color: var(--siag-brand-contraste, #fff);
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

/* Mientras se escribe el numero, se atenuan los que no empiezan por lo escrito */
.navbar.main a.atajo-descartado::after {
    opacity: .25;
}

.megamenu .megamenu-atajo {
    display: inline-block;
    margin-left: 8px;
    padding: 0 5px;
    border: 1px solid #dbe3ec;
    border-radius: 5px;
    background: #fafbfc;
    box-shadow: none;
    color: #5b6472;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 979px) {
    .megamenu .megamenu-atajo {
        display: none;
    }
}