:root{
  --bg1:#0c172d;
  --bg2:#17356d;
  --bg3:#56c0ff;
  --sea:#ccecff;
  --foam:#56c0ff;
  --text:#e8f4ff;
  --muted:rgba(232,244,255,.76);
  --card:rgba(8,20,44,.58);
  --stroke:rgba(86,192,255,.24);
  --accent-deep:rgba(7,21,47,.95);
  --accent-blue:rgba(26,60,122,.95);
  --accent-blue-soft:rgba(26,60,122,.18);
  --accent-glow:rgba(86,192,255,.18);
  --accent-cream:rgba(204,236,255,.96);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --gold:#f0c674;
  --gold-soft:rgba(240,198,116,.16);
  --gold-line:rgba(240,198,116,.5);
  --dock-h:60px;
}

*{ box-sizing:border-box; }

/* Transicion suave entre paginas (home -> detalle -> publicar, etc). Es solo CSS:
   los navegadores que no la soportan simplemente la ignoran y navegan como siempre,
   asi que no hace falta comprobar compatibilidad ni dar alternativa. */
@view-transition{
  navigation: auto;
}

/* Reemplaza el cross-fade por defecto del navegador por un deslizamiento sutil: la
   pagina nueva entra desde la derecha mientras la vieja se desvanece hacia la izquierda,
   como en la navegacion nativa de iOS, en vez de solo cruzar opacidades. Sin efecto en
   navegadores sin soporte (Safari viejo, Firefox): navegan normal, sin transicion. */
::view-transition-old(root){
  animation: auraPageOut .28s cubic-bezier(.4,0,1,1) both;
}

::view-transition-new(root){
  animation: auraPageIn .32s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes auraPageOut{
  to{ opacity:0; transform: translateX(-16px); }
}

@keyframes auraPageIn{
  from{ opacity:0; transform: translateX(16px); }
}

@media (prefers-reduced-motion: reduce){
  @view-transition{
    navigation: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation:none;
  }
}

.icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  display:inline-block;
  vertical-align:-3px;
}

.icon-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}

.tab-icon,
.navbtn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.tab-icon .icon{ width:16px; height:16px; }
.navbtn-icon .icon{ width:24px; height:24px; }
.subtab-icon .icon{ width:16px; height:16px; }

.landing-chip{ gap:10px; }
.landing-chip-icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(86,192,255,.16);
  color:#56c0ff;
  transition:transform .2s ease;
}
.landing-chip-icon .icon{ width:18px; height:18px; }

/* Un color propio por categoria (en vez de todas azules) para que las tarjetas se
   distingan de un vistazo, como en apps tipo Uber Eats/Airbnb, en vez de verse todas
   identicas. Estos colores deben coincidir con SECTIONS[].color en app.js -- son el mismo
   color que despues se ve en el ícono y el texto de categoria dentro de esas tarjetas, y
   antes no coincidian (ej: Turismo se veia verde aqui pero rosado adentro). */
