/* Estilo inspirado en Mirá Precios: violeta profundo + verde menta, fondo gris
   claro, tarjetas blancas redondeadas y botones en píldora. Pensado primero
   para el celular; en la compu la columna se centra con un ancho máximo y las
   hojas se abren como panel lateral. En modo oscuro se usa la misma paleta
   sobre un violeta muy oscuro. */
:root {
  color-scheme: light;
  --fondo: #f4f3f7;
  --panel: #ffffff;
  --campo: #f0eff4;
  --texto: #2a1b5e;          /* violeta Mirá: títulos y precios */
  --texto-cuerpo: #3b3456;
  --suave: #858099;
  --borde: #e8e6ef;
  --violeta: #2a1b5e;
  --sobre-violeta: #ffffff;
  --menta: #00e09a;
  --menta-texto: #0a9c6b;
  --menta-claro: rgba(0, 224, 154, 0.14);
  --link: #2f7bf5;
  --peligro-fondo: #fde8ea;
  --peligro-texto: #d6334a;
  --sombra: 0 1px 2px rgba(42, 27, 94, 0.04), 0 2px 10px rgba(42, 27, 94, 0.05);
  --radio: 16px;
  --ancho: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fondo: #120c27;
    --panel: #1d1540;
    --campo: #281f52;
    --texto: #f1eefc;
    --texto-cuerpo: #d6d1ea;
    --suave: #9a93b8;
    --borde: #31285d;
    --violeta: #5b45c4;
    --sobre-violeta: #ffffff;
    --menta-texto: #3bf0b5;
    --menta-claro: rgba(0, 224, 154, 0.16);
    --link: #7fb0ff;
    --peligro-fondo: rgba(248, 113, 113, 0.16);
    --peligro-texto: #fca5a5;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

/* Los componentes con display propio igual se ocultan con el atributo hidden */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto-cuerpo);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.con-hoja { overflow: hidden; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  padding: 0;
}

/* Enlace de texto azul, como "Ver más" y "Filtrar" de Mirá */
.enlace {
  color: var(--link);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
.enlace:hover { text-decoration: underline; }

/* ---------- barra superior ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  padding: calc(0.6rem + env(safe-area-inset-top)) 1rem 0.85rem;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 6px 16px -10px rgba(42, 27, 94, 0.25);
}

.barra-fila, .buscador, .contenido { max-width: var(--ancho); margin-inline: auto; }

.barra-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.logo { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.logo a { color: var(--texto); text-decoration: none; }
.logo span { color: var(--menta); }

/* Debajo del logo: tres nenas de la mano y sus iniciales */
.logo-bloque { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: none; }
.val { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.val svg { width: 66px; height: 26px; overflow: visible; }
.val span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.22em; margin-right: -0.22em; color: var(--texto); }
.val-brazos { fill: none; stroke: var(--texto); stroke-width: 1.4; stroke-linecap: round; }
.val-pelo { fill: #6b4226; }   /* castaño en claro y en oscuro */
.val-cara { fill: #f6d3b8; stroke: #6b4226; stroke-width: 0.8; }
.val-vestido { fill: var(--violeta); }
.val-vestido-menta { fill: var(--menta); }
.val-piernas { fill: none; stroke: var(--texto); stroke-width: 1.4; stroke-linecap: round; }

/* La dirección en azul y al centro, como en Mirá */
.boton-ubicacion {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.3rem;
  color: var(--link);
  font-weight: 600;
  font-size: 0.92rem;
}
.boton-ubicacion::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3 3 10.5l7.5 2.6L13.5 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3 3 10.5l7.5 2.6L13.5 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boton-ubicacion::after { content: "›"; font-size: 1.2em; line-height: 1; }
#ubicacion-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.boton-changuito {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--texto);
}
.boton-changuito svg, .boton-escanear svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contador {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--menta);
  color: #1a1240;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.buscador { position: relative; display: flex; }

.buscador input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 7.2rem 0.8rem 2.7rem;   /* a la derecha, el botón "Escanear" */
  font: inherit;
  font-size: 1rem;   /* 16px: así Safari no hace zoom al tocar el buscador */
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--campo) no-repeat 0.9rem center / 1.15rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858099' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  color: var(--texto);
  -webkit-appearance: none;
  appearance: none;
}
.buscador input::placeholder { color: var(--suave); }
.buscador input:focus { outline: none; border-color: var(--violeta); background-color: var(--panel); }

