:root {
    /* Curva de Apple para la navegacion global: arranca lento, acelera
       poco y frena largo. Es lo que hace que el despliegue se sienta
       continuo en vez de un salto con relleno. */
    --search-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
    --search-open: 0.4s;
    --search-close: 0.3s;
    --search-icon: 0.3s;
}

/* ============================================================
   Buscador global del navbar.
   El disparador reutiliza .navbar-item para heredar color,
   tipografia y padding del resto de enlaces de la barra.
   ============================================================ */

/* Bulma oculta .navbar-menu por debajo de 1024px, asi que el disparador
   del menu no sirve en movil: ahi se usa el que vive en .navbar-brand. */
.navbar-search-toggle-mobile {
    display: none;
}

@media screen and (max-width: 1023px) {
    .navbar-search-toggle-desktop {
        display: none;
    }

    /* La lupa se pega al borde derecho y arrastra al burger con ella.
       Bulma le da margin-left:auto al .navbar-burger; si se deja puesto,
       cada uno empuja por su cuenta y la lupa acaba en mitad de la barra. */
    .navbar-search-toggle-mobile {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding-right: 0.6rem;
    }

    .navbar-brand .navbar-burger {
        margin-left: 0;
    }
}

/* Bulma cambia el burger a aspa en 86ms lineales: se nota como un
   parpadeo. Con la misma curva y duracion que el panel, el icono
   acompana al despliegue en vez de adelantarse. */
.navbar-burger span {
    transition-duration: var(--search-icon);
    transition-timing-function: var(--search-ease);
}

.navbar-search-toggle {
    cursor: pointer;
    background: none;
    border: 0;
}

.navbar-search-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    /* currentColor hereda el color del enlace del navbar,
       asi el icono cambia con el si algun dia se retoca el tema. */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.navbar-search-toggle:hover .navbar-search-icon {
    opacity: 0.6;
}

/* ---------- Capa de cristal sobre el resto de la pagina ----------
   backdrop-filter difumina lo que haya pintado por detras, asi que una
   capa fija a pantalla completa desenfoca el contenido de la pagina.
   Va por debajo del panel (z-index 29) y del navbar (30), que quedan nitidos. */

.navbar-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 28;
    background-color: rgb(238 241 246 / 45%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--search-close) var(--search-ease);
}

    .navbar-search-backdrop.is-open {
        transition-duration: var(--search-open);
        opacity: 1;
        pointer-events: auto;
    }

    .navbar-search-backdrop[hidden] {
        display: none;
    }

/* ---------- Panel desplegable ---------- */

.navbar-search-panel {
    position: fixed;
    left: 0;
    right: 0;
    /* El top real lo calcula el JS a partir del alto del navbar. */
    top: 0;
    z-index: 29;
    background-color: rgb(238 241 246 / 80%);
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    backdrop-filter: saturate(180%) blur(32px);
    border-bottom: 1px solid rgb(55 56 73 / 8%);
    overflow: hidden;
    /* La altura la fija el JS con el alto real del contenido. Animar
       max-height contra un valor grande gasta casi todo el recorrido en
       pixeles que no existen, y por eso el despliegue parecia un tiron. */
    height: 0;
    transition: height var(--search-close) var(--search-ease);
}

    .navbar-search-panel.is-open {
        max-height: 80vh;
        overflow-y: auto;
        transition-duration: var(--search-open);
    }

    .navbar-search-panel[hidden] {
        display: none;
    }

.navbar-search-inner {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.6rem 1.5rem 1.8rem 1.5rem;
    /* Entra un instante despues que el panel: la sensacion es que el
       contenido llega con el hueco, no que aparece de golpe al final. */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.26s ease 0.06s, transform 0.34s var(--search-ease) 0.06s;
}

.navbar-search-panel.is-open .navbar-search-inner {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Campo de texto ---------- */

.navbar-search-field {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

    .navbar-search-field .navbar-search-icon {
        width: 1.6rem;
        height: 1.6rem;
        color: rgb(55 56 73 / 45%);
        flex: none;
    }

.navbar-search-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-family: 'satoshimedium';
    font-size: 1.7rem;
    color: #373849;
    padding: 0;
    /* Quita la X nativa de type=search en Chrome/Edge. */
    appearance: none;
    -webkit-appearance: none;
}

    .navbar-search-input::placeholder {
        color: rgb(55 56 73 / 40%);
    }

    .navbar-search-input::-webkit-search-cancel-button {
        display: none;
    }

/* ---------- Resultados ---------- */

.navbar-search-results {
    margin-top: 1.1rem;
}

    .navbar-search-results:empty {
        margin-top: 0;
    }

@keyframes navbarSearchResultIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.navbar-search-result {
    /* El retardo por fila lo pone el JS: entran en cascada, no en bloque. */
    animation: navbarSearchResultIn 0.32s var(--search-ease) both;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.6rem;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .navbar-search-result:hover,
    .navbar-search-result.is-active {
        background-color: rgb(55 56 73 / 6%);
    }

.navbar-search-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    flex: none;
    background-color: rgb(55 56 73 / 8%);
}

.navbar-search-texts {
    min-width: 0;
}

.navbar-search-title {
    font-family: 'satoshimedium';
    font-size: 1rem;
    color: #373849;
    margin: 0 0 2px 0;
    /* Un titulo largo no debe romper la fila. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-search-meta {
    font-family: 'satoshiregular';
    font-size: 0.8rem;
    color: rgb(55 56 73 / 55%);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-search-message {
    font-family: 'satoshiregular';
    font-size: 0.9rem;
    color: rgb(55 56 73 / 55%);
    margin: 1.1rem 0 0 0;
}

@media screen and (max-width: 1023px) {
    /* En movil el panel toma la pantalla completa, como en la referencia:
       con top (que fija el JS) y bottom a la vez, ocupa lo que queda de alto.
       max-height ya no sirve para animar, se usa la opacidad. */
    .navbar-search-panel {
        bottom: 0;
        max-height: none;
        height: auto;
        opacity: 0;
        transition: opacity var(--search-close) var(--search-ease);
    }

        .navbar-search-panel.is-open {
            max-height: none;
            height: auto;
            opacity: 1;
            overflow-y: auto;
            transition-duration: var(--search-open);
        }

    .navbar-search-inner {
        padding: 1.5rem 1.2rem 1.4rem 1.2rem;
    }

    .navbar-search-input {
        font-size: 1.6rem;
    }

    .navbar-search-thumb {
        width: 44px;
        height: 44px;
    }

    /* Sin esto el fondo sigue desplazandose por detras del panel. */
    body.is-search-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-search-panel,
    .navbar-search-backdrop,
    .navbar-search-inner {
        transition: none;
    }

    .navbar-search-result {
        animation: none;
    }

    .navbar-burger span {
        transition-duration: 0.01ms;
    }
}