/* Catálogo público.
   Mismos tokens de marca que el panel interno (apps/panel/static/panel/panel.css)
   para que las dos pantallas se lean como el mismo producto. Sin build, sin CDN,
   sin fuentes externas: whitenoise lo sirve y listo. */

:root {
  --fondo: #05081A;
  --panel: #0B1226;
  --panel-2: #111A33;
  --borde: #202C48;
  --cian: #01D0F8;
  --azul-profundo: #036A7C;
  --texto: #F5F8FC;
  --texto-muted: #8B9AB5;
  --verde: #22B573;
  --amarillo: #F5B942;
  --rojo: #E5484D;
  --radio: 10px;
  --fuente: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--cian); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.75rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; color: var(--cian); }

code {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: .05rem .35rem;
  font-size: .85em;
}

.muted { color: var(--texto-muted); }
.vacio { color: var(--texto-muted); padding: 2rem 0; }
.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* Texto para lectores de pantalla y nada más. La estrella de la tarjeta es un
   símbolo suelto: sin esto, un lector de pantalla anuncia «botón, estrella
   negra», que no dice qué hace. No se usa `display:none` porque eso lo saca
   también del árbol de accesibilidad, que es justo lo contrario de lo buscado. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Navbar --- */
.navbar { border-bottom: 1px solid var(--borde); background: var(--panel); }
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  max-width: 1120px;
  margin: 0 auto;
}
.marca { color: var(--texto); font-weight: 700; font-size: 1.05rem; }
.marca span { color: var(--cian); }
.marca:hover { text-decoration: none; }
.navbar-links { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.form-inline { display: inline; margin: 0; }
.btn-enlace {
  background: none;
  border: none;
  color: var(--cian);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
}

/* Contador de cuota: siempre visible, para que nadie se sorprenda al llegar
   al límite. */
.pastilla {
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  background: rgba(1, 208, 248, .12);
  color: var(--cian);
  white-space: nowrap;
}
.pastilla-agotada { background: rgba(245, 185, 66, .18); color: var(--amarillo); }
.pastilla-equipo { background: rgba(34, 181, 115, .18); color: var(--verde); }

/* Acceso a favoritos del menú. El contador va pegado al nombre porque la lista
   tiene tope: enterarse de que está llena recién al tocar una estrella es
   enterarse tarde. */
.link-favoritos { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.estrella-icono { color: var(--amarillo); }
.contador-favoritos {
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(245, 185, 66, .16);
  color: var(--amarillo);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

/* --- Landing --- */
.hero { padding: 3.5rem 1.25rem 1rem; text-align: center; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.15; margin-bottom: 1rem; }
.bajada { font-size: 1.1rem; color: var(--texto-muted); max-width: 620px; margin: 0 auto 2rem; }
.hero-acciones { margin-bottom: .75rem; }
.hero-nota { font-size: .85rem; margin-top: 0; }
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  color: #1a1a1a;
  border: none;
  border-radius: 999px;
  padding: .85rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-google:hover { opacity: .9; text-decoration: none; }
/* La «G» va dibujada con CSS y no como imagen: una fuente o un SVG externo
   serían una request más antes del primer clic, y el CSP de nada sirve si el
   botón de ingreso depende de un tercero para verse. */
.g-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
}

/* Pantallas sin sesión (login, error de OAuth, registro cerrado). */
.pantalla-entrada { padding: 3.5rem 1.25rem 1rem; }
.pantalla-entrada .pantalla-mensaje form { margin: 1.5rem 0 .5rem; }

.tarjetas-valor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 3.5rem 0 2rem;
  text-align: left;
}
.tarjetas-valor article {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
}
.tarjetas-valor h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--cian); }
.tarjetas-valor p { margin: 0; font-size: .92rem; color: var(--texto-muted); }
.quienes { text-align: left; max-width: 720px; margin: 0 auto 2rem; }
.quienes p { color: var(--texto-muted); }

/* --- Barra de estado y filtro de zona --- */
.barra-estado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .8rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
  font-size: .84rem;
}
.barra-estado-zona { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }

.filtro-zona, .filtros-catalogo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  padding: .85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 1rem;
}
.filtro-campo { flex: 1 1 170px; min-width: 0; }
.filtro-campo-corto { flex: 0 1 110px; }
/* El buscador ocupa toda la fila y los tres desplegables van debajo: es el
   control principal de la pantalla y compartir renglón lo dejaba del ancho de
   un filtro cualquiera. */