.landing-chip-icon[data-icon="landmark"]{ background:rgba(240,180,41,.18); color:#f0b429; }
.landing-chip-icon[data-icon="utensils"]{ background:rgba(245,158,11,.18); color:#f59e0b; }
.landing-chip-icon[data-icon="store"]{ background:rgba(86,192,255,.18); color:#56c0ff; }
.landing-chip-icon[data-icon="wrench"]{ background:rgba(167,139,250,.2); color:#a78bfa; }
.landing-chip-icon[data-icon="bed"]{ background:rgba(45,212,191,.2); color:#2dd4bf; }
.landing-chip-icon[data-icon="compass"]{ background:rgba(251,113,133,.2); color:#fb7185; }
.landing-chip-icon[data-icon="party"]{ background:rgba(250,204,21,.2); color:#facc15; }
.landing-chip-icon[data-icon="home"]{ background:rgba(74,222,128,.2); color:#4ade80; }
.landing-chip-icon[data-icon="cart"]{ background:rgba(34,211,238,.2); color:#22d3ee; }
.landing-chip-icon[data-icon="briefcase"]{ background:rgba(129,140,248,.2); color:#818cf8; }

.landing-chip:hover .landing-chip-icon{ transform:scale(1.08); }

.icon-btn,
.photo-remove-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@keyframes fadeSlideIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes modalBackdropIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes modalCardIn{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.item,
.subtabs-wrap,
.notice,
.error,
.success-notice{
  animation:fadeSlideIn .22s ease both;
}

.modal,
.lightbox-backdrop{
  animation:modalBackdropIn .18s ease both;
}

.modal-card,
.lightbox-shell{
  animation:modalCardIn .22s cubic-bezier(.22,1,.36,1) both;
}

.floating-help-btn,
.floating-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.floating-publish-btn.is-visible{
  gap:6px;
}

.section-focus-hero-title .icon{
  vertical-align:-4px;
}

html, body{ min-height:100%; }

html{
  background:var(--bg1);
}

body{
  margin:0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  letter-spacing:-.01em;
  background:
    radial-gradient(1200px 700px at 72% 12%, rgba(86,192,255,.14), transparent 58%),
    radial-gradient(900px 600px at 22% 24%, rgba(56,95,161,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

body.splash-lock,
body.publish-loading-lock{
  overflow:hidden;
}

.app-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(520px 520px at 50% 42%, rgba(86,192,255,.13), transparent 62%),
    linear-gradient(180deg, #03172b, #052a4f);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s cubic-bezier(.4,0,.2,1), visibility .45s ease;
}

.app-splash.is-visible{
  opacity:1;
  visibility:visible;
}

.app-splash.is-hiding{
  opacity:0;
  visibility:hidden;
}

.app-splash.is-hiding .app-splash-shell{
  transform:scale(1.03);
  filter:blur(3px);
}

/* Aviso de "sin conexion": antes, sin internet, la app se quedaba en el fondo azul
   de siempre sin ningun mensaje (parecia trabada/en blanco). Mismo lenguaje visual
   que .app-splash para que se sienta parte de la app, no un error del navegador. */
.offline-overlay{
  position:fixed;
  inset:0;
  /* Por encima de cualquier otro modal/splash/tutorial de la app (todos usan 9999 o
     menos): si no hay internet nada de eso funciona igual, asi que este aviso gana
     siempre. */
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(520px 520px at 50% 42%, rgba(86,192,255,.13), transparent 62%),
    linear-gradient(180deg, #03172b, #052a4f);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

.offline-overlay.is-visible{
  opacity:1;
  visibility:visible;
}

.offline-overlay-shell{
  display:grid;
  justify-items:center;
  gap:14px;
  text-align:center;
  max-width:300px;
}

.offline-overlay-icon{
  width:84px;
  height:84px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(240,198,116,.12);
  border:1px solid rgba(240,198,116,.4);
  color:var(--gold);
  margin-bottom:4px;
}

.offline-overlay-icon .icon{
  width:38px;
  height:38px;
}

.offline-overlay-title{
  font-size:21px;
  font-weight:800;
  color:#f4faff;
}

.offline-overlay-subtitle{
  color:#bcd9ee;
  font-size:14.5px;
  line-height:1.5;
}

.offline-overlay-retry{
  margin-top:8px;
}

.offline-overlay-retry.is-shaking{
  animation:offlineOverlayShake .4s ease;
}

@keyframes offlineOverlayShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

@media (prefers-reduced-motion: reduce){
  .offline-overlay-retry.is-shaking{ animation:none; }
}

.ad-carousel{
  position:relative;
  width:100%;
  max-width:640px;
  margin:0 auto 16px;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(86,192,255,.18);
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}

.btn-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:currentColor;
  animation:btnSpin .7s linear infinite;
  vertical-align:-2px;
}

@keyframes btnSpin{
  to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .btn-spinner{ animation:none; }
}

.ad-destination-toggle{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.ad-destination-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1.5px solid rgba(86,192,255,.22);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  font-size:14px;
}

.ad-destination-option:has(input:checked){
  border-color:rgba(86,192,255,.6);
  background:rgba(86,192,255,.08);
}

.ad-destination-option input{
  width:16px;
  height:16px;
  flex-shrink:0;
}

.ad-featured-cta-wrap{
  display:flex;
  justify-content:center;
  margin-top:10px;
}.ad-featured-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(255,159,67,.12);
  color:#ffcb8a;
  font-weight:700;
  font-size:12.5px;
  border:1px solid rgba(255,159,67,.4);
  text-decoration:none;
}

.ad-featured-cta .icon{
  width:14px;
  height:14px;
}

.ad-featured-cta:hover{
  background:rgba(255,159,67,.2);
}

.ad-featured-cta:active{
  transform:scale(.96);
}

.ad-carousel-label{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(40,28,6,.62);
  border:1px solid rgba(240,198,116,.7);
  backdrop-filter:blur(4px);
  color:#ffe3a3;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  letter-spacing:.02em;
  pointer-events:none;
}.ad-carousel-track{
  display:flex;
  height:100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.ad-carousel-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:block;
}

.ad-carousel-media{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* Fondo desenfocado detras del anuncio: la misma foto, ampliada y borrosa, llena lo que la
   imagen (object-fit:contain) no cubre. Mismos valores que .item-photo img.item-photo-bg
   de las tarjetas, que se ven bien en el celular; con el desenfoque anterior (38px) el
   navegador lo descartaba y se veia la misma foto recortada, sin borroso. */
.ad-carousel-media-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(18px) brightness(.5) saturate(1.15);
  -webkit-filter:blur(18px) brightness(.5) saturate(1.15);
  transform:scale(1.15) translateZ(0);
  -webkit-transform:scale(1.15) translateZ(0);
  will-change:transform,filter;
}

.ad-carousel-media-fg{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.ad-carousel-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  display:flex;
  justify-content:center;
  gap:6px;
}

.ad-carousel-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:background .2s ease, width .2s ease;
}

.ad-carousel-dot.is-active{
  width:20px;
  background:#56c0ff;
  border-color:#56c0ff;
}

.app-splash-shell{
  position:relative;
  display:grid;
  justify-items:center;
  gap:18px;
  text-align:center;
  transition:transform .45s cubic-bezier(.4,0,.2,1), filter .45s ease;
}

/* Anillo que se dibuja con un trazo alrededor del logo (sin pulso infinito). Centrado
   sobre el circulo del logo: 172px de logo + 24px de aire por lado. */
.app-splash-ring{
  position:absolute;
  top:-24px;
  left:50%;
  width:220px;
  height:220px;
  margin-left:-110px;
  overflow:visible;
  transform:rotate(-90deg);
  pointer-events:none;
}

.app-splash-ring circle{
  fill:none;
}

.app-splash-ring-track{
  stroke:rgba(188,226,247,.10);
  stroke-width:1;
}

.app-splash-ring-draw{
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px rgba(86,192,255,.55));
  animation:splashRingDraw 1s cubic-bezier(.65,0,.35,1) .1s both;
}

.app-splash-logo-wrap{
  position:relative;
  width:172px;
  height:172px;
  border-radius:50%;
  padding:0;
  background:radial-gradient(circle at 50% 38%, rgba(204,236,255,.10), rgba(255,255,255,.02) 62%, rgba(255,255,255,0) 74%);
  border:1px solid rgba(204,236,255,.14);
  box-shadow:
    0 22px 54px rgba(0,0,0,.30),
    0 0 0 12px rgba(204,236,255,.03);
  backdrop-filter:blur(8px);
  animation:splashFocus .8s cubic-bezier(.22,.85,.32,1) .3s both;
  overflow:hidden;
}

.app-splash-logo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 14%;
  border-radius:50%;
  display:block;
}

.app-splash-logo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  transform:translateX(-130%);
  animation:splashLogoShine .7s cubic-bezier(.4,0,.2,1) 1.05s 1;
  pointer-events:none;
}

.app-splash-title{
  font-size:44px;
  font-weight:900;
  letter-spacing:-.8px;
  color:#f4faff;
  animation:splashTitleIn .7s cubic-bezier(.22,.85,.32,1) .85s both;
}

.app-splash-subtitle{
  margin-top:8px;
  color:#bcd9ee;
  font-size:16px;
  animation:splashRise .6s cubic-bezier(.22,.85,.32,1) 1.1s both;
}

@keyframes splashRingDraw{
  from{ stroke-dashoffset:1; opacity:.4; }
  to{ stroke-dashoffset:0; opacity:1; }
}

/* El logo "enfoca" como una camara: de borroso a nitido, sin rebote. */
@keyframes splashFocus{
  from{ opacity:0; filter:blur(10px); transform:scale(.94); }
  to{ opacity:1; filter:blur(0); transform:scale(1); }
}

/* Las letras se cierran mientras aparecen: gesto editorial, no un salto. */
@keyframes splashTitleIn{
  from{ opacity:0; letter-spacing:.1em; filter:blur(4px); }
  to{ opacity:1; letter-spacing:-.8px; filter:blur(0); }
}

@keyframes splashLogoShine{
  from{ transform:translateX(-130%); }
  to{ transform:translateX(130%); }
}

@keyframes splashRise{
  from{
    transform:translateY(18px) scale(.96);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

@keyframes splashPulse{
  0%, 100%{
    transform:scale(.96);
    opacity:.72;
  }
  50%{
    transform:scale(1.05);
    opacity:1;
  }
}

a{ color:inherit; text-decoration:none; }

.container{
  max-width:1050px;
  margin:0 auto;
  padding: 22px 18px 110px;
  display:grid;
  gap:18px;
  /* El header (sticky) se estira con margenes negativos iguales a este padding para
     quedar al ras de los bordes; si el padding cambia en algun breakpoint/pagina (ver
     mas abajo), estas variables tienen que actualizarse ahi tambien. */
  --container-pad-x: 18px;
  --container-pad-top: 22px;
}

.landing-page{
  background:
    linear-gradient(180deg, rgba(8,22,48,.82), rgba(12,35,78,.78) 56%, rgba(10,28,61,.84)),
    radial-gradient(960px 560px at 50% 10%, rgba(86,192,255,.26), transparent 62%),
    radial-gradient(760px 460px at 50% 38%, rgba(31,69,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,22,48,.18), rgba(86,192,255,.10)),
    url("/assets/fondo-aura-plus.jpg?v=20260706ap20") 78% center / cover no-repeat fixed,
    linear-gradient(180deg, #0c172d, #17356d 64%, #0a214c);
}

/* Foto de fondo del municipio activo: solo se activa cuando ya se entro a su contenido,
   asi la pantalla de seleccion de municipios no comparte la misma imagen.
   --municipio-photo lo define el JS segun la pestana elegida (data-municipio-photo). */
.landing-page.municipio-open{
  background:
    linear-gradient(180deg, rgba(8,22,48,.82), rgba(12,35,78,.78) 56%, rgba(10,28,61,.84)),
    radial-gradient(960px 560px at 50% 10%, rgba(86,192,255,.26), transparent 62%),
    radial-gradient(760px 460px at 50% 38%, rgba(31,69,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,22,48,.18), rgba(86,192,255,.10)),
    var(--municipio-photo, url("/assets/fondo_sanpedroplus.jpg?v=20260706ap20")) center center / cover no-repeat fixed,
    linear-gradient(180deg, #0c172d, #17356d 64%, #0a214c);
}

/* iOS Safari no soporta bien background-attachment:fixed fuera del <body>:
   la foto se ve encogida/mal encuadrada. En movil se usa scroll en su lugar. */
@media (pointer: coarse){
  .landing-page,
  .landing-page.municipio-open{
    background-attachment: scroll;
  }
}

/* Rotacion con crossfade de varias fotos de fondo (municipios con data-municipio-photos,
   ver activateMunicipioTab en app.js). Se probaron dos versiones basadas en
   background-image + CSS var dentro de divs con position:fixed (una con z-index:-1, otra
   con z-index:0) y en la app instalada (TWA) el cambio seguia viendose de golpe sin
   transicion -- probablemente ese WebView no anima bien opacity sobre un elemento cuyo
   unico contenido es un background-image compuesto con gradientes+var(). Se cambia a
   <img> reales (mucho mas basico y soportado en cualquier motor) para las fotos, con el
   overlay de gradientes en un div aparte que no necesita animarse nunca. */
.municipio-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.municipio-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity 2.6s ease-in-out;
}

.municipio-open .municipio-bg-img.is-visible{
  opacity:1;
}

.municipio-bg-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,22,48,.82), rgba(12,35,78,.78) 56%, rgba(10,28,61,.84)),
    radial-gradient(960px 560px at 50% 10%, rgba(86,192,255,.26), transparent 62%),
    radial-gradient(760px 460px at 50% 38%, rgba(31,69,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,22,48,.18), rgba(86,192,255,.10));
}

.landing-container{
  position:relative;
  z-index:1;
  min-height:100vh;
  align-content:center;
  justify-items:center;
  gap:26px;
  padding-top:38px;
  padding-bottom:96px;
}

.landing-header{
  width:100%;
  justify-content:center;
  padding:24px 16px;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  animation: fadeSlideIn .6s ease both;
}

.landing-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,19,40,.42) 0%, rgba(10,26,55,.50) 100%),
    url("/assets/fondo-aura-plus.jpg?v=20260706ap20") 78% center / cover no-repeat;
  border-radius:22px;
  z-index:0;
}

/* Con un municipio activo, ::before deja de llevar la foto (ahora la llevan las dos
   <img class="landing-header-bg-img"> de abajo, para el mismo fundido que el fondo
   grande) y pasa a ser solo el degradado oscuro, un nivel por encima de esas fotos. */
.municipio-open .landing-header::before{
  background: linear-gradient(180deg, rgba(8,19,40,.46) 0%, rgba(10,26,55,.54) 100%);
  z-index:1;
}

.landing-header-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  border-radius:22px;
  z-index:0;
  opacity:0;
  transition:opacity 2.6s ease-in-out;
}

.municipio-open .landing-header-bg-img.is-visible{
  opacity:1;
}

/* San Pedro: sube el encuadre de la foto en el header para que se vea la iglesia,
   no solo el paisaje de fondo. */
body[data-municipio="san-pedro"] .landing-header-bg-img{
  object-position: center 82%;
}

.landing-header > *:not(.landing-header-bg-img){
  position:relative;
  z-index:1;
}

.landing-header .brand{
  flex-direction:column;
  text-align:center;
  gap:18px;
}

.landing-header .logo-img{
  width:144px;
  height:144px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 14%;
  padding:0;
  background:transparent;
  border:2px solid rgba(204,236,255,.18);
  animation:
    logoGlowPulse 3.6s ease-in-out infinite,
    logoFloat 5s ease-in-out infinite;
}

@keyframes logoGlowPulse{
  0%, 100%{
    box-shadow:
      0 24px 54px rgba(0,0,0,.30),
      0 0 0 10px rgba(204,236,255,.04),
      0 0 0 0 rgba(86,192,255,.30);
  }
  50%{
    box-shadow:
      0 24px 54px rgba(0,0,0,.30),
      0 0 0 10px rgba(204,236,255,.07),
      0 0 36px 8px rgba(86,192,255,.42);
  }
}

@keyframes logoFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.landing-header .brand h1{
  font-size:56px;
  letter-spacing:-1.1px;
}

/* Antes de elegir municipio, el logo y la foto de fondo ya muestran la marca
   "Aura Plus"; ocultamos el titulo aqui para no repetirla una tercera vez. */
body:not(.municipio-open) .landing-header .brand h1{
  display:none;
}

.landing-header .brand small{
  font-size:22px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.3;
}

.brand-tagline-accent{
  color: var(--foam);
  text-shadow: 0 6px 22px rgba(86,192,255,.28);
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 6px;
}

/* La cabecera "landing-header" de index.html (decorativa, centrada, no sticky) se maneja
   totalmente aparte mas abajo: todo esto es solo para el header normal de las demas
   paginas. Los margenes negativos usan las mismas variables que .container declara con
   su padding real (--container-pad-x/-top), asi que si ese padding cambia en algun
   breakpoint (ver la regla de home en mobile), esto se sigue alineando solo. */
header:not(.landing-header){
  position:sticky;
  top: env(safe-area-inset-top, 0px);
  z-index:40;
  background: rgba(12,23,45,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  margin: calc(var(--container-pad-top, 22px) * -1) calc(var(--container-pad-x, 18px) * -1) 0;
  padding-left: var(--container-pad-x, 18px);
  padding-right: var(--container-pad-x, 18px);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  transition: padding .25s ease, box-shadow .25s ease;
}

/* header.top (publicar.html) no vive dentro de .container, asi que no hay padding de
   contenedor que "cancelar" con margenes negativos: aplicar el mismo margen negativo
   que las demas paginas lo empuja fuera de la pantalla por la izquierda (y hacia
   arriba), cortando el logo. Ademas, en el formulario de publicar (largo) el header
   fijo se sentia como un cuadro pegado tapando espacio; aqui se pidio que se comporte
   como contenido normal y se desplace hacia arriba con el scroll, no que quede sticky. */
header.top:not(.landing-header){
  position: static;
  margin: 0;
}

header.header-compact:not(.landing-header){
  padding-top: calc(4px + env(safe-area-inset-top, 0px));
  padding-bottom:4px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}

header.header-compact:not(.landing-header) .logo-img{
  transform: scale(.7);
}

header.header-compact:not(.landing-header) .brand h1{
  transform: scale(.8);
}

header.header-compact:not(.landing-header) .brand small{
  opacity:0;
  max-height:0;
  margin-top:0;
}

/* transform en vez de width/height/font-size: esas propiedades obligan a recalcular el
   layout y volver a dibujar el texto en cada cuadro del scroll, lo que se sentia
   entrecortado. transform:scale() lo hace la GPU sin tocar el layout, se ve fluido. */
.logo-img{
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  transform-origin: center center;
  will-change: transform;
}

.brand h1{
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  transform-origin: left center;
  will-change: transform;
}

.brand small{
  transition: opacity .2s ease, max-height .25s ease, margin-top .2s ease;
  overflow:hidden;
  max-height:26px;
}

@media (prefers-reduced-motion: reduce){
  header, header.header-compact, .logo-img, .brand h1, .brand small{
    transition:none;
  }
}

.brand{ display:flex; align-items:center; gap:16px; }
.logo{
  width:46px; height:46px;
  border-radius:16px;
  background:
    radial-gradient(40px 40px at 30% 30%, rgba(204,236,255,.42), transparent 55%),
    linear-gradient(135deg, rgba(86,192,255,.96), rgba(18,57,127,.98));
  border: 1px solid rgba(204,236,255,.28);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.logo:after{
  content:"";
  position:absolute; inset:-10px;
  background: radial-gradient(50% 40% at 50% 80%, rgba(255,255,255,.25), transparent 60%);
  transform: rotate(-8deg);
}

.brand h1{ font-size:30px; line-height:1.05; margin:0; letter-spacing:.2px; font-weight:900; }
.brand small{ display:block; color:var(--muted); font-size:16px; margin-top:6px; }

.pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius:24px;
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(10px);
  /* .container es "display:grid": por defecto un item de grid nunca se encoge mas alla
     del tamano minimo de su contenido (min-width:auto), asi que si algo adentro es
     ancho por diseno (el cartel QR, a su tamano real de 559px), .card se estira para
     caberlo entero y desborda la pantalla, sin importar cuanto se intente escalar ese
     contenido despues con JS -- el propio .card ya mide su ancho contra ese contenido
     sin escalar. min-width:0 se lo permite. */
  min-width:0;
}

.landing-card{
  width:min(100%, 860px);
  padding:32px 30px 28px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(204,236,255,.16), rgba(255,255,255,.04)),
    radial-gradient(420px 180px at 50% 0%, rgba(86,192,255,.18), transparent 70%),
    rgba(7,23,53,.58);
  border-color:rgba(86,192,255,.24);
  box-shadow:
    0 28px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
}

.landing-card.is-revealed{
  animation: fadeSlideIn .32s ease both;
}

.municipio-back-wrap{
  display:none;
  width:min(100%, 860px);
  margin:0 0 16px;
  gap:10px;
  flex-wrap:wrap;
}

.municipio-open .municipio-tabs-wrap{
  display:none;
}

.municipio-open .municipio-back-wrap{
  display:flex;
  animation: fadeSlideIn .35s ease both;
}

.municipio-back-btn{
  display:flex;
  width:max-content;
  margin:0;
  padding:12px 22px;
  font-size:14px;
}

.btn.primary.municipio-back-btn{
  background:linear-gradient(135deg, #1f5fd6, #0d3fb0);
  color:#f5faff;
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    0 10px 26px rgba(86,192,255,.38),
    0 0 0 1px rgba(86,192,255,.14);
}

.btn.primary.municipio-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 30px rgba(86,192,255,.48),
    0 0 0 1px rgba(86,192,255,.2);
}

.municipio-back-btn:active{
  transform:scale(.97);
}

.municipio-map-btn{
  background: linear-gradient(135deg, #f3d48e, #e0ac4a);
  color: #2b1d04;
  border:1.5px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 26px rgba(224,172,74,.4), 0 0 0 1px rgba(224,172,74,.18);
}

.municipio-map-btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 14px 30px rgba(224,172,74,.5), 0 0 0 1px rgba(224,172,74,.24);
}

.title{
  font-size:42px;
  line-height:1.03;
  margin:0;
  letter-spacing:-.7px;
}
.title span{ color: var(--foam); text-shadow: 0 6px 22px rgba(86,192,255,.28); }

.subtitle{
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  max-width: 60ch;
}

.landing-card .subtitle{
  margin:0 auto;
  font-size:17px;
  line-height:1.6;
  max-width:42rem;
}

.landing-categories{
  margin-top:18px;
  padding:16px 14px 12px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  transition:margin-top .28s ease, transform .28s ease;
}

.landing-card.is-searching .landing-categories{
  margin-top:26px;
  transform:translateY(4px);
}

.landing-categories-label{
  margin:0 0 14px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(184,228,255,.86);
}

.landing-chips{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.landing-chip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:58px;
  padding:12px 14px;
  border-radius:22px;
  background:rgba(204,236,255,.12);
  border:1px solid rgba(86,192,255,.20);
  color:rgba(232,244,255,.96);
  font-weight:700;
  font-size:14px;
  text-align:left;
  box-shadow:0 8px 20px rgba(3,10,26,.28), 0 1px 0 rgba(255,255,255,.05) inset;
  transition:transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.landing-chip-label{
  min-width:0;
  text-align:left;
}

.landing-chip-count{
  display:inline-flex;
  vertical-align:middle;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:2px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
  color:inherit;
  font-size:11px;
  font-weight:900;
  font-family:inherit;
  line-height:1;
}

.landing-chip-count[hidden]{
  display:none;
}

.landing-chip:hover{
  transform:translateY(-1px);
  background:rgba(86,192,255,.18);
  border-color:rgba(86,192,255,.38);
  box-shadow:0 10px 24px rgba(86,192,255,.12);
}

.landing-chip:active{
  transform:scale(.97);
  background:rgba(86,192,255,.22);
}

.landing-chip:focus-visible{
  outline:none;
  border-color:rgba(86,192,255,.6);
  box-shadow:
    0 0 0 2px rgba(86,192,255,.16),
    0 10px 24px rgba(86,192,255,.10);
}

.municipio-tabs-wrap{
  width:min(100%, 860px);
  margin:0 0 16px;
  animation: fadeSlideIn .5s ease .1s both;
}

.municipio-tabs-label{
  margin:0 0 10px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(184,228,255,.86);
}

.municipio-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  padding:4px 4px 10px;
}

.municipio-tab{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:104px;
  min-height:58px;
  padding:12px 18px;
  border-radius:16px;
  background:rgba(6,17,38,.62);
  border:1.5px solid rgba(86,192,255,.32);
  color:#eaf5ff;
  font-weight:700;
  font-size:14px;
  text-align:center;
  cursor:pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.30);
  transition:transform .18s cubic-bezier(.2,.9,.2,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
}

.municipio-tab:not(.is-disabled){
  border-color:rgba(120,206,255,.75);
  box-shadow:
    0 8px 22px rgba(0,0,0,.32),
    0 0 0 1px rgba(86,192,255,.12),
    0 0 22px rgba(86,192,255,.28);
}

.municipio-tab.is-active{
  background:linear-gradient(135deg, #1f5fd6, #0d3fb0);
  border-color:transparent;
  color:#f5faff;
  box-shadow:0 10px 26px rgba(86,192,255,.45);
  animation:none;
}

.municipio-tab:active:not(.is-disabled){
  transform:scale(.97);
}

.municipio-tab.is-disabled{
  background:rgba(6,17,38,.48);
  border-color:rgba(148,163,184,.22);
  color:rgba(220,230,240,.58);
  box-shadow:none;
  cursor:not-allowed;
}

.municipio-tab.is-disabled:hover{
  transform:none;
}

.municipio-tab:not(.is-disabled):hover{
  transform:translateY(-2px);
  border-color:rgba(120,206,255,.95);
}/* Movil: 3 pestanas por fila (3 + 2) en vez de una fila larga con scroll,
   para que se vean todos los municipios sin desplazar horizontalmente. */
@media (max-width: 520px){
  .municipio-tabs{
    gap:8px;
  }

  .municipio-tab{
    min-width:0;
    min-height:62px;
    flex:0 0 calc(33.333% - 6px);
    padding:10px 8px;
    font-size:12.5px;
  }

  .municipio-tab--coast,
  .municipio-tab--amazon{
    flex:0 1 auto;
    min-height:62px;
  }
}

.municipio-region{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:14px;
}

.municipio-tab--coast{
  flex-direction:row;
  justify-content:center;
  gap:8px;
  min-width:104px;
  min-height:58px;
  padding:12px 20px;
  background:rgba(6,38,36,.55);
  border-color:rgba(45,212,191,.55);
  color:#d7fff6;
  box-shadow:0 8px 20px rgba(0,0,0,.28), 0 0 16px rgba(45,212,191,.22);
  animation:none;
}

.municipio-tab--coast:not(.is-disabled):hover{
  border-color:rgba(94,234,212,.9);
}

.municipio-tab--coast.is-active{
  background:linear-gradient(135deg, #0f766e, #115e59);
  border-color:transparent;
  color:#f5faff;
  box-shadow:0 10px 26px rgba(45,212,191,.45);
}

/* Municipios de otro departamento fuera de Antioquia y Urabá (San José del Guaviare):
   misma forma que Cartagena, en verde selva para distinguirlos de los demas. */
.municipio-tab--amazon{
  flex-direction:row;
  justify-content:center;
  gap:8px;
  min-width:104px;
  min-height:58px;
  padding:12px 20px;
  background:rgba(8,40,22,.55);
  border-color:rgba(74,222,128,.55);
  color:#dcffe9;
  box-shadow:0 8px 20px rgba(0,0,0,.28), 0 0 16px rgba(74,222,128,.22);
  animation:none;
}

.municipio-tab--amazon:not(.is-disabled):hover{
  border-color:rgba(134,239,172,.9);
}

.municipio-tab--amazon.is-active{
  background:linear-gradient(135deg, #15803d, #166534);
  border-color:transparent;
  color:#f5faff;
  box-shadow:0 10px 26px rgba(74,222,128,.45);
}

@media (min-width: 720px){
  .landing-chips{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}[hidden]{
  display:none !important;
}.landing-search-stack{
  display:grid;
  gap:12px;
}

.landing-search-form{
  margin:0;
}

.landing-searchbar{
  min-height:62px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(6,16,35,.38);
  border-color:rgba(86,192,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.landing-searchbar:focus-within{
  border-color:rgba(86,192,255,.42);
  box-shadow:
    0 0 0 3px rgba(86,192,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.landing-searchbar input{
  font-size:16px;
}

/* Buscar vive dentro de la barra (lupa a la izquierda), sin boton grande aparte. */
.landing-search-submit{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(120,205,255,.45);
  background:linear-gradient(160deg, rgba(86,192,255,.42), rgba(40,110,220,.55));
  color:#eaf7ff;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, background .2s ease;
}
.landing-search-submit .icon{ width:19px; height:19px; }
.landing-search-submit:active{ transform:scale(.9); }
.landing-search-submit:focus-visible{ outline:2px solid rgba(86,192,255,.6); outline-offset:2px; }

.landing-search-clear{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:none;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:var(--text);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.landing-searchbar.has-value .landing-search-clear{
  display:inline-flex;
}

.landing-search-clear:hover{
  background:rgba(86,192,255,.22);
  transform:scale(1.05);
}

.landing-search-clear:active{
  transform:scale(.92);
}

.landing-search-results{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(204,236,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  text-align:left;
  animation:landingSearchReveal .2s ease;
}

.landing-search-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.landing-search-results-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(184,228,255,.9);
}

.landing-search-results-meta{
  color:var(--muted);
  font-size:12px;
}

.landing-search-result{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}

.landing-search-result:has(.landing-search-result-linkarea:hover){
  transform:translateY(-1px);
  background:rgba(86,192,255,.10);
  border-color:rgba(86,192,255,.24);
}

.landing-search-result:has(.landing-search-result-linkarea:active){
  transform:scale(.985);
  background:rgba(86,192,255,.14);
}

.landing-search-result:has(.landing-search-result-linkarea:focus-visible){
  border-color:rgba(86,192,255,.44);
  box-shadow:0 0 0 3px rgba(86,192,255,.12);
}

.landing-search-result-linkarea{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.landing-search-result-linkarea:focus-visible{
  outline:none;
}

.landing-search-result-body{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.landing-search-result-thumb{
  flex:0 0 auto;
}

.landing-search-result-thumb .thumb{
  width:76px;
  height:76px;
  border-radius:22px;
}

.landing-search-result-copy{
  min-width:0;
  flex:1 1 auto;
  display:grid;
  gap:8px;
}

.landing-search-result-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.landing-search-result-title{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:var(--text);
}

.landing-search-result-title a{
  color:inherit;
}

.landing-search-result-tag{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(86,192,255,.14);
  border:1px solid rgba(86,192,255,.20);
  color:rgba(184,228,255,.96);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.landing-search-result-subtitle{
  color:var(--text);
  font-size:14px;
  font-weight:600;
}

.landing-search-result-meta-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.landing-search-result-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.landing-search-result-subtag,
.landing-search-result-open,
.landing-search-result-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}

.landing-search-result-subtag{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
}

.landing-search-result-open{
  background:rgba(86,192,255,.18);
  border:1px solid rgba(86,192,255,.24);
  color:rgba(184,228,255,.96);
}

.landing-search-result-edit{
  background:rgba(255,159,67,.16);
  border:1px solid rgba(255,159,67,.28);
  color:#ffcb8a;
}

.landing-search-result-description{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.landing-search-results-empty{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

@keyframes landingSearchReveal{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes landingCtaReveal{
  from{
    opacity:0;
    transform: translateY(10px) scale(.96);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

@keyframes landingCtaPulse{
  0%{
    opacity:0;
    transform: scale(.96);
  }
  20%{
    opacity:.95;
  }
  100%{
    opacity:0;
    transform: scale(1.08);
  }
}

button{ font-family:inherit; }

.admin-stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin:16px 0;
}

.admin-stat-card{
  padding:14px 16px;
  border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
}

.admin-stat-card .admin-stat-value{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--text);
}

.admin-stat-card .admin-stat-label{
  margin-top:4px;
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
}

.admin-stat-card .admin-stat-sub{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  opacity:.75;
}

.admin-stat-card.is-clickable{
  cursor:pointer;
  transition:transform .15s ease, background .18s ease;
}

.admin-stat-card.is-clickable:hover{
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
}

.admin-stat-card.is-clickable:active{
  transform:scale(.98);
}

.admin-stat-card.is-warning{
  border-color:var(--gold-line);
  background:linear-gradient(160deg, var(--gold-soft), rgba(255,255,255,.03));
}

.admin-stat-card.is-warning .admin-stat-value{
  color:var(--gold);
}

.admin-stat-card.is-warning.is-clickable:hover{
  background:linear-gradient(160deg, rgba(240,198,116,.24), rgba(255,255,255,.04));
}

.btn{
  appearance:none;
  border:0;
  padding:12px 14px;
  border-radius:16px;
  font-weight:800;
  cursor:pointer;
  /* Sin esto el navegador espera hasta ~300ms por si el toque es el primero de un
     doble-tap para hacer zoom (el viewport no bloquea el zoom) antes de disparar el
     click -- un toque rapido y ligero a veces quedaba en ese limbo y no reaccionaba,
     mientras que uno un poco mas sostenido si alcanzaba a registrarse. */
  touch-action:manipulation;
  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    opacity .2s ease,
    box-shadow .28s ease,
    filter .28s ease,
    border-color .28s ease,
    background-color .28s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before,
.btn::after,
.icon-btn::before,
.icon-btn::after,
.tab::before,
.tab::after,
.navbtn::before,
.navbtn::after,
.home-start-btn::before,
.home-start-btn::after,
.floating-help-btn::before,
.floating-help-btn::after,
.floating-publish-btn::before,
.floating-publish-btn::after,
.floating-back-btn::before,
.floating-back-btn::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.btn::before,
.icon-btn::before,
.tab::before,
.navbtn::before,
.home-start-btn::before,
.floating-help-btn::before,
.floating-publish-btn::before,
.floating-back-btn::before{
  left:-30%;
  top:-55%;
  width:62%;
  height:210%;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 40%, rgba(255,255,255,0));
  filter:blur(8px);
  transform:translateX(-18%) rotate(14deg);
  opacity:.72;
  transition:transform .44s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  z-index:0;
}
.btn::after,
.icon-btn::after,
.tab::after,
.navbtn::after,
.home-start-btn::after,
.floating-help-btn::after,
.floating-publish-btn::after,
.floating-back-btn::after{
  left:12%;
  right:12%;
  bottom:8%;
  height:44%;
  border-radius:999px;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 72%);
  filter:blur(10px);
  opacity:.55;
  transform:scale(.92);
  transition:transform .28s ease, opacity .28s ease;
  z-index:0;
}
.btn > *,
.icon-btn > *,
.tab > *,
.navbtn > *,
.home-start-btn > *,
.floating-help-btn > *,
.floating-publish-btn > *,
.floating-back-btn > *{
  position:relative;
  z-index:1;
}
.btn:hover,
.icon-btn:hover,
.tab:hover,
.navbtn:hover,
.home-start-btn:hover,
.floating-help-btn:hover,
.floating-publish-btn:hover,
.floating-back-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.06) brightness(1.03);
}
.btn:hover::before,
.icon-btn:hover::before,
.tab:hover::before,
.navbtn:hover::before,
.home-start-btn:hover::before,
.floating-help-btn:hover::before,
.floating-publish-btn:hover::before,
.floating-back-btn:hover::before{
  transform:translateX(22%) rotate(14deg);
}
.btn:hover::after,
.icon-btn:hover::after,
.tab:hover::after,
.navbtn:hover::after,
.home-start-btn:hover::after,
.floating-help-btn:hover::after,
.floating-publish-btn:hover::after,
.floating-back-btn:hover::after{
  transform:scale(1.03);
  opacity:.72;
}
.btn:active,
.icon-btn:active,
.tab:active,
.navbtn:active,
.home-start-btn:active,
.floating-help-btn:active,
.floating-publish-btn:active,
.floating-back-btn:active{
  transform:translateY(1px) scale(.975);
}
.btn:active::before,
.icon-btn:active::before,
.tab:active::before,
.navbtn:active::before,
.home-start-btn:active::before,
.floating-help-btn:active::before,
.floating-publish-btn:active::before,
.floating-back-btn:active::before{
  opacity:.95;
  transform:translateX(34%) rotate(18deg) scale(1.02);
}
.btn:active::after,
.icon-btn:active::after,
.tab:active::after,
.navbtn:active::after,
.home-start-btn:active::after,
.floating-help-btn:active::after,
.floating-publish-btn:active::after,
.floating-back-btn:active::after{
  opacity:.92;
  transform:scale(1.08);
}
.btn:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.navbtn:focus-visible,
.home-start-btn:focus-visible,
.floating-help-btn:focus-visible,
.floating-publish-btn:focus-visible,
.floating-back-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(138,188,215,.18),
    0 16px 32px rgba(0,0,0,.24);
}
.liquid-ripple{
  --liquid-ripple-blur: 3px;
  --liquid-ripple-opacity: .9;
  --liquid-ripple-scale-start: .18;
  --liquid-ripple-scale-mid: .92;
  --liquid-ripple-scale-end: 1.22;
  --liquid-ripple-opacity-mid: .48;
  --liquid-travel-x: 0px;
  --liquid-travel-y: 0px;
  --liquid-pull-x: 0px;
  --liquid-pull-y: 0px;
  --liquid-tilt: 0deg;
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
  filter:blur(calc(var(--liquid-ripple-blur) * .35));
  transform:translate3d(0, 0, 0);
}
.liquid-ripple-core,
.liquid-ripple-trail{
  position:absolute;
  inset:0;
  border-radius:999px;
  mix-blend-mode:screen;
  transform-origin:center;
}
.liquid-ripple-core{
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.66), rgba(255,255,255,.22) 24%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 52% 54%, rgba(167,240,255,.34), rgba(31,162,255,.14) 48%, rgba(31,162,255,0) 74%);
  filter:blur(var(--liquid-ripple-blur));
  opacity:var(--liquid-ripple-opacity);
  animation:liquidRippleCore .76s cubic-bezier(.2,.9,.2,1) forwards;
}
.liquid-ripple-trail{
  inset:12% 18%;
  background:
    radial-gradient(circle at 28% 50%, rgba(255,255,255,.22), rgba(255,255,255,.08) 36%, rgba(255,255,255,0) 72%),
    linear-gradient(90deg, rgba(167,240,255,.22), rgba(31,162,255,.08) 58%, rgba(31,162,255,0));
  filter:blur(calc(var(--liquid-ripple-blur) * 1.4));
  opacity:calc(var(--liquid-ripple-opacity) * .72);
  animation:liquidRippleTrail .76s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes liquidRippleCore{
  0%{
    transform:
      translate(var(--liquid-pull-x), var(--liquid-pull-y))
      scale(var(--liquid-ripple-scale-start))
      rotate(calc(var(--liquid-tilt) * -.35));
    opacity:var(--liquid-ripple-opacity);
  }
  55%{
    transform:
      translate(calc(var(--liquid-travel-x) * .38), calc(var(--liquid-travel-y) * .38))
      scale(var(--liquid-ripple-scale-mid))
      rotate(calc(var(--liquid-tilt) * .25));
    opacity:var(--liquid-ripple-opacity-mid);
  }
  100%{
    transform:
      translate(var(--liquid-travel-x), var(--liquid-travel-y))
      scale(var(--liquid-ripple-scale-end))
      rotate(var(--liquid-tilt));
    opacity:0;
  }
}

@keyframes liquidRippleTrail{
  0%{
    transform:
      translate(calc(var(--liquid-pull-x) * 1.25), calc(var(--liquid-pull-y) * 1.25))
      scaleX(.28)
      scaleY(.62)
      rotate(var(--liquid-tilt));
    opacity:calc(var(--liquid-ripple-opacity) * .54);
  }
  45%{
    transform:
      translate(calc(var(--liquid-travel-x) * -.16), calc(var(--liquid-travel-y) * -.16))
      scaleX(.96)
      scaleY(.86)
      rotate(var(--liquid-tilt));
    opacity:calc(var(--liquid-ripple-opacity-mid) * .78);
  }
  100%{
    transform:
      translate(calc(var(--liquid-travel-x) * -.5), calc(var(--liquid-travel-y) * -.5))
      scaleX(1.32)
      scaleY(.92)
      rotate(var(--liquid-tilt));
    opacity:0;
  }
}

@media (min-width: 861px){
  .liquid-ripple{
    --liquid-ripple-blur: 2px;
    --liquid-ripple-opacity: .72;
    --liquid-ripple-scale-start: .14;
    --liquid-ripple-scale-mid: .78;
    --liquid-ripple-scale-end: 1.02;
    --liquid-ripple-opacity-mid: .34;
  }
}

@media (max-width: 860px){
  .liquid-ripple{
    --liquid-ripple-blur: 4px;
    --liquid-ripple-opacity: .98;
    --liquid-ripple-scale-start: .2;
    --liquid-ripple-scale-mid: 1;
    --liquid-ripple-scale-end: 1.34;
    --liquid-ripple-opacity-mid: .58;
  }
}

.btn.primary{
  background: linear-gradient(135deg, rgba(112,200,255,.98), rgba(86,192,255,.92));
  color:#142036;
  border:1px solid rgba(204,236,255,.34);
  box-shadow: 0 14px 30px rgba(86,192,255,.18);
}
.btn.secondary{
  background: rgba(22,54,110,.68);
  border: 1px solid rgba(120,205,255,.4);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(4,18,31,.24);
}
/* Se usa el acento dorado (el mismo de "Destacado"/premium) en vez del secundario
   apagado, para que se note mas al lado de WhatsApp/Como llegar. */
.btn-share{
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold);
}
.btn-share:hover{
  background: color-mix(in srgb, var(--gold-soft) 70%, var(--gold) 15%);
}
.btn.ghost{
  background: rgba(204,236,255,.03);
  border: 1px dashed rgba(86,192,255,.28);
  color: var(--muted);
}

/* Boton "Volver" compacto para cabeceras donde el .btn ghost normal (padding grande,
   borde punteado tenue) se ve demasiado ancho y poco definido junto al logo. align-self y
   width:auto son necesarios porque en movil el header pasa a flex-direction:column con
   align-items:stretch (ver @media max-width:860px), que sin esto estiraria el boton a
   todo el ancho de la fila en vez de ajustarse a su propio texto. */
.btn-compact-back{
  display:inline-flex;
  align-self:flex-start;
  width:auto;
  align-items:center;
  gap:6px;
  background: linear-gradient(160deg, rgba(86,192,255,.26), rgba(86,192,255,.12));
  border: 1px solid rgba(120,205,255,.5);
  color: #d4efff;
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.btn-compact-back:hover{
  background: rgba(86,192,255,.28);
  border-color: rgba(86,192,255,.6);
}

.btn-compact-back .icon{
  width:16px;
  height:16px;
}
.btn-directions{
  background: linear-gradient(135deg, rgba(45,212,191,.26), rgba(45,212,191,.14));
  border: 1px solid rgba(45,212,191,.48);
  color: #99f6e4;
}
.btn-directions:hover{
  background: linear-gradient(135deg, rgba(45,212,191,.34), rgba(45,212,191,.2));
}
.btn.danger{
  background: linear-gradient(135deg, rgba(255,110,110,.98), rgba(239,68,68,.95));
  border: 1px solid rgba(255,180,180,.5);
  color: #3a0a0a;
  box-shadow: 0 14px 30px rgba(239,68,68,.22);
}
.btn.danger:hover{
  background: linear-gradient(135deg, rgba(255,124,124,.98), rgba(220,38,38,.96));
}
.btn.small{ padding:10px 12px; border-radius:12px; }.home-return-btn{
  animation:home-return-pulse 2.6s ease-in-out 3;
}

.home-return-btn:hover,
.home-return-btn:focus-visible{
  animation-play-state:paused;
}

@keyframes home-return-pulse{
  0%, 100%{
    transform:scale(1);
    box-shadow:0 6px 16px rgba(86,192,255,.28), 0 0 0 0 rgba(86,192,255,.45);
  }
  50%{
    transform:scale(1.035);
    box-shadow:0 8px 26px rgba(86,192,255,.4), 0 0 0 9px rgba(86,192,255,0);
  }
}

@media (prefers-reduced-motion: reduce){
  .home-return-btn{
    animation:none;
    box-shadow:0 6px 16px rgba(86,192,255,.22);
  }
}

.home-toolbar{
  align-items:center;
}.home-start-btn{
  background: linear-gradient(135deg, rgba(112,200,255,.98), rgba(86,192,255,.92));
  color:#142036;
  border:1px solid rgba(204,236,255,.34);
  box-shadow: 0 14px 28px rgba(86,192,255,.18);
  font-weight:900;
  letter-spacing:.02em;
  padding:12px 18px;
}

.home-start-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.floating-help-btn{
  position:fixed;
  right:18px;
  bottom:98px;
  z-index:1200;
  padding:14px 18px;
  border-radius:22px;
  border:1px solid rgba(204,236,255,.22);
  background:linear-gradient(135deg, rgba(112,200,255,.98), rgba(86,192,255,.92));
  color:#142036;
  box-shadow:0 18px 36px rgba(86,192,255,.18);
  font-weight:900;
  letter-spacing:.02em;
}

.floating-help-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:2px solid rgba(86,192,255,.55);
  opacity:.6;
  transform:scale(1);
  pointer-events:none;
  animation:helpPulseRing 2.2s ease-in-out infinite;
  will-change:transform, opacity;
}

.floating-help-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

.floating-help-btn:hover::after{
  animation-play-state:paused;
}

.floating-help-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(86,192,255,.18),
    0 18px 36px rgba(86,192,255,.18);
}

@keyframes helpPulseRing{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.3); opacity:0; }
  100%{ transform:scale(1.3); opacity:0; }
}

.floating-publish-btn,
.floating-back-btn{
  position:fixed;
  right:18px;
  z-index:1190;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}

.floating-publish-btn{
  bottom:158px;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(22,59,126,.96), rgba(86,192,255,.88));
  color:#eff8ff;
  font-weight:900;
  letter-spacing:.02em;
  display:none;
}@keyframes publishCtaBreathe{
  0%, 100%{
    opacity:.3;
    transform:scale(1);
  }
  50%{
    opacity:.65;
    transform:scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce){
  .publish-cta-glow-svg rect{
    animation:none;
    opacity:.45;
  }
}

.floating-back-btn{
  bottom:calc(var(--dock-h, 0px) + env(safe-area-inset-bottom, 0px) + 14px);
  padding:14px 18px;
  background:rgba(8,25,57,.92);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  font-size:15px;
}

.floating-publish-btn.is-visible{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Los botones flotantes (Ayuda, Ir arriba, Publicar, Volver) heredan el brillo
   "liquido" generico de .btn (destello blanco diagonal + resplandor blanco radial),
   pensado para botones de acciones normales dentro de tarjetas claras. Flotando solos
   sobre el fondo oscuro, ese blanco se ve plastico y barato en vez de premium: aqui se
   reemplaza por un tinte azulado tenue (acorde a la marca) y una sombra mas profunda
   con un borde superior sutil tipo "glass", para un acabado mas cuidado. */
.floating-help-btn,
.floating-publish-btn,
.floating-back-btn{
  border-color: rgba(148,197,255,.22);
  box-shadow:
    0 20px 40px rgba(3,10,26,.5),
    0 0 0 1px rgba(148,197,255,.1) inset,
    0 1px 0 rgba(255,255,255,.08) inset;
}

.floating-help-btn::before,
.floating-publish-btn::before,
.floating-back-btn::before{
  background:linear-gradient(180deg, rgba(148,197,255,.22), rgba(148,197,255,.05) 40%, rgba(148,197,255,0));
  opacity:.5;
}

.floating-help-btn::after,
.floating-publish-btn::after,
.floating-back-btn::after{
  background:radial-gradient(circle at 50% 0%, rgba(86,192,255,.18), rgba(86,192,255,0) 72%);
  opacity:.4;
}

.floating-help-btn:hover,
.floating-publish-btn:hover,
.floating-back-btn:hover{
  box-shadow:
    0 24px 46px rgba(3,10,26,.56),
    0 0 0 1px rgba(148,197,255,.16) inset,
    0 1px 0 rgba(255,255,255,.1) inset;
}

.tabs{
  position:relative;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  margin-top:12px;
  padding-top:4px;
  padding-bottom:2px;
  transition:
    opacity .34s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1),
    filter .34s ease,
    max-height .42s cubic-bezier(.22,1,.36,1),
    margin-top .32s ease;
  transform-origin:top center;
}

.tabs::-webkit-scrollbar{
  display:none;
}

.section-tabs-shell{
  display:grid;
  gap:12px;
}

.section-focus-stage{
  display:grid;
  gap:10px;
}

.section-focus-back{
  display:none;
  width:fit-content;
  max-width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 24px;
  min-height:54px;
  border-radius:22px;
  border:1px solid rgba(220,235,243,.3);
  background:
    linear-gradient(135deg, rgba(220,235,243,.22), rgba(138,188,215,.16)),
    rgba(255,255,255,.12);
  color:#f7fcff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 32px rgba(5,18,31,.28);
  opacity:0;
  transform:translateY(-8px);
  filter:blur(6px);
  transition:
    opacity .28s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1),
    filter .3s ease,
    background .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

.section-focus-back:hover{
  background:
    linear-gradient(135deg, rgba(138,188,215,.18), rgba(74,103,128,.18)),
    rgba(255,255,255,.1);
  border-color:rgba(138,188,215,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 28px rgba(5,18,31,.26);
}

.section-focus-back:focus-visible{
  outline:2px solid rgba(138,188,215,.74);
  outline-offset:3px;
}

.section-focus-hero{
  display:none;
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
  gap:16px;
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(138,188,215,.16);
  background:
    radial-gradient(circle at top left, rgba(138,188,215,.12), transparent 42%),
    linear-gradient(135deg, rgba(74,103,128,.26), rgba(16,34,51,.24)),
    rgba(12,24,36,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 36px rgba(0,0,0,.24),
    0 0 0 1px rgba(138,188,215,.08);
  color:#fff;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(-16px) scale(.975);
  filter:blur(10px) saturate(.92);
  transition:
    opacity .36s cubic-bezier(.22,1,.36,1),
    transform .46s cubic-bezier(.22,1,.36,1),
    filter .38s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.section-focus-hero::before{
  content:"";
  position:absolute;
  inset:-30% auto -30% -12%;
  width:42%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
  opacity:0;
  transform:translateX(-120%) rotate(12deg);
  pointer-events:none;
}

.section-focus-hero-main{
  display:grid;
  gap:6px;
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .28s ease .06s,
    transform .4s cubic-bezier(.22,1,.36,1) .06s;
}

.section-focus-hero-heading{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.section-focus-hero-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(190,216,229,.76);
}

.section-focus-hero-title{
  font-size:clamp(24px, 3vw, 34px);
  line-height:1;
  font-weight:900;
  text-shadow:0 10px 24px rgba(138,188,215,.12);
}

.section-focus-hero-note{
  font-size:14px;
  line-height:1.45;
  color:rgba(220,235,243,.82);
}

.section-focus-hero-count{
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  font-size:14px;
  font-weight:900;
  line-height:1;
  opacity:0;
  transform:translateY(6px) scale(.94);
  transition:
    opacity .28s ease .12s,
    transform .42s cubic-bezier(.22,1,.36,1) .12s;
}

.section-tabs-shell.is-focused .section-focus-back,
.section-tabs-shell.is-focused .section-focus-hero{
  display:grid;
}

.section-tabs-shell.is-focused .section-focus-back{
  display:inline-flex;
  opacity:1;
  transform:translateY(0);
  filter:none;
}

.section-tabs-shell.is-focused .section-focus-hero{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:none;
}

.section-tabs-shell.is-focused .section-focus-hero::before{
  opacity:1;
  transform:translateX(340%) rotate(12deg);
  transition:
    opacity .18s ease,
    transform .9s cubic-bezier(.16,1,.3,1) .08s;
}

.section-tabs-shell.is-focused .section-focus-hero-main,
.section-tabs-shell.is-focused .section-focus-hero-count{
  opacity:1;
  transform:translateY(0) scale(1);
}

.section-tabs-shell.is-focused .tabs{
  opacity:0;
  transform:translateY(-16px) scale(.985);
  filter:blur(8px);
  max-height:0;
  overflow:hidden;
  margin-top:0;
  pointer-events:none;
}

body[data-page="home"].section-focused .bottom{
  transform:translateY(120%);
  opacity:0;
  filter:blur(8px);
  pointer-events:none;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    opacity .28s ease,
    filter .28s ease;
}

.tabs.is-dragging-scroll,
.bottom.is-dragging-scroll{
  cursor:grabbing;
  user-select:none;
}

.tab{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  color: var(--text);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .24s ease,
    border-color .24s ease,
    box-shadow .28s ease,
    filter .24s ease;
}

/* Barra compartida que se desliza de una pestaña a otra (ver positionTabSlider en
   app.js) en vez de que cada pestaña dibuje/oculte su propia rayita por separado. */
.tab-slider{
  position:absolute;
  z-index:1;
  bottom:6px;
  left:0;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(112,200,255,.96), rgba(204,236,255,.92));
  box-shadow:0 6px 16px rgba(86,192,255,.22);
  opacity:0;
  pointer-events:none;
  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    width .34s cubic-bezier(.22,1,.36,1),
    opacity .2s ease;
}

.tab:hover{
  transform:translateY(-2px);
  border-color:rgba(138,188,215,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 18px rgba(4,18,31,.16);
  filter:saturate(1.06);
}

.tab-label{
  display:inline-flex;
  align-items:center;
}

.tab-count[hidden],
.navbtn-count[hidden]{
  display:none;
}

.tab-count{
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:900;
  line-height:1;
}

.tab.active{
  background:
    radial-gradient(circle at top, rgba(160,218,255,.20), transparent 58%),
    linear-gradient(135deg, rgba(74,103,128,.44), rgba(138,188,215,.22)),
    rgba(255,255,255,.10);
  border-color: rgba(86,192,255,.62);
  color:#ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 28px rgba(10,24,37,.28),
    0 0 0 1px rgba(86,192,255,.18),
    0 0 0 4px rgba(86,192,255,.08);
  transform: translateY(-3px) scale(1.03);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.tab.active .tab-count{
  background:rgba(86,192,255,.22);
  border-color:rgba(86,192,255,.30);
  box-shadow:0 6px 14px rgba(86,192,255,.16);
}

.subtabs-wrap{
  display:grid;
  gap:10px;
}

.subtabs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.subtabs-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(204,236,255,.76);
}

.subtabs-meta{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.subtabs{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}

.subtabs::-webkit-scrollbar{
  display:none;
}

.subtab{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(120,205,255,.38);
  background:rgba(12,32,66,.72);
  box-shadow:0 1px 3px rgba(4,18,31,.24);
  color:var(--text);
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:
    transform .24s cubic-bezier(.22,1,.36,1),
    background .22s ease,
    border-color .22s ease,
    box-shadow .24s ease,
    filter .22s ease;
}

.subtab::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:5px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(112,200,255,.96), rgba(204,236,255,.9));
  transform:scaleX(.16);
  transform-origin:center;
  opacity:0;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    opacity .2s ease;
}

.subtab:hover{
  transform:translateY(-2px);
  border-color:rgba(120,205,255,.55);
  box-shadow:0 10px 18px rgba(4,18,31,.22);
  filter:saturate(1.05);
}

.subtab:active{
  transform:scale(.96);
}

.subtab.active{
  background:linear-gradient(135deg, rgba(112,200,255,.96), rgba(86,192,255,.88));
  color:#142036;
  border-color:rgba(204,236,255,.34);
  box-shadow:
    0 12px 24px rgba(86,192,255,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
  transform:translateY(-2px);
}

.subtab.active::after{
  transform:scaleX(1);
  opacity:1;
}

.subtab-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  min-width:18px;
  font-size:15px;
  line-height:1;
}

.subtab-label{
  display:inline-flex;
  align-items:center;
}.section-focus-label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(188,226,247,.72);
  font-weight: 800;
}

.section-focus-value{
  font-size: 20px;
  line-height: 1.05;
  color: #ffffff;
  text-shadow:
    0 10px 24px rgba(47,110,183,.22),
    0 1px 0 rgba(0,0,0,.16);
}

@media (max-width: 720px){
  .section-focus-pill{
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .floating-help-btn{
    right:14px;
    bottom:92px;
    padding:12px 16px;
  }

}

.label{
  display:block;
  font-size:16px;
  color:rgba(234,246,255,.92);
  font-weight:800;
  margin: 16px 0 8px;
}

.input,
select,
textarea{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  outline:none;
  font-size:16px;
  line-height:1.35;
}

.input::placeholder,
textarea::placeholder{
  color: rgba(234,246,255,.55);
}

textarea{ min-height: 90px; resize: vertical; }

.searchbar{
  flex:1;
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:10px 12px;
}
.searchbar input{
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color: var(--text);
  font-size:14px;
}

.searchbar-clear{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:none;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:var(--text);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

/* Lista de sugerencias mientras se escribe en el buscador del home (ver
   updateSearchSuggestions en app.js): un panel corto con solo nombres, separado de la
   lista completa filtrada que sigue mostrandose abajo sin cambios. */
.search-suggestions{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:30;
  background: rgba(10,22,44,.97);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
  overflow:hidden;
  max-height:min(320px, 60vh);
  overflow-y:auto;
}

.search-suggestion-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.search-suggestion-item:last-child{
  border-bottom:0;
}

.search-suggestion-item:hover,
.search-suggestion-item:focus-visible{
  background: rgba(86,192,255,.12);
}

.search-suggestion-icon{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: rgba(86,192,255,.14);
  color: var(--bg3);
}

.search-suggestion-icon .icon{
  width:16px;
  height:16px;
}

.search-suggestion-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.search-suggestion-name{
  font-weight:800;
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.search-suggestion-meta{
  font-size:11.5px;
  color:var(--muted);
}

.searchbar.has-value .searchbar-clear{
  display:inline-flex;
}

.searchbar-clear:hover{
  background:rgba(86,192,255,.22);
  transform:scale(1.05);
}

.searchbar-clear:active{
  transform:scale(.92);
}

.help{
  margin-top:8px;
  font-size:14px;
  color: rgba(234,246,255,.72);
}

.notice{
  padding:14px;
  border-radius:22px;
  background: rgba(0,0,0,.14);
  border:1px dashed rgba(255,255,255,.18);
  color: var(--muted);
}

/* Notificaciones flotantes (showToast en app.js): confirmacion de una accion puntual que
   aparece abajo, sin depender de que el usuario mire una parte fija de la pagina. */
.toast-stack{
  position:fixed;
  left:50%;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  z-index:9999;
  pointer-events:none;
  width:100%;
  padding:0 16px;
}

.toast{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:420px;
  padding:9px 18px 9px 9px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  text-align:left;
  color:#fff;
  /* Vidrio oscuro, el mismo lenguaje de las tarjetas y chips sobre fotos. */
  background: rgba(10,24,46,.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border:1px solid rgba(188,226,247,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;
  transform:translateY(12px) scale(.96);
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1);
}

.toast.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.toast-icon{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  color:#2dd4bf;
  background:rgba(45,212,191,.14);
}

.toast-icon .icon{
  width:15px;
  height:15px;
  stroke-width:2.4;
}

.toast-text{
  line-height:1.3;
}/* Los numeros animados no cambian de ancho mientras suben (digitos de ancho fijo). */
.count-up,
.landing-chip-count,
.admin-stat-value{
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce){
  .toast{
    transition:opacity .18s ease;
    transform:none;
  }
}

.list > .notice:only-child{
  text-align:center;
  padding:34px 16px;
  font-size:13.5px;
}

.error{
  padding:14px;
  border-radius:22px;
  background: rgba(255,70,70,.10);
  border:1px solid rgba(255,70,70,.22);
  color: rgba(255,220,220,.95);
}

.notify-prompt-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
  background:rgba(86,192,255,.1);
  border:1px dashed rgba(86,192,255,.32);
}

.notify-interests-edit-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:0;
  border:none;
  background:none;
  color:var(--foam, #5ac1ff);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.notify-interests-edit-link:hover{
  text-decoration:underline;
}

.notify-interests-edit-link .icon{
  width:15px;
  height:15px;
}

.notify-prompt-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.notify-interests-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.notify-interest-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:7px 12px;
  cursor:pointer;
  transition:transform .12s ease;
}

.notify-interest-chip:active{
  transform:scale(.94);
}

.notify-interest-chip.is-active{
  background:rgba(86,192,255,.2);
  border-color:rgba(86,192,255,.5);
  color:#eaf7ff;
}

.hr{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

.publish-step-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:26px 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(86,192,255,.22);
  font-size:15px;
  font-weight:800;
  color: rgba(234,246,255,.92);
}

.publish-step-header:first-child{
  margin-top:4px;
}

.publish-step-header .icon{
  width:18px;
  height:18px;
  color: rgba(86,192,255,.85);
}

.publish-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 auto;
  border-radius:50%;
  background: linear-gradient(135deg, #56c0ff, #1354e4);
  color:#04101f;
  font-size:12px;
  font-weight:900;
}

.list{
  display:grid;
  gap:18px;
}

/* Panel admin: nav de pestanas como control segmentado (pildoras), cada una con su
   propio color de identidad para ubicarse rapido entre secciones muy distintas. */
.admin-tabs{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin:16px 0 20px;
  padding:5px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.admin-tab-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border:none;
  border-radius:11px;
  background:transparent;
  color:rgba(255,255,255,.6);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}
.admin-tab-btn .icon{ width:16px; height:16px; }

.admin-tab-btn:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}

.admin-tab-btn.active{ color:#fff; }

.admin-tab-btn[data-admin-tab="publicaciones"].active{ color:#5ac1ff; background:rgba(86,192,255,.16); }
.admin-tab-btn[data-admin-tab="destacados"].active{ color:var(--gold); background:rgba(240,198,116,.16); }
.admin-tab-btn[data-admin-tab="soporte"].active{ color:#4ade80; background:rgba(74,222,128,.16); }
.admin-tab-btn[data-admin-tab="papelera"].active{ color:#f87171; background:rgba(248,113,113,.16); }
.admin-tab-btn[data-admin-tab="herramientas"].active{ color:#a78bfa; background:rgba(167,139,250,.16); }

.admin-tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:19px;
  height:19px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:11px;
  font-weight:800;
}

.admin-tab-btn.active .admin-tab-count{
  background:rgba(255,255,255,.2);
  color:inherit;
}

/* Sub-pestanas dentro de una pestana principal (Publicaciones, Destacados, Herramientas):
   mismo patron de pildora que .admin-tabs pero mas chico y sin color propio por boton, para
   que se note que es un segundo nivel y no compita con la barra de pestanas de arriba. */
.admin-subtabs{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin:12px 0 18px;
  padding:4px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.admin-subtab-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}

.admin-subtab-btn:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}

.admin-subtab-btn.active{
  color:#fff;
  background:rgba(255,255,255,.12);
}

/* Pestana Herramientas: grupos con color e icono propios en vez de una fila continua de
   tarjetas identicas, para que se entienda de un vistazo que hace cada bloque. */
.admin-tools-group{
  --group-accent:#a78bfa;
  margin-top:22px;
  padding:16px 16px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--group-accent);
}
.admin-tools-group:first-child{ margin-top:16px; }
.admin-tools-group--comms{ --group-accent:#fb7185; }
.admin-tools-group--data{ --group-accent:#818cf8; }
.admin-tools-group--metrics{ --group-accent:#2dd4bf; }

.admin-tools-group-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.admin-tools-group-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:color-mix(in srgb, var(--group-accent) 18%, transparent);
  color:var(--group-accent);
}
.admin-tools-group-icon .icon{ width:18px; height:18px; }
.admin-tools-group-title{ font-size:15px; font-weight:800; color:var(--text); }
.admin-tools-group-sub{ margin:2px 0 0; font-size:12.5px; color:var(--muted); }

.admin-tool-card + .admin-tool-card{ margin-top:12px; }
.admin-tool-divider{
  margin:16px 0;
  border-top:1px dashed rgba(255,255,255,.14);
}

/* Tema propio del admin: un panel de control aparte del sitio publico, no un sabor del
   mismo degradado azul-oceano. Fondo plano casi negro (en vez del degradado con tintes
   azules de la app) para que las superficies con overlay blanco (tarjetas, inputs,
   bordes) se noten con mucho mas contraste encima. Todo bajo body[data-page="admin"]
   para que no afecte ninguna otra pagina. */
body[data-page="admin"]{
  --bg1:#06080d;
  --bg2:#0b0e16;
  --text:#f4f7fc;
  --muted:rgba(244,247,252,.82);
  --card:#131826;
  --stroke:rgba(255,255,255,.12);
  --shadow:0 18px 40px rgba(0,0,0,.5);
  background:#06080d;
}

body[data-page="admin"] .help{ color:rgba(244,247,252,.78); }

body[data-page="admin"] .notice{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-style:solid;
}

body[data-page="admin"] .input,
body[data-page="admin"] select,
body[data-page="admin"] textarea,
body[data-page="admin"] .searchbar{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.18);
}

body[data-page="admin"] .input::placeholder,
body[data-page="admin"] textarea::placeholder{
  color:rgba(244,247,252,.42);
}

body[data-page="admin"] .btn.ghost{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.2);
  color:var(--text);
}

body[data-page="admin"] .btn.secondary{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);
  color:var(--text);
}

body[data-page="admin"] .pill{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

body[data-page="admin"] .hr{ background:rgba(255,255,255,.16); }

body[data-page="admin"] .filters-panel{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
}

body[data-page="admin"] .modal-card{
  background:var(--card);
  border-color:rgba(255,255,255,.16);
}
body[data-page="admin"] .modal-head{ border-bottom-color:rgba(255,255,255,.12); }

body[data-page="admin"] header:not(.landing-header){
  background:rgba(9,12,19,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Las tarjetas de "pendientes" usaban una base navy (rgba(7,22,38,.72)) pensada para
   verse sobre el degradado azul del sitio publico: contra el nuevo fondo casi negro del
   admin, esa misma base se aclara para que cada tarjeta siga notandose como una
   superficie propia, no como un bloque mas del fondo. */
body[data-page="admin"] .review-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    #141b2c;
}body[data-page="admin"] .review-item.review-item-approved{
  background:
    linear-gradient(180deg, rgba(34,197,94,.12), rgba(255,255,255,.03)),
    #141b2c;
}
body[data-page="admin"] .review-item.review-item-inactive{
  background:
    linear-gradient(180deg, rgba(148,163,184,.12), rgba(255,255,255,.03)),
    #141b2c;
}
body[data-page="admin"] .review-item.review-item-expiring-soon{
  background:
    linear-gradient(180deg, rgba(250,204,21,.18), rgba(255,255,255,.03)),
    #141b2c;
}.admin-owner-group + .admin-owner-group{
  margin-top:26px;
  padding-top:20px;
  border-top:1px dashed rgba(255,255,255,.16);
}

.admin-owner-group-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:10px;
  width:fit-content;
}

.admin-owner-group--customer .admin-owner-group-header{
  color:#d7dde8;
  background:rgba(255,255,255,.07);
}

.admin-owner-group--courtesy .admin-owner-group-header{
  color:#ffcb8a;
  background:rgba(255,159,67,.14);
}

.admin-owner-group-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:19px;
  height:19px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:11px;
}

.admin-municipio-group{
  display:grid;
  gap:10px;
}

.admin-municipio-group + .admin-municipio-group{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}

.admin-municipio-group-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  color:#5ac1ff;
  text-transform:uppercase;
}

.admin-municipio-group-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(86,192,255,.16);
  border:1px solid rgba(86,192,255,.4);
  color:#5ac1ff;
  font-size:12px;
  font-weight:800;
}

.agenda-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.agenda-group + .agenda-group{
  margin-top:20px;
}

.agenda-group-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bg3);
  padding-bottom:6px;
  border-bottom:1px solid rgba(86,192,255,.2);
}

/* En pantallas grandes, la lista de resultados de inicio pasa de una sola columna
   apilada a una cuadrícula; en celular (por debajo de este ancho) no cambia nada. */
@media (min-width: 900px){
  body[data-page="home"] #list:not(:has(> .agenda-group)){
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:18px;
  }

  body[data-page="home"] #list:not(:has(> .agenda-group)) > .item:not(.review-item){
    margin-bottom:0;
  }

  body[data-page="home"] #list:not(:has(> .agenda-group)) > .notice:only-child{
    grid-column:1 / -1;
  }

  body[data-page="home"] .agenda-group{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:18px;
  }

  body[data-page="home"] .agenda-group-title{
    grid-column:1 / -1;
  }

  body[data-page="home"] .agenda-group > .item:not(.review-item){
    margin-bottom:0;
  }

  /* Sin align-items:start, la cuadricula estira cada tarjeta a la altura de la fila
     (todas del mismo tamano); item-body crece para absorber ese espacio extra y los
     botones quedan siempre pegados abajo, sin importar cuanto texto tenga cada una. */
  body[data-page="home"] #list:not(:has(> .agenda-group)) > .item:not(.review-item) .item-body,
  body[data-page="home"] .agenda-group > .item:not(.review-item) .item-body{
    flex:1 1 auto;
  }
}

.item{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border-radius:22px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  animation:itemFadeInUp .38s cubic-bezier(.2,.8,.2,1) both;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 8px 20px -12px rgba(0,0,0,.4);
  transition:transform .12s ease, box-shadow .18s ease;
}

.item:not(.review-item){
  cursor:pointer;
}

.item:not(.review-item) .item-actions{
  cursor:default;
}

@media (hover:hover){
  .item:hover{
    box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 14px 28px -14px rgba(0,0,0,.5);
  }

  .item:not(.review-item):hover{
    transform:translateY(-3px);
  }
}

.item:not(.review-item):last-child{
  margin-bottom:0;
}

.item:not(.review-item){
  margin-bottom:16px;
  flex-direction:column;
  align-items:stretch;
  padding:0;
  overflow:hidden;
  border-color:rgba(255,255,255,.16);
  box-shadow: 0 8px 20px rgba(0,0,0,.32);
}

.item-photo{
  position:relative;
  display:block;
  width:100%;
  height:190px;
  flex:0 0 auto;
  background: rgba(4,12,28,.9);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.item-photo img{ width:100%; height:100%; object-fit:contain; display:block; }

.item-photo img.is-portrait{ object-fit:cover; }

.item-photo img.item-photo-bg{
  position:absolute;
  inset:0;
  object-fit:cover;
  filter: blur(18px) brightness(.5) saturate(1.15);
  transform: scale(1.15);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.item-photo img.fade-img{
  position:relative;
  z-index:1;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover){
  .item:hover .item-photo img.fade-img{
    transform:scale(1.05);
  }

  .item:hover .item-photo img.item-photo-bg{
    transform:scale(1.2);
  }
}

.item-photo img.is-fallback{
  object-fit:contain;
  padding:20px;
  background:rgba(8,25,42,.72);
}

.item-photo-placeholder{
  --cat-color: #56c0ff;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 30%, transparent), color-mix(in srgb, var(--cat-color) 14%, #0a1830));
}

.item-photo-placeholder .icon{
  width:44px;
  height:44px;
  color: color-mix(in srgb, var(--cat-color) 75%, white);
  opacity:.85;
}

.item-photo-badge{
  position:absolute;
  top:10px;
  z-index:2;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  backdrop-filter: blur(6px);
}

.item-photo-badge-new{
  left:10px;
  background: rgba(45,212,191,.88);
  color:#04211d;
}.item-photo-badge-count{
  color:rgba(232,244,255,.62);
  font-weight:600;
}

/* Categoria + "Nuevo" agrupados arriba a la izquierda de la foto. Se deja libre la
   esquina derecha para la cinta de "Destacado". */
.item-photo-badges-top{
  position:absolute;
  top:10px;
  left:10px;
  right:78px;
  z-index:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  pointer-events:none;
}

.item-photo-badges-top .item-photo-badge{
  position:static;
}

.item-photo-cat{
  --cat-color:#56c0ff;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px 4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  color: color-mix(in srgb, var(--cat-color) 82%, white);
  background: rgba(8,15,30,.62);
  border:1px solid color-mix(in srgb, var(--cat-color) 48%, transparent);
  backdrop-filter: blur(6px);
}

.item-photo-cat .icon{
  width:12px;
  height:12px;
}

.item-photo-wrap{
  position:relative;
}

.item-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}/* 38px, no 30px: por debajo de eso el area de toque es mas chica que un dedo y en la
   practica el tap fallaba el boton "a veces si, a veces no" sin caer en ningun otro
   elemento (el hueco entre el titulo y el corazon no tiene handler). */
.item-favorite-toggle{
  flex-shrink:0;
  width:38px;
  height:38px;
  padding:0;
  touch-action:manipulation;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:var(--muted);
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}

.item-favorite-toggle:active{
  transform:scale(.88);
}

.item-favorite-toggle .icon{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.item-favorite-toggle.is-favorite{
  background: rgba(255,93,122,.14);
  border-color:rgba(255,93,122,.4);
  color:#ff5d7a;
}

.item-favorite-toggle.is-favorite .icon{
  fill:#ff5d7a;
}/* Negocio con publicidad activa en Destacados: borde mas grueso fijo, mas un punto de
   luz (el "cometa": svg .destacado-comet-ring mas abajo) que recorre continuamente el
   borde, en vez de un simple pulso de brillo estatico. Al no ponerle "animation" a .item
   mismo, no hay conflicto de especificidad con .item-enter-visible (que si la usa para
   el fade-in) como paso con el pulso anterior. */
.item.item-destacado{
  /* .item (la tarjeta) no tenia "position", asi que el "cometa" (position:absolute; inset:0
     mas abajo) se posicionaba contra un ancestro lejano en vez de la propia tarjeta, y
     terminaba pintandose por detras de la foto. position+z-index aqui crean un contexto de
     apilamiento propio: el cometa (z-index:1) queda garantizado por encima de toda la foto. */
  position:relative;
  z-index:0;
  border-width:3px;
  border-color: var(--gold-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 10px 22px -12px rgba(240,198,116,.35);
}

@media (hover:hover){
  .item.item-destacado:hover{
    box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 16px 30px -14px rgba(240,198,116,.45);
  }
}

/* El "cometa": un tramo corto y brillante que recorre el contorno de la tarjeta sin
   parar. pathLength="100" en el <rect> (mismo truco que .publish-cta-ring) hace que el
   dasharray/dashoffset se midan en porcentaje del perimetro, asi que se ve igual sin
   importar el tamaño real de cada tarjeta. */
.destacado-comet-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:5;
}

.destacado-comet-ring rect{
  x:0;
  y:0;
  width:100%;
  height:100%;
  rx:18px;
  fill:none;
  stroke: var(--gold);
  stroke-width:15px;
  stroke-linecap:round;
  stroke-dasharray:10 90;
  animation: destacadoCometTravel 2.6s linear infinite;
}

/* Tres tramos identicos, cada uno arrancando un poquito mas tarde que el anterior: como
   tienen la misma duracion y se repiten para siempre, ese desfase de tiempo se mantiene
   constante en cada vuelta, dando el efecto de una cola que se va apagando detras de la
   cabeza en vez de un solo tramo solido moviendose. */
.destacado-comet-ring .comet-head{
  filter: drop-shadow(0 0 6px rgba(240,198,116,1)) drop-shadow(0 0 3px rgba(255,241,214,.95));
}

.destacado-comet-ring .comet-tail-2{
  opacity:.45;
  animation-delay:.09s;
}

.destacado-comet-ring .comet-tail-3{
  opacity:.18;
  animation-delay:.18s;
}

@keyframes destacadoCometTravel{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-100; }
}

@media (prefers-reduced-motion: reduce){
  .destacado-comet-ring rect{
    animation:none;
    opacity:.55;
  }
}/* Ciclo completo: escribe (con steps, como maquina de escribir), se queda un rato
   completa, se borra rapido y vuelve a escribir, en bucle mientras la tarjeta siga
   marcada como vista. max-content no se anima suave en la mayoria de navegadores (salta
   directo al final), por eso el ancho final es un valor fijo en "ch" (un poco mas ancho
   que las 9 letras de "Destacado" para no recortar la ultima letra por el letter-spacing). */
@keyframes destacadoTypewriter{
  0%{ width:0; animation-timing-function: steps(9, end); }
  25%{ width:11ch; animation-timing-function: linear; }
  87.5%{ width:11ch; animation-timing-function: ease-in; }
  100%{ width:0; }
}

@media (prefers-reduced-motion: reduce){
  .item.item-destacado{
    animation:none;
    box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 0 0 3px var(--gold-line), 0 10px 22px -12px rgba(240,198,116,.35);
  }
  .item-photo-ribbon-text{
    animation:none;
    width:max-content;
  }
}

.item-body{
  padding:14px 14px 4px;
  min-width:0;
}

.item-title-block{
  min-width:0;
  flex:1 1 auto;
}

/* Encabezado de la pagina de detalle: mismo orden y mismos elementos que la tarjeta del
   listado (chips, nombre + ubicacion + corazon, franja de precio, fila de acciones y
   WhatsApp como pastilla centrada). */
.detail-summary{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}

.detail-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.detail-title{
  margin:0;
  font-size:22px;
  line-height:1.25;
  font-weight:900;
}

.detail-rating-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(8,15,30,.62);
  border:1px solid rgba(255,255,255,.18);
  color:#ffd166;
  font-size:11.5px;
  font-weight:800;
}.detail-wa-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}

.item-meta-line{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  font-size:12.5px;
  color:var(--muted);
}

.item-meta-line .icon{
  width:13px;
  height:13px;
  flex-shrink:0;
}.item-price-name{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.item-price-value{
  color:var(--gold);
  font-size:15px;
  font-weight:800;
  text-align:right;
}

.item-price-value small{
  font-size:11px;
  font-weight:600;
  opacity:.8;
}

.item:active{
  transform:scale(.98);
  box-shadow: 0 1px 1px rgba(0,0,0,.16), 0 4px 10px -8px rgba(0,0,0,.4);
}

/* El escalonado por posicion ahora lo controla --stagger-i (ver .item-enter arriba),
   puesto por renderItemCard segun el orden real de la lista, no por nth-of-type (que
   tenia mas especificidad que .item-enter y tapaba ese cambio sin que se notara). */

@keyframes itemFadeInUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.skeleton-item{
  animation:itemFadeInUp .3s ease both;
  pointer-events:none;
}

.skeleton-box{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:rgba(255,255,255,.08);
}

.skeleton-box::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation:skeletonShimmer 1.4s ease-in-out infinite;
}.skeleton-photo{
  width:100%;
  height:168px;
  border-radius:0;
  flex:0 0 auto;
}

.skeleton-line{
  border-radius:6px;
}

/* Entrada escalonada: cada tarjeta usa la misma animacion itemFadeInUp que .item ya
   tenia, pero retrasada segun su posicion en la lista (--stagger-i, puesto inline por
   renderItemCard) en vez de que todas aparezcan exactamente al mismo tiempo. */
.item-enter{
  animation-delay: calc(var(--stagger-i, 0) * 45ms);
}
/* Sin esto, la animacion de .item se dispara apenas se inserta en el DOM: en una lista
   larga eso significa que solo las 2-3 tarjetas que ya estan en pantalla se ven aparecer,
   y el resto ya termino de animar mucho antes de que el usuario llegue a verlas al hacer
   scroll. activateStaggerReveal() (app.js) las deja en pausa hasta que entran al viewport. */
.item-enter.item-enter-pending{
  opacity:0;
  animation:none;
}
.item-enter.item-enter-visible{
  animation:itemFadeInUp .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--stagger-i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce){
  .item-enter.item-enter-pending{
    opacity:1;
  }
}

/* Fundido suave cuando una foto real termina de cargar, en vez de aparecer de golpe. */
.fade-img{
  opacity:0;
  transition:opacity .35s ease;
}
.fade-img.is-loaded{
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .fade-img{
    opacity:1;
    transition:none;
  }
}

@keyframes skeletonShimmer{
  100%{ transform:translateX(100%); }
}

@media (prefers-reduced-motion: reduce){
  .item, .skeleton-item{
    animation:none;
  }
  .skeleton-box::after{
    animation:none;
    display:none;
  }
}
.item.item-expiring-soon{
  border-color:rgba(250,204,21,.48);
  background:
    linear-gradient(180deg, rgba(250,204,21,.14), rgba(255,255,255,.05)),
    rgba(255,255,255,.06);
  box-shadow:
    inset 4px 0 0 rgba(250,204,21,.9),
    0 10px 26px rgba(250,204,21,.12);
}
.item-left{ display:flex; gap:12px; align-items:flex-start; min-width:0; flex:1 1 auto; }.thumb{
  width:54px; height:54px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb img{ cursor: zoom-in; }
.thumb img.is-fallback{
  object-fit:contain;
  padding:6px;
  background:rgba(8,25,42,.72);
}

.item-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto; }

.admin-ad-extend-inline{ display:flex; align-items:center; gap:6px; }
.admin-ad-extend-inline input[type="date"]{
  width:auto;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}

.item:not(.review-item) .item-actions{
  padding:10px 14px 14px;
}

/* Botones de la tarjeta publica: una sola fila de acciones iguales entre si (Ver /
   Como llegar / QR; si el negocio no tiene ubicacion, "Como llegar" no existe y quedan
   dos), WhatsApp debajo como pastilla verde centrada del ancho de su contenido, y
   "Editar" como enlace discreto al final. Aplica siempre (celular y cuadricula de
   escritorio) porque lo que importa es el ancho de la tarjeta, no el del viewport. */
.item:not(.review-item) .item-actions.item-actions-compact{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:12px;
}.item:not(.review-item) .item-actions.item-actions-compact .item-actions-row-whatsapp{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}.item-owner-link{
  text-align:right;
  margin-top:-4px;
  font-size:11.5px;
  color:rgba(232,244,255,.55);
}

.item-owner-link a{
  color:var(--bg3);
  font-weight:700;
  text-decoration:underline;
}.item-plan-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.item-plan-chip{
  padding:7px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}.mini{ font-size:12px; color: var(--muted); }

.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.photo{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  position:relative;
}
.photo img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
  cursor: zoom-in;
}

.gallery .photo-hero{
  grid-column: 1 / -1;
}

.gallery .photo-hero img{
  height:230px;
  object-fit:contain;
  background:rgba(4,12,28,.9);
}

.gallery .photo-hero img.is-portrait{
  object-fit:cover;
}

/* Detalle de una publicacion: solo se ven la foto principal + 4 miniaturas (una fila),
   para que el contacto y los datos del negocio no queden varias pantallas mas abajo cuando
   hay muchas fotos. El resto sigue en el DOM (oculto aqui) para que el visor de pantalla
   completa -que lee todas las <img> del .gallery al abrirse- las tenga disponibles. */
.gallery-detail .photo:nth-child(n+6){
  display:none;
}
.photo-more-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,12,28,.62);
  color:#fff;
  font-weight:800;
  font-size:13px;
  pointer-events:none;
}
.photo-preview-card{
  background:rgba(7,22,36,.48);
}
.photo-preview-card.is-editor{
  touch-action:none;
}
.photo-primary-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(28,138,196,.94);
  color:#daf2ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.photo-caption{
  padding:8px 10px;
  font-size:11px;
  color:rgba(234,246,255,.74);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-top:1px solid rgba(255,255,255,.08);
}
.photo-remove-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border:none;
  border-radius:999px;
  background:rgba(8,25,42,.88);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  z-index:2;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.photo-editor-actions{
  position:absolute;
  left:8px;
  right:8px;
  bottom:44px;
  z-index:2;
  display:flex;
  gap:6px;
  justify-content:center;
  pointer-events:none;
}
.photo-order-btn{
  pointer-events:auto;
  min-width:118px;
  height:32px;
  padding:0 12px;
  border:none;
  border-radius:999px;
  background:rgba(8,25,42,.88);
  color:#fff;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.photo-order-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.photo-order-btn.drag-handle{
  cursor:grab;
}
.gallery.is-photo-sorting .photo-order-btn.drag-handle{
  cursor:grabbing;
}
.photo-preview-card.is-photo-dragging{
  z-index:5;
  opacity:.92;
  box-shadow:0 20px 34px rgba(0,0,0,.32);
}.landing-download-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

.google-play-badge-link{
  display:inline-flex;
  align-items:center;
  opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}

.google-play-badge-link:hover{
  opacity:1;
  transform:translateY(-1px);
}

.google-play-badge-link img{
  height:44px;
  width:auto;
  display:block;
}

.app-store-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 14px;
  background:#000;
  border:1.5px solid rgba(255,255,255,.6);
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}

.app-store-badge:hover{
  opacity:1;
  transform:translateY(-1px);
}

.app-store-badge-icon svg{
  width:auto;
  height:26px;
  fill:#fff;
  stroke:none;
}

.app-store-badge-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.15;
}

