/* ==========================================================================
   Mapa de la ciudad — pantalla de inicio visual del CRM.
   MapLibre GL (WebGL) + teselas vectoriales OpenFreeMap: ciudad 3D con edificios
   extruidos, columnas de ocupación por piso. Pines "tipo juego" coloreados por
   ocupación como etiqueta flotante, HUD flotante en Liquid Glass con la voz de
   marca. Ver renderMap() en app.js.
   ========================================================================== */

/* A sangre completa: el mapa ocupa todo el hueco bajo la barra superior (78px). */
#content.is-map{padding:0;max-width:none;overflow:hidden}
.citymap-wrap{position:relative;width:100%;height:calc(100vh - 78px);animation:none;isolation:isolate}
/* isolation: los z-index del mapa (HUD 20, pines hasta 1000) se quedan DENTRO del mapa. Sin esto
   competían con la barra superior (10) y los botones Mapa/Panel tapaban el menú del avatar. */
.citymap{position:absolute;inset:0;width:100%;height:100%;background:#dfe6e3;z-index:1}
.maplibregl-map{font:inherit}

/* ---- HUD flotante (cristal) --------------------------------------------- */
.citymap-hud{position:absolute;z-index:20;display:flex;flex-direction:column;gap:12px}
.citymap-hud-tl{left:22px;top:22px;max-width:min(340px,72vw)}
.citymap-hud-tr{right:22px;top:22px;align-items:flex-end}
.glass{background:var(--glass-fondo);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-borde);box-shadow:var(--glass-realce),var(--glass-sombra);border-radius:var(--radio-l)}

.citymap-panel{padding:18px 20px}
.citymap-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:var(--texto-11);font-weight:700;
  letter-spacing:.16em;color:var(--verde-700)}