/* Con texto, no solo el ícono: que se entienda que lee el código de barras con la cámara */
.boton-escanear {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 0.7rem 0 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 10px;
  background: var(--menta-claro);
  color: var(--menta-texto);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}
.boton-escanear svg { width: 19px; height: 19px; stroke-width: 2.2; flex: none; }

/* ---------- contenido ---------- */

.contenido { padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); }

.seccion { margin-bottom: 1.4rem; }
.seccion-titulo {
  margin: 0 0.15rem 0.7rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto);
}

.nota-pie { margin: 0.8rem 0.3rem 0; font-size: 0.74rem; line-height: 1.45; color: var(--suave); }

/* Categorías: círculos blancos con un emoji, en una fila que se desliza */
.categorias {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  margin: 0 -1rem;
  padding: 0.1rem 1rem 0.4rem;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.categorias::-webkit-scrollbar { display: none; }
.categoria {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 72px;
  border-radius: 12px;
  font-size: 0.78rem;
  color: var(--texto-cuerpo);
  scroll-snap-align: start;
}
.categoria-icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: var(--sombra);
  display: grid;
  place-items: center;
  font-size: 1.9rem;
}

.seccion-cab { display: flex; align-items: baseline; justify-content: space-between; }

/* Descuentos de hoy: tarjetas que se deslizan, como "Ofertas de hoy" de Mirá */
.descuentos {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  margin: 0 -1rem;
  padding: 0.1rem 1rem 0.4rem;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.descuentos::-webkit-scrollbar { display: none; }
.descuento {
  flex: 0 0 auto;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.75rem 0.8rem;
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra);
  text-align: left;
  font-size: 0.76rem;
  color: var(--suave);
  scroll-snap-align: start;
}
.descuento-cab { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.descuento-pct { font-size: 1.35rem; font-weight: 800; color: var(--menta-texto); letter-spacing: -0.02em; }
.descuento strong { color: var(--texto); font-size: 0.86rem; font-weight: 600; line-height: 1.25; }
.descuento-tope { margin-top: 0.15rem; font-size: 0.7rem; }

.lista-descuentos { margin-bottom: 1.2rem; }
.fila-descuento { display: flex; gap: 0.7rem; padding: 0.8rem 0; }
/* El súper a la izquierda; cada banco, tarjeta o billetera con su logo en el texto */
.logo-descuento { flex: none; width: 40px; }
.logo-descuento .avatar { width: 40px; height: 40px; }
.medios-pago { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.medio-pago { display: inline-flex; align-items: center; gap: 0.3rem; }
/* La red de la tarjeta (sale de las condiciones): un poco más tenue que el banco */
.medio-red { font-weight: 500; color: var(--texto-cuerpo); font-size: 0.85rem; }
.fila-descuento .avatar-medio { width: 22px; height: 22px; font-size: 0.5rem; }
.fila-descuento .avatar-medio img { padding: 1px; }
.fila-descuento-pct {
  flex: 0 0 3.2rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--menta-texto);
  line-height: 1.2;
}
.fila-descuento-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--suave); }
.fila-descuento-texto strong { color: var(--texto); font-size: 0.92rem; font-weight: 600; }
.fila-descuento-etiquetas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fila-descuento-etiquetas em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--campo);
  color: var(--texto);
}
.fila-descuento details summary { cursor: pointer; color: var(--link); font-weight: 600; margin-top: 0.2rem; }
.fila-descuento details p { margin: 0.3rem 0 0; font-size: 0.72rem; line-height: 1.45; }

.hoy-banco { font-size: 0.72rem !important; color: var(--menta-texto) !important; font-weight: 600; }
.promo-tienda { margin: 0.35rem 0.9rem 0; font-size: 0.82rem; color: var(--texto-cuerpo); }
.promo-tienda strong { color: var(--texto); }