.app-store-badge-eyebrow{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}

.app-store-badge-brand{
  font-size:16px;
  font-weight:700;
  font-family:-apple-system, "Helvetica Neue", Arial, sans-serif;
}

footer{
  margin-top: 14px;
  color: rgba(234,246,255,.55);
  font-size:12px;
  padding: 0 6px;
}

.footer-credit{
  color: rgba(234,246,255,.8);
  font-weight: 600;
}

/* Barra inferior tipo app */
.bottom{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(2, 16, 28, .72);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.bottom::-webkit-scrollbar{ display:none; }
.bottom .bar{
  max-width:1050px;
  margin:0 auto;
  display:flex;
  gap:10px;
  justify-content:flex-start;
  align-items:center;
  width:max-content;
  min-width:100%;
}
.navbtn{
  flex:0 0 auto;
  min-width:112px;
  position:relative;
  padding:12px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:900;
  font-size:26px;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .24s ease,
    border-color .24s ease,
    box-shadow .28s ease,
    opacity .24s ease;
}

.navbtn:hover{
  transform:translateY(-2px);
  border-color:rgba(167,240,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 20px rgba(4,18,31,.16);
}

.navbtn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.navbtn-count{
  position:absolute;
  top:6px;
  right:6px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.navbtn.active{
  background:
    radial-gradient(circle at top, rgba(167,240,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(31,162,255,.42), rgba(7,210,255,.24)),
    rgba(255,255,255,.10);
  border-color: rgba(167,240,255,.95);
  color:#ffffff;
  box-shadow:
    0 14px 28px rgba(31,162,255,.24),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(167,240,255,.18),
    0 0 0 4px rgba(31,162,255,.10);
  transform: translateY(-3px) scale(1.04);
}

.navbtn.active .navbtn-count{
  background:rgba(167,240,255,.24);
  border-color:rgba(167,240,255,.34);
  color:#ffffff;
}

body[data-page="home"] .bottom{
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    opacity .28s ease,
    filter .28s ease;
}

@media (max-width: 860px){
  body[data-page="home"] .container{
    padding:12px 12px 280px;
    gap:12px;
    --container-pad-x: 12px;
    --container-pad-top: 12px;
  }

  body[data-page="home"] .card{
    padding:16px;
    border-radius:22px;
  }

  .container{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .item:not(.review-item){
    flex-direction:column;
    align-items:stretch;
  }

  .item:not(.review-item) .item-left{
    width:100%;
  }

  .item:not(.review-item) .item-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-content:stretch;
  }

  .item:not(.review-item) .item-actions .btn{
    width:100%;
    min-width:0;
    justify-content:center;
  }

  .item:not(.review-item) .item-actions > *:last-child:nth-child(2n+1){
    grid-column:1 / -1;
  }

  header{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:2px 2px 0;
  }

  .brand{
    width:100%;
    min-width:0;
    align-items:flex-start;
    gap:12px;
  }

  .brand > div{
    min-width:0;
    width:100%;
  }

  .logo-img{
    width:64px;
    height:64px;
    border-radius:22px;
    flex:0 0 auto;
  }

  .brand h1{
    font-size:24px;
  }

  .brand small{
    display:block;
    width:100%;
    line-height:1.45;
    white-space:normal;
    word-break:break-word;
  }

  body[data-page="home"] .home-brand-subtitle{
    display:none !important;
  }

  .section-focus-pill{
    min-width:0;
    width:100%;
    padding:10px 12px;
  }

  .section-focus-value{
    font-size:18px;
  }

  .row{
    width:100%;
    min-width:0;
  }

  .actions{
    width:100%;
    min-width:0;
  }

  .actions .btn{
    max-width:100%;
  }

  .searchbar{
    width:100%;
    min-width:0;
  }

  .searchbar input{
    min-width:0;
  }

  .home-quickbar{
    top:6px;
    gap:8px;
    margin-bottom:10px;
    padding:8px;
    border-radius:16px;
  }

  .home-quickbar .btn{
    flex:1 1 auto;
    justify-content:center;
    min-width:0;
    font-size:13px;
  }

  .welcome-strip{
    flex-direction:column;
    padding:12px 14px;
  }

  .welcome-strip-steps{
    display:none;
  }

  .home-toolbar-top{
    margin-bottom:10px;
  }

  .home-publish-actions{
    display:flex;
    justify-content:center;
    gap:8px;
  }

  .home-search-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .home-secondary-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .home-secondary-actions .btn,
  .home-toolbar-top .actions .btn{
    width:100%;
    min-width:0;
    justify-content:center;
    padding:11px 12px;
    font-size:12px;
    gap:6px;
  }

  .home-publish-actions .btn{
    width:min(220px, 100%);
  }

  .searchbar{
    padding:12px 14px;
    border-radius:16px;
  }

  .searchbar input{
    font-size:16px;
  }

  .section-guide-banner{
    padding:12px 14px;
    font-size:14px;
    line-height:1.45;
  }

  .title{ font-size:36px; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .kv{ grid-template-columns: 1fr; }
  .filters-grid{ grid-template-columns: 1fr; }
  .section-focus-back{
    width:100%;
    justify-content:center;
    padding:16px 20px;
    min-height:58px;
    font-size:16px;
    border-radius:22px;
  }

  .section-focus-hero{
    text-align:left;
    padding:16px 16px 18px;
  }

  .section-focus-hero-count{
    min-width:30px;
    height:30px;
    padding:0 9px;
    font-size:13px;
  }

  body[data-page="home"] .tab{
    min-width:max-content;
  }

  .subtabs-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .bottom{
    padding-left:10px;
    padding-right:10px;
    touch-action:pan-x;
  }
  .bottom .bar{
    gap:8px;
  }
  .navbtn{
    min-width:66px;
    padding:10px 8px;
    font-size:21px;
  }
  .landing-container{
    padding-top:26px;
    gap:18px;
  }
  .landing-card{
    padding:24px 18px 20px;
    border-radius:22px;
  }
  .landing-card .subtitle{
    margin-top:0;
    font-size:14px;
    line-height:1.5;
  }
  .landing-card .sub{
    margin-top:12px !important;
    font-size:13px;
    line-height:1.45;
  }
  .landing-chip{
    font-size:13px;
    padding:9px 12px;
  }
  .landing-categories{
    margin-top:14px;
    padding:14px 10px 10px;
    border-radius:22px;
  }
  .landing-actions .btn{
    width:100%;
    min-width:0;
  }
  .landing-actions .publish-cta-wrap{
    width:100%;
  }
  .landing-cta{
    min-height:56px;
    padding:14px 18px !important;
    font-size:16px;
  }
}

@media (min-width: 861px){
  body[data-page="home"] .bottom{
    display:none;
  }

  body[data-page="home"] #sectionBadge{
    display:none;
  }

  .floating-publish-btn{
    display:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .landing-cta,
  .landing-cta::after{
    animation:none;
  }
  .landing-cta{
    transition:none;
  }
  .tabs,
  .tab,
  .navbtn,
  .section-focus-back,
  .section-focus-hero,
  .section-focus-hero-main,
  .section-focus-hero-count,
  body[data-page="home"] .bottom{
    transition:none !important;
    animation:none !important;
    filter:none !important;
    transform:none !important;
  }
  .section-focus-hero::before{
    display:none;
  }
  .item,
  .subtabs-wrap,
  .notice,
  .error,
  .success-notice,
  .modal,
  .modal-card,
  .lightbox-backdrop,
  .lightbox-shell,
  .app-splash-ring,
  .app-splash-ring-draw,
  .app-splash-logo-wrap,
  .app-splash-logo-wrap::after,
  .app-splash-logo,
  .app-splash-title,
  .app-splash-subtitle,
  .landing-header,
  .landing-header .logo-img,
  .municipio-tabs-wrap,
  .municipio-tab,
  .municipio-tab::before{
    animation:none !important;
  }
}
.logo-img{
  width:118px;
  height:118px;
  border-radius:26px;
  object-fit:cover;
  object-position:center 16%;
  padding:0;
  background:transparent;
  border:1px solid rgba(204,236,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
/* ====== SELECT / DROPDOWNS ====== */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(0,0,0,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2356c0ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
}

/* Opciones del menú desplegable */
select option {
  background-color: #ffffff;
  color: #0b2239;
}

/* Encabezado de grupo (ej: "Urabá"). Algunos navegadores moviles (iOS) ignoran
   este estilo y usan su propio menu nativo; por eso el texto de cada opcion
   tambien incluye la region entre parentesis, para que se entienda igual. */
optgroup {
  background-color: #ffffff;
  color: #0b2239;
  font-weight: 800;
  font-style: normal;
}

/* Opción seleccionada */
select option:checked {
  background-color: #1e88e5;
  color: #ffffff;
}

/* Hover (en desktop) */
select option:hover {
  background-color: #bbdefb;
  color: #0b2239;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  margin-right:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}/* ===== Modal Planes ===== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;              /* 👈 IMPORTANTE: oculto por defecto */
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.modal-card{
  width: min(860px, 96vw);
  border-radius:22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.modal-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal-title{ font-size: 18px; font-weight: 900; }
.modal-sub{ font-size: 13px; opacity: .85; margin-top: 4px; }
.icon-btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    box-shadow .28s ease,
    filter .28s ease,
    border-color .28s ease,
    background-color .28s ease;
}
.modal-body{ padding: 14px 16px 6px; }
.modal-foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.tutorial-card{
  width:min(640px, 94vw);
}

.tutorial-copy{
  display:grid;
  gap:12px;
}

.tutorial-bullets{
  display:grid;
  gap:12px;
}

body.tutorial-overlay-open::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(3, 11, 20, .34);
  z-index:9996;
  pointer-events:none;
}

.tutorial-target-active{
  position:relative;
  z-index:9997 !important;
  border-radius:22px;
  box-shadow:
    0 0 0 4px rgba(167,240,255,.28),
    0 20px 50px rgba(0,0,0,.38);
}

.home-tutorial-coachmark{
  position:fixed;
  z-index:9998;
  width:min(360px, calc(100vw - 24px));
}

.home-tutorial-card{
  background:linear-gradient(180deg, rgba(10,31,51,.96), rgba(8,23,38,.94));
  border:1px solid rgba(167,240,255,.24);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.42);
  padding:16px;
}

.home-tutorial-step{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.home-tutorial-title{
  font-size:18px;
  font-weight:900;
  line-height:1.2;
}

.home-tutorial-text{
  margin-top:8px;
  color:rgba(240,248,255,.9);
  line-height:1.5;
  font-size:14px;
}

.home-tutorial-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.section-guide-banner{
  border: 1px solid rgba(31,162,255,.22);
  background: linear-gradient(135deg, rgba(31,162,255,.12), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.advertising-crop-modal-card{
  width:min(560px, 96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
}

.advertising-crop-modal-card .modal-body{
  overflow-y:auto;
  flex:1;
  min-height:0;
}

.advertising-crop-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.advertising-crop-preview-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.advertising-crop-preview{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:4 / 3;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background-color:rgba(4,23,38,.86);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.advertising-crop-preview--portrait{
  max-width:280px;
}

.advertising-crop-preview-blur{
  position:absolute;
  inset:-20px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  filter:blur(18px) brightness(.55);
  transform:scale(1.1);
}

.advertising-crop-preview-main{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
}

.advertising-crop-controls{
  display:grid;
  gap:10px;
  align-content:start;
}

.advertising-crop-controls input[type="range"]{
  width:100%;
}

.advertising-crop-note{
  margin-top:4px;
}

.ad-guide{
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}

.ad-guide summary{
  list-style:none;
  width:100%;
  border-radius:0;
}

.ad-guide summary::-webkit-details-marker{
  display:none;
}

.ad-guide[open] summary{
  border-bottom:1px solid rgba(255,255,255,.1);
}

.ad-guide-body{
  padding:14px;
}

.ad-guide-steps{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.ad-guide-step{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
}

.promo-qr-hero{
  position: relative;
  overflow: hidden;
}

.promo-qr-price-badge{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:fit-content;
  padding:10px 18px;
  border-radius:16px;
  border:1px solid var(--gold-line);
  /* Solido en vez de un wash translucido: ese dependia de un fondo oscuro detras para
     notarse: sobre cualquier otro fondo (claro o con overlays) el precio casi desaparecia. */
  background: linear-gradient(135deg, #0c172d, #17356d);
  box-shadow: 0 8px 20px rgba(10,20,40,.28);
  margin-bottom:14px;
}
.promo-qr-price-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--gold);
}
.promo-qr-price-amount{
  font-family:"Fraunces", serif;
  font-size:34px;
  font-weight:600;
  line-height:1.1;
  color:#fff;
}
.promo-qr-price-note{
  font-size:12px;
  color: rgba(255,255,255,.75);
}

.promo-qr-benefits{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.promo-qr-benefit{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.promo-qr-benefit .icon-slot{
  flex: 0 0 auto;
  width:34px;
  height:34px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Solido (gold sobre navy) en vez del wash translucido de --gold-soft: ese era casi
     invisible fuera de un fondo bien oscuro detras. */
  background: var(--gold);
  color: #17304f;
  box-shadow: 0 4px 10px rgba(240,198,116,.3);
}
.promo-qr-benefit b{
  display:block;
  font-size:14px;
}
.promo-qr-benefit span{
  display:block;
  font-size:12.5px;
  opacity:.85;
  margin-top:2px;
}

.plan-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 860px){
  .plan-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .plan-grid{ grid-template-columns: 1fr; }
}

.plan{
  position: relative;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.plan.best{
  border-color: rgba(31,162,255,.45);
  background: rgba(31,162,255,.12);
}
.plan-badge{
  position:absolute;
  top:10px;
  right:10px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(135deg, rgba(240,198,116,.3), rgba(240,198,116,.12));
  color:#ffe9c2;
  font-weight: 800;
  letter-spacing: .02em;
}
.plan-name{ font-weight: 900; }
.plan-price{ font-size: 18px; font-weight: 900; margin-top: 6px; }
.plan-desc{ font-size: 12px; opacity: .85; margin-top: 6px; }
.planGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
  margin-top:12px;
}
.planCard{
  padding:14px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, background .18s ease;
}
.planCard:hover{
  background: rgba(255,255,255,.10);
}
.planCard:not(.disabled):active{
  transform:scale(.97);
  background: rgba(255,255,255,.14);
}
.planCard.active{
  border-color: rgba(31,162,255,.65);
  background: rgba(31,162,255,.18);
}
.planCard.disabled{
  cursor: not-allowed;
  opacity: .58;
  filter: grayscale(.15);
}
.planCard.disabled:hover{
  background: rgba(255,255,255,.06);
}
.planName{ font-weight:900; }
.planPrice{ opacity:.9; margin-top:4px; }
#plansModal{ display:none; }
.planCard{
  position: relative;
}

.planBadge{
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--gold-line);
  background: linear-gradient(135deg, rgba(240,198,116,.3), rgba(240,198,116,.12));
  color:#ffe9c2;
  opacity:1;
  font-weight:800;
  letter-spacing:.02em;
}

.planDesc{
  margin-top:6px;
  font-size:12px;
  opacity:.85;
  line-height:1.25;
}
/* ===== PLAN DESTACADO ===== */
.planCard.featured{
  position: relative;
  border: 2px solid rgba(31,162,255,.75);
  background: linear-gradient(
    180deg,
    rgba(31,162,255,.25),
    rgba(31,162,255,.12)
  );
  box-shadow: 0 0 25px rgba(31,162,255,.35);
  transform: scale(1.04);
  padding-top: 28px; /* 👈 espacio para el badge */
}

.planCard.featured .planName{
  font-size: 16px;
}

.planCard.featured .planPrice{
  font-size: 20px;
  color: #A7F0FF;
}
.plan-selected-bar{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius:16px;
  background: rgba(31,162,255,.12);
  border: 1px solid rgba(31,162,255,.28);
  color: rgba(234,246,255,.92);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-selected-bar .muted{
  font-weight: 700;
  opacity: .85;
}

.top,
.top-actions,
.topActions,
.cardHead,
.detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}/* En movil el titulo y los botones no caben en la misma linea: .detail-head los apila,
   y sin esto la fila de botones quedaba a su ancho natural pegada a la izquierda (se
   veia asimetrica) en vez de ocupar todo el ancho disponible y centrarse como el resto
   de la tarjeta. */
@media (max-width: 640px){
  .detail-head-actions{
    width:100%;
    justify-content:center;
  }
}

.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 10000;
}

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 16, .86);
  backdrop-filter: blur(8px);
}

.lightbox-shell{
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    max-width: 1100px;
  }

.lightbox-stage{
  width: 100%;
  min-width: 0;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.lightbox-image{
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: rgba(0,0,0,.28);
}

.lightbox-caption{
  width: 100%;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  text-align: center;
  background: rgba(0,0,0,.22);
  word-break: break-word;
}

.lightbox-nav{
    display: none !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--text);
  font-size: 28px;
  display: inline-flex;
  align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .lightbox-nav.prev{
    left: 14px;
  }

  .lightbox-nav.next{
    right: 14px;
  }

body.lightbox-open{
  overflow: hidden;
}

.evento-interstitial{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 10500;
}

.evento-interstitial-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 16, .58);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.evento-interstitial-shell{
  position: relative;
  z-index: 1;
  width: auto;
  height: min(88vh, calc(94vw * 16 / 9));
  max-width: 94vw;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: modalCardIn .28s cubic-bezier(.22,1,.36,1) both;
}

.evento-interstitial-tag{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.evento-interstitial-tag-logo{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.evento-interstitial-progress{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: rgba(255,255,255,.14);
}

.evento-interstitial-progress span{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #56c0ff, #1f5fd6);
}

.evento-interstitial-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
}

.evento-interstitial-media{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* Degradado de color liso, no una copia de la imagen: el cartel de un anuncio suele
     llevar texto, y una copia ampliada/borrosa del mismo texto se veia como un eco
     confuso en vez de un fondo bonito. */
  background: linear-gradient(180deg, #0c172d, #17356d 64%, #0a214c);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.evento-interstitial-media img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.evento-interstitial-media-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(.5) saturate(1.15);
  -webkit-filter:blur(18px) brightness(.5) saturate(1.15);
  transform:scale(1.15) translateZ(0);
  -webkit-transform:scale(1.15) translateZ(0);
  will-change:transform,filter;
}

.evento-interstitial-media-fg{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.evento-interstitial-cta{
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(10,16,30,.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--gold-line);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  transition: transform .15s ease, background .15s ease;
}

.evento-interstitial-cta .icon{
  width: 16px;
  height: 16px;
  color: var(--gold);
}

.evento-interstitial-cta:active{
  transform: translateX(-50%) scale(.96);
  background: rgba(10,16,30,.7);
}

.evento-interstitial-cta[hidden]{
  display: none;
}

body.evento-interstitial-open{
  overflow: hidden;
}

@media (max-width: 720px){
    .lightbox{
      padding: 12px;
    }
  
   .lightbox-nav{
      width: 48px;
      height: 48px;
    }
  
   .lightbox-nav.prev{
    left: 8px;
  }

  .lightbox-nav.next{
    right: 8px;
  }

  .lightbox-image{
    max-height: 72vh;
  }
}

.topActions{
  justify-content:center;
  align-items:center;
  gap:12px;
}

#plansBtn{
  min-width:190px;
  justify-content:center;
  padding:14px 20px;
  border-radius:16px;
  font-size:17px;
  font-weight:900;
  background: linear-gradient(135deg, rgba(31,162,255,1), rgba(7,210,255,.92));
  color:#042033;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(31,162,255,.28);
}

#plansBtn:hover{
  filter: brightness(1.05);
}

.wrap{
  max-width:1050px;
  margin:0 auto;
  padding:0 18px 40px;
}

.badge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(31,162,255,.16);
  border:1px solid rgba(31,162,255,.32);
  color:var(--foam);
  font-size:12px;
  font-weight:800;
}

.sub{
  color:var(--muted);
  font-size:16px;
  line-height:1.5;
}

#publishForm .label,
#formWrap .label{
  font-size:17px;
}

#publishForm .input,
#publishForm select,
#publishForm textarea,
#formWrap .input,
#formWrap select,
#formWrap textarea{
  font-size:17px;
}

.publish-loading-overlay{
  position:fixed;
  inset:0;
  z-index:9997;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(780px 420px at 50% 28%, rgba(188,226,247,.14), transparent 60%),
    linear-gradient(180deg, rgba(2,19,35,.92), rgba(4,36,68,.96));
  backdrop-filter:blur(4px);
}

.publish-loading-card{
  width:min(100%, 340px);
  display:grid;
  justify-items:center;
  gap:14px;
  text-align:center;
  padding:32px 26px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(204,236,255,.18);
  box-shadow:0 22px 54px rgba(0,0,0,.32);
  color:#bcd9ee;
}

.publish-loading-card strong{
  color:#f4faff;
}

.publish-loading-badge{
  position:relative;
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}

.publish-loading-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid rgba(127,231,255,.16);
  border-top-color:#7fe7ff;
  border-right-color:#7fe7ff;
  animation:publishSpinnerRotate 1s linear infinite;
}

.publish-loading-logo{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  animation:splashPulse 1.8s ease-in-out infinite;
}

#publishLoadingTitle{
  color:#f4fbff;
  font-size:18px;
  line-height:1.3;
}

#publishLoadingText{
  color:rgba(224,243,255,.84);
  font-size:14px;
  line-height:1.5;
}

.publish-loading-progress{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
  margin-top:6px;
}

.publish-loading-progress span{
  display:block;
  height:100%;
  width:40%;
  border-radius:999px;
  background:linear-gradient(90deg, #1fa2ff, #7fe7ff);
  animation:publishProgressSlide 1.4s ease-in-out infinite;
}

@keyframes publishSpinnerRotate{
  to{ transform:rotate(360deg); }
}

@keyframes publishProgressSlide{
  0%{ transform:translateX(-150%); }
  100%{ transform:translateX(350%); }
}

@media (max-width: 680px){
  .brand{ gap:12px; }
  .brand h1{ font-size:24px; }
  .brand small{ font-size:14px; }
  .logo-img{
    width:94px;
    height:94px;
    border-radius:22px;
  }
  .landing-header .brand h1{
    font-size:38px;
  }
  .landing-header .brand small{
    font-size:17px;
    font-weight:700;
  }
  .landing-header .logo-img{
    width:108px;
    height:108px;
    border-radius:50%;
    object-position:center 14%;
  }
  .label{
    font-size:15px;
  }

  .landing-search-results{
    padding:12px;
  }

  .landing-search-result{
    padding:12px;
  }

  .landing-search-result-body{
    gap:10px;
  }

  .landing-search-result-thumb .thumb{
    width:68px;
    height:68px;
    border-radius:16px;
  }

  .landing-search-result-top{
    flex-direction:column;
  }

  .landing-search-result-tag{
    align-self:flex-start;
  }

  .landing-search-result-meta-row{
    align-items:flex-start;
  }

  .landing-chip{
    gap:8px;
  }

  .publish-loading-indicator{
    align-items:flex-start;
    padding:14px;
    gap:12px;
  }

  .publish-loading-spinner{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .publish-loading-copy strong{
    font-size:15px;
  }

  .publish-loading-copy div{
    font-size:13px;
  }
}

.detail-info-list{
  display:flex;
  flex-direction:column;
  padding:4px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.detail-info-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.detail-info-row:last-child{
  border-bottom:none;
}

.detail-info-label{
  font-size:11.5px;
  font-weight:800;
  color:rgba(234,246,255,.5);
  text-transform:uppercase;
  letter-spacing:.04em;
  flex:0 0 auto;
}

.detail-info-value{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  text-align:right;
  overflow-wrap:anywhere;
}

.success-notice{
  border-style:solid;
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.12);
  color:rgba(230,255,238,.96);
  margin-bottom:12px;
}

.review-item{
  align-items:flex-start;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    rgba(7, 22, 38, .72);
  box-shadow: inset 4px 0 0 rgba(255,255,255,.06);
}.review-item.review-item-approved{
  border-color: rgba(34, 197, 94, .20);
  background:
    linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.03)),
    rgba(7, 22, 38, .72);
  box-shadow: inset 5px 0 0 rgba(34, 197, 94, .82);
}

.review-item.review-item-inactive{
  border-color: rgba(148, 163, 184, .18);
  background:
    linear-gradient(180deg, rgba(148,163,184,.10), rgba(255,255,255,.03)),
    rgba(7, 22, 38, .72);
  box-shadow: inset 5px 0 0 rgba(148, 163, 184, .72);
}

.review-item.review-item-expiring-soon{
  border-color: rgba(250, 204, 21, .42);
  background:
    linear-gradient(180deg, rgba(250,204,21,.16), rgba(255,255,255,.03)),
    rgba(7, 22, 38, .72);
  box-shadow:
    inset 5px 0 0 rgba(250, 204, 21, .88),
    0 14px 30px rgba(250, 204, 21, .10);
}.admin-manage-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.admin-select-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.admin-manage-card .review-item-body{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
}

.install-app-card{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(31,162,255,.22);
  background:
    linear-gradient(135deg, rgba(31,162,255,.13), rgba(255,255,255,.03)),
    rgba(7, 22, 38, .78);
}

.install-app-copy{
  min-width: 0;
}

.install-guide-text{
  margin-top: 8px;
  color: rgba(234,246,255,.82);
  line-height: 1.45;
  font-size: 13px;
}

.install-guide-modal-card{
  max-width: 560px;
}

.install-guide-steps{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 10px;
}

.install-step{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.install-step-index{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #08253c;
  background: linear-gradient(135deg, rgba(31,162,255,1), rgba(7,210,255,.9));
  flex: 0 0 auto;
}

.install-step-text{
  color: rgba(234,246,255,.94);
  line-height: 1.45;
}

.pending-focus{
  border-radius:22px;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .38), 0 0 32px rgba(245, 158, 11, .18);
  transition: box-shadow .25s ease;
}

@media (max-width: 720px){
  .install-app-card{
    flex-direction: column;
    align-items: stretch;
  }

  .review-item{
    flex-direction:column;
    align-items:stretch;
  }

  .review-item .item-left{
    width:100%;
  }

  .admin-manage-card .review-item-body{
    flex-direction:column;
    align-items:stretch;
  }

  .review-item .item-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-content:stretch;
  }

  .review-item .item-actions .btn{
    width:100%;
    min-width:0;
    justify-content:center;
  }
}

.review-copy{
  min-width:0;
  flex:1 1 auto;
}

.review-topline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.review-meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.status-pill,
.meta-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
}

.status-pill{
  border:1px solid rgba(255,255,255,.12);
}

.status-pill.pending{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.42);
  color:rgba(214,241,255,.98);
}