.citymap-eyebrow svg{color:var(--verde-600)}
.citymap-title{font-size:var(--texto-20);letter-spacing:-.035em;margin:8px 0 4px;color:var(--verde-900)}
.citymap-sub{margin:0;font-size:var(--texto-12);color:var(--texto-secundario);line-height:1.5}
.citymap-legend{display:flex;gap:14px;margin-top:13px;padding-top:12px;border-top:1px solid var(--gris-linea)}
.citymap-legend span{display:inline-flex;align-items:center;gap:6px;font-size:var(--texto-11);color:var(--texto-secundario);font-weight:600}
/* "mdot" y no "dot"/"empty": .empty es una clase global (padding:45px) y colisionaría. */
.mdot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.65)}
.mdot-full{background:var(--verde-600)}
.mdot-partial{background:#e0a02f}
.mdot-empty{background:#93a29d}

/* ---- Conmutador Mapa / Panel -------------------------------------------- */
.citymap-switch{display:inline-flex;padding:4px;gap:2px}
.citymap-switch button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;cursor:pointer;
  padding:8px 13px;border-radius:calc(var(--radio-l) - 5px);font-weight:700;font-size:var(--texto-12);
  color:var(--texto-secundario);transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.citymap-switch button svg{color:currentColor}
.citymap-switch button:hover{color:var(--verde-900)}
.citymap-switch button.on{background:var(--verde-600);color:#fff;box-shadow:var(--sombra-accion-reposo)}

.citymap-home{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer;
  font-weight:600;font-size:var(--texto-12);color:var(--texto-secundario);
  transition:color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.citymap-home svg{color:var(--verde-600)}
.citymap-home:hover{color:var(--verde-900);box-shadow:var(--glass-realce),var(--sombra-2)}
.citymap-home.is-home{color:var(--verde-700)}
.citymap-home.is-home svg{fill:var(--verde-100)}

/* ---- Pines "tipo juego" -------------------------------------------------- */
/* Coreografía: nacen ocultos (.pin-wait) y caen en cascada al recibir .pin-in, DESPUÉS
   de que las columnas hayan crecido — una cosa a la vez, nada compite por la atención. */
.pin-wrap{background:none;border:0}
.pin-wait{visibility:hidden}
.pin{position:relative;width:40px;height:48px;cursor:pointer;transform-origin:50% 100%}
.pin-in .pin{animation:pin-drop var(--dur-3) var(--ease-spring) both}
/* La punta va en la esquina ABAJO-DERECHA: rotada 45° en horario, (+1,+1) cae en (0,+1,41) =
   justo hacia abajo, sobre el edificio. Con la punta en abajo-izquierda apuntaba a la izquierda. */
.pin-badge{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50% 50% 6px 50%;
  transform:rotate(45deg);display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(23,35,34,.28),inset 0 1px 0 rgba(255,255,255,.45);
  border:2px solid #fff}
.pin-badge::after{content:attr(data-label);transform:rotate(-45deg);color:#fff;font-weight:800;
  font-size:var(--texto-12);letter-spacing:-.02em;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.22)}
.pin-full .pin-badge{background:linear-gradient(145deg,#12897a,var(--verde-600))}
.pin-partial .pin-badge{background:linear-gradient(145deg,#f0b64e,#dd9420)}
.pin-empty .pin-badge{background:linear-gradient(145deg,#aab6b2,#828f8a)}
.pin::before{content:"";position:absolute;left:50%;bottom:2px;width:12px;height:5px;transform:translateX(-50%);
  background:rgba(23,35,34,.28);border-radius:50%;filter:blur(1.5px)}
.pin-wrap:hover .pin{transform:translateY(-4px) scale(1.06)}
.pin-wrap:hover{z-index:1000!important}
/* El cursor dice la verdad: fuera del modo de ajuste el pin se PULSA (no se arrastra). */
.pin-wrap{cursor:pointer}
.citymap-wrap.is-editing .pin-wrap,.citymap-wrap.is-editing .pin{cursor:grab}
.citymap-wrap.is-editing .pin-wrap:active,.citymap-wrap.is-editing .pin:active{cursor:grabbing}
.citymap-wrap.is-editing .pin{outline:2px dashed rgba(255,255,255,.85);outline-offset:3px;border-radius:50%}

@keyframes pin-drop{0%{transform:translateY(-16px) scale(.4);opacity:0}
  60%{transform:translateY(2px) scale(1.04);opacity:1}100%{transform:translateY(0) scale(1)}}

/* ---- Popup de marca ------------------------------------------------------ */
/* Entrada con muelle breve (aparece desde el edificio hacia arriba). El transform de
   posicionamiento vive en .maplibregl-popup; animamos el CONTENIDO para no pisarlo. */
.maplibregl-popup-content{border-radius:var(--radio-l);box-shadow:var(--sombra-2);padding:16px 18px;font-size:var(--texto-12);line-height:1.5;
  animation:pop-up var(--dur-3) var(--ease-spring) both;transform-origin:50% 100%}
@keyframes pop-up{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#fff}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#fff}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#fff}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#fff}
.pop-code{font-size:var(--texto-11);font-weight:700;letter-spacing:.1em;color:var(--verde-600);text-transform:uppercase}
.pop-name{font-size:var(--texto-16);letter-spacing:-.02em;margin:3px 0 2px;color:var(--verde-900)}
.pop-addr{color:var(--muted);margin:0 0 10px}
.pop-occ{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:600;color:var(--texto-secundario)}
.pop-occ .mdot{width:9px;height:9px}
.pop-people{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px}
.pop-people li{display:flex;align-items:center;gap:8px;color:var(--texto-principal)}
.pop-ini{width:22px;height:22px;border-radius:50%;background:var(--verde-100);color:var(--verde-700);
  display:grid;place-items:center;font-size:var(--texto-11);font-weight:700;flex:none}
.pop-empty{color:var(--muted);margin:0 0 12px;font-style:italic}
.pop-btn{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;border:0;cursor:pointer;
  background:var(--verde-600);color:#fff;font-weight:700;font-size:var(--texto-12);padding:10px 12px;border-radius:var(--radio-m)}
.pop-btn:hover{background:var(--verde-700)}
.pop-btn:disabled{opacity:.6;cursor:progress}
/* Colocar escribiendo (modo «Ajustar ubicaciones»). */
.pop-label{display:block;margin:0 0 6px;font-size:var(--texto-11);font-weight:600;color:var(--texto-secundario)}
.pop-input{width:100%;box-sizing:border-box;margin:0 0 10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--radio-m);font:inherit;background:#fff;color:var(--verde-900)}
.pop-input:focus{outline:2px solid var(--verde-600);outline-offset:1px;border-color:transparent}
.pop-hint{margin:8px 0 0;font-size:var(--texto-11);color:var(--muted)}

/* Edificio con varios pisos: una fila por piso, cada fila = UNA acción (abrir su ficha). */
.pop-building{display:grid;gap:4px;margin-top:2px}
.pop-flat{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;
  padding:8px 10px;border-radius:var(--radio-m);cursor:pointer;font:inherit;font-size:var(--texto-12);
  color:var(--texto-principal);text-align:left;transition:background var(--dur-2) var(--ease-out)}
.pop-flat:hover{background:var(--verde-100)}
.pop-flat .mdot{width:9px;height:9px}
.pop-flat-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-flat-name strong{color:var(--verde-700)}
.pop-flat-occ{margin-left:auto;font-weight:700;color:var(--texto-secundario);flex:none}

/* Controles MapLibre (zoom/inclinación): alejados de la esquina del HUD, aire de marca. */
.citymap .maplibregl-ctrl-bottom-left{bottom:26px;left:22px}
.maplibregl-ctrl-group{border:0;box-shadow:var(--sombra-1);border-radius:var(--radio-m);overflow:hidden;background:#fff}
.maplibregl-ctrl-group button:hover{background:var(--verde-100)}
.maplibregl-ctrl-attrib{font-size:10px;background:rgba(255,255,255,.7)!important;border-radius:var(--radio-pill) 0 0 0}

/* ---- Móvil --------------------------------------------------------------- */
@media(max-width:760px){
  .citymap-wrap{height:calc(100vh - 78px)}
  .citymap-hud-tl{left:12px;top:12px;right:12px;max-width:none}
  .citymap-hud-tr{right:12px;top:auto;bottom:14px;left:12px;align-items:stretch;flex-direction:row;gap:8px}
  .citymap-switch{flex:1}
  .citymap-switch button{flex:1;justify-content:center}
  .citymap-home span{display:none}
  .citymap-home{padding:9px 12px}
  .citymap .maplibregl-ctrl-bottom-left{bottom:78px}
  .citymap-title{font-size:var(--texto-16)}
}
@media(prefers-reduced-motion:reduce){
  .pin-in .pin,.maplibregl-popup-content{animation:none}
}