/* ============================================================
   FERIA 360 — sistema de diseño
   Fosforescente sobre noche, con marrón de tierra para que no
   quede "app de gaming": es una feria, hay madera y lona.
   ============================================================ */

:root{
  /* fosforescentes — la acción */
  --verde:#39FF88;
  --cian:#2BE8FF;
  --lima:#C6FF3D;
  /* fondos */
  --noche:#08131F;
  --prof:#0E2237;
  --sup:#143047;
  --sup2:#1B3E58;
  /* tierra */
  --marron:#7A5334;
  --marron-cl:#A9743F;
  --arena:#D9C3A5;
  /* texto */
  --tinta:#EAF6FF;
  --dim:#8FB0C7;
  --linea:#1F4864;
  /* estado */
  --ok:#39FF88;
  --warn:#FFC93D;
  --mal:#FF5C6E;
  --radio:14px;
  --sombra:0 8px 28px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(57,255,136,.35), 0 0 18px rgba(57,255,136,.25);
  --padx:14px;
  --tap:46px;
  --header:58px;
  --nav:64px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--noche);
  color:var(--tinta);
  font:400 15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  overscroll-behavior-y:none;
}
body::before{ /* halo de fondo, sutil */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -8%, rgba(43,232,255,.10), transparent 65%),
    radial-gradient(70vw 55vh at 12% 108%, rgba(57,255,136,.09), transparent 62%),
    radial-gradient(45vw 40vh at 50% 45%, rgba(122,83,52,.10), transparent 70%);
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--cian);text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700;letter-spacing:-.01em}
h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}
.dim{color:var(--dim)}
.mini{font-size:12px}
.chico{font-size:13px}
.centro{text-align:center}
.nowrap{white-space:nowrap}

/* ---------- layout ---------- */
#app{min-height:100vh;display:flex;flex-direction:column}
.pantalla{
  flex:1;min-height:0;
  padding:calc(var(--header) + 12px) var(--padx) calc(var(--nav) + 24px);
  max-width:1180px;width:100%;margin:0 auto;
  animation:entra .22s ease-out;
}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pantalla.ancha{max-width:1500px}
/* FIX-11: en monitores de 1900 px sobraban 400 px de fondo vacío al costado
   del editor. La pantalla del mapa aprovecha lo que hay. */
.pantalla.mapa-lleno{max-width:1860px}
.pantalla.limpia{padding:0}

