/* ============================================================================
   CHANGUITO IA — Estilos de Ofertas + Favoritos + Buscador (ofertas.css)
   Tokens y reglas del design system del especialista (designsystem/DISENO.md):
   accionable = píldora, contenedor = rectángulo redondeado, cards con borde
   y SIN sombra (sombras solo en lo que flota), targets 44px+, Sora solo para
   montos/títulos/botones, semánticos de plata únicamente en precios/deltas.
   ========================================================================== */

/* ---------- compartido: corazón ♥ (toggle de favorito, target 44px) ---------- */
.btn-corazon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--tinta-400);                      /* contorno: sin guardar */
  transition: color .15s ease, transform .12s ease;
}
.btn-corazon:active { transform: scale(1.18); }
.btn-corazon.activo { color: var(--pasado); }   /* lleno: guardado */

/* precio en oferta: rojo cálido (semántico de plata, solo en montos) */
.precio-oferta .money, .precio-oferta .money .m-s { color: var(--pasado-texto); }

/* ============================================================
   BUSCADOR (sheet casi pantalla completa) — buscador.js
   ============================================================ */

.sheet.sheet-busc {
  height: 92dvh;
  max-height: 92dvh;
}

/* cabezal pegado arriba: el input no se va al scrollear resultados.
   padding-right deja lugar al botón ✕ del sheet (esquina sup-der). */
.busc-cabezal {
  position: sticky; top: 0; z-index: 3;
  background: var(--superficie);
  padding: 2px 44px 12px 0;
  margin-bottom: 4px;
  /* tapa la franja del padding superior del sheet al scrollear */
  box-shadow: 0 -16px 0 0 var(--superficie);
  border-bottom: 1px solid var(--linea);
}

.busc-input-wrap { position: relative; margin-top: 12px; }
.busc-lupa {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 17px; opacity: .75; pointer-events: none;
}
.busc-input {
  width: 100%; height: 52px;
  border: 1.5px solid var(--linea); border-radius: var(--r-input);
  padding: 0 52px 0 46px;
  font-family: var(--f-cuerpo); font-size: 16px; color: var(--tinta-900);
  background: var(--superficie);
  outline: none; -webkit-appearance: none; appearance: none;
}
.busc-input:focus { border-color: var(--yerba-600); }
.busc-input::placeholder { color: var(--tinta-400); }
/* botón 📷 escanear, dentro del wrap del buscador */
.busc-scan {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--yerba-50); font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.busc-scan:active { background: var(--yerba-50-press); }

.busc-cadena-nota {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 13px; color: var(--tinta-600);
}
.busc-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* resultados */
.busc-zona {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 0 16px;
}
.busc-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-card);
  padding: 10px 12px; min-height: 64px;
}
.busc-info { flex: 1; min-width: 0; }
.busc-nombre {
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tinta-900);
}
.busc-caption {
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busc-precio-fila {
  display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap;
}

/* botón píldora "+" (modo agregar): accionable = píldora, target 44px */
.busc-mas {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-pildora);
  background: var(--yerba-600); color: #FFFFFF;
  font-family: var(--f-titulos); font-size: 24px; font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--yerba-700);
  transition: background .15s ease, transform .1s ease, box-shadow .1s ease;
}
.busc-mas:hover { background: var(--yerba-hov); }
.busc-mas:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--yerba-700); }
.busc-mas:disabled { opacity: .7; cursor: wait; }
.busc-mas.ok { background: var(--ok); }

/* estados del buscador: hint / vacío / error (siempre con salida) */
.busc-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 44px 20px;
}
.busc-vacio-emoji { font-size: 40px; line-height: 1; }
.busc-vacio-titulo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 17px; color: var(--tinta-900);
}
.busc-vacio-texto { font-size: 14.5px; color: var(--tinta-600); line-height: 1.5; max-width: 300px; }
.busc-vacio .btn { margin-top: 10px; }

/* ============================================================
   FAVORITOS — favoritos.js
   ============================================================ */