/* Lista blanca con filas separadas por una línea (súper cercanos) */
.lista-tarjeta {
  list-style: none;
  margin: 0;
  padding: 0 0.95rem;
  background: var(--panel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.lista-tarjeta > li + li { border-top: 1px solid var(--borde); }
.cargando { padding: 1rem 0; font-size: 0.88rem; color: var(--suave); }

.fila-super { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; }
.fila-super-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fila-super-texto strong { color: var(--texto); font-weight: 600; font-size: 0.93rem; }
.fila-super-texto span { font-size: 0.78rem; color: var(--suave); }

.vacio, .error {
  margin: 0;
  padding: 1.3rem;
  border-radius: var(--radio);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}
.vacio { background: var(--panel); box-shadow: var(--sombra); color: var(--suave); }
.error { background: var(--peligro-fondo); color: var(--peligro-texto); }

/* ---------- avatar de la cadena ---------- */

.avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color, #6b6290);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--borde);
}
/* El logo tapa las iniciales; si no carga, onerror lo saca y quedan visibles. */
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}
.avatar-mini { width: 22px; height: 22px; font-size: 0.5rem; }
.avatar-mini img { padding: 2px; }
.avatar-chip { width: 18px; height: 18px; font-size: 0.45rem; box-shadow: none; }
.avatar-chip img { padding: 1px; }

.etiqueta {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: 1px;
}
.abierto { background: var(--menta-claro); color: var(--menta-texto); }
.cerrado { background: var(--peligro-fondo); color: var(--peligro-texto); }

/* ---------- resultados ---------- */

/* "95 resultados | En oferta ◯ | Filtrar", como la barra de Mirá */
.barra-resultados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.2rem 0.15rem 0.85rem;
  font-size: 0.86rem;
  color: var(--suave);
}
.barra-resultados > * + * { padding-left: 0.9rem; border-left: 1px solid var(--borde); border-radius: 0; }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; color: var(--texto); }
.interruptor input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: var(--borde);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.interruptor input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.interruptor input:checked { background: var(--menta); }
.interruptor input:checked::after { transform: translateX(18px); }
.interruptor-chico input { width: 38px; height: 22px; }
.interruptor-chico input::after { width: 16px; height: 16px; }
.interruptor-chico input:checked::after { transform: translateX(16px); }

