/* ============================================================================
   QueShow — ENCABEZADO (rediseño de la agencia)
   Se carga en SiteWeb.Master, despues de qs_theme.css.
   Cubre: barra marino con linea de marca, categorias como enlaces directos,
   buscador reducido a lupa, idioma en texto (ES / EN) en vez de banderas.
   Para revertir: quitar el <link> de qs_header.css en SiteWeb.Master.
   ============================================================================ */

:root {
    --qsh-morado: #6220CD;
    --qsh-naranja: #FB792B;
    --qsh-marino: #070728;
}

/* --------------------------------------------------- Barra principal */

.menu_nav.navbar {
    background: var(--qsh-marino) !important;
    background-image: none !important;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--qsh-naranja), var(--qsh-morado)) 1;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.menu_nav .container-fluid { max-width: 1320px; }

/* ------------------------------- Se retira el menu viejo de hamburguesa
   El diseño pide categorias directas en la barra; lo que vivia en "Menu"
   (Nosotros, Ayuda, Ventas, Privacidad, Legal) pasa al pie de pagina.      */
.menu_nav .navbar-nav.me-3.d-none.d-md-none.d-lg-block { display: none !important; }

/* --------------------------------------- Categorias como enlaces directos */

.qs-nav-cats { gap: 2px; margin-right: 10px; }

.qs-nav-cats .nav-link {
    color: #fff !important;
    font-weight: 600;
    font-size: .95rem;
    padding: 8px 12px !important;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.qs-nav-cats .nav-link:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
}

/* ------------------------------------------- Buscador reducido a lupa */

/* Cerrado = boton circular de 40px con la lupa centrada.
   Abierto  = campo de 340px. Nada de anchos al 100% heredados del tema.      */
.menu_nav .form-search {
    width: 40px !important;
    max-width: 40px;
    flex: 0 0 auto !important;
    transition: width .22s ease, max-width .22s ease;
    margin-left: auto;
}

.menu_nav .form-search.qs-abierto { width: 340px !important; max-width: 340px; }

.menu_nav .form-search .input-group { flex-wrap: nowrap; }

/* el desplegable morado de "Categorias" ya no hace falta en la barra */
.menu_nav .form-search .input-group > button[data-mdb-toggle="dropdown"] { display: none !important; }

.menu_nav #search-group {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    overflow: hidden;
    height: 40px;
    width: 100%;
    align-items: center;
}

.menu_nav #search-group:hover { background: rgba(255, 255, 255, .20); }

.menu_nav #btnBuscarEventos {
    color: #fff !important;
    position: absolute !important;
    left: 0 !important;
    top: 0;
    width: 40px;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    font-size: .95rem !important;
}

.menu_nav #BuscadorInput {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 0 16px 0 40px !important;
    height: 40px !important;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.menu_nav .form-search.qs-abierto #BuscadorInput { opacity: 1; pointer-events: auto; }
.menu_nav #BuscadorInput::placeholder { color: rgba(255, 255, 255, .65); }
.menu_nav #BuscadorInput:focus { outline: 0 !important; box-shadow: none !important; }

/* ------------------------------------------------ Contacto e Ingresar */

.menu_nav .navbar-nav .nav-link { color: #fff !important; font-weight: 600; }

.menu_nav .nombreUsuario_modal {
    background: var(--qsh-morado) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-weight: 700;
    border: 0;
}

.menu_nav .nombreUsuario_modal:hover { background: #4e19a6 !important; }

/* ------------------------------------------- Idioma: texto, no banderas */

.menu_nav form#form1 { align-items: center; gap: 2px !important; padding-top: 0 !important; }

.menu_nav .btn-icon.MX,
.menu_nav .btn-icon.US {
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .62) !important;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 7px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.menu_nav .btn-icon.MX:hover,
.menu_nav .btn-icon.US:hover { color: #fff !important; }

/* separador entre ES y EN */
.menu_nav .btn-icon.MX { position: relative; }
.menu_nav .btn-icon.MX::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .3);
}

/* ------------------------------------------------------------ Movil */

@media (max-width: 991px) {
    .menu_nav .form-search { width: 44px !important; max-width: 44px; }
    .menu_nav .form-search.qs-abierto { width: 100% !important; max-width: none; }

    /* el desplegable: categorias arriba, enlaces de apoyo abajo */
    .menu_nav #navbarSupportedContent { padding-bottom: 10px; }

    .menu_nav .qs-solo-movil .nav-link,
    .menu_nav .qs-movil-extras .nav-link {
        color: #fff !important;
        padding: 11px 4px !important;
        font-weight: 600;
        display: block;
        border-radius: 0;
    }

    .menu_nav .qs-movil-sep {
        height: 1px;
        background: rgba(255, 255, 255, .16);
        margin: 10px 0;
        padding: 0;
    }

    .menu_nav .qs-movil-extras { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 8px; }
    .menu_nav .qs-movil-extras .nav-link { font-weight: 400; opacity: .8; font-size: .92rem; }
    .menu_nav .qs-movil-extras .nav-link:hover { opacity: 1; }
}

/* en escritorio el clon no se muestra: ahi ya estan en la barra */
@media (min-width: 992px) {
    .menu_nav .qs-solo-movil,
    .menu_nav .qs-movil-sep,
    .menu_nav .qs-movil-extras { display: none !important; }
}