/* ---------- barra superior ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--header);z-index:60;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:rgba(8,19,31,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
  padding-top:env(safe-area-inset-top);
  height:calc(var(--header) + env(safe-area-inset-top));
}
.marca{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:17px}
.marca .globo{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 210deg,var(--verde),var(--cian),var(--lima),var(--marron-cl),var(--verde));
  box-shadow:0 0 14px rgba(57,255,136,.5);
  position:relative;
}
.marca .globo::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--noche)}
.marca b{color:var(--verde)}
.topbar .sep{flex:1}
.chip-rol{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;
  background:var(--sup);border:1px solid var(--linea);font-size:12.5px;font-weight:600;color:var(--tinta);
  cursor:pointer;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.chip-rol .punto{width:8px;height:8px;border-radius:50%;background:var(--verde);flex:0 0 auto;box-shadow:0 0 8px var(--verde)}
.ico-btn{
  width:var(--tap);height:38px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--linea);border-radius:10px;cursor:pointer;position:relative;
  width:38px;
}
.ico-btn:active{transform:scale(.94)}
.ico-btn .globito{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--mal);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center
}

/* ---------- nav inferior ---------- */
.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;background:rgba(8,19,31,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav);color:var(--dim);font-size:10.5px;font-weight:600;letter-spacing:.01em;
  border-top:2px solid transparent;
}
.nav a svg{width:21px;height:21px}
.nav a.on{color:var(--verde);border-top-color:var(--verde);background:linear-gradient(180deg,rgba(57,255,136,.12),transparent 70%)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 18px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:14.5px;cursor:pointer;background:var(--sup);color:var(--tinta);
  transition:transform .1s, box-shadow .18s, background .18s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.pri{
  background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A;
  box-shadow:0 0 0 1px rgba(57,255,136,.5), 0 6px 20px rgba(57,255,136,.28);
}
.btn.pri:hover{box-shadow:0 0 0 1px rgba(57,255,136,.7), 0 8px 28px rgba(57,255,136,.42)}
.btn.sec{
  background:linear-gradient(135deg,var(--cian),#1BA6D6);color:#02202B;
  box-shadow:0 0 0 1px rgba(43,232,255,.45), 0 6px 20px rgba(43,232,255,.24);
}
.btn.tierra{background:linear-gradient(135deg,var(--marron-cl),var(--marron));color:#FFF3E4;box-shadow:0 6px 18px rgba(122,83,52,.4)}
.btn.linea{background:transparent;border-color:var(--linea);color:var(--tinta)}
.btn.linea:hover{border-color:var(--verde);color:var(--verde)}
.btn.mal{background:linear-gradient(135deg,#FF6B7C,#D63B4E);color:#fff}
.btn.chico{min-height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.bloque{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- tarjetas ---------- */
.card{
  background:linear-gradient(180deg,var(--prof),rgba(20,48,71,.55));
  border:1px solid var(--linea);border-radius:var(--radio);padding:14px;
}
.card.pad0{padding:0;overflow:hidden}
.card + .card{margin-top:12px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.auto{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.auto-g{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.fila{display:flex;align-items:center;gap:10px}
.grid > *{min-width:0}
.fila > *{min-width:0}
.fila.wrap{flex-wrap:wrap}
.entre{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:10px}
.sep-y{height:1px;background:var(--linea);margin:12px 0}

/* ---------- píldoras / etiquetas ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;
  background:var(--sup);border:1px solid var(--linea);font-size:12px;font-weight:600;white-space:nowrap
}
.pill.ok{color:var(--verde);border-color:rgba(57,255,136,.45);background:rgba(57,255,136,.10)}
.pill.warn{color:var(--warn);border-color:rgba(255,201,61,.4);background:rgba(255,201,61,.10)}
.pill.mal{color:var(--mal);border-color:rgba(255,92,110,.4);background:rgba(255,92,110,.10)}
.pill.cian{color:var(--cian);border-color:rgba(43,232,255,.4);background:rgba(43,232,255,.10)}
.pill.tierra{color:var(--arena);border-color:rgba(169,116,63,.5);background:rgba(122,83,52,.22)}
.pill.click{cursor:pointer}
.pill.click:hover{border-color:var(--verde)}
.pill.sel{background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A;border-color:transparent;font-weight:800}

/* ---------- scroller horizontal ---------- */
.scroll-x{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}

/* ---------- formularios ---------- */
label.campo{display:block;margin-bottom:11px}
label.campo > span{display:block;font-size:12.5px;font-weight:600;color:var(--dim);margin-bottom:5px}
.inp{
  width:100%;min-height:var(--tap);padding:10px 12px;border-radius:11px;
  background:var(--noche);border:1px solid var(--linea);color:var(--tinta);outline:none;
}
.inp:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(57,255,136,.16)}
textarea.inp{min-height:88px;resize:vertical;line-height:1.45}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat}
select.inp option{background:var(--prof)}
.check{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;border:1px solid var(--linea);cursor:pointer;background:var(--noche)}
.check:hover{border-color:var(--verde)}
.check input{width:19px;height:19px;accent-color:#39FF88;flex:0 0 auto}
.check.on{border-color:var(--verde);background:rgba(57,255,136,.08)}

/* zona de subir archivo — acepta CUALQUIER tipo */
.suelta{
  border:1.5px dashed var(--linea);border-radius:12px;padding:16px;text-align:center;cursor:pointer;
  background:rgba(43,232,255,.04);transition:.16s
}
.suelta:hover,.suelta.drag{border-color:var(--cian);background:rgba(43,232,255,.11)}
.archivo{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:var(--noche);border:1px solid var(--linea)}
.archivo .ext{
  width:34px;height:34px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;background:var(--sup2);color:var(--cian);text-transform:uppercase
}

/* ---------- producto ---------- */
.prod{background:var(--prof);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;cursor:pointer;transition:.16s;display:flex;flex-direction:column}
.prod:hover{transform:translateY(-3px);border-color:rgba(57,255,136,.5);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.prod .foto{aspect-ratio:1;background:var(--sup);position:relative;overflow:hidden}
.prod .foto img{width:100%;height:100%;object-fit:cover}
.prod .cuerpo{padding:10px;display:flex;flex-direction:column;gap:5px;flex:1}
.prod .nom{font-weight:600;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .precio{font-weight:800;font-size:16px;color:var(--verde)}
/* ---------- precio escondido ----------
   Cuando la feria decide no mostrar el precio, el lugar no queda
   vacio: dice por que. Un hueco parece un error; una frase es una
   invitacion a ir al puesto. */
.sin-precio,.prod .precio.sin-precio{color:var(--arena);font-weight:700;font-size:12.5px;
  line-height:1.25;display:flex;align-items:center;gap:5px}
.sin-precio .em{font-size:14px;flex:0 0 auto}
.precio-grande{font-size:31px;font-weight:800;color:var(--verde);margin:6px 0 14px}
.precio-grande.sin-precio{font-size:16px;color:var(--arena);margin:6px 0 14px}
.precio-grande.sin-precio .em{font-size:20px}
.precio-chico{font-weight:700;color:var(--verde)}
.precio-chico.sin-precio{font-size:11px}
.aviso-precio{border-color:var(--marron-cl);
  background:linear-gradient(135deg,rgba(169,116,63,.20),rgba(14,34,55,.9));margin-bottom:12px}
.prod .quien{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:5px;margin-top:auto}
.etq{position:absolute;top:8px;left:8px;z-index:2}
.etq-tr{position:absolute;top:8px;right:8px;z-index:2}

.avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--sup2);flex:0 0 auto}
.avatar.g{width:56px;height:56px}
.avatar.xg{width:84px;height:84px}

/* ---------- mapa ---------- */
.mapa{width:100%;height:100%;background:var(--prof);border-radius:12px;z-index:1}
.mapa-caja{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--linea);
  --sat:.60;                       /* la foto satelital, bajada: si va a full brillo
                                      se come las líneas verdes y no se ve nada */
}
/* sólo la foto se oscurece; lo dibujado encima queda intacto */
.mapa-caja .leaflet-tile-pane{ filter:brightness(var(--sat)) saturate(.85) contrast(1.05) }

/* pantalla completa para trabajar el plano cómodo */
.mapa-caja.completo{
  position:fixed;inset:0;z-index:75;border-radius:0;border:none;height:100vh!important;width:100vw;
  padding-top:env(safe-area-inset-top);
}
.mapa-caja.completo .capas{ top:calc(12px + env(safe-area-inset-top)) }
.mapa-caja.completo .herr-btn{ top:calc(12px + env(safe-area-inset-top)) }
.mapa-caja.completo .herramientas{ top:calc(56px + env(safe-area-inset-top)) }
.capas .sep-cap{ height:6px }
.leaflet-container{background:#0A1826}
.capas{position:absolute;top:10px;right:10px;z-index:500;display:flex;flex-direction:column;gap:5px}
.capas button{
  min-height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--linea);
  background:rgba(8,19,31,.92);color:var(--tinta);font-size:12px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px)
}
.capas button.on{background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A;border-color:transparent}
.herramientas{
  position:absolute;top:10px;left:10px;z-index:500;display:flex;flex-direction:column;gap:5px;
  background:rgba(8,19,31,.92);border:1px solid var(--linea);border-radius:11px;padding:6px;backdrop-filter:blur(8px);
  max-height:calc(100% - 20px);overflow-y:auto
}
.herramientas .hb{
  display:flex;align-items:center;gap:7px;min-height:34px;padding:0 9px;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--tinta);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;text-align:left
}
.herramientas .hb:hover{background:var(--sup)}
.herramientas .hb.on{background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A}
.herramientas .tit{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);padding:6px 9px 2px;font-weight:700}
.herramientas.plegado{display:none}
.herr-btn{
  position:absolute;top:10px;left:10px;z-index:501;display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--linea);
  background:rgba(8,19,31,.92);color:var(--tinta);font-size:12.5px;font-weight:700;cursor:pointer;backdrop-filter:blur(8px)
}
.herr-btn.abierto{background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A;border-color:transparent}
.herramientas{top:54px;max-height:calc(100% - 66px)}
.mapa-nota{
  position:absolute;left:10px;bottom:10px;z-index:500;background:rgba(8,19,31,.9);border:1px solid var(--linea);
  border-radius:9px;padding:6px 10px;font-size:11.5px;color:var(--dim);backdrop-filter:blur(8px);max-width:70%
}
.marca-mapa{
  display:flex;align-items:center;justify-content:center;font-size:15px;
  border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(0,0,0,.6)
}
.puesto-lbl{
  background:rgba(8,19,31,.88)!important;border:1px solid var(--verde)!important;color:var(--verde)!important;
  border-radius:6px!important;font-size:10.5px!important;font-weight:800!important;padding:1px 5px!important;box-shadow:none!important
}
.puesto-lbl::before{display:none!important}

/* ---------- feed vertical estilo IG ---------- */
.feed{
  position:fixed;inset:0;top:0;background:#000;z-index:70;
  overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
}
.feed-item{
  height:100vh;height:100dvh;scroll-snap-align:start;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#000
}
.feed-pistas{display:flex;height:100%;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.feed-pistas::-webkit-scrollbar{display:none}
.feed-pieza{
  min-width:100%;height:100%;scroll-snap-align:center;position:relative;
  display:flex;align-items:center;justify-content:center;background:#000
}
.feed-pieza img,.feed-pieza video{width:100%;height:100%;object-fit:cover}
.feed-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 52%,rgba(0,0,0,.8) 100%)}
.feed-info{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));z-index:3;display:flex;flex-direction:column;gap:9px}
.feed-acciones{position:absolute;right:12px;bottom:190px;z-index:4;display:flex;flex-direction:column;gap:15px;align-items:center}
.feed-acc{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;color:#fff;font-size:11px;font-weight:700}
.feed-acc .aro{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18)}
.puntitos{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:5px}
.puntito{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.32)}
.puntito.on{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.feed-x{
  position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:90;
  width:44px;height:44px;border-radius:50%;
  background:rgba(8,19,31,.82);border:1.5px solid rgba(57,255,136,.7);color:#fff;
  font-size:20px;font-weight:700;cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,.6), 0 0 16px rgba(57,255,136,.3);
}
.feed-x:active{transform:scale(.94)}
.feed-volver{
  position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:90;
  display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 15px;border-radius:999px;
  background:rgba(8,19,31,.82);border:1.5px solid rgba(255,255,255,.25);color:#fff;
  font-size:13.5px;font-weight:700;cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,.6);
}
.feed-pista-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.feed-guia{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;text-align:center;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:18px 22px;
  backdrop-filter:blur(10px);animation:seva 1s ease 3.4s forwards
}
@keyframes seva{to{opacity:0;visibility:hidden}}

