/*
 * Buscador de las webs. Clases propias con el prefijo buscador- para no depender de la versión de Bootstrap de cada tema.
 * Los colores van en variables porque el mismo marcado se pinta sobre el panel oscuro, el desplegable claro y la página de resultados.
 */

.buscador,
.buscador-pagina {
    --buscador-texto: #1d1d1b;
    --buscador-suave: #5f6670;
    --buscador-fondo: #fff;
    --buscador-borde: rgba(0, 0, 0, .15);
    --buscador-hover: rgba(0, 45, 116, .08);
    --buscador-resalte: #ffe58a;
    --buscador-acento: #002D74;
}

.buscador {
    position: relative;
    color: var(--buscador-texto);
}

.buscador-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Campo */
.buscador-campo {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--buscador-borde);
}

.buscador-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    padding: 10px 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.buscador-input::placeholder {
    color: var(--buscador-suave);
}

.buscador-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.buscador-boton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.buscador-campo:focus-within {
    border-bottom-color: currentColor;
}

/* Lista de sugerencias */
.buscador-lista[hidden] {
    display: none;
}

.buscador-grupo {
    margin-top: 12px;
}

.buscador-grupo-titulo {
    margin: 0 8px 4px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--buscador-suave);
}

.buscador-libro,
.buscador-enlace {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 48px;
    padding: 8px;
    border-radius: 8px;
    color: var(--buscador-texto);
    text-decoration: none;
}

.buscador-enlace {
    align-items: center;
    justify-content: space-between;
}

.buscador-libro:hover,
.buscador-enlace:hover,
.buscador-chip:hover,
.buscador [aria-selected="true"] {
    background: var(--buscador-hover);
    color: var(--buscador-texto);
}

.buscador [aria-selected="true"] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.buscador-portada {
    flex: 0 0 48px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(0, 0, 0, .12);
}

.buscador-portada img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.buscador-libro-datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.buscador-libro-titulo {
    font-weight: 600;
    line-height: 1.25;
}

.buscador-libro-subtitulo,
.buscador-libro-autores {
    font-size: .875rem;
    line-height: 1.3;
}

.buscador-libro-subtitulo,
.buscador-donde {
    color: var(--buscador-suave);
}

.buscador-libro-detalles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.buscador-etiqueta {
    font-size: .75rem;
    line-height: 1.4;
    padding: 0 6px;
    border: 1px solid var(--buscador-borde);
    border-radius: 4px;
    color: var(--buscador-suave);
}

.buscador-precio {
    font-weight: 600;
    font-size: .875rem;
}

.buscador-donde {
    font-size: .75rem;
}

.buscador-fragmento {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--buscador-suave);
}

.buscador-marca {
    background: var(--buscador-resalte);
    color: inherit;
    padding: 0 .1em;
    border-radius: 2px;
}

.buscador-cuenta {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--buscador-suave);
}

/* Temas y etiquetas: chips en una fila que se desliza con el dedo */
.buscador-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 2px 8px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.buscador-chips::-webkit-scrollbar {
    display: none;
}

.buscador-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--buscador-borde);
    border-radius: 999px;
    color: var(--buscador-texto);
    text-decoration: none;
    white-space: nowrap;
}

.buscador-correccion {
    margin: 12px 8px 0;
    font-size: .875rem;
    color: var(--buscador-suave);
}

.buscador-pagina .buscador-correccion {
    margin: 24px 0 0;
}

.buscador-vacio {
    margin: 16px 8px;
    color: var(--buscador-suave);
}

/* Pie fijo con el paso a la página completa, siempre a mano con el pulgar */
.buscador-pie {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
    background: var(--buscador-fondo);
}

.buscador-ver-todos {
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    background: var(--buscador-acento);
    color: #fff;
}

.buscador-ver-todos:hover {
    color: #fff;
}

/* Panel a pantalla completa del tema oceano: conserva el azul oscuro del panel anterior */
.buscador-panel.offcanvas-top {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #002D74;
    color: #fff;
}

