/* =====================================================================
   MICROTIENDAS — hoja compartida por tienda.html, panel.html y centro.html
   =====================================================================
   Diseñada para el teléfono primero y sin excusas: prácticamente todo el
   tráfico llega desde un link pegado en WhatsApp. El escritorio es el
   caso raro, no al revés.

   Sin framework a propósito. Cargar Tailwind o Bootstrap por CDN añade
   entre 60 y 300 KB a cada visita de cada tienda, y el ancho de banda es
   justo el único costo que escala en este modelo.
   ===================================================================== */

:root {
  /* ---------- Blanco, negro y plomo. Todo mate. ----------
     Fuera el beige. La arena cálida daba calidez, sí, y también daba
     'artesanal': sobre ella ningún gris se ve limpio y cualquier foto mal
     iluminada —que son las que va a subir un tendero con su celular— se
     ve todavía peor, porque el fondo ya es turbio.

     Neutros con una gota de azul, no grises puros: un gris exactamente
     neutro se lee como 'sin decidir', y uno con una inclinación mínima se
     lee como elegido. Esa gota es lo único que separa 'sobrio' de 'soso'.

     Nada brillante. Ni un degradado saturado, ni una sombra de color: el
     único color encendido de toda la página es el verde de WhatsApp, y
     precisamente por estar solo se lee como una decisión y no como ruido. */
  --negro: #16181A;         /* casi negro, ligeramente frío; el negro puro es duro */
  --negro-suave: #2A2E33;
  --plomo: #6B7075;         /* el gris de los textos secundarios */
  --plomo-claro: #9AA0A6;
  --nieve: #F4F5F6;         /* el papel */
  --blanco: #FFFFFF;

  /* Nombres heredados. Se conservan como alias porque hay estilos en
     línea repartidos por las cuatro páginas: cambiar un color en 200
     sitios a mano es como se cuelan las erratas. */
  --azul: var(--negro);
  --azul-claro: var(--negro-suave);
  --camel: var(--plomo);
  --camel-suave: #D2D6DA;
  --arena: var(--nieve);
  --marfil: var(--blanco);
  --noir: var(--negro);
  --oro: var(--plomo);
  --oro-suave: #D2D6DA;

  /* Hundidos y separadores. */
  --hueco: #EDEEF0;
  --hueco-claro: #F8F9FA;
  --hueco-medio: #E4E6E9;

  --texto: var(--negro);
  --texto-tenue: var(--plomo);
  --borde: #E2E4E7;
  --borde-fuerte: #C7CBD0;
  --fondo: var(--nieve);
  --superficie: var(--blanco);

  /* ---------- El color que elige cada tienda ----------
     Se reescriben en tienda.html con la paleta del dueño
     (js/paletas-microtienda.js). Aquí van los de LoopLuxe, que es lo que
     ve una tienda que no ha elegido nada, y lo que ven el panel y el
     directorio: esos NO se tiñen por tienda. */
  --acento: var(--negro);
  --acento-detalle: var(--plomo);
  --acento-suave: var(--hueco);

  /* El verde de WhatsApp se queda tal cual. Es la marca que el comprador
     reconoce sin leer y el botón que sostiene el modelo entero. Sobre un
     fondo neutro es el ÚNICO color encendido de la página, que es
     exactamente como se usa un acento cuando se usa bien. */
  --whatsapp: #25D366;
  --whatsapp-oscuro: #128C7E;

  /* Semánticos, apagados para no competir con el acento. */
  --peligro: #A8392C;
  --exito: #2E7D53;
  --remate: #A8392C;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  /* Sombras neutras. Las anteriores iban teñidas de marrón y sobre fondo
     blanco ensuciaban cada tarjeta. */
  --sombra: 0 1px 2px rgba(22,24,26,.06), 0 8px 24px rgba(22,24,26,.06);
  --sombra-alta: 0 4px 12px rgba(22,24,26,.10), 0 16px 48px rgba(22,24,26,.10);
  --nav: 64px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }

.envoltura { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- Cabecera de la tienda ---------- */

/* La portada tiene UN trabajo: enseñar la fachada para que el comprador
   reconozca la tienda al llegar. Cuando no hay foto —el caso de toda
   tienda recién dada de alta— no tiene ninguno: eran 150 px de azul plano
   que se comían la quinta parte de la primera pantalla y se tragaban el
   logo del negocio. El dueño abría su tienda y no encontraba su marca,
   que es exactamente lo contrario de lo que este producto vende. */
.portada {
  position: relative;
  height: 150px;
  background: linear-gradient(135deg, var(--azul) 0%, #2A2E33 100%);
  overflow: hidden;
}
.portada.sin-foto {
  height: 88px;
  /* Arranca en el tono hundido, no en el del fondo de página: con arena
     a la izquierda la franja se confundía con el papel y los 88 px se
     leían como un hueco en blanco en vez de como una cabecera. */
  background: linear-gradient(135deg, var(--acento-suave) 0%, var(--arena) 52%, var(--marfil) 100%);
  border-bottom: 1px solid var(--borde);
}
.portada img { width: 100%; height: 100%; object-fit: cover; }

.ficha {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding-bottom: 18px;
}
/* Solo el logo cabalga sobre la portada. El nombre va debajo, ya en la
   zona blanca: cuando el bloque entero subía con el logo, el título
   quedaba en texto oscuro sobre la portada oscura y no se leía. */
.ficha-interior {
  margin-top: -42px;
  margin-bottom: 12px;
  /* 🔴 ESTE era el fallo de "la marca está tapada por la franja", y no se
     arregla con colores ni con alturas: es orden de PINTADO.
     .portada lleva position:relative y esto no llevaba nada. En CSS, un
     elemento posicionado se pinta ENCIMA de uno que no lo está, aunque en
     el papel esté antes. Resultado: la franja pintaba encima de la mitad
     superior del logo — exactamente los 42 px que cabalgan— en TODAS las
     tiendas, con foto de fachada o sin ella. El negocio abría su tienda y
     veía su marca cortada por la mitad.
     Sube solo el logo: .ficha-interior no tiene fondo, así que la franja
     se sigue viendo entera detrás. */
  position: relative;
  z-index: 1;
}
.logo-tienda {
  width: 84px; height: 84px;
  flex: 0 0 84px;
  border-radius: var(--r-m);
  background: var(--superficie);
  border: 3px solid var(--superficie);
  /* Doble sombra con filo: el logo debe leerse como una tarjeta levantada
     lo mismo sobre el azul de la portada que sobre una foto de fachada
     clarísima. Con la sombra suave sola, un logo oscuro sobre franja
     oscura sencillamente desaparecía. */
  box-shadow: 0 6px 18px rgba(30,42,54,.22), 0 0 0 1px rgba(30,42,54,.10);
  object-fit: cover;
  overflow: hidden;
}
/* Sin logo subido, la inicial sobre el color de la tienda. Es lo primero
   que ve el comprador, así que conviene que ya sea suyo. */
.logo-tienda.vacio {
  display: grid; place-items: center;
  background: var(--acento); color: #fff;
  font-size: 30px; font-weight: 700;
}
.ficha-texto h1 { font-size: 22px; }
.ficha-meta { color: var(--texto-tenue); font-size: 13px; margin-top: 3px; text-transform: capitalize; }
.ficha-desc { margin: 12px 0 0; color: var(--texto-tenue); font-size: 14px; }

.insignias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.insignia {
  font-size: 12px; padding: 4px 10px;
  border-radius: 999px;
  background: var(--hueco); color: var(--texto-tenue);
  border: 1px solid var(--borde);
  display: inline-flex; align-items: center; gap: 5px;
}

/* ---------- Botón de WhatsApp: el CTA que sostiene todo el modelo ---------- */

.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--whatsapp); color: #fff;
  border: none; border-radius: var(--r-m);
  padding: 13px 20px;
  font-size: 15px; font-weight: 650;
  cursor: pointer; text-decoration: none;
  width: 100%;
  transition: background .15s, transform .1s;
}
.btn-wa:active { transform: scale(.985); }
@media (hover: hover) { .btn-wa:hover { background: var(--whatsapp-oscuro); } }

/* Flotante: siempre visible mientras se navega el catálogo. Si hay que
   subir hasta la cabecera para escribir, se pierde la consulta. */
.wa-flotante {
  position: fixed; right: 16px; bottom: 18px; z-index: 60;
  width: auto; padding: 13px 19px;
  /* La sombra verde teñía el fondo arena y hacía el botón todavía más
     grande de lo que es. Una sombra neutra lo levanta sin repintar
     media pantalla. */
  box-shadow: 0 6px 20px rgba(30,42,54,.22);
  border-radius: 999px;
  transition: opacity .18s ease, transform .18s ease;
}
/* Clase propia y no la .oculto global: aquella lleva !important y mata
   cualquier transición. Pelear un !important con otro !important deja el
   CSS peor de lo que estaba. */
.wa-flotante.fuera { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-flotante { transition: none; } }
@supports (padding: max(0px)) {
  .wa-flotante { bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ---------- Banda de recojo ----------
   Todas las microtiendas son de la ciudad y entregan en mano. El recojo
   gratis no es una opción entre varias: es EL modelo, y es lo que quita
   el miedo a comprarle a un negocio que no conoces. Por eso va arriba,
   antes que los productos. */
.banda-recojo {
  margin-top: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie);
  overflow: hidden;
}
.recojo-fila {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 13px;
  border-top: 1px solid var(--borde);
}
.recojo-fila:first-child { border-top: none; }
/* Antes aquí iba un emoji y el tamaño se daba con font-size. Ahora va un
   SVG de trazo que hereda el color del texto: se alinea por caja, no por
   tipografía, y pesa lo mismo que sus vecinos. */
/* 🔴 Va con el padre delante a propósito. .recojo-ico es un <span> y
   .recojo-fila span —que viene después y es más específica— le imponía
   el gris del texto secundario: el icono se quedaba gris aunque la
   tienda hubiera elegido su color. Con la misma especificidad y después,
   gana este. */
.recojo-fila .recojo-ico { flex: 0 0 auto; color: var(--acento-detalle); display: flex; padding-top: 1px; }
.recojo-fila b { display: block; font-size: 13.5px; font-weight: 650; }
.recojo-fila span { display: block; font-size: 12.5px; color: var(--texto-tenue); margin-top: 1px; }

/* Aviso de que consultar no aparta nada. En estos negocios hay una o dos
   unidades de cada modelo: el comprador tiene que saberlo ANTES de irse
   al WhatsApp, no al llegar a la tienda y encontrarse con que ya se
   vendió. Sube de tono solo cuando de verdad queda poco. */
.aviso-aparta {
  margin: 12px 0 0; padding: 9px 12px;
  border-radius: var(--r-s); font-size: 12.5px;
  background: var(--hueco-claro); border: 1px solid var(--borde); color: var(--texto-tenue);
  text-align: center;
}
.aviso-aparta.urgente {
  background: #F8F9FA; border-color: #D2D6DA; color: #6B7075;
}

/* Era el tercer verde de la página, y encima uno distinto de los otros
   dos. En tonos de la casa dice lo mismo sin gritar. */
.recojo-mini {
  margin-top: 14px; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--hueco-claro); border: 1px solid var(--borde); border-radius: var(--r-s);
  font-size: 12.5px; color: var(--texto);
}
.recojo-mini svg { color: var(--acento-detalle); flex: 0 0 auto; }

/* ---------- Cuadrícula de productos ---------- */