/* ---------- chat ---------- */
.chat-linea{display:flex;margin-bottom:9px}
.chat-linea.mio{justify-content:flex-end}
.burb{
  max-width:78%;padding:9px 12px;border-radius:15px;font-size:14px;line-height:1.4;
  background:var(--sup);border:1px solid var(--linea);border-bottom-left-radius:5px
}
.chat-linea.mio .burb{background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A;border:none;border-radius:15px;border-bottom-right-radius:5px;font-weight:500}
.burb .hora{display:block;font-size:10px;opacity:.65;margin-top:3px}

/* ---------- modal / hoja ---------- */
.velo{position:fixed;inset:0;background:rgba(3,9,15,.78);backdrop-filter:blur(4px);z-index:90;display:flex;align-items:flex-end;justify-content:center;animation:fade .16s}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:720px){.velo{align-items:center}}
.hoja{
  background:var(--prof);border:1px solid var(--linea);border-radius:20px 20px 0 0;
  width:100%;max-width:640px;max-height:92vh;overflow-y:auto;box-shadow:var(--sombra);
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));animation:sube .24s cubic-bezier(.2,.8,.3,1)
}
@media(min-width:720px){.hoja{border-radius:18px}}
@keyframes sube{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.hoja .agarre{width:38px;height:4px;border-radius:2px;background:var(--linea);margin:0 auto 12px}
.hoja h2{margin-bottom:4px}

/* ---------- toast ---------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav) + 14px);z-index:120;display:flex;flex-direction:column;gap:8px;width:min(94vw,460px)}
.toast{
  background:var(--sup2);border:1px solid var(--verde);border-radius:12px;padding:11px 14px;font-size:13.5px;
  box-shadow:var(--glow),var(--sombra);animation:sube .2s
}
.toast.mal{border-color:var(--mal);box-shadow:0 0 0 1px rgba(255,92,110,.4),var(--sombra)}
.toast.info{border-color:var(--cian);box-shadow:0 0 0 1px rgba(43,232,255,.4),var(--sombra)}

/* ---------- tablas ---------- */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:12px}
table.t{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.t th{
  text-align:left;padding:10px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);
  background:var(--sup);border-bottom:1px solid var(--linea);font-weight:700;white-space:nowrap
}
table.t td{padding:10px;border-bottom:1px solid rgba(31,72,100,.5);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover{background:rgba(43,232,255,.05)}

/* ---------- barra de progreso ---------- */
.barra{height:7px;border-radius:4px;background:var(--noche);overflow:hidden;border:1px solid var(--linea)}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--verde),var(--cian));border-radius:4px}
.barra.warn i{background:linear-gradient(90deg,var(--warn),#FF8A3D)}
.barra.mal i{background:linear-gradient(90deg,var(--mal),#C42B3E)}

/* ---------- KPI ---------- */
.kpi{background:var(--prof);border:1px solid var(--linea);border-radius:13px;padding:13px}
.kpi .n{font-size:25px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.kpi .l{font-size:11.5px;color:var(--dim);margin-top:3px}
.kpi.verde .n{color:var(--verde)}
.kpi.cian .n{color:var(--cian)}
.kpi.lima .n{color:var(--lima)}
.kpi.arena .n{color:var(--arena)}

/* ---------- rail lateral del admin ---------- */
.admin{display:flex;gap:14px;align-items:flex-start}
.rail{
  position:sticky;top:calc(var(--header) + 14px);width:210px;flex:0 0 auto;
  background:var(--prof);border:1px solid var(--linea);border-radius:14px;padding:7px;display:none
}
.rail a{
  display:flex;align-items:center;gap:9px;min-height:40px;padding:0 11px;border-radius:9px;
  color:var(--dim);font-size:13.5px;font-weight:600
}
.rail a:hover{background:var(--sup);color:var(--tinta)}
.rail a.on{background:linear-gradient(135deg,rgba(57,255,136,.16),rgba(43,232,255,.09));color:var(--verde);box-shadow:inset 2px 0 0 var(--verde)}
.rail .tit{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);padding:11px 11px 4px;font-weight:700}
.panel{flex:1;min-width:0}
@media(min-width:900px){.rail{display:block}}

/* pestañas para mobile */
.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;margin-bottom:12px}
/* 🔴 FIX-11 · 26-ago-2026 — las solapas SÍ scrolleaban, pero con la barra
   escondida parecían cortadas y nadie adivinaba que había más a la derecha.
   En pantalla ancha, donde hay lugar de sobra, se envuelven y se ven todas. */
@media(min-width:1100px){ .tabs{flex-wrap:wrap;overflow-x:visible} }
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--linea);background:var(--prof);
  color:var(--dim);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap
}
.tabs button.on{background:linear-gradient(135deg,var(--verde),#17D9A0);color:#04231A;border-color:transparent;font-weight:800}
@media(min-width:900px){.tabs.solo-mobile{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;border-radius:0 0 22px 22px;overflow:hidden;margin:calc(-1 * (var(--header) + 12px)) calc(-1 * var(--padx)) 14px;
  min-height:230px;display:flex;align-items:flex-end;
  padding:16px 16px 18px;padding-top:calc(var(--header) + 40px)
}
.hero img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .velo2{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,19,31,.72) 0%,rgba(8,19,31,.25) 40%,rgba(8,19,31,.94) 100%)}
.hero .txt{position:relative;z-index:2;width:100%}

/* ---------- estrellas ---------- */
.estrellas{display:inline-flex;gap:2px;color:var(--lima);font-size:13px}
.estrellas .v{opacity:.25}

/* ---------- utilidades ---------- */
.vacio{text-align:center;padding:38px 18px;color:var(--dim)}
.vacio .em{font-size:38px;margin-bottom:10px;opacity:.75}
.cargando{display:inline-block;width:15px;height:15px;border:2px solid var(--linea);border-top-color:var(--verde);border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.oculto{display:none!important}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:520px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  h1{font-size:22px}
  .auto{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:360px){
  :root{--padx:11px}
}

/* ---------- botón flotante para cambiar de rol (es una maqueta: se muestra) ---------- */
.rolfab{
  position:fixed;right:12px;bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom));z-index:65;
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 15px;border-radius:999px;
  border:1px solid rgba(57,255,136,.55);cursor:pointer;
  background:linear-gradient(135deg,rgba(8,19,31,.95),rgba(20,48,71,.95));backdrop-filter:blur(10px);
  color:var(--tinta);font-weight:700;font-size:13.5px;
  box-shadow:0 0 0 1px rgba(57,255,136,.25), 0 8px 24px rgba(0,0,0,.55), 0 0 20px rgba(57,255,136,.18);
}
.rolfab:active{transform:scale(.97)}
.rolfab .em{font-size:17px}
.rolfab b{color:var(--verde)}

/* ---------- puerta de entrada ---------- */
.puerta{
  display:flex;gap:13px;align-items:center;width:100%;text-align:left;cursor:pointer;
  padding:15px;border-radius:16px;border:1px solid var(--linea);
  background:linear-gradient(135deg,var(--prof),rgba(20,48,71,.6));transition:.16s;
}
.puerta:hover{border-color:var(--verde);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.puerta .ico{
  width:52px;height:52px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:25px;background:var(--sup2);border:1px solid var(--linea)
}
.puerta .tx{flex:1;min-width:0}
.puerta .tx > b{display:block;font-size:15.5px;margin-bottom:2px}
.puerta .tx .mini b{display:inline}
.puerta .fl{color:var(--verde);font-size:19px;flex:0 0 auto}

/* ---------- el puesto propio, resaltado en el mapa ---------- */
.puesto-mio{ filter:drop-shadow(0 0 10px rgba(255,59,92,1)); animation:latir 1.6s ease-in-out infinite }
@keyframes latir{ 0%,100%{opacity:1} 50%{opacity:.55} }
.chapa-mio{
  transform:translate(-50%,-190%);white-space:nowrap;
  background:linear-gradient(135deg,#FF3B5C,#C41E3A);color:#FFFFFF;
  font-weight:800;font-size:12.5px;padding:5px 11px;border-radius:999px;
  box-shadow:0 3px 14px rgba(0,0,0,.7), 0 0 20px rgba(255,59,92,.7);
  border:1.5px solid rgba(255,255,255,.85);
}
.chapa-mio::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#FF3B5C
}

/* ---------- editor del predio ---------- */
.tirador{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;color:#08131F;font-size:14px;font-weight:800;cursor:grab;
  box-shadow:0 0 0 2px #39FF88, 0 3px 12px rgba(0,0,0,.6)
}
.tirador:active{cursor:grabbing}
.cinta{
  transform:translate(-50%,-50%);white-space:nowrap;
  background:#C6FF3D;color:#08131F;font-weight:800;font-size:11.5px;
  padding:2px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.5)
}
.edit-cols{display:grid;gap:12px;grid-template-columns:1fr}
/* los hijos de un grid NO se achican abajo de su contenido salvo que se
   les diga: sin esto el panel empuja y aparece scroll horizontal */
.edit-cols > *{min-width:0}
@media(min-width:1100px){ .edit-cols{grid-template-columns:1fr 330px} }
/* el panel del editor tiene mucho que mostrar (medidas, ajuste fino, avisos):
   en monitores grandes se le da el ancho que sobra en vez de dejarlo apretado */
@media(min-width:1500px){ .edit-cols{grid-template-columns:1fr 400px;gap:16px} }

/* 🔴 FIX-35 · 1-sep-2026 — EL MAPA SE IBA DE PANTALLA
   El panel de la derecha es largo —propuesta, servicios, recomendaciones,
   botones— y al bajar para tocar «Otra» el mapa quedaba arriba, fuera de
   vista: cambiabas la distribución sin poder verla. Ahora el mapa se queda
   pegado mientras el panel scrollea al lado. */
/* 🔴 FIX-40 · 1-sep-2026 — EL EDITOR, A PANTALLA COMPLETA
   El mapa quedaba pegado pero con alto fijo, y la página entera scrolleaba:
   al bajar para tocar una opción se movía todo. Ahora el editor ocupa el
   alto de la pantalla, el mapa NO se mueve, y lo único que scrollea es la
   columna de opciones. */
/* 🔴 FIX-47 · 1-sep-2026 — EL MAPA PEGADO, SIN CONGELAR LA PÁGINA
   FIX-45 puso `overflow:hidden` en el body. Con la ventana angosta o con
   zoom del navegador eso RECORTA la pantalla en vez de dejar scrollear:
   quedaban las opciones cortadas y el mapa fuera de vista.

   Vuelve el mapa pegado (sticky), que es lo que funcionaba, pero ahora a
   alto completo: se queda quieto mientras la columna de opciones scrollea
   al lado. La página sigue pudiendo desplazarse, así nada queda inaccesible.

   Nada de esto aplica abajo de 1100 px: en celular todo va apilado y
   scrollea junto, que ahí es lo correcto. */
@media(min-width:1100px){
  .edit-cols{ align-items:start }

  .edit-cols > .mapa-caja{
    position:sticky;
    top:calc(var(--header) + 10px);
    height:calc(100vh - var(--header) - 96px) !important;
    min-height:420px;
    z-index:1
  }

  /* la columna de opciones scrollea con la página, sin alto forzado:
     así nunca queda contenido que no se pueda alcanzar */
  .edit-cols > #panelEdit{ min-width:0 }

  /* el cajón de herramientas no puede pasarse del alto del mapa */
  .edit-cols > .mapa-caja .herramientas{ max-height:calc(100% - 96px) }
}
}
/* Los botones de la propuesta, siempre a mano al pie del panel. */
.acciones-prop{
  position:sticky; bottom:0; z-index:5;
  margin:10px -12px -12px; padding:10px 12px 12px;
  background:linear-gradient(to top, var(--fondo) 62%, transparent);
  display:flex; gap:7px; flex-wrap:wrap
}
/* la chapa de «Entrás como…» tapaba los botones */
/* la chapa de «Entrás como…» tapaba los botones de la propuesta */
@media(min-width:1100px){ .rolfab{ z-index:4 } }
@media(min-width:1800px){ .edit-cols{grid-template-columns:1fr 440px} }