.producto-tarjeta {
  background: var(--panel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.9rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.producto-tarjeta:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }

/* Chips de promo con el color de la cadena: "2x1 en Día" */
.chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.chip-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.2rem 0.6rem 0.2rem 0.2rem;
  border-radius: 999px;
  background: var(--color, var(--violeta));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-mas { padding: 0.2rem 0.6rem; background: var(--violeta); }

.producto-cuerpo { display: flex; gap: 0.9rem; align-items: center; }
.producto-info { flex: 1 1 auto; min-width: 0; }

/* Sin foto queda un cuadro neutro con un changuito tenue (en oscuro, no encandila) */
.foto {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  background: var(--campo);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.foto::before { content: "🛒"; font-size: 1.6rem; opacity: 0.25; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.foto.cargada { background: #fff; }

/* El SEPA trae todo en mayúsculas: se muestra en minúscula con inicial mayúscula */
.marca-producto {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  color: var(--suave);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.producto-nombre, .ficha-nombre, .detalle-tienda li > span:first-child, .par-items {
  text-transform: lowercase;
}
.producto-nombre::first-letter, .ficha-nombre::first-letter, .detalle-tienda li > span:first-child::first-letter {
  text-transform: uppercase;
}
.producto-nombre {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--texto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto-precio {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.producto-sub { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--suave); }

/* ---------- agregar al changuito ---------- */

.control-cantidad { display: flex; align-items: center; gap: 0.5rem; }
.control-cantidad .agregar {
  padding: 0.55rem 1.1rem;
  background: var(--violeta);
  color: var(--sobre-violeta);
  font-weight: 600;
  font-size: 0.92rem;
}
.control-cantidad .paso {
  width: 38px;
  height: 38px;
  background: var(--violeta);
  color: var(--sobre-violeta);
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 600;
}
.control-cantidad .cantidad {
  min-width: 1.8rem;
  text-align: center;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
/* En la tarjeta y en la ficha, a todo el ancho como el "Agregar" de Mirá */
.control-cantidad.ancho { margin-top: 0.8rem; justify-content: space-between; }
.control-cantidad.ancho .agregar { flex: 1 1 auto; padding: 0.7rem 1rem; font-size: 1rem; }
.control-cantidad.ancho .paso { width: 44px; height: 44px; }
.control-cantidad.ancho .cantidad { flex: 1 1 auto; font-size: 1.05rem; }
.control-cantidad.grande { margin-top: 0; }
.control-cantidad.grande .agregar { padding: 0.85rem 1rem; }
.control-cantidad.grande .agregar::after { content: " al changuito"; }

/* ---------- hojas ---------- */

.hoja {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(480px, 100%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  box-shadow: -10px 0 30px rgba(42, 27, 94, 0.18);
}

.hoja-cab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) 0.75rem 0.6rem;
  background: var(--panel);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 6px 16px -10px rgba(42, 27, 94, 0.25);
}
.hoja-cab-texto { flex: 1 1 auto; min-width: 0; }
.hoja-cab-texto p { margin: 0.05rem 0 0; font-size: 0.78rem; color: var(--suave); }
.hoja-titulo-cab {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ficha-titulo { text-transform: lowercase; }
#ficha-titulo::first-letter { text-transform: uppercase; }
.cerrar-hoja {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--texto);
  font-size: 1.1rem;
}
.cerrar-hoja.volver { font-size: 2rem; line-height: 1; padding-bottom: 0.2rem; }
.boton-texto { padding: 0.5rem 0.6rem; color: var(--peligro-texto); font-weight: 600; font-size: 0.9rem; }

.hoja-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
.hoja-pie {
  flex: 0 0 auto;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--panel);
  box-shadow: 0 -6px 16px -10px rgba(42, 27, 94, 0.25);
}

/* Filtros: sube desde abajo sobre un fondo oscurecido */
.hoja-baja {
  inset: 0;
  width: auto;
  background: rgba(18, 12, 39, 0.45);
  box-shadow: none;
  justify-content: flex-end;
}
.hoja-baja .hoja-cab, .hoja-baja .hoja-cuerpo {
  width: min(560px, 100%);
  margin-inline: auto;
  background: var(--panel);
}
.hoja-baja .hoja-cab { border-radius: 22px 22px 0 0; box-shadow: none; padding: 0.9rem 0.75rem 0.3rem 1.1rem; }
.hoja-baja .hoja-cuerpo { flex: 0 1 auto; padding: 0.4rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); }

.filtro-titulo {
  display: flex;
  justify-content: space-between;
  margin: 0.9rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto);
}
.filtro-titulo output { color: var(--menta-texto); }
.opciones { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opciones label {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--texto);
  cursor: pointer;
}
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-cadenas label { gap: 0.4rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; }
.opciones-cadenas .avatar { width: 22px; height: 22px; font-size: 0.5rem; }
.filtro-titulo .enlace { float: right; font-size: 0.82rem; }
.opciones label:has(input:checked) { border-color: var(--violeta); background: var(--violeta); color: var(--sobre-violeta); }
.opciones label:has(input:focus-visible) { outline: 2px solid var(--menta); }
.deslizador { width: 100%; accent-color: var(--violeta); height: 28px; }
.hoja-baja .interruptor { margin: 1rem 0 1.2rem; font-size: 0.92rem; }
.boton-principal {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--violeta);
  color: var(--sobre-violeta);
  font-weight: 600;
  font-size: 1rem;
}

/* ---------- ficha del producto ---------- */

.ficha-producto { text-align: center; margin-bottom: 1.2rem; }
.foto-grande { width: 200px; height: 200px; margin: 0 auto 0.9rem; border-radius: 20px; }
.ficha-nombre { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--texto); }

.lista-precios { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.5rem; }
.fila-precio {
  background: var(--panel);
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.fila-precio.barato { border-color: var(--menta); }
.fila-precio-cab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  text-align: left;
}
.fila-precio-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fila-precio-texto strong { color: var(--texto); font-weight: 600; font-size: 0.92rem; }
.fila-precio-texto > span { font-size: 0.76rem; color: var(--suave); }
.chip-ficha {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--violeta);
  color: var(--sobre-violeta);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-precio-valor {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.fila-precio-valor s, .detalle-tienda s { font-size: 0.72rem; font-weight: 400; color: var(--suave); }
.fila-precio-mas { padding: 0 0.9rem 0.8rem 3.6rem; font-size: 0.8rem; color: var(--suave); }
.fila-precio-mas p { margin: 0 0 0.5rem; line-height: 1.4; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }

.variacion { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.variacion.baja { color: var(--menta-texto); }
.variacion.sube { color: var(--peligro-texto); }

.historial { margin-top: 0.6rem; }
.historial-grafico { width: 100%; height: 44px; overflow: visible; }
.historial-grafico polyline { fill: none; stroke: var(--violeta); stroke-width: 2; vector-effect: non-scaling-stroke; }
.historial-grafico circle { fill: var(--menta); }
.historial-nota { margin: 0.2rem 0 0; font-size: 0.74rem; color: var(--suave); }

.mapa-ficha {
  height: 240px;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--campo);
}

.marcador-precio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transform: translate(-50%, -50%);
  padding: 0.15rem 0.55rem 0.15rem 0.18rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2a1b5e;
  color: #fff;
  font: 700 0.74rem/1 "Inter", system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(42, 27, 94, 0.35);
}
.marcador-precio.barato { background: var(--menta); color: #1a1240; }

/* ---------- changuito ---------- */

/* "Ahorrás $16.500" en un cartel violeta, como Mirá */
.banner-ahorro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: var(--radio);
  background: #2a1b5e;
  color: #fff;
  font-size: 0.88rem;
  text-align: center;
}
.banner-ahorro strong { font-size: 1.7rem; font-weight: 800; color: var(--menta); letter-spacing: -0.02em; }
.banner-sub { font-size: 0.78rem; opacity: 0.8; }

.items-changuito { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.5rem; }
.item-changuito {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.item-changuito .foto { width: 54px; height: 54px; border-radius: 10px; }
.item-changuito .producto-nombre { margin: 0; font-size: 0.86rem; }
.item-info { flex: 1 1 auto; min-width: 0; }
.item-changuito .paso { width: 34px; height: 34px; font-size: 1.05rem; }
.item-changuito .cantidad { min-width: 1.3rem; }
.item-changuito .control-cantidad { gap: 0.3rem; }

.tienda {
  background: var(--panel);
  border: 2px solid transparent;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.tienda.mejor { border-color: var(--menta); }
.tienda.par { border: 2px dashed var(--borde); padding-bottom: 0.6rem; }
.tienda.cerca { border-color: var(--link); }
.tienda.cerca .tienda-pie { background: var(--link); color: #fff; }
.tienda-cab { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.9rem 0.3rem; }
.tienda-nombre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tienda-nombre strong { color: var(--texto); font-size: 0.95rem; font-weight: 600; }
.tienda-nombre span { font-size: 0.76rem; color: var(--suave); }
.tienda-total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.faltan { margin: 0.2rem 0.9rem 0; font-size: 0.82rem; color: var(--peligro-texto); }

.detalle-tienda { padding: 0.2rem 0.9rem 0.6rem; }
.detalle-tienda summary {
  cursor: pointer;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--link);
  list-style: none;
}
.detalle-tienda summary::-webkit-details-marker { display: none; }
.detalle-tienda summary::after { content: " ›"; }
.detalle-tienda[open] summary::after { content: " ⌄"; }
.detalle-tienda ul { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: grid; gap: 0.4rem; }
.detalle-tienda li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; }
.detalle-tienda li > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
}
.detalle-tienda li.falta > span { color: var(--suave); font-weight: 400; }

/* La franja menta abajo, como el "Supermercado seleccionado" de Mirá */
.tienda-pie {
  margin: 0;
  padding: 0.55rem;
  background: var(--menta);
  color: #1a1240;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 600;
}

.par-tienda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  margin: 0.5rem 0.9rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: var(--fondo);
  font-size: 0.8rem;
}
.par-tienda strong { color: var(--texto); }
.par-items { flex: 1 1 100%; color: var(--suave); line-height: 1.4; }