.barra-filtros {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 14px 0 4px;
  scrollbar-width: none;
}
.barra-filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: 13.5px; color: var(--texto-tenue);
  cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.chip.activo { background: var(--acento); color: #fff; border-color: var(--acento); }

.rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px 0 40px;
}
@media (min-width: 620px)  { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px)  { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .16s, transform .16s;
}
@media (hover: hover) {
  .tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
}
.tarjeta-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--hueco);
  overflow: hidden;
}
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-cuerpo { padding: 10px 11px 12px; }
.tarjeta-nombre {
  font-size: 13.5px; font-weight: 550;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em;
}
.tarjeta-precio { font-size: 16px; font-weight: 700; margin-top: 5px; }
.tarjeta-antes {
  font-size: 12.5px; color: var(--texto-tenue);
  text-decoration: line-through; margin-left: 6px; font-weight: 400;
}

/* La etiqueta de tipo es lo que abre el modelo más allá de la ropa: el
   sastre que ALQUILA ternos y el taller que trabaja A PEDIDO caben aquí
   sin inventar un catálogo aparte. */
.etiqueta-tipo {
  position: absolute; top: 8px; left: 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(34,56,78,.80); color: #fff;
  backdrop-filter: blur(4px);
}
.etiqueta-tipo.alquiler { background: rgba(93,63,211,.85); }
.etiqueta-tipo.pedido   { background: rgba(201,169,106,.95); color: var(--noir); }

/* Un agotado se deja VER, no se esconde: enseña que la tienda mueve
   mercadería, y deja preguntar por reposición. Lo que no se puede es
   dejar reservarlo. */
.tarjeta.agotada .tarjeta-foto img { filter: grayscale(1); opacity: .55; }
.sello-agotado {
  position: absolute; inset: auto 0 0 0;
  background: rgba(34,56,78,.84); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-align: center; padding: 5px 0;
}
/* ---------- Liquidación ----------
   Rematar lo que no se mueve es de las cosas que más hace un negocio
   pequeño, y hasta ahora no tenía dónde decirlo. El porcentaje va en
   grande y arriba a la derecha porque es el dato que decide la compra:
   "S/ 159 tachando S/ 199" se lee, pero "−20%" se entiende de un vistazo. */
/* 🔴 Iba arriba a la izquierda y CHOCABA con el porcentaje de la derecha:
   en una tarjeta de 164 px —un teléfono normal— el "−20%" se pintaba
   encima y la palabra quedaba cortada en "LIQUIDACIÓ". Se veía roto justo
   en los productos que la tienda más quiere sacar.
   Abajo a la izquierda no compite con nada, y queda pegado al precio
   tachado que hay debajo, que es su argumento. */