/* ---------- la entrada, como un arco con el nombre de la feria ---------- */
/* 🔴 FIX-62 · 1-sep-2026 — EL CARTEL DE LA ENTRADA SE VEIA CORTADO
   Tenia `max-width:230px` con `overflow:hidden` y `text-overflow:ellipsis`,
   y encima un `translate(-50%,-100%)` que lo corria respecto del contenedor
   que Leaflet le da. Resultado: la caja verde mas ancha que el texto y el
   texto igual mordido de los dos lados — «ERIA ARCO IRI».
   Ahora el ancho lo calcula iconoPunto() y se le pasa a Leaflet como
   `iconSize`, asi que el cartel ocupa su contenedor y punto: sin transform,
   sin max-width, sin overflow. Y es un RECTANGULO, que se lee mejor sobre
   la foto satelital que la cupula que habia antes. */
.arco-entrada{
  position:relative;
  width:100%;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0 12px;box-sizing:border-box;
  background:linear-gradient(135deg,var(--verde),#17D9A0);
  color:#04231A;font-weight:800;font-size:11.5px;letter-spacing:.03em;
  text-align:center;white-space:nowrap;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 3px 16px rgba(0,0,0,.65), 0 0 22px rgba(57,255,136,.45);
}
/* las dos patas del cartel, para que se lea como un letrero plantado
   en el suelo y no como una etiqueta flotando */
.arco-entrada::before,.arco-entrada::after{
  content:"";position:absolute;top:100%;width:5px;height:8px;
  background:linear-gradient(180deg,#17D9A0,#0B7A56);border-radius:0 0 2px 2px;
}
.arco-entrada::before{left:11px}
.arco-entrada::after{right:11px}
.arco-entrada span{position:relative;z-index:2}

.tirador.grande{width:32px;height:32px;font-size:16px;box-shadow:0 0 0 2px #FFFFFF, 0 3px 14px rgba(0,0,0,.7)}
.tirador.enorme{
  width:44px;height:44px;font-size:22px;
  background:linear-gradient(135deg,#39FF88,#17D9A0);color:#04231A;
  box-shadow:0 0 0 3px #FFFFFF, 0 4px 20px rgba(0,0,0,.75), 0 0 26px rgba(57,255,136,.6);
  animation:latir 2s ease-in-out infinite
}
.vertice{
  width:16px;height:16px;border-radius:50%;background:#C6FF3D;
  border:2px solid #08131F;box-shadow:0 0 0 1.5px #C6FF3D, 0 2px 8px rgba(0,0,0,.6);cursor:grab
}

/* ---------- buscador de direcciones sobre el mapa ---------- */
.buscador-mapa{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:502;
  width:min(400px,calc(100% - 210px));
}
.buscador-mapa input{
  width:100%;min-height:38px;padding:0 13px;border-radius:10px;
  background:rgba(8,19,31,.93);border:1px solid var(--linea);color:var(--tinta);
  font-size:13px;outline:none;backdrop-filter:blur(10px);
  box-shadow:0 3px 14px rgba(0,0,0,.5);
}
.buscador-mapa input:focus{border-color:var(--verde)}
.buscador-mapa .res{
  margin-top:5px;background:rgba(8,19,31,.96);border:1px solid var(--linea);border-radius:11px;
  overflow:hidden;backdrop-filter:blur(10px);box-shadow:0 6px 22px rgba(0,0,0,.6);max-height:220px;overflow-y:auto
}
.buscador-mapa .res button{
  display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:none;
  color:var(--tinta);font-size:12px;cursor:pointer;border-bottom:1px solid rgba(31,72,100,.5)
}
.buscador-mapa .res button:hover{background:var(--sup)}
.buscador-mapa .res button:last-child{border-bottom:none}
@media(max-width:620px){ .buscador-mapa{width:calc(100% - 140px);left:14px;transform:none} }

/* ---------- recuadro de selección múltiple ---------- */
.lazo{
  position:absolute;z-index:600;pointer-events:none;
  border:1.5px dashed #39FF88;background:rgba(57,255,136,.14);border-radius:4px;
  box-shadow:0 0 0 1px rgba(8,19,31,.6) inset;
}

/* ============================================================
   MAPA DE FERIAS — la pantalla con la que arranca el público
   El pin lleva la foto de la feria porque un pin genérico obliga
   a leer, y leer cuesta más que mirar. La que abre HOY late: el
   movimiento se percibe antes que el texto, y ese es justo el
   dato que hay que ver primero.
   ============================================================ */
.mapa-ferias{
  position:relative;height:min(58vh,480px);border-radius:16px;overflow:hidden;
  border:1px solid var(--linea);background:var(--sup);box-shadow:var(--sombra)
}
.mapa-ferias .mapa{position:absolute;inset:0}

.pin-feria{position:relative;width:58px;height:68px;cursor:pointer;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.pin-feria .foto{
  width:52px;height:52px;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid var(--c);margin:0 auto;background-color:var(--prof);
  transition:transform .16s ease
}
.pin-feria .punta{
  width:0;height:0;margin:-2px auto 0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--c)
}
.pin-feria .hoy{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  background:var(--verde);color:#04231A;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:2px 7px;border-radius:8px;white-space:nowrap
}
.pin-feria:hover .foto{transform:scale(1.08)}
.pin-feria.late .foto{animation:latir 1.9s ease-in-out infinite}
@keyframes latir{
  0%,100%{box-shadow:0 0 0 0 rgba(57,255,136,.55)}
  50%    {box-shadow:0 0 0 11px rgba(57,255,136,0)}
}
.late{animation:latir 1.9s ease-in-out infinite}

/* tarjeta que sube desde abajo del mapa */
.tarjeta-flota{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:600;
  transform:translateY(130%);transition:transform .24s cubic-bezier(.2,.8,.3,1);pointer-events:none
}
.tarjeta-flota.ver{transform:translateY(0);pointer-events:auto}
.tf{
  position:relative;background:rgba(10,26,42,.96);border:1px solid var(--c);border-radius:14px;padding:12px;
  backdrop-filter:blur(9px);box-shadow:0 10px 34px rgba(0,0,0,.6)
}
.tf-foto{width:74px;height:74px;border-radius:11px;overflow:hidden;flex:0 0 auto;background:var(--sup)}
.tf-foto img{width:100%;height:100%;object-fit:cover}
.tf-x{
  position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;
  background:rgba(8,19,31,.8);border:1px solid var(--linea);color:var(--tinta);
  font-size:13px;line-height:1;cursor:pointer;z-index:2
}
.feria-card{cursor:pointer;transition:transform .14s ease,border-color .14s ease}
.feria-card:hover{transform:translateY(-2px);border-color:var(--verde)}

@media (prefers-reduced-motion:reduce){
  .pin-feria.late .foto,.late{animation:none}
  .tarjeta-flota{transition:none}
}

/* ---------- favoritos ---------- */
.cora{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;cursor:pointer;font-size:17px;line-height:1;
  background:var(--sup);border:1px solid var(--linea);transition:transform .13s ease,border-color .13s ease
}
.cora:hover{transform:scale(1.1)}
.cora.on{border-color:var(--verde);box-shadow:0 0 12px rgba(57,255,136,.3)}
.cora.chico{width:31px;height:31px;font-size:14px}
.cora.flota{position:absolute;bottom:8px;right:8px;z-index:3;background:rgba(8,19,31,.82);backdrop-filter:blur(5px)}

.proxima{
  display:flex;align-items:center;gap:10px;margin-top:11px;padding:10px;border-radius:11px;
  background:var(--sup);border:1px solid var(--linea)
}
.proxima.hoy{border-color:var(--verde);background:linear-gradient(135deg,rgba(57,255,136,.13),var(--sup))}

.tira-fotos{display:flex;gap:7px;overflow-x:auto;margin-top:11px;padding-bottom:3px;scrollbar-width:thin}
.mini-foto{
  width:78px;height:78px;flex:0 0 auto;border-radius:10px;overflow:hidden;padding:0;cursor:pointer;
  border:1px solid var(--linea);background:var(--sup)
}
.mini-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mini-foto.mas{display:flex;align-items:center;justify-content:center;color:var(--dim);font-weight:800;font-size:14px}
.foto-grande{width:100%;aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--sup)}
.foto-grande img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- galería de fotos reales de la feria ---------- */
.galeria-feria{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px
}
.galeria-feria .gf-item{
  padding:0;border:1px solid var(--linea);border-radius:12px;overflow:hidden;
  background:var(--prof);cursor:pointer;aspect-ratio:4/3;position:relative
}
.galeria-feria .gf-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.galeria-feria .gf-item:hover img{transform:scale(1.06)}
.galeria-feria .gf-item:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
@media(max-width:520px){ .galeria-feria{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} }

/* tirador para girar una figura — FIX-42 */
.tirador.girar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cian);color:#04231A;font-size:17px;font-weight:800;
  border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.5);
  cursor:grab
}
.tirador.girar:active{cursor:grabbing;transform:scale(1.12)}