.buscador-panel .offcanvas-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 0;
}

.buscador-panel-contenido {
    max-width: 820px;
    margin: 0 auto;
}

.buscador-panel .buscador {
    --buscador-texto: #fff;
    --buscador-suave: rgba(255, 255, 255, .65);
    --buscador-fondo: #002D74;
    --buscador-borde: rgba(255, 255, 255, .3);
    --buscador-hover: rgba(255, 255, 255, .1);
    --buscador-resalte: rgba(255, 255, 255, .25);
    --buscador-acento: #fff;
}

.buscador-panel .buscador-input {
    font-size: 24px;
}

/* El campo empieza centrado, que es más fácil de pulsar, y sube despacio con los primeros resultados porque buena parte del público es mayor; no vuelve a bajar, para moverlo lo menos posible */
.buscador-panel {
    --buscador-hueco-arriba: clamp(24px, 6vh, 72px);
}

.buscador--panel {
    margin-top: max(var(--buscador-hueco-arriba), calc(50vh - 6rem));
    margin-top: max(var(--buscador-hueco-arriba), calc(50dvh - 6rem));
    transition: margin-top .6s cubic-bezier(.2, .7, .2, 1);
}

.buscador--panel.buscador--arriba {
    margin-top: var(--buscador-hueco-arriba);
}

.buscador--panel .buscador-lista:not([hidden]) {
    animation: buscador-aparecer .3s ease-out;
}

@keyframes buscador-aparecer {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buscador--panel {
        transition: none;
    }

    .buscador--panel .buscador-lista:not([hidden]) {
        animation: none;
    }
}

.buscador-panel .buscador-portada {
    background: rgba(0, 0, 0, .2);
}

.buscador-panel .buscador-ver-todos,
.buscador-panel .buscador-ver-todos:hover {
    color: #002D74;
}

/* Desplegable bajo el campo, en la barra del tema default; el campo lleva fondo propio porque la barra es oscura */
.buscador--desplegable {
    min-width: 240px;
}

.buscador--desplegable .buscador-campo {
    padding-left: 10px;
    border: 0;
    border-radius: 4px;
    background: var(--buscador-fondo);
}

.buscador--desplegable .buscador-lista {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    width: min(420px, 100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    border: 1px solid var(--buscador-borde);
    border-radius: 8px;
    background: var(--buscador-fondo);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* Página de resultados */
.buscador-pagina-cuerpo {
    padding-top: 24px;
    padding-bottom: 48px;
}

.buscador-pagina .buscador {
    max-width: 720px;
}

/* Las cabeceras de las webs son fijas (unos 105 px en oceano y corporativo) y taparían el principio de la sección a la que lleva un salto */
.buscador-pagina .buscador-grupo {
    scroll-margin-top: 140px;
}

.buscador-pagina .buscador-input {
    font-size: 20px;
}

.buscador-pagina-titulo {
    margin: 24px 16px 0;
}

.buscador-aviso {
    margin-top: 24px;
}

.buscador-saltos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 24px 0 8px;
}

.buscador-saltos a {
    color: inherit;
}

.buscador-seccion-titulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 32px 0 12px;
    font-size: 1.375rem;
}

.buscador-libros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.buscador-pagina .buscador-libro {
    color: inherit;
    border: 1px solid rgba(0, 0, 0, .08);
}

.buscador-pagina .buscador-portada {
    flex-basis: 80px;
}

.buscador-pagina .buscador-chips {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
}

.buscador-pagina .buscador-chip,
.buscador-pagina .buscador-enlace {
    color: inherit;
}

.buscador-pagina .buscador-enlaces {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.buscador-pagina .buscador-marca {
    background: #ffe58a;
}

.buscador-paginacion {
    margin-top: 24px;
}

@media (min-width: 768px) {
    .buscador-libros,
    .buscador-pagina .buscador-enlaces {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .buscador-libros {
        grid-template-columns: repeat(3, 1fr);
    }
}