.sello-liquidacion {
  position: absolute; bottom: 8px; left: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 999px;
  background: #A8392C; color: #fff;
  max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Agotado pinta una banda en ese mismo borde inferior. Cuando coinciden
   manda el agotado: rematar algo que ya no existe no es una oferta. */
.tarjeta.agotada .sello-liquidacion { display: none; }

/* 🔴 Este sello era VERDE, y en la misma pantalla había otros dos verdes:
   el botón de WhatsApp (#25D366, muy saturado) y la banda de recojo. Tres
   verdes distintos peleando sobre un fondo arena es lo que hacía que la
   página no pareciera de una marca, sino de una plantilla.
   Ahora el único verde de la tienda es el de WhatsApp, que se lo ha
   ganado: es la marca que el comprador reconoce y el botón que convierte.
   El descuento pasa al azul de la casa, que sobre una foto se lee como
   una etiqueta de precio y no como una notificación. */
.sello-descuento {
  position: absolute; top: 8px; right: 8px;
  font-size: 13px; font-weight: 800;
  padding: 5px 9px; border-radius: var(--r-s);
  background: var(--acento); color: #fff;
  box-shadow: 0 2px 8px rgba(30,42,54,.28);
}

.chip-liquidacion { border-color: #E0C4BE; color: #A8392C; font-weight: 650; }
.chip-liquidacion.activo { background: #A8392C; border-color: #A8392C; color: #fff; }

.insignia-liq { background: #FAF2F0; border-color: #E0C4BE; color: #A8392C; font-weight: 700; }

.pct-descuento {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 14px; font-weight: 800;
  background: var(--acento); color: #fff;
  padding: 3px 8px; border-radius: var(--r-s);
}
.ahorro { font-size: 13.5px; color: var(--acento); font-weight: 650; margin-top: 2px; }

.tarjeta-stock {
  font-size: 12px; color: var(--texto-tenue); margin-top: 4px;
}
.tarjeta-stock.poco { color: #A8392C; font-weight: 650; }

/* El código de reserva se lee en voz alta en el mostrador: grande,
   monoespaciado y separado, para que no se confunda al dictarlo. */
.codigo-reserva {
  display: inline-block; margin-top: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 27px; font-weight: 700; letter-spacing: .16em;
  background: var(--noir); color: var(--oro);
  padding: 11px 20px; border-radius: var(--r-m);
}

/* ---------- Visor de producto ---------- */

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(34,56,78,.58);
  display: none; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px);
}
.modal.abierto { display: flex; }
.modal-caja {
  background: var(--superficie);
  width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  border-radius: var(--r-l) var(--r-l) 0 0;
  animation: subir .22s ease-out;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 620px) {
  .modal { align-items: center; }
  .modal-caja { border-radius: var(--r-l); max-height: 88vh; }
}
@keyframes subir { from { transform: translateY(22px); opacity: .6; } to { transform: none; opacity: 1; } }

.modal-cerrar {
  position: sticky; top: 0; z-index: 2;
  margin-left: auto; display: block;
  width: 34px; height: 34px; margin-right: 12px; margin-top: 12px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: var(--texto);
  font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: var(--sombra);
}
.visor-fotos {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 0; background: var(--hueco);
  scrollbar-width: none;
}
.visor-fotos::-webkit-scrollbar { display: none; }
.visor-fotos img {
  flex: 0 0 100%; scroll-snap-align: center;
  aspect-ratio: 1 / 1; object-fit: cover;
}
.modal-cuerpo { padding: 16px 18px 24px; }
.modal-cuerpo h2 { font-size: 19px; }
.modal-precio { font-size: 25px; font-weight: 750; margin: 8px 0 2px; }
.modal-desc { color: var(--texto-tenue); font-size: 14.5px; white-space: pre-wrap; margin: 14px 0; }

.opciones { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.opcion {
  padding: 6px 13px; border: 1px solid var(--borde);
  border-radius: var(--r-s); font-size: 13px; background: var(--superficie);
}

/* ---------- Bloque de pago y contacto ---------- */

.panel-info {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: 16px;
  margin: 8px 0 26px;
}
.panel-info h3 { font-size: 15px; margin-bottom: 12px; }
.fila-info {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid var(--borde);
  font-size: 14px;
}
.fila-info:first-of-type { border-top: none; }
.fila-info .ico { flex: 0 0 20px; display: flex; justify-content: center; color: var(--acento-detalle); padding-top: 1px; }
.qr-pago {
  width: 190px; margin: 12px auto 0;
  border: 1px solid var(--borde); border-radius: var(--r-m); padding: 10px;
  background: #fff;
}

/* ---------- Pago por QR tras reservar ----------
   Aparece DESPUÉS de confirmar la reserva, no antes: primero se aparta la
   prenda y luego se ofrece pagar. Al revés, el comprador que duda se va
   sin dejar rastro y la tienda no se entera de que existió. */
.bloque-pago {
  margin-top: 18px; padding: 16px;
  border: 1px solid var(--oro-suave); border-radius: var(--r-m);
  background: #FFFFFF;
}
.bloque-pago-cabeza {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
}
.bloque-pago-cabeza b { font-size: 14.5px; }
.total-pago { font-size: 21px; font-weight: 750; white-space: nowrap; }

/* ---------- Condiciones de la tienda ----------
   Cada negocio publica las suyas. Van plegadas: quien quiere leerlas las
   abre, y quien no, no tropieza con un muro de texto antes de comprar. */
.terminos-tienda {
  margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 12px;
}
.terminos-tienda summary {
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--texto); list-style: none;
}
.terminos-tienda summary::-webkit-details-marker { display: none; }
.terminos-tienda summary::before { content: "📄 "; }
.terminos-tienda[open] summary { margin-bottom: 10px; }
.terminos-texto {
  white-space: pre-wrap; font-size: 13px; line-height: 1.65;
  color: var(--texto-tenue);
  background: var(--hueco-claro); border: 1px solid var(--borde);
  border-radius: var(--r-s); padding: 12px 14px;
}

/* ---------- Estados ---------- */

.vacio-estado {
  text-align: center; padding: 60px 20px; color: var(--texto-tenue);
}
.vacio-estado .emoji { display: flex; justify-content: center; margin-bottom: 12px; color: var(--borde-fuerte, #C7CBD0); }

.esqueleto {
  background: linear-gradient(90deg, var(--hueco-medio) 25%, var(--hueco-claro) 50%, var(--hueco-medio) 75%);
  background-size: 200% 100%;
  animation: brillo 1.3s infinite;
  border-radius: var(--r-m);
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* El hueco de abajo no es decorativo: el botón flotante de WhatsApp vive
   ahí fijo y tapaba "¿Quieres uno para tu negocio?", que es la única
   publicidad que LoopLuxe se cobra en el plan gratis. */
.pie-loop {
  text-align: center; padding: 26px 16px 92px;
  color: var(--texto-tenue); font-size: 12.5px;
  border-top: 1px solid var(--borde);
}
/* Al color fuerte y no al de detalle: el camel sobre marfil se queda en
   2,6:1 y un link tiene que leerse, no insinuarse. */
.pie-loop a { color: var(--acento); text-decoration: none; font-weight: 600; }

/* =====================================================================
   PANEL DEL DUEÑO
   ===================================================================== */

/* 🔴 El alto lo fija --nav y NO el padding. Las pestañas se pegan a
   top: var(--nav), así que bastaba que las dos cifras no coincidieran
   para abrir una ranura: la barra medía 57 px contra los 64 declarados y
   por esos 7 px se veía pasar el contenido al desplazarse. Atándola a la
   misma variable no pueden volver a discrepar. */
.barra-panel {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav);
  background: var(--noir); color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
}
/* El logotipo de verdad, no el nombre escrito a mano: en la pantalla de
   entrada ya salía la marca y al entrar se degradaba a texto suelto. */
.barra-panel .marca { height: 26px; width: auto; display: block; flex: 0 0 auto; }
.barra-panel .crece { flex: 1; }

.pestanas {
  display: flex; background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: var(--nav); z-index: 40;
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: 1 0 auto; padding: 13px 18px;
  border: none; background: none; cursor: pointer;
  font-size: 14px; font-family: inherit; color: var(--texto-tenue);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestana.activa { color: var(--texto); font-weight: 600; border-bottom-color: var(--oro); }
/* Cuatro pestañas no entraban en 375 px: sobraban 15 px y "Estadísticas"
   se cortaba. La tira se desliza, pero nada lo insinuaba, así que el dueño
   podía no encontrar nunca la pantalla que se le regala en todos los planes. */
@media (max-width: 420px) {
  .pestana { padding: 13px 11px; font-size: 13.5px; }
}

.vista { display: none; padding-bottom: 60px; }
.vista.activa { display: block; }

/* Contador de reservas pendientes en la pestaña. Una reserva sin atender
   es un cliente esperando en el otro extremo: tiene que verse sin entrar
   a buscarla. */
.badge-nuevo {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; margin-left: 5px;
  background: var(--peligro); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}

.codigo-mini {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  background: var(--noir); color: var(--oro);
  padding: 5px 9px; border-radius: var(--r-s);
  align-self: flex-start; white-space: nowrap;
}

/* Medidor del plan: el dueño tiene que ver cuánto le queda ANTES de
   chocar con el límite, o el tope se siente como una falla del sistema. */
.medidor-plan {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 14px 16px; margin: 14px 0;
}
.medidor-cabeza { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.medidor-cabeza b { font-size: 15px; }
.medidor-barra { height: 7px; background: var(--hueco-medio); border-radius: 999px; margin-top: 9px; overflow: hidden; }
.medidor-relleno { height: 100%; background: var(--oro); border-radius: 999px; transition: width .3s; }
.medidor-relleno.lleno { background: var(--peligro); }

/* ---------- Plan vencido ----------
   Ámbar y no rojo a propósito: no es un error del dueño ni una amenaza,
   es un aviso. Y NO tapa el panel: puede seguir entrando y gestionando su
   tienda. Cerrarle la puerta al que dejó de pagar es la forma más segura
   de que no vuelva. */
.aviso-vencida {
  margin-bottom: 16px; padding: 16px;
  border: 1px solid #D2D6DA; border-radius: var(--r-m);
  background: #F8F9FA;
}
.vencida-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.vencida-cabeza > span { font-size: 24px; line-height: 1.1; }
.vencida-cabeza b { display: block; font-size: 16px; color: #6B7075; }
.vencida-cabeza span span,
.vencida-cabeza div > span { display: block; font-size: 13px; color: var(--texto-tenue); margin-top: 3px; line-height: 1.55; }
.vencida-lista {
  margin: 13px 0 15px; padding-left: 20px;
  font-size: 13px; line-height: 1.75; color: var(--texto-tenue);
}
.vencida-lista li::marker { color: var(--camel); }

/* ---------- Ciclo de facturación ----------
   Un negocio que no sabe cuándo le toca pagar se lleva una sorpresa, y
   una sorpresa en la factura es la forma más rápida de perder a un
   cliente que estaba contento. */
.ciclo-plan { margin-top: 11px; }
.ciclo-fila {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-s);
  background: var(--hueco-claro); border: 1px solid var(--borde);
}
.ciclo-fila.pronto { background: #F8F9FA; border-color: #D2D6DA; }
.ciclo-fila b { display: block; font-size: 13.5px; }
.ciclo-fila span:last-child { display: block; font-size: 12.5px; color: var(--texto-tenue); margin-top: 1px; }

/* La invitación a subir de plan solo aparece cuando el catálogo va lleno:
   es el único momento en que le sirve al negocio y no suena a anuncio. */
.invita-plan {
  margin-top: 10px; padding: 13px 14px;
  border-radius: var(--r-s); font-size: 13px; line-height: 1.6;
  background: #FFFFFF; border: 1px solid var(--camel-suave); color: var(--texto);
}

.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo .ayuda { font-size: 12.5px; color: var(--texto-tenue); font-weight: 400; margin-top: 4px; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font-size: 16px;                 /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit; background: var(--superficie); color: var(--texto);
}
.campo textarea { min-height: 92px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201,169,106,.16);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 20px; border-radius: var(--r-s);
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; color: var(--texto);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-principal { background: var(--noir); color: #fff; border-color: var(--noir); }
.btn-oro { background: var(--oro); color: var(--noir); border-color: var(--oro); }
.btn-peligro { color: var(--peligro); border-color: #E0C4BE; background: #FAF6F6; }
.btn-bloque { width: 100%; }

.tarjeta-panel {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 16px; margin-bottom: 14px;
}

/* Lista de productos del panel: fila compacta, miniatura pequeña. Aquí
   NO se usa la foto completa; el dueño puede tener 100 productos. */
.fila-producto {
  display: flex; gap: 12px; align-items: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 10px; margin-bottom: 9px;
}
.fila-producto img, .fila-producto .sinfoto {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: var(--r-s); object-fit: cover; background: var(--hueco);
}
.fila-producto .sinfoto { display: grid; place-items: center; font-size: 20px; opacity: .4; }
.fila-producto .datos { flex: 1; min-width: 0; }
.fila-producto .datos b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-producto .datos span { font-size: 13px; color: var(--texto-tenue); }
.punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.punto.si { background: var(--exito); }
.punto.no { background: #C7CBD0; }

/* Las cuatro cifras que deciden si un negocio renueva o se va. Van en la
   propia fila de la tienda, no escondidas en un detalle: si hay que
   entrar a buscarlas, no se miran. */
.mini-metricas {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mini-metricas span {
  flex: 1 1 auto; text-align: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  padding: 6px 4px; border-radius: var(--r-s);
  background: var(--hueco-claro); border: 1px solid var(--borde);
  color: var(--texto-tenue); white-space: nowrap;
}

/* ---------- Editor de colores (variantes) ----------
   Se usa de pie, en la tienda, con una mano: cada color es una fila alta
   y con blancos generosos, no una tabla apretada. */
.tarjeta-variante {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 9px; margin-bottom: 9px;
}
.fila-variante {
  display: flex; gap: 10px; align-items: center;
}

/* Rejilla de tallas por color. Es lo que convierte "tengo 6 pares" en
   "tengo 2 del 39, 1 del 40 y 3 del 41", que es lo único que le sirve a
   quien vende calzado. Se desplaza en horizontal: con 8 tallas no caben
   todas en un teléfono, y apretarlas las vuelve intocables con el dedo. */
.rejilla-tallas {
  display: flex; gap: 7px; overflow-x: auto;
  margin-top: 10px; padding: 2px 2px 6px;
  scrollbar-width: none;
}
.rejilla-tallas::-webkit-scrollbar { display: none; }
.celda-talla { flex: 0 0 auto; text-align: center; }
.celda-talla span {
  display: block; font-size: 11px; font-weight: 650;
  color: var(--texto-tenue); margin-bottom: 3px;
}
.celda-talla input {
  width: 52px; padding: 8px 4px; text-align: center;
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font-size: 16px; font-family: inherit;
  background: var(--superficie); color: var(--texto);
}
.celda-talla input:not(:placeholder-shown) {
  border-color: var(--camel); background: #FFFFFF; font-weight: 650;
}
.resumen-variante {
  font-size: 12.5px; color: var(--texto-tenue);
  padding-top: 2px;
}
.resumen-variante b { color: var(--texto); font-size: 14px; }
.variante-foto {
  width: 54px; height: 54px; flex: 0 0 54px;
  border-radius: var(--r-s); border: 1px dashed var(--borde);
  background: var(--hueco-claro); cursor: pointer; padding: 0;
  display: grid; place-items: center; overflow: hidden; font-size: 18px;
}
.variante-foto img { width: 100%; height: 100%; object-fit: cover; }
.variante-datos { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; }
.variante-nombre {
  flex: 1; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: var(--r-s);
  font-size: 16px; font-family: inherit; background: var(--superficie); color: var(--texto);
}
.variante-stock { flex: 0 0 78px; }
.variante-stock label {
  display: block; font-size: 10.5px; color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.variante-stock input {
  width: 100%; padding: 8px 9px; text-align: center;
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font-size: 16px; font-family: inherit; background: var(--superficie); color: var(--texto);
}
.variante-quitar {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--texto-tenue); font-size: 21px; line-height: 1; padding: 4px 6px;
}

/* ---------- Selector de color y talla en la vitrina ----------
   Las tallas eran etiquetas decorativas y no se podían elegir. Ahora son
   botones: lo que escoge el comprador viaja dentro de la reserva y el
   negocio lo lee sin tener que preguntarlo por WhatsApp. */
.selector { margin: 16px 0; }
.selector-titulo {
  font-size: 13px; font-weight: 650; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.selector-titulo span { font-weight: 400; color: var(--texto-tenue); font-size: 12.5px; }
.opciones-elegibles { display: flex; flex-wrap: wrap; gap: 8px; }

.chip-opcion {
  padding: 9px 15px; border-radius: var(--r-s);
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: 14px; font-family: inherit; color: var(--texto);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.chip-opcion[aria-pressed="true"] {
  border-color: var(--noir); background: var(--noir); color: #fff;
}
.chip-opcion:disabled {
  opacity: .4; cursor: not-allowed; text-decoration: line-through;
}
/* Cuántas quedan de esa talla, en pequeñito. Solo se enseña cuando quedan
   1 o 2: por encima de eso el número no cambia ninguna decisión y solo
   ensucia el botón. */
.chip-opcion sup {
  font-size: 9.5px; font-weight: 700; margin-left: 3px;
  color: #A8392C; vertical-align: super;
}
.chip-opcion[aria-pressed="true"] sup { color: var(--camel-suave); }
.nota-tallas {
  font-size: 12px; color: var(--texto-tenue); margin-top: 8px;
}

.chip-color {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 6px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: 13.5px; font-family: inherit; color: var(--texto); cursor: pointer;
}
.chip-color[aria-pressed="true"] { border-color: var(--noir); box-shadow: 0 0 0 2px var(--noir) inset; }
.chip-color:disabled { opacity: .4; cursor: not-allowed; }
.chip-color .muestra {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--hueco); overflow: hidden; flex: 0 0 30px;
  display: grid; place-items: center; font-size: 13px; color: var(--texto-tenue);
}
.chip-color .muestra img { width: 100%; height: 100%; object-fit: cover; }

.mini-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mini-foto { position: relative; width: 78px; height: 78px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--borde); }
.mini-foto img { width: 100%; height: 100%; object-fit: cover; }
.mini-foto button {
  position: absolute; top: 3px; right: 3px;
  width: 21px; height: 21px; border-radius: 50%; border: none;
  background: rgba(34,56,78,.75); color: #fff; font-size: 13px;
  line-height: 1; cursor: pointer; padding: 0;
}

/* Escalera de planes. El plan actual se marca y los de arriba se ven
   alcanzables: es el único momento en que el dueño compara precios, así
   que la diferencia entre lo que tiene y lo que podría tener debe leerse
   de un vistazo. */
/* El 0% de comisión es el argumento más fuerte frente a cualquier
   marketplace. Va arriba de los planes y en grande: si se cuenta en letra
   gris al final, no lo lee nadie. */
.sin-comision {
  margin: 10px 0 18px; padding: 14px 16px;
  border-radius: var(--r-m);
  background: linear-gradient(135deg, var(--azul) 0%, #2A2E33 100%);
  color: var(--marfil);
}
.sin-comision b:first-child {
  display: block; font-size: 17px; color: var(--camel-suave); margin-bottom: 5px;
}
.sin-comision span { font-size: 13px; line-height: 1.6; opacity: .92; }
.sin-comision span b { color: #fff; }

.fila-plan {
  border: 1px solid var(--borde); border-radius: var(--r-m);
  padding: 13px 15px; margin-bottom: 9px; background: var(--superficie);
}
.fila-plan.actual { border-color: var(--oro); background: #FFFFFF; box-shadow: 0 0 0 2px rgba(201,169,106,.16); }
.fila-plan-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fila-plan-cabeza b { font-size: 15.5px; }
.fila-plan-precio { font-size: 17px; font-weight: 750; white-space: nowrap; }
.fila-plan-precio small { font-size: 12px; font-weight: 500; color: var(--texto-tenue); }
.fila-plan ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--texto-tenue); line-height: 1.7; }
.marca-actual {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--noir); background: var(--oro);
  padding: 3px 8px; border-radius: 999px; margin-left: 8px;
}

.estadistica {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0;
}
.estadistica div {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 15px 10px; text-align: center;
}
.estadistica b { display: block; font-size: 25px; font-weight: 750; line-height: 1.15; }
.estadistica span { font-size: 12px; color: var(--texto-tenue); }

.aviso {
  padding: 12px 14px; border-radius: var(--r-s);
  font-size: 13.5px; margin: 12px 0; border: 1px solid;
}
.aviso.info  { background: #F8F9FA; border-color: #DDE0E4; color: #2A2E33; }
.aviso.malo  { background: #FAF6F6; border-color: #E0C4BE; color: #8A2E23; }
.aviso.bueno { background: #F8F9FA; border-color: #E2E4E7; color: #16181A; }

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 90px);
  background: var(--noir); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; z-index: 200; opacity: 0;
  transition: transform .25s, opacity .25s;
  max-width: calc(100vw - 32px); text-align: center;
}
#toast.ver { transform: translate(-50%, 0); opacity: 1; }
#toast.malo { background: var(--peligro); }

/* ---------- Directorio del centro comercial ---------- */

.hero-mall {
  background: linear-gradient(135deg, var(--azul) 0%, #2A2E33 100%);
  color: #fff; padding: 44px 16px 40px; text-align: center;
}
.hero-mall h1 { font-size: 27px; margin-bottom: 10px; }
.hero-mall h1 span { color: var(--oro); }
.hero-mall p { color: #9AA0A6; max-width: 470px; margin: 0 auto; font-size: 15px; }

.rejilla-tiendas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 12px; padding: 18px 0 40px;
}
.tarjeta-tienda {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 18px 14px; text-align: center;
  text-decoration: none; color: inherit;
  transition: box-shadow .16s, transform .16s;
}
@media (hover: hover) {
  .tarjeta-tienda:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
}
.tarjeta-tienda .avatar {
  width: 60px; height: 60px; margin: 0 auto 11px;
  border-radius: var(--r-m); object-fit: cover;
  background: var(--noir); color: var(--oro);
  display: grid; place-items: center; font-size: 23px; font-weight: 700;
  overflow: hidden;
}
.tarjeta-tienda b { display: block; font-size: 14px; font-weight: 620; }
.tarjeta-tienda span { font-size: 12.5px; color: var(--texto-tenue); }

/* Variación contra el mes anterior. Verde y rojo por sí solos no se leen
   bien en todas las pantallas ni por quien no distingue esos colores, así
   que la flecha ▲▼ lleva el significado y el color solo lo refuerza. */
.variacion { font-size: 12px; font-weight: 700; vertical-align: middle; }
.variacion.sube { color: var(--exito); }
.variacion.baja { color: var(--peligro); }

/* ---------- Cartel imprimible para el mostrador ---------- */

#cartel-imprimible {
  position: fixed; inset: 0; z-index: 500;
  background: #fff; display: grid; place-items: center;
}
.cartel-hoja {
  text-align: center; padding: 24px; max-width: 620px;
  color: var(--azul);
}
.cartel-marca {
  font-size: 15px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--oro); font-weight: 700; margin-bottom: 18px;
}
.cartel-hoja h1 { font-size: 40px; line-height: 1.15; margin-bottom: 10px; }
.cartel-lema { font-size: 21px; color: #3A3E44; margin: 0 0 22px; line-height: 1.35; }
#cartel-qr { display: flex; justify-content: center; }
#cartel-qr img, #cartel-qr canvas {
  width: 320px !important; height: 320px !important;
  border: 12px solid #fff; outline: 2px solid #E2E4E7;
}
.cartel-url {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 17px; margin: 18px 0 0; color: var(--azul); word-break: break-all;
}
.cartel-pie { font-size: 15px; color: #6B7075; margin: 8px 0 0; }

@media print {
  /* Se imprime SOLO el cartel: el resto del panel no debe gastar tinta
     ni delatar los datos de la tienda en una hoja que va a un mostrador. */
  body > *:not(#cartel-imprimible) { display: none !important; }
  #cartel-imprimible { position: static; height: auto; }
  .cartel-hoja { padding: 0; }
  @page { margin: 14mm; }
}

.oculto { display: none !important; }

/* Tira de fotos del informe de la IA. Se ven todas juntas y a la vez
   porque la decisión —¿son la misma prenda o colores distintos?— se toma
   comparándolas, no mirándolas de una en una. */
.tiras-fotos {
  display: flex; gap: 6px; overflow-x: auto;
  margin-top: 11px; padding-bottom: 4px;
  scrollbar-width: none;
}
.tiras-fotos::-webkit-scrollbar { display: none; }
.tiras-fotos img {
  width: 84px; height: 84px; flex: 0 0 84px;
  object-fit: cover; border-radius: var(--r-s);
  border: 1px solid var(--borde); background: var(--hueco);
}

/* ---------- Visor de fotos: contador ----------
   Sin contador, el visor parece una sola imagen y nadie descubre que
   puede deslizar. Las demás fotos, sencillamente, no existen. */
.visor-caja { position: relative; margin-top: -46px; }
.contador-fotos {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(34,56,78,.78); color: #fff;
  font-size: 12px; font-weight: 650;
  padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buscador del catálogo ---------- */
.caja-buscar {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 0 13px;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-m);
}
.caja-buscar:focus-within { border-color: var(--camel); box-shadow: 0 0 0 3px rgba(176,141,87,.14); }
.caja-buscar svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--texto-tenue); }
.caja-buscar input {
  flex: 1; border: none; background: none; outline: none;
  padding: 12px 0; font-size: 16px;   /* 16px: iOS no hace zoom al enfocar */
  font-family: inherit; color: var(--texto);
}
.caja-buscar input::-webkit-search-cancel-button { display: none; }
.caja-buscar button {
  border: none; background: none; cursor: pointer;
  color: var(--texto-tenue); font-size: 21px; line-height: 1; padding: 0 2px;
}

/* ---------- Compartir un producto ----------
   Es lo que convierte a un comprador contento en vendedor de la tienda:
   manda el link a su grupo y el que lo recibe aterriza en la prenda. */
.btn-compartir {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 10px 16px;
  border: 1px solid var(--borde); border-radius: var(--r-s);
  background: var(--superficie); color: var(--texto-tenue);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
}
@media (hover: hover) {
  .btn-compartir:hover { border-color: var(--camel); color: var(--texto); }
}

/* ---------- Flechas del visor de fotos ----------
   Con el dedo el carrusel se desliza solo; con mouse no hay forma
   evidente de moverlo —el scroll horizontal necesita shift+rueda, que
   casi nadie conoce—. Por eso las flechas se muestran SOLO donde hay
   puntero fino: en una pantalla táctil estorbarían sobre la foto. */
.flecha-visor {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 3;
  background: rgba(251,248,243,.92); color: var(--azul);
  box-shadow: 0 2px 10px rgba(34,56,78,.18);
  display: none; place-items: center; padding: 0;
  transition: background .15s, opacity .15s;
}
.flecha-visor svg { width: 20px; height: 20px; }
.flecha-visor.izq { left: 10px; }
.flecha-visor.der { right: 10px; }
.flecha-visor:disabled { opacity: .35; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .flecha-visor:not(.oculto) { display: grid; }
  .flecha-visor:not(:disabled):hover { background: #fff; }
}

/* ---------- Prueba gratuita ----------
   La barra se llena según avanza la prueba, no según lo que queda: un
   depósito que se vacía angustia, y la idea no es angustiar a nadie sino
   que el negocio vea que está usando algo de verdad. */
.prueba-barra {
  height: 6px; border-radius: 999px;
  background: var(--hueco-medio);
  overflow: hidden; margin: 10px 0 0;
}
.prueba-barra i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--camel), var(--camel-suave));
  border-radius: 999px;
  transition: width .4s ease;
}
/* Enumerar lo que tiene AHORA no es publicidad: es lo único que hace que
   el día que termine sepa qué está perdiendo. Sin esto, la prueba se
   acaba y el dueño ni se entera de que tuvo algo distinto. */
.prueba-tiene {
  margin-top: 10px; padding: 10px 12px;
  background: var(--hueco-claro);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  font-size: 12.5px; line-height: 1.55;
  color: var(--texto-tenue);
}
.prueba-tiene b { color: var(--texto); }

/* En la consola: estado de la prueba de cada tienda de un vistazo. */
.chip-prueba {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px;
  background: var(--hueco-claro); color: var(--camel);
  border: 1px solid var(--camel-suave);
}
.chip-prueba.urge { background: #FAF2F0; color: #A8392C; border-color: #E0C4BE; }
.chip-prueba.fin  { background: var(--hueco); color: var(--texto-tenue); border-color: var(--borde); }

/* ---------- Los cuatro pasos del primer día ----------
   Aquí se perdía la gente: se entrega la clave, el dueño entra y ve un
   panel vacío. La lista desaparece sola al completarse — una lista de
   tareas que no se acaba nunca se convierte en un reproche diario. */
.arranque {
  background: var(--superficie);
  border: 1px solid var(--camel-suave);
  border-radius: var(--r-m);
  overflow: hidden;
  margin-bottom: 14px;
}
.arranque-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--borde);
  background: var(--hueco-claro);
}
.arranque-cabeza b { font-size: 14.5px; }
.arranque-cabeza span {
  font-family: ui-monospace, monospace; font-size: 12px;
  color: var(--camel); font-weight: 700;
}
.arranque-paso {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 14px; border: none; border-bottom: 1px solid var(--borde);
  background: none; font: inherit; text-align: left; cursor: pointer;
  color: var(--texto);
}
.arranque-paso:last-child { border-bottom: none; }
.arranque-paso:disabled { cursor: default; }
@media (hover: hover) { .arranque-paso:not(:disabled):hover { background: var(--hueco-claro); } }
.marca-paso {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  background: var(--hueco-medio); color: var(--texto-tenue);
}
.arranque-paso.listo .marca-paso { background: var(--exito); color: #fff; }
.arranque-paso.listo .arranque-texto b { color: var(--texto-tenue); text-decoration: line-through; }
.arranque-texto { flex: 1; min-width: 0; display: block; }
.arranque-texto b { display: block; font-size: 14px; font-weight: 600; }
.arranque-texto span { font-size: 12.5px; color: var(--texto-tenue); }
.arranque-flecha { color: var(--camel); font-size: 18px; }

/* ---------- Orden del catálogo ----------
   Flechas pequeñas pero con área de toque real: se pulsan con el pulgar,
   dentro de una fila que además abre el producto al tocarla. */
.orden-prod { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.orden-prod button {
  width: 30px; height: 24px;
  border: 1px solid var(--borde); border-radius: 6px;
  background: var(--superficie); color: var(--texto);
  font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit;
  display: grid; place-items: center; padding: 0;
}
.orden-prod button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .orden-prod button:not(:disabled):hover { background: var(--hueco-claro); border-color: var(--camel-suave); } }


/* ---------- Iconos de trazo ----------
   Reemplazan a los emojis. Heredan el color de su contenedor, así que un
   icono dentro de un chip camel sale camel y dentro de un botón blanco
   sale blanco: no hay que mantener una versión por fondo. */
.ico-svg { display: block; flex: 0 0 auto; }
.insignia .ico-svg, .chip .ico-svg { opacity: .9; }
.sello-liquidacion { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Selector de color de la tienda ----------
   Paleta cerrada: ocho combinaciones ya compuestas. La muestra enseña el
   color fuerte con un punto del de detalle dentro, que es exactamente
   cómo se van a ver juntos en el catálogo — elegir a ciegas y descubrirlo
   después en la tienda sería peor que no poder elegir. */
.paletas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 9px;
}
.paleta {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px 8px; border: 1.5px solid var(--borde);
  border-radius: var(--r-s); background: var(--superficie);
  cursor: pointer; font-family: inherit;
}
.paleta.elegida { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); }
@media (hover: hover) { .paleta:not(.elegida):hover { border-color: var(--borde-fuerte, #C7CBD0); } }
.paleta-muestra {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.paleta-muestra i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.paleta-nombre { font-size: 11.5px; color: var(--texto-tenue); line-height: 1.2; text-align: center; }
.paleta.elegida .paleta-nombre { color: var(--texto); font-weight: 650; }