/* ============================================================
   VIDEO DE LA FERIA
   ------------------------------------------------------------
   Va ARRIBA de las fotos: un vuelo de dron de 40 segundos explica
   la feria mejor que quince fotos sueltas. `preload="metadata"`
   para que la ficha no baje 9 MB antes de que nadie le dé play.
   ============================================================ */
.videos-feria{ display:grid; gap:10px; grid-template-columns:1fr }
@media(min-width:760px){ .videos-feria{ grid-template-columns:repeat(2,1fr) } }
.vf-item{
  margin:0; border:1px solid var(--linea); border-radius:14px; overflow:hidden;
  background:var(--prof)
}
.vf-item video{ width:100%; display:block; background:#000; aspect-ratio:16/9; object-fit:cover }
.vf-item figcaption{ padding:9px 11px; display:flex; flex-direction:column; gap:2px }
.vf-item figcaption strong{ font-size:13.5px }

/* ============================================================
   VISOR DE FOTOS CON ZOOM
   ------------------------------------------------------------
   `overscroll-behavior:contain` + el preventDefault del wheel en
   v-publico.js son lo que evita que, al llegar al tope del zoom,
   la rueda se ponga a scrollear la hoja de atrás.
   ============================================================ */
.zoom-caja{
  margin:-16px -16px 0; border-radius:14px; overflow:hidden; position:relative;
  background:#000; aspect-ratio:4/3; touch-action:none; overscroll-behavior:contain;
  cursor:zoom-in; user-select:none
}
.zoom-caja.acercado{ cursor:grab }
.zoom-caja.acercado:active{ cursor:grabbing }
.zoom-caja img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform-origin:center center; will-change:transform; -webkit-user-drag:none
}
.zoom-nivel{
  position:absolute; right:9px; bottom:9px; z-index:2; opacity:0; transition:opacity .2s;
  padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700;
  background:rgba(8,19,31,.86); border:1px solid var(--linea); color:var(--verde);
  backdrop-filter:blur(8px); pointer-events:none
}
.zoom-nivel.visible{ opacity:1 }