.status-pill.approved{
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.42);
  color:rgba(223,255,232,.98);
}

.status-pill.inactive{
  background:rgba(107,114,128,.22);
  border-color:rgba(148,163,184,.38);
  color:rgba(235,242,250,.96);
}

.status-pill.rejected{
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.42);
  color:rgba(255,225,225,.98);
}

.meta-chip{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
}

.rating-chip{
  background:rgba(250,204,21,.14);
  border-color:rgba(250,204,21,.28);
  color:rgba(186,229,255,.98);
  font-weight:800;
  gap:4px;
}

.review-stars-icons{
  display:inline-flex;
  align-items:center;
  gap:1px;
}

.review-star{
  width:13px;
  height:13px;
  flex-shrink:0;
  fill:rgba(255,255,255,.28);
  stroke:none;
}

.review-star.is-filled{
  fill:#facc15;
}
.expiring-chip{
  background:rgba(250,204,21,.18);
  border-color:rgba(250,204,21,.4);
  color:rgba(194,232,255,.98);
  font-weight:900;
}

.trust-chip{
  border-color:rgba(125,211,252,.24);
}

.open-status-chip{
  font-weight:800;
}

.open-status-chip.is-open{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.4);
  color:rgba(220,255,230,.98);
}

.open-status-chip.is-closed{
  background:rgba(148,163,184,.16);
  border-color:rgba(148,163,184,.36);
  color:rgba(230,236,244,.9);
}