.filtro-campo-ancho { flex: 1 1 100%; }
.campo-con-boton { display: flex; gap: .5rem; }
.campo-con-boton input[type=search] {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  padding: .5rem .8rem;
  font-family: inherit;
  font-size: .95rem;
}
.campo-con-boton input[type=search]:focus { outline: none; border-color: var(--cian); }
.campo-con-boton .btn { white-space: nowrap; }
.filtro-campo label {
  display: block;
  margin-bottom: .15rem;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texto-muted);
}
.filtro-pais { flex: 0 1 130px; }
.filtro-pais .valor-fijo {
  display: block;
  padding: .4rem 0;
  font-size: .88rem;
  color: var(--texto-muted);
  cursor: help;
}
.filtro-acciones { display: flex; gap: .5rem; padding-bottom: .1rem; }

input[type=text], select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  padding: .45rem .6rem;
  font-family: inherit;
  font-size: .9rem;
}
input[type=text]:focus, select:focus { outline: none; border-color: var(--cian); }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn-primario { background: linear-gradient(135deg, var(--cian), var(--azul-profundo)); color: #04121A; }
.btn-fantasma { background: transparent; color: var(--texto-muted); border-color: var(--borde); }
.btn-chico { padding: .3rem .8rem; font-size: .78rem; }

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-verde { background: rgba(34, 181, 115, .18); color: var(--verde); }
.badge-amarillo { background: rgba(245, 185, 66, .18); color: var(--amarillo); }
.badge-rojo { background: rgba(229, 72, 77, .18); color: var(--rojo); }

/* --- Grilla del catálogo --- */
.resumen { font-size: .88rem; margin: 0 0 1rem; }
.grilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.tarjeta {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.tarjeta a { color: inherit; display: block; height: 100%; }
.tarjeta a:hover { text-decoration: none; }
.tarjeta:hover { border-color: var(--azul-profundo); }
/* La caja de la foto tiene alto fijo aunque la imagen todavía no cargó: sin
   esto, cada foto que aparece empuja el contenido y el scroll infinito se
   vuelve inusable. */
.tarjeta-foto {
  height: 160px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta-foto img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .5rem; }
.tarjeta-datos { padding: .7rem .8rem .9rem; }
.tarjeta-nombre { margin: 0 0 .25rem; font-size: .85rem; line-height: 1.35; overflow-wrap: anywhere; }
.tarjeta-marca, .tarjeta-presentacion { margin: 0; font-size: .76rem; }
/* El promedio de la zona. Es el dato por el que se mira una grilla de precios,
   así que va destacado y último —donde el ojo termina de leer la tarjeta— y no
   compitiendo con el nombre. */
.tarjeta-precio {
  margin: .45rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--verde);
}
.tarjeta-precio-nota { font-size: .7rem; font-weight: 400; }
/* Sin precio no se pone "$0" ni se deja el hueco: se dice que no hay dato en
   esa zona, que es información útil (el producto existe, nadie lo publicó acá)
   y además mantiene todas las tarjetas del mismo alto. */
.tarjeta-sin-precio { font-size: .74rem; font-weight: 400; color: var(--texto-muted); }

/* --- Estrella de favoritos --- */
/* Flota sobre la foto, arriba a la derecha. Va por encima del <a> de la tarjeta
   (que ocupa todo el alto) con z-index, y no dentro: un <form> anidado en un
   link es marcado inválido y el clic dispararía las dos cosas.

   El área táctil es de 34px y no del tamaño del glifo: en un celular, un blanco
   más chico que eso se falla más veces de las que se acierta. */
.form-favorito { position: absolute; top: .35rem; right: .35rem; z-index: 2; margin: 0; }
.btn-estrella {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 999px;
  /* Semiopaco: la estrella se apoya sobre la foto del producto y tiene que
     leerse tanto sobre un envase blanco como sobre uno negro. */
  background: rgba(5, 8, 26, .72);
  color: var(--texto-muted);
  font-size: 1rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.btn-estrella:hover { color: var(--amarillo); border-color: var(--amarillo); }
.btn-estrella.activo { color: var(--amarillo); border-color: var(--amarillo); background: rgba(245, 185, 66, .16); }
.btn-estrella:disabled { opacity: .55; cursor: progress; }
.btn-estrella:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

/* En la ficha hay lugar y quien llegó hasta acá está decidiendo: la estrella
   crece y se pone el texto al lado. */
.ficha-titulo { display: flex; align-items: flex-start; gap: 1rem; }
.ficha-titulo h1 { flex: 1 1 auto; min-width: 0; }
.form-favorito-ficha { position: static; flex: 0 0 auto; }
.form-favorito-ficha .btn-estrella {
  width: auto;
  height: auto;
  padding: .45rem .9rem;
  font-size: .85rem;
  background: transparent;
}
.etiqueta-estrella { font-weight: 600; }

/* --- Cabecera de favoritos e informe --- */
.cabecera-favoritos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.cabecera-favoritos h1 { font-size: 1.3rem; margin: 0 0 .25rem; }
.cabecera-favoritos p { margin: 0; font-size: .88rem; max-width: 62ch; }
.form-informe { margin: 0; text-align: right; }
.nota-informe { margin: .4rem 0 0; font-size: .76rem; }

/* --- Avisos --- */
.avisos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.aviso-warning { background: rgba(245, 185, 66, .1); border-color: rgba(245, 185, 66, .3); }
.aviso-error { background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .3); }
.aviso-success { background: rgba(34, 181, 115, .1); border-color: rgba(34, 181, 115, .3); }
#aviso-favoritos { margin: 1rem 0 0; }

.centinela { text-align: center; padding: 2rem 0; }
.centinela.cargando #cargar-mas { opacity: .5; pointer-events: none; }
.centinela.con-error #cargar-mas { border-color: var(--rojo); color: var(--rojo); }
.fin-listado { text-align: center; padding: 2rem 0; font-size: .88rem; }

/* --- Ficha --- */
.ficha { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.ficha-foto { flex: 0 0 320px; max-width: 100%; }
.ficha-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .75rem;
}
.sin-foto {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-muted);
  font-size: .85rem;
}
.ficha-datos { flex: 1 1 340px; min-width: 0; }
.ficha-datos h1 { overflow-wrap: anywhere; }
/* Lista de atributos: etiqueta arriba, valor abajo. Una línea de textos
   separados por puntos no deja saber cuál es la marca y cuál la categoría. */