.changuito-vacio {
  text-align: center;
  padding: 2rem 1.2rem;
  background: var(--panel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--suave);
  font-size: 0.9rem;
  line-height: 1.5;
}
.changuito-vacio strong { color: var(--texto); font-size: 1rem; }
.changuito-vacio p { margin: 0.3rem 0; }
.changuito-vacio-icono { font-size: 2.6rem; margin: 0 0 0.4rem !important; }

/* ---------- ubicación ---------- */

.aviso-ubicacion {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra);
  font-size: 0.86rem;
  line-height: 1.45;
}
.aviso-ubicacion > p:first-child { margin: 0 0 0.6rem; padding-right: 1.6rem; }
.form-direccion { display: flex; gap: 0.4rem; }
.form-direccion input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--campo);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
}
.form-direccion button { padding: 0.6rem 1.1rem; background: var(--violeta); color: var(--sobre-violeta); font-weight: 600; }
.aviso-pie { margin: 0.5rem 0 0; }
.aviso-pie:empty { display: none; }
.cerrar-aviso {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 36px;
  height: 36px;
  color: var(--suave);
}

/* ---------- escáner ---------- */

.escaner {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.escaner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Recuadro guía: lo de afuera se oscurece con una sombra enorme */
.escaner-marco {
  position: relative;
  width: min(80vw, 360px);
  height: min(42vw, 180px);
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.escaner-linea {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: var(--menta);
  box-shadow: 0 0 10px var(--menta);
  animation: barrido 1.6s ease-in-out infinite alternate;
}
@keyframes barrido { from { top: 15%; } to { top: 85%; } }
@media (prefers-reduced-motion: reduce) { .escaner-linea { animation: none; } }
.escaner-texto {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: calc(2.5rem + env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 420px;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.45;
}
.escaner .cerrar-hoja {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top));
  right: 1rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---------- aviso flotante ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.65rem 0.65rem 0.65rem 1.1rem;
  border-radius: 999px;
  background: #2a1b5e;
  color: #fff;
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(42, 27, 94, 0.35);
}
.toast button { padding: 0.4rem 0.95rem; background: var(--menta); color: #1a1240; font-weight: 700; }
/* Con la ficha abierta, arriba del botón "Agregar al changuito" */
body.con-hoja .toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

/* ---------- mapa ---------- */

.leaflet-container { background: var(--campo); font-family: inherit; }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--texto); }
.leaflet-control-attribution { font-size: 0.6rem; }
@media (prefers-color-scheme: dark) {
  .leaflet-control-attribution { background: rgba(29, 21, 64, 0.85) !important; color: var(--suave); }
}