.item-snippet{
  margin-top:8px;
  line-height:1.4;
  max-width:680px;
}

.item-snippet-link{
  display:block;
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}

.item-snippet-link:hover{
  color:var(--text);
  transform:translateX(2px);
}

.item-snippet-link:active{
  color:var(--text);
  transform:translateX(2px) scale(.98);
}

.item-snippet-link:focus-visible{
  outline:2px solid rgba(167,240,255,.75);
  outline-offset:4px;
  border-radius:8px;
}

.reviews-block{
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.review-head{
  align-items:flex-start;
}

.review-head-score{
  padding:10px 14px;
  border-radius:16px;
  font-weight:900;
  color:rgba(186,229,255,.98);
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.26);
}

.review-form{
  padding:14px;
  border-radius:22px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.08);
}

.review-stars{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.star-btn{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.45);
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
}

.star-btn:active{
  transform:scale(.88);
}

.star-btn.active{
  color:var(--gold);
  border-color:rgba(250,204,21,.6);
  background:rgba(250,204,21,.14);
  transform:scale(1.1);
  box-shadow:0 0 0 1px rgba(250,204,21,.3), 0 4px 10px rgba(250,204,21,.28);
}

@keyframes starPop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.4); }
  100%{ transform:scale(1.1); }
}
.star-btn.star-pop{
  animation:starPop .32s cubic-bezier(.34,1.56,.64,1);
}

.review-list{
  display:grid;
  gap:12px;
}

.review-comment{
  padding:14px;
  border-radius:22px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.08);
}

.review-comment-top{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.review-comment-body{
  margin-top:10px;
  color:var(--text);
  line-height:1.5;
  white-space:pre-wrap;
}

.review-owner-reply{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border-left:2.5px solid var(--bg3);
  background:rgba(86,192,255,.08);
  font-size:13.5px;
  line-height:1.5;
  white-space:pre-wrap;
}

.review-owner-reply b{
  display:block;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--bg3);
  margin-bottom:2px;
}

.owner-stats-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.owner-stat-chip{
  flex:1 1 120px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(86,192,255,.08);
  border:1px solid rgba(86,192,255,.2);
  text-align:center;
}

.owner-stat-chip b{
  display:block;
  font-size:20px;
  font-weight:900;
  color:var(--text);
}

.owner-stat-chip span{
  font-size:12px;
  color:var(--muted);
}

.owner-reply-textarea{
  width:100%;
  margin-top:6px;
}

.filters-panel{
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}.filter-field{
  display:block;
}

.filter-control{
  width:100%;
}.filters-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

.admin-auth-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.admin-auth-copy{
  flex:1 1 320px;
}