/* ============================================================
   🔴 FIX-57 · 1-sep-2026 — LOS BOTONES DEL MAPA SE IBAN DE PANTALLA
   ------------------------------------------------------------
   `.capas` es absolute dentro de `.mapa-caja`. En la pantalla del
   mapa de una feria la caja mide 72vh, así que al scrollear para
   ver los servicios de abajo la caja sube y los botones —Satelital,
   Calles, Brillo, Expandir— se van con ella: quedan cortados contra
   la barra de arriba y no se pueden tocar.

   La caja del mapa queda PEGADA debajo del header. El mapa no se
   mueve, la lista de abajo scrollea por debajo, y los controles
   siguen siendo alcanzables todo el tiempo.
   ============================================================ */
.vista-mapa-feria .mapa-caja{
  position:sticky;
  top:calc(var(--header) + env(safe-area-inset-top) + 8px);
  z-index:20;
  height:min(66vh,620px)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.45)
}
.vista-mapa-feria .mapa-caja.completo{ position:fixed; top:0; height:100vh!important }
@media(max-width:700px){
  .vista-mapa-feria .mapa-caja{ height:min(56vh,460px)!important }
}

/* FIX-60: una sola regla decide si se ven los números de los puestos.
   Antes se escribía style.display en cada tooltip, y Leaflet recrea esos
   elementos al repintar: quedaban referencias viejas y el número parpadeaba. */
