/* =============================================================================
   componentes/buscador.css — Buscador  (componentes/_buscador.php)
   -----------------------------------------------------------------------------
   Campo con su X de limpiar, el aro de "buscando" y el desplegable de
   sugerencias, cuyo contenido llega por AJAX (componentes/_sugerencias-buscador.php).
   Dónde se coloca en la cabecera lo decide layout.css.
   ============================================================================= */

/* La X de limpiar es propia (.js-buscador-clear): ocultamos la nativa del type=search
   para no duplicarla. */
.js-buscador-input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }

/* La X de limpiar lleva el MISMO borde y fondo que el input (--bs-border-color /
   --bs-body-bg): con el gris oscuro de btn-outline-secondary pintaba una franja más oscura
   arriba y abajo en mitad de la píldora. Va en variables --bs-btn-* para que los estados
   hover/active de .btn (más específicos que esta clase) no lo cambien. */
.btn-buscador-clear {
    --bs-btn-bg:var(--bs-body-bg);
    --bs-btn-hover-bg:var(--bs-body-bg);
    --bs-btn-active-bg:var(--bs-body-bg);
    --bs-btn-border-color:var(--bs-border-color);
    --bs-btn-hover-border-color:var(--bs-border-color);
    --bs-btn-active-border-color:var(--bs-border-color);
}

/* Mientras busca (clase .buscando, la pone spinner() en buscador.js) el campo se rodea de un
   anillo con el degradado corporativo dando vueltas. El anillo es un ::after 3px MAYOR que el
   grupo, pintado ENCIMA (nada de z-index negativos, que acaban detrás del fondo de la cabecera)
   y vaciado por dentro con la máscara content-box+exclude: solo queda el aro. El radio es el de
   la píldora (30px de .rounded-*, custom-25.css) más los 3px de holgura.
   Lo que gira es el ángulo del conic-gradient vía @property; donde no exista soporte el aro
   sale estático, que sigue valiendo como aviso de "buscando". */
@property --ss-buscador-giro { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.js-buscador .input-group::after {
    content:""; position:absolute; inset:-3px; padding:3px; border-radius:33px;
    background:conic-gradient(from var(--ss-buscador-giro), #e20049, #1a2b6d, #e20049);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.js-buscador.buscando .input-group::after {
    opacity:1;
    animation:ss-buscador-giro 1.1s linear infinite;
}
@keyframes ss-buscador-giro { to { --ss-buscador-giro:360deg; } }
@media (prefers-reduced-motion: reduce) {
    .js-buscador.buscando .input-group::after { animation:none; }
}

/* ---------- DESPLEGABLE DE SUGERENCIAS ----------
   Corrige dos cosas de .suggestionsBox (custom-25.css, compartido con site-25):

   1) ANCHO. Venía en position:absolute sin left/right, así que se ajustaba al contenido:
      cada búsqueda salía de un ancho distinto según los resultados. Con left/right a 0 se
      ancla al .input-group (que Bootstrap ya deja en position:relative) y siempre mide lo
      mismo que el buscador.
   2) APILADO. Tenía z-index:999, por debajo de la barra sticky de la ficha (1035) y de la
      del comparador (1040), así que en la ficha de producto quedaba tapado. 1050 lo pone
      por encima de ambas y por debajo de modales (1055) y offcanvas.

   Se le refuerza el fondo opaco y una sombra para que se lea sobre cualquier contenido.
   Cerrado lleva el atributo `hidden` (lo quita y lo pone buscador.js). */
.js-buscador .suggestionsBox {
   top: calc(100% + .25rem);
   left: 0;
   right: 0;
   width: auto;
   z-index: 1050;
   max-height: min(70vh, 30rem);
   overflow-y: auto;
   overscroll-behavior: contain;
   background: #fff;
   border: 1px solid #e9ecef;
   border-radius: .5rem;
   box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
}

/* Fila de sugerencia: marca + precio arriba, modelo debajo.
   min-width:0 en el contenedor de texto es lo que permite que text-truncate funcione dentro
   de un flex: sin él, el hijo no baja de su ancho de contenido y el modelo desborda la fila
   en vez de recortarse con puntos suspensivos. */
.sugerencia__texto {
   min-width: 0;
}

.sugerencia__cabecera {
   min-width: 0;
}

.sugerencia__modelo {
   font-size: .875rem;
   color: #6c757d;
   line-height: 1.25;
}

.sugerencia:hover .sugerencia__modelo {
   color: #495057;
}

/* Distintivo de la sugerencia (Outlet / Oferta / Novedad) y precio anterior tachado.
   Van en una tercera línea, pequeños: sirven para DESEMPATAR entre modelos que se llaman casi
   igual, no para competir con el nombre. Por eso no llevan fondo saturado ni mayúsculas. */
.sugerencia__tag {
   display: inline-block;
   margin-top: .15rem;
   padding: .05rem .4rem;
   font-size: .68rem;
   font-weight: 600;
   line-height: 1.4;
   border-radius: 50rem;
   border: 1px solid currentColor;
}

.sugerencia__tag--outlet {
   color: #6f42c1;
}

/* morado: es otro artículo, no el mismo rebajado */
.sugerencia__tag--oferta {
   color: var(--ss-first-color, #c10049);
}

.sugerencia__tag--novedad {
   color: #198754;
}

.sugerencia__antes {
   margin-left: .35rem;
   font-size: .72rem;
   color: #adb5bd;
}

/* ---------- VELO DETRÁS DE LAS SUGERENCIAS ----------
   Con el desplegable abierto, todo lo que hay debajo de la cabecera (menú de categorías,
   contenido, barras fijas) se oscurece un poco y se desenfoca: la vista se va a los
   resultados y queda claro que pulsar fuera cierra. Mismo velo que el de los paneles
   laterales (--ss-velo-*, base.css; layout.css para el de los offcanvas).

   Lo crea y lo enciende buscador.js (body.ss-buscador-abierto), SOLO para el buscador de la
   cabecera de escritorio. APILADO: el velo va en 1046, por encima de la barra sticky de la
   ficha (1035), la del comparador (1040) y la de contacto (1045); la cabecera sube a 1047
   mientras dura, y con ella el desplegable, que vive dentro. Modales y offcanvas siguen
   por encima de todo.

   Se oculta con visibility y no con display para que el fundido funcione en los dos
   sentidos; al cerrar, la visibility espera a que acabe la opacidad. */
.ss-buscador-velo {
   position: fixed;
   inset: 0;
   z-index: 1046;
   background-color: var(--ss-velo-bg);
   -webkit-backdrop-filter: blur(var(--ss-velo-blur));
   backdrop-filter: blur(var(--ss-velo-blur));
   opacity: 0;
   visibility: hidden;
   transition: opacity .15s linear, visibility 0s linear .15s;
}

body.ss-buscador-abierto .ss-buscador-velo {
   opacity: 1;
   visibility: visible;
   transition: opacity .15s linear;
}

body.ss-buscador-abierto > header {
   position: relative;
   z-index: 1047;
}

@media (prefers-reduced-motion: reduce) {
   .ss-buscador-velo,
   body.ss-buscador-abierto .ss-buscador-velo {
      transition: none;
   }
}