.ficha-atributos {
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem 1.25rem;
}
.ficha-atributos > div { min-width: 0; }
.ficha-atributos dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-muted);
  margin-bottom: .15rem;
}
.ficha-atributos dd {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ficha-descripcion { margin-top: 1.25rem; font-size: .9rem; }

.form-reporte { margin-top: .75rem; }
.btn-reporte {
  width: 100%;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto-muted);
  padding: .45rem .8rem;
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.btn-reporte:hover { border-color: var(--amarillo); color: var(--amarillo); }
.btn-reporte.activo { border-color: var(--amarillo); color: var(--amarillo); background: rgba(245, 185, 66, .1); }
.reporte-gracias { font-size: .78rem; margin: .4rem 0 0; text-align: center; }

.precios-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: .75rem;
}
.precio {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .85rem 1rem;
}
.precio-destacado { border-color: var(--verde); }
.precio .etiqueta {
  display: block;
  font-size: .74rem;
  color: var(--texto-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.precio .valor { font-size: 1.5rem; font-weight: 700; }
.precio-destacado .valor { color: var(--verde); }

.aviso {
  background: rgba(245, 185, 66, .1);
  border: 1px solid rgba(245, 185, 66, .3);
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: .88rem;
}

/* --- Historial de precios --- */
.historial-precios {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.historial-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.historial-encabezado h3 { margin-top: 0; }
.historial-resumen {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: .78rem;
  color: var(--texto-muted);
}
.historial-resumen span {
  display: inline-flex;
  flex-direction: column;
  min-width: 6.5rem;
  padding: .45rem .6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel-2);
}
.historial-resumen strong { color: var(--texto); font-size: .9rem; }
.historial-grafico {
  position: relative;
  height: 220px;
  margin-top: 1rem;
  padding: .25rem 0 1.35rem;
}
.historial-grafico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.historial-eje { stroke: rgba(139, 154, 181, .35); stroke-width: 1; }
.historial-linea {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.historial-minimo { stroke: var(--verde); }
.historial-promedio { stroke: var(--amarillo); }
.historial-maximo { stroke: var(--rojo); }
.historial-y,
.historial-x {
  position: absolute;
  font-size: .72rem;
  color: var(--texto-muted);
  pointer-events: none;
}
.historial-y { left: 0; }
.historial-y-alta { top: .05rem; }
.historial-y-baja { bottom: 1.55rem; }
.historial-x { bottom: 0; }
.historial-x-inicio { left: 3rem; }
.historial-x-fin { right: .4rem; }
.historial-leyenda {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--texto-muted);
}
.historial-leyenda span::before {
  content: "";
  display: inline-block;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: -.06rem;
  background: currentColor;
}
.leyenda-minimo { color: var(--verde); }
.leyenda-promedio { color: var(--amarillo); }
.leyenda-maximo { color: var(--rojo); }

/* --- Podio de comercios --- */
/* Va como <ol> porque el orden es el dato. El número de puesto se dibuja acá y
   no se escribe en el HTML dos veces: el `#1` del marcado es el que leen los
   lectores de pantalla, este es el que se ve. */
.podio {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}
.podio-puesto {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem .8rem .8rem;
  text-align: center;
}
/* Solo el primero se destaca. Con los cuatro resaltados no se destaca ninguno,
   y el dato que importa es dónde está más barato. */
.podio-1 { border-color: var(--verde); }
.podio-numero {
  position: absolute;
  top: -.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  font-size: .7rem;
  font-weight: 700;
  color: var(--texto-muted);
}
.podio-1 .podio-numero { background: var(--verde); border-color: var(--verde); color: #04121A; }

/* La caja del logo lleva las iniciales debajo. Si la imagen carga, la tapa; si
   el archivo todavía no está en el bucket, `onerror` saca el <img> y quedan
   las iniciales sobre el color de la cadena. Un solo marcado sirve a los dos
   casos y no hace falta que el servidor sepa qué hay subido. */
.podio-logo, .chip-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--marca) 18%, var(--panel-2));
  color: var(--marca);
  font-weight: 700;
}
.podio-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.podio-logo img, .chip-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  /* El logo se apoya sobre el color de la cadena, y muchos vienen con fondo
     blanco recortado: sin esto se ven bien los transparentes y mal los otros. */
  background: #fff;
}
.podio-comercio {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.podio-precio { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 700; }
.podio-1 .podio-precio { color: var(--verde); }
.podio-sucursal { margin: .25rem 0 0; font-size: .72rem; overflow-wrap: anywhere; }
.nota-podio { font-size: .76rem; margin: 0 0 1rem; }

/* --- Chapitas de comercio en la tabla de zonas --- */
.celda-comercios { white-space: nowrap; }
.chip-comercio {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-right: .25rem;
  padding: .1rem .1rem .1rem 0;
  border-radius: 999px;
  vertical-align: middle;
}
.chip-logo { width: 24px; height: 24px; border-radius: 50%; font-size: .6rem; }
/* El precio aparece al pasar el mouse. `max-width` y no `display` para que la
   transición no salte, y para que el ancho de la columna no dependa de si hay
   un puntero encima. */
.chip-precio {
  max-width: 0;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 700;
  color: var(--verde);
  transition: max-width .15s ease;
}
.chip-comercio:hover .chip-precio,
.chip-comercio:focus-within .chip-precio { max-width: 7rem; }

/* Sin mouse no hay hover: en un celular el precio se muestra siempre. La tabla
   ya scrollea sola dentro de su caja, así que la columna más ancha no rompe
   nada — y un dato inalcanzable en el celular sí. */
@media (hover: none) {
  .chip-precio { max-width: 7rem; }
}

.proveedores { list-style: none; margin: 0; padding: 0; }
.proveedores li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem 0;
  border-bottom: 1px solid var(--borde);
}
.proveedores li:last-child { border-bottom: none; }
.proveedor-comercio { font-weight: 600; }
.proveedor-precio { margin-left: auto; font-weight: 700; color: var(--verde); }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--borde); }
th {
  color: var(--texto-muted);
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
/* Las tablas anchas scrollean dentro de su caja: la página nunca scrollea en
   horizontal, que es lo que arruina la lectura en un celular. */
.tabla-scroll { overflow-x: auto; }

/* --- Pantallas de mensaje y legales --- */
.pantalla-mensaje { max-width: 560px; margin: 3rem auto; text-align: center; }
.pantalla-mensaje p { color: var(--texto-muted); }
.legal { max-width: 720px; margin: 2rem auto 3rem; }
.legal h2 { font-size: 1.05rem; color: var(--cian); }
.legal p, .legal li { color: var(--texto-muted); font-size: .93rem; }

.volver { font-size: .88rem; margin-top: 2rem; }

.pie { border-top: 1px solid var(--borde); margin-top: 3rem; padding: 1.5rem 0; font-size: .8rem; }
.pie p { margin: .35rem 0; }

@media (max-width: 560px) {
  .barra-estado-zona { margin-left: 0; }
  .navbar-links { gap: .75rem; font-size: .82rem; }
  .grilla { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
  .hero { padding-top: 2.5rem; }
  /* El botón del informe pasa a ocupar el ancho: apretado a la derecha en una
     pantalla de 360px queda del tamaño de un pulgar mal apoyado. */
  .cabecera-favoritos { flex-direction: column; align-items: stretch; }
  .form-informe { text-align: left; }
  .form-informe .btn { width: 100%; }
  .historial-resumen { justify-content: stretch; width: 100%; }
  .historial-resumen span { flex: 1 1 30%; min-width: 0; }
  .grilla-logos { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .75rem; }
  .grilla-categorias { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
}

/* --- Landing: vidriera pública (tiendas, marcas, categorías, video, contacto) --- */
/* `margin-top`/`margin-bottom` y NO el shorthand `margin`: `.contenedor` centra
   con `margin: 0 auto`, y un `margin: 3rem 0` acá pisaría ese `auto` por tener
   la misma especificidad y venir después en la hoja — la sección se ve pegada
   a la izquierda en vez de centrada. Con las propiedades largas, cada regla
   toca solo lo suyo. */
.seccion-landing { margin-top: 3rem; margin-bottom: 3rem; }
.seccion-landing .seccion-landing-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.seccion-landing .seccion-landing-titulo h2 { margin: 0; }
.seccion-landing .ver-mas { font-size: .88rem; white-space: nowrap; }

/* Chapitas de tienda y marca. Mismo truco que `.podio-logo`/`.chip-logo` de la
   ficha (color de respaldo derivado del comercio, iniciales debajo del <img>,
   `onerror` lo saca si el archivo todavía no está en el bucket) — no una
   segunda implementación de "¿hay logo o no". */
.grilla-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 1.1rem;
  text-align: center;
}
.logo-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.logo-chapita {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--marca) 18%, var(--panel-2));
  color: var(--marca);
  font-weight: 700;
  font-size: 1.15rem;
}
.logo-chapita--tienda { border-radius: 14px; }
.logo-chapita--marca { border-radius: 50%; }
.logo-chapita img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  background: #fff;
}
.logo-chapita--marca img { border-radius: 50%; }
.logo-nombre { font-size: .78rem; color: var(--texto-muted); overflow-wrap: anywhere; }

