/* ===== Merkap - Estilos adicionales (lo que Tailwind no cubre) ===== */

/* --- Mapas ---
   ANTES: `.leaflet-container { height: 420px }` afectaba a TODOS los mapas de la
   app. Ahora cada mapa define su propia altura por id. */
#map { height: 420px; }
#map-formulario, #map-ubicacion, #map-nuevo { height: 220px; border-radius: 12px; border: 1px solid #cbd5e1; }
#map-anuncio { height: 280px; }
@media (max-width: 1023px) { #map { height: 240px; } #map.map-grande { height: 70vh; } }   /* celular/tablet: bajito; «⤢ Ampliar» lo agranda */

.leaflet-container {
  width: 100%;
  z-index: 1;
  background: #e2e8f0;
  border-radius: 14px;
}
/* Tailwind pone max-width:100% a las <img>; eso rompe los tiles de Leaflet */
.leaflet-container img { max-width: none !important; }
.leaflet-div-icon { background: transparent; border: none; }

.custom-scrollbar::-webkit-scrollbar { height: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.35);
  border-radius: 10px;
}

/* --- Modales --- */
.modal-enter { animation: fadeIn 0.22s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Texto recortado --- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Insignias de estado --- */
.badge-nuevo { background: #dcfce7; color: #166534; }
.badge-usado { background: #fef3c7; color: #92400e; }

/* --- Panel desplegable (lo usa el foro) --- */
.detalle-anuncio {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.detalle-anuncio.abierto { max-height: 600px; }

/* --- Tarjeta resaltada al tocar su pin en el mapa --- */
.tarjeta-anuncio { transition: box-shadow .2s, transform .2s; }
.tarjeta-anuncio:hover { box-shadow: 0 6px 18px rgba(79,70,229,.12); }
.tarjeta-activa {
  outline: 3px solid #6366f1;
  outline-offset: 2px;
  box-shadow: 0 8px 24px rgba(79,70,229,.25);
}

/* --- Esqueleto de carga --- */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease infinite;
}
@keyframes brillo {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .modal-enter { animation: none; }
}

/* --- Marcadores del mapa --- */
.marcador-cat, .marcador-user {
  background: transparent !important;
  border: none !important;
}
.pin-mapa {
  /* Anuncios de VENTA: grandes, naranja y borde blanco. Los comercios son más chicos y blancos con borde verde azulado. */
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 0 0 2px #ea580c;   /* MAPA-1: sombra más corta (más fluido al mover el mapa) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-mapa span { transform: rotate(45deg); font-size: 20px; line-height: 1; }
.pin-usuario {
  width: 28px;
  height: 28px;
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(37,99,235,.35), 0 2px 8px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-usuario span { font-size: 12px; filter: grayscale(1) brightness(10); }

/* --- Ventana emergente (popup) del mapa --- */
.popup-anuncio { min-width: 190px; font-family: system-ui, sans-serif; }
.popup-anuncio a { color: #fff !important; }

/* --- Galería de la página de detalle --- */
.miniatura { border: 2px solid transparent; }
.miniatura[aria-current="true"] { border-color: #6366f1; }

/* Pines de comercios: más pequeños y de otro color que los anuncios */
.pin-comercio {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #fff; border: 2px solid #0f766e; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
}
.pin-comercio span { transform: rotate(45deg); font-size: 14px; line-height: 1; }

.co-chip[aria-selected="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* Botón amarillo «Publicar gratis»: parpadeo suave (brillo + aro) que se detiene al pasar el mouse */
/* Fase V-5: «halo» suave que se expande (antes parpadeaba con brillo cada 1,4 s). Mismo nombre para no tocar el JS. */
@keyframes mf-parpadeo {
  0%   { box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); }
  70%  { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}
.btn-parpadeo { animation: mf-parpadeo 2.4s ease-out infinite; }
.btn-parpadeo:hover, .btn-parpadeo:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn-parpadeo { animation: none; } }

/* ---------- Carrusel de banners del inicio ---------- */
.car-marco { position: relative; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 28px rgba(30, 27, 75, .22); }
.car-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -4px; }
.car-pista::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: .5rem;
  min-height: 15.5rem; padding: 1.4rem 1.3rem 2.6rem 1.4rem; color: #fff; position: relative; overflow: hidden; }
.c1 { background: linear-gradient(120deg, #3730a3, #6d28d9 70%, #a21caf); }
.c2 { background: linear-gradient(120deg, #0f766e, #0d9488 60%, #65a30d); }
.c3 { background: linear-gradient(120deg, #1e3a8a, #2563eb 65%, #0ea5e9); }
.c4 { background: linear-gradient(120deg, #7c2d12, #c2410c 60%, #f59e0b); }
.c5 { background: linear-gradient(120deg, #9d174d, #db2777 60%, #f97316); }   /* 2X: Recomienda un comercio */
.car-slide::before { content: ""; position: absolute; right: -4rem; top: -4rem; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(255,255,255,.10); }
.car-slide::after { content: ""; position: absolute; left: -3rem; bottom: -5rem; width: 12rem; height: 12rem; border-radius: 50%; background: rgba(255,255,255,.07); }
.car-texto { position: relative; z-index: 1; }
.car-etiqueta { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fde047; }
.car-titulo { font-size: 1.55rem; line-height: 1.1; font-weight: 900; margin: .25rem 0 .45rem; }
.car-sub { font-size: .86rem; line-height: 1.35; color: rgba(255,255,255,.92); max-width: 30rem; margin-bottom: .9rem; }
.car-cta { display: inline-block; background: #facc15; color: #1e1b4b; font-weight: 800; font-size: .88rem; padding: .6rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; box-shadow: 0 4px 0 #a16207; transition: transform .08s, box-shadow .08s; }
.car-cta:hover { filter: brightness(1.06); }
.car-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #a16207; }
/* Arte con perspectiva: tarjeta de vidrio inclinada en 3D que flota despacio */
.car-arte { position: relative; z-index: 1; display: flex; justify-content: center; perspective: 700px; }
.car-tarjeta { position: relative; width: 7.2rem; height: 7.2rem; border-radius: 1.3rem; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.10)); border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 18px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transform: rotateY(-18deg) rotateX(8deg) rotateZ(3deg); animation: car-flota 5s ease-in-out infinite; }
.car-e1 { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.car-e2 { position: absolute; right: -.7rem; bottom: -.8rem; font-size: 2rem; transform: translateZ(40px); filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
@keyframes car-flota {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) rotateZ(3deg) translateY(0); }
  50%      { transform: rotateY(-8deg) rotateX(4deg) rotateZ(1deg) translateY(-8px); }
}
.car-flecha { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.88); color: #3730a3; font-size: 1.6rem; line-height: 1; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,.25); z-index: 2; }
.car-flecha:hover { background: #fff; }
.car-ant { left: .7rem; } .car-sig { right: .7rem; }
.car-puntos { position: absolute; left: 0; right: 0; bottom: .6rem; display: flex; justify-content: center; gap: .45rem; z-index: 2; }
.car-punto { width: .6rem; height: .6rem; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s, background .2s; }
.car-punto[aria-selected="true"] { width: 1.6rem; background: #fde047; }
@media (min-width: 640px) {
  .car-slide { min-height: 17rem; padding: 2rem 4rem 3rem 3rem; }
  .car-titulo { font-size: 2.3rem; } .car-sub { font-size: 1rem; }
  .car-tarjeta { width: 10rem; height: 10rem; } .car-e1 { font-size: 5rem; } .car-e2 { font-size: 2.8rem; }
  .car-flecha { display: block; }
}
@media (prefers-reduced-motion: reduce) { .car-tarjeta { animation: none; } .car-pista { scroll-behavior: auto; } }

/* Botones "3D": relieve inferior que se hunde al presionar */
.btn-3d {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; cursor: pointer;
  font-weight: 800; font-size: 1rem; padding: .8rem 1.4rem; border-radius: 1rem;
  border: 0; position: relative; transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn-3d:hover { filter: brightness(1.06); }
.btn-3d:active { transform: translateY(4px); }
.btn-3d-comercios {
  color: #fff; background: linear-gradient(180deg, #14b8a6, #0d9488);
  box-shadow: 0 5px 0 #115e59, 0 10px 18px rgba(0,0,0,.28);
}
.btn-3d-comercios:active { box-shadow: 0 1px 0 #115e59, 0 3px 6px rgba(0,0,0,.28); }
.btn-3d-negocio {
  background: #facc15; color: #1e1b4b;
  box-shadow: 0 5px 0 #a16207, 0 9px 14px rgba(0,0,0,.28);
}
.btn-3d-negocio:active { box-shadow: 0 1px 0 #a16207, 0 3px 6px rgba(0,0,0,.28); }
.btn-3d-blanco {
  color: #3730a3; background: linear-gradient(180deg, #ffffff, #e0e7ff);
  box-shadow: 0 5px 0 #a5b4fc, 0 10px 18px rgba(0,0,0,.22);
}
.btn-3d-blanco:active { box-shadow: 0 1px 0 #a5b4fc, 0 3px 6px rgba(0,0,0,.22); }
.btn-3d-chico { font-size: .85rem; padding: .5rem .9rem; border-radius: .8rem; box-shadow: 0 3px 0 #115e59, 0 6px 10px rgba(0,0,0,.25); }
.btn-3d-chico:active { box-shadow: 0 1px 0 #115e59; transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .btn-3d { transition: none; } }

/* Aviso "toca para ver" en la foto del anuncio y botón principal de la tarjeta */
.cinta-ver { background: linear-gradient(0deg, rgba(30,27,75,.85), rgba(30,27,75,.0)); padding-top: 1.1rem; }
.btn-ver-anuncio { background: #eef2ff; color: #4338ca; border: 2px solid #c7d2fe; transition: background .15s, border-color .15s; }
.btn-ver-anuncio:hover { background: #e0e7ff; border-color: #818cf8; }
.leyenda-pin { display: inline-block; vertical-align: middle; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.leyenda-pin-anuncio { width: 16px; height: 16px; background: linear-gradient(135deg, #fb923c, #ea580c); border: 2px solid #fff; box-shadow: 0 0 0 1.5px #ea580c; }
.leyenda-pin-comercio { width: 12px; height: 12px; background: #fff; border: 2px solid #0f766e; }

/* Publicaciones en carrusel: tarjetas más pequeñas que se deslizan de lado (mismo contenido y botones) */
.carrusel-anuncios { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  position: relative; padding: .25rem .25rem 1rem; scrollbar-width: thin; outline: none; }
.carrusel-anuncios > * { flex: 0 0 15.5rem; scroll-snap-align: start; }
.carrusel-anuncios > .skeleton { flex-basis: 15.5rem; }
@media (max-width: 380px) { .carrusel-anuncios > * { flex-basis: 13.5rem; } }
.anu-flecha { display: none; position: absolute; top: 40%; z-index: 5; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 0;
  background: #fff; color: #4f46e5; font-size: 1.6rem; line-height: 1; font-weight: 900; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.anu-flecha-ant { left: -.4rem; } .anu-flecha-sig { right: -.4rem; }
@media (min-width: 640px) { .anu-flecha { display: block; } }
@media (prefers-reduced-motion: reduce) { .carrusel-anuncios { scroll-behavior: auto; } }

/* ===== Fase 2L: botón «Cerca de mí» visible + barra superior ordenada ===== */
.btn-cerca {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  background: #4f46e5; color: #fff; font-weight: 700; font-size: .875rem;
  padding: .55rem .9rem; border-radius: .5rem; border: 0; cursor: pointer;
  box-shadow: 0 2px 0 #3730a3; transition: background .15s, transform .1s;
}
.btn-cerca:hover { background: #4338ca; }
.btn-cerca:active { transform: translateY(1px); box-shadow: 0 1px 0 #3730a3; }
.btn-cerca:disabled { opacity: .7; cursor: wait; }
.btn-cerca[aria-pressed="true"] { background: #16a34a; box-shadow: 0 2px 0 #15803d, 0 0 0 3px #fde047; }
.btn-cerca-chico { font-size: .8rem; padding: .35rem .7rem; }

/* Menú de la cuenta (👤 Nombre ▾) */
#menu-cuenta { z-index: 60; }
#encabezado.con-sesion #acciones-encabezado { gap: .5rem; }
#btn-auth { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) {
  #encabezado.con-sesion #acciones-encabezado { justify-content: space-between; }
}

/* ===== Fase 2P: estrellas para calificar ===== */
.op-star { font-size: 2.1rem; line-height: 1; color: #cbd5e1; padding: .1rem .15rem; cursor: pointer; transition: color .1s, transform .1s; background: none; border: 0; }
.op-star.encendida { color: #f59e0b; }
.op-star:hover { transform: scale(1.12); }
.op-star:focus-visible { outline: 2px solid #4f46e5; border-radius: .4rem; }
.op-barra { height: .55rem; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.op-barra > i { display: block; height: 100%; background: #f59e0b; border-radius: 999px; }
/* Comentarios largos sin espacios (p. ej. «aaaaaaaa…») nunca ensanchan la página */
#op-lista p, #op-lista textarea { overflow-wrap: anywhere; word-break: break-word; }
#op-lista article > div > div { min-width: 0; }

/* ===== Fase 2R: «Editar mi publicación» y «Reclamar comercio» ===== */
.btn-editar-mio { background: #fef3c7; color: #78350f; border: 2px solid #fcd34d; transition: background .15s; }
.btn-editar-mio:hover { background: #fde68a; }

/* Etiqueta pequeña en la foto de los comercios SIN dueño: titila suave, no tapa nada */
.badge-reclamar {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #facc15; color: #1e1b4b; font-weight: 800; font-size: .7rem; line-height: 1;
  padding: .35rem .55rem; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  animation: mf-reclamar 2.2s ease-in-out infinite;
}
.badge-reclamar:hover, .badge-reclamar:focus-visible { animation: none; background: #fde047; }
@keyframes mf-reclamar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .75), 0 2px 6px rgba(0,0,0,.18); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(250, 204, 21, 0), 0 2px 6px rgba(0,0,0,.18); opacity: .82; }
}
/* Burbuja flotante en la ficha del comercio (se puede cerrar) */
#burbuja-reclamar { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; display: flex; align-items: center; gap: .35rem;
  max-width: calc(100vw - 2rem); background: #1e1b4b; color: #fff; border-radius: 999px; padding: .35rem .4rem .35rem .4rem;
  box-shadow: 0 6px 18px rgba(30,27,75,.35); }
#burbuja-reclamar .badge-reclamar { font-size: .78rem; padding: .5rem .75rem; }
#burbuja-reclamar button[data-cerrar-burbuja] { color: #c7d2fe; font-size: 1.1rem; line-height: 1; padding: .2rem .45rem; background: none; border: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .badge-reclamar { animation: none; } }
body:has(#t-barra:not(.hidden)) #burbuja-reclamar { bottom: 5.25rem; }

/* ===== Botón «Llamar»: teléfono blanco sobre azul cielo (se distingue del verde de WhatsApp) ===== */
.btn-llamar { background: #0284c7; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn-llamar:hover { background: #0369a1; }
.btn-llamar:active { background: #075985; }
.btn-llamar.hidden { display: none; }
@media (min-width: 768px) { .btn-llamar.md\:block { display: flex; } }
.icono-tel { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ===== Fase 2U: mapa en la ficha del comercio (proporción fija, deja ver la vitrina) ===== */
.mapa-comercio { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 280px; border-radius: 1rem; overflow: hidden; border: 1px solid #e2e8f0; background: #e2e8f0; z-index: 0; }
.mapa-comercio > #t-mapa { position: absolute; inset: 0; }
@media (min-width: 768px) { .mapa-comercio { aspect-ratio: 21 / 8; max-height: 320px; } }
.pin-comercio-grande { width: 40px !important; height: 40px !important; }
.pin-comercio-grande span { font-size: 20px !important; }

/* ===== Fase 2W · Buscador inteligente ===== */
/* Botón 🔍 dentro del buscador (a la derecha): pequeño, redondo y con el amarillo de la marca */
*:has(> .btn-buscar) { position: relative; }   /* el contenedor del buscador sirve de referencia */
.btn-buscar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 14px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #facc15, #f59e0b); color: #1e1b4b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-buscar:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(245, 158, 11, .55); }
.btn-buscar:active { transform: translateY(-50%) scale(.93); }
.btn-buscar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Sugerencias mientras se escribe */
.sugerencias-busq {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1200;
  background: #fff; color: #0f172a; border-radius: 16px; overflow: hidden; text-align: left;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .25); border: 1px solid #e2e8f0;
}
.sugerencias-busq.hidden { display: none; }
.sug-fila { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 14px; color: #0f172a; text-decoration: none; border-top: 1px solid #f1f5f9; }
.sug-fila:first-child { border-top: 0; }
.sug-fila:hover, .sug-activa { background: #eef2ff; }
.sug-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-sub { margin-left: auto; flex-shrink: 0; font-size: 12px; color: #64748b; white-space: nowrap; }
.sug-todo { color: #4338ca; font-weight: 600; background: #f8fafc; }

/* Página de resultados */
.b-chip {
  flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .95); color: #312e81; text-decoration: none;
}
.b-chip:hover { background: #fef9c3; }
.b-chip small { font-weight: 600; color: #64748b; font-size: 11px; }
.b-chip-anuncio { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.b-chip-anuncio small { color: #c7d2fe; }
.b-chip-anuncio:hover { background: rgba(255, 255, 255, .28); }
.b-pestana {
  flex-shrink: 0; white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: #fff; border: 1px solid #cbd5e1; color: #334155; text-decoration: none;
}
.b-pestana:hover { border-color: #6366f1; color: #4338ca; }
.b-pestana b { color: #4f46e5; }
.b-tarjeta h3 { overflow-wrap: anywhere; }

/* Producto al que se llegó desde el buscador */
.prod-resaltado { outline: 3px solid #14b8a6; outline-offset: 2px; animation: prod-pulso 1.2s ease 2; }
@keyframes prod-pulso { 50% { box-shadow: 0 0 0 8px rgba(20, 184, 166, .25); } }
@media (prefers-reduced-motion: reduce) { .prod-resaltado { animation: none; } }

/* ===== Fase 2W.1 · Filtros compactos ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.filtro-sel { width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: .6rem; padding: .5rem .6rem; font-size: .875rem; background: #fff; color: #1e293b; height: 2.5rem; }
.filtro-sel:focus { outline: 2px solid #818cf8; outline-offset: 1px; }
.btn-cerca-pill { height: 2.5rem; border-radius: 999px; padding: 0 .9rem; flex-shrink: 0; }
.btn-mas-filtros {
  height: 2.5rem; flex-shrink: 0; display: inline-flex; align-items: center; gap: .2rem; padding: 0 .8rem;
  border-radius: 999px; font-size: .875rem; font-weight: 600; color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe; cursor: pointer;
}
.btn-mas-filtros:hover { background: #e0e7ff; }
.btn-mas-filtros[aria-expanded="true"] { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.chip-activo {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; cursor: pointer;
}
.chip-activo span { color: #6366f1; font-size: .7rem; }
.chip-activo:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.chip-activo:hover span { color: #dc2626; }
@media (max-width: 359px) {   /* celulares muy angostos: un poco más apretado para que el orden se lea */
  .btn-cerca-pill { padding: 0 .6rem; font-size: .8rem; }
  .btn-mas-filtros { padding: 0 .55rem; }
  .filtro-sel { padding: .5rem .35rem; font-size: .8rem; }
}

/* Fase 2W.2 · «🔄 Ver todas las publicaciones» (junto a los filtros activos) */
.chip-ver-todo {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: #fff; background: #4f46e5; border: 1px solid #4f46e5; cursor: pointer;
}
.chip-ver-todo:hover { background: #4338ca; }

/* Fase 2W.2 · «Buscar en todo»: ✕ dentro del buscador y «🔄 Ver todo» */
.btn-limpiar-busq {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: #e2e8f0; color: #334155; font-weight: 800; font-size: 15px; line-height: 1;
}
.btn-limpiar-busq:hover { background: #cbd5e1; }
.btn-limpiar-busq.hidden { display: none; }
input.buscador-con-x::-webkit-search-cancel-button { display: none; }   /* usamos nuestra ✕, más grande y clara */
.btn-ver-todo-busq {
  height: 2.5rem; flex: 1; padding: 0 .9rem; border-radius: 999px; font-size: .875rem; font-weight: 700;
  color: #fff; background: #4f46e5; border: 0; cursor: pointer; white-space: nowrap;
}
.btn-ver-todo-busq:hover { background: #4338ca; }
.btn-ver-todo-busq.hidden { display: none; }
@media (min-width: 1024px) { .btn-ver-todo-busq { flex: none; } }
.b-chip.b-chip-on { background: #fde047; color: #1e1b4b; }
.b-chip.b-chip-on small { color: #4338ca; }

/* ===== Fase 2C.5 · Perfil público del vendedor ===== */
.vendedor-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, #6366f1, #a855f7);
}
.vendedor-avatar.grande { width: 72px; height: 72px; font-size: 1.9rem; }

/* ===== Fase 2Y · Barra inferior tipo app (solo celular y tablet) ===== */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e2e8f0; box-shadow: 0 -6px 20px rgba(30, 27, 75, .08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.ni-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px;
  font-size: 11px; font-weight: 600; color: #64748b; text-decoration: none; background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ni-tab svg { transition: transform .15s ease; }
.ni-tab:active svg { transform: scale(.9); }
.ni-tab[aria-current="page"] { color: #4f46e5; }
.ni-tab[aria-current="page"] svg { fill: #e0e7ff; }
.ni-centro { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: #4338ca; }
.ni-mas {
  width: 56px; height: 56px; margin-top: -26px; border-radius: 999px; border: 4px solid #fff; cursor: pointer;
  background: linear-gradient(135deg, #fde047, #f59e0b); color: #1e1b4b; font-size: 30px; font-weight: 900; line-height: 1;
  box-shadow: 0 6px 16px rgba(245, 158, 11, .5); display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.ni-mas:active { transform: scale(.92); }
.ni-mas:focus-visible, .ni-tab:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
/* Menú que sube desde abajo */
.ni-hoja { position: fixed; inset: 0; z-index: 95; }
.ni-hoja.hidden { display: none; }
.ni-fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.ni-panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto;
  animation: ni-sube .2s ease-out; box-shadow: 0 -10px 30px rgba(15, 23, 42, .2);
}
@keyframes ni-sube { from { transform: translateY(100%); } to { transform: none; } }
.ni-agarre { width: 44px; height: 5px; border-radius: 999px; background: #cbd5e1; margin: 2px auto 10px; }
.ni-titulo { font-weight: 900; color: #312e81; font-size: 17px; margin: 0 4px 8px; }
.ni-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 10px; border-radius: 14px;
  color: #0f172a; text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 15px;
}
.ni-opcion:hover, .ni-opcion:focus-visible { background: #eef2ff; outline: none; }
.ni-opcion small { display: block; font-size: 12px; color: #64748b; font-weight: 400; }
.ni-op-ico { width: 42px; height: 42px; border-radius: 12px; background: #eef2ff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ni-cerrar { display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 14px; background: #f1f5f9; border: 0; font-weight: 700; color: #334155; cursor: pointer; }
/* Espacio para que la barra no tape el final de la página; con el teclado abierto se esconde */
@media (max-width: 1023px) {
  body.con-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.ni-teclado .nav-inferior { display: none; }
}
@media (min-width: 1024px) { .nav-inferior, .ni-hoja { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ni-panel { animation: none; } }

/* ===== Fase 2Y · Encabezado fijo con buscador (inicio) ===== */
.enc-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marca acciones" "busca busca";
  align-items: center; gap: 8px 10px; padding: 10px 0 12px; transition: padding .2s ease;
}
.enc-marca { grid-area: marca; min-width: 0; }
.enc-acciones { grid-area: acciones; min-width: 0; }
.enc-busca { grid-area: busca; position: relative; }
.enc-busca input { padding-top: .8rem; padding-bottom: .8rem; }
.enc-busca .btn-buscar { width: 40px; height: 40px; border-radius: 12px; }
.enc-busca .btn-buscar ~ .sugerencias-busq, .enc-busca .sugerencias-busq { z-index: 1200; }
@media (min-width: 1024px) {
  .enc-grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marca busca acciones"; gap: 16px; }
}
.encabezado-app.encogido .enc-grid { padding-top: 6px; padding-bottom: 8px; }
.encabezado-app.encogido .enc-marca h1 { font-size: 1.25rem; }
.enc-marca h1 { transition: font-size .2s ease; }
.enc-solo-pc { display: none; }
@media (min-width: 1024px) { .enc-solo-pc { display: inline-flex; } }
.acceso-chip {
  flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
}
.acceso-chip:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 419px) {   /* celulares: que quepan marca, «Entrar» y «Regístrate» sin montarse */
  .enc-gratis { display: none; }
  .enc-logo { font-size: 1.3rem; }
  #acciones-encabezado #btn-auth { padding-left: .6rem; padding-right: .6rem; }
  #acciones-encabezado #btn-publicar-header { padding-left: .7rem; padding-right: .7rem; }
}

/* ===== Fase 2Z · Categorías sobre fondo claro (sección «Anuncios y clasificados» del inicio) ===== */
.cats-claras .categoria-btn { background: #fff !important; color: #475569 !important; border: 1px solid #cbd5e1; box-shadow: none !important; }
.cats-claras .categoria-btn:hover { border-color: #818cf8; color: #4338ca !important; }
.cats-claras .categoria-btn[aria-pressed="true"] { background: #4f46e5 !important; color: #fff !important; border-color: #4f46e5; }
.cats-claras .subcat-btn { background: #f1f5f9 !important; color: #475569 !important; }
.cats-claras .subcat-btn[aria-pressed="true"] { background: #fde047 !important; color: #1e1b4b !important; }

/* ===== Fase 2Z.1 · Accesos en cuadros (identidad propia: cuadro de color con «burbuja» y emoji en relieve) ===== */
.accesos-fila { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; margin: 0 -2px; }
.accesos-fila > :first-child { margin-left: auto; }
.accesos-fila > :last-child { margin-right: auto; }
.acceso {
  flex: 0 0 auto; width: 76px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acceso-cuadro {
  width: 66px; height: 66px; border-radius: 22px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(15, 10, 60, .28), inset 0 -4px 0 rgba(0, 0, 0, .08);
  transition: transform .15s ease;
}
.acceso-cuadro::before { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; top: -14px; left: -12px; background: rgba(255, 255, 255, .55); }
.acceso-cuadro::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; bottom: -6px; right: -4px; background: rgba(255, 255, 255, .35); }
.acceso-ico { position: relative; z-index: 1; font-size: 34px; line-height: 1; transform: rotate(-6deg); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.acceso-txt { font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; max-width: 76px; }
.acceso:hover .acceso-cuadro { transform: translateY(-2px); }
.acceso:active .acceso-cuadro { transform: scale(.94); }
.acceso:focus-visible { outline: 3px solid #fde047; outline-offset: 3px; border-radius: 16px; }
.acc-morado { background: linear-gradient(145deg, #ede9fe, #a78bfa); }
.acc-menta { background: linear-gradient(145deg, #d1fae5, #34d399); }
.acc-amarillo { background: linear-gradient(145deg, #fef9c3, #facc15); }
.acc-rosa { background: linear-gradient(145deg, #fce7f3, #f472b6); }
.acc-azul { background: linear-gradient(145deg, #dbeafe, #60a5fa); }
.acc-naranja { background: linear-gradient(145deg, #ffedd5, #fb923c); }
@media (min-width: 640px) {
  .acceso { width: 88px; } .acceso-cuadro { width: 76px; height: 76px; border-radius: 24px; } .acceso-ico { font-size: 40px; } .acceso-txt { font-size: 13px; max-width: 88px; }
}

/* ===== Fase 2Z.1 · Carrusel del inicio ~20 % más bajo ===== */
.car-slide { min-height: 11.5rem; padding: .85rem 1rem 1.75rem 1.1rem; }
.car-titulo { font-size: 1.25rem; margin: .15rem 0 .3rem; }
.car-sub { font-size: .78rem; line-height: 1.3; margin-bottom: .55rem; }
.car-cta { font-size: .8rem; padding: .5rem .95rem; }
.car-tarjeta { width: 5.8rem; height: 5.8rem; }
.car-e1 { font-size: 2.9rem; } .car-e2 { font-size: 1.6rem; }
.car-puntos { bottom: .45rem; }
@media (min-width: 640px) {
  .car-slide { min-height: 13.6rem; padding: 1.6rem 4rem 2.4rem 3rem; }
  .car-titulo { font-size: 1.9rem; } .car-sub { font-size: .92rem; }
  .car-tarjeta { width: 8rem; height: 8rem; } .car-e1 { font-size: 4rem; } .car-e2 { font-size: 2.3rem; }
}

/* ===== Fase 2Z.2 · Editor del inicio ===== */
.c6 { background: linear-gradient(120deg, #0f172a, #1e293b 55%, #4338ca); }
.c7 { background: linear-gradient(120deg, #78350f, #b45309 55%, #f59e0b); }
.c8 { background: linear-gradient(120deg, #065f46, #059669 55%, #2dd4bf); }
.car-img { max-width: 100%; max-height: 8.5rem; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)); }
@media (min-width: 640px) { .car-img { max-height: 11rem; } }
.car-con-fondo { grid-template-columns: 1fr; }
.car-con-fondo::before, .car-con-fondo::after { display: none; }
.acceso-cuadro.con-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.acceso-cuadro.con-imagen::before, .acceso-cuadro.con-imagen::after { display: none; }

/* ===== Fase 2Z.3 · Ordenar cuadros arrastrando + selector de íconos ===== */
#acc-vista .acceso-arrastrable { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
#acc-vista .acceso-arrastrable:active { cursor: grabbing; }
.acceso-fantasma { opacity: .35; }
.acceso-elegido .acceso-cuadro { outline: 3px dashed #fde047; outline-offset: 2px; }
.acceso-mover { display: flex; gap: 4px; margin-top: 2px; }
.acceso-mover button { width: 26px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; line-height: 1; }
.acceso-mover button:hover, .acceso-mover button:focus-visible { background: rgba(255,255,255,.35); }
.acceso-arrastrable:first-child [data-mover="-1"], .acceso-arrastrable:last-child [data-mover="1"] { visibility: hidden; }
.emoji-opcion { font-size: 26px; line-height: 1; padding: 6px 0; border-radius: 10px; }
.emoji-opcion:hover, .emoji-opcion:focus-visible { background: #eef2ff; }

/* ===== Fase 2Z.4 · Movimiento sutil de los cuadros (mismo estilo que el ícono del carrusel) =====
   El ícono flota e inclina despacio en 3D; cada cuadro va a su propio ritmo para que no se muevan en bloque.
   Las imágenes propias hacen un acercamiento muy leve. Se apaga si la persona pidió «reducir movimiento». */
.acceso-cuadro { perspective: 300px; }
.acceso-ico { animation: acc-flota 4.6s ease-in-out infinite; will-change: transform; }
@keyframes acc-flota {
  0%, 100% { transform: rotate(-6deg) rotateY(-14deg) translateY(0); }
  50%      { transform: rotate(-2deg) rotateY(6deg) translateY(-4px); }
}
.acceso-cuadro.con-imagen img { animation: acc-imagen 7s ease-in-out infinite; }
@keyframes acc-imagen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06) translateY(-2px); } }
.acceso:nth-child(4n+2) .acceso-ico, .acceso:nth-child(4n+2) .acceso-cuadro img { animation-delay: -1.2s; }
.acceso:nth-child(4n+3) .acceso-ico, .acceso:nth-child(4n+3) .acceso-cuadro img { animation-delay: -2.4s; }
.acceso:nth-child(4n+4) .acceso-ico, .acceso:nth-child(4n+4) .acceso-cuadro img { animation-delay: -3.5s; }
.acceso:nth-child(3n+1) .acceso-ico { animation-duration: 5.2s; }
.acceso:hover .acceso-ico { animation-play-state: paused; }
.acceso-elegido .acceso-ico, .acceso-fantasma .acceso-ico { animation: none; }
@media (prefers-reduced-motion: reduce) { .acceso-ico, .acceso-cuadro.con-imagen img { animation: none; } }

/* ===== Fase 2Z.7 · Detalles de inmuebles y vehículos ===== */
.caja-detalles { background: #eef2ff; border: 1px solid #c7d2fe; }
.det-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.det-chip { font-size: 11px; font-weight: 700; color: #3730a3; background: #eef2ff; border-radius: 999px; padding: 2px 8px; }
.det-chip.op { background: #fde047; color: #1e1b4b; }
.filtros-detalle { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.filtros-detalle select, .filtros-detalle input { font-size: 13px; color: #334155; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; padding: 6px 10px; max-width: 46vw; }
.filtros-detalle input { width: 7.5rem; }
.aviso-fraude { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }

/* ===== Fase 2Z.8 · Cómo atiende el comercio ===== */
.modo-opcion { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #cbd5e1; border-radius: 14px; padding: 10px 12px; cursor: pointer; font-size: 14px; color: #1e293b; background: #fff; }
.modo-opcion small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; font-weight: 400; }
.modo-opcion input { margin-top: 4px; flex-shrink: 0; }
.modo-opcion:has(input:checked) { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 2px #c7d2fe; }
.badge-modo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #ecfdf5; color: #065f46; white-space: nowrap; }
.badge-modo.domicilio { background: #fff7ed; color: #9a3412; }

/* ===== Fase 2Z.9 · Foto: tomar con la cámara o elegir de la galería ===== */
.foto-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 9px 14px; }
.foto-btn:hover { background: #e0e7ff; }
.foto-btn:focus-within { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.aviso-ubicado { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.aviso-verificado { background: #f0fdf4; border: 1px solid #86efac; color: #14532d; }   /* fase 2AQ */
/* Fase 2AQ.3: aviso plegable con ⓘ */
.aviso-plegable summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.aviso-plegable summary::-webkit-details-marker { display: none; }
.aviso-plegable .ico-info { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; line-height: 1; }
.aviso-plegable .ico-info::before { content: "i"; font-family: Georgia, serif; font-style: italic; }
.aviso-plegable[open] .ico-info::before { content: "✕"; font-family: inherit; font-style: normal; font-size: 11px; }
.aviso-plegable .aviso-detalle { margin-top: 6px; }

/* ===== Fase 2Z.10 · La comunidad confirma comercios + acelerar verificación ===== */
.badge-vecinos { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; white-space: nowrap; }
.confirmar-caja { position: relative; background: linear-gradient(135deg, #eef2ff, #f0fdfa); border: 1px solid #c7d2fe; border-radius: 16px; padding: 12px 14px; }
.confirmar-caja.gracias { background: #f0fdf4; border-color: #bbf7d0; }
.confirmar-cerrar { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border-radius: 999px; color: #64748b; font-size: 14px; }
.confirmar-cerrar:hover { background: #e2e8f0; }
.btn-conf { font-size: 13px; font-weight: 700; border-radius: 12px; padding: 8px 12px; border: 1px solid; }
.btn-conf.si { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-conf.si:hover { background: #15803d; }
.btn-conf.no { background: #fff; border-color: #fca5a5; color: #b91c1c; }
.btn-conf.no:hover { background: #fef2f2; }
.btn-conf:disabled { opacity: .6; }
.conf-pop { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #475569; }
.conf-pop button { font-size: 16px; line-height: 1; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.conf-pop button:hover { background: #eef2ff; }
.btn-acelerar { font-size: 13px; font-weight: 800; color: #1e1b4b; background: #fde047; border-radius: 12px; padding: 8px 14px; box-shadow: 0 2px 0 #ca8a04; }
.btn-acelerar:hover { background: #facc15; }
/* 2Z.10b: «¿Existe aquí?» más visible en la ventanita y «¿Lo encontraste?» flotante */
.conf-pop { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: 5px 7px; font-weight: 700; color: #3730a3; }
.conf-pop button { font-size: 12px; font-weight: 700; color: #1e293b; }
.lo-encontraste { position: fixed; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 90; max-width: 460px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: rgba(255,255,255,.97); border: 1px solid #c7d2fe; border-radius: 14px;
  padding: 8px 10px; box-shadow: 0 8px 22px rgba(30, 27, 75, .18); animation: le-baja .25s ease-out; transition: opacity .35s, transform .35s; }
.lo-encontraste.saliendo { opacity: 0; transform: translateY(-12px); }
.lo-encontraste .le-texto { font-size: 13px; color: #1e1b4b; flex: 1 1 180px; min-width: 0; }
.lo-encontraste .le-botones { display: flex; align-items: center; gap: 6px; }
.lo-encontraste .btn-conf { font-size: 12px; padding: 6px 10px; border-radius: 10px; }
.le-cerrar { width: 28px; height: 28px; border-radius: 999px; color: #64748b; font-size: 13px; }
.le-cerrar:hover { background: #e2e8f0; }
@keyframes le-baja { from { transform: translateY(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) { .lo-encontraste { left: auto; right: 16px; top: 76px; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .lo-encontraste { animation: none; } }

/* ===== Fase 2AA.1 · Panel de comercios ===== */
.ficha-borrador { box-shadow: 0 0 0 2px #f59e0b; }

/* ===== Fase 2AA.2 · Editor completo de comercios ===== */
.ed-pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; scrollbar-width: thin; }
.ed-pestanas button { white-space: nowrap; font-size: 13px; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 7px 12px; }
.ed-pestanas button[aria-selected="true"] { background: #4f46e5; color: #fff; }

/* ===== Fase 2AA.3 · Clasificar comercios por categoría ===== */
.ac-cat-chip { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; }
.ac-cat-chip:hover { border-color: #818cf8; }
.ac-cat-chip.activo { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.ac-cat-ver { font-size: 10px; font-weight: 800; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 1px 6px; }
.ac-cat-chip.activo .ac-cat-ver { color: #fff; background: rgba(255,255,255,.25); }
.ac-vista-btn { border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 8px; font-weight: 700; color: #475569; background: #fff; }
.ac-vista-btn[aria-pressed="true"] { background: #eef2ff; border-color: #6366f1; color: #3730a3; }
.ac-grupo { border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px 12px; background: #fff; }
.ac-grupo > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style: none; }
.ac-grupo > summary::-webkit-details-marker { display: none; }
.ac-grupo > summary::before { content: "▸"; color: #6366f1; font-weight: 900; }
.ac-grupo[open] > summary::before { content: "▾"; }
.ac-barra { width: 90px; height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; display: inline-block; }
.ac-barra > span { display: block; height: 100%; background: #22c55e; }

/* ===== Fase 2AA.4 · Galería de fotos del comercio y visor a pantalla completa ===== */
.visor-fotos { position: fixed; inset: 0; z-index: 400; background: rgba(2, 6, 23, .94); display: flex; align-items: center; justify-content: center; padding: 48px 8px 44px; cursor: zoom-out; }
.visor-fotos.hidden { display: none; }
.visor-fotos img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; border-radius: 6px; }
.vf-cerrar { position: absolute; top: 8px; right: 14px; color: #fff; font-size: 40px; line-height: 1; }
.vf-flecha { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 44px; line-height: 1; width: 48px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.08); }
.vf-flecha:hover { background: rgba(255,255,255,.18); }
.vf-ant { left: 6px; } .vf-sig { right: 6px; }
.vf-pie { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: 13px; }
.t-ampliar { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-size: 12px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .65); border-radius: 999px; padding: 5px 10px; backdrop-filter: blur(4px); }
#t-miniaturas .miniatura[aria-current="true"] { outline: 3px solid #6366f1; outline-offset: 1px; }
.gf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gf-item { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; background: #f1f5f9; aspect-ratio: 1 / 1; }
.gf-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gf-portada { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 800; color: #1e1b4b; background: #fde047; border-radius: 999px; padding: 1px 7px; }
.gf-acciones { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 3px; padding: 3px; background: linear-gradient(transparent, rgba(15,23,42,.7)); }
.gf-acciones button { width: 26px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.9); color: #1e293b; font-size: 11px; font-weight: 800; }
.gf-acciones .gf-quitar { color: #b91c1c; }

/* ===== Marca Merkap (fase 2AB.2): ícono + palabra, con los colores de la página (índigo y amarillo) ===== */
.marca { display: inline-flex; align-items: center; gap: .42em; line-height: 1; vertical-align: middle; white-space: nowrap; }
.marca-ico { width: 1.45em; height: 1.45em; flex: none; filter: drop-shadow(0 2px 0 rgba(30, 27, 75, .35)); transition: transform .25s ease; }
.marca-txt { font-weight: 900; letter-spacing: -.045em; color: #fff; font-size: 1.08em; }
.marca-txt b { font-weight: 900; color: #fde047; }
a:hover > .marca .marca-ico, .marca:hover .marca-ico { transform: rotate(-8deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .marca-ico { transition: none; } }

/* Fase 2AB.2b: distintivo sanitario (aparte del sello de verificación) */
.badge-salud { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; white-space: nowrap; }

/* Fase 2AC: precio fijo / negociable */
.precio-tipo { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; border-radius: 999px; padding: 6px 12px; cursor: pointer; background: #fff; }
.precio-tipo:has(input:checked) { border-color: #4f46e5; background: #eef2ff; color: #3730a3; font-weight: 700; }
.precio-tipo input { accent-color: #4f46e5; }
.etq-precio { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-left: 6px; }
.etq-precio.negociable { background: #fef3c7; color: #92400e; }
.etq-precio.fijo { background: #e0e7ff; color: #3730a3; }
/* Fase 2AC: galería del anuncio con contador, puntos y flechas */
.gal-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 999px; background: rgba(15, 23, 42, .55); color: #fff; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.gal-flecha.izq { left: 8px; } .gal-flecha.der { right: 8px; }
.gal-contador { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(15, 23, 42, .65); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.gal-puntos { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.gal-puntos i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.gal-puntos i.on { background: #fff; width: 18px; }
/* Fase 2AC: ⭐ Selección del día */
.sel-pista { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.sel-item { position: relative; flex: 0 0 9.5rem; scroll-snap-align: start; display: flex; }
.sel-card { flex: 1; background: #fff; border: 1px solid #fde68a; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.sel-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(180, 83, 9, .15); }
.sel-foto { position: relative; height: 6.2rem; background: linear-gradient(135deg, #fef3c7, #e0e7ff); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.sel-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sel-estrella { position: absolute; top: 4px; left: 4px; font-size: 14px; background: #fff; border-radius: 999px; padding: 1px 4px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sel-txt { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sel-nombre { font-size: 12.5px; font-weight: 700; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.sel-precio { font-size: 12.5px; font-weight: 800; color: #4f46e5; }
.sel-lugar { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .sel-card { transition: none; } }
/* Fase 2AP-4b: 🔥 Promos cerca de ti */
.pi-card { border-color: #fecdd3; }
.pi-card:hover { box-shadow: 0 6px 16px rgba(225, 29, 72, .15); }
.pi-foto { background: linear-gradient(135deg, #ffe4e6, #fef3c7); }
.pi-pct { position: absolute; top: 5px; right: 5px; z-index: 1; background: #e11d48; color: #fff; font-size: 11.5px; font-weight: 900; border-radius: 8px; padding: 1px 6px; }
.pi-precio { color: #be123c; }
.pi-precio s { color: #94a3b8; font-weight: 600; font-size: 11px; }
.pi-plazo { font-size: 10.5px; color: #be123c; font-weight: 700; }
/* Fase 2AC: lista de palabras prohibidas */
.pp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
.pp-chip.revisar { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.pp-chip.apagada { opacity: .5; text-decoration: line-through; }
.pp-chip button { font-size: 11px; width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.8); }
.pp-chip button:hover { background: #fff; }

/* ===== Logo Merkap (fase 2AD): saluda al abrir y se queda quieto ===== */
/* Cada página: un saludo corto (0,9 s). La PRIMERA vez que alguien entra a Merkap: una entrada más vistosa (1,8 s). Nunca se repite en bucle. */
.marca-ico { animation: marca-saludo .9s cubic-bezier(.3,1.4,.5,1) .15s 1 backwards; transform-origin: 50% 70%; }
html.marca-primera .marca-ico { animation: marca-entrada 1.8s cubic-bezier(.3,1.4,.5,1) .2s 1 backwards; }
html.marca-primera .marca-txt { animation: marca-texto .8s ease-out .5s 1 both; }
@keyframes marca-saludo {
  0% { transform: scale(.92) rotate(-7deg); }
  35% { transform: scale(1.08) rotate(6deg); }
  60% { transform: scale(1) rotate(-3deg); }
  80% { transform: rotate(1.5deg); }
  100% { transform: none; }
}
@keyframes marca-entrada {
  0% { transform: scale(.2) rotate(-30deg); opacity: 0; }
  35% { transform: scale(1.18) rotate(10deg); opacity: 1; }
  50% { transform: scale(.96) rotate(-8deg); }
  62% { transform: scale(1.04) rotate(6deg); }
  74% { transform: rotate(-4deg); }
  86% { transform: rotate(2deg); }
  100% { transform: none; }
}
@keyframes marca-texto { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .marca-ico, html.marca-primera .marca-ico, html.marca-primera .marca-txt { animation: none; } }
.sel-quitar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; background: rgba(15,23,42,.7); color: #fff; font-size: 13px; font-weight: 700; z-index: 2; }
.sel-quitar:hover { background: #dc2626; }
.sel-chip { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.sel-chip.ahora { background: #e0e7ff; color: #3730a3; } .sel-chip.fijo { background: #fef3c7; color: #92400e; } .sel-chip.fuera { background: #fee2e2; color: #991b1b; }

/* Fase 2AF: el logo es una imagen editable (oficial o de temporada) con los mismos movimientos */
img.marca-ico { object-fit: contain; display: block; }
img.marca-ico.recortar { object-fit: cover; border-radius: 24%; }
.marca-ico.sin-anim, html.marca-primera .marca-ico.sin-anim { animation: none !important; }
.logo-vista { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.logo-vista-barra { display: inline-flex; align-items: center; gap: .42em; background: #4f46e5; color: #fff; font-size: 1.5rem; padding: 10px 16px; border-radius: 14px; }
.logo-vista-barra .marca-ico { width: 1.6em; height: 1.6em; }
.logo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px; }
.logo-mini { width: 52px; height: 52px; object-fit: contain; background: #4f46e5; border-radius: 10px; padding: 4px; flex: none; }
.logo-mini.recortar { object-fit: cover; padding: 0; border-radius: 24%; }

/* ===== Fase 2AH: estado del horario (abierto / cierra pronto / abre pronto / cerrado) ===== */
.badge-horario { display: inline-flex; align-items: center; gap: .25rem; font-size: 11px; font-weight: 800; padding: .125rem .5rem; border-radius: 9999px; white-space: nowrap; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.badge-horario.hz-abierto { background: #dcfce7; color: #166534; }
.badge-horario.hz-cierra { background: #ffedd5; color: #9a3412; }
.badge-horario.hz-abre { background: #fef9c3; color: #854d0e; }
.badge-horario.hz-cerrado { background: #f1f5f9; color: #475569; }
.badge-horario.hz-cierra { animation: hz-pulso 1.6s ease-in-out infinite; }
@keyframes hz-pulso { 50% { box-shadow: 0 0 0 4px rgb(251 146 60 / .28); } }
@media (prefers-reduced-motion: reduce) { .badge-horario.hz-cierra { animation: none; } }
.linea-horario { font-size: 12px; font-weight: 700; margin-top: .125rem; }
.linea-horario.hz-abierto { color: #15803d; }
.linea-horario.hz-cierra { color: #c2410c; }
.linea-horario.hz-abre { color: #a16207; }
.linea-horario.hz-cerrado { color: #64748b; }

/* Fase 2AH: «publicado hace…» en las tarjetas de anuncios */
.chip-publicado { display: inline-flex; align-items: center; gap: .2rem; font-size: 11px; font-weight: 600; color: #64748b; }
.chip-publicado.reciente { background: #ecfdf5; color: #047857; font-weight: 800; padding: .0625rem .5rem; border-radius: 9999px; }
.foto-publicado { position: absolute; left: .5rem; bottom: 2.1rem; background: rgb(0 0 0 / .62); color: #fff; font-size: 11px; font-weight: 700; padding: .0625rem .4rem; border-radius: .375rem; }
.foto-publicado.reciente { background: #059669; }

/* ===== Fase 2AI: «Abiertos primero» en el directorio ===== */
.titulo-grupo-horario { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin: .5rem 0 -.25rem; font-size: 15px; font-weight: 800; }
.titulo-grupo-horario::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.titulo-grupo-horario .cuenta { font-weight: 600; color: #94a3b8; }
.titulo-grupo-horario.hz-abierto { color: #15803d; }
.titulo-grupo-horario.hz-abre { color: #a16207; }
.titulo-grupo-horario.hz-sin { color: #475569; }
.titulo-grupo-horario.hz-cerrado { color: #64748b; }
.tarjeta-cerrada { opacity: .78; }
.tarjeta-cerrada:hover, .tarjeta-cerrada:focus-within { opacity: 1; }

/* ===== Fase 2AJ: panel 📊 Métricas ===== */
.me-rangos { display: inline-flex; background: #e0e7ff; border-radius: .75rem; padding: 3px; }
.me-rangos button { font-size: 13px; font-weight: 700; color: #3730a3; padding: .4rem .75rem; border-radius: .6rem; }
.me-rangos button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12); color: #1e1b4b; }
.me-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: .9rem 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.me-kpi.destacado { border-color: #86efac; background: #f0fdf4; }
.me-kpi-t { font-size: 12px; font-weight: 700; color: #64748b; }
.me-kpi-v { font-size: 30px; line-height: 1.15; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.me-kpi-n { font-size: 11px; color: #64748b; margin-top: .15rem; }
.me-caja { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .04); min-width: 0; }
.me-titulo { font-size: 14px; font-weight: 800; color: #1e1b4b; margin-bottom: .6rem; }
.me-sub { font-weight: 500; color: #94a3b8; font-size: 12px; }
.me-graf svg { display: block; overflow: visible; }
.me-grid { stroke: #f1f5f9; stroke-width: 1; }
.me-base { stroke: #cbd5e1; stroke-width: 1; }
.me-eje { font-size: 10px; fill: #94a3b8; font-variant-numeric: tabular-nums; }
.me-barra:hover path { filter: brightness(1.12); }
.me-tip { position: fixed; z-index: 60; background: #0f172a; color: #fff; font-size: 12px; font-weight: 700; padding: .3rem .55rem; border-radius: .4rem; pointer-events: none; white-space: nowrap; }
.me-vacio { font-size: 13px; color: #94a3b8; padding: .5rem 0; }
.me-tabla { width: 100%; font-size: 13px; border-collapse: collapse; }
.me-tabla th { text-align: left; font-size: 11px; color: #64748b; font-weight: 700; padding: .3rem .4rem; border-bottom: 1px solid #e2e8f0; }
.me-tabla td { padding: .45rem .4rem; border-bottom: 1px solid #f1f5f9; }
.me-tabla .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-lista { list-style: none; margin: 0; padding: 0; }
.me-lista li { position: relative; display: flex; justify-content: space-between; gap: .5rem; font-size: 13px; padding: .35rem .5rem; margin-bottom: 3px; border-radius: .4rem; overflow: hidden; }
.me-lista-t, .me-lista-v { position: relative; z-index: 1; }
.me-lista-t { color: #334155; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-lista-v { font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.me-lista-b { position: absolute; left: 0; top: 0; bottom: 0; background: #eef2ff; border-radius: .4rem; }

/* ===== Fase 2AK: administrador vs moderador =====
   .solo-admin: solo lo ve el administrador · .solo-mod: solo lo ve un moderador (no admin).
   Es comodidad visual: la base de datos (SQL 38) es la que de verdad lo impide. */
html:not([data-rol="admin"]) .solo-admin { display: none !important; }
html:not([data-rol="moderador"]) .solo-mod { display: none !important; }
.propuesta-badge { display: block; margin-top: .5rem; font-size: 12px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: .6rem; padding: .4rem .6rem; }
.propuesta-badge.rechazar { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ===== Fase 2AL: +18, leyendas legales ===== */
.foto-18 { filter: blur(18px) saturate(.6); clip-path: inset(0); }
html[data-mas18="1"] .foto-18 { filter: none; clip-path: none; }
.aviso-foto-18 { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: max-content; background: rgb(15 23 42 / .78); color: #fff; font-size: 12px; font-weight: 800; padding: .3rem .7rem; border-radius: 9999px; cursor: pointer; z-index: 2; }
html[data-mas18="1"] .aviso-foto-18 { display: none; }
.modal-18 { position: fixed; inset: 0; z-index: 80; background: rgb(15 23 42 / .6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-18-caja { background: #fff; border-radius: 1.25rem; padding: 1.5rem; max-width: 22rem; width: 100%; text-align: center; box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
.leyenda-legal { font-size: 12px; font-weight: 700; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; border-radius: .6rem; padding: .45rem .6rem; margin-top: .5rem; }

/* ===== Fase 2AP · Centro de marketing ===== */
.mk-caja { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem; }
@media (min-width: 640px) { .mk-caja { padding: 1.25rem; } }
.mk-paso { display: flex; align-items: center; gap: .5rem; font-weight: 900; font-size: 1.05rem; color: #1e1b4b; margin-bottom: .75rem; }
.mk-paso > span { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #4c1d95; color: #fff; font-size: .85rem; flex: none; }
.mk-etq { display: block; font-size: .75rem; font-weight: 700; color: #64748b; }
.mk-campo { margin-top: .15rem; width: 100%; border: 1px solid #cbd5e1; padding: .6rem; border-radius: .5rem; font-weight: 400; font-size: .875rem; color: #1e293b; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-weight: 700; font-size: .85rem; padding: .55rem .85rem; border-radius: .6rem; text-decoration: none; white-space: nowrap; }
.mk-check { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #334155; }
.mk-color { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .25rem .5rem; cursor: pointer; font-weight: 600; color: #334155; }
.mk-color input { width: 1.6rem; height: 1.6rem; border: 0; padding: 0; background: none; cursor: pointer; }
.mk-version, .mk-icono { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; color: #334155; }
.mk-version[aria-pressed="true"] { background: #4c1d95; border-color: #4c1d95; color: #fff; }
.mk-icono { font-size: 1.25rem; padding: .2rem .45rem; border-radius: .6rem; line-height: 1.2; }
.mk-icono[aria-pressed="true"] { border-color: #4c1d95; box-shadow: 0 0 0 2px #c4b5fd; background: #f5f3ff; }
.mk-icono-libre { width: 3.2rem; text-align: center; font-size: 1.1rem; border: 1px dashed #94a3b8; border-radius: .6rem; padding: .2rem; }
.mk-lienzo-caja { background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 20px 20px; border-radius: .75rem; padding: .75rem; display: flex; justify-content: center; }
#mk-lienzo { max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: .5rem; box-shadow: 0 6px 24px rgba(30, 27, 75, .18); }
/* 2AP-2 · Mis campañas */
.mk-camp { border: 1px solid #e2e8f0; border-radius: .9rem; padding: .8rem; background: #fff; display: flex; flex-direction: column; gap: .5rem; }
.mk-camp.pausada { background: #f8fafc; }
.mk-camp.pausada .mk-camp-nombre { color: #64748b; }
.mk-camp.editando { border-color: #7c3aed; box-shadow: 0 0 0 2px #ddd6fe; }
.mk-camp-nombre { font-weight: 800; color: #1e1b4b; line-height: 1.2; }
.mk-camp-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; text-align: center; background: #f8fafc; border-radius: .6rem; padding: .4rem .2rem; }
.mk-camp-num b { display: block; font-size: 1.05rem; color: #312e81; }
.mk-camp-num span { font-size: .62rem; color: #64748b; font-weight: 600; line-height: 1.1; display: block; }
.mk-camp-acc { display: flex; flex-wrap: wrap; gap: .35rem; }
.mk-camp-acc button { font-size: .75rem; font-weight: 700; padding: .35rem .6rem; border-radius: .5rem; background: #f1f5f9; color: #334155; }
.mk-camp-acc button:hover { background: #e2e8f0; }
.mk-camp-acc .principal { background: #4c1d95; color: #fff; }
.mk-camp-acc .principal:hover { background: #3b0f80; }
.mk-pill { font-size: .68rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
html.abriendo-campana body { visibility: hidden; }
html.abriendo-campana::before { content: "Abriendo Merkap…"; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 18px system-ui, sans-serif; color: #4c1d95; background: #fff; z-index: 99999; }
/* 2AP-3 · Compartir (dueños) */
.cmp-color { width: 1.9rem; height: 1.9rem; border-radius: .5rem; border: 2px solid #cbd5e1; display: inline-flex; align-items: flex-end; justify-content: flex-end; padding: 3px; }
.cmp-color span { width: .7rem; height: .7rem; border-radius: 999px; display: block; }
.cmp-color[aria-pressed="true"] { box-shadow: 0 0 0 2px #c4b5fd; }
.btn-compartir-dueno { background: linear-gradient(135deg, #6d28d9, #4c1d95); color: #fff !important; }
.btn-compartir-dueno:hover { filter: brightness(1.1); }
#cmp-lienzo { max-width: 100%; max-height: 52vh; width: auto; height: auto; border-radius: .5rem; box-shadow: 0 6px 24px rgba(30, 27, 75, .18); }
#modal-compartir .grid > div { min-width: 0; }
/* 2AP-4a · Rebajas y promociones */
.rebaja-antes { text-decoration: line-through; opacity: .7; margin-right: .3rem; font-weight: 600; }
.rebaja-pct { display: inline-block; background: #dc2626; color: #fff !important; border-radius: 999px; padding: 0 .45rem; font-weight: 800; font-size: .7rem; line-height: 1.35rem; white-space: nowrap; }
.linea-promo { font-size: .75rem; color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; border-radius: .6rem; padding: .3rem .5rem; line-height: 1.35; }
.linea-promo .rebaja-pct { font-size: .65rem; line-height: 1.1rem; }
.linea-promo-plazo { color: #be123c; font-weight: 600; }
.promo-tarjeta { background: linear-gradient(135deg, #fff1f2, #fff); border: 2px solid #fda4af; border-radius: 1rem; padding: .9rem; }
.promo-titulo { font-weight: 900; color: #881337; line-height: 1.2; }
.promo-pct { background: #e11d48; color: #fff; font-weight: 900; border-radius: .6rem; padding: .15rem .5rem; font-size: .85rem; white-space: nowrap; }
.promo-ahora { font-size: 1.25rem; color: #be123c; }
.promo-resaltada { box-shadow: 0 0 0 4px #fecdd3; animation: promo-latido 1.2s ease-out 2; }   /* fase 2AP-4b */
@keyframes promo-latido { 50% { box-shadow: 0 0 0 8px #fda4af; } }
@media (prefers-reduced-motion: reduce) { .promo-resaltada { animation: none; } }
.promo-plazo { font-size: .75rem; font-weight: 700; color: #be123c; margin-top: .35rem; }
.mt-promo-ayuda { background: linear-gradient(135deg, #fff7ed, #fff1f2); border: 1px solid #fed7aa; border-radius: .9rem; padding: .8rem .9rem; }
.novedad { background: linear-gradient(135deg, #4c1d95, #6d28d9); color: #fff; border-radius: 1rem; padding: .9rem 1rem; box-shadow: 0 8px 24px rgba(76, 29, 149, .25); }
.novedad a, .novedad button { color: inherit; }

/* ===== Fase 2AR · Avisos y novedades editables ===== */
.aviso { display: flex; gap: 12px; align-items: center; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); flex-wrap: wrap; }
.aviso-cuerpo { flex: 1 1 220px; min-width: 0; }
.aviso-tit { font-weight: 900; line-height: 1.3; margin: 0; }
.aviso-txt { font-size: .875rem; margin: 2px 0 0; opacity: .92; line-height: 1.45; }
.aviso-ico { font-size: 1.8rem; line-height: 1; flex: none; }
.aviso-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: none; }
.aviso-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 800; font-size: .875rem; text-decoration: none !important; border: 0; cursor: pointer; }
.aviso-btn:hover { filter: brightness(1.08); }
.aviso-ahora { min-height: 40px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: .875rem; background: rgba(127, 127, 127, .16); color: inherit; }
.aviso-x { width: 36px; height: 36px; border-radius: 999px; background: rgba(127, 127, 127, .16); color: inherit; font-weight: 800; flex: none; }
.aviso-patro { display: inline-block; margin-left: 8px; vertical-align: middle; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(127, 127, 127, .2); }
.aviso-franja { padding: 8px 10px 8px 14px; border-radius: 12px; flex-wrap: nowrap; }
.aviso-franja .aviso-tit { font-size: .875rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-franja .aviso-cuerpo { flex: 1 1 auto; }
.aviso-franja .aviso-btn { min-height: 36px; padding: 0 12px; font-size: .8rem; }
.aviso-grande { padding: 20px 22px; border-radius: 20px; }
.aviso-grande .aviso-tit { font-size: 1.35rem; }
.aviso-grande .aviso-txt { font-size: 1rem; }
.aviso-grande .aviso-ico { font-size: 2.6rem; }
.aviso-grande .aviso-btn { min-height: 48px; padding: 0 22px; font-size: 1rem; }
.car-patro { display: inline-block; margin-left: 8px; font-size: .6rem; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; vertical-align: middle; }
/* Fase 2AP-4c: números de cada promo */
.promo-numeros { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .75rem; color: #334155; background: #f8fafc; border-radius: .6rem; padding: .35rem .6rem; }
.promo-fin { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: .9rem; padding: .7rem .9rem; font-size: .85rem; line-height: 1.45; margin-bottom: .6rem; }

/* Fase 2AS: «Ordenar por» visible */
.ordenar-caja { display: flex; align-items: center; gap: 8px; }
.ordenar-etq { font-size: 12px; font-weight: 700; color: #64748b; white-space: nowrap; }

/* ===== Fase 2AT · Mis anuncios (página propia) ===== */
.ma-atajo { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px 12px; text-decoration: none; color: #1e1b4b; min-height: 44px; }
.ma-atajo:hover { border-color: #a5b4fc; box-shadow: 0 2px 8px rgba(79, 70, 229, .08); }
.ma-atajo span { font-size: 1.25rem; line-height: 1; }
.ma-atajo b { font-size: .85rem; }
.ma-atajo small { font-size: .72rem; color: #64748b; }
.ma-herr { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; align-items: center; }
.ma-b { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: .8rem; font-weight: 700; text-decoration: none !important; }
.ma-b-violeta { background: #ede9fe; color: #5b21b6; } .ma-b-rosa { background: #ffe4e6; color: #9f1239; }
.ma-b-indigo { background: #e0e7ff; color: #3730a3; } .ma-b-gris { background: #f1f5f9; color: #334155; } .ma-b-rojo { background: #fee2e2; color: #b91c1c; }
.ma-b:hover { filter: brightness(.96); }
/* M-0 · números de cada anuncio (Mis anuncios) */
.ma-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 12px 10px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 8px 4px; }
.ma-num { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; line-height: 1.15; }
.ma-num b { font-size: .95rem; font-weight: 800; color: #1e1b4b; white-space: nowrap; }
.ma-num span { font-size: .68rem; color: #475569; margin-top: 2px; }
.ma-num small { font-size: .62rem; color: #047857; font-weight: 600; margin-top: 2px; }
.ma-consejo { margin: 0 12px 10px; font-size: .78rem; color: #78350f; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 6px 10px; }
.ma-resumen { background: #fff; border: 1px solid #e0e7ff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(30, 27, 75, .05); }
.ma-resumen-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ma-resumen-tit { font-weight: 800; color: #312e81; font-size: .95rem; }
.ma-resumen-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 1 1 340px; }
.ma-resumen-cifra { display: flex; flex-direction: column; align-items: center; text-align: center; background: #eef2ff; border-radius: 12px; padding: 6px 4px; min-width: 0; line-height: 1.15; }
.ma-resumen-cifra b { font-size: 1.1rem; font-weight: 900; color: #312e81; white-space: nowrap; }
.ma-resumen-cifra span { font-size: .7rem; color: #3730a3; margin-top: 2px; }
.ma-resumen-cifra small { font-size: .62rem; color: #047857; font-weight: 600; margin-top: 2px; }
.ma-que-es { margin-top: 8px; font-size: .78rem; color: #475569; }
.ma-que-es summary { cursor: pointer; color: #4f46e5; font-weight: 600; list-style: none; display: inline-block; min-height: 32px; line-height: 32px; }
.ma-que-es summary::-webkit-details-marker { display: none; }
.ma-que-es p { margin-top: 4px; background: #f8fafc; border-radius: 10px; padding: 8px 10px; }
.ma-nota { font-size: .75rem; color: #64748b; flex: 1 1 160px; }
/* Fase 2AT: con «🏪 Mi tienda» arriba, en celular angosto todo cabe en una fila */
@media (max-width: 440px) {
  #encabezado.con-tienda #btn-publicar-header { padding-left: .55rem; padding-right: .55rem; }
  #encabezado.con-tienda .enc-acciones { gap: .25rem !important; }
}
@media (max-width: 380px) {
  #encabezado.con-tienda .enc-nombre { display: none; }
  #encabezado.con-tienda .marca-txt { font-size: 1.15rem; }
}

/* ===== Fase 2AO · ⓘ «¿Por qué veo este orden?» ===== */
.orden-info { position: relative; display: inline-block; flex: none; }
.orden-info summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid #a5b4fc; color: #4338ca; background: #eef2ff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.orden-info summary::-webkit-details-marker { display: none; }
.orden-info[open] summary { background: #4338ca; color: #fff; }
.orden-info-txt { position: absolute; right: 0; top: 34px; z-index: 60; width: min(300px, 80vw); background: #fff; color: #334155; border: 1px solid #c7d2fe; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; font-weight: 500; line-height: 1.45; box-shadow: 0 10px 24px rgba(15, 23, 42, .15); text-align: left; white-space: normal; }
.mt-ficha { font-size: .85rem; line-height: 1.45; margin-top: .5rem; padding: .55rem .75rem; border-radius: .6rem; background: #eef2ff; color: #312e81; border: 1px solid #c7d2fe; }
.mt-ficha.completa { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }
/* Fase 2AV · buscador del directorio: 🔍, ✕, ejemplos y pegado arriba al bajar */
.busca-sitio { margin-bottom: .5rem; }
.busca-co-in { position: relative; }
.busca-co-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; }
.busca-co-input { width: 100%; border: 2px solid #c7d2fe; border-radius: 14px; padding: 12px 96px 12px 42px; font-size: 16px; background: #fff; box-shadow: 0 1px 2px rgba(30, 27, 75, .06); -webkit-appearance: none; appearance: none; }
.busca-co-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.busca-co-input::placeholder { color: #64748b; }
.busca-co-input::-webkit-search-cancel-button { display: none; }
.busca-co-x { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: #f1f5f9; color: #475569; font-weight: 700; font-size: 14px; }
.busca-co-x:hover { background: #e2e8f0; }
.busca-co-ir { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 40px; width: 46px; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 18px; }
.busca-co-ir:hover { background: #4338ca; }
.busca-ejemplos { font-size: .75rem; color: #64748b; margin: 0 2px .65rem; line-height: 1.9; }
.busca-ejemplos button { color: #3730a3; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; }
.busca-co.fija { position: fixed; top: 0; left: 0; right: 0; z-index: 45; padding: 8px max(16px, calc((100vw - 72rem) / 2 + 16px)); background: rgba(248, 250, 252, .97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(30, 27, 75, .08); animation: busca-baja .18s ease-out; }
@keyframes busca-baja { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .busca-co.fija { animation: none; } }
/* Fase 2AW · directorio: sellos en ⓘ y las dos invitaciones lado a lado */
.sellos-info summary { display: inline-flex; align-items: center; min-height: 32px; color: #4f46e5; font-weight: 600; font-size: .875rem; cursor: pointer; list-style: none; }
.sellos-info summary::-webkit-details-marker { display: none; }
.sellos-info[open] summary { color: #3730a3; }
.sellos-info p { font-size: .85rem; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; margin-top: 4px; }
.invita-co { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 768px) { .invita-co { max-width: 640px; } }
.invita-co-t { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 10px 12px; text-decoration: none !important; box-shadow: 0 1px 3px rgba(30, 27, 75, .06); transition: border-color .15s, box-shadow .15s; }
.invita-co-t:hover { border-color: #a5b4fc; box-shadow: 0 3px 10px rgba(79, 70, 229, .1); }
.invita-co-ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 2px; }
.invita-co-t b { font-size: .875rem; line-height: 1.2; color: #1e1b4b; }
.invita-co-t small { font-size: .72rem; line-height: 1.3; color: #64748b; }
.invita-co-ir { font-size: .8rem; font-weight: 800; margin-top: auto; padding-top: 4px; }
/* Fase 2AW.1 · al buscar, el «N comercios» brilla un momento para que se vea el resultado */
.co-contador-brillo { animation: co-brillo 1.4s ease-out; border-radius: 8px; }
@keyframes co-brillo { 0%, 35% { background: #fef08a; box-shadow: 0 0 0 6px #fef08a; } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .co-contador-brillo { animation: none; } }
/* Fase 2AW.2 · píldora «⬇ Ver N comercios» cuando los resultados están más abajo */
.co-pildora { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 85; background: #4f46e5; color: #fff; font-weight: 800; font-size: .9rem; padding: 10px 18px; min-height: 44px; border-radius: 999px; box-shadow: 0 8px 22px rgba(49, 46, 129, .35); white-space: nowrap; animation: co-pildora-entra .25s ease-out, co-pildora-salta 1.6s ease-in-out .4s 3; }
.co-pildora:hover { background: #4338ca; }
@media (min-width: 1024px) { .co-pildora { bottom: 24px; } }
@keyframes co-pildora-entra { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes co-pildora-salta { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
@media (prefers-reduced-motion: reduce) { .co-pildora { animation: none; } }
/* Fase 2AX · ejemplos del buscador que rotan según la hora */
.busca-ejemplos-tit { font-weight: 600; color: #64748b; }
.busca-ejemplos button { transition: opacity .25s ease, transform .25s ease; display: inline-block; }
.busca-ejemplos button.ej-sale { opacity: 0; transform: translateY(-3px); }
.busca-ejemplos button.ej-entra { animation: ej-entra .3s ease-out; }
@keyframes ej-entra { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .busca-ejemplos button { transition: none; } .busca-ejemplos button.ej-entra { animation: none; } }
/* Fase 2AZ · pie de página de confianza (el mismo en todas las páginas públicas) */
.pie-merkap { background: #1e1b4b; color: #c7d2fe; margin-top: 2.5rem; }
.pie-in { max-width: 72rem; margin: 0 auto; padding: 28px 16px 22px; }
.pie-marca .marca { display: inline-flex; color: #fff; font-weight: 900; font-size: 1.25rem; text-decoration: none; }
.pie-marca p { font-size: .85rem; line-height: 1.5; margin-top: 8px; max-width: 30rem; color: #c7d2fe; }
.pie-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 22px; }
.pie-cols h2 { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.pie-cols a { display: block; color: #c7d2fe; font-size: .9rem; padding: 6px 0; text-decoration: none; }
.pie-cols a:hover { color: #fff; text-decoration: underline; }
.pie-final { border-top: 1px solid rgba(199, 210, 254, .18); margin-top: 22px; padding-top: 14px; font-size: .75rem; line-height: 1.6; color: #a5b4fc; }
.pie-final a { color: #c7d2fe; text-decoration: underline; }
@media (min-width: 768px) { .pie-in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 32px; } .pie-cols { grid-template-columns: repeat(3, 1fr); margin-top: 0; } .pie-final { grid-column: 1 / -1; } }
@media (max-width: 767px) { .pie-con-barra { padding-bottom: 88px; } }
/* ===== Fase V-2a · ficha de la tienda «tipo app» (solo estilo: nada se quitó) ===== */
.ti { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.t-cabecera { position: relative; margin-bottom: 40px; }
.t-portada { background: linear-gradient(135deg, #a5b4fc, #c7d2fe 45%, #fbcfe8); }
.t-portada-vacia { color: rgba(55, 48, 163, .45); }
.t-portada-vacia .ti { width: 38px; height: 38px; stroke-width: 1.6; }
.t-portada:has(img) .t-portada-vacia { display: none; }
.t-avatar { position: absolute; left: 14px; bottom: -32px; width: 76px; height: 76px; border-radius: 22px; background: #fff; border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(30, 27, 75, .16); display: flex; align-items: center; justify-content: center; font-size: 38px; z-index: 2; }
.t-cabecera:has(#t-miniaturas) { margin-bottom: 12px; }
#t-miniaturas { padding-left: 100px; min-height: 52px; }
.t-datos h1 { letter-spacing: -.02em; line-height: 1.15; }
.t-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.t-chips > span, .t-chips > a { font-size: .75rem; }
.t-chip-calif { display: inline-flex; align-items: center; gap: 4px; background: #fef9c3; border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.t-chip-calif .text-indigo-600 { color: #854d0e !important; }
.t-chips:has(#t-aviso-sello:not(.hidden)) #t-sello { display: none; }   /* el sello sale una sola vez: en el plegable */
.t-sello-plegable .aviso-plegable summary { display: inline-flex; align-items: center; gap: 6px; background: #dcfce7; color: #166534; border-radius: 999px; padding: 4px 6px 4px 11px; font-size: .78rem; line-height: 1.25; }
.t-sello-plegable .aviso-plegable summary b { font-weight: 700; }
.t-sello-plegable .aviso-plegable .ico-info { width: 18px; height: 18px; font-size: 10px; }
.t-sello-plegable:has(details[open]) { flex-basis: 100%; }
.t-sello-plegable .aviso-detalle { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; border-radius: 12px; padding: 10px 12px; font-size: .82rem; line-height: 1.5; }
.t-info { margin-top: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; font-size: .9rem; color: #334155; }
.t-info > div:not(.hidden) { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.t-info > div + div { border-top: 1px solid #f1f5f9; }
.t-info .ti { color: #6366f1; }
.t-info span { flex: 1; min-width: 0; }
.t-info-mapa { color: #4f46e5; font-weight: 700; font-size: .78rem; white-space: nowrap; }
body:has(#t-mapa-caja.hidden) .t-info-mapa { display: none; }
.t-acciones { display: flex; gap: 8px; margin-top: 14px; }
.t-accion { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px 4px; font-size: .75rem; font-weight: 700; color: #334155; text-decoration: none !important; }
.t-accion.hidden { display: none; }
.t-accion .ti { width: 21px; height: 21px; }
.t-accion:hover { border-color: #a5b4fc; }
.t-accion-wa { background: #16a34a; border-color: #16a34a; color: #fff !important; }
.t-accion-wa:hover { background: #15803d; border-color: #15803d; }
.t-titulo { display: flex; align-items: center; gap: 7px; font-size: 1.125rem; font-weight: 900; color: #1e1b4b; }
.t-titulo.text-rose-700 { color: #be123c; }
.t-titulo .ti { width: 20px; height: 20px; }
.t-enlace-mini { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: #4f46e5; white-space: nowrap; }
.t-enlace-mini.hidden { display: none; }
.t-enlace-mini .ti { width: 14px; height: 14px; }
.t-modo:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; }
.t-seg { display: inline-flex; background: #eef2ff; border-radius: 12px; padding: 3px; gap: 3px; }
.t-seg label { padding: 7px 12px; border-radius: 9px; font-weight: 700; color: #3730a3; cursor: pointer; }
.t-seg input { position: absolute; opacity: 0; pointer-events: none; }
.t-seg label:has(input:checked) { background: #fff; box-shadow: 0 1px 3px rgba(30, 27, 75, .18); }
.t-seg label:has(input:focus-visible) { outline: 2px solid #6366f1; outline-offset: 1px; }
.t-agregar { font-size: .78rem; font-weight: 800; background: #eef2ff; color: #3730a3; border-radius: 10px; padding: 8px 12px; }
.t-agregar:hover { background: #e0e7ff; }
.t-enlaces-final { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.t-boton-suave { flex: 1 1 160px; display: flex; align-items: center; justify-content: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 10px 12px; font-size: .78rem; font-weight: 700; color: #475569; text-decoration: none !important; text-align: left; }
.t-boton-suave:hover { border-color: #a5b4fc; color: #3730a3; }
.t-boton-reportar:hover { border-color: #fca5a5; color: #b91c1c; }
.t-boton-suave .ti { width: 16px; height: 16px; }
.t-escudo { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; font-size: .78rem; line-height: 1.5; color: #475569; }
.t-escudo .ti { color: #4f46e5; width: 20px; height: 20px; }
#burbuja-reclamar .badge-reclamar { box-shadow: 0 0 0 5px rgba(250, 204, 21, .3), 0 8px 18px rgba(0, 0, 0, .18); }
/* ===== Fase V-2b · tarjeta de comercio del inicio (foto a la izquierda, ❤️, «⋯») ===== */
.tc { position: relative; padding: 12px; }
.tc-cuerpo { display: flex; gap: 12px; }
.tc-foto { position: relative; width: 84px; height: 84px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #e0e7ff, #f8fafc 60%, #fce7f3); display: flex; align-items: center; justify-content: center; font-size: 36px; }
.tc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-info { flex: 1; min-width: 0; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tc-fav { position: absolute; top: 8px; right: 8px; z-index: 11; width: 36px; height: 36px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.tc-fav:hover { border-color: #fda4af; }
.tc-detalle { margin-top: 10px; flex: 1 1 auto; }   /* V-2d: los botones quedan alineados abajo en la cuadrícula */
.tc-toca { margin-top: 8px; font-size: .75rem; font-weight: 700; color: #4f46e5; background: #eef2ff; border-radius: 10px; padding: 6px 10px; }
.linea-promo-etq { font-weight: 900; color: #be123c; text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; background: #ffe4e6; border-radius: 6px; padding: 1px 5px; }
.tc-acciones { position: relative; z-index: 10; display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.tc-b { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 11px; font-size: .8rem; font-weight: 800; text-decoration: none !important; white-space: nowrap; }
.tc-b .ti { width: 16px; height: 16px; }
.tc-b-wa { background: #16a34a; color: #fff !important; } .tc-b-wa:hover { background: #15803d; }
.tc-b-suave { background: #eef2ff; color: #3730a3 !important; } .tc-b-suave:hover { background: #e0e7ff; }
.tc-mas { position: relative; flex: 0 0 44px; }
.tc-b-mas { width: 44px; background: #f1f5f9; color: #334155; list-style: none; cursor: pointer; }
.tc-b-mas::-webkit-details-marker { display: none; }
.tc-mas[open] .tc-b-mas { background: #e2e8f0; }
.tc-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 190px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 28px rgba(15, 23, 42, .18); padding: 6px; z-index: 30; }
.tc-menu-op { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .85rem; font-weight: 700; color: #334155; text-decoration: none !important; }
.tc-menu-op:hover { background: #f1f5f9; }
.tc-menu-op .ti { width: 17px; height: 17px; color: #6366f1; flex-shrink: 0; }
/* Fase V-2d: el menú también tiene «Actualizar o retirar» y «Reportar» (directorio y búsqueda) */
button.tc-menu-op { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
.tc-menu { min-width: 230px; }
.tc-menu-rojo { color: #b91c1c; } .tc-menu-rojo .ti { color: #dc2626; } .tc-menu-rojo:hover { background: #fef2f2; }
.tc-chips .badge-vecinos, .tc-chips .badge-modo { font-size: 11px; }
.tc-aviso { font-size: 11px; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 4px 8px; margin-top: 2px; }
/* ===== Fase V-3 · ficha del anuncio: confianza primero (solo estilo y orden; nada se quitó) ===== */
.panel-dueno { background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; border-radius: 16px; padding: 10px 12px 4px; margin-bottom: 12px; }
.panel-dueno.hidden { display: none; }
.panel-dueno-tit { font-size: .75rem; font-weight: 800; color: #5b21b6; margin-bottom: 8px; }
.panel-dueno-botones { display: flex; flex-wrap: wrap; gap: 0 8px; }
.panel-dueno-botones > * { flex: 1 1 140px; }
.panel-admin { background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 14px; padding: 8px 10px; align-items: center; }
.panel-admin-tit { width: 100%; font-size: .72rem; font-weight: 800; color: #92400e; }
#anuncio-titulo { letter-spacing: -.01em; line-height: 1.2; }
.vendedor-caja { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); border-radius: 16px !important; }
.anuncio-seguro { display: flex; gap: 10px; align-items: flex-start; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; border-radius: 14px; padding: 10px 12px; font-size: .82rem; line-height: 1.45; }
.anuncio-seguro .ti { color: #15803d; width: 20px; height: 20px; margin-top: 1px; }
.anuncio-seguro a { text-decoration: underline; font-weight: 700; }
.ayuda-llegar:not(.hidden) { display: block; font-size: .85rem; line-height: 1.45; color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: 10px 12px; }
.anuncio-reportar { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 9px 14px; font-size: .8rem; font-weight: 700; color: #475569; }
.anuncio-reportar:hover { border-color: #fca5a5; color: #b91c1c; }
.anuncio-reportar .ti { width: 16px; height: 16px; }
.anuncio-h2 { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 800; color: #1e1b4b; margin-bottom: .5rem; }
.anuncio-h2 .ti { width: 20px; height: 20px; color: #4f46e5; }
/* Fase V-2c · logo de la tienda */
.t-avatar { overflow: hidden; }
.t-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.gf-logo .gf-grid { grid-template-columns: repeat(auto-fill, 96px); }
.gf-logo .gf-item { border-radius: 20px; }

/* ===== Fase V-4 · Tarjeta de anuncio «tipo marketplace» (nada se quitó) ===== */
.ta { position: relative; }
.ta .ti { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ta-fav { position: absolute; top: 8px; right: 8px; z-index: 10; width: 36px; height: 36px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, .14); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ta-fav:hover { border-color: #fda4af; }
.ta .foto-publicado { top: 8px; bottom: auto; left: 8px; border-radius: 999px; padding: 2px 8px; background: rgb(15 23 42 / .62); backdrop-filter: blur(4px); }
.ta .foto-publicado.reciente { background: #059669; }
.ta-rebaja { position: absolute; left: 8px; bottom: 8px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; }
.ta-nfotos { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgb(15 23 42 / .62); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ta-nfotos .ti { width: 12px; height: 12px; }
.ta-cuerpo { padding: 12px 14px 14px; }
.ta-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ta-precio b { font-size: 1.3rem; font-weight: 900; color: #0f172a; letter-spacing: -.02em; line-height: 1.2; }
.ta-precio s { font-size: .8rem; color: #94a3b8; }
.ta-tipo-precio { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: #f1f5f9; color: #475569; }
.ta-tipo-precio.negociable { background: #fef9c3; color: #854d0e; }
.ta-titulo { font-size: .95rem; font-weight: 800; line-height: 1.25; color: #0f172a; margin-top: 2px; }
.ta-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; font-size: 12px; color: #64748b; }
.ta-meta span { display: inline-flex; align-items: center; gap: 3px; }
.ta-meta .ti { color: #6366f1; }
.ta-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ta .det-chips { margin-top: 6px; }
.ta-toca { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 800; color: #4f46e5 !important; background: #eef2ff; border-radius: 10px; padding: 7px 10px; text-decoration: none !important; }
.ta-toca:hover { background: #e0e7ff; }
.ta-acciones { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.ta-acciones [data-contacto="whatsapp"] { background: #16a34a; font-weight: 800; }
.ta-acciones [data-contacto="whatsapp"]:hover { background: #15803d; }
.ta-b-mapa { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 12px; background: #f1f5f9; color: #334155; font-size: .8rem; font-weight: 800; }
.ta-b-mapa:hover { background: #e2e8f0; }
.ta-b-mapa .ti { width: 16px; height: 16px; color: #6366f1; }
.ta .btn-ver-anuncio { border-width: 1px; }
.ta-panel-dueno { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px; padding: 8px; }
.ta-panel-dueno > span { flex: 1; font-size: 11px; font-weight: 800; color: #6d28d9; white-space: nowrap; }
.ta-panel-dueno .btn-editar-mio { background: #7c3aed; color: #fff; border: 0; }
.ta-panel-dueno .btn-editar-mio:hover { background: #6d28d9; }
.ta-panel-admin { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff7ed; border: 1px dashed #fdba74; border-radius: 12px; padding: 8px; }
.ta-panel-admin > span { flex: 1; font-size: 11px; font-weight: 800; color: #9a3412; white-space: nowrap; }

/* V-4.1: «¿Cómo pedir?» en los productos de la tienda */
.t-como-pedir { margin-top: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: 10px 12px; font-size: 12.5px; color: #14532d; }
.t-como-pedir ol { margin: 6px 0 4px 18px; list-style: decimal; display: grid; gap: 3px; }
.t-como-pedir p { font-size: 11.5px; color: #166534; }
.t-chip-agregar { display: inline-block; background: #4f46e5; color: #fff; font-weight: 800; font-size: 11px; border-radius: 999px; padding: 0 8px; }

/* ===== Fase V-4b · Tarjeta de anuncio compacta (~30 % más baja; la foto no se achica; nada se quitó) ===== */
.ta-cinta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; color: #fff; font-size: 11px; font-weight: 800; padding: 5px 4px; background: linear-gradient(0deg, rgba(30, 27, 75, .88), rgba(30, 27, 75, .5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-rebaja, .ta-nfotos { bottom: 30px; z-index: 2; }
.ta-rebaja s { font-weight: 600; opacity: .85; margin-left: 2px; }
.ta-antes { display: none; font-size: 10.5px; color: #94a3b8; }
.ta-cuerpo { padding: 9px 11px 11px; }
.ta-precio { align-items: center; gap: 2px 6px; }
.ta-precio b { font-size: 1.08rem; }
.ta-tipo-precio { font-size: 10px; padding: 1px 6px; }
.ta-titulo { font-size: .85rem; }
.ta-meta { gap: 1px 8px; margin-top: 3px; font-size: 11px; white-space: nowrap; }   /* si no cabe, baja de línea: la fecha nunca se corta */
.ta-fila { display: flex; gap: 4px; margin-top: 5px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.ta-fila::-webkit-scrollbar { display: none; }
.ta-fila > span { flex-shrink: 0; font-size: 10px !important; padding: 1px 7px !important; border-radius: 999px; font-weight: 700; }
.ta-sub { background: #eef2ff; color: #4338ca; }
.ta-desc { font-size: 12px; color: #475569; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-acciones { margin-top: 8px; padding-top: 0; border-top: 0; }
.ta-acciones > .flex { gap: 6px; }
.ta-acciones [data-contacto] { height: 34px; padding-top: 0; padding-bottom: 0; border-radius: 10px; font-size: 12.5px; }
.ta-acciones [data-contacto="llamar"] { width: 38px; padding: 0; flex: 0 0 38px; }
.ta-b-mapa { width: 38px; padding: 0; justify-content: center; border-radius: 10px; flex: 0 0 38px; }
.ta-ver { margin-top: 6px; padding: 5px 4px; font-size: 12px; border-width: 1px; }
/* B: «Todos los anuncios» y el perfil del vendedor en 2 columnas en el celular */
@media (max-width: 639px) {
  .rejilla-anuncios .ta-cuerpo { padding: 8px 8px 9px; }
  .rejilla-anuncios .ta-precio b { font-size: 1rem; }
  .rejilla-anuncios .ta-titulo { font-size: .8rem; }
  .rejilla-anuncios .ta-fav { width: 30px; height: 30px; font-size: 14px; top: 6px; right: 6px; }
  .rejilla-anuncios .ta .foto-publicado { font-size: 10px; top: 6px; left: 6px; padding: 1px 6px; }
  .rejilla-anuncios .ta-cinta { font-size: 9.5px; }
  .rejilla-anuncios .ta-rebaja s { display: none; }   /* en 2 columnas el precio anterior pasa al lado del precio */
  .rejilla-anuncios .ta-antes { display: inline; }
  .rejilla-anuncios .ta-acciones [data-contacto="whatsapp"] { font-size: 0; }
  .rejilla-anuncios .ta-acciones [data-contacto="whatsapp"]::after { content: "💬"; font-size: 15px; }
  .rejilla-anuncios .ta-acciones [data-contacto="llamar"], .rejilla-anuncios .ta-b-mapa { width: 32px; flex-basis: 32px; }
  .rejilla-anuncios .ta-ver { font-size: 11px; }
  .rejilla-anuncios .ta-pub-txt { display: none; }   /* «🕒 19 oct 2026» (el 🕒 ya dice que es la fecha de publicación) */
  .rejilla-anuncios .ta-panel-dueno, .rejilla-anuncios .ta-panel-admin { padding: 6px; gap: 4px; }
  .rejilla-anuncios .ta-panel-dueno > span, .rejilla-anuncios .ta-panel-admin > span { flex-basis: 100%; }
  .rejilla-anuncios .ta-panel-dueno button, .rejilla-anuncios .ta-panel-admin button { flex: 1; padding: 5px 4px; font-size: 11px; white-space: nowrap; }
}

/* ===== Fase 2AE · Mapa plegable en el celular + botón flotante «🗺️ Mapa» (en computador todo sigue igual) ===== */
.mapa-plegado { background: #fff; border: 1px solid #c7d2fe; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(79, 70, 229, .14); }
.mp-vista { position: relative; display: block; width: 100%; height: 104px; text-align: left; overflow: hidden; cursor: pointer;
  background:
    linear-gradient(90deg, transparent 46%, #fff 46%, #fff 50%, transparent 50%) 0 0 / 86px 100%,
    linear-gradient(0deg, transparent 44%, #fff 44%, #fff 50%, transparent 50%) 0 0 / 100% 52px,
    linear-gradient(32deg, transparent 47%, #fde68a 47%, #fde68a 52%, transparent 52%),
    linear-gradient(100deg, transparent 60%, #bfdbfe 60%, #bfdbfe 66%, transparent 66%),
    #eef2e6; }
.mp-pines { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-pin { opacity: 1; }
.mp-cae .mp-pin { animation: mpCae .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d, 0ms); }
@keyframes mpCae { from { opacity: 0; transform: translateY(-14px); } }
.mp-pin { transform-box: fill-box; }
.mp-velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255, 255, 255, .97) 30%, rgba(255, 255, 255, 0) 62%); }
.mp-pista { position: absolute; right: 10px; top: 8px; background: #facc15; color: #1e1b4b; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 3px 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.mp-cae .mp-pista { animation: mpLatido 1.6s ease-in-out 3; }
@keyframes mpLatido { 50% { transform: scale(1.08); } }
.mp-cta { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-txt b { display: block; font-size: 14px; font-weight: 900; color: #1e1b4b; }
.mp-txt small { display: block; font-size: 11px; font-weight: 600; color: #475569; }
.mp-btn { flex-shrink: 0; background: #4f46e5; color: #fff; font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 8px 12px; box-shadow: 0 3px 8px rgba(79, 70, 229, .35); }
.mp-atajos { display: flex; gap: 6px; padding: 8px 10px 10px; overflow-x: auto; scrollbar-width: none; }
.mp-atajos::-webkit-scrollbar { display: none; }
.mp-atajos button { flex-shrink: 0; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 5px 10px; background: #f1f5f9; color: #334155; }
.mp-atajos button:active { background: #e0e7ff; }
.mp-barra, .mapa-tira { display: none; }
.mp-cerrar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; font-weight: 900; font-size: 16px; box-shadow: 0 2px 6px rgba(15, 23, 42, .12); }
.mp-seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mp-seg button { flex-shrink: 0; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 8px 12px; background: #f1f5f9; color: #334155; }
.mp-seg button[aria-pressed="true"] { background: #4f46e5; color: #fff; }
.mp-resalta { animation: mpLatido .8s ease-in-out 3; box-shadow: 0 0 0 3px #facc15; }
.mapa-tira { gap: 8px; overflow-x: auto; padding: 8px 2px 2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mapa-tira::-webkit-scrollbar { display: none; }
.mt-item { flex: 0 0 172px; width: 172px; min-width: 0; overflow: hidden; scroll-snap-align: center; display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px; text-decoration: none !important; color: #0f172a; }
.mt-item.mt-activo { border-color: #4f46e5; box-shadow: 0 0 0 2px #c7d2fe; }
.mt-foto { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, #e0e7ff, #fce7f3); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mt-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-txt { min-width: 0; }
.mt-txt b { display: block; font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-txt small { display: block; font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-vacio { font-size: 12px; color: #64748b; padding: 10px; text-align: center; width: 100%; }
.fab-mapa-caja { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 95; display: none; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.fab-mapa-caja.visible { display: flex; animation: mpEntra .25s ease-out; }
@keyframes mpEntra { from { opacity: 0; transform: translateY(10px); } }
.fab-mapa { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; background: #4f46e5; color: #fff; font-weight: 900; font-size: 13.5px; border-radius: 999px; padding: 11px 15px; box-shadow: 0 6px 16px rgba(79, 70, 229, .45); }
.fab-mapa em { font-style: normal; background: #facc15; color: #1e1b4b; border-radius: 999px; padding: 1px 7px; font-size: 11.5px; }
.fab-mapa-globo { display: none; position: relative; max-width: 210px; background: #1e1b4b; color: #fff; font-size: 12px; font-weight: 700; border-radius: 11px; padding: 7px 10px; }
.fab-mapa-globo::after { content: ""; position: absolute; right: 26px; bottom: -6px; border: 6px solid transparent; border-top-color: #1e1b4b; border-bottom: 0; }
.fab-mapa-caja.con-globo .fab-mapa-globo { display: block; }
@media (prefers-reduced-motion: reduce) { .mp-cae .mp-pin, .mp-cae .mp-pista, .fab-mapa-caja.visible, .mp-resalta { animation: none; } }
@media (max-width: 1023px) {
  .mapa-panel { display: none; }
  body.mapa-abierto { overflow: hidden; }
  body.mapa-abierto .mapa-panel { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1200; border-radius: 0; border: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  body.mapa-abierto .mp-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  body.mapa-abierto .mp-cabeza { margin-bottom: 6px; }
  body.mapa-abierto .mp-cabeza h2, body.mapa-abierto #btn-ampliar-mapa, body.mapa-abierto #lbl-chk-comercios { display: none; }
  body.mapa-abierto #map, body.mapa-abierto #map.map-grande { flex: 1 1 auto; height: auto; min-height: 0; border-radius: 14px; }
  body.mapa-abierto .mp-zona { margin-top: 6px; }
  body.mapa-abierto .mapa-tira { display: flex; }
  body.mapa-abierto .mp-leyenda { margin-top: 4px; font-size: 10.5px; }
  body.mapa-abierto .mp-ayuda { display: none; }
  body.mapa-abierto .nav-inferior, body.mapa-abierto .fab-mapa-caja { display: none !important; }
}
@media (min-width: 1024px) { .fab-mapa-caja, .mapa-plegado { display: none !important; } }

/* ===== Fase 2BA · Filtros compactos (propuesta B): mismo modelo en Anuncios y Comercios ===== */
.fb-frase { font-size: .75rem; font-weight: 700; color: #64748b; margin-bottom: 8px; }
.fb-botones { display: flex; flex-wrap: wrap; gap: 5px; }
.fb-b { display: inline-flex; align-items: center; gap: 3px; min-height: 36px; border-radius: 999px; padding: 0 9px; font-size: .76rem; font-weight: 800; border: 1.5px solid #c7d2fe; background: #eef2ff; color: #3730a3; white-space: nowrap; cursor: pointer; }
.fb-b i { font-style: normal; font-size: .7rem; }
.fb-b span { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
.fb-b.fb-activo { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.fb-b.fb-abierto { box-shadow: 0 0 0 3px #fde68a; }
.fb-b.fb-mas { background: #fff; border-color: #e2e8f0; color: #334155; }
.fb-b.fb-mas.fb-activo { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.fb-b.fb-cerca { background: #4f46e5; border-color: #3730a3; color: #fff; box-shadow: 0 2px 0 #3730a3; }
.fb-b.fb-cerca[aria-pressed="true"] { background: #16a34a; border-color: #15803d; box-shadow: 0 2px 0 #166534; }
.fb-hoja { margin-top: 8px; border: 1.5px solid #c7d2fe; border-radius: 14px; padding: 10px; background: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .10); }
.fb-hoja-tit { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; font-weight: 900; color: #1e1b4b; margin-bottom: 8px; }
.fb-cerrar { width: 30px; height: 30px; border-radius: 999px; background: #f1f5f9; color: #475569; font-weight: 900; }
.fb-hoja-acc { display: flex; gap: 8px; margin-top: 12px; }
.fb-acc, .fb-acc-suave { flex: 1; min-height: 38px; border-radius: 10px; font-weight: 800; font-size: .85rem; }
.fb-acc { background: #4f46e5; color: #fff; } .fb-acc-suave { background: #f1f5f9; color: #334155; }
.fb-busca { width: 100%; height: 40px; border: 1.5px solid #c7d2fe; border-radius: 12px; padding: 0 12px; font-size: 16px; background: #fff; margin-bottom: 8px; }
.fb-busca:focus { outline: 2px solid #818cf8; outline-offset: 1px; }
.fb-ind { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .72rem; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 6px 9px; }
.fb-ind > span { flex: 1; }
.fb-ind-anu { color: #3730a3; background: #eef2ff; border-color: #c7d2fe; }
.fb-ind b { font-weight: 800; }
.fb-hoja-mas.fb-hoja { margin-top: 8px; }
.fb-ind.fb-ind-anu { display: block; }

/* En Comercios la caja de filtros va dentro de la tarjeta de la sección: sin doble borde */
#fb-comercios.fb-caja { border: 0; box-shadow: none; padding: 0; }
@media (min-width: 640px) { .fb-b { padding: 0 12px; font-size: .8rem; } }

/* ===== Importador 2.0 (admin-comercios · fase IMP-2) ===== */
.ac-paso{border:1px solid #e2e8f0;border-radius:14px;padding:10px 12px;background:#fff}
.ac-paso-t{font-size:13px;font-weight:900;color:#1e1b4b;margin-bottom:6px}
.ac-chip{font-size:12px;font-weight:700;border:1.5px solid #e2e8f0;border-radius:999px;padding:4px 10px;background:#fff;color:#334155;line-height:1.3}
.ac-chip:hover{border-color:#a5b4fc}
.ac-chip[aria-pressed="true"]{background:#4f46e5;border-color:#4f46e5;color:#fff}
.ac-mini{font-size:12px;font-weight:800;border-radius:10px;padding:5px 10px;background:#eef2ff;color:#3730a3}
.ac-mini:hover{background:#e0e7ff}
#ac-conteos>span{background:#eef2ff;border-radius:8px;padding:3px 8px}

/* ===== Fase V-5 · Barra superior «índigo pulido» (solo estilo: nada se quitó) ===== */
/* Todas las páginas: el mismo morado con profundidad y una línea fina que separa la barra del contenido */
body > header.bg-indigo-600 {
  background-image: linear-gradient(135deg, #3730a3 0%, #4f46e5 58%, #6366f1 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 18px rgba(30, 27, 75, .22);
}
/* Botones de la barra en «cristal»: misma altura y mismo estilo */
body > header.bg-indigo-600 a.bg-white\/20, body > header.bg-indigo-600 button.bg-white\/20 {
  border: 1px solid rgba(255, 255, 255, .24); background-color: rgba(255, 255, 255, .14); min-height: 40px;
  display: inline-flex; align-items: center; gap: .35rem;
}
body > header.bg-indigo-600 a.bg-white\/20.hidden, body > header.bg-indigo-600 button.bg-white\/20.hidden { display: none; }
body > header.bg-indigo-600 a.bg-white\/20:hover, body > header.bg-indigo-600 button.bg-white\/20:hover { background-color: rgba(255, 255, 255, .24); }

/* Inicio: íconos de línea, avatar con inicial y botón amarillo con relieve */
.enc-btn {
  box-sizing: border-box; height: 40px; min-width: 40px; border-radius: 999px; padding: 0 .8rem; gap: .4rem; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .875rem; white-space: nowrap; text-decoration: none;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
  transition: background-color .15s ease, transform .1s ease; position: relative; -webkit-tap-highlight-color: transparent;
}
.enc-btn:not(.hidden) { display: inline-flex; align-items: center; justify-content: center; }
.enc-btn:hover { background: rgba(255, 255, 255, .24); }
.enc-btn:active { transform: scale(.96); }
.enc-btn:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.enc-svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enc-btn-tienda { padding: 0 .65rem; }
.enc-punto { position: absolute; top: 2px; left: 26px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #4f46e5; }
/* Cuenta: visitante = «Entrar» con borde; con sesión = avatar amarillo con la inicial + nombre + ▾ */
#encabezado:not(.con-sesion) .enc-cuenta { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); }
#encabezado.con-sesion #acciones-encabezado #btn-auth { padding: 0 .6rem 0 .25rem; gap: .35rem; }
.enc-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: #fde047; color: #3730a3; font-weight: 900; font-size: .9rem; line-height: 1;
}
.enc-nombre { overflow: hidden; text-overflow: ellipsis; max-width: 7rem; }
.enc-chev { font-size: .7rem; opacity: .85; }
.enc-cta { box-sizing: border-box; height: 40px; box-shadow: 0 3px 0 #ca8a04 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.enc-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #ca8a04 !important; }
/* Buscador: lupa a la izquierda y sombra */
.enc-busca input { box-shadow: 0 6px 18px rgba(30, 27, 75, .25); }
.enc-lupa {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; z-index: 1; pointer-events: none;
  fill: none; stroke: #94a3b8; stroke-width: 2.6; stroke-linecap: round;
}
/* Celulares angostos: todo en una fila sin montarse (igual que antes, con las medidas nuevas) */
@media (max-width: 440px) {
  #encabezado.con-tienda #btn-mi-tienda-enc { padding: 0; width: 38px; min-width: 38px; height: 38px; }
  #encabezado.con-tienda #acciones-encabezado #btn-auth { padding: 0 .45rem 0 .2rem; }
  #encabezado.con-tienda .enc-nombre { max-width: 3.4rem; }
  #encabezado.con-tienda .marca-txt { font-size: 1.2rem; }
}
@media (max-width: 380px) {
  #encabezado.con-tienda .enc-nombre { display: none; }
}

/* ===== Fase V-5 C · Barra superior compacta al bajar (solo celular y tableta; nada se quita) ===== */
/* Al bajar queda en una línea de ~56 px: logo + buscador + Publicar (mismo tamaño).
   Entrar / Mi tienda / cuenta siguen en la barra de abajo («Yo») y reaparecen arriba al volver al inicio. */
@media (max-width: 1023px) {
  .encabezado-app.compacto .enc-grid {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marca busca acciones";
    gap: 8px; padding-top: 8px; padding-bottom: 8px; animation: enc-compacta .22s ease;
  }
  .encabezado-app.compacto .marca-txt, .encabezado-app.compacto .enc-marca > span { display: none; }
  .encabezado-app.compacto .marca-ico { width: 34px; height: 34px; }
  .encabezado-app.compacto .enc-acciones > :not(#btn-publicar-header) { display: none !important; }
  .encabezado-app.compacto .enc-busca input { padding: .55rem 2.75rem .55rem .9rem; font-size: 16px; }
  .encabezado-app.compacto .enc-lupa { display: none; }   /* la lupa del botón amarillo basta: más espacio para escribir */
  .encabezado-app.compacto .enc-busca .btn-buscar { width: 34px; height: 34px; border-radius: 10px; }
}
@keyframes enc-compacta { from { opacity: .55; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .encabezado-app.compacto .enc-grid { animation: none; } }

/* ===== Fase V-6 A · Barra de abajo «pastilla activa» (solo celular y tableta; nada se quitó) ===== */
.ni-tab { gap: 3px; }
.ni-pill {
  position: relative; width: min(56px, 100%); height: 30px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; transition: background-color .2s ease;
}
.ni-tab[aria-current="page"] { color: #4338ca; font-weight: 800; }
.ni-tab[aria-current="page"] .ni-pill { background: #e0e7ff; }
.ni-tab[aria-current="page"] svg { fill: #c7d2fe; }
.ni-av {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fde047; color: #3730a3; font-weight: 900; font-size: 13px; line-height: 1; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(30, 27, 75, .25);
}
.ni-badge {
  position: absolute; top: -5px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; border: 2px solid #fff; font-style: normal;
}
.ni-badge.hidden { display: none; }
.ni-mas {
  background: linear-gradient(135deg, #fde047, #facc15);
  box-shadow: 0 4px 0 #ca8a04, 0 8px 18px rgba(245, 158, 11, .35);
}
.ni-mas:active { transform: translateY(2px); box-shadow: 0 2px 0 #ca8a04, 0 4px 10px rgba(245, 158, 11, .3); }
@media (prefers-reduced-motion: reduce) { .ni-pill { transition: none; } }

/* V-6 · arreglo celulares de 320 px (iPhone SE viejo): «Merkap» ya no se monta sobre «Entrar» ni «Publicar» se sale */
@media (max-width: 359px) {
  .encabezado-app .marca-txt { font-size: 1.12rem; }
  .encabezado-app .enc-grid { column-gap: 6px; }
  #acciones-encabezado { gap: .25rem !important; }
  #acciones-encabezado #btn-auth { padding-left: .55rem; padding-right: .55rem; }
  #acciones-encabezado #btn-publicar-header { padding-left: .6rem; padding-right: .6rem; }
  #encabezado.con-sesion .enc-chev { display: none; }
  #encabezado.con-sesion #acciones-encabezado #btn-auth { padding: 0 .3rem; }
}

/* ===== Fase MAPA-1 · Burbujas de comercios agrupados (mismo verde azulado de sus pines) ===== */
.cl-com-caja { background: transparent !important; border: 0 !important; }
.cl-com {
  width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 3px solid #0f766e;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; gap: 1px;
  color: #134e4a; font-weight: 900; font-size: 13px; line-height: 1;
}
.cl-com span { font-size: 12px; }

/* ===== Fase RED-1 · Redes sociales y página web del comercio ===== */
.t-redes { margin-top: 12px; }
.t-redes-tit { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.t-redes-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.t-red {
  --c: #4338ca; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 6px 12px;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--c); color: var(--c); font-size: 13px; font-weight: 800;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color .15s ease;
}
.t-red:hover, .t-red:focus-visible { background: color-mix(in srgb, var(--c) 8%, #fff); }
.t-red:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
.t-red-facebook { --c: #1877f2; }
.t-red-instagram { --c: #c13584; }
.t-red-tiktok { --c: #111827; }
.t-red-web { --c: #0f766e; }
/* Campos de redes en Mi tienda y en el editor de administración */
.campo-red-mal { border-color: #f87171 !important; background: #fef2f2; }
.campo-red-estado { display: block; font-size: 11.5px; font-weight: 600; margin-top: 3px; min-height: 0; }
.campo-red-estado.ok { color: #15803d; }
.campo-red-estado.mal { color: #b91c1c; }

/* ===== Fase DR-1a · «🛍️ Mi vitrina» (Mi tienda) ===== */
.mv-ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mv-ind > div { background: #f1f5f9; border-radius: 12px; padding: 7px 4px; text-align: center; }
.mv-ind b { display: block; font-size: 1.15rem; font-weight: 900; color: #1e1b4b; line-height: 1.2; }
.mv-ind span { font-size: .66rem; font-weight: 700; color: #64748b; }
.mv-ind .ok b { color: #15803d; }
.mv-barra { height: 8px; border-radius: 9px; background: #e2e8f0; overflow: hidden; margin-top: 4px; }
.mv-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f46e5, #818cf8); transition: width .3s ease; }
.mv-lbl { font-size: .68rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.mv-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.mv-chips::-webkit-scrollbar { display: none; }
.mv-chip { flex-shrink: 0; border: 1.5px solid #e2e8f0; border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-weight: 700; color: #334155; background: #fff; white-space: nowrap; }
.mv-chip i { font-style: normal; opacity: .6; margin-left: 2px; }
.mv-chip[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.mv-chip-add { border-style: dashed; border-color: #a5b4fc; color: #4f46e5; }
.mv-fila { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #f1f5f9; }
.mv-fila.mv-apagado .mv-ft, .mv-fila.mv-apagado .mv-info b { opacity: .55; }
.mv-ft { position: relative; width: 52px; height: 52px; flex: none; border-radius: 12px; background: linear-gradient(135deg, #e0e7ff, #f1f5f9); display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: visible; }
.mv-ft img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.mv-ft em { position: absolute; right: -5px; bottom: -5px; font-style: normal; font-size: 13px; background: #fff; border-radius: 99px; padding: 0 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mv-info { flex: 1; min-width: 0; cursor: pointer; }
.mv-info b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0f172a; }
.mv-info small { font-size: .74rem; color: #64748b; }
.mv-est { display: inline-block; font-size: .64rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.mv-est-pub { background: #dcfce7; color: #166534; } .mv-est-ago { background: #fef3c7; color: #92400e; }
.mv-est-off { background: #e2e8f0; color: #475569; } .mv-est-rev { background: #ede9fe; color: #5b21b6; }
.mv-est-rojo { background: #fee2e2; color: #b91c1c; } .mv-est-pocos { background: #ffedd5; color: #9a3412; }
.mv-cant { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .74rem; color: #334155; }
.mv-cant button { width: 26px; height: 26px; border-radius: 50%; background: #eef2ff; color: #4338ca; font-weight: 900; }
.mv-sw-caja { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 52px; }
.mv-sw-caja span { font-size: .62rem; font-weight: 800; color: #64748b; }
.mv-sw { width: 40px; height: 24px; border-radius: 99px; background: #cbd5e1; position: relative; transition: background .15s; }
.mv-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.mv-sw[aria-checked="true"] { background: #4f46e5; }
.mv-sw[aria-checked="true"]::after { transform: translateX(16px); }
.mv-sw:disabled { opacity: .4; }
.mv-mas-caja { position: relative; flex: none; }
.mv-mas { width: 34px; height: 34px; border-radius: 50%; background: #f1f5f9; font-weight: 900; color: #475569; }
.mv-menu { position: absolute; right: 0; top: 38px; z-index: 30; width: 250px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 28px rgba(15,23,42,.16); padding: 4px; }
.mv-menu > button, .mv-menu-fila button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; font-size: .84rem; color: #1e293b; }
.mv-menu > button:hover, .mv-menu-fila button:hover:not(:disabled), .mv-menu-sub button:hover { background: #f1f5f9; }
.mv-menu-fila { display: flex; } .mv-menu-fila button:disabled { opacity: .35; }
.mv-menu-sub { padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .78rem; color: #64748b; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
.mv-menu-sub span { width: 100%; font-weight: 700; }
.mv-menu-sub button { border: 1px solid #e2e8f0; border-radius: 99px; padding: 3px 8px; font-size: .74rem; color: #334155; }
.mv-menu-sub button[aria-current="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.mv-rojo { color: #dc2626 !important; }
.mv-hoja { max-height: 92vh; overflow-y: auto; padding: 14px 18px 20px; }
.mv-asa { width: 40px; height: 4px; border-radius: 9px; background: #cbd5e1; margin: 0 auto 10px; }
@media (min-width: 640px) { .mv-asa { display: none; } }
.mv-campo { display: block; font-size: .72rem; font-weight: 700; color: #64748b; }
.mv-tg { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: #334155; }
.mv-tg input { margin-top: 3px; }
.mv-step { display: flex; margin-top: 2px; border: 1.5px solid #c7d2fe; border-radius: 10px; overflow: hidden; max-width: 220px; }
.mv-step button { width: 44px; font-size: 1.2rem; font-weight: 900; color: #4f46e5; background: #eef2ff; }
.mv-step input { flex: 1; min-width: 0; text-align: center; font-size: 1rem; font-weight: 800; padding: 7px 4px; color: #0f172a; }
.mv-sec { display: flex; gap: 5px; align-items: center; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 5px 6px; }
.mv-sec button { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.mv-sec button:hover:not(:disabled) { background: #f1f5f9; } .mv-sec button:disabled { opacity: .3; }
.mv-sec-emoji { width: 40px; text-align: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 2px; flex: none; }
.mv-sec-nombre { flex: 1; min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 8px; font-size: .86rem; }
.mv-sec-n { font-size: .72rem; color: #94a3b8; font-weight: 700; min-width: 16px; text-align: center; }
.mv-sec-add { border-style: dashed; border-color: #a5b4fc; }
.mv-sec .mv-sec-crear { width: auto; padding: 0 10px; background: #4f46e5; color: #fff; font-weight: 800; font-size: .8rem; }
.mv-emojis { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.mv-emojis button { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
.mv-emojis button:hover { background: #eef2ff; }

/* ===== Fase DR-1a · Tienda pública: atajos, secciones y etiquetas ===== */
.t-atajos { display: flex; gap: 6px; overflow-x: auto; margin-top: 14px; padding: 2px 0; scrollbar-width: none; }
.t-atajos::-webkit-scrollbar { display: none; }
.t-atajos a { flex-shrink: 0; font-size: .8rem; font-weight: 800; color: #4338ca; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 6px 12px; white-space: nowrap; text-decoration: none; }
.t-atajos a:hover { background: #e0e7ff; }
.t-secciones { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; overflow-x: auto; margin: 12px -4px 0; padding: 8px 4px; background: rgba(248, 250, 252, .96); backdrop-filter: blur(6px); scrollbar-width: none; }
.t-secciones::-webkit-scrollbar { display: none; }
.t-sec { flex-shrink: 0; border: 1.5px solid #e2e8f0; border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 700; color: #334155; background: #fff; white-space: nowrap; }
.t-sec i { font-style: normal; opacity: .6; margin-left: 2px; }
.t-sec[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.t-sec-tit { font-size: .95rem; font-weight: 900; color: #1e1b4b; margin-top: 6px; }
.t-etq { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.t-etq-agotado { background: #334155; color: #fff; }
.t-etq-promo { background: #ffe4e6; color: #be123c; }
.t-etq-pocos { background: #ffedd5; color: #9a3412; }

/* ===== Fase DR-1b · Cupo de vitrina (editor del administrador) ===== */
.ed-cupo-chip { font-size: .74rem; font-weight: 800; border: 1.5px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 999px; padding: 4px 10px; }
.ed-cupo-chip[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* ===== Arreglo 25 oct · Con el mapa a pantalla completa (2AE, z-index 1200) las ventanas quedaban DETRÁS:
   «Cómo llegar», registro rápido, calificar, avisos (toast) y el visor de fotos ahora salen encima ===== */
body.mapa-abierto .modal-fondo, body.mapa-abierto #modal-como-llegar, body.mapa-abierto .visor-fotos { z-index: 1300 !important; }
body.mapa-abierto [role="status"].fixed { z-index: 1310 !important; }