/* =====================================================
   PASALAVENTA
   BUSCADOR GLOBAL
===================================================== */


/* =====================================================
   CONTENEDOR DEL BUSCADOR
===================================================== */

#searchForm {

    position: relative;

    width: 100%;

    /*
     * Permite que las sugerencias puedan salir
     * visualmente del contenedor del buscador.
     */
    overflow: visible;

    /*
     * Crea una capa superior para el buscador.
     */
    z-index: 100000;

}


#searchInput {

    width: 100%;

    box-sizing: border-box;

}


/* =====================================================
   CONTENEDORES SUPERIORES DEL BUSCADOR
===================================================== */

/*
 * Evita que headers, navbars o contenedores del
 * buscador recorten las sugerencias.
 */

header,
.header,
.navbar,
.nav,
.search-container,
.search-wrapper {

    overflow: visible;

}


/* =====================================================
   SUGERENCIAS DESKTOP
===================================================== */

.search-suggestions {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: 100%;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.10);

    border-radius: 14px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);

    /*
     * Mantiene el contenido dentro de las esquinas
     * redondeadas.
     */
    overflow: hidden;

    /*
     * Muy superior a otros elementos de la página.
     */
    z-index: 999999;

    display: none;

}


/* =====================================================
   SUGERENCIAS ACTIVAS
===================================================== */

.search-suggestions.activo {

    display: block;

}


/* =====================================================
   ITEM DE SUGERENCIA
===================================================== */

.search-suggestion-item {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 16px;

    box-sizing: border-box;

    background: transparent;

    border: none;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    font-size: 14px;

    color: #222;

    transition:
        background 0.18s ease;

}


.search-suggestion-item:hover {

    background: #f5f5f5;

}


.search-suggestion-item:active {

    background: #eeeeee;

}


/* =====================================================
   ICONO
===================================================== */

.search-suggestion-item i {

    font-size: 14px;

    color: #777;

    flex-shrink: 0;

}


/* =====================================================
   TEXTO
===================================================== */

.search-suggestion-text {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* =====================================================
   MENSAJE SIN RESULTADOS
===================================================== */

.search-no-results {

    padding:
        14px 16px;

    font-size: 14px;

    color: #777;

    text-align: center;

}


/* =====================================================
   SEPARACIÓN ENTRE SUGERENCIAS
===================================================== */

.search-suggestion-item +
.search-suggestion-item {

    border-top:
        1px solid rgba(0, 0, 0, 0.05);

}


/* =====================================================
   ESTADO FOCUS
===================================================== */

#searchInput:focus {

    outline: none;

}


/* =====================================================
   CAPA DEL BUSCADOR
===================================================== */

/*
 * Eleva el bloque completo del buscador por encima
 * de tarjetas, imágenes, banners y otros elementos.
 */

#searchForm,
#searchForm * {

    isolation: auto;

}


/* =====================================================
   MOBILE
   EN CELULAR EL BUSCADOR ABRE buscar.html
===================================================== */

@media (max-width: 768px) {

    .search-suggestions {

        display: none !important;

    }

}