.leaflet-container.sin-numeros .leaflet-tooltip.num-puesto{ display:none!important }

/* FIX-64: el tirador del medio de cada lado. Ensancha el predio moviendo
   los dos vértices de ese lado a la vez, así no se pierde la escuadra. */
.tirador.lado{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#C6FF3D,#8FD400);color:#0B2000;
  font-size:14px;font-weight:900;cursor:grab;
  border:2px solid #08131F;
  box-shadow:0 0 0 1.5px #C6FF3D, 0 2px 10px rgba(0,0,0,.65)
}
.tirador.lado:active{ cursor:grabbing }

/* FIX-65: la etiqueta chica, para cuando el puesto mide entre 13 y 26 px.
   Sin fondo ni borde: a ese tamaño el recuadro pesa más que el número. */
.leaflet-container.num-chico .leaflet-tooltip.num-puesto{
  font-size:8px!important;padding:0 1px!important;
  background:transparent!important;border:none!important;
  color:#EAF6FF!important;font-weight:900!important;
  text-shadow:0 0 3px #000, 0 1px 2px #000!important
}

/* Solapa «Fotos y video» del organizador: la miniatura con sus acciones. */
.gf-edit{
  position:relative;border:1px solid var(--linea);border-radius:12px;overflow:hidden;
  background:var(--prof);aspect-ratio:4/3
}
.gf-edit img{width:100%;height:100%;object-fit:cover;display:block}
.gf-portada{
  position:absolute;top:6px;left:6px;z-index:2;padding:2px 8px;border-radius:20px;
  font-size:10px;font-weight:800;background:var(--verde);color:#04231A
}
.gf-acc{
  position:absolute;inset:auto 0 0 0;z-index:2;display:flex;gap:4px;padding:6px;
  background:linear-gradient(180deg,transparent,rgba(3,9,15,.92))
}
.gf-acc button{
  flex:1;min-height:28px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;
  background:rgba(8,19,31,.92);border:1px solid var(--linea);color:var(--tinta)
}
.gf-acc button.mal{color:#FF6B7E;border-color:#FF6B7E55}
.gf-acc button:disabled{opacity:.3;cursor:default}


/* ============================================================
   SECCIONES DESPLEGABLES DEL EDITOR — 4-sep-2026
   El panel agrupado por tarea. <details> nativo: sin JS para
   abrir y cerrar, y accesible con teclado.
   ============================================================ */
.sec-ed > summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline;
  gap:8px; flex-wrap:wrap; user-select:none;
}
.sec-ed > summary::-webkit-details-marker{ display:none }
.sec-ed > summary::after{
  content:'▾'; margin-left:auto; opacity:.55; font-size:12px;
  transition:transform .15s ease;
}
.sec-ed[open] > summary::after{ transform:rotate(180deg) }
.sec-ed > summary:hover{ color:var(--verde) }