/* "Navegá por categoría": mismo lenguaje visual que `.tarjeta`, adaptado a un
   link entero en vez de una foto. */
.grilla-categorias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.categoria-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.2rem .9rem;
  text-align: center;
  color: inherit;
}
.categoria-card:hover { border-color: var(--cian); text-decoration: none; }
.categoria-emoji { display: block; font-size: 1.9rem; margin-bottom: .45rem; }
.categoria-nombre { font-weight: 600; font-size: .88rem; }
.categoria-cantidad { margin: .25rem 0 0; font-size: .76rem; color: var(--texto-muted); }

.cta-ver-todos { text-align: center; margin: 3rem 0; }

/* --- Video explicativo --- */
.video-explicativo { text-align: center; }
.video-explicativo p { max-width: 620px; margin: 0 auto 1.25rem; }
.video-marco {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--borde);
}
.video-marco iframe, .video-marco video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--texto-muted);
  font-size: .9rem;
}
.video-placeholder .icono {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--borde);
  font-size: 1.3rem;
  color: var(--cian);
}

/* --- CTA de contacto (integrar el servicio) --- */
.cta-contacto {
  text-align: center;
  background: linear-gradient(135deg, rgba(1, 208, 248, .1), rgba(3, 106, 124, .1));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2.25rem 1.25rem;
}
.cta-contacto h2 { margin-top: 0; }
.cta-contacto p { color: var(--texto-muted); margin: 0 0 1.25rem; }