.admin-auth-actions{
  margin-top:0;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.admin-promo-panel{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.admin-promo-controls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.admin-promo-field{
  min-width:130px;
}

.admin-promo-status{
  width:100%;
  margin-top:12px;
}

.admin-metrics-panel{
  display:grid;
  gap:12px;
}

.admin-metrics-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.admin-metrics-head .admin-auth-copy{
  flex:1 1 240px;
}

.admin-metrics-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  flex:0 0 auto;
}

.admin-metrics-actions .filter-control{
  min-width:220px;
}

.admin-metrics-actions .btn{
  white-space:nowrap;
}

.admin-metrics-sub{
  max-width:unset;
  margin-top:6px;
  font-size:14px;
  line-height:1.35;
}

.admin-session-card{
  margin-top:12px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(31,162,255,.12);
  border:1px solid rgba(31,162,255,.28);
  color:rgba(239,248,255,.96);
}

.admin-session-email{
  font-weight:900;
  color:var(--foam);
}

.admin-session-meta{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
}

.btn.admin-logout{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
}

.promo-notice{
  border-style:solid;
  border-color:rgba(250,204,21,.3);
  background:rgba(250,204,21,.12);
  color:rgba(200,234,255,.98);
}

.courtesy-notice{
  border-style: solid;
  border-color: rgba(56, 189, 248, .28);
  background: rgba(56, 189, 248, .12);
  color: rgba(226, 247, 255, .98);
}

.courtesy-chip{
  border-color: rgba(56, 189, 248, .32);
  background: rgba(56, 189, 248, .14);
  color: rgba(226, 247, 255, .98);
  font-weight: 800;
}

.evento-chip{
  border-color: rgba(216, 137, 255, .35);
  background: rgba(216, 137, 255, .16);
  color: rgba(247, 232, 255, .98);
  font-weight: 800;
}

.confirm-card{
  width:min(560px, 96vw);
}

.confirm-summary{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.confirm-preview{
  width:100%;
  max-width:220px;
  height:160px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}

.confirm-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.confirm-preview.empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:800;
}

.confirm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.plans-builder{
  display:grid;
  gap:10px;
}

.tourism-plan-row{
  margin-top:6px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.tourism-plan-price-row,
.price-range-row{
  display:flex;
  align-items:end;
  gap:10px;
}

.schedule-builder{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(86,192,255,.16);
  border-radius:16px;
  padding:12px;
  margin-bottom:14px;
}

.schedule-days{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.schedule-day-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:700;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
}

.schedule-24h-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  opacity:.85;
  margin-bottom:10px;
  cursor:pointer;
}

.schedule-time-row{
  gap:10px;
}

.schedule-segment{
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.schedule-segment:last-of-type{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:none;
}

.schedule-remove-btn{
  margin-top:4px;
}

.schedule-segment:only-child .schedule-remove-btn{
  display:none;
}

.tourism-plan-price-row .input,
.price-range-row .input{
  flex:1;
}

.whatsapp-extra-row{
  display:flex;
  align-items:end;
  gap:10px;
  margin-top:8px;
}

.whatsapp-extra-row select{
  flex:0 0 auto;
  width:auto;
  min-width:140px;
}

.whatsapp-extra-row .input{
  flex:1;
}

.tourism-plan-actions{
  display:flex;
  justify-content:flex-start;
}

.whatsapp-grid{
  grid-template-columns:minmax(160px, 220px) minmax(0, 1fr);
  align-items:end;
}

.location-map-picker{
  margin-top:8px;
  display:grid;
  gap:10px;
}

.location-map-search{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.location-map-search .input{
  flex:1;
  min-width:180px;
}

.location-map-container{
  width:100%;
  height:260px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:crosshair;
}

.location-map-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.location-map-status{
  font-size:12.5px;
  color:var(--muted);
}.support-faq-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.support-faq-card{
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

.support-faq-card p{
  margin:10px 0 0;
}

.support-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:var(--foam);
}

.support-modal-card{
  max-width:720px;
}

.support-ticket-detail{
  display:grid;
  gap:12px;
}

.support-ticket-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.support-ticket-box{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

.support-ticket-message{
  white-space:pre-wrap;
  line-height:1.5;
  color:var(--text);
}

.support-ticket-note{
  margin-top:8px;
}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  width:100%;
}

.admin-metrics-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}

.metric-card{
  padding:18px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(120, 206, 255, .18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  min-height:122px;
  text-align:center;
}

.visitor-stats-section{
  width:100%;
}

.visitor-stat-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-wrap:wrap;
}

.visitor-stat-row:last-child{
  border-bottom:none;
}

.visitor-stat-rank{
  font-size:13px;
  color:var(--text-muted, #8b8fa8);
  min-width:20px;
}

.visitor-stat-name{
  flex:1 1 auto;
  font-weight:600;
  font-size:14px;
}

.visitor-stat-badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  color:var(--text-muted, #8b8fa8);
}

.visitor-stat-count{
  font-size:13px;
  font-weight:700;
  color:var(--accent, #78ceff);
  white-space:nowrap;
}

.metric-value{
  font-size:48px;
  line-height:1;
  font-weight:900;
  color:var(--text);
}

.metric-label{
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  color:var(--text);
  text-wrap:balance;
  word-break:break-word;
}

@media (max-width: 780px){
  .grid2{
    grid-template-columns:1fr;
  }

  .tourism-plan-price-row,
  .price-range-row,
  .whatsapp-extra-row{
    flex-direction:column;
    align-items:stretch;
  }

  .ad-carousel-item{
    flex-basis:min(86vw, 420px);
  }

  .ad-banner-shell{
    grid-template-columns:1fr;
    gap:8px;
  }

  .ad-banner-media--feature{
    min-height:164px;
  }

  .ad-banner-copy h3{
    font-size:16px;
  }

  .ad-banner-copy p{
    font-size:12px;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .ad-banner-copy{
    gap:8px;
  }

  .ad-banner-overlay .btn{
    width:100%;
    justify-content:center;
  }

  .support-faq-grid{
    grid-template-columns:1fr;
  }

  .support-ticket-grid{
    grid-template-columns:1fr;
  }

  .admin-metrics-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .metric-card{
    min-height:110px;
    padding:16px;
  }

  .metric-value{
    font-size:40px;
  }

  .metric-label{
    font-size:14px;
  }

  .admin-metrics-actions{
    width:100%;
    flex:1 1 100%;
    flex-direction:column;
    align-items:stretch;
  }

  .admin-metrics-actions .filter-control,
  .admin-metrics-actions .btn{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 420px){
  .admin-metrics-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .admin-metrics-sub{
    font-size:13px;
  }

  .metric-card{
    min-height:104px;
    border-radius:22px;
    padding:14px;
  }

  .metric-value{
    font-size:34px;
  }

  .metric-label{
    font-size:13px;
    line-height:1.15;
  }
}

@media (max-width: 520px){
  body[data-page="home"] .brand small{
    display:block !important;
  }

  .floating-help-btn{
    right:14px;
    bottom:86px;
    padding:12px 14px;
    border-radius:16px;
    font-size:14px;
  }

  .floating-publish-btn{
    right:14px;
    padding:12px 14px;
    border-radius:16px;
    font-size:14px;
  }

  .floating-back-btn{
    right:14px;
    padding:12px 16px;
    border-radius:16px;
    font-size:14px;
  }

  .section-focus-pill{
    padding:9px 12px;
    border-radius:16px;
  }

  .section-focus-label{
    font-size:10px;
  }

  .section-focus-value{
    font-size:16px;
  }
}

/* Cartel con QR imprimible (cartel.html): pensado para pantalla y para @media print,
   tamano A5 (~559x794px a 96dpi) igual al mockup de diseno aprobado. */
.poster-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:20px;
}

.poster-stage{
  display:flex;
  justify-content:center;
  padding:12px;
  background:rgba(0,0,0,.18);
  border-radius:22px;
  overflow:hidden;
}

/* El cartel siempre se dibuja al tamano real de impresion (559x794), pero en pantallas
   angostas (celular) no cabe entero -- en vez de dejarlo desbordado con scroll horizontal
   (donde solo se ve una tira del diseno), JS achica visualmente todo el cartel con
   transform:scale() y este contenedor reduce su alto/ancho reservado a la misma escala,
   para que no quede espacio vacio ni se corte nada. La impresion ignora este escalado
   (ver @media print) y siempre sale al tamano real.  */
.poster-frame{
  position:relative;
  overflow:hidden;
}

.poster-card{
  position:relative;
  transform-origin:top left;
  width:559px;
  min-height:794px;
  flex:0 0 auto;
  box-sizing:border-box;
  background:
    radial-gradient(480px 420px at 88% 6%, rgba(86,192,255,.10), transparent 62%),
    radial-gradient(460px 420px at 8% 96%, rgba(212,169,74,.09), transparent 60%),
    #ffffff;
  padding:44px 40px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
}

.poster-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:10px;
  background:linear-gradient(90deg, #123a5c 0%, #56c0ff 60%, #d4a94a 100%);
}

.poster-logo{
  width:92px;
  height:92px;
  border-radius:22px;
  object-fit:cover;
  margin-top:4px;
}

.poster-brand{
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  color:#123a5c;
  margin-top:12px;
  text-transform:uppercase;
}

.poster-business{
  margin-top:18px;
  text-align:center;
  max-width:460px;
}

.poster-business-name{
  font-size:30px;
  font-weight:800;
  color:#0c1830;
  line-height:1.16;
  word-break:break-word;
}

.poster-business-meta{
  font-size:13.5px;
  font-weight:500;
  color:#6b7280;
  margin-top:5px;
}

.poster-rate{
  margin-top:20px;
  padding:8px 22px;
  border-radius:999px;
  background:linear-gradient(90deg, #d4a94a 0%, #e8c677 100%);
  color:#0c1830;
  font-size:17px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(212,169,74,.28);
}

.poster-qr-frame{
  margin-top:14px;
  padding:16px;
  border:3px solid #d4a94a;
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 6px 22px rgba(12,24,48,.08);
}

.poster-qr{
  display:flex;
  align-items:center;
  justify-content:center;
  width:210px;
  height:210px;
}

.poster-qr img, .poster-qr canvas, .poster-qr table{
  width:100% !important;
  height:100% !important;
}

.poster-cta{
  margin-top:18px;
  text-align:center;
  max-width:440px;
}

.poster-cta-title{
  font-size:18.5px;
  font-weight:800;
  color:#0c1830;
}

.poster-cta-sub{
  font-size:13.5px;
  font-weight:500;
  color:#6b7280;
  margin-top:5px;
  line-height:1.5;
}

.poster-badges{
  margin-top:auto;
  padding-top:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.poster-badge-google{
  width:150px;
  height:44px;
  object-fit:contain;
  border-radius:8px;
}

.poster-badge-apple{
  width:150px;
  height:44px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:#000000;
  border:1.5px solid rgba(255,255,255,.6);
  border-radius:8px;
}

.poster-badge-apple .icon-slot svg{
  width:19px;
  height:21px;
  fill:#ffffff;
  stroke:none;
}

.poster-badge-apple-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.15;
}

.poster-badge-apple-text span{
  font-size:8px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}

.poster-badge-apple-text b{
  font-size:12.5px;
  font-weight:700;
  color:#ffffff;
  font-family:-apple-system, "Helvetica Neue", Arial, sans-serif;
}

.poster-footer{
  margin-top:16px;
  font-size:13px;
  font-weight:700;
  color:#4b5563;
  text-align:center;
}

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff !important; }
  .container{ max-width:none !important; padding:0 !important; }
  .card{ box-shadow:none !important; border:none !important; padding:0 !important; background:none !important; }
  .poster-stage{ background:none !important; padding:0 !important; border-radius:0 !important; overflow:visible !important; }
  .poster-frame{ width:auto !important; height:auto !important; overflow:visible !important; }
  .poster-card{ box-shadow:none !important; margin:0 auto !important; transform:none !important; }
}

/* ===== Tarjeta "foto protagonista": foto grande con el nombre encima, acciones como
   iconos y WhatsApp como unico boton grande. ===== */
.item:not(.review-item){
  background:#12223f;
  border:1px solid rgba(160,205,255,.14);
  border-radius:22px;
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.item:not(.review-item).item-destacado{
  border:2px solid var(--gold-line);
  box-shadow:0 16px 36px rgba(0,0,0,.4), 0 0 24px -6px rgba(240,198,116,.35);
}
.item:not(.review-item) .item-photo{ height:260px; }
.item:not(.review-item) .item-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,34,0) 58%, rgba(8,16,34,.5) 78%, rgba(18,34,63,.94) 100%);
}
.item:not(.review-item) .item-photo-badges-top{ top:12px; left:12px; right:62px; }
.item:not(.review-item) .item-photo-cat,
.item:not(.review-item) .item-photo-badges-top .item-photo-badge{
  padding:6px 11px;
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  background:rgba(8,16,34,.58);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.item:not(.review-item) .item-photo-cat .icon{ color:color-mix(in srgb, var(--cat-color) 55%, white); }
.item:not(.review-item) .item-photo-badges-top .item-photo-badge-new{ color:#04211d; text-shadow:none; background:rgba(45,212,191,.92); border-color:rgba(94,234,212,.9); }
.item-photo-badges-top .item-photo-badge-muni{ white-space:nowrap; }
.item:not(.review-item) .item-photo-badges-top .item-photo-badge-destacado{ color:#ffe3a3; background:rgba(40,28,6,.62); border-color:rgba(240,198,116,.7); }
/* Insignia organica (no pagada) para el negocio que quedo primero en su categoria por
   calificacion real, via sortHomeItems/renderItemCard -- un color distinto al dorado de
   "Destacado" (eso es pauta paga) para que no se confundan. */
.item:not(.review-item) .item-photo-badges-top .item-photo-badge-top-rated{ color:#eaf6ff; background:rgba(23,63,130,.68); border-color:rgba(86,192,255,.65); }
.item:not(.review-item) .item-photo-wrap > .item-favorite-toggle{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:40px;
  height:40px;
  color:#fff;
  background:rgba(8,16,34,.55);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.item:not(.review-item) .item-photo-wrap > .item-favorite-toggle.is-favorite{
  color:#ff5d7a;
  background:rgba(255,255,255,.92);
  border-color:#fff;
}
.item-photo-overlay{
  position:absolute;
  left:16px;
  right:16px;
  bottom:10px;
  z-index:2;
  pointer-events:none;
}
.item-overlay-title{
  margin:0;
  color:#fff;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.item-overlay-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 7px;
  margin-top:4px;
  font-size:12.5px;
  color:rgba(235,245,255,.86);
}
.item-overlay-rating{ color:#ffd27a; font-weight:800; }
.item-overlay-count{ color:rgba(235,245,255,.7); font-weight:600; }
.item-overlay-dot{ color:rgba(235,245,255,.45); }
.item-overlay-open{ display:inline-flex; align-items:center; gap:5px; font-weight:700; }
.item-overlay-open i{ width:6px; height:6px; border-radius:50%; }
.item-overlay-open.is-open{ color:#7ef0b4; }
.item-overlay-open.is-open i{ background:#3ddc84; }
.item-overlay-open.is-closed{ color:#ffb0b0; }
.item-overlay-open.is-closed i{ background:#ff7070; }
.item-overlay-place{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

.item:not(.review-item) .item-body{ padding:12px 16px 2px; }
.item-price-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.item-price-line .item-price-name{ font-size:12.5px; color:rgba(220,235,255,.7); }
.item-price-line .item-price-value{ font-size:18px; color:var(--gold); font-weight:800; }

.item:not(.review-item) .item-actions.item-actions-v2{ padding:12px 16px 16px; gap:14px; }
.item-icon-actions{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:8px;
  width:100%;
}
.item-icon-btn{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:rgba(225,238,255,.88);
  font-size:11.5px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  touch-action:manipulation;
}
.item-icon-ico{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(120,180,255,.12);
  border:1px solid rgba(140,195,255,.24);
  color:#9fd6ff;
  transition:transform .15s ease, background .2s ease;
}
.item-icon-ico .icon{ width:21px; height:21px; }
.item-icon-btn:active .item-icon-ico{ transform:scale(.92); }
@media (hover:hover){
  .item-icon-btn:hover .item-icon-ico{ background:rgba(120,180,255,.22); }
}
.item-icon-btn:focus-visible .item-icon-ico{ outline:2px solid #9fd6ff; outline-offset:2px; }

.item:not(.review-item) .item-actions.item-actions-v2 .item-actions-row-whatsapp{
  flex-direction:column;
  gap:8px;
}
.item:not(.review-item) .item-actions.item-actions-v2 .btn-wa-block{
  width:100%;
  justify-content:center;
  gap:8px;
  padding:15px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, #25D366, #128C4A);
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  border:0;
  box-shadow:0 10px 22px rgba(18,140,74,.3);
}
.btn-wa-block .icon{ width:18px; height:18px; }

/* Boton "Reservar" (hoteles y turismo): azul de la marca, para distinguirlo del verde de WhatsApp. */
.btn-reserve-block{
  width:100%;
  justify-content:center;
  gap:8px;
  padding:15px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, #56c0ff, #2563eb);
  color:#fff;
  font-weight:800;
  text-decoration:none;
}
.btn-reserve-block .icon{ width:18px; height:18px; }
.item:not(.review-item) .item-actions.item-actions-v2 .item-owner-link{ margin-top:-4px; }

/* ===== Detalle con el mismo estilo "foto protagonista" ===== */
.detail-hero-wrap{ position:relative; }
.detail-hero-wrap .gallery .photo-hero{
  border-radius:22px;
  border-color:rgba(160,205,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.detail-hero-wrap .gallery .photo-hero img{ height:320px; }
.detail-hero-wrap .gallery .photo-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,34,0) 45%, rgba(8,16,34,.55) 72%, rgba(12,26,52,.95) 100%);
}
.detail-hero-chips{
  position:absolute;
  top:14px;
  left:14px;
  right:66px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  pointer-events:none;
}
.detail-hero-chips .item-photo-cat{
  padding:6px 11px;
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  background:rgba(8,16,34,.58);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.detail-hero-overlay{ left:18px; right:18px; bottom:16px; }
.detail-hero-title{ font-size:25px; -webkit-line-clamp:3; }
.detail-hero-wrap > .item-favorite-toggle{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:42px;
  height:42px;
  color:#fff;
  background:rgba(8,16,34,.55);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.detail-hero-wrap > .item-favorite-toggle.is-favorite{
  color:#ff5d7a;
  background:rgba(255,255,255,.92);
  border-color:#fff;
}
.detail-summary-v2{
  gap:16px;
  padding:16px;
  border-radius:22px;
  background:#12223f;
  border:1px solid rgba(160,205,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.detail-summary-v2 .item-icon-actions{ grid-auto-columns:minmax(0, 96px); justify-content:center; }
.detail-wa-row-v2{ flex-direction:column; }
.detail-wa-row-v2 .btn-wa-block{
  width:100%;
  justify-content:center;
  gap:8px;
  padding:15px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, #25D366, #128C4A);
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  border:0;
  box-shadow:0 10px 22px rgba(18,140,74,.3);
}
@media (max-width:520px){
  .detail-hero-wrap .gallery .photo-hero img{ height:280px; }
  .detail-hero-title{ font-size:22px; }
}

/* Tarjeta mas compacta: menos aire entre bloques y la foto aprovecha el alto ganado. */
.item:not(.review-item) .item-photo{ height:280px; }
.item:not(.review-item) .item-body{ padding:10px 16px 0; }
.item:not(.review-item) .item-body .item-snippet{
  margin-top:0;
  font-size:12.5px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.item:not(.review-item) .item-body .item-price-line + .item-snippet{ margin-top:6px; }
.item:not(.review-item) .item-body .item-plan-summary{ margin-top:6px; }
.item:not(.review-item) .item-actions.item-actions-v2{ padding:10px 16px 12px; gap:10px; }
.item:not(.review-item) .item-actions-v2 .item-icon-ico{ width:40px; height:40px; border-radius:13px; }
.item:not(.review-item) .item-actions-v2 .item-icon-ico .icon{ width:19px; height:19px; }
.item:not(.review-item) .item-actions-v2 .item-icon-btn{ gap:3px; font-size:11px; }
.item:not(.review-item) .item-actions.item-actions-v2 .btn-wa-block{ padding:13px 16px; }
.item:not(.review-item) .item-actions.item-actions-v2 .item-owner-link{ margin-top:-6px; }

/* Iconos de accion: un poco mas grandes y en el celeste de la marca para que no se
   pierdan en el azul tinta de la tarjeta. */
.item-icon-ico{
  background:linear-gradient(160deg, rgba(86,192,255,.30), rgba(86,192,255,.14));
  border:1px solid rgba(120,205,255,.5);
  color:#d4efff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.22);
}
@media (hover:hover){
  .item-icon-btn:hover .item-icon-ico{ background:linear-gradient(160deg, rgba(86,192,255,.40), rgba(86,192,255,.20)); }
}
.item:not(.review-item) .item-actions-v2 .item-icon-ico{ width:44px; height:44px; border-radius:16px; }
.item:not(.review-item) .item-actions-v2 .item-icon-ico .icon{ width:21px; height:21px; }
.item-icon-btn{ color:rgba(232,244,255,.92); }

/* Contornos mas definidos: cada tarjeta y cada boton flotante se separa claramente del
   fondo y de sus vecinos. */
.item:not(.review-item){
  border:1px solid rgba(130,195,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(4,10,24,.55),
    0 16px 36px rgba(0,0,0,.45);
}
.navbtn:not(.active){
  background:linear-gradient(180deg, rgba(40,78,140,.62), rgba(20,44,90,.62));
  border:1px solid rgba(130,195,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.3);
}
.subtab:not(.active):not([aria-pressed="true"]){
  background:linear-gradient(180deg, rgba(36,72,132,.8), rgba(18,42,86,.8));
  border:1px solid rgba(130,200,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 3px 10px rgba(0,0,0,.28);
}

.item:not(.review-item) .item-actions.item-actions-v2 .item-owner-link{
  font-size:13px;
  margin-top:-2px;
}
.item:not(.review-item) .item-actions.item-actions-v2 .item-owner-link a{
  display:inline-block;
  padding:4px 2px;
}

/* Categorias principales del inicio con el mismo lenguaje de las tarjetas: superficie azul
   tinta con borde definido e icono en cuadro redondeado del color de cada categoria. */
.landing-chip-icon[data-icon="landmark"]{ --c:240,180,41; }
.landing-chip-icon[data-icon="utensils"]{ --c:245,158,11; }
.landing-chip-icon[data-icon="store"]{ --c:86,192,255; }
.landing-chip-icon[data-icon="wrench"]{ --c:167,139,250; }
.landing-chip-icon[data-icon="bed"]{ --c:45,212,191; }
.landing-chip-icon[data-icon="compass"]{ --c:251,113,133; }
.landing-chip-icon[data-icon="party"]{ --c:250,204,21; }
.landing-chip-icon[data-icon="home"]{ --c:74,222,128; }
.landing-chip-icon[data-icon="cart"]{ --c:34,211,238; }
.landing-chip-icon[data-icon="briefcase"]{ --c:129,140,248; }
.landing-chips .landing-chip{
  gap:12px;
  min-height:62px;
  background:linear-gradient(180deg, rgba(30,58,108,.88), rgba(16,32,62,.92));
  border:1px solid rgba(130,195,255,.3);
  color:#f2f8ff;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.32);
  -webkit-tap-highlight-color:transparent;
}
.landing-chips .landing-chip-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(160deg, rgba(var(--c,86,192,255),.34), rgba(var(--c,86,192,255),.12));
  border:1px solid rgba(var(--c,86,192,255),.5);
  color:rgb(var(--c,86,192,255));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.landing-chips .landing-chip-icon .icon{ width:19px; height:19px; }
.landing-chips .landing-chip-count{
  background:rgba(86,192,255,.18);
  border:1px solid rgba(120,205,255,.4);
  color:#cfeeff;
  font-weight:800;
}
.landing-chips .landing-chip:hover{
  transform:none;
  background:linear-gradient(180deg, rgba(30,58,108,.88), rgba(16,32,62,.92));
  border-color:rgba(130,195,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.32);
}
@media (hover:hover){
  .landing-chips .landing-chip:hover{
    transform:translateY(-2px);
    border-color:rgba(150,210,255,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.38);
  }
}
.landing-chips .landing-chip:active{
  transform:scale(.97);
  border-color:rgba(150,210,255,.6);
}

/* En celulares angostos "Entretenimiento" no cabia en la mitad de la fila: se reduce un
   poco el icono y el espacio de la izquierda para que la palabra quepa entera. */
.landing-chips .landing-chip-label{
  min-width:0;
  overflow-wrap:normal;
  -webkit-hyphens:manual;
  hyphens:manual;
}
@media (max-width:430px){
  .landing-chips .landing-chip{ gap:8px; padding:10px 8px 10px 9px; font-size:13px; letter-spacing:-.02em; }
  .landing-chips .landing-chip-icon{ width:34px; height:34px; border-radius:11px; }
  .landing-chips .landing-chip-icon .icon{ width:17px; height:17px; }
}

/* Cuadro de "Categorias principales": base azul tinta mas profunda que los botones para
   que estos resalten encima, con borde celeste definido y titulo en blanco. */
.landing-categories{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(86,192,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(10,22,46,.9), rgba(7,16,36,.94));
  border:1px solid rgba(130,195,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(4,10,24,.5),
    0 18px 40px rgba(0,0,0,.42);
}
.landing-categories-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#ffffff;
  font-size:13.5px;
  letter-spacing:.18em;
  text-shadow:0 1px 8px rgba(86,192,255,.25);
}
.landing-categories-label::before,
.landing-categories-label::after{
  content:"";
  flex:0 1 38px;
  height:1px;
}
.landing-categories-label::before{ background:linear-gradient(90deg, transparent, rgba(150,210,255,.7)); }
.landing-categories-label::after{ background:linear-gradient(90deg, rgba(150,210,255,.7), transparent); }

/* Botones de municipio con miniatura de su foto (opcion B), en el mismo lenguaje de los
   botones de "Categorias principales". */
.municipio-tabs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  width:100%;
}
@media (min-width:720px){
  .municipio-tabs{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
.municipio-tabs .municipio-tab{
  flex:initial;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:60px;
  padding:7px 10px 7px 7px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(30,58,108,.88), rgba(16,32,62,.92));
  border:1px solid rgba(130,195,255,.34);
  color:#f2f8ff;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  text-align:left;
  line-height:1.25;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.32);
  animation:none;
  -webkit-tap-highlight-color:transparent;
}
.municipio-tab-thumb{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.2);
  background:#0a1a33;
}
.municipio-tab-name{ min-width:0; overflow-wrap:normal; }
.municipio-tabs .municipio-tab.is-active{
  background:linear-gradient(135deg, #1f5fd6, #0d3fb0);
  border-color:#7fd0ff;
  color:#fff;
  box-shadow:0 0 0 3px rgba(86,192,255,.25), 0 10px 24px rgba(0,0,0,.4);
}
@media (hover:hover){
  .municipio-tabs .municipio-tab:not(.is-disabled):hover{
    transform:translateY(-2px);
    border-color:rgba(150,210,255,.6);
  }
}
.municipio-tabs .municipio-tab:active:not(.is-disabled){ transform:scale(.97); }

/* Pantalla de elegir municipio: el fondo llevaba dos capas de azul oscuro apiladas (la
   del body y la de .municipio-bg-overlay) y casi tapaban la foto de Aura Plus. Se aligera
   la de arriba solo aqui; dentro de cada municipio queda igual. */
.landing-page:not(.municipio-open) .municipio-bg-overlay{
  opacity:.45;
  transition:opacity .6s ease;
}

/* El subtitulo del encabezado ("Lo mejor de San Pedro de los Milagros en un solo lugar")
   tenia alto maximo de una linea y la segunda quedaba oculta. Se deja crecer lo necesario
   (el colapso al hacer scroll sigue animando desde este alto hasta 0) y sin partir palabras. */
header:not(.header-compact) .brand small,
.landing-header .brand small,
body[data-page="home"] .home-brand-subtitle{
  max-height:none;
  overflow:visible;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  text-overflow:clip;
  -webkit-line-clamp:unset;
}

/* Contorno mas claro en los botones de municipio para que resalten sobre la foto de fondo. */
.municipio-tabs .municipio-tab:not(.is-active){
  border-color:rgba(170,220,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(4,10,24,.35), 0 8px 18px rgba(0,0,0,.32);
}

/* Bienvenida: en vez de una X arriba, boton "Saltar publicidad" abajo a la derecha (como
   en los anuncios de video) y "Ir al negocio" pasa abajo a la izquierda para no chocar. */
.evento-interstitial-close.evento-interstitial-skip{
  top:auto;
  right:14px;
  bottom:20px;
  z-index:3;
  width:auto;
  height:auto;
  gap:6px;
  padding:11px 16px 11px 18px;
  border-radius:999px;
  background:rgba(10,16,30,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  animation:eventoSkipIn .35s ease both;
}
.evento-interstitial-close.evento-interstitial-skip[hidden]{ display:none; }
.evento-interstitial-skip .icon{ width:16px; height:16px; }
.evento-interstitial-skip:active{ transform:scale(.96); }
@keyframes eventoSkipIn{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .evento-interstitial-close.evento-interstitial-skip{ animation:none; } }
/* Antes iban centrados y apilados (CTA arriba de "Saltar publicidad") para que un CTA
   largo ("Escribir por WhatsApp") no chocara con el skip -- pero eso dejaba una franja
   muerta de dos filas de alto encima del flyer, tapando contenido de anuncios con texto
   hasta abajo. El max-width + ellipsis de abajo ya evita ese choque sin necesidad de
   apilar, asi que vuelven a ir lado a lado en una sola fila, pegados al borde inferior. */
.evento-interstitial-cta{
  left:14px;
  right:auto;
  bottom:20px;
  transform:none;
  max-width:calc(100% - 172px);
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:360px){
  .evento-interstitial-cta,
  .evento-interstitial-close.evento-interstitial-skip{ font-size:13px; padding-left:13px; padding-right:12px; }
  .evento-interstitial-cta{ max-width:calc(100% - 150px); }
}
.evento-interstitial-cta:active{ transform:scale(.96); }

/* Boton de publicidad en dos lineas: llamado arriba y los dos tipos abajo. */
.ad-featured-cta.ad-featured-cta--two-line{
  gap:10px;
  padding:9px 18px 9px 14px;
  border-radius:22px;
  text-align:left;
}
.ad-featured-cta--two-line .icon{ width:20px; height:20px; flex:0 0 auto; }
.ad-featured-cta-text{ display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.ad-featured-cta-title{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:#ffd9a8; }
.ad-featured-cta-sub{ font-size:11.5px; font-weight:600; color:rgba(255,226,190,.8); }

/* Buscador de municipios: mientras se escribe, se ocultan las listas normales (principal
   y regiones) y solo se ven los resultados. */
.municipio-search{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0 0 14px;
  padding:0 16px;
  min-height:52px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(30,58,108,.88), rgba(16,32,62,.92));
  border:1px solid rgba(170,220,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.32);
  color:#bfe6ff;
  cursor:text;
}
.municipio-search:focus-within{ border-color:#7fd0ff; box-shadow:0 0 0 3px rgba(86,192,255,.25), 0 8px 18px rgba(0,0,0,.32); }
.municipio-search svg{ width:20px; height:20px; flex:0 0 20px; }
.municipio-search input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  color:#fff;
  font:inherit;
  font-size:16px;
  font-weight:600;
}
.municipio-search input::placeholder{ color:rgba(220,236,255,.62); font-weight:500; }
.municipio-search-results:empty{ display:none; }
.municipio-tabs-wrap:not(.is-searching) .municipio-search-results{ display:none; }
.municipio-tabs-wrap.is-searching > .municipio-tabs:not(.municipio-search-results),
.municipio-tabs-wrap.is-searching > .municipio-region{ display:none; }
.municipio-search-empty{
  grid-column:1 / -1;
  margin:4px 0 0;
  text-align:center;
  color:rgba(232,244,255,.8);
  font-size:14px;
  font-weight:600;
}

/* Boton de busqueda por voz dentro de las barras de busqueda. */
.voice-search-btn{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(120,205,255,.45);
  background:linear-gradient(160deg, rgba(86,192,255,.28), rgba(86,192,255,.12));
  color:#d4efff;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, background .2s ease;
}
.voice-search-btn .icon{ width:19px; height:19px; }
.voice-search-btn:active{ transform:scale(.9); }
.voice-search-btn.is-listening{
  background:#ef4444;
  border-color:#fca5a5;
  color:#fff;
  animation:voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.55); }
  50%{ box-shadow:0 0 0 9px rgba(239,68,68,0); }
}
@media (prefers-reduced-motion:reduce){ .voice-search-btn.is-listening{ animation:none; } }

.municipio-search-clear{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
}
.municipio-search-clear[hidden]{ display:none; }
.municipio-search-clear svg{ width:15px; height:15px; }
.municipio-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

/* Ayuda para activar el microfono cuando el navegador lo tiene bloqueado. */
.mic-help-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,10,24,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.mic-help-modal[hidden]{ display:none; }
.mic-help-card{
  width:min(100%, 380px);
  padding:24px 22px 20px;
  border-radius:22px;
  background:#12223f;
  border:1px solid rgba(130,195,255,.34);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  color:#eef6ff;
  text-align:left;
}
.mic-help-icon{
  width:52px;
  height:52px;
  margin:0 auto 12px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(239,68,68,.18);
  border:1px solid rgba(252,165,165,.55);
  color:#fca5a5;
}
.mic-help-icon .icon{ width:24px; height:24px; }
.mic-help-card h3{ margin:0 0 6px; text-align:center; font-size:19px; }
.mic-help-card p{ margin:0 0 10px; color:rgba(232,244,255,.8); font-size:14px; text-align:center; }
.mic-help-card ol{ margin:0 0 16px; padding-left:22px; display:grid; gap:8px; font-size:14.5px; line-height:1.45; }
.mic-help-card .btn{ width:100%; justify-content:center; }
.mic-help-code{display:block;margin-top:10px;text-align:center;font-size:11.5px;color:rgba(232,244,255,.5)}

/* Pagina web en computador: todo un poco mas grande y aprovechando mejor la pantalla
   (en vez de verse como la version de celular centrada y pequena). Solo aplica con la
   clase .is-web-browser, que nunca llevan la app de Google Play ni la de iPhone. */
@media (min-width:1200px){
  .is-web-browser body:not([data-page="admin"]):not([data-page="cartel"]){ zoom:1.12; }
  .is-web-browser .landing-container{ min-height:calc(100vh / 1.12); }
  .is-web-browser .municipio-tabs-wrap{ width:min(100%, 980px); }
  .is-web-browser .municipio-tabs{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1600px){
  .is-web-browser body:not([data-page="admin"]):not([data-page="cartel"]){ zoom:1.25; }
  .is-web-browser .landing-container{ min-height:calc(100vh / 1.25); }
}

/* Avatar de ayuda "Aura" (reemplaza el boton flotante Ayuda, mismo lugar). */
/* El avatar de ayuda ya no es un boton circular flotante propio: vive dentro del item
   "Ayuda" del dock (ver .app-dock-help-face) y solo aporta el panel de preguntas y la
   burbuja de saludo, ancladas centradas justo encima del dock. */
.help-avatar{
  position:fixed;
  left:50%;
  bottom:calc(var(--dock-h, 0px) + env(safe-area-inset-bottom, 0px) + 22px);
  transform:translateX(-50%);
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.help-avatar > *{ pointer-events:auto; }
.help-avatar-bubble{
  position:relative;
  max-width:190px;
  padding:10px 30px 10px 14px;
  border-radius:16px 16px 6px 6px;
  background:#fff;
  color:#0c172d;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  cursor:pointer;
  animation:helpBubbleIn .45s cubic-bezier(.2,.9,.3,1) both;
}
.help-avatar-bubble[hidden]{ display:none; }
.help-avatar-bubble b{ display:block; font-size:14px; font-weight:800; line-height:1.2; }
.help-avatar-bubble span{ display:block; font-size:12.5px; font-weight:600; color:#3a4d70; margin-top:1px; }
.help-avatar-bubble-close{
  position:absolute;
  top:4px;
  right:6px;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  background:none;
  color:#6b7a99;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
@keyframes helpBubbleIn{ from{ opacity:0; transform:translateY(6px) scale(.96); } to{ opacity:1; transform:none; } }
.help-avatar-panel{
  width:min(320px, calc(100vw - 36px));
  padding:16px;
  border-radius:22px;
  background:#12223f;
  border:1px solid rgba(130,195,255,.36);
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  color:#eef6ff;
  animation:helpBubbleIn .3s ease both;
}
.help-avatar-panel[hidden]{ display:none; }
.help-avatar-hello{ margin:0; font-size:16px; font-weight:800; }
.help-avatar-sub{ margin:2px 0 10px; font-size:12.5px; color:rgba(232,244,255,.72); }
.help-avatar-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding:11px 12px;
  border-radius:12px;
  background:rgba(120,180,255,.1);
  border:1px solid rgba(140,195,255,.24);
  color:#eef6ff;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.help-avatar-q span{ color:#7fd0ff; font-size:18px; line-height:1; }
.help-avatar-support{ display:flex; width:100%; justify-content:center; margin-top:12px; text-decoration:none; }
body.evento-interstitial-open .help-avatar{ display:none; }
@media (prefers-reduced-motion:reduce){ .help-avatar-bubble, .help-avatar-panel{ animation:none; } }
@media print{ .help-avatar{ display:none !important; } }

/* El dock de navegacion reemplaza la barra de iconos de categorias de abajo: el espacio
   reservado para el contenido pasa a depender de la altura del dock, mas el aire que deja
   flotando sobre el borde inferior. */
body:has(.app-dock) .container{ padding-bottom:calc(var(--dock-h, 0px) + env(safe-area-inset-bottom, 0px) + 34px); }

/* Dock inferior (Inicio / Favoritos / Publicar / Ayuda / Mi cuenta) como pastilla flotante,
   separada de los bordes, en vez de una barra pegada de punta a punta: se ve como un boton
   mas, no como una barra de sistema. */
.app-dock{
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:1100;
  display:flex;
  justify-content:center;
  margin:0 auto;
  max-width:420px;
  background:rgba(10,19,38,.94);
  border:1px solid rgba(170,220,255,.24);
  border-radius:999px;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
  padding:6px;
  height:var(--dock-h);
}
.app-dock-highlight{
  position:absolute;
  top:6px;
  bottom:6px;
  left:6px;
  width:calc((100% - 12px) / 5);
  border-radius:999px;
  background:rgba(86,192,255,.16);
  transform:translateX(calc(var(--dock-active-index, 0) * 100%));
  opacity:0;
  pointer-events:none;
}
.app-dock-highlight.is-animated{
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.app-dock-item{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:0 2px;
  border-radius:999px;
  color:rgba(236,246,255,.94);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0;
  overflow:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:color .16s ease, background-color .16s ease;
  background:none;
  border:0;
  font-family:inherit;
  cursor:pointer;
}
.app-dock-item .icon{ width:20px; height:20px; }
.app-dock-item.is-active{ color:var(--bg3); background:rgba(86,192,255,.12); }
.app-dock-item:active{ background:rgba(86,192,255,.16); }
.app-dock-label{
  display:block;
  max-width:100%;
  font-size:9.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Publicar va al centro del dock como un boton circular elevado (FAB), no como
   una pestana mas, para que siga destacando como la accion principal. */
.app-dock-item--publish{ overflow:visible; color:rgba(236,246,255,.94); }
.app-dock-item--publish.is-active{ background:none; }
.app-dock-publish-fab{
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(22,59,126,.96), rgba(86,192,255,.88));
  box-shadow:0 10px 22px rgba(8,30,70,.5), 0 0 0 4px rgba(10,19,38,.94);
  transition:transform .16s ease;
}
.app-dock-publish-fab .icon{ width:22px; height:22px; color:#eff8ff; }
.app-dock-item--publish .app-dock-label{ margin-top:24px; font-size:11px; }
.app-dock-item--publish:active .app-dock-publish-fab{ transform:translateX(-50%) scale(.92); }

/* Ayuda: la carita de Aura reemplaza el icono de salvavidas, del mismo tamano que los
   demas iconos del dock (no flota encima ni destaca aparte). */
.app-dock-help-face{ width:22px; height:22px; border-radius:50%; overflow:hidden; display:block; }
.app-dock-help-face svg{ width:100%; height:100%; display:block; }
.app-dock-item--help.is-active .app-dock-help-face{ box-shadow:0 0 0 2px var(--bg3); }

body.evento-interstitial-open .app-dock{ display:none; }
@media print{ .app-dock{ display:none !important; } }

/* Selector de municipio + idioma agrupados arriba a la derecha, en paginas donde ya se
   esta navegando dentro de un municipio. */
.header-top-actions{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  right:12px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100% - 24px);
}
/* En el landing-header, ".landing-header > *:not(.landing-header-bg-img)" (mas especifica)
   le pone position:relative a todo hijo directo, lo que tumbaba el position:absolute de
   arriba y el grupo quedaba empujado en flujo normal debajo del titulo. Esta regla repite
   la misma especificidad pero va despues en el archivo, asi que gana y lo deja flotando
   arriba a la derecha como corresponde. */
.landing-header > .header-top-actions{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  right:12px;
  z-index:6;
}
.header-top-actions #langToggle{ position:static; top:auto; right:auto; }
.header-top-actions--inline{
  position:static;
  margin-left:auto;
  align-self:center;
  flex:0 0 auto;
  max-width:none;
}
@media (max-width:860px){
  .header-top-actions--inline{ align-self:flex-end; margin-left:0; }
}
.municipio-switch-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:168px;
  height:32px;
  padding:0 13px;
  border:0;
  border-radius:999px;
  background:rgba(10,20,40,.68);
  border:1px solid rgba(170,220,255,.5);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:rgba(232,244,255,.95);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  touch-action:manipulation;
  opacity:1;
  transform:scale(1);
  transition:opacity .18s ease, transform .18s ease;
}
.municipio-switch-btn.is-hidden{
  opacity:0;
  transform:scale(.92);
  pointer-events:none;
}
.municipio-switch-btn .icon{ width:15px; height:15px; flex:0 0 auto; }
.municipio-switch-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.municipio-switch-chevron{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:0 0 auto;
  color:var(--bg3);
  background:rgba(86,192,255,.18);
  border-radius:50%;
}
.municipio-switch-chevron svg{ width:11px; height:11px; display:block; }

.municipio-switch-sheet{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:calc(56px + env(safe-area-inset-top, 0px)) 14px 14px;
}
.municipio-switch-sheet[hidden]{ display:none; }
.municipio-switch-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,10,22,.55);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .2s ease;
}
.municipio-switch-sheet.is-open .municipio-switch-backdrop{ opacity:1; }
.municipio-switch-panel{
  position:relative;
  width:100%;
  max-width:380px;
  max-height:min(58vh, 480px);
  display:flex;
  flex-direction:column;
  background:#0d1f3c;
  border:1px solid rgba(130,195,255,.34);
  border-radius:22px;
  padding:14px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 20px 48px rgba(0,0,0,.5);
  transform-origin:top right;
  transform:scale(.35);
  opacity:0;
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .16s ease;
}
.municipio-switch-sheet.is-open .municipio-switch-panel{ transform:scale(1); opacity:1; }
.municipio-switch-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.municipio-switch-title{ margin:0; font-size:15px; font-weight:800; color:var(--text); }
.municipio-switch-close{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(86,192,255,.12);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.municipio-switch-close .icon{ width:16px; height:16px; }
.municipio-switch-search-field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(170,220,255,.22);
  margin-bottom:10px;
}
.municipio-switch-search-field .icon{ width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
.municipio-switch-search-field input{
  flex:1;
  min-width:0;
  border:0;
  background:none;
  color:var(--text);
  font:inherit;
  font-size:14px;
}
.municipio-switch-search-field input:focus{ outline:none; }
.municipio-switch-list{
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:2px;
}
.municipio-switch-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(140,195,255,.18);
  border-radius:12px;
  background:rgba(120,180,255,.06);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.municipio-switch-item.is-current{ border-color:rgba(240,198,116,.55); background:rgba(240,198,116,.1); }
.municipio-switch-item .icon{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; }
.municipio-switch-empty{ margin:10px 2px; color:var(--muted); font-size:13.5px; }

/* Selector de idioma ES / EN (paginas publicas). Se usa el id para ganarle a
   ".landing-header > *" que vuelve relativos a los hijos del encabezado del inicio. */
#langToggle{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  right:12px;
  z-index:5;
  display:inline-flex;
  padding:3px;
  gap:2px;
  border-radius:999px;
  background:rgba(8,16,34,.55);
  border:1px solid rgba(170,220,255,.4);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
#langToggle button{
  min-width:34px;
  height:26px;
  padding:0 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(232,244,255,.75);
  font:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  touch-action:manipulation;
}
#langToggle button[aria-pressed="true"]{
  background:linear-gradient(135deg, #7fd0ff, #3b9cf0);
  color:#0c1f3f;
}
header.header-compact #langToggle{ top:calc(6px + env(safe-area-inset-top, 0px)); }
#langToggle.lang-toggle--inline{
  position:static;
  margin-left:auto;
  align-self:center;
  flex:0 0 auto;
}
@media (max-width:860px){
  #langToggle.lang-toggle--inline{ align-self:flex-end; margin-left:0; }
}

/* En encabezados sin boton a la derecha (p. ej. categorias) el selector ES/EN va arriba a
   la derecha: se reserva ese espacio para que no tape el nombre largo del municipio. */
header:not(.landing-header):has(> #langToggle:not(.lang-toggle--inline)) .brand{ padding-right:92px; }

/* Etiqueta "Vence en N dias" en el admin, junto al estado de la tarjeta. */
.meta-chip.expiring-chip{
  background:rgba(250,204,21,.18);
  border:1px solid rgba(250,204,21,.6);
  color:#fde68a;
  font-weight:800;
}

/* Tarjeta de admin para una edicion en espera (publicacion aprobada que un dueño edito): la
   publicacion sigue visible tal como estaba, esta tarjeta solo resume el cambio propuesto. */
.edit-pending-chip{
  border-color: rgba(250,204,21,.5);
  background: rgba(250,204,21,.16);
  color:#fde68a;
  font-weight:800;
}
.pending-edit-changes{
  margin:8px 0 0;
  padding-left:18px;
  font-size:12.5px;
  color: var(--muted);
  line-height:1.5;
}
.pending-edit-changes li{ margin-top:2px; }

/* Tipografia de titulos (display): Fraunces, serif moderna y suave, solo en los titulos
   grandes (nombre del municipio/pagina en el encabezado y nombre del negocio en su
   detalle). El resto de la app sigue en Plus Jakarta Sans. Solo cambia la letra, no los
   tamanos de cada pantalla. */
:root{
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

.brand h1,
.landing-header .brand h1,
header.header-compact:not(.landing-header) .brand h1,
.detail-title,
.item-overlay-title.detail-hero-title{
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  font-optical-sizing:auto;
}

/* ---------------------------------------------------------------------------------------
   Mi negocio (mi-negocio.html)
   --------------------------------------------------------------------------------------- */
.owner-card{
  max-width:640px;
  margin-inline:auto;
}

.owner-form{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.owner-submit{
  width:100%;
  justify-content:center;
  margin-top:4px;
}

/* El boton de enlazar/agregar una publicacion puntual: letra un poco mas grande para que
   "ver estadisticas" resalte y motive al dueno a enlazarla, en vez de leerse como un
   boton mas de formulario. */
#ownerLinkForm .owner-submit{
  font-size:15.5px;
  line-height:1.25;
  padding-top:13px;
  padding-bottom:13px;
}

.owner-code-input{
  font-size:28px;
  font-weight:800;
  letter-spacing:.5em;
  text-align:center;
  font-variant-numeric:tabular-nums;
  padding-left:.5em;
}

.owner-code-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
}

.owner-link-btn{
  padding:0;
  border:none;
  background:none;
  color:#8fd3ff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.owner-link-btn:hover{
  text-decoration:underline;
}

.owner-feedback{
  margin-bottom:14px;
}

.owner-code-alt{
  margin:18px 0 0;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

.owner-code-alt a{
  color:#8fd3ff;
  font-weight:700;
}.owner-list{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.owner-pub{
  padding:14px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(18,34,63,.92), rgba(12,26,50,.92));
  border:1px solid rgba(86,192,255,.22);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.owner-pub-top{
  display:flex;
  gap:12px;
  align-items:center;
}

.owner-pub-photo{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(86,192,255,.12);
  color:#8fd3ff;
}

.owner-pub-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.owner-pub-photo .icon{
  width:26px;
  height:26px;
}

.owner-pub-info{
  min-width:0;
}

.owner-pub-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.01em;
}

.owner-pub-place{
  margin-top:3px;
  font-size:12.5px;
  color:var(--muted);
}

.owner-pub-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}

.owner-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  border:1px solid transparent;
}.owner-chip--wait{
  color:var(--gold, #f0c674);
  background:rgba(240,198,116,.12);
  border-color:rgba(240,198,116,.3);
}.owner-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:14px;
}

.owner-stat{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:3px;
  padding:12px 6px;
  border-radius:16px;
  background:rgba(86,192,255,.07);
  border:1px solid rgba(86,192,255,.14);
  text-align:center;
}

.owner-stat-icon{
  color:#8fd3ff;
  line-height:0;
}

.owner-stat-icon .icon{
  width:18px;
  height:18px;
}

.owner-stat b{
  font-size:22px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.owner-stat > span:last-child{
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
}

/* Vistas y clics de la publicidad (Destacados / Portada) vinculada al negocio. */
.owner-ads{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.owner-ads-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.owner-ad-row{
  display:grid;
  gap:8px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(86,192,255,.07);
  border:1px solid rgba(86,192,255,.14);
}

.owner-ad-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.owner-ad-name{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 6px;
  font-weight:700;
  white-space:nowrap;
  min-width:0;
}

.owner-ad-place{
  flex-basis:100%;
  padding-left:24px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}

.owner-ad-name .icon{
  width:18px;
  height:18px;
  color:#8fd3ff;
}

.owner-ad-numbers{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-size:14px;
  color:var(--muted);
}

.owner-ad-numbers b{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.owner-pub-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

/* Mismo tamano de boton de siempre; el texto y el icono crecen para llenar mejor el
   boton y quedan centrados como un bloque. */
/* Uno debajo del otro, a todo el ancho: lado a lado, "Ver publicacion" se partia en
   dos lineas en celulares anchos. */
.owner-pub-actions{
  flex-direction:column;
}

.owner-pub-actions .btn{
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  font-size:16.5px;
  font-weight:800;
  letter-spacing:.01em;
  text-align:center;
  line-height:1;
}

.owner-pub-actions .icon{
  width:19px;
  height:19px;
  flex:0 0 auto;
}

.owner-delete-link{
  display:block;
  margin:12px auto 0;
  padding:4px 0;
  border:none;
  background:none;
  color:rgba(248,113,113,.85);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

.owner-delete-link:hover{
  text-decoration:underline;
}

.owner-delete-confirm{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.35);
  font-size:13px;
  line-height:1.4;
}

.owner-delete-confirm p{
  margin:0;
}

.owner-delete-note{
  margin-top:6px !important;
  color:var(--muted);
  font-size:12px;
}

.owner-delete-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.owner-delete-actions .btn{
  flex:1 1 0;
  justify-content:center;
}

.owner-delete-btn{
  background:#dc4a4a;
  border:1px solid #f08a8a;
  color:#fff;
  font-weight:800;
}

.owner-delete-link[hidden],
.owner-delete-confirm[hidden]{
  display:none;
}

.owner-chip--danger{
  color:#dc4a4a;
  background:rgba(220,74,74,.12);
  border-color:rgba(220,74,74,.35);
}

.owner-suspend-link{
  display:block;
  margin:12px auto 0;
  padding:4px 0;
  border:none;
  background:none;
  color:var(--muted);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

.owner-suspend-link:hover{
  text-decoration:underline;
}

.owner-suspend-confirm{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(86,192,255,.07);
  border:1px solid rgba(86,192,255,.25);
  font-size:13px;
  line-height:1.4;
}

.owner-suspend-confirm p{
  margin:0;
}

.owner-suspend-link[hidden],
.owner-suspend-confirm[hidden]{
  display:none;
}

.owner-suspended-note{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

.owner-restore-banner{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:rgba(220,74,74,.08);
  border:1px solid rgba(220,74,74,.3);
  font-size:13px;
  line-height:1.4;
  text-align:center;
}

.owner-restore-banner p{
  margin:0 0 10px;
}

.owner-restore-banner .btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}@media (max-width: 380px){
  .favorites-cta-wrap{ gap:8px; }
  .favorites-cta{
    padding:7px 11px;
    font-size:12px;
    gap:5px;
  }
}

/* Cuenta del dueno: correo y "Cerrar sesion" en una sola linea bajo el titulo. */
.owner-account-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(86,192,255,.07);
  border:1px solid rgba(86,192,255,.14);
}

.owner-account-email{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:rgba(232,244,255,.82);
}

.owner-account-row .owner-link-btn{
  flex:0 0 auto;
}

/* "Agregar otra publicación" dentro de Mis publicaciones: para negocios viejos que aun no
   tienen este correo registrado (ver ownerLinkPublication en functions). */
.owner-add-pub{
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed rgba(86,192,255,.22);
}

.owner-add-pub-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  padding:11px 14px;
  border-radius:16px;
  background:rgba(86,192,255,.08);
  border:1px dashed rgba(86,192,255,.35);
  color:#8fd3ff;
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
}

.owner-add-pub-toggle:hover{
  background:rgba(86,192,255,.14);
}

.owner-add-pub-toggle .icon{
  width:16px;
  height:16px;
}

.owner-add-pub-form{
  margin-top:2px;
}

.owner-add-pub-copy{
  margin:0 0 12px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.owner-add-pub-copy b{
  color:rgba(232,244,255,.92);
}

.owner-add-pub-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
}

.owner-add-pub-actions .btn{
  flex:1 1 0;
  justify-content:center;
}

/* ====== Selector de municipios: pestanas de region + vidrio oscuro ======
   Todas las regiones quedan a la vista arriba de la lista (antes Uraba, Choco, Bolivar y
   Atlantico eran botones al final de la pagina y mucha gente no bajaba hasta ellos). Las
   tarjetas, el buscador, las pestanas y el aviso de notificaciones son placas de vidrio
   azul profundo sobre un cielo azul con la foto de Aura Plus. Todo vive bajo
   .municipio-tabs-wrap o :not(.municipio-open), asi que dentro de un municipio nada cambia. */
.municipio-tabs-wrap{
  --mglass-bg:linear-gradient(135deg, rgba(14,38,88,.74), rgba(20,52,112,.60));
  --mglass-line:rgba(255,255,255,.28);
  --mglass-line-strong:rgba(255,255,255,.5);
  --mglass-shadow:0 10px 26px rgba(5,18,50,.35), inset 0 1px 0 rgba(255,255,255,.18);
  --mglass-blur:blur(16px) saturate(160%);
  --mglass-ink:#ffffff;
  --mglass-navy:#173f82;
}

/* La foto de Aura Plus con un velo azul ligero va en su propia capa, encima de las fotos
   y el velo de .municipio-bg (capa fija: en iOS un fondo "fixed" del body se estira con
   el largo de la pagina). Al elegir un municipio solo se desvanece, asi la foto del
   municipio aparece con el mismo fundido de siempre. La capa sobresale 60px por cada
   lado: en iOS, al desplazarse, la barra del navegador cambia el alto de la pantalla y
   con inset:0 por el borde se asomaba el fondo de abajo, como si la foto fuera un
   recuadro pegado encima. */
.municipio-bg::after{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    linear-gradient(180deg, rgba(36,88,180,.58) 0%, rgba(70,125,208,.50) 45%, rgba(130,175,232,.54) 100%),
    url("/assets/fondo-aura-plus.jpg?v=20260706ap20") 78% center / cover no-repeat,
    #2f66bf;
  opacity:1;
  transition:opacity .9s ease;
}
.municipio-open .municipio-bg::after{ opacity:0; }
/* Fondo de respaldo del mismo azul (lo que se ve al estirar la pagina en iOS). */
.landing-page:not(.municipio-open){ background:#2f66bf; }
@media (prefers-reduced-motion: reduce){
  .municipio-bg::after{ transition:none; }
}

.municipio-tabs-wrap .municipio-tabs-label{
  color:var(--mglass-ink);
  text-shadow:0 1px 8px rgba(5,18,50,.35);
}

.municipio-tabs-wrap .municipio-search,
.municipio-tabs-wrap .municipio-tabs .municipio-tab,
.municipio-region-tab,
#notifyPromptBanner{
  background:var(--mglass-bg);
  border:1px solid var(--mglass-line);
  box-shadow:var(--mglass-shadow);
  -webkit-backdrop-filter:var(--mglass-blur);
  backdrop-filter:var(--mglass-blur);
  color:var(--mglass-ink);
}

.municipio-tabs-wrap .municipio-search:focus-within{
  border-color:var(--mglass-line-strong);
  box-shadow:0 0 0 3px rgba(255,255,255,.22), var(--mglass-shadow);
}
.municipio-tabs-wrap .municipio-search svg{ color:var(--mglass-ink); }
.municipio-tabs-wrap .municipio-search input::placeholder{ color:rgba(255,255,255,.72); }
.municipio-tabs-wrap .municipio-search .voice-search-btn{
  background:rgba(255,255,255,.16);
  border-color:var(--mglass-line);
  color:var(--mglass-ink);
  box-shadow:none;
}

.municipio-tabs-wrap .municipio-tabs .municipio-tab:not(.is-active){
  border-color:var(--mglass-line);
  box-shadow:var(--mglass-shadow);
}
.municipio-tabs-wrap .municipio-tab-thumb{
  border:2px solid rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
@media (hover:hover){
  .municipio-tabs-wrap .municipio-tabs .municipio-tab:not(.is-disabled):hover{ border-color:var(--mglass-line-strong); }
}

/* Pestanas de region: en dos filas si no caben, para que ninguna quede cortada. */
.municipio-region-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
  margin:0 0 14px;
}
.municipio-region-tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:7px 11px 7px 13px;
  border-radius:999px;
  font:inherit;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.municipio-region-tab:active{ transform:scale(.97); }
.municipio-region-tab:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.municipio-region-count{
  min-width:22px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:12px;
  font-weight:800;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.municipio-region-tab[aria-selected="true"]{
  background:#ffffff;
  border-color:#ffffff;
  color:var(--mglass-navy);
  box-shadow:0 8px 20px rgba(5,18,50,.3);
}
.municipio-region-tab[aria-selected="true"] .municipio-region-count{
  background:rgba(23,63,130,.12);
  color:var(--mglass-navy);
}

/* Animacion al cambiar de region: la pastilla blanca se desliza hasta la pestana elegida
   (initIndex en app.js la mide y la mueve) y los municipios entran en cascada, enfocandose,
   desde el lado hacia el que se avanza. Sin JS la pestana elegida sigue siendo blanca. */
.municipio-region-tabs{ position:relative; }
.municipio-region-tab{ position:relative; z-index:1; }
.municipio-region-indicator{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:0;
  height:0;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 8px 22px rgba(5,18,50,.32);
  pointer-events:none;
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    width .55s cubic-bezier(.22,1,.36,1),
    height .55s cubic-bezier(.22,1,.36,1);
}
.municipio-region-indicator.is-instant{ transition:none; }
.municipio-region-tabs.has-indicator .municipio-region-tab[aria-selected="true"]{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.municipio-region-tab{ transition:color .35s ease, background .2s ease, border-color .2s ease, transform .15s ease; }

.municipio-region-pane.is-entering .municipio-tab{
  animation:municipioCardIn .6s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--enter-i, 0) * 35ms);
}
.municipio-region-pane.from-right{ --enter-x:22px; }
.municipio-region-pane.from-left{ --enter-x:-22px; }
@keyframes municipioCardIn{
  from{ opacity:0; transform:translate(var(--enter-x, 0), 10px) scale(.96); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:none; }
}
@media (prefers-reduced-motion: reduce){
  .municipio-region-indicator{ transition:none; }
  .municipio-region-pane.is-entering .municipio-tab{ animation:none; }
}

.municipio-region-pane{ width:100%; }
.municipio-region{ margin-top:0; }
.municipio-tabs-wrap.is-searching > .municipio-region-tabs{ display:none; }

/* Aviso de notificaciones: una franja de una linea (antes ocupaba media pantalla). */
#notifyPromptBanner{
  flex-wrap:nowrap;
  gap:10px;
  padding:10px 10px 10px 16px;
  border-radius:16px;
  border-style:solid;
}
#notifyPromptBanner b{ min-width:0; font-size:14px; font-weight:700; color:var(--mglass-ink); }
#notifyPromptBanner .notify-prompt-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; margin:0; }
#notifyPromptBtn{
  min-height:36px;
  padding:7px 16px;
  border-radius:999px;
  border:0;
  background:#ffffff;
  color:var(--mglass-navy);
  font-weight:800;
  box-shadow:none;
}
.notify-prompt-dismiss{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--mglass-line);
  background:transparent;
  color:var(--mglass-ink);
  cursor:pointer;
}
.notify-prompt-dismiss svg{ width:16px; height:16px; }
.notify-prompt-dismiss:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Sin backdrop-filter el vidrio queda un poco mas opaco para que el texto siga legible. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .municipio-tabs-wrap{ --mglass-bg:linear-gradient(135deg, rgba(14,38,88,.9), rgba(20,52,112,.82)); }
}

/* El "Volver" flotante se esconde mientras se ve el de arriba (initFloatingBackVisibility). */
.floating-back-btn{ transition:opacity .2s ease, transform .2s ease; }
.floating-back-btn.is-tucked{ opacity:0; transform:translateY(10px); pointer-events:none; }

/* ====== Tema "vidrio claro" (toda la app salvo el panel de admin y el cartel QR) ======
   Cielo azul con la foto de Aura Plus de fondo, placas de vidrio blanco con texto azul
   marino, lo elegido o principal en azul marino con letra blanca, verde solo para WhatsApp
   y dorado solo para Publicar. Los encabezados quedan en azul de marca con letra blanca.
   Todo va bajo body:not([data-page="admin"]):not([data-page="cartel"]) para no tocar el admin (tema oscuro propio) ni el cartel (se imprime). */
:root{
  --lg-plate:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.74));
  --lg-plate-solid:rgba(255,255,255,.97);
  --lg-raised:#e3ecf9;
  --lg-line:rgba(255,255,255,.95);
  --lg-line-soft:rgba(18,42,87,.14);
  --lg-shadow:0 8px 22px rgba(8,25,65,.18), inset 0 1px 0 #fff;
  --lg-blur:blur(16px) saturate(160%);
  --lg-ink:#122a57;
  --lg-ink-soft:#3d4f72;
  --lg-navy:#173f82;
  --lg-navy-2:#1f56b0;
  --lg-header:rgba(23,63,130,.90);
  --lg-wa:#13773f;
  --lg-gold:#e8b44f;
}
body:not([data-page="admin"]):not([data-page="cartel"]){
  --text:var(--lg-ink);
  --muted:var(--lg-ink-soft);
  --card:var(--lg-plate);
  --stroke:var(--lg-line-soft);
  --shadow:var(--lg-shadow);
  --foam:var(--lg-navy-2);
  color:var(--lg-ink);
}

/* ---- Fondo: la foto de Aura Plus con un velo azul, en una capa fija (en iOS un fondo del
   body se estira con el largo de la pagina). Dentro de un municipio va la foto del
   municipio con el mismo velo. El html lleva el mismo azul para que nunca asome otro. */
html:not(:has(body[data-page="admin"])):not(:has(body[data-page="cartel"])){ background:#2c62b8; }
body:not([data-page="admin"]):not([data-page="cartel"]):not([data-page="index"]){ background:transparent; }
body:not([data-page="admin"]):not([data-page="cartel"]):not([data-page="index"])::before{
  content:"";
  position:fixed;
  inset:-60px;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(36,88,180,.62) 0%, rgba(70,125,208,.55) 45%, rgba(130,175,232,.58) 100%),
    url("/assets/fondo-aura-plus.jpg?v=20260706ap20") 78% center / cover no-repeat,
    #2c62b8;
}
.landing-page.municipio-open .municipio-bg-overlay{
  background:linear-gradient(180deg, rgba(30,78,165,.62) 0%, rgba(44,98,184,.52) 50%, rgba(74,128,204,.58) 100%);
}

/* ---- Encabezados: banda azul de marca con letra blanca */
body:not([data-page="admin"]):not([data-page="cartel"]) header:not(.landing-header){
  background:var(--lg-header);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;
}
body:not([data-page="admin"]):not([data-page="cartel"]) header:not(.landing-header) :is(h1, small, .brand, .brand *, .pill){ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-header :is(h1, small){ color:#fff; }

/* ---- Paneles */
body:not([data-page="admin"]):not([data-page="cartel"]) .card{
  background:var(--lg-plate);
  border:1px solid var(--lg-line);
  box-shadow:var(--lg-shadow);
  color:var(--lg-ink);
}
/* En el listado y en el inicio del municipio el panel de fondo se quita: las tarjetas ya
   son placas y una placa dentro de otra se ve pesada. */
body:not([data-page="admin"]):not([data-page="cartel"])[data-page="home"] > .container > .card,
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(h1, h2, h3, h4){ color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.mini, .help, .muted){ color:var(--lg-ink-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.card, .notice, .item) a:not(.btn):not([class*="badge"]):not(.item-snippet-link):not(.item-icon-btn):not(.item-photo):not(.landing-search-result-open):not(.landing-search-result-edit){ color:var(--lg-navy-2); }
/* Texto sobre el fondo (fuera de las placas): blanco con sombra suave. */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(footer, .landing-download-links ~ footer, .municipio-tabs-label){ color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(5,18,50,.35); }
body:not([data-page="admin"]):not([data-page="cartel"]) footer a{ color:#fff; }

/* ---- Botones */
body:not([data-page="admin"]):not([data-page="cartel"]) .btn.primary{
  background:var(--lg-navy);
  border:1px solid var(--lg-navy);
  color:#fff;
  box-shadow:0 6px 16px rgba(8,25,65,.22);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .btn.primary *{ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.btn.secondary, .btn.ghost, .btn.home-return-btn, .home-start-btn, .btn-compact-back, .floating-back-btn, .landing-cta-secondary, .btn.home-start-btn){
  background:var(--lg-plate-solid);
  border:1px solid var(--lg-line);
  border-style:solid;
  color:var(--lg-ink);
  box-shadow:0 6px 16px rgba(8,25,65,.16);
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.btn.secondary, .btn.ghost, .btn.home-return-btn, .home-start-btn, .btn-compact-back, .floating-back-btn) *{ color:var(--lg-ink); }/* ---- Campos y buscadores */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.input, select, textarea, .searchbar){
  background:#fff;
  border:1px solid var(--lg-line-soft);
  color:var(--lg-ink);
  box-shadow:0 2px 8px rgba(8,25,65,.06);
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.searchbar input, .landing-searchbar input){ color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.input, textarea, .searchbar input, input)::placeholder{ color:#4f5d7a; }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.searchbar, .landing-searchbar) :is(.icon, svg){ color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) .voice-search-btn{ background:var(--lg-navy); border-color:var(--lg-navy); color:#fff; box-shadow:none; }
body:not([data-page="admin"]):not([data-page="cartel"]) .voice-search-btn :is(svg, .icon){ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) select option{ background:#fff; color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) label{ color:var(--lg-ink); }

/* ---- Avisos */
body:not([data-page="admin"]):not([data-page="cartel"]) .notice{
  background:var(--lg-raised);
  border:1px solid var(--lg-line-soft);
  border-style:solid;
  color:var(--lg-ink);
}

/* ---- Pestanas de categoria y subcategoria */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.tab, .subtab){
  background:var(--lg-plate-solid);
  border:1px solid var(--lg-line);
  color:var(--lg-ink);
  box-shadow:0 4px 12px rgba(8,25,65,.10);
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.tab.active, .subtab.active){
  background:var(--lg-navy);
  border-color:var(--lg-navy);
  color:#fff;
  box-shadow:0 6px 16px rgba(8,25,65,.24);
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.tab.active, .subtab.active) *{ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) .tab-slider{ display:none; }

/* ---- Tarjetas de negocio (la foto y su degradado oscuro se quedan igual) */
body:not([data-page="admin"]):not([data-page="cartel"]) .item{
  background:var(--lg-plate);
  border:1px solid var(--lg-line);
  box-shadow:var(--lg-shadow);
  color:var(--lg-ink);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .item .item-snippet{ color:var(--lg-ink-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-btn .item-icon-ico{
  background:var(--lg-raised);
  border:1px solid transparent;
  color:var(--lg-navy);
  box-shadow:none;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-label{ color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.item:not(.review-item) .item-actions.item-actions-v2 .btn-wa-block, .detail-wa-row-v2 .btn-wa-block, .btn-wa-block){
  background:var(--lg-wa);
  border:0;
  color:#fff;
  box-shadow:0 6px 16px rgba(31,157,87,.25);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .item-owner-link{ color:var(--lg-ink-soft); }

/* ---- Categorias principales del inicio */
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories{
  background:var(--lg-plate);
  border:1px solid var(--lg-line);
  box-shadow:var(--lg-shadow);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories-label{ color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip{
  background:#fff;
  border:1px solid var(--lg-line-soft);
  box-shadow:0 4px 12px rgba(8,25,65,.08);
  color:var(--lg-ink);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip-label{ color:var(--lg-ink); }

/* ---- Barra inferior: vidrio blanco, el activo en azul marino y Publicar en dorado */
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock{
  background:rgba(255,255,255,.92);
  border:1px solid #fff;
  box-shadow:0 10px 30px rgba(8,25,65,.22);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-item{ color:var(--lg-ink-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-item.is-active{ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-highlight{ background:var(--lg-navy); }
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-publish-fab{
  background:var(--lg-gold);
  color:#2b1d04;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(8,25,65,.25);
}

/* ---- Ventanas emergentes (tutorial, avisos, hojas): placa blanca casi opaca */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.modal-card, .municipio-switch-sheet-panel, .sheet-panel){
  background:var(--lg-plate-solid);
  border:1px solid var(--lg-line);
  color:var(--lg-ink);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
}

/* ---- Selector de municipios: el mismo vidrio claro */
.municipio-tabs-wrap{
  --mglass-bg:var(--lg-plate);
  --mglass-line:var(--lg-line);
  --mglass-line-strong:#fff;
  --mglass-shadow:var(--lg-shadow);
  --mglass-ink:var(--lg-ink);
  --mglass-navy:var(--lg-navy);
}
.municipio-tabs-wrap .municipio-tabs-label{ color:#fff; text-shadow:0 1px 8px rgba(5,18,50,.4); }
.municipio-tabs-wrap .municipio-search svg{ color:var(--lg-navy-2); }
.municipio-tabs-wrap .municipio-search input{ color:var(--lg-ink); }
.municipio-tabs-wrap .municipio-search input::placeholder{ color:#43516e; }
.municipio-tabs-wrap .municipio-search .voice-search-btn{ background:var(--lg-navy); border-color:var(--lg-navy); color:#fff; }
.municipio-tabs-wrap .municipio-tab-name{ color:var(--lg-ink); text-shadow:none; }
.municipio-tabs-wrap .municipio-tab-thumb{ border-color:#fff; }
.municipio-region-count{ background:rgba(23,63,130,.12); color:var(--lg-navy); }
.municipio-region-indicator{ background:var(--lg-navy); box-shadow:0 8px 20px rgba(8,25,65,.3); }
.municipio-region-tab[aria-selected="true"],
.municipio-region-tabs.has-indicator .municipio-region-tab[aria-selected="true"]{ color:#fff; }
.municipio-region-tab[aria-selected="true"]{ background:var(--lg-navy); border-color:var(--lg-navy); }
.municipio-region-tabs.has-indicator .municipio-region-tab[aria-selected="true"] .municipio-region-count,
.municipio-region-tab[aria-selected="true"] .municipio-region-count{ background:rgba(255,255,255,.22); color:#fff; }
.municipio-region-tab:focus-visible{ outline-color:var(--lg-navy); }
#notifyPromptBtn{ background:var(--lg-navy); color:#fff; }
.notify-prompt-dismiss{ border-color:var(--lg-line-soft); color:var(--lg-ink); }
.notify-prompt-dismiss:focus-visible{ outline-color:var(--lg-navy); }

/* ---- Ajustes puntuales del tema claro (contraste revisado pantalla por pantalla) */
/* Titulos y textos encima de fotos: siempre blancos, sobre el degradado oscuro de la foto. */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.item-photo-overlay, .item-photo-overlay *, .detail-hero, .detail-hero *):not(.item-overlay-rating):not(.item-overlay-rating *){ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) .brand-tagline-accent{ color:#ffe2a8; }
/* Textos que van directo sobre el fondo azul (no dentro de una placa). */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(footer, footer *, .legal-footer, .legal-footer *, .legal-back){ color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(5,18,50,.35); }
/* Numeros de las categorias principales */
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip-count{ background:var(--lg-raised); color:var(--lg-navy); border-color:transparent; }
/* Detalle: panel de acciones, datos y calificaciones */
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-summary.detail-summary-v2{ background:var(--lg-raised); border-color:var(--lg-line-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-summary .item-icon-btn .item-icon-ico{ background:#fff; }
/* Precio sobre el panel azul claro: el texto claro del tema oscuro no se leia; oro mas profundo para contraste. */
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-summary .item-price-line .item-price-name{ color:var(--lg-ink-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-summary .item-price-line .item-price-value{ color:#7a5200; }
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-info-label{ color:var(--lg-ink-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.reviews-block){ background:transparent; }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.review-comment, .review-form){ background:#fff; border-color:var(--lg-line-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.review-head-score, .review-head-score *, .rating-chip, .rating-chip *){ color:#7a5410; }
body:not([data-page="admin"]):not([data-page="cartel"]) .rating-chip{ background:rgba(232,180,79,.18); border-color:rgba(232,180,79,.45); }
body:not([data-page="admin"]):not([data-page="cartel"]) .star-btn{ background:var(--lg-raised); border-color:var(--lg-line-soft); color:#9aa8c0; }
/* Titulos de seccion: publicar, ayuda, publicidad */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.publish-step-header, .publish-step-header span, .label){ color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) .plan-badge{ background:rgba(232,180,79,.18); border-color:rgba(232,180,79,.5); color:#7a5410; }
/* Alcaldia: el celeste de antes no se lee sobre blanco */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.alcaldia-badge, .alcaldia-tramite-fuente, .alcaldia-tramite-arrow){ color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-badge{ background:rgba(31,86,176,.1); border-color:rgba(31,86,176,.3); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(h1, h2) span:not([class]){ color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) .legal-card a{ color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) .star-btn{ color:#8494b0; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta{ background:rgba(255,248,235,.96); border:1px solid rgba(232,180,79,.6); box-shadow:0 6px 16px rgba(8,25,65,.16); }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta :is(.icon, svg){ color:#b07b16; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta-title{ color:#7a5410; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta-sub{ color:#6f5420; }
body:not([data-page="admin"]):not([data-page="cartel"]) .item .item-snippet-link{ color:var(--lg-ink-soft); }
/* Mis publicaciones: tarjeta de cada negocio, estadisticas y publicidad */
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-pub{ background:#fff; border:1px solid var(--lg-line-soft); box-shadow:0 6px 18px rgba(8,25,65,.10); }
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-pub-photo{ background:var(--lg-raised); color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.owner-stat, .owner-ad-row, .owner-suspend-confirm){ background:var(--lg-raised); border-color:transparent; }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.owner-stat-icon, .owner-ad-name .icon){ color:var(--lg-navy-2); }body:not([data-page="admin"]):not([data-page="cartel"]) .owner-chip--wait{ color:#7a5410; background:rgba(232,180,79,.18); border-color:rgba(232,180,79,.45); }body:not([data-page="admin"]):not([data-page="cartel"]) .owner-delete-link{ color:#c0392b; }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.owner-delete-confirm, .owner-restore-banner){ background:rgba(192,57,43,.06); border-color:rgba(192,57,43,.3); }
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-chip--danger{ color:#c0392b; background:rgba(192,57,43,.14); border-color:rgba(192,57,43,.4); }
/* Ventana para cambiar de municipio */
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-switch-panel{ background:var(--lg-plate-solid); border:1px solid #fff; box-shadow:0 20px 50px rgba(8,25,65,.3); }
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-switch-close{ background:var(--lg-raised); color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-switch-item{ background:#fff; border-color:var(--lg-line-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-switch-item .icon{ color:#b07b16; }
/* Tutorial y avisos de instalacion */
body:not([data-page="admin"]):not([data-page="cartel"]) .install-step-text{ color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) .status-pill.pending{ color:#7a5410; }
/* "Cerrar" del tutorial se cortaba ("Cerra"): el boton no debe encogerse por debajo de su texto. */
.modal-head .btn{ flex:0 0 auto; white-space:nowrap; }
/* Mis publicaciones: fila de la cuenta (correo + cerrar sesion) */
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-account-row{ background:var(--lg-raised); border-color:transparent; color:var(--lg-ink); }
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-link-btn{ color:var(--lg-navy-2); }

/* ---- Contraste medido sobre los pixeles reales (WCAG AA: 4.5 texto, 3 iconos/texto grande) */
/* Texto que iba directo sobre la foto: en las zonas claras (mar, cielo) bajaba de 3:1. Va
   sobre una pastilla de vidrio azul marino, que lo hace legible sobre cualquier parte. */
body:not([data-page="admin"]):not([data-page="cartel"]) :is(footer, .legal-footer){
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:8px 14px;
  border-radius:16px;
  background:rgba(16,42,94,.74);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  text-shadow:none;
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(footer, footer *, .legal-footer, .legal-footer *){ color:#fff; text-shadow:none; }
.municipio-tabs-wrap .municipio-tabs-label{
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(16,42,94,.74);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  text-shadow:none;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .legal-back{ background:var(--lg-plate-solid); color:var(--lg-ink); border:1px solid #fff; text-shadow:none; box-shadow:0 6px 16px rgba(8,25,65,.16); }
/* Listado: subcategorias y "Resultados" en placa clara, como el resto de controles */
body:not([data-page="admin"]):not([data-page="cartel"]) .subtabs-wrap{
  padding:12px;
  border-radius:22px;
  background:var(--lg-plate);
  border:1px solid var(--lg-line);
  box-shadow:var(--lg-shadow);
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.subtabs-title, .subtabs-meta){ color:var(--lg-ink); text-shadow:none; }
body:not([data-page="admin"]):not([data-page="cartel"]) .subtabs-meta{ color:var(--lg-ink-soft); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.home-toolbar .mini, .home-toolbar .mini b){ color:var(--lg-ink); text-shadow:none; }
body:not([data-page="admin"]):not([data-page="cartel"]) .home-toolbar .mini{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  background:var(--lg-plate-solid);
}
/* Encabezado del municipio: nombre en el boton de cambiar municipio y en el eslogan */
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-switch-btn{ background:rgba(10,24,56,.95); }
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-switch-name{ color:#fff; }
/* Barra del plan elegido en Publicar: va sobre placa blanca, asi que el texto claro original no se leia */
body:not([data-page="admin"]):not([data-page="cartel"]) .plan-selected-bar{ background:rgba(31,86,176,.08); border-color:rgba(31,86,176,.3); color:var(--lg-navy); }
/* Tarjeta de instalar la app: era vidrio oscuro, el unico elemento oscuro del tema claro */
body:not([data-page="admin"]):not([data-page="cartel"]) .install-app-card{ background:var(--lg-plate); border:1px solid var(--lg-line); box-shadow:var(--lg-shadow); }
body:not([data-page="admin"]):not([data-page="cartel"]) .install-guide-text{ color:var(--lg-ink-soft); }
/* Subpaginas (Ayuda, Publicidad, Mis publicaciones, Publicar): el boton Volver quedaba pegado al borde de la
   cabecera y la tarjeta empezaba sin aire. Se da aire dentro de la cabecera y debajo de ella. */
body:not([data-page="admin"]):not([data-page="cartel"]) header:not(.landing-header){ padding-bottom:14px; }
body:not([data-page="admin"]):not([data-page="cartel"]) header:not(.landing-header) + :is(section, main){ margin-top:14px; }
/* Selector ES/EN: en subpaginas bajaba a una fila propia y hacia la cabecera mas alta que en las demas.
   Va flotando arriba a la derecha, como en Inicio, sin ocupar una fila. */
body:not([data-page="admin"]):not([data-page="cartel"]) header:not(.landing-header) #langToggle.lang-toggle--inline{ position:absolute; top:12px; right:12px; margin:0; }
/* Volver flotante en el detalle: solo la flecha en un circulo blanco sobre la barra inferior, para que no tape
   el formulario de calificar ni el pie de pagina (antes era una pastilla con texto de ancho completo). */
body[data-page="detalle"] .floating-back-btn{
  width:44px;
  height:44px;
  padding:0;
  right:16px;
  bottom:calc(var(--dock-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
  border-radius:50%;
  background:var(--lg-plate-solid);
  border:1px solid #fff;
  color:var(--lg-ink);
  box-shadow:var(--lg-shadow);
}
body[data-page="detalle"] .floating-back-btn .icon-slot{ width:20px; height:20px; }
/* Calificar en el detalle: las 5 estrellas (46px cada una) se partian en 4 + 1 dentro de la tarjeta */
body:not([data-page="admin"]):not([data-page="cartel"]) .review-stars{ flex-wrap:nowrap; }
body:not([data-page="admin"]):not([data-page="cartel"]) .review-stars .star-btn{ flex:1 1 0; width:auto; min-width:0; max-width:46px; height:44px; }
/* Alcaldia no usa .container: el margen negativo de la cabecera la subia 22px y cortaba el titulo */
body[data-page="alcaldia"] header.alcaldia-header{ margin-top:0; }
body:not([data-page="admin"]):not([data-page="cartel"]) header:not(.landing-header):has(#langToggle.lang-toggle--inline) .brand{ padding-right:92px; }
/* Publicar en la barra inferior: el fondo azul de "activo" se veia como una pastilla detras del boton; el boton ya es el activo */
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-item--publish.is-active{ background:none; box-shadow:none; }
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-item--publish, body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-item--publish.is-active{ color:var(--lg-navy); }
/* Publicar: la pagina es corta y el pie de pagina quedaba detras de la barra inferior (se veia una pastilla azul). Misma holgura que .container. */
body:has(.app-dock) main.wrap{ padding-bottom:calc(var(--dock-h, 0px) + env(safe-area-inset-bottom, 0px) + 34px); }
body:not([data-page="admin"]):not([data-page="cartel"]) .brand-tagline-accent{ color:#fff; font-weight:800; }
/* Iconos */
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-publish-fab :is(.icon-slot, .icon, svg){ color:#2b1d04; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip-icon{ color:color-mix(in srgb, rgb(var(--c,86,192,255)) 50%, #0b1a33); }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chip-icon{ color:color-mix(in srgb, currentColor 50%, #0b1a33); }
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.publish-step-header, #formWrap) :is(.icon-slot, .icon){ color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-icon{ color:var(--lg-navy-2); background:var(--lg-raised); }
body:not([data-page="admin"]):not([data-page="cartel"]) .publish-step-header .publish-step-num{ background:var(--lg-navy); color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) .star-btn{ color:#6d7d9c; }
/* La estrella seleccionada se perdia: las reglas de arriba pisaban el color de .active por especificidad. */
body:not([data-page="admin"]):not([data-page="cartel"]) .star-btn.active{ color:#7a5410; border-color:rgba(232,180,79,.6); background:rgba(232,180,79,.22); }

/* ====== Inicio del municipio: menos fondo, Destacados mas arriba y mas grande ======
   El velo sobre la foto del municipio era tan claro que la ciudad competia con los botones;
   el encabezado y el "Volver" empujaban Destacados casi a la mitad de la pantalla. */
body.landing-page.municipio-open .municipio-bg-overlay{
  background:linear-gradient(180deg, rgba(14,40,92,.84) 0%, rgba(20,54,118,.80) 50%, rgba(30,70,140,.84) 100%);
}

/* Encabezado mas compacto en el celular (logo y titulo un poco mas pequenos). */
@media (max-width:860px){
  .municipio-open .landing-header{ padding:16px 14px 18px; }
  .municipio-open .landing-header .brand{ gap:10px; }
  .municipio-open .landing-header .logo-img{ width:78px; height:78px; }
  .municipio-open .landing-header .brand h1{ font-size:32px; line-height:1.05; }
  .municipio-open .landing-header .brand small{ font-size:15px; }
}

/* "Volver a municipios": pastilla blanca compacta, se distingue del fondo azul. */
.municipio-open .municipio-back-wrap{ margin:0 0 10px; }
body:not([data-page="admin"]) .btn.primary.municipio-back-btn{
  padding:9px 16px;
  font-size:14px;
  background:#ffffff;
  color:#173f82;
  border:1px solid #ffffff;
  box-shadow:0 6px 18px rgba(5,18,50,.3);
}
body:not([data-page="admin"]) .btn.primary.municipio-back-btn *{ color:#173f82; }

/* Destacados pegado arriba y a todo el ancho del contenido. */
.municipio-open .landing-card{ padding-top:0; padding-left:0; padding-right:0; }
.municipio-open .ad-carousel{
  max-width:none;
  margin-bottom:12px;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 14px 34px rgba(5,18,50,.4);
}

/* "¡Destaca tu negocio!": boton dorado lleno, a todo el ancho, con flecha. */
body:not([data-page="admin"]) .ad-featured-cta-wrap{ margin-top:0 !important; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta.ad-featured-cta--two-line{
  width:100%;
  justify-content:flex-start;
  padding:12px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, #f6cf7a 0%, #e8b44f 100%);
  border:1px solid rgba(255,236,190,.9);
  box-shadow:0 10px 24px rgba(120,80,10,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta--two-line :is(.icon, svg){ color:#3a2604; width:22px; height:22px; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta--two-line .ad-featured-cta-title{ color:#2b1d04; font-size:15.5px; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta--two-line .ad-featured-cta-sub{ color:#4a3410; font-size:12.5px; }
.ad-featured-cta--two-line::after{
  content:"›";
  margin-left:auto;
  font-size:24px;
  font-weight:700;
  line-height:1;
  color:#2b1d04;
}

/* Cuadro de "Categorias principales" en azul claro: los botones blancos de cada categoria
   resaltan encima, en vez de blanco sobre blanco. */
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories{
  background:linear-gradient(180deg, rgba(205,222,248,.94), rgba(184,207,243,.92));
  border:1px solid rgba(255,255,255,.85);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip{
  background:#ffffff;
  border-color:rgba(255,255,255,.95);
  box-shadow:0 6px 14px rgba(20,50,110,.16);
}

/* Listado, detalle y demas paginas: velo azul mas oscuro sobre la foto de fondo, para que
   las tarjetas de publicaciones sean lo protagonista. */
body:not([data-page="admin"]):not([data-page="cartel"]):not([data-page="index"])::before{
  background:
    linear-gradient(180deg, rgba(14,40,92,.84) 0%, rgba(20,54,118,.80) 50%, rgba(30,70,140,.84) 100%),
    url("/assets/fondo-aura-plus.jpg?v=20260706ap20") 78% center / cover no-repeat,
    #1d4a96;
}
/* La tarjeta casi opaca: antes se veia la ciudad a traves del texto. */
body:not([data-page="admin"]):not([data-page="cartel"]) .item{
  background:linear-gradient(180deg, rgba(246,249,255,.97), rgba(236,242,252,.96));
}
/* Botones Ver / Ubicacion / QR / Compartir (y Como llegar en el detalle): placas blancas
   flotantes con sombra, el mismo efecto de las tarjetas de municipio y categorias. */
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-btn .item-icon-ico{
  background:#ffffff;
  border:1px solid rgba(255,255,255,.95);
  color:#1f56b0;
  box-shadow:0 8px 18px rgba(20,50,110,.18), 0 2px 4px rgba(20,50,110,.08), inset 0 1px 0 #fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-btn:active .item-icon-ico{
  transform:scale(.94);
  box-shadow:0 3px 8px rgba(20,50,110,.16);
}
@media (hover:hover){
  body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-btn:hover .item-icon-ico{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(20,50,110,.22), 0 2px 4px rgba(20,50,110,.08), inset 0 1px 0 #fff;
  }
}
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-label{ color:#122a57; font-weight:700; }

/* Detalle: panel de Como llegar / Compartir / Cartel QR en azul claro (como el cuadro de
   categorias) para que los botones blancos flotantes resalten encima. */
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-summary.detail-summary-v2{
  background:linear-gradient(180deg, rgba(205,222,248,.96), rgba(184,207,243,.94));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 26px rgba(8,25,65,.16);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .detail-summary .item-icon-btn .item-icon-ico{
  box-shadow:0 10px 22px rgba(20,50,110,.24), 0 2px 4px rgba(20,50,110,.1), inset 0 1px 0 #fff;
}

/* Mis publicaciones: "Ver publicacion" era blanco sobre la tarjeta blanca. Azul claro con
   borde azul, para que se vea como boton sin competir con "Editar" (azul marino lleno). */
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-pub-actions .btn.secondary{
  background:#dce7f8;
  border:1.5px solid #1f56b0;
  color:#173f82;
  box-shadow:0 4px 12px rgba(20,50,110,.12);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-pub-actions .btn.secondary *{ color:#173f82; }

/* Selector de municipios: el contenido siempre arriba. Con "align-content:center", al
   pasar a una region con pocos municipios (Bolivar, Choco) toda la pantalla saltaba al
   centro; ahora el encabezado y las pestanas se quedan quietos y solo cambia la lista. */
.landing-page:not(.municipio-open) .landing-container{ align-content:start; }

/* "¡Destaca tu negocio!": solo texto, centrado (sin icono ni flecha). */
.ad-featured-cta--two-line .icon-slot,
.ad-featured-cta--two-line > .icon{ display:none; }
.ad-featured-cta--two-line::after{ content:none; }
body:not([data-page="admin"]):not([data-page="cartel"]) .ad-featured-cta.ad-featured-cta--two-line{ justify-content:center; text-align:center; }
.ad-featured-cta--two-line .ad-featured-cta-text{ align-items:center; }

/* "Buscar" del inicio del municipio: era azul marino sobre el fondo azul oscuro. Azul vivo
   con borde blanco y sombra, para que se separe del fondo. */
body:not([data-page="admin"]):not([data-page="cartel"]) #landingSearchBtn.btn.primary{
  background:linear-gradient(135deg, #3b82f6 0%, #1f56b0 100%);
  border:1.5px solid rgba(255,255,255,.9);
  color:#fff;
  box-shadow:0 10px 24px rgba(5,18,50,.4), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Pestana de categoria elegida: era azul marino sobre el fondo azul marino y se perdia
   (sobre todo al buscar). Azul vivo con borde blanco, como el boton Buscar. */
body:not([data-page="admin"]):not([data-page="cartel"]) .tab.active{
  background:linear-gradient(135deg, #3b82f6 0%, #1f56b0 100%);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(5,18,50,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .tab.active :is(.tab-count, [class*="count"]){
  background:rgba(255,255,255,.22);
  border-color:transparent;
  color:#fff;
}

/* "Ver categorias": sin el pulso de halo celeste (se veia como un brillo raro alrededor). */
body:not([data-page="admin"]):not([data-page="cartel"]) .btn.home-return-btn{ animation:none; }

/* Subcategorias: la fila recortaba lo que sobresalia (la elegida sube 2px y tiene sombra),
   asi que se veia cortada arriba. Se le da aire arriba y abajo sin mover el resto. */
body:not([data-page="admin"]):not([data-page="cartel"]) .subtabs{
  padding:6px 4px 10px;
  margin:-6px -4px -10px;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .subtab.active{ transform:none; }
/* Las no elegidas con contorno azul suave: antes eran blancas sin borde sobre la placa
   clara y se confundian con ella. */
body:not([data-page="admin"]):not([data-page="cartel"]) .subtab:not(.active){
  border:1.5px solid rgba(31,86,176,.35);
  box-shadow:0 3px 8px rgba(20,50,110,.10);
}

/* Tarjetas de negocio: botones Ver / Ubicacion / QR / Compartir mas grandes y con contorno
   azul, y la descripcion en letra mas grande y mas oscura (salia demasiado pequena). */
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-btn .item-icon-ico{
  width:54px;
  height:54px;
  border-radius:16px;
  border:1.5px solid rgba(31,86,176,.38);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-btn .item-icon-ico .icon{ width:24px; height:24px; }
body:not([data-page="admin"]):not([data-page="cartel"]) .item-icon-label{ font-size:14px; }
body:not([data-page="admin"]):not([data-page="cartel"]) .item .item-snippet,
body:not([data-page="admin"]):not([data-page="cartel"]) .item .item-snippet-link{
  font-size:15.5px;
  line-height:1.45;
  color:#26385c;
}

/* "Ver categorias": sin el icono de casa (es el mismo de Inicio en la barra y confundia) y
   con el texto mas grande, centrado en el boton. */
body:not([data-page="admin"]):not([data-page="cartel"]) .btn.home-return-btn{
  justify-content:center;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Encabezado del municipio: titulo y frase mas pequenos para que se vea la foto que rota
   (es la identidad de cada municipio), y el nombre dentro de la frase vuelve a ir en
   celeste, como antes, con una sombra oscura que lo mantiene legible sobre la foto. */
@media (max-width:860px){
  .municipio-open .landing-header .brand h1{ font-size:26px; line-height:1.1; }
  .municipio-open .landing-header .brand small{ font-size:13.5px; font-weight:600; }
}
.municipio-open .landing-header .brand :is(h1, small){ text-shadow:0 2px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5); }
body:not([data-page="admin"]):not([data-page="cartel"]) .brand-tagline-accent{
  color:#7fd0ff;
  font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.55);
}
/* Foto del encabezado mas visible: el velo solo oscurece la parte de abajo, donde va el texto. */
.municipio-open .landing-header::before{
  background:linear-gradient(180deg, rgba(8,19,40,.10) 0%, rgba(8,19,40,.12) 40%, rgba(8,19,40,.62) 100%);
}

/* Resultados del buscador del inicio del municipio: tenian su propio estilo oscuro y casi
   transparente (pensado para el tema anterior) y se perdian en el fondo. Placa clara con
   cada resultado como tarjeta blanca, texto azul marino y botones con color propio. */
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-results{
  background:linear-gradient(180deg, rgba(205,222,248,.96), rgba(184,207,243,.94));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 26px rgba(8,25,65,.18);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-results-title{ color:#173f82; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-results-meta{ color:#3d4f72; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result{
  background:#ffffff;
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 16px rgba(20,50,110,.14);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result:has(.landing-search-result-linkarea:hover),
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result:has(.landing-search-result-linkarea:active){
  background:#f3f7fe;
  border-color:rgba(31,86,176,.35);
}
body:not([data-page="admin"]):not([data-page="cartel"]) :is(.landing-search-result-title, .landing-search-result-title a){ color:#122a57; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result-subtitle{ color:#26385c; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result-description{ color:#3d4f72; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result-tag{
  background:#dce7f8; border-color:rgba(31,86,176,.3); color:#173f82;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result-subtag{
  background:#eef3fb; border-color:rgba(18,42,87,.18); color:#26385c;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result-open{
  background:#173f82; border-color:#173f82; color:#fff;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-result-edit{
  background:#fff4de; border-color:rgba(176,123,22,.5); color:#7a5410;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-results a.landing-search-result-open,
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-results .landing-search-result-open{ color:#fff; }
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-search-results a.landing-search-result-edit{ color:#7a5410; }

/* Foto del encabezado del municipio mas grande: el bloque crece y el texto baja al pie
   de la foto, asi se ve mas el municipio entre el logo y el titulo. */
@media (max-width:860px){
  .municipio-open .landing-header{
    min-height:clamp(250px, 64vw, 320px);
    align-items:flex-end;
    padding-bottom:16px;
  }
  .municipio-open .landing-header .brand{ width:100%; }
}
/* El logo se queda arriba y el nombre + la frase bajan al pie de la foto. */
@media (max-width:860px){
  .municipio-open .landing-header{ align-items:stretch; padding-bottom:12px; }
  .municipio-open .landing-header .brand{ justify-content:space-between; align-self:stretch; }
}
@media (max-width:860px){
  .municipio-open .landing-header .brand{ flex:1 1 auto; }
}

/* Pestanas de region centradas en cada fila, sin importar cuantas regiones haya. La
   pastilla que se desliza se mide sobre la pestana real, asi que sigue funcionando. */
.municipio-region-tabs{ justify-content:center; }

/* Tramites de la Alcaldia: cada tramite era casi del mismo color que la placa de fondo.
   Tarjeta blanca con contorno azul y sombra, separada de las demas. */
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramites{ display:grid; gap:12px; }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-btn{
  background:#ffffff;
  border:1.5px solid rgba(31,86,176,.28);
  border-radius:16px;
  box-shadow:0 6px 16px rgba(20,50,110,.14);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-btn:active{ transform:scale(.99); }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-name{ color:#122a57; }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-desc{ color:#3d4f72; }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-icon{ background:#dce7f8; color:#1f56b0; }
/* Tramites: letra mas grande; el texto se acomoda en varias lineas sin salirse. */
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-info{ min-width:0; flex:1 1 auto; }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-name{ font-size:18px; line-height:1.25; overflow-wrap:normal; }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-desc{ font-size:15px; line-height:1.4; }
body:not([data-page="admin"]):not([data-page="cartel"]) .alcaldia-tramite-fuente{ font-size:13px; overflow-wrap:anywhere; }

/* Pulido premium: escala unica de radios y sombras (usar estas variables en lo nuevo),
   respuesta uniforme al toque y numeros/titulos mas ordenados. */
:root{
  --r-sm:12px; --r-md:16px; --r-lg:22px;
  --sh-rest:0 4px 12px rgba(8,25,65,.12);
  --sh-raised:0 8px 22px rgba(8,25,65,.18);
  --sh-float:0 16px 36px rgba(8,25,65,.30);
}
:is(.btn,.item,.landing-chip,.alcaldia-tramite-btn,.municipio-region-tab,.favorites-cta,.owner-cta){
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
@media (hover:none){
  :is(.btn,.item:not(.review-item),.landing-chip,.alcaldia-tramite-btn,.municipio-region-tab,.favorites-cta,.owner-cta):active{ transform:scale(.98); }
}
.item-price-value, .item-price-line, .rating-chip, .landing-chip-count, .review-head-score, .plan-price{
  font-variant-numeric:tabular-nums;
}
.brand h1, .detail-title, .item-overlay-title.detail-hero-title{ text-wrap:balance; }
@media (prefers-reduced-motion:reduce){
  :is(.btn,.item,.landing-chip,.alcaldia-tramite-btn,.municipio-region-tab,.favorites-cta,.owner-cta):active{ transform:none !important; }
}

/* Esqueletos de carga: sobre la placa blanca del tema claro el relleno blanco no se veia,
   asi que base azul muy tenue y destello claro mas marcado (sigue siendo lento y sutil). */
body:not([data-page="admin"]):not([data-page="cartel"]) .skeleton-box{ background:rgba(23,63,130,.09); }
body:not([data-page="admin"]):not([data-page="cartel"]) .skeleton-box::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation-duration:1.8s;
}

/* Filas de pestanas: al soltar el dedo se acomodan con un iman suave (proximity no
   fuerza posicion, solo ayuda cuando el dedo queda cerca de un borde). */
.tabs, .subtabs{ scroll-snap-type:x proximity; scroll-padding-inline:12px; }
.tabs > *, .subtabs > *{ scroll-snap-align:start; }

/* Foto de la tarjeta que se expande hasta la foto del detalle (ver pageswap en app.js y
   pagereveal en detalle.html). Mismo easing del resto del sitio, sin rebote; la raiz
   conserva su fundido corto. Con movimiento reducido no hay transicion (navigation:none). */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(aura-hero){
    animation-duration:.36s;
    animation-timing-function:cubic-bezier(.2,.8,.2,1);
    border-radius:22px;
    overflow:clip;
  }
  ::view-transition-old(aura-hero),
  ::view-transition-new(aura-hero){
    height:100%;
    object-fit:cover;
    mix-blend-mode:normal;
  }
}

/* ====== Refinamiento premium: selector de municipios mas claro ======
   Las tarjetas de municipio ahora se ven tocables (flecha) y su nombre tiene jerarquia
   clara; la etiqueta "Elige tu municipio" pasa de pastilla oscura a placa blanca con texto
   azul marino, como el resto del vidrio claro. Solo cambia el selector de municipios. */
body:not([data-page="admin"]):not([data-page="cartel"]) .municipio-tabs-wrap .municipio-tabs-label{
  background:rgba(255,255,255,.94);
  border:1px solid #fff;
  color:var(--lg-navy);
  text-shadow:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  padding:7px 16px;
  box-shadow:0 8px 20px rgba(8,25,65,.18);
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab{
  position:relative;
  min-height:64px;
  padding:6px 22px 6px 6px;
  border-radius:18px;
  gap:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(8,25,65,.14);
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab-thumb{
  width:44px;
  height:44px;
  flex-basis:44px;
  border-radius:13px;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(8,25,65,.18);
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab-name{
  font-size:14px;
  font-weight:800;
  color:var(--lg-ink);
  line-height:1.2;
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab:not(.is-disabled)::after{
  content:"";
  position:absolute;
  right:11px;
  top:50%;
  width:7px;
  height:7px;
  border-right:2.2px solid var(--lg-navy-2);
  border-top:2.2px solid var(--lg-navy-2);
  transform:translateY(-50%) rotate(45deg);
  opacity:.6;
  pointer-events:none;
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab.is-active::after{ border-color:#fff; opacity:.9; }

/* ====== "Agregar otra publicacion" en Mis publicaciones: sobre el vidrio claro el azul
   claro se perdia. Placa blanca, texto azul marino y borde punteado mas marcado. */
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-add-pub-toggle{
  background:#fff;
  border:1.5px dashed var(--lg-navy-2);
  color:var(--lg-navy);
  box-shadow:0 6px 16px rgba(8,25,65,.12);
  padding:13px 14px;
  font-size:14px;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-add-pub-toggle:hover{ background:#f3f7fd; }
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-add-pub-toggle .icon{ color:var(--lg-navy-2); }
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-add-pub{ border-top-color:rgba(18,42,87,.22); }

/* ====== Municipios en tarjetas con foto arriba (2 columnas) ======
   Cada municipio muestra su foto ancha (assets/municipios/card-<slug>.jpg, 480x290) y el
   nombre debajo. Ya no se usa la flecha: la tarjeta entera es el boton. */
.municipio-tabs-wrap .municipio-tabs .municipio-tab{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  min-height:0;
  padding:7px 7px 11px;
  border-radius:20px;
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab::after{ display:none; }
.municipio-tabs-wrap .municipio-tabs .municipio-tab-thumb{
  width:100%;
  height:auto;
  aspect-ratio:480 / 290;
  flex:0 0 auto;
  border-radius:14px;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(8,25,65,.16);
}
.municipio-tabs-wrap .municipio-tabs .municipio-tab-name{
  padding:0 5px 1px;
  text-align:center;
  font-size:15px;
  font-weight:800;
  color:var(--lg-ink);
  line-height:1.2;
}

/* ====== Pulido: Cerrar sesion, pastilla "Detalle", encabezado del detalle y dock ====== */
/* Cerrar sesion: boton compacto y claro en vez de una barra vacia */
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-account-row{
  padding:8px 8px 8px 14px;
}
body:not([data-page="admin"]):not([data-page="cartel"]) #ownerLogoutBtn{
  background:#fff;
  border:1px solid var(--lg-line-soft);
  border-radius:999px;
  padding:7px 14px;
  color:var(--lg-navy);
  font-size:13px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(8,25,65,.10);
}
/* Pastilla "Detalle" del encabezado: placa blanca con texto azul marino */
body[data-page="detalle"]:not([data-page="admin"]):not([data-page="cartel"]) header .top-actions .pill{
  background:#fff;
  border:1px solid #fff;
  color:var(--lg-navy);
  box-shadow:0 6px 16px rgba(8,25,65,.16);
}
/* Encabezado del detalle mas bajo: logo mas chico, titulo en una linea, sin subtitulo */
body[data-page="detalle"] header .brand{ gap:12px; }
body[data-page="detalle"] header .logo-img{ width:50px; height:50px; border-radius:14px; }
body[data-page="detalle"] header .brand h1{ font-size:20px; line-height:1.1; }
body[data-page="detalle"] header .brand small{ display:none; }
/* Correo de la cuenta: era blanco sobre la barra clara y no se leia */
body:not([data-page="admin"]):not([data-page="cartel"]) .owner-account-row .owner-account-email{ color:var(--lg-ink); }

/* ====== Que resalten las acciones principales: categorias y boton Publicar ====== */
/* Categorias: panel mas profundo para que las tarjetas blancas se separen del fondo, tarjetas
   mas elevadas, iconos un poco mas vivos y respuesta al tocar. */
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories{
  background:linear-gradient(180deg, rgba(205,215,230,.30), rgba(170,186,210,.22));
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.15), 0 18px 40px rgba(3,10,30,.30);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip{
  border:1px solid #fff;
  box-shadow:0 12px 24px rgba(8,25,65,.26), 0 2px 4px rgba(8,25,65,.10), inset 0 1px 0 #fff;
  transition:transform .12s ease, box-shadow .2s ease;
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip-icon{
  filter:saturate(1.35);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-chips .landing-chip:active{
  transform:scale(.97);
  box-shadow:0 6px 14px rgba(8,25,65,.22), inset 0 1px 0 #fff;
}

/* Publicar: un poco mas grande, con halo dorado suave y degradado con reflejo.
   El anillo blanco interior lo separa de la barra. */
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-publish-fab{
  width:52px;
  height:52px;
  top:-24px;
  background:linear-gradient(180deg, #f7d88a 0%, #e8b44f 58%, #d89b2b 100%);
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(232,180,79,.26), 0 10px 22px rgba(8,25,65,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-publish-fab .icon{ width:24px; height:24px; }
/* Titulo del panel de categorias: ahora sobre el panel oscuro, en blanco */
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories .landing-categories-label{
  color:#fff;
  text-shadow:0 1px 6px rgba(8,25,65,.55);
}
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories .landing-categories-label::before,
body:not([data-page="admin"]):not([data-page="cartel"]) .landing-categories .landing-categories-label::after{
  background-color:rgba(255,255,255,.85);
}
/* El halo del Publicar baja un poco: se da espacio a la palabra */
body:not([data-page="admin"]):not([data-page="cartel"]) .app-dock-item--publish .app-dock-label{ margin-top:34px; }

/* Encabezado que se oculta al bajar con el scroll y vuelve al subir (JS: header-hidden),
   para que no tape las tarjetas de negocios en computadora ni en el celular. */
header:not(.landing-header){
  transition: padding .25s ease, box-shadow .25s ease, transform .3s ease;
}
header:not(.landing-header).header-hidden{
  transform: translateY(calc(-100% - 16px));
  box-shadow:none;
}

/* Admin: el buscador de municipio es un input, no un select; sin esto queda con el alto mínimo del navegador y se ve más chico que sus vecinos */
#adminManagedMunicipioSearch{
  padding:14px 14px;
  min-height:50px;
  border-radius:16px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  font-size:16px;
  line-height:1.35;
}

/* Tableta: la foto del encabezado de municipios es muy ancha y su cielo claro se veia como un bloque gris;
   se tiñe con azul de marca hacia la izquierda y se centra la foto un poco mas arriba. Solo tabletas. */
@media (min-width: 768px){
  .landing-header::before{
    background-image:
      linear-gradient(90deg, rgba(23,63,130,.78) 0%, rgba(23,63,130,.25) 55%, rgba(8,19,40,0) 80%),
      linear-gradient(180deg, rgba(8,19,40,.42) 0%, rgba(10,26,55,.50) 100%),
      url("/assets/fondo-aura-plus.jpg?v=20260706ap20");
    background-position: 0 0, 0 0, 50% 30%;
    background-size: auto, auto, cover;
    background-repeat: no-repeat;
  }
}

/* ===== Mapa "Que hacer en [municipio]": negocios registrados sobre un mapa de Leaflet,
   con leyenda por categoria (toca una para ocultar/mostrar esos pines) ===== */
.mapa-top-actions{
  display:flex;
  justify-content:flex-end;
  margin:0 0 14px;
}

.mapa-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}

.mapa-legend-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--lg-line-soft, var(--stroke));
  background:var(--lg-plate-solid, var(--card));
  color:var(--lg-ink, var(--text));
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  appearance:none;
  transition:opacity .2s ease, transform .2s ease;
}

.mapa-legend-chip:active{ transform:scale(.96); }
.mapa-legend-chip:not(.is-active){ opacity:.4; }

.mapa-legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--chip-color, #56c0ff);
  flex:none;
}

.mapa-status{
  margin:0 0 10px;
}

.mapa-map{
  height:min(70vh, 560px);
  min-height:320px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

.mapa-pin-icon{
  background:transparent;
  border:0;
  filter: drop-shadow(0 3px 5px rgba(12,35,64,.4));
}

/* Nombre del negocio (y su categoria, chica y discreta arriba) siempre visibles sobre su
   pin (tooltip permanente de Leaflet, no uno que solo sale al pasar el mouse). Se
   sobreescribe el globo blanco por defecto por una placa chica, sin la punta/flecha que
   Leaflet agrega sola -- la categoria va en una linea diminuta para no sobrecargar el
   mapa cuando hay muchos pines juntos (el color del pin ya distingue la categoria; el
   texto es solo un refuerzo rapido de lectura). */
.mapa-pin-label{
  background:rgba(8,20,44,.86);
  border:1px solid rgba(86,192,255,.35);
  border-radius:8px;
  padding:2px 8px 4px;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow:0 4px 10px rgba(8,25,65,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  max-width:140px;
}

.mapa-pin-label-cat{
  display:block;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:rgba(234,246,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.mapa-pin-label-name{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:#eaf6ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.mapa-pin-label::before{
  display:none;
}

.leaflet-popup-content-wrapper{
  border-radius:14px;
  box-shadow:0 10px 24px rgba(8,25,65,.22);
}

.leaflet-popup-content{
  margin:12px 14px;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
}

.mapa-popup-cat{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mapa-popup-title{
  font-size:15px;
  font-weight:800;
  color:#122a57;
  margin:2px 0 8px;
}

.mapa-popup-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mapa-popup-actions a{
  font-size:12.5px;
  font-weight:700;
  padding:7px 10px;
  border-radius:10px;
  background:#eef4ff;
  color:#173f82;
  text-decoration:none;
}

.mapa-popup-actions a:hover{ background:#dce8ff; }