/* ============================================================
   SECCIONES DE LA BARRA DE HERRAMIENTAS — 4-sep-2026
   Eran veintitrés botones en una tira, todos del mismo peso. Lo
   que se usa siempre quedó suelto arriba; lo que depende de una
   herramienta aparece al elegirla; el resto se pliega.
   ============================================================ */
.hb-sec > summary{
  cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:center; gap:6px;
}
.hb-sec > summary::-webkit-details-marker{ display:none }
.hb-sec > summary::after{
  content:'▾'; margin-left:auto; opacity:.5; font-size:11px;
  transition:transform .15s ease;
}
.hb-sec[open] > summary::after{ transform:rotate(180deg) }
.hb-sec > summary:hover{ color:var(--verde) }
.tit.chico{ font-size:9.5px; opacity:.7; padding-top:8px }


/* ============================================================
   EL EDITOR OCUPA LA PANTALLA Y NO SE MUEVE — 4-sep-2026
   ------------------------------------------------------------
   Antes scrolleaba la PÁGINA: al bajar para tocar una opción del
   panel derecho se iban de vista el título, la barra de Publicar,
   el nav de la izquierda y buena parte del mapa. Se terminaba
   editando a ciegas, subiendo y bajando para ver qué pasó.

   FIX-40 y FIX-47 lo intentaron con `position:sticky` en el mapa,
   que lo deja quieto pero no impide que el resto se vaya.

   Ahora la vista del editor mide exactamente el alto de la ventana
   y no desborda. Adentro:

     · la barra de título y acciones, fija arriba;
     · el mapa, alto completo y quieto;
     · la columna de opciones, con su propio scroll.

   Lo que se desplaza es el contenido del panel, no la pantalla.

   Abajo de 1100 px no aplica nada de esto: en celular todo va
   apilado y scrollea junto, que ahí es lo correcto.
   ============================================================ */
@media(min-width:1100px){
  .vista-mapa{
    height:calc(100vh - var(--header) - 24px);
    display:flex; flex-direction:column; gap:10px; overflow:hidden;
  }
  .vista-mapa > .barra-editor{ flex:0 0 auto; margin-bottom:0 }

  .vista-mapa > .edit-cols{
    flex:1 1 auto; min-height:0;          /* sin esto el grid no deja encoger */
    align-items:stretch;
  }

  /* el mapa deja de ser sticky: ahora simplemente ocupa su columna entera */
  .vista-mapa > .edit-cols > .mapa-caja{
    position:relative; top:auto;
    height:100% !important; min-height:0;
  }

  /* y las opciones scrollean por dentro, no arrastrando la página */
  .vista-mapa > .edit-cols > #panelEdit{
    overflow-y:auto; overflow-x:hidden; height:100%;
    padding-right:8px; scrollbar-width:thin;
  }
  .vista-mapa > .edit-cols > #panelEdit::-webkit-scrollbar{ width:9px }
  .vista-mapa > .edit-cols > #panelEdit::-webkit-scrollbar-thumb{
    background:var(--linea); border-radius:5px;
  }
  .vista-mapa > .edit-cols > #panelEdit::-webkit-scrollbar-thumb:hover{ background:var(--verde) }

  /* el nav de administración se queda a la vista mientras se edita */
  /* el nav de administración se queda a la vista mientras se edita */
  .mapa-lleno .admin > .rail{ position:sticky; top:calc(var(--header) + 12px); align-self:start }
}