/* =====================================================================
   CATÁLOGO — piezas propias de esta página
   =====================================================================
   Va después de sitio.css y ui.css. Lo compartido (banner, chips,
   tarjeta, vacío) ya vive ahí; aquí solo lo que es exclusivo de esta
   pantalla: el buscador del banner, la barra de herramientas, el
   selector de fecha y las acciones de la tarjeta.

   Reemplaza al catalog.css anterior, que traía su propia paleta y sus
   propias clases (.product-card, .filter-card…) ya no referenciadas en
   ninguna página: esa hoja quedó huérfana cuando el catálogo pasó a
   usar los componentes de sitio.css.
   ===================================================================== */

/* ---- Buscador en el banner ---- */
.cat-buscar{
  position:relative; flex:1; min-width:220px;
}
.cat-buscar i{
  position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.55); font-size:.85rem; pointer-events:none;
}
.cat-buscar input{
  width:100%; padding:.7rem .9rem .7rem 2.4rem; border-radius:99px;
  border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1);
  color:#fff; font:inherit; font-size:.9rem;
  transition:background .18s, border-color .18s;
}
.cat-buscar input::placeholder{ color:rgba(255,255,255,.55); }
.cat-buscar input:focus{
  outline:none; background:rgba(255,255,255,.16); border-color:var(--s-oro);
}
@media(max-width:640px){ .cat-buscar{ min-width:100%; } }

/* ---- Barra de herramientas ---- */
.cat-barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding:1.1rem 0;
}
.cat-barra-n{ font-size:.95rem; color:var(--s-tinta); }
.cat-barra-n strong{ font-size:1.15rem; font-weight:800; color:var(--s-azul); }
.cat-barra-n .para{ color:var(--s-gris); font-weight:500; }
.cat-barra-ctrl{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }

/* Selector de fecha, como una píldora que cambia de estado al llenarse */
.cat-fecha{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1.5px solid var(--s-linea); border-radius:99px;
  padding:.45rem .5rem .45rem 1rem; transition:border-color .18s, background .18s;
}
.cat-fecha.puesta{ border-color:var(--s-oro); background:#fffbef; }
.cat-fecha label{
  display:flex; align-items:center; gap:.4rem; cursor:pointer;
  font-size:.82rem; font-weight:700; color:var(--s-gris); white-space:nowrap;
}
.cat-fecha.puesta label{ color:var(--s-azul); }
.cat-fecha label i{ color:var(--s-oro); }
.cat-fecha input[type=date]{
  border:none; background:transparent; font:inherit; font-size:.85rem;
  color:var(--s-tinta); font-weight:600; min-width:0; max-width:9.5rem;
}
.cat-fecha input[type=date]:focus{ outline:none; }
.cat-fecha .quitar{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; color:var(--s-gris-2);
  text-decoration:none; font-size:.75rem; transition:background .15s, color .15s;
}
.cat-fecha .quitar:hover{ background:var(--s-fondo); color:var(--s-rojo); }

.cat-orden{
  border:1.5px solid var(--s-linea); border-radius:99px; background:#fff;
  padding:.55rem 2rem .55rem 1rem; font:inherit; font-size:.85rem;
  font-weight:600; color:var(--s-tinta); cursor:pointer;
}
.cat-orden:focus{ outline:none; border-color:var(--s-azul); }

/* Aviso de resultados para la fecha elegida */
.cat-aviso-fecha{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.25rem;
  padding:.8rem 1.1rem; border-radius:12px;
  background:#fffbef; border:1px solid #f0dba8; color:#8a6410;
  font-size:.88rem;
}
.cat-aviso-fecha i{ color:var(--s-oro); flex:none; }
.cat-aviso-fecha.cerrado{
  background:#fdeeee; border-color:#f3c6c6; color:#8a1f1f;
}
.cat-aviso-fecha.cerrado i{ color:var(--s-rojo); }

/* Sello "Más rentado": envuelve al u-sello para posicionarlo en la foto,
   igual que las demás etiquetas de estado. */
.s-tag-sello{ top:.85rem; left:.85rem; background:none; padding:0; }

/* ---- Botón de WhatsApp en contorno ----
   En la portada y la ficha el verde relleno se queda: ahí es una sola
   acción y no compite con nada. En la retícula del catálogo, trece
   botones sólidos pesaban más que el azul de la marca. En contorno
   sigue siendo inequívocamente "WhatsApp" (el ícono y el verde lo
   dicen) sin dominar la página. */
.s-btn-wa-linea{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  flex:1; padding:.7rem 1rem; border-radius:99px;
  border:1.5px solid #25D366; color:#128c4e; background:#fff;
  font-weight:700; font-size:.86rem; text-decoration:none;
  transition:background .18s, color .18s, transform .18s;
}
.s-btn-wa-linea:hover{ background:#25D366; color:#fff; transform:translateY(-1px); }
.s-btn-wa-linea i{ font-size:.95rem; }

/* Las acciones al pie de la tarjeta (.cat-acciones) se movieron a
   ui.css: dejaron de ser exclusivas del catálogo en cuanto la portada
   (index.php) empezó a usar la misma tarjeta con botón "Agregar". */

/* ---- Sugerencias del buscador (autocompletar) ----
   El buscador vive dentro de .u-banner, que usa overflow:hidden para
   contener su textura de fondo. Un position:absolute normal se hubiera
   recortado ahí mismo. Con position:fixed la caja escapa a ese
   contenedor; el JS calcula dónde ponerla (ver el script del buscador). */
.cat-sugerencias{
  position:fixed; z-index:200;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 40px -16px rgba(16,28,61,.35), 0 2px 8px rgba(16,28,61,.08);
  animation:cat-sug-entra .16s ease both;
}
@keyframes cat-sug-entra{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.cat-sug-item{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem;
  text-decoration:none; color:var(--s-tinta); border-bottom:1px solid var(--s-linea);
  transition:background .12s;
}
.cat-sug-item:last-child{ border-bottom:none; }
.cat-sug-item:hover, .cat-sug-item.activo{ background:var(--s-fondo); }
.cat-sug-item img{
  width:38px; height:38px; border-radius:8px; object-fit:cover; flex:none;
  background:linear-gradient(160deg,#eef1f7,#dfe5ef);
}
.cat-sug-item .n{ flex:1; font-size:.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-sug-item .p{ font-size:.82rem; font-weight:800; color:var(--s-azul); white-space:nowrap; }