/* ==========================================================================
   PORTÓN & CONSTRUCCIÓN — Buscador de productos del header
   --------------------------------------------------------------------------
   Depende de porton-header.css: de ahí salen los tokens (--pc-red, --space-*,
   --radius-*, --shadow-*) y la caja .pc-container.

   Destino: elessi-theme-child/assets/css/porton-buscador.css
   ========================================================================== */

/* El panel se ancla a la barra. position:relative y NO sticky: el sticky del
   header vive en #header-content (ver porton-header.css, sección 2) y meter
   otro aquí volvería a enfrentarlos. relative solo sirve de referencia para
   posicionar el desplegable, no crea contenedor de scroll. */
.header{position:relative}


/* ---------- El botón de la lupa ----------
   48x48 reales aunque el icono mida 22: por debajo de 44px el dedo falla de
   forma sistemática en móvil (mínimo de Apple y Material). */
.pc-search-btn{
  display:grid;place-items:center;
  width:48px;height:48px;flex:none;
  margin:0;padding:0;
  background:none;border:0;border-radius:50%;
  color:var(--pc-ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease,background-color .2s ease;
}
.pc-search-btn svg{width:22px;height:22px;display:block}
.pc-search-btn:hover{color:var(--pc-red);background:var(--pc-red-soft)}
.pc-search-btn[aria-expanded="true"]{color:var(--pc-red);background:var(--pc-red-soft)}
/* El anillo de foco se ve solo con teclado (:focus-visible), no al hacer clic
   con el mouse. Quitarlo del todo dejaría a quien navega con tabulador sin
   saber dónde está. */
.pc-search-btn:focus-visible{outline:3px solid var(--pc-red);outline-offset:2px}

/* La barra tiene tres configuraciones (ver porton-header.css):
     ≥1200   logo · menú · Cotizar · lupa
     1024-1199   logo · Cotizar · lupa · hamburguesa   (el menú va plegado)
     ≤1023   lupa · logo centrado · hamburguesa
   En las dos primeras el hueco libre lo empuja un único margin-left:auto. Si
   dos elementos lo tuvieran, el espacio se repartiría entre ellos y el grupo
   de la derecha quedaría partido en dos. */

/* ≥1200: el menú ya lleva margin-left:auto; Cotizar y la lupa van pegados a él. */
@media(min-width:1200px){
  .header .header__cta{margin-left:var(--space-2)}
  .pc-search-btn{margin-left:0}
}

/* Sitio para la lupa. Medido en el sitio: a partir de 1400px el contenedor se
   queda en 1240 y logo (253) + menú de 7 puntos (688) + lupa + botón no
   cabían; faltaban 55px y "Cotizar ahora" se partía en dos líneas.
   Se recupera así, sin tocar el logo:
     - hueco entre bloques de la barra: 24 → 16px   (48px)
     - relleno lateral de cada punto del menú: 12 → 8px  (56px)
   A 1200-1399 porton-header.css ya compacta el menú y sobra espacio. */
@media(min-width:1200px){
  .header .header__in{gap:var(--space-4)}
  .header .header__cta{white-space:nowrap;flex:none}   /* nunca en dos líneas */
}
@media(min-width:1400px){
  .nav__list a{padding:0 var(--space-2)}
}

/* 1024-1199: sin menú visible, es "Cotizar" el que empuja el grupo a la derecha. */
@media(min-width:1024px) and (max-width:1199px){
  .header .header__cta{margin-left:auto}
  .pc-search-btn{margin-left:0}
  .burger{margin-left:0}
}

/* ≤1023: el logo va centrado y la hamburguesa flota a la derecha. La lupa
   flota a la izquierda, en espejo: así el logo sigue centrado de verdad y no
   pierde ancho (porton-header.css ya le reserva 50px a cada lado). */
@media(max-width:1023px){
  .pc-search-btn{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    width:44px;height:44px;
  }
  .pc-search-btn svg{width:21px;height:21px}
}


/* ---------- El panel desplegable ----------
   Cuelga de la barra, a todo el ancho. absolute y no fixed para que baje con
   el header cuando este se compacta al hacer scroll. */
.pc-search{
  position:absolute;
  left:0;right:0;
  top:100%;
  z-index:60;
  background:#fff;
  border-top:1px solid var(--pc-border);
  box-shadow:var(--shadow-lg);
}
.pc-search[hidden]{display:none}

/* Entrada corta: el panel es una respuesta a un clic, no un espectáculo.
   150ms es el mínimo para que el ojo siga el movimiento sin sentir retraso. */
.pc-search{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .15s ease-out,transform .15s ease-out;
}
.pc-search[data-abierto="true"]{opacity:1;transform:translateY(0)}

.pc-search__in{padding:var(--space-4) var(--space-5) var(--space-5)}


/* ---------- La fila del campo ---------- */
.pc-search__form{
  display:flex;align-items:center;gap:var(--space-2);
}

/* Envoltorio del campo: ancla para la lupa interior y la X de borrar, que así
   quedan dentro del campo y no sobre los botones de al lado. */
.pc-search__campo{
  position:relative;
  flex:1 1 auto;min-width:0;
}

.pc-search__icono{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--pc-slate-500);pointer-events:none;
}

/* Doble clase a propósito: Elessi da estilo a input[type="search"] (0,1,1)
   y con una sola clase (0,1,0) perdíamos. Comprobado en el sitio: el campo
   salía con 7px de relleno, 42px de alto y esquinas rectas, y la lupa
   interior quedaba encima del texto. */
.pc-search .pc-search__input{
  display:block;width:100%;
  height:52px;margin:0;
  /* 16px exactos: por debajo de eso, Safari en iPhone hace zoom al enfocar el
     campo y descuadra toda la barra. */
  font-family:var(--font-body);font-size:16px;color:var(--pc-ink);
  padding:0 44px 0 46px;
  background:var(--pc-bg-alt);
  border:2px solid var(--pc-border);
  border-radius:var(--radius-pill);
  box-sizing:border-box;line-height:normal;box-shadow:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.pc-search .pc-search__input::placeholder{color:var(--pc-slate-500)}
.pc-search .pc-search__input:focus{
  outline:none;
  background:#fff;
  border-color:var(--pc-red);
  box-shadow:none;
}
/* La cruz nativa del type="search" en Chrome duplica nuestro botón de borrar. */
.pc-search .pc-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.pc-search__limpiar{
  position:absolute;
  right:8px;
  top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  width:36px;height:36px;
  background:none;border:0;border-radius:50%;
  color:var(--pc-slate-500);cursor:pointer;
}
.pc-search__limpiar svg{width:16px;height:16px}
.pc-search__limpiar:hover{color:var(--pc-ink);background:var(--pc-border)}
.pc-search__limpiar:focus-visible{outline:2px solid var(--pc-red);outline-offset:1px}
.pc-search__limpiar[hidden]{display:none}

/* Botón de enviar: hereda la forma de .header .btn (mismo alto que el campo). */
.pc-search .pc-search__enviar{flex:none;min-height:52px}

.pc-search__cerrar{
  flex:none;
  display:grid;place-items:center;
  width:48px;height:48px;
  background:none;border:0;border-radius:50%;
  color:var(--pc-slate-500);cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.pc-search__cerrar svg{width:20px;height:20px}
.pc-search__cerrar:hover{color:var(--pc-ink);background:var(--pc-bg-alt)}
.pc-search__cerrar:focus-visible{outline:3px solid var(--pc-red);outline-offset:2px}

/* En móvil no caben campo + "Buscar" + cerrar. Se va el botón de texto: Enter
   y el teclado del celular ya hacen esa misma función, y el campo gana 100px. */
@media(max-width:767px){
  .pc-search .pc-search__enviar{display:none}
  .pc-search__in{padding:var(--space-3) var(--space-4) var(--space-4)}
}


/* ---------- Resultados ---------- */
.pc-search__panel{margin-top:var(--space-3)}

.pc-search__estado{
  margin:0;
  font-size:.875rem;color:var(--pc-slate-500);
  min-height:1.25rem;         /* hueco reservado: el texto aparece y desaparece
                                 y sin esto la lista daba un salto de 20px */
}
.pc-search__estado:empty{min-height:0}

.pc-search__lista{
  list-style:none;margin:var(--space-2) 0 0;padding:0;
  /* Con muchas sugerencias el panel taparía media pantalla. Se limita y se
     hace scrollable; en móvil el tope es menor porque el teclado ya se come
     la mitad de la pantalla. */
  max-height:min(60vh,420px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:767px){.pc-search__lista{max-height:50vh}}

.pc-search__item a{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2);
  border-radius:var(--radius-lg);
  color:var(--pc-ink);text-decoration:none;
  transition:background-color .15s ease;
}
/* data-activo lo pone el JavaScript al recorrer con las flechas del teclado.
   Mismo aspecto que el hover del mouse: quien usa teclado ve exactamente lo
   mismo que quien usa ratón.
   El gris de fondo solo (--pc-bg-alt) no bastaba: comprobado en pantalla, sobre
   blanco no se distinguía qué fila estaba marcada. La barra roja a la
   izquierda lo deja claro sin depender solo de un matiz de gris. */
.pc-search__item a:hover,
.pc-search__item[data-activo="true"] a{
  background:#EFF0F2;
  box-shadow:inset 3px 0 0 var(--pc-red);
}
.pc-search__item a:focus-visible{outline:3px solid var(--pc-red);outline-offset:-3px}

.pc-search__miniatura{
  flex:none;
  width:56px;height:56px;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--pc-bg-alt);
  border:1px solid var(--pc-border);
}

.pc-search__texto{min-width:0}       /* deja que el nombre largo se recorte */

.pc-search__nombre{
  display:block;
  font-family:var(--font-body);font-weight:600;font-size:.9375rem;line-height:1.35;
  /* Dos líneas y corta: un nombre de cuatro líneas rompe el ritmo de la lista. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* El trozo que coincide con lo escrito. Fondo suave de marca, no el amarillo
   del navegador, que aquí chirría. */
.pc-search__nombre mark{
  background:var(--pc-red-soft);color:var(--pc-red-dark);
  font-weight:700;padding:0 1px;border-radius:2px;
}

.pc-search__cat{
  display:block;margin-top:2px;
  font-size:.75rem;color:var(--pc-slate-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pc-search__todos{
  display:block;margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--pc-border);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em;
  color:var(--pc-red);text-decoration:none;
}
.pc-search__todos:hover{color:var(--pc-red-dark);text-decoration:underline}
.pc-search__todos:focus-visible{outline:3px solid var(--pc-red);outline-offset:2px}
.pc-search__todos[hidden]{display:none}


/* ---------- Esqueleto de carga ----------
   Con conexión lenta, entre teclear y ver resultados pasa medio segundo. Un
   esqueleto con la forma de la lista es mejor que un hueco vacío: se ve que
   viene contenido y la caja ya no cambia de alto al llegar (no hay salto). */
.pc-search__skel{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2)}
.pc-search__skel span{
  display:block;border-radius:var(--radius);
  background:linear-gradient(90deg,var(--pc-bg-alt) 25%,#ECECEF 37%,var(--pc-bg-alt) 63%);
  background-size:400% 100%;
  animation:pc-search-brillo 1.2s ease-in-out infinite;
}
.pc-search__skel span:first-child{width:56px;height:56px;flex:none}
.pc-search__skel span:last-child{width:min(60%,260px);height:14px}
@keyframes pc-search-brillo{0%{background-position:100% 0}100%{background-position:0 0}}


/* ---------- Menos movimiento ----------
   Quien lo pide en su sistema recibe el mismo panel sin desplazamiento ni
   brillo: el contenido no cambia, solo desaparece la animación. */
@media(prefers-reduced-motion:reduce){
  .pc-search{transition:none;opacity:1;transform:none}
  .pc-search__skel span{animation:none}
}