/* ---------- compu ---------- */

@media (min-width: 720px) {
  .contenido { padding-top: 1.4rem; }
  .categorias { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .producto-tarjeta:hover { box-shadow: 0 0 0 2px var(--menta), var(--sombra); }
}

/* Cadenas sin sucursal dentro del radio: se ven, pero queda claro que están lejos */
.fila-precio.lejos .fila-precio-valor { color: var(--texto-cuerpo); }
.fila-precio.lejos .avatar { opacity: 0.8; }
.lejos-km { color: var(--peligro-texto) !important; font-weight: 700; }
.titulo-nota { font-size: 0.78rem; font-weight: 500; color: var(--suave); margin-left: 0.3rem; }

/* Tarjeta "Instalá Mercadito" del inicio */
.aviso-instalar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  padding: 0.9rem 2.4rem 0.9rem 0.9rem;
  border-radius: var(--radio);
  background: var(--menta-claro);
  color: var(--texto-cuerpo);
  font-size: 0.88rem;
  line-height: 1.45;
}
.aviso-instalar img { border-radius: 10px; flex: none; }
.aviso-instalar p { flex: 1 1 12rem; margin: 0; }
.aviso-instalar b { color: var(--texto); }
.icono-compartir { width: 1.1em; height: 1.1em; vertical-align: -0.15em; fill: none; stroke: var(--link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton-instalar {
  flex: 1 0 100%;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  background: var(--violeta);
  color: var(--sobre-violeta);
  font: inherit;
  font-weight: 700;
}