.fav-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 4px;
}
.fav-header .fav-titulo { flex: 1; min-width: 0; margin: 0; font-size: 26px; }

.fav-buscar { width: 100%; margin: 14px 0 4px; }

/* card de activación de push */
.push-card {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 14px 16px;
  border-color: var(--mate-500);
}
.push-card.bloqueada { border-color: var(--linea); }
.push-card-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
.push-card-texto { flex: 1; min-width: 0; }
.push-card-titulo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px; color: var(--tinta-900);
}
.push-card-texto .caption { margin-top: 2px; line-height: 1.4; }
.push-card-btn { height: 44px; padding: 0 18px; flex-shrink: 0; width: auto; }

/* sheets de push (ofrecer / desbloquear) */
.push-sheet-texto {
  font-size: 15px; color: var(--tinta-600); line-height: 1.55;
  margin: 10px 0 14px;
}
.push-ahora-no { width: 100%; margin-top: 6px; color: var(--tinta-600); }
.push-sheet-btn { width: 100%; margin-top: 4px; }

/* lista de favoritos */
.fav-cards {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 16px; padding-bottom: 32px;
}
.fav-card { padding: 14px; }
.fav-top { display: flex; align-items: flex-start; gap: 12px; }
.fav-top .btn-corazon { margin: -6px -6px 0 0; } /* target 44 sin inflar la card */
.fav-info { flex: 1; min-width: 0; }
.fav-badges { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.fav-nombre { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tinta-900); }
.fav-info .caption { margin-top: 2px; }

.fav-mejor-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}
.fav-mejor { display: flex; align-items: center; min-width: 0; }
.fav-cadena {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px; color: var(--tinta-600);
  white-space: nowrap;
}
.fav-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* sparkline 30d (canvas chiquito) */
.fav-spark { width: 92px; height: 30px; flex-shrink: 0; }

.fav-otros {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}

/* estado vacío */
.fav-vacio { padding-top: 40px; }
.fav-vacio-corazon { font-size: 44px; color: var(--tinta-400); line-height: 1; }

/* ============================================================
   OFERTAS — ofertas.js
   ============================================================ */

.of-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 4px;
}
.of-header .of-titulo { flex: 1; min-width: 0; margin: 0; font-size: 26px; }
.of-refrescar { font-size: 20px; color: var(--yerba-600); }

/* chips de categoría: fila horizontal scrolleable */
.of-chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 0 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.of-chips::-webkit-scrollbar { display: none; }
.of-chips .chip { flex-shrink: 0; height: 40px; padding: 0 16px; font-size: 14px; }

.of-micro { margin: 14px 0 8px; }

.of-cards { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.of-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; cursor: pointer;
}
.of-card:active { background: var(--hundido); }
/* favorito en oferta: destacada con el ámbar mate de la marca */
.of-destacada { border: 1.5px solid var(--mate-500); padding: 11.5px; }

.of-info { flex: 1; min-width: 0; }
.of-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.of-logo { height: 16px; width: auto; max-width: 64px; display: block; }
.of-nombre { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tinta-900); }
.of-precios {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.of-vacio { padding-top: 40px; }

/* ---------- sheet de detalle de producto ---------- */
.ofdet { padding-top: 4px; }
.ofdet-foto {
  display: block; width: 128px; height: 128px;
  margin: 14px auto 6px; object-fit: contain;
  border-radius: var(--r-input); background: var(--superficie);
}
.ofdet-caption { text-align: center; margin-top: 4px; }
.ofdet-badge { text-align: center; margin-top: 8px; }
.ofdet-micro { margin: 16px 0 8px; }

.ofdet-filas {
  border: 1px solid var(--linea); border-radius: var(--r-card);
  overflow: hidden;
}
.ofdet-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; min-height: 48px;
  background: var(--superficie);
}
.ofdet-fila + .ofdet-fila { border-top: 1px solid var(--linea); }
.ofdet-fila.mejor { background: var(--yerba-50); }
.ofdet-cadena {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--tinta-900);
  min-width: 0;
}
.ofdet-mejor-tag {
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  color: var(--ok); text-transform: uppercase; letter-spacing: .06em;
  margin-left: 2px;
}
.ofdet-precio {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
/* ── Escáner de código de barras (scanner.js) ── */
.sheet-scan { }
.scan { display: flex; flex-direction: column; align-items: center; }
.scan-titulo { align-self: flex-start; }
.scan-marco {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 3;
  margin: 8px 0 4px; border-radius: 18px; overflow: hidden;
  background: #0d0d0f; box-shadow: inset 0 0 0 1px var(--linea);
}
.scan-marco #scan-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* mira: ventana central con esquinas + línea láser que recorre */
.scan-mira {
  position: absolute; inset: 18% 12%; border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.28);
  border: 2px solid rgba(255,255,255,.85);
}
.scan-mira span {
  position: absolute; left: 6%; right: 6%; height: 2px; top: 50%;
  background: var(--mate-500); box-shadow: 0 0 8px 1px var(--mate-500);
  animation: scanLaser 1.8s ease-in-out infinite;
}
@keyframes scanLaser {
  0%   { transform: translateY(-46px); opacity: .35; }
  50%  { transform: translateY(46px);  opacity: 1; }
  100% { transform: translateY(-46px); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .scan-mira span { animation: none; } }
.scan-hint {
  font-size: 14px; color: var(--tinta-600); text-align: center;
  margin: 12px 0 6px; line-height: 1.4; min-height: 20px;
}
.scan-manual { width: 100%; margin-top: 4px; }
.scan-manual-fila { display: flex; gap: 8px; align-items: center; }
.scan-manual-fila .dp-input { flex: 1; min-width: 0; }

/* §19: precio de un producto EQUIVALENTE (mismo producto, otro código de barras) */
.ofdet-eq-tag {
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  color: var(--mate-texto); text-transform: uppercase; letter-spacing: .05em;
  margin-left: 2px; white-space: nowrap;
}
.ofdet-fila.equivalente { background: var(--mate-100); }
.ofdet-eq-detalle {
  padding: 2px 14px 9px 31px; margin-top: -4px;
  background: var(--mate-100);
  color: var(--mate-texto); font-style: italic;
}
.ofdet-eq-detalle + .ofdet-fila { border-top: 1px solid var(--linea); }

.ofdet-acciones {
  display: flex; flex-direction: column; gap: 8px;
  margin: 18px 0 6px;
}
.ofdet-error { font-size: 15px; color: var(--tinta-600); line-height: 1.5; margin: 12px 0 14px; }

/* banners */
/* Carrusel "Promos en tus súpers": banners de las home de los súper del hogar.
   Scroll-snap horizontal, imagen redondeada (16) con borde --linea y chip de
   cadena (con su color) flotando encima. Si no hay banners, no se muestra nada. */
.of-banners { margin: 2px 0 14px; }
.of-banners-pista {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}
.of-banners-pista::-webkit-scrollbar { display: none; }
.of-banner {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(82vw, 320px); height: 150px;
  border-radius: 16px;
  border: 1px solid var(--linea);
  overflow: hidden;
  background: var(--superficie);
  text-decoration: none;
  display: block;
}
a.of-banner:active { transform: scale(.985); }
.of-banner-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.of-banner-chip {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--f-titulos); font-weight: 700;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  pointer-events: none;
}

/* ============================================================
   detalle — sheet compartido de producto (detalle.js)
   Reusa .ofdet-* y .busc-punto de arriba; acá va solo lo nuevo.
   ============================================================ */

.dp { padding-top: 4px; }

/* fila sin precio real: apagada, no compite con las que sí tienen */
.ofdet-fila.sindato { opacity: .55; }
.ofdet-fila.sindato .ofdet-cadena { font-weight: 400; color: var(--tinta-600); }
.dp-sindato {
  display: inline-flex; align-items: baseline; gap: 8px;
  flex-shrink: 0; text-align: right;
}
.dp-raya {
  font-family: var(--f-titulos); font-weight: 700; font-size: 17px;
  color: var(--tinta-400); line-height: 1;
}

/* ninguna cadena lo tiene online: estado honesto */
.dp-sinprecios {
  border: 1px dashed var(--linea); border-radius: var(--r-card);
  padding: 16px 14px;
  font-size: 15px; color: var(--tinta-600); line-height: 1.5;
  background: var(--superficie);
}

/* mini-gráfico 30d */
.dp-hist { margin-top: 16px; }
.dp-hist-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-hist-pct { font-family: var(--f-titulos); font-weight: 700; font-size: 13px; }
.dp-canvas { display: block; width: 100%; height: 64px; }
.dp-hist-pie {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 12px; color: var(--tinta-400); font-variant-numeric: tabular-nums;
}

/* alerta de precio: input + botón */
.dp-alerta-form { display: flex; flex-direction: column; gap: 6px; }
.dp-alerta-fila { display: flex; gap: 8px; }
.dp-input {
  flex: 1; min-width: 0; height: 48px;
  border: 1.5px solid var(--linea); border-radius: var(--r-input);
  padding: 0 14px;
  font-family: var(--f-titulos); font-size: 17px; font-weight: 700;
  color: var(--tinta-900); font-variant-numeric: tabular-nums;
  background: var(--superficie);
  outline: none; -webkit-appearance: none; appearance: none;
}
.dp-input:focus { border-color: var(--yerba-600); }
.dp-alerta-crear { height: 48px; width: auto; padding: 0 18px; flex-shrink: 0; }
.dp-alerta-nota { text-align: center; line-height: 1.45; margin-top: -2px; }
.dp-cerrar { width: 100%; margin-top: 6px; color: var(--tinta-600); }
.dp-error { font-size: 15px; color: var(--tinta-600); line-height: 1.5; margin: 12px 0 14px; }

/* ---------- chips de cadena del buscador (cabezal del sheet) ---------- */
.busc-chips {
  display: flex; gap: 8px; overflow-x: auto;
  margin-top: 10px; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.busc-chips::-webkit-scrollbar { display: none; }
.busc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px; flex-shrink: 0;
  border: 1.5px solid var(--linea); border-radius: var(--r-pildora);
  background: var(--superficie);
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px;
  color: var(--tinta-600); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.busc-chip:hover { border-color: var(--cad, var(--yerba-600)); }
/* activo: rellena con el color de la cadena (el texto lo pone el JS según contraste) */
.busc-chip.activo {
  background: var(--cad, var(--yerba-600));
  border-color: var(--cad, var(--yerba-600));
}
.busc-chip .busc-punto { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }

/* zona tocable de cards: feedback táctil para abrir el detalle */
.busc-card { cursor: pointer; }
.busc-card:active { background: var(--hundido); }
.fav-card { cursor: pointer; }
.fav-card:active { background: var(--hundido); }

/* control de orden de resultados del buscador */
.busc-orden { display: flex; gap: 8px; margin: 2px 0 10px; }
.busc-orden-chip {
  height: 34px; padding: 0 14px; border-radius: var(--r-pildora);
  border: 1.5px solid var(--linea); background: var(--superficie);
  color: var(--tinta-600); font-size: 13px; font-weight: 600; cursor: pointer;
}
.busc-orden-chip.activo {
  background: var(--yerba-50); border-color: var(--yerba-600); color: var(--yerba-600);
}

/* precio por unidad de medida ($/l, $/kg) en cada resultado del buscador */
.busc-xunidad {
  font-family: var(--f-titulos); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--tinta-400);
}
.busc-xunidad-fuerte {
  color: var(--yerba-600);
  background: var(--yerba-50); border-radius: var(--r-pildora);
  padding: 1px 8px;
}