/* ============================================================
   Galerías Pacífico · Mapa Interactivo (estilo tótem premium)
   Azul vivo · Poppins · Material Symbols · tarjetas redondeadas
   Tema claro (Google Maps) + variante oscura
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  --bg:           #ececee;
  --map-paper:    #f7f7f8;
  --map-corridor: #ffffff;
  --map-stroke:   #d9dade;
  --surface:      #ffffff;
  --surface-2:    #f1f4f9;
  --border:       #e6e8ec;

  --shadow:       0 4px 24px rgba(20,28,46,.14), 0 1px 4px rgba(20,28,46,.08);
  --shadow-lg:    0 18px 50px rgba(20,28,46,.22), 0 6px 16px rgba(20,28,46,.12);
  --shadow-sm:    0 2px 10px rgba(20,28,46,.10);

  --text:         #1a2230;
  --text-2:       #5b6472;
  --text-3:       #8a93a3;
  --on-accent:    #ffffff;

  --accent:       #1769e0;          /* azul vivo del tótem */
  --accent-2:     #0f57c2;
  --accent-weak:  #e9f1fe;

  /* Verde de marca (selector de pisos, botones del mapa, acciones de modales) */
  --marca:        #35564a;
  --marca-2:      #2a453b;
  --marca-weak:   #eef3f1;
  --marca-weak-2: #dfeae5;
  --ok:           #1aa251;          /* "Abierto" */
  --no:           #e0413a;          /* "Cerrado" */
  --gp-gold:      #9a7b3f;
  /* Rojo pleno del botón Ruta y del marcador "Ud. está aquí". NO es el bordó
     del logo (#991d39): a ese tamaño y sobre el plano blanco no se leía como
     rojo. Un solo lugar para subirle o bajarle el tono. */
  --gp-rojo:      #e11b22;
  --gp-rojo-2:    #b51419;

  --label:        #38414f;
  --label-halo:   #ffffff;
  --poi-bg:       #ffffff;
  --poi-ink:      #46505f;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ctrl: 48px;
  --ctrl-font: 24px;
  --side-w: clamp(300px, 24vw, 760px);   /* ancho del panel de opciones */
}

:root[data-tema="oscuro"] {
  --bg:           #14161c;
  --map-paper:    #262a33;
  --map-corridor: #2e333d;
  --map-stroke:   #434a57;
  --surface:      #1e222a;
  --surface-2:    #2a2f3a;
  --border:       #313742;
  --shadow:       0 6px 28px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg:    0 22px 60px rgba(0,0,0,.6);
  --shadow-sm:    0 2px 12px rgba(0,0,0,.5);
  --text:         #eaedf2;
  --text-2:       #aab2c0;
  --text-3:       #7e8796;
  --accent:       #4f93f7;
  --accent-2:     #3b7fe6;
  --accent-weak:  #1f2c40;
  --label:        #e7eaf0;
  --label-halo:   #14161c;
  --poi-bg:       #2a2f3a;
  --poi-ink:      #c2c9d4;
}

html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* Material Symbols */
.msym {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  display: inline-block; -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 1;
  user-select: none;
}

/* ============================================================
   MAPA
   ============================================================ */
#mapWrap { position: fixed; inset: 0; left: var(--side-w); overflow: hidden; background: var(--bg); cursor: grab; touch-action: none; }
#mapWrap.dragging { cursor: grabbing; }
#mapInner { position: absolute; inset: 0; }

/* ============================================================
   CANVAS 3D
   ============================================================ */
#threeCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: none;
  background: var(--bg);
  touch-action: none;
}

/* Modo 3D activo — oculta el SVG 2D, muestra el canvas 3D */
body.view-3d #mapWrap   { display: none; }
body.view-3d #threeCanvas { display: block; }

/* Ajustes UI en modo 3D (oculta zoom/fit, muestra ayuda) */
body.view-3d #zFit,
body.view-3d .zoomGroup {
  display: none !important;
}
body:not(.view-3d) #zHelp3D {
  display: none !important;
}

/* ============================================================
   FAB 2D / 3D
   ============================================================ */
.fab3d {
  position: fixed;
  /* Arriba-izquierda, en la zona VACÍA (no sobre el plano), encima del cartel. */
  top: clamp(14px, 2vmin, 56px);
  left: calc(var(--side-w) + clamp(60px, 10vw, 320px));
  transform: translateX(-50%);
  z-index: 40;

  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  height: 46px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 4px 20px rgba(23,105,224,.38), 0 1px 4px rgba(23,105,224,.22);
  transition: background 200ms ease, box-shadow 200ms ease,
              transform 180ms cubic-bezier(.34,1.56,.64,1), opacity 160ms ease;
  will-change: transform;
}
.fab3d:hover {
  background: var(--accent-2);
  box-shadow: 0 6px 28px rgba(23,105,224,.55), 0 2px 8px rgba(23,105,224,.3);
  transform: translateX(-50%) translateY(-2px);
}
.fab3d:active {
  transform: translateX(-50%) scale(.95);
}

/* Estado 3D activado */
.fab3d[aria-pressed="true"] {
  background: #e8f0fe;
  color: var(--accent);
  box-shadow: 0 3px 14px rgba(23,105,224,.22);
}
.fab3d[aria-pressed="true"]:hover {
  background: #d2e3fc;
  transform: translateX(-50%) translateY(-2px);
}

/* Dark mode */
:root[data-tema="oscuro"] .fab3d[aria-pressed="true"] {
  background: var(--accent-weak);
  color: var(--accent);
}

.fab3d-icon {
  font-size: 20px;
  transition: transform 300ms cubic-bezier(.34,1.56,.64,1);
}
.fab3d[aria-pressed="true"] .fab3d-icon {
  transform: rotateY(180deg);
}
.fab3d-label {
  min-width: 18px;
  text-align: left;
}

/* FAB Modo QR (superusuario): al lado del botón 2D/3D */
#fabQr { left: calc(var(--side-w) + clamp(60px, 10vw, 320px) + 130px); }
/* .fab3d fija display:flex, que pisa el atributo [hidden]; forzamos el ocultado
   con un selector más específico (#id[attr]) para que solo lo vea el superusuario. */
#fabQr[hidden], #fab3d[hidden] { display: none; }

/* Modo QR activo: puntería para elegir un punto del mapa (2D y 3D) */
body.qr-mode #mapWrap,
body.qr-mode #mapWrap .unit,
body.qr-mode #threeCanvas { cursor: crosshair !important; }

/* Modal del QR de punto */
.qr-punto-body { display: flex; justify-content: center; padding: 12px 0 4px; }
.qr-punto-actions { display: flex; gap: 10px; margin-top: 14px; }
.qr-punto-img {
  width: 240px; height: 240px;
  image-rendering: pixelated;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.floorSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.floorSvg.is-active { display: block; }
.floorSvg .baseLayer path { vector-effect: non-scaling-stroke; }
.floorSvg .baseLayer path[fill="#f4f2ee"] { fill: var(--map-paper); stroke: none; }
/* Estética plana (ref. tótem Andino): paredes y contornos en gris suave,
   nada de líneas negras pesadas. */
.floorSvg .baseLayer path[stroke="#2a2823"] { stroke: #c3c7ce; stroke-width: 1.6px; }
.floorSvg .baseLayer path[stroke="#b0aba0"] { stroke: #e2e4e8; }
/* Floor-hole marker paths are editor-only reference shapes — the actual void is
   already baked into the floor fill path's compound geometry (even-odd rule). */
.floorSvg .baseLayer path[data-type="floor-hole"] { display: none; }
.floorSvg .baseLayer path.escalator {
  stroke: #e0c878;
  stroke-width: 3.5px;
  stroke-dasharray: 6,4;
  fill: none;
}
.floorSvg .baseLayer rect.esc-well {
  fill: none;
  stroke: #b9bdc5;
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}

/* Flecha de sentido en la BOCA de cada escalera mecánica (dónde se entra) +
   chapa ↑/↓. Verde = sube · Azul = baja. La flecha gira con el mapa (alineada
   a la rampa); la chapa se mantiene derecha (billboard). */
.floorSvg .esc-dir-line { stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.floorSvg .esc-dir-head { stroke: #fff; stroke-width: 1; paint-order: stroke; }
.floorSvg .esc-dir.up   .esc-dir-line,
.floorSvg .esc-dir.up   .esc-dir-head { stroke: #1f9d57; fill: #1f9d57; }
.floorSvg .esc-dir.down .esc-dir-line,
.floorSvg .esc-dir.down .esc-dir-head { stroke: #2f6fd0; fill: #2f6fd0; }
.floorSvg .esc-dir.up   .esc-dir-head,
.floorSvg .esc-dir.down .esc-dir-head { stroke: #fff; }   /* contorno blanco del triángulo */
.floorSvg .esc-dir-badge-bg { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.floorSvg .esc-dir-badge.up   .esc-dir-badge-bg { fill: #1f9d57; }
.floorSvg .esc-dir-badge.down .esc-dir-badge-bg { fill: #2f6fd0; }
.floorSvg .esc-dir-badge-ic { fill: #fff; font-size: 13px; font-variation-settings: "FILL" 1; }
/* Escalera que sólo LLEGA a este piso (se toma en otro): marca neutra gris, sin
   afirmar sube/baja. La flecha apunta hacia la salida sobre el piso. */
.floorSvg .esc-dir.arrival .esc-dir-line,
.floorSvg .esc-dir.arrival .esc-dir-head { stroke: #8a94a6; fill: #8a94a6; }
.floorSvg .esc-dir.arrival .esc-dir-head { stroke: #fff; }
.floorSvg .esc-dir-badge.arrival .esc-dir-badge-bg { fill: #8a94a6; }
:root[data-tema="oscuro"] .floorSvg .esc-dir-head,
:root[data-tema="oscuro"] .floorSvg .esc-dir-badge-bg { stroke: #14161c; }

/* Unidades — bloques grises planos separados por juntas blancas (ref. Andino).
   Cuando una marca paga, el bloque entero se pinta con su color y/o logo. */
.unit {
  fill: var(--unit-fill, rgba(0,0,0,0.035));
  stroke: #ffffff;
  stroke-width: 1.8px; vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill 140ms ease, stroke 140ms ease, opacity 140ms ease;
}
.unit:hover { fill: var(--unit-hover, rgba(23,105,224,0.22)); }
.unit.is-selected {
  fill: var(--accent) !important; fill-opacity: .9;
  stroke: #fff; stroke-width: 2.5px;
  filter: drop-shadow(0 2px 6px rgba(23,105,224,.5));
  opacity: 1 !important;
}
.unit.no-local { pointer-events: none; fill: transparent; }
.unit.dim { opacity: .22; }
.unit.is-match { fill: var(--unit-match, rgba(23,105,224,0.34)); stroke: var(--accent); }
.unit:focus { outline: none; }
.unit:focus-visible { stroke: var(--accent); stroke-width: 2.5px; }

/* Stands (góndolas) — islas de exhibición en la circulación. Se dibujan IGUAL
   que un local (mismo gris y mismo contorno blanco): antes iban en arena con
   borde punteado y saltaban a la vista más que los locales, que son el
   contenido principal del mapa. El relleno lo maneja --unit-fill desde
   units.js, y si el stand tiene color de marca (publicidad) ese manda. */

/* Color de selección/hover/match por piso (scope: #mapWrap[data-floor]).
   PP = celeste claro. PB = verde manzana. NF = naranja.
   Mantiene las mismas reglas base; sólo cambia fill/stroke/halo. */
#mapWrap[data-floor="PB"] .unit:hover        { fill: rgba(124,179,66,0.24); }
#mapWrap[data-floor="PB"] .unit.is-selected  { fill: #7cb342 !important; stroke: #fff; filter: drop-shadow(0 2px 6px rgba(124,179,66,.55)); }
#mapWrap[data-floor="PB"] .unit.is-match     { fill: rgba(124,179,66,0.34); stroke: #7cb342; }
#mapWrap[data-floor="PB"] .unit:focus-visible{ stroke: #7cb342; }

#mapWrap[data-floor="PP"] .unit:hover        { fill: rgba(128,191,255,0.24); }
#mapWrap[data-floor="PP"] .unit.is-selected  { fill: #80BFFF !important; stroke: #fff; filter: drop-shadow(0 2px 6px rgba(128,191,255,.55)); }
#mapWrap[data-floor="PP"] .unit.is-match     { fill: rgba(128,191,255,0.34); stroke: #80BFFF; }
#mapWrap[data-floor="PP"] .unit:focus-visible{ stroke: #80BFFF; }

#mapWrap[data-floor="NF"] .unit:hover        { fill: rgba(251,140,0,0.24); }
#mapWrap[data-floor="NF"] .unit.is-selected  { fill: #fb8c00 !important; stroke: #fff; filter: drop-shadow(0 2px 6px rgba(251,140,0,.55)); }
#mapWrap[data-floor="NF"] .unit.is-match     { fill: rgba(251,140,0,0.34); stroke: #fb8c00; }
#mapWrap[data-floor="NF"] .unit:focus-visible{ stroke: #fb8c00; }

/* Bloque de SERVICIO (hoy el Toilette): hover y selección en el azul del POI de
   baños, no en el color del piso — el ícono que lo representa es azul en los
   tres pisos, así que el bloque tiene que acompañarlo. El `[data-floor]` está
   para ganarle a las reglas por piso de acá arriba sin depender del orden. */
#mapWrap[data-floor] .unit.unit-servicio:hover {
  fill: rgba(23,105,224,.24);
}
#mapWrap[data-floor] .unit.unit-servicio.is-selected {
  fill: var(--accent) !important; stroke: #fff;
  filter: drop-shadow(0 2px 6px rgba(23,105,224,.55));
}

/* Etiquetas — discretas en gris medio; blancas sobre bloques de marca */
.lbl {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  fill: #5a626f; paint-order: stroke; stroke: var(--label-halo);
  stroke-width: 3px; stroke-linejoin: round;
  text-anchor: middle; dominant-baseline: middle;
  pointer-events: none; user-select: none;
}
.lbl.hidden { display: none; }
.lbl.anchor { font-weight: 600; font-size: 15px; }
/* Local sin marca asignada: sólo el número, bien tenue */
.lbl.lbl-num { fill: #a6acb6; font-weight: 500; }
/* Local con color de marca: nombre blanco sobre el bloque pintado */
.lbl.lbl-brand { fill: #ffffff; stroke: rgba(0,0,0,.28); stroke-width: 2.6px; font-weight: 700; }

/* POIs */
.poi { cursor: pointer; }
.poi .poi-dot {
  fill: var(--poi-bg);
  stroke: rgba(20,28,46,.12);
  stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(20,28,46,.18));
  transition: fill 140ms ease, stroke 140ms ease, transform 140ms ease;
  transform-origin: center;
  transform-box: fill-box;
}
.poi text.poi-ic {
  font-family: "Material Symbols Rounded";
  font-size: 16px;
  fill: var(--poi-ink);
  text-anchor: middle;
  dominant-baseline: central;
  font-variation-settings: "FILL" 1;
  transition: fill 140ms ease, transform 140ms ease;
  transform-origin: center;
  transform-box: fill-box;
  pointer-events: none;
}
.poi:hover .poi-dot {
  fill: var(--accent);
  stroke: var(--accent-2);
  transform: scale(1.15);
}
.poi:hover text.poi-ic {
  fill: #ffffff;
  transform: scale(1.15);
}
/* El baño se ve SIEMPRE como el resto de los POIs al pasar por encima: círculo
   azul e ícono blanco. Es el servicio que más se busca y el círculo blanco se
   perdía contra el bloque del local. Cubre `bano` y `bano_familiar`. */
.poi[data-tipo^="bano"] .poi-dot { fill: var(--accent); stroke: var(--accent-2); }
.poi[data-tipo^="bano"] text.poi-ic { fill: #ffffff; }
.poi.hidden { display: none; }

/* Tótem "Usted está aquí" */
.totem .ring { fill: rgba(23,105,224,.22); animation: pulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.totem .core { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
@keyframes pulse { 0%{transform:scale(.5);opacity:.8} 70%{transform:scale(2);opacity:0} 100%{opacity:0} }

/* Marcador "Ud. está aquí" (badge con ícono de persona + etiqueta).
   Círculo Y pastilla en el rojo de marca: antes la pastilla iba en negro y el
   conjunto no se leía como una sola pieza. */
.youhere { --yh: var(--gp-rojo); pointer-events: none; }
.youhere .yh-pulse { fill: color-mix(in srgb, var(--yh) 28%, transparent); transform-origin: center; transform-box: fill-box;
  animation: pulse 2.2s ease-out infinite; }
.youhere .yh-badge { fill: var(--yh); stroke: #fff; stroke-width: 3px; }
.youhere .yh-ic { fill: #fff; font-size: 26px; }
.youhere .yh-pill { fill: var(--yh); stroke: #fff; stroke-width: 2px; }
.youhere .yh-txt { fill: #fff; font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: .2px; }

/* Destino (pulso al trazar ruta / seleccionar) */
.destPin .ring2 { fill: rgba(23,105,224,.28); animation: pulse 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.destPin .pin { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.destPin .pinDot { fill: #fff; }

@media (prefers-reduced-motion: reduce){ .totem .ring, .destPin .ring2, .routeLayer path, .route-hint::after { animation: none !important; } }

/* Ruta sólida azul con flujo */
.routeLayer .route-base { fill:none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect:non-scaling-stroke; opacity:.95; }
.routeLayer .route-flow { fill:none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 16; vector-effect:non-scaling-stroke; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.routeLayer .route-origin { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.routeLayer .route-arrow-bg { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.routeLayer .route-arrow-tri { fill: #fff; }
.routeLayer .connMarker .conn-dot { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.routeLayer .connMarker .conn-ic { font-family: "Material Symbols Rounded"; font-size: 15px; fill: #fff; text-anchor: middle; dominant-baseline: central; font-variation-settings: "FILL" 1; }

/* ============================================================
   TOPBAR / BUSCADOR
   ============================================================ */
.topbar {
  position: fixed; top: 16px; left: 16px; z-index: 40;
  display: flex; align-items: stretch; gap: 12px;
  max-width: min(440px, calc(100vw - 32px));
}
.searchbox {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r-pill);
  box-shadow: var(--shadow); padding: 0 8px 0 16px; height: 56px; position: relative;
}
.searchbox .ic-search { color: var(--accent); font-size: 24px; }
.searchbox .brand { display:flex; flex-direction:column; line-height:1.05; padding-right:12px; border-right:1px solid var(--border); }
.searchbox .brand b { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing:.2px; }
.searchbox .brand span { font-size: 9px; letter-spacing:1.6px; color: var(--gp-gold); text-transform: uppercase; font-weight:600; }
.searchbox input { flex:1; border:none; outline:none; background:transparent; font-size:15.5px; font-weight:500; color:var(--text); min-width:0; }
.searchbox input::placeholder { color: var(--text-3); font-weight:400; }
.searchbox .clear-btn { border:none; background:transparent; color:var(--text-2); width:36px; height:36px; border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:20px; }
.searchbox .clear-btn:hover { background: var(--surface-2); }
.searchbox.has-text .clear-btn { display:flex; }

.icon-btn {
  width: 56px; height: 56px; flex:none; border:none; border-radius: 50%;
  background: var(--surface); color: var(--accent); box-shadow: var(--shadow);
  cursor: pointer; display:flex; align-items:center; justify-content:center; font-size: 26px;
  transition: transform .12s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.94); }

/* Autocompletado */
.suggest {
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:100;
  background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  overflow:hidden; max-height:min(62vh,480px); overflow-y:auto; display:none;
}
.suggest.open { display:block; }
.sug-item { display:flex; align-items:center; gap:14px; padding:13px 16px; cursor:pointer; border-bottom:1px solid var(--border); }
.sug-item:last-child { border-bottom:none; }
.sug-item:hover, .sug-item.active { background: var(--surface-2); }
.sug-ic { width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:21px; }
/* Logos dentro del autocompletado: mismo estilo que el menú, en chico */
.sug-item .cl-logo { width:42px; border-radius:12px; }
.sug-item .cl-logo-i { font-size:18px; }
.sug-tx { min-width:0; flex:1; }
.sug-tx b { font-size:14.5px; font-weight:600; color:var(--text); display:block; }
.sug-tx span { font-size:12px; color:var(--text-2); }
.sug-tag { font-size:11px; color:var(--text-3); white-space:nowrap; font-weight:600; }
.sug-empty { padding:22px 18px; color:var(--text-2); font-size:14px; line-height:1.6; }
.sug-empty b { color:var(--text); }

/* ============================================================
   SELECTOR DE PISOS (pastillas abajo-centro)
   ============================================================ */
.floorPicker {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 35;
  display: flex; gap: 6px; background: var(--surface);
  border-radius: var(--r-pill); box-shadow: var(--shadow); padding: 6px;
}
.floorPicker button {
  min-width: 56px; height: 48px; padding: 0 14px; border:none; background:transparent; cursor:pointer;
  border-radius: var(--r-pill); display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--text-2); transition: background .16s, color .16s, transform .12s;
}
.floorPicker button b { font-size: 15px; font-weight: 700; line-height:1; }
.floorPicker button small { font-size: 8.5px; letter-spacing:.4px; text-transform:uppercase; color: var(--text-3); margin-top:2px; }
.floorPicker button:hover { background: var(--surface-2); }
.floorPicker button:active { transform: scale(.95); }
.floorPicker button.is-active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(23,105,224,.45); }
.floorPicker button.is-active small { color: rgba(255,255,255,.85); }

/* ============================================================
   CONTROLES DE ZOOM (abajo-der)
   ============================================================ */
.mapTools { position: fixed; bottom: 22px; right: 16px; z-index: 35; display:flex; flex-direction:column; gap:12px; align-items:center; }
.zoomGroup { display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-sm); box-shadow:var(--shadow); overflow:hidden; }
.zoomGroup button, .tool-single { width:var(--ctrl); height:var(--ctrl); border:none; background:var(--surface); cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:center; font-size:var(--ctrl-font); }
.zoomGroup button:hover, .tool-single:hover { background:var(--surface-2); color:var(--accent); }
.zoomGroup button + button { border-top:1px solid var(--border); }
.tool-single { border-radius:var(--r-sm); box-shadow:var(--shadow); }

/* ============================================================
   TARJETA DE LUGAR
   ============================================================ */
.placecard {
  position: fixed; z-index: 50; left: calc(var(--act-w) + var(--side-w) + 24px); bottom: 84px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 480px; max-width: calc(100vw - 32px); overflow: hidden;
  transform: translateY(24px) scale(.98); opacity:0; pointer-events:none;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.placecard.open { transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }

.pc-head { position: relative; height: 240px; overflow: hidden; }
.pc-photo { position:absolute; inset:0; background-size: cover; background-position: center; }
.pc-head::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.18) 100%); }
.pc-close {
  position:absolute; top:14px; right:14px; z-index:2; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.92); color:#222; border:none; cursor:pointer; font-size:24px;
  display:flex; align-items:center; justify-content:center;
}
.pc-head-bottom { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:flex-end; gap:16px; padding:18px 20px; }
.pc-logo {
  width:68px; height:68px; flex:none; border-radius:18px; background:#fff; color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); background-size:cover; background-position:center;
}
.pc-title { flex:1; min-width:0; color:#fff; font-size:32px; font-weight:700; line-height:1.1; text-shadow:0 1px 6px rgba(0,0,0,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-route {
  flex:none; display:flex; align-items:center; gap:7px; height:52px; padding:0 20px;
  background:#fff; color:var(--accent); border:none; border-radius:var(--r-pill); cursor:pointer;
  font-size:18px; font-weight:700; box-shadow:0 3px 12px rgba(0,0,0,.25); transition: transform .12s;
}
.pc-route .msym { font-size:22px; }
.pc-route:active { transform: scale(.95); }

.pc-body { padding: 22px 24px 24px; }
.pc-status-row { display:flex; align-items:center; justify-content:space-between; }
.pc-status { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; color: var(--ok); }
.pc-status .dot { width:11px; height:11px; border-radius:50%; background: var(--ok); box-shadow:0 0 0 3px rgba(26,162,81,.18); }
.pc-status.closed { color: var(--no); }
.pc-status.closed .dot { background: var(--no); box-shadow:0 0 0 3px rgba(224,65,58,.18); }
.pc-num { font-size:14px; font-weight:700; color:var(--text-3); background:var(--surface-2); padding:6px 13px; border-radius:var(--r-pill); letter-spacing:.4px; }

.pc-grid { margin-top:18px; display:flex; flex-direction:column; gap:15px; }
.pc-row { display:flex; align-items:center; gap:14px; font-size:18px; color:var(--text-2); font-weight:500; }
.pc-row .ic { color:var(--text-3); font-size:27px; flex:none; }
.pc-row.hours { color: var(--accent); font-weight:700; }
.pc-row.hours .ic { color: var(--accent); }
.pc-desc { margin-top:18px; font-size:16px; color:var(--text-2); line-height:1.55; }
.pc-actions { display:flex; gap:10px; margin-top:22px; align-items:stretch; }
.pc-actions .btn { height:56px; font-size:17px; min-width: 50%; }

/* Botón de accesibilidad AL LADO de «Ruta», cuadrado.
   El ALTO sale de align-self:stretch (queda igual que «Ruta») y el ANCHO de un
   clamp que da el mismo número en las dos resoluciones: 48px en el celu y
   5.4vmin (=58px a 1080) en el tótem. Con aspect-ratio no alcanzaba: al ser un
   flex item con flex:none, el ancho lo mandaba el contenido y quedaba en 22px. */
.pc-acc {
  flex: none; align-self: stretch; width: clamp(48px, 5.4vmin, 116px);
  padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--marca);
  border: 1.6px solid var(--marca); border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: background .15s, color .15s, transform .12s;
}
.pc-acc .msym { font-size: 1.5em; }
.pc-acc:hover { background: var(--marca-weak); }
.pc-acc:active { transform: scale(.96); }
.pc-acc.on { background: var(--marca); color: #fff; border-color: var(--marca); }
.btn { flex:1; height:46px; border-radius:var(--r-pill); border:none; cursor:pointer; font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; transition: background .15s, box-shadow .15s, transform .12s; }
.btn .msym { font-size:19px; }
.btn:active { transform: scale(.97); }
/* Botones de acción de los modales: verde de marca (el mismo del selector de
   pisos y los botones del mapa), no el azul del tema. */
.btn-primary { background: var(--marca); color:#fff; }
.btn-primary:hover { background: var(--marca-2); box-shadow:0 4px 16px rgba(53,86,74,.45); }
.btn-ghost { background: var(--marca-weak); color: var(--marca); }
.btn-ghost:hover { background: var(--marca-weak-2); }

/* ============================================================
   MODAL "RUTA DESDE"
   ============================================================ */
.modal-scrim {
  position: fixed; inset:0; z-index: 70; background: rgba(15,22,38,.4);
  display:flex; align-items:center; justify-content:center; padding: 24px;
  opacity:0; pointer-events:none; transition: opacity .2s;
}
.modal-scrim.open { opacity:1; pointer-events:auto; }
.route-modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 420px; max-width: 100%; padding: 22px 24px 24px;
  transform: translateY(16px) scale(.96); transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.modal-scrim.open .route-modal { transform: none; }
.rm-head { display:flex; align-items:center; gap:10px; }
.rm-head b { font-size:20px; font-weight:700; flex:1; }
.rm-ic { color: var(--marca); font-size:26px; }
.rm-close { width:36px; height:36px; border:none; background:var(--surface-2); border-radius:50%; cursor:pointer; color:var(--text-2); font-size:20px; display:flex; align-items:center; justify-content:center; }
.rm-stats { text-align:center; margin-top:16px; color:var(--text-2); font-size:14.5px; line-height:1.9; }
.rm-stats b { color:var(--text); font-weight:700; }
.rm-sep { color: var(--accent); font-weight:800; }
.rm-section { text-align:center; margin-top:18px; font-size:17px; font-weight:700; color:var(--text); }
.rm-hint { text-align:center; margin-top:6px; font-size:12.5px; color:var(--text-3); }
.rm-toggle { display:flex; justify-content:center; gap:10px; margin-top:14px; }
.rm-toggle button {
  width:58px; height:58px; border-radius:50%; border:2px solid var(--border); background:var(--surface);
  color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:27px;
  transition: all .15s;
}
.rm-toggle button.on { background: var(--accent); border-color: var(--accent); color:#fff; box-shadow:0 4px 14px rgba(23,105,224,.4); }
.rm-dest { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.rm-dest .rd-ic { width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
.rm-dest .rd-tx b { display:block; font-size:16px; font-weight:700; color:var(--text); }
.rm-dest .rd-tx span { font-size:12.5px; color:var(--text-2); }
.rm-steps { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.rm-steps-t { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-3); }
.rm-step { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--text-2); background:var(--surface-2); border-radius:var(--r-sm); padding:9px 12px; }
.rm-step .msym { font-size:19px; color:var(--accent); flex:none; }
/* Ícono SVG monocromo teñido con el acento (escaleras sube/baja) */
.ic-svg { display:inline-block; width:1em; height:1em; background:var(--accent); -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }
.rm-step .ic-svg { font-size:22px; flex:none; }
.rm-step.aviso { color: var(--no); background: rgba(224,65,58,.08); }
.rm-step.aviso .msym { color: var(--no); }
.rm-go.is-disabled { opacity:.45; pointer-events:none; }
.rm-go { margin-top:18px; }
/* ============================================================
   MODAL AYUDA 3D (Estilo premium adaptado)
   ============================================================ */
.help-3d-modal {
  width: 540px !important;
  max-width: 100%;
}
.help-3d-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
@media (min-width: 560px) {
  .help-3d-grid {
    flex-direction: row;
  }
}
.help-3d-card {
  flex: 1;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 16px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.help-3d-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.h3d-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.h3d-card-title .msym {
  color: var(--accent);
  font-size: 20px;
}
.h3d-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.h3d-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.h3d-icon-circle .msym {
  font-size: 18px;
}
.h3d-text {
  display: flex;
  flex-direction: column;
}
.h3d-text b {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
}
.h3d-text span {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 2px;
}
.h3d-footer {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.h3d-footer button {
  width: 100%;
  padding: 12px;
}

/* ============================================================
   MENÚ / INICIO (panel lateral)
   ============================================================ */
.directory {
  position: fixed; top:0; left:0; bottom:0; z-index:60; width:400px; max-width:90vw;
  background: var(--surface); box-shadow: var(--shadow-lg);
  transform: translateX(-105%); transition: transform .3s cubic-bezier(.3,0,.15,1);
  display:flex; flex-direction:column;
}
.directory.open { transform: translateX(0); }
.dir-head { display:flex; align-items:center; gap:12px; padding:18px 18px 12px; }
.dir-home { flex:1; display:flex; align-items:center; gap:10px; border:none; background:transparent; cursor:pointer; font-size:20px; font-weight:700; color:var(--text); }
.dir-home .msym { color: var(--accent); font-size:26px; }
.dir-head .close { width:40px; height:40px; border:none; background:var(--surface-2); border-radius:50%; cursor:pointer; color:var(--text-2); font-size:22px; display:flex; align-items:center; justify-content:center; }
.dir-scroll { flex:1; overflow-y:auto; padding:0 0 28px; }
.dir-section-t { padding:14px 18px 8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text-3); }
.dir-section-t span { color: var(--accent); }

/* Grilla de categorías (Inicio) */
.quick-cats { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:0 16px; }
.qc {
  background: var(--surface-2); border:none; border-radius:var(--r-md); cursor:pointer;
  padding:16px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:9px;
  transition: transform .12s, box-shadow .15s, background .15s;
}
.qc:hover { background: var(--accent-weak); box-shadow: var(--shadow-sm); }
.qc:active { transform: scale(.95); }
.qc .qc-ic { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:25px; }
.qc .qc-tx { font-size:11.5px; font-weight:600; color:var(--text); text-align:center; line-height:1.2; }
.qc.on { background: var(--accent-weak); outline:2px solid var(--accent); }

/* Chips de filtro */
.dir-filters { padding:8px 16px 4px; display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--border); background:var(--surface); border-radius:var(--r-pill); padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--text-2); cursor:pointer; user-select:none; transition: all .14s; }
.chip .dot { width:10px; height:10px; border-radius:50%; }
.chip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
:root[data-tema="oscuro"] .chip.on { color: var(--text); }

.dir-list { padding:6px 0 10px; }
.dir-group-title { display:flex; align-items:center; gap:8px; padding:14px 18px 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-3); }
.dir-group-title .dot { width:9px; height:9px; border-radius:50%; }
.dir-item { display:flex; align-items:center; gap:13px; padding:11px 18px; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; }
.dir-item:hover { background: var(--surface-2); }
.dir-item .di-ic { width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; }
.dir-item .di-tx { min-width:0; flex:1; }
.dir-item .di-tx b { font-size:14.5px; font-weight:600; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-item .di-tx span { font-size:12px; color:var(--text-2); }
.dir-item .di-num { font-size:12px; color:var(--text-3); font-weight:700; }

/* Leyenda */
.legend { position: fixed; left:16px; bottom:84px; z-index:30; background:var(--surface); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); padding:11px 13px; font-size:12px; max-width:210px; transition: opacity .2s; }
.legend h4 { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-3); margin-bottom:8px; font-weight:700; }
.legend .lg-row { display:flex; align-items:center; gap:9px; padding:2.5px 0; color:var(--text-2); font-weight:500; }
.legend .lg-row .dot { width:11px; height:11px; border-radius:4px; flex:none; }
.legend.hidden { display:none; }

/* Scrim */
.scrim { position:fixed; inset:0; background:rgba(15,22,38,.35); z-index:55; opacity:0; pointer-events:none; transition:opacity .22s; }
.scrim.show { opacity:1; pointer-events:auto; }

/* Toast */
/* Aviso flotante — misma estética que el resto del mapa: tarjeta blanca,
   borde y ícono en verde de marca. Entra con un desplazamiento suave. */
.toast {
  position:fixed; bottom:146px; left:50%;
  transform:translateX(-50%) translateY(10px);
  display:flex; align-items:center; gap:10px;
  background:var(--surface); color:var(--text-2);
  border:1.5px solid var(--marca); border-radius:14px;
  padding:12px 18px; font-size:14px; font-weight:500; line-height:1.3;
  /* width:max-content es necesario: al ser fixed con left:50% y sin right, el
     ancho disponible sería sólo la mitad derecha de la pantalla y el texto se
     partía en cuatro renglones. */
  width:max-content; max-width:min(92vw, 460px); text-align:left;
  box-shadow:0 10px 30px rgba(20,28,46,.16);
  z-index:80; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast .toast-ic { color:var(--marca); font-size:21px; flex:none; font-variation-settings:"FILL" 1; }
.toast .toast-tx { min-width:0; }

/* Cartel del conector mientras se reproduce el recorrido ("Tomá la escalera…").
   Mismo lenguaje visual que el cartel "Usted está en…". */
/* Cartel del conector. Centrado sobre el MAPA (no sobre toda la pantalla) y
   SIEMPRE del lado contrario al recorrido: la clase .rh-arriba / .rh-abajo la
   pone el JS midiendo dónde cayó el trazo, así el cartel nunca lo tapa.
   Borde y onda expansiva en el azul del marcador de la persona. */
.route-hint {
  position:fixed; left:calc(var(--side-w) + (100vw - var(--side-w)) / 2);
  top:clamp(84px, 9vmin, 170px); bottom:auto;   /* por defecto arriba, hasta que el JS decida */
  display:flex; align-items:center; gap:16px;
  background:var(--surface); border:2px solid var(--accent); border-radius:18px;
  box-shadow:0 14px 40px rgba(20,28,46,.20);
  padding:16px 30px; width:max-content; max-width:min(92vw, 620px);
  font-family:var(--font); z-index:46;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
/* Onda expansiva, la misma idea que el pulso del marcador "Usted está aquí". */
.route-hint::after {
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  pointer-events:none; animation:rhOnda 2.2s ease-out infinite;
}
@keyframes rhOnda {
  0%   { box-shadow:0 0 0 0 rgba(23,105,224,.45); }
  70%  { box-shadow:0 0 0 22px rgba(23,105,224,0); }
  100% { box-shadow:0 0 0 0 rgba(23,105,224,0); }
}
/* Ruta por ABAJO → cartel arriba.  Ruta por ARRIBA → cartel abajo.
   Los porcentajes no son al voleo: dejan el cartel metido DENTRO del plano
   (a la altura de Ossira/Rochas arriba y de Swarovski/Victoria's Secret abajo),
   no pegado al borde de la pantalla. Descontando la mitad del alto del cartel,
   27,5vh y 37vh dejan su centro en 31,5vh y 59,2vh. */
.route-hint.rh-arriba { top:clamp(96px, 27.5vh, 460px); bottom:auto; transform:translateX(-50%) translateY(-8px); }
.route-hint.rh-abajo  { top:auto; bottom:clamp(110px, 37vh, 620px); transform:translateX(-50%) translateY(8px); }
.route-hint.rh-arriba.show,
.route-hint.rh-abajo.show { opacity:1; transform:translateX(-50%) translateY(0); }
.route-hint .rh-ic { color:var(--accent); font-size:38px; flex:none; font-variation-settings:"FILL" 1; }
.route-hint .rh-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.route-hint .rh-tx b { font-size:22px; font-weight:700; color:var(--text); line-height:1.25; }
.route-hint .rh-tx small { font-size:15px; font-weight:500; color:var(--text-2); line-height:1.25; }

/* Tema */
.theme-toggle { position:fixed; top:16px; right:16px; z-index:35; width:48px; height:48px; border:none; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:center; font-size:22px; }
.theme-toggle:hover { background:var(--surface-2); color:var(--accent); }

/* ============================================================
   PANEL DE OPCIONES (lateral fijo, al lado del mapa) — tótem 4K
   ============================================================ */
.welcome {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  width: var(--side-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 40px rgba(20,28,46,.08);
  display: flex; flex-direction: column;
  gap: clamp(14px, 1.6vmin, 36px);
  padding: clamp(16px, 1.8vmin, 48px);
  overflow-y: auto;
}
.welcome-inner { display: flex; flex-direction: column; gap: clamp(14px, 1.6vmin, 36px); }
.welcome-head { display: flex; align-items: center; gap: clamp(12px, 1.4vmin, 28px); }
.welcome-logo {
  width: clamp(48px, 5vmin, 120px); height: clamp(48px, 5vmin, 120px); flex: none;
}
.welcome-logo img { width: 100%; height: 100%; object-fit: contain; }
.welcome-head h1 { font-size: clamp(18px, 2.1vmin, 52px); font-weight: 700; color: var(--text); line-height: 1.1; }
.welcome-head h1 b { color: #991d39; }
.welcome-head p { font-size: clamp(12px, 1.2vmin, 30px); color: var(--text-2); margin-top: .3em; font-weight: 500; }

/* El buscador real (.topbar) se monta acá adentro por JS */
#welcomeSearchHost { display: block; }
.welcome .topbar {
  position: static; left: auto; top: auto; right: auto;
  max-width: none; width: 100%; z-index: auto;
}
.welcome .topbar .searchbox { height: clamp(48px, 4.4vmin, 104px); }
.welcome .topbar .brand { display: none; }   /* panel angosto: priorizamos el input */

.welcome-cats-t {
  font-size: clamp(11px, 1vmin, 26px); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); padding: 0 .2em;
}
.welcome-grid {
  display: grid; gap: clamp(10px, 1.1vmin, 26px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(118px, 9vmin, 300px), 1fr));
}
.wtile {
  background: var(--surface); border: 1px solid var(--border); border-radius: clamp(14px, 1.4vmin, 32px); cursor: pointer;
  box-shadow: var(--shadow-sm); padding: clamp(14px, 1.6vmin, 40px) clamp(8px, 1vmin, 22px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1vmin, 22px);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.wtile:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--accent-weak); }
.wtile:active { transform: scale(.96); }
.wtile.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak), var(--shadow); }
.wtile-ic {
  width: clamp(44px, 4.6vmin, 110px); height: clamp(44px, 4.6vmin, 110px);
  border-radius: clamp(12px, 1.2vmin, 26px); display:grid; place-items:center; color:#fff;
}
.wtile-ic .msym { font-size: clamp(24px, 2.6vmin, 62px); }
.wtile-tx { font-size: clamp(12px, 1.2vmin, 30px); font-weight: 600; color: var(--text); text-align:center; line-height:1.15; }

/* Controles flotantes corridos para no quedar tapados por el panel */
.floorPicker { left: calc(50% + var(--side-w) / 2); }
.legend { display: none; }   /* las categorías ya viven en el panel */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .topbar { left:10px; right:10px; top:10px; max-width:none; }
  .placecard { left:10px; right:10px; bottom:84px; width:auto; max-width:none; }
  .legend { display:none; }
  .mapTools { right:10px; bottom:82px; }
  .floorPicker { bottom:14px; }
  .fab3d { top:12px; bottom:auto; height:40px; padding:0 16px; font-size:13px; }
  .pc-title { font-size:21px; }
}

/* Tótem vertical (portrait alto): controles grandes y táctiles */
@media (orientation: portrait) and (min-height: 900px) {
  :root { --ctrl: 64px; --ctrl-font: 32px; }
  .searchbox { height:66px; }
  .searchbox input { font-size:19px; }
  .icon-btn { width:66px; height:66px; font-size:30px; }
  .theme-toggle { width:58px; height:58px; font-size:26px; }
  .floorPicker button { min-width:70px; height:60px; }
  .floorPicker button b { font-size:19px; }
  .placecard { width:auto; left:24px; right:24px; bottom:110px; }
  .pc-head { height: 320px; }
  .pc-logo { width: 78px; height: 78px; font-size: 36px; border-radius: 18px;}
  .pc-title { font-size: 40px; }
  .pc-num { font-size: 16px; }
  .pc-status { font-size: 20px; }
  .pc-row { font-size: 21px; }
  .pc-row .ic { font-size: 28px; }
  .pc-desc { font-size: 18px; }
  .pc-route { height: 60px; font-size: 22px; padding: 0 24px; }
  .pc-route .msym { font-size: 24px; }
  .btn { height: 62px; font-size: 19px; }
  .topbar { top:24px; left:24px; right:24px; max-width:none; }
  .mapTools { bottom:120px; right:24px; gap:16px; }
  .route-modal { width:480px; padding:28px 30px 30px; }
  .rm-head b { font-size:24px; }
  .quick-cats { gap:14px; }
}



/* ============================================================
   MODO ATRACCIÓN — publicidades a pantalla completa (idle)
   ============================================================ */
.attract {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.attract[hidden] { display: none; }
.attract-media { width: 100%; height: 100%; }
.attract-media img,
.attract-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Cartel superior con la invitación a tocar: mismo look que .route-hint
   (fondo blanco, borde azul, título en negrita + subtítulo), fijo arriba
   del overlay de publicidad. */
.attract-hint {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: #fff; color: var(--text);
  border: 2px solid var(--accent); border-radius: 20px;
  padding: 14px 22px; box-shadow: 0 12px 32px rgba(0,0,0,.28);
  font-family: var(--font);
  max-width: min(560px, calc(100% - 40px));
  animation: attractPulse 2.4s ease-in-out infinite;
}
.attract-hint .rh-ic { color: var(--accent); font-size: 38px; flex: none; font-variation-settings: "FILL" 1; }
.attract-hint .rh-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.attract-hint .rh-tx b { font-size: 22px; font-weight: 700; line-height: 1.25; }
.attract-hint .rh-tx small { font-size: 15px; font-weight: 500; color: var(--text-2); line-height: 1.25; }
@keyframes attractPulse { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-3px)} }

/* ============================================================
   BARRA DE ACCIONES (vertical, extremo izquierdo) + LISTA POR RUBRO
   Estilo "tótem Andino": barra azul fija + lista a pantalla completa
   ============================================================ */
:root { --act-w: clamp(72px, 5.4vw, 150px); }

/* La barra ocupa el extremo izquierdo: corremos panel y mapa hacia la derecha */
.actionbar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--act-w);
  z-index: 180; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(10px, 2vmin, 34px);
  background: linear-gradient(180deg, #1769e0, #0f4fb0);
  box-shadow: 4px 0 24px rgba(15,28,60,.22);
}
.ab-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: clamp(56px, 4.4vw, 120px); aspect-ratio: 1;
  border: none; border-radius: clamp(14px, 1.4vmin, 26px);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  transition: background .15s, transform .12s;
}
.ab-btn:hover { background: rgba(255,255,255,.22); }
.ab-btn:active { transform: scale(.93); }
.ab-btn .msym { font-size: clamp(24px, 2.5vmin, 58px); }
.ab-tx { font-family: var(--font); font-size: clamp(10px, 1vmin, 24px); font-weight: 600; letter-spacing: .2px; }
.ab-btn.on { background: #fff; color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* Desplazamos la interfaz a la derecha de la barra */
.welcome { left: var(--act-w); padding-top: clamp(30px, 4vmin, 96px); }  /* baja el contenido: entra bien el logo */
#mapWrap { left: calc(var(--act-w) + var(--side-w)); }
.floorPicker { left: calc(50% + (var(--act-w) + var(--side-w)) / 2); }

/* El menú viejo (botón de apps que abre el directorio) ya no se usa: lo ocultamos */
.welcome .topbar #btnMenu { display: none; }

/* ---- Lista de locales por rubro (panel lateral, deja ver el mapa) ---- */
.catlist {
  position: fixed; top: 0; bottom: 0; left: var(--act-w);
  width: var(--side-w); right: auto;
  z-index: 120; background: var(--surface, #fff);
  border-right: 1px solid var(--border, #e8ebf1);
  box-shadow: 18px 0 50px rgba(15,28,60,.12);
  display: flex; flex-direction: column;
  transform: translateX(-12px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.catlist.open { transform: none; opacity: 1; pointer-events: auto; }
.cl-head {
  display: flex; align-items: center; gap: clamp(12px, 1.4vmin, 30px);
  padding: clamp(18px, 2.2vmin, 52px) clamp(18px, 2vmin, 48px) clamp(14px, 1.6vmin, 36px);
  background: var(--surface, #fff); border-bottom: 1px solid var(--border, #eef1f6);
}
.cl-back {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  border: 1.5px solid var(--border, #e3e7ee); background: var(--surface, #fff);
  color: var(--text, #1a2230); border-radius: var(--r-pill, 999px);
  padding: clamp(10px, 1.1vmin, 22px) clamp(16px, 1.6vmin, 34px);
  font-family: var(--font); font-weight: 600; font-size: clamp(14px, 1.4vmin, 32px);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.cl-back:hover { border-color: var(--accent); color: var(--accent); }
.cl-back:active { transform: scale(.96); }
.cl-back .msym { font-size: 1.25em; }
.cl-head-tx h2 { font-family: var(--font); font-size: clamp(20px, 2.4vmin, 58px); font-weight: 700; color: var(--text, #1a2230); line-height: 1.05; }
.cl-count { font-family: var(--font); font-size: clamp(12px, 1.2vmin, 28px); color: var(--text-2, #5b6472); font-weight: 500; margin-top: .25em; }

.cl-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 1.4vmin, 32px) clamp(14px, 1.6vmin, 38px) clamp(40px, 6vmin, 140px);
  display: flex; flex-direction: column; gap: clamp(8px, 1vmin, 22px);
}
.cl-item {
  display: flex; align-items: center; gap: clamp(12px, 1.3vmin, 26px);
  padding: clamp(10px, 1.1vmin, 22px) clamp(12px, 1.3vmin, 26px);
  background: var(--surface, #fff); border: 1.5px solid var(--border, #e8ebf1);
  border-radius: var(--r-sm, 16px); cursor: pointer; text-align: left;
  transition: box-shadow .15s, transform .12s, border-color .15s;
}
.cl-item:hover { box-shadow: var(--shadow, 0 14px 40px rgba(20,28,46,.14)); border-color: var(--accent-weak, #bcd6fb); transform: translateY(-2px); }
.cl-item:active { transform: scale(.98); }
.cl-logo {
  flex-shrink: 0; width: clamp(46px, 3.6vw, 96px); aspect-ratio: 1;
  border-radius: 14px; background-size: cover; background-position: center;
  background-color: var(--bg-2, #eef1f6);
  display: flex; align-items: center; justify-content: center;
}
.cl-logo-i { color: #fff; font-family: var(--font); font-weight: 700; font-size: clamp(20px, 2vmin, 48px); }
.cl-logo-img { width: 62%; height: 62%; object-fit: contain; pointer-events: none; user-select: none; }
/* Logo de lista con el SVG nuevo: fondo blanco y RECORTE para mostrar sólo el
   ícono (el SVG trae el nombre abajo, que acá no queremos). */
.cl-logo.cl-svg { background: #fff; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,.06); }
.cl-logo.cl-svg .cl-logo-img { position: absolute; width: 171%; height: auto; max-width: none; left: -35.6%; top: -16.7%; }
.cl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-tx b { font-family: var(--font); font-size: clamp(15px, 1.5vmin, 36px); font-weight: 700; color: var(--text, #1a2230); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tx span { font-family: var(--font); font-size: clamp(12px, 1.15vmin, 26px); color: var(--text-2, #5b6472); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-floor {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px;
  font-family: var(--font); font-size: clamp(12px, 1.15vmin, 26px); font-weight: 600;
  color: var(--accent, #1769e0); background: var(--accent-weak, #e8f1fe);
  padding: 6px 12px; border-radius: var(--r-pill, 999px); white-space: nowrap;
}
.cl-floor .msym { font-size: 1.2em; }
.cl-empty { grid-column: 1 / -1; text-align: center; padding: 8vmin 0; color: var(--text-2, #5b6472); font-family: var(--font); font-size: clamp(14px, 1.4vmin, 32px); }

/* ============================================================
   MENÚ TIPO ANDINO — sin barra lateral azul, logos grandes,
   todos los rubros entran en pantalla (sin scroll)
   ============================================================ */
/* Menú ancho con aire. Los cuadrados se miden por el ALTO (así SIEMPRE entran
   las 6 filas sin cortarse ni scroll); el menú es un poco más ancho para que
   quede espacio/aire alrededor de los logos. */
:root { --act-w: 0px; --side-w: clamp(380px, 51vh, 1010px); }
.actionbar { display: none !important; }

.welcome { left: 0; overflow: hidden; padding: clamp(12px, 1.6vmin, 48px); gap: clamp(8px, 1vmin, 26px); }
.welcome-inner { flex: 1 1 auto; min-height: 0; }
.welcome-grid {
  flex: 1 1 auto; min-height: 0;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(10px, 1.4vmin, 34px);
}
.wtile {
  height: 100%; justify-content: center;
  padding: clamp(6px, 1vmin, 28px);
  gap: clamp(5px, .9vmin, 20px);
  border-radius: clamp(14px, 1.6vmin, 34px);
}
.wtile-ic {
  width: clamp(46px, 6vmin, 130px); height: clamp(46px, 6vmin, 130px);
  border-radius: clamp(12px, 1.4vmin, 30px);
}
.wtile-ic .msym { font-size: clamp(26px, 3.6vmin, 78px); }
.wtile-tx { font-size: clamp(13px, 1.6vmin, 36px); line-height: 1.05; }

/* ============================================================
   FICHA DEL LOCAL — panel lateral izquierdo (no tapa el mapa),
   con toda la info, y botón Ruta abajo que muta a accesibilidad
   ============================================================ */
.placecard {
  left: 0; right: auto; top: 0; bottom: 0;
  width: var(--side-w); max-width: none; height: 100vh;
  border-radius: 0; z-index: 130;
  display: flex; flex-direction: column;
  transform: translateX(-18px);
}
.placecard.open { transform: none; }
.pc-head { flex: none; }
.pc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pc-actions { margin-top: auto; display: flex; gap: 12px; align-items: stretch; }

/* Botón Ruta grande al pie; muta a botón circular de accesibilidad */
.pc-route {
  position: static; flex: 1 1 auto; width: 100%;
  height: clamp(48px, 5.4vmin, 116px); border-radius: var(--r-pill);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 700; font-size: clamp(15px, 1.9vmin, 42px);
  box-shadow: 0 6px 22px rgba(23,105,224,.35); transition: background .15s, transform .12s;
}
.pc-route .msym { font-size: 1.3em; }
.pc-route:active { transform: scale(.96); }

/* ============================================================
   SELECTOR DE PISOS al costado derecho (vertical) +
   CARTEL "Usted está en ..." arriba del mapa
   ============================================================ */
.floorPicker {
  left: auto; right: clamp(16px, 1.4vw, 48px); bottom: auto;
  top: 50%; transform: translateY(-50%);
  flex-direction: column; gap: clamp(6px, .8vmin, 16px);
  padding: clamp(6px, .8vmin, 16px);
}
.floorPicker button {
  width: 100%; min-width: clamp(64px, 5vw, 132px);
  height: clamp(50px, 5.2vmin, 120px);
}
.floorPicker button b { font-size: clamp(15px, 1.6vmin, 40px); }
.floorPicker button small { font-size: clamp(8.5px, .9vmin, 22px); }

.floor-banner {
  /* Ubicado en la zona vacía de arriba-izquierda del mapa (no centrado).
     Se ancla por el BORDE IZQUIERDO (sin translateX(-50%)): centrarlo sobre un
     punto hacía que la mitad de la píldora se metiera encima del panel de
     categorías cuando el cartel crecía (p. ej. "en Planta Baja"). Así el
     recuadro siempre arranca a la derecha del panel, sin pisarlo. */
  position: fixed; z-index: 34; top: clamp(70px, 12vmin, 240px);
  left: calc(var(--side-w) + clamp(28px, 3.5vw, 120px));
  right: auto; margin: 0; transform: none;
  width: max-content; max-width: 40vw;
  display: flex; align-items: center; gap: .45em;
  padding: clamp(9px, 1.3vmin, 30px) clamp(20px, 2.4vmin, 66px);
  background: var(--accent); color: #fff; border-radius: var(--r-pill);
  box-shadow: 0 8px 30px rgba(23,105,224,.42);
  font-family: var(--font); font-weight: 600; letter-spacing: .3px;
  font-size: clamp(15px, 2.1vmin, 50px);
  pointer-events: none; text-align: center; white-space: nowrap;
}
.floor-banner b { font-weight: 800; }
.floor-banner .msym { font-size: 1.25em; font-variation-settings: "FILL" 1; }

/* ============================================================
   ANIMACIÓN TIPO ASCENSOR al cambiar de piso
   (sube si vas más arriba, baja si vas más abajo)
   ============================================================ */
@keyframes elevRise { 0% { transform: translateY(9vh); opacity: .35; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes elevFall { 0% { transform: translateY(-9vh); opacity: .35; } 100% { transform: translateY(0); opacity: 1; } }
#mapWrap.floor-up   { animation: elevRise .55s cubic-bezier(.22,.9,.25,1); }
#mapWrap.floor-down { animation: elevFall .55s cubic-bezier(.22,.9,.25,1); }

/* ============================================================
   ACCESOS — flecha a la entrada + nombre de calle (mapa oficial)
   ============================================================ */
.floorSvg .acc-line { stroke: #39414f; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.floorSvg .acc-head { fill: #39414f; }
.floorSvg .acc-txt {
  font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: .2px;
  fill: #2b3444; paint-order: stroke; stroke: #fff; stroke-width: 3.4px; stroke-linejoin: round;
  pointer-events: none; user-select: none;
}
:root[data-tema="oscuro"] .floorSvg .acc-line { stroke: #c2c9d4; }
:root[data-tema="oscuro"] .floorSvg .acc-head { fill: #c2c9d4; }
:root[data-tema="oscuro"] .floorSvg .acc-txt { fill: #eaedf2; stroke: #14161c; }

/* ============================================================
   RUBROS (zio) — recuadros CUADRADOS y más chicos, con el logo
   de línea blanca sobre fondo oscuro y el nombre debajo.
   ============================================================ */
.welcome-grid {
  grid-template-columns: repeat(2, 1fr);    /* 2 columnas iguales */
  grid-auto-rows: max-content;
  justify-content: stretch;
  column-gap: clamp(10px, 1.4vmin, 30px);
  row-gap: clamp(10px, 1.4vmin, 30px);
  overflow-y: auto;                         /* con scroll... */
  overflow-x: hidden;
  align-content: start;
  flex: 1 1 auto; min-height: 0;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                    /* ...pero SIN barra visible (Firefox) */
  -ms-overflow-style: none;                 /* (Edge/IE) */
}

/* Panel del TÓTEM: las 12 categorías en 3 columnas y TODAS a la vista.
   Las filas se reparten la altura disponible (grid-auto-rows:1fr +
   align-content:stretch), así que no hace falta scroll. Si mañana se agrega u
   oculta un rubro se arma otra fila y se reparte sola — por eso no están
   fijadas en 4. Va acotado a #welcome a propósito: el menú del celular
   (#directory) usa la misma clase y ahí el scroll SÍ hace falta. */
#welcome .welcome-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  align-content: stretch;
  column-gap: clamp(8px, 1.1vmin, 26px);
  row-gap: clamp(8px, 1.1vmin, 26px);
  overflow: hidden;
  padding: 4px 2px 10px;
}
.welcome-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* (Chrome/Safari) */
/* Las tarjetas nuevas (SVG) ya son el recuadro blanco con ícono + nombre. */
.wtile {
  aspect-ratio: 1 / 1;
  width: 100%; min-width: 0;
  background: transparent; border: none; box-shadow: none; padding: 0;
  border-radius: clamp(14px, 1.6vmin, 30px);
  display: block; cursor: pointer;
  transition: transform .12s ease;
}
.wtile:hover { transform: translateY(-2px); }
.wtile:active { transform: scale(.97); }
/* Marco uniforme del ícono: tarjeta blanca + margen interno consistente, así
   cualquier imagen (SVG de línea, foto subida, PNG con o sin fondo propio)
   queda contenida igual, en vez de estirarse borde a borde según lo que traiga. */
.wtile .wtile-ic {
  width: 100%; height: 100%; background: #fff; overflow: hidden;
  border-radius: clamp(14px, 1.6vmin, 30px);
  box-shadow: 0 3px 5px rgba(0,0,0,.10);
  container-type: inline-size; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6%;
}
/* .wtile .wtile-ic.wtile-ic-img { padding: 12%; } */
.wtile-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none; user-select: none;
}
.wtile.is-active .wtile-ic {
  outline: 3px solid var(--accent); outline-offset: -1px;
  border-radius: clamp(14px, 1.6vmin, 30px);
}
.wtile .wtile-ic .msym { color: #434343; font-size: 34cqw; line-height: 1; font-weight: 300; max-width: 100%; overflow: hidden; }
.wtile-ic-tx { color: #434343; font-weight: 600; text-align: center; line-height: 1.1; font-size: 11cqw; }
.wtile-tx { display: none; }   /* el nombre ya viene en el SVG */
/* Si el ícono SVG no carga (fallback a glyph), mostramos el nombre en texto y
   el ícono con fondo de color, para que el tile no quede vacío. */
.wtile.no-svg { justify-content: center; gap: 8px; }
.wtile.no-svg .wtile-tx { display: block; font-size: clamp(12px, 3.4cqw, 15px); font-weight: 600; color: var(--text, #2a2f3a); text-align: center; line-height: 1.15; }
.wtile.no-svg .wtile-ic { color: #fff; }
.wtile.no-svg .wtile-ic .msym { color: #fff; font-weight: 400; }

/* Encabezado más compacto → la grilla se queda con más alto → cuadrados/logos
   más grandes (sin scroll). */
/* Encabezado con MÁS AIRE (el menú scrollea, así que sobra lugar). */
.welcome { padding: clamp(14px, 1.8vmin, 48px); gap: clamp(10px, 1.3vmin, 32px); }
.welcome-inner { gap: clamp(16px, 2.2vmin, 52px); }
/* Título destacado, TODO EN UNA LÍNEA (se auto-ajusta al ancho disponible). */
.welcome-head { gap: clamp(12px, 1.5vmin, 30px); }
.welcome-tx { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
.welcome-head h1 { font-size: clamp(16px, 6.1cqw, 72px); font-weight: 800; line-height: 1.1;
  white-space: nowrap; }
.welcome-head p { display: none; }
.welcome-logo { width: clamp(52px, 5.2vmin, 128px); height: clamp(52px, 5.2vmin, 128px); }
/* Buscador MÁS GRANDE (barra alta, casi hasta los íconos). */
.welcome .topbar .searchbox { height: clamp(60px, 6.4vmin, 156px); padding: 0 14px 0 22px; }
.welcome .topbar .searchbox .ic-search { font-size: clamp(24px, 2.6vmin, 62px); }
.welcome .topbar .searchbox input { font-size: clamp(16px, 1.9vmin, 46px); }
.welcome-cats-t { font-size: clamp(14px, 1.5vmin, 38px); margin: 0; letter-spacing: .12em; }

/* === Botón 3D en la esquina (arriba-derecha) + quitar modo oscuro/claro === */
.theme-toggle { display: none !important; }
.fab3d {
  top: 16px; right: 16px; left: auto; bottom: auto;
  transform: none;
  width: clamp(48px, 4.4vmin, 96px);
  height: clamp(48px, 4.4vmin, 96px);
  padding: 0; gap: 0;
  border-radius: 50%;
  justify-content: center;
}
.fab3d:hover,
.fab3d[aria-pressed="true"]:hover { transform: translateY(-2px); }
.fab3d:active { transform: scale(.95); }
.fab3d-label { display: none; }
.fab3d-icon { font-size: clamp(24px, 2.4vmin, 52px); }
/* Modo QR (superusuario): en la esquina, donde estaba el botón 3D (que ahora
   va oculto). Antes iba corrido a la izquierda para dejarle lugar. */
#fabQr { top: 16px; left: auto; right: 16px; }

/* === Cartel "Usted está en..." a la altura del título + color === */
.floor-banner {
  top: clamp(16px, 2vmin, 52px);   /* misma altura que "Bienvenido a Galerías Pacífico" */
  background: var(--accent);             /* ← COLOR del cartel: cambiá este hex por el que quieras */
}

/* ===== CATEGORÍAS del tótem: el tile ocupa TODA su celda =====
   Sin aspect-ratio: si el alto lo manda la proporción del tile, las 4 filas no
   entran en el panel y vuelve el scroll. Ahora la celda la reparte la grilla y
   el tile la llena; el ícono se escala solo (object-fit: contain). */
#welcome .welcome-grid .wtile { aspect-ratio: auto; height: 100%; }

/* Sin resaltado/sombra al pasar por encima de una categoría (tótem táctil) */
.welcome-grid .wtile:hover { box-shadow: none; transform: none; border-color: transparent; }
/* ============================================================
   FICHA DE LOCAL — rediseño (tarjeta blanca, chip bordó, QR)
   ============================================================ */
.placecard { padding: 0 0 0; }
/* Banner superior: foto del local (gris de base hasta que carguen una) */
.pc2-banner {
  flex: none; height: clamp(120px, 17vh, 210px);
  background: #d9dbdf center/cover no-repeat;
}
.pc2-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-2, #eef0f3); color: var(--text, #22282e);
  font-size: 22px; display: grid; place-items: center;
}
.pc2-close:active { transform: scale(.94); }

.pc2-top { display: flex; align-items: center; gap: 16px; padding: 22px 24px 0; }
.pc2-logo {
  flex: none; width: 92px; height: 92px; border-radius: 14px;
  background: #fff center/contain no-repeat; border: 1px solid #e3e1dc;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; font-size: 34px; font-weight: 800; font-family: var(--font);
}
.pc2-logo img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pc2-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pc2-title {
  font-size: 27px; font-weight: 700; color: var(--text, #22282e); line-height: 1.1;
  /* Hasta dos renglones y recién ahí los puntos suspensivos: en una sola línea
     un nombre largo ("Informes / Tarjeta Galerías") se cortaba a la mitad. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.pc2-chip {
  align-self: flex-start; font-size: 13px; font-weight: 600; color: #991d39;
  border: 1.5px solid #991d39; border-radius: 8px; padding: 3px 12px;
}

.pc2-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 0; }
.pc2-hours-top { font-size: 15px; font-weight: 600; color: var(--text-2, #5b6472); white-space: nowrap; }

/* La descripción sólo aparece si el local tiene una cargada en el panel.
   overflow-wrap: corta palabras larguísimas para que el texto siempre baje
   de línea y nunca desborde la tarjeta. */
.placecard .pc-desc {
  margin: 14px 24px 0;
  overflow-wrap: anywhere; word-break: break-word; white-space: pre-line;
  max-height: 35%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.pc2-qr {
  margin: 18px 24px 0; padding: 12px 16px;
  border: 1px solid #e3e1dc; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 8px rgba(20, 28, 46, .05);
  display: flex; align-items: center; gap: 16px;
}
.pc2-qr[hidden] { display: none; }
.pc2-qr-img { width: 104px; height: 104px; flex: none; image-rendering: pixelated; }
.pc2-qr-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc2-qr-tx b { font-size: 16.5px; font-weight: 800; color: #991d39; }
.pc2-qr-tx span { font-size: 12.5px; color: var(--text-2, #5b6472); line-height: 1.35; }
.pc2-qr-tx small { font-size: 10.5px; color: var(--text-3, #8a93a3); }

.placecard .pc-grid { margin: 18px 24px 0; }
.placecard .pc-row.hours { color: var(--text-2, #5b6472); font-weight: 500; }
.placecard .pc-row.hours .ic { color: var(--text-3, #8a93a3); }

/* Botón Ruta anclado abajo del panel (la ficha es columna flex de alto completo) */
.placecard .pc-actions { margin: auto 24px 24px; padding-top: 20px; }
.placecard .pc-route {
  background: var(--accent); color: #fff; border-radius: 12px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 35%, transparent);
}
.placecard .pc-route:hover { background: var(--accent-2); }

/* ===== Cartel "Usted está en…" — pill del color del piso =====
   Mismo criterio que la pastilla encendida del selector: el cliente ve el
   cartel en el color con el que están pintados los locales que tiene alrededor
   (PB verde manzana, PP celeste, NF naranja). --niv lo pone floors.js. */
.floor-banner {
  background: var(--niv, #35564a);
  color: rgba(255,255,255,.9);          /* "Usted está" */
  border: 1.5px solid var(--niv, #35564a);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(20, 28, 46, .10);
  font-weight: 500;
}
.floor-banner .msym { color: #fff; }
.floor-banner b { color: #fff; font-weight: 700; }      /* "en Nivel Fuente" */

/* ============================================================
   MÓVIL — panel de categorías colapsable + adaptaciones táctiles
   (Va al final del archivo para ganar la cascada. NO tocar el
    bloque tótem `(orientation: portrait) and (min-height: 900px)`.)
   ============================================================ */

/* Transiciones base (inofensivas en tótem: el botón está oculto salvo en móvil) */
.welcome { transition: transform .32s cubic-bezier(.3,0,.15,1); will-change: transform; }
/* OJO: el #mapWrap NO se anima ni se redimensiona en móvil. El SVG usa
   preserveAspectRatio="none", así que cualquier cambio de tamaño del contenedor
   estira el mapa hasta el próximo fit(). En móvil el mapa ocupa todo el ancho y
   el panel se superpone (abajo), por lo que nunca cambia de tamaño → sin estiramiento. */

.panel-toggle {
  position: fixed; z-index: 140;          /* por encima de la ficha (130) */
  top: 50%; left: var(--side-w);
  transform: translate(-50%, -50%);
  width: 32px; height: 72px;              /* objetivo táctil cómodo */
  display: none; align-items: center; justify-content: center;
  border: none; border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface); color: var(--accent);
  box-shadow: 4px 0 18px rgba(20,28,46,.18); cursor: pointer;
  transition: left .32s cubic-bezier(.3,0,.15,1);
}
.panel-toggle .msym { font-size: 26px; transition: transform .3s ease; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 600px) {
  /* Limita el ancho del panel: siempre queda una franja de mapa y el
     tirador del botón queda accesible aunque esté abierto */
  :root { --side-w: min(86vw, 420px); }

  .panel-toggle { display: flex; }

  /* El mapa ocupa TODO el ancho siempre; el panel (.welcome) se superpone encima
     (z-index mayor) y se desliza para revelarlo. Así #mapWrap nunca cambia de
     tamaño → nunca se estira (ni al abrir ni al colapsar). */
  #mapWrap { left: 0; }

  /* Mecánica de colapso — SÓLO MÓVIL (sólo se mueven el panel y el tirador) */
  body.panel-collapsed .welcome        { transform: translateX(-100%); }
  body.panel-collapsed .panel-toggle   { left: 0; }
  body.panel-collapsed .panel-toggle .msym { transform: rotate(180deg); }

  /* Oculta el tirador mientras una sub-pantalla ocupa el frente
     (ya tienen sus propios botones Volver/Cerrar) */
  body:has(#catList.open) .panel-toggle,
  body:has(#placecard.open) .panel-toggle { display: none; }

  /* Lista de locales por rubro: overlay a pantalla completa */
  #catList.catlist { width: 100vw; max-width: 100vw; }

  /* Ficha del local: HOJA INFERIOR (antes panel lateral de alto completo) */
  .placecard {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%; height: auto; max-height: 85vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: transform .32s cubic-bezier(.3,0,.15,1);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .placecard.open { transform: translateY(0); }
  .placecard .pc-actions { margin-top: 16px; }  /* anula `margin:auto…` (sin hueco enorme en hoja corta) */

  /* Robustez de scroll táctil (a estos contenedores les faltaba touch-action) */
  .welcome-grid, .cl-body, .dir-scroll, .placecard {
    touch-action: pan-y; overscroll-behavior: contain;
  }

  /* Reubica controles flotantes + área segura (notch) */
  .fab3d       { top: calc(12px + env(safe-area-inset-top,0px));    right: calc(12px + env(safe-area-inset-right,0px)); }
  #fabQr       { top: calc(12px + env(safe-area-inset-top,0px)); right: calc(12px + env(safe-area-inset-right,0px)); }
  .mapTools    { right: calc(10px + env(safe-area-inset-right,0px)); bottom: calc(82px + env(safe-area-inset-bottom,0px)); }
  .floorPicker { right: calc(10px + env(safe-area-inset-right,0px)); left: auto; }
  .floor-banner{ left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); white-space: normal; text-align: center; }

  /* Padding de área segura para el chrome pegado a los bordes */
  .welcome   { padding-top: calc(clamp(14px,1.8vmin,48px) + env(safe-area-inset-top,0px));
               padding-left: calc(clamp(12px,1.6vmin,48px) + env(safe-area-inset-left,0px)); }
  .cl-head   { padding-top: calc(clamp(18px,2.2vmin,52px) + env(safe-area-inset-top,0px)); }
  .cl-body   { padding-bottom: calc(40px + env(safe-area-inset-bottom,0px)); }

  /* Objetivos táctiles más grandes */
  .welcome-grid .wtile { min-height: 92px; }
  .pc2-close   { width: 44px; height: 44px; }
}

/* ============================================================
   SELECTOR DE PISOS — un recuadro exterior blanco con borde verde;
   el piso ACTIVO es un bloque verde relleno; los inactivos, solo texto.
   ============================================================ */
.floorPicker {
  background: #fff; border: 1.6px solid #35564a; border-radius: 26px;
  box-shadow: 0 6px 22px rgba(20,28,46,.10);
  padding: clamp(8px, .9vmin, 20px); gap: clamp(4px, .6vmin, 12px);
}
.floorPicker button {
  background: transparent; border: none; color: var(--text-2);
  border-radius: 18px;
  transition: background .16s, color .16s, transform .12s;
}
.floorPicker button small { color: var(--text-3); }
.floorPicker button:hover { background: #f2f5f4; }
.floorPicker button:active { transform: scale(.96); }
/* La pastilla encendida toma el color del nivel (--niv lo pone floors.js desde
   D.niveles): PB verde manzana, PP celeste, NF naranja — el mismo con el que se
   pintan los locales de ese piso. Sin nivel cargado cae al verde de marca. */
.floorPicker button.is-active {
  background: var(--niv, #35564a); color: #fff;
  box-shadow: 0 6px 18px rgba(53,86,74,.30);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--niv, #35564a) 34%, transparent);
}
.floorPicker button.is-active small { color: rgba(255,255,255,.85); }

/* ============================================================
   BOTONES DEL MAPA (3D, QR y herramientas) en verde de marca
   ============================================================ */
.fab3d, #fabQr {
  background: #35564a; color: #fff;
  box-shadow: 0 4px 20px rgba(53,86,74,.34), 0 1px 4px rgba(53,86,74,.22);
}
.fab3d:hover, #fabQr:hover {
  background: #2a453b;
  box-shadow: 0 6px 28px rgba(53,86,74,.5), 0 2px 8px rgba(53,86,74,.3);
}
.fab3d[aria-pressed="true"] {
  background: #e7efec; color: #35564a;
  box-shadow: 0 3px 14px rgba(53,86,74,.2);
}
.fab3d[aria-pressed="true"]:hover { background: #d8e6e0; }
/* Herramientas del mapa: blancas con hover verde suave. El «encuadrar» iba
   relleno en verde, pero su ícono nuevo (la brújula) ya es verde y sobre ese
   fondo desaparecía. */
.tool-single { background: var(--surface); color: #35564a; }
.tool-single:hover { background: #f2f5f4; color: #35564a; }
.zoomGroup button:hover { color: #35564a; background: #f2f5f4; }

/* ============================================================
   LAYOUT CELULAR (vertical): header + fila (menú · usted está · 3D) +
   mapa + selector de pisos horizontal abajo. Basado en el diseño pedido.
   ============================================================ */
.mobile-header { display: none; }
@media (max-width: 768px) {
  /* --- Header con logo + bienvenida --- */
  .mobile-header {
    display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 95;
    align-items: center; justify-content: center; gap: 10px;
    height: calc(58px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: #f6f7f8; border-bottom: 1px solid var(--border);
  }
  .mobile-header .mh-logo { height: 36px; width: auto; }
  .mobile-header .mh-tx { font-size: 15px; color: var(--text-2); }
  .mobile-header .mh-tx b { color: var(--text); font-weight: 700; }

  /* --- Fila de controles: menú (izq) · usted está (centro) · 3D (der) --- */
  :root { --m-top: calc(58px + env(safe-area-inset-top, 0px)); }   /* alto del header */

  /* Hamburguesa (abre el panel .welcome con búsqueda + categorías) */
  .panel-toggle {
    display: flex !important; position: fixed; top: calc(var(--m-top) + 8px);
    left: 10px; right: auto; transform: none; width: 46px; height: 46px;
    border: 1.6px solid #35564a; border-radius: 12px; background: var(--surface);
    color: #35564a; box-shadow: 0 2px 8px rgba(20,28,46,.08); z-index: 96;
  }
  body.panel-collapsed .panel-toggle { left: 10px; transform: none; }
  body:has(#placecard.open) .panel-toggle { display: flex !important; }
  .panel-toggle .msym { transform: none !important; font-size: 24px; }

  /* La hamburguesa abre el DIRECTORIO (no el panel #welcome). Ocultamos #welcome
     en el celular; el menú es el #directory a pantalla completa. */
  #welcome { display: none; }

  /* Directorio a pantalla completa, debajo del header (categorías → locales) */
  .directory {
    width: 100%; max-width: 100%; top: var(--m-top); bottom: 0; z-index: 92;
    box-shadow: none; border-top: 1px solid var(--border);
  }
  .directory .quick-cats { display: none; }   /* la grilla de tiles ya está arriba */
  .directory .welcome-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 16px 16px;
  }
  .directory .welcome-cats-t { padding: 8px 18px 4px; }
  /* al abrir el directorio/lista, la hamburguesa se esconde (su header manda) */
  body:has(#directory.open) .panel-toggle { display: none !important; }

  /* Lista de locales de una categoría: pantalla completa, por encima del directorio */
  #catList.catlist { top: var(--m-top); z-index: 110; }
  /* El header móvil siempre por encima de los paneles */
  .mobile-header { z-index: 120; }

  .floor-banner {
    position: fixed; top: calc(var(--m-top) + 8px); left: 64px; right: 64px;
    transform: none; margin: 0; max-width: none; width: auto;
    display: flex; align-items: center; justify-content: center; text-align: center;
    height: 46px;
  }

  /* El cartel del conector va DEBAJO del header + la barra (menú · usted está ·
     3D), que ocupan hasta --m-top + 54px. Con top:16px quedaba tapado por ellos
     y se veía cortado. */
  .route-hint,
  .route-hint.rh-arriba { top: calc(var(--m-top) + 66px); bottom: auto; transform: translateY(-8px); }
  .route-hint.rh-abajo  { top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateY(8px); }
  .route-hint { left: 10px; right: 10px; max-width: none; width: auto; padding: 13px 18px; }
  .route-hint .rh-ic { font-size: 30px; }
  .route-hint .rh-tx b { font-size: 17px; }
  .route-hint .rh-tx small { font-size: 13px; }
  .route-hint.rh-arriba.show,
  .route-hint.rh-abajo.show { transform: translateY(0); }

  .fab3d {
    position: fixed; top: calc(var(--m-top) + 8px); left: auto; right: 10px;
    transform: none; height: 46px; width: 46px; padding: 0; justify-content: center;
  }
  .fab3d:hover { transform: none; }
  .fab3d .fab3d-label { display: none; }
  #fabQr { right: 64px; left: auto; }   /* al lado del 3D si es superusuario */

  /* --- Mapa: entre la fila y el selector de pisos --- */
  #mapWrap {
    top: calc(var(--m-top) + 62px); bottom: 92px; left: 0; right: 0;
  }

  /* --- Selector de pisos: horizontal, abajo y centrado --- */
  .floorPicker {
    position: fixed; top: auto; left: 50%; right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    flex-direction: row; gap: 6px; padding: 6px;
    border-radius: 20px;
  }
  .floorPicker button {
    width: auto; min-width: 66px; height: auto; padding: 8px 16px; border-radius: 14px;
  }
  .floorPicker button b { font-size: 16px; }
  .floorPicker button small { font-size: 9px; }

  /* --- Zoom: arriba del selector, a la derecha --- */
  .mapTools {
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   MENÚ CELULAR = FIGMA: fila (← volver · buscador · filtro) +
   tarjetas de categoría blancas con borde, ícono de línea y nombre abajo.
   ============================================================ */
.dir-search-host, .dir-filter { display: none; }   /* solo se usan en el celular */

@media (max-width: 768px) {
  /* --- Fila superior del menú --- */
  .directory .dir-head { gap: 10px; padding: 14px 14px 8px; align-items: center; }
  .directory .dir-home { display: none; }
  /* La X pasa a ser la flecha «volver», a la izquierda */
  .directory .dir-head .close {
    order: -1; background: transparent; font-size: 0; width: 40px; height: 40px; flex: none;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
  }
  .directory .dir-head .close::before {
    content: "arrow_back"; font-family: "Material Symbols Rounded";
    font-size: 26px; color: #35564a; line-height: 1;
  }
  .dir-search-host { display: block; flex: 1; min-width: 0; }
  .dir-filter {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border: none; background: transparent;
    color: #35564a; font-size: 24px; cursor: pointer; overflow: hidden;
  }
  /* Buscador (movido acá por JS): pastilla blanca con borde fino */
  .dir-search-host .searchbox {
    position: relative; display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 12px; background: #fff;
    border: 1px solid #cfd6d3; border-radius: 999px; box-shadow: none; width: 100%;
  }
  .dir-search-host .searchbox .brand { display: none; }
  .dir-search-host .searchbox input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 14px; }
  .dir-search-host .searchbox .ic-search { font-size: 20px; color: #5b6472; }
  .dir-search-host .suggest { left: 0; right: 0; top: calc(100% + 6px); }

  /* --- Tarjetas de categoría (Figma): blancas, borde fino, ícono + nombre --- */
  .directory .welcome-cats-t {
    padding: 10px 18px 6px; font-size: 17px; font-weight: 700; letter-spacing: 0;
    text-transform: none; color: #223229;
  }
  .directory .welcome-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 4px 16px 20px; }
  .directory .welcome-grid .wtile {
    aspect-ratio: 1 / 1; min-height: 0; height: auto;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 12px;
    box-shadow: none; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; padding: 10px 8px;
  }
  /* Ícono: se recorta el SVG del rubro para mostrar SOLO el dibujo (el nombre
     del SVG queda afuera del marco) — mismo crop que usa la lista de locales. */
  /* Sin recuadro: además del fondo hay que apagar la SOMBRA, que es lo que
     dibujaba el cuadrado blanco alrededor del ícono. */
  .directory .welcome-grid .wtile .wtile-ic {
    background: transparent !important; color: inherit;
    box-shadow: none !important; border-radius: 0;
  }
  .directory .welcome-grid .wtile .wtile-ic.wtile-ic-img {
    width: 62px; height: 62px; overflow: hidden; position: relative; border-radius: 0;
  }
  .directory .welcome-grid .wtile .wtile-ic-img .wtile-img {
    position: absolute; width: 171%; height: auto; max-width: none;
    left: -35.6%; top: -16.7%;
  }
  /* Nombre SIEMPRE visible abajo (en el tótem viene dentro del SVG; acá no) */
  .directory .welcome-grid .wtile .wtile-tx {
    display: block; font-size: 13px; font-weight: 500; color: #3a4148;
    text-align: center; line-height: 1.15;
  }
  /* Fallback sin SVG: glyph gris de línea (no bloque de color) */
  .directory .welcome-grid .wtile.no-svg .wtile-ic { width: 62px; height: 62px; }
  .directory .welcome-grid .wtile.no-svg .wtile-ic .msym { color: #434343; font-size: 40px; font-weight: 300; }

  /* --- SIN el diseño viejo abajo: se ocultan el título "Directorio", los
     chips y el listado de locales. Los chips sólo aparecen arriba (bajo el
     buscador) al tocar el botón de filtro. --- */
  .directory .dir-scroll { display: flex; flex-direction: column; }
  .directory .dir-section-t, .directory .dir-list { display: none; }
  .directory .dir-filters { display: none; order: -1; padding: 4px 16px 10px; }
  body.dir-filters-open .directory .dir-filters { display: flex; }
  .dir-filter.on { color: #fff; background: #35564a; border-radius: 10px; }
}

/* ============================================================
   AJUSTE FINO CELULAR = FIGMA (ubicación y tamaños)
   Header: logo arriba y texto DEBAJO, centrados. Fila: hamburguesa ·
   cartel de una línea · botón 3D con borde (recuadro blanco). Sin
   botones flotantes de zoom/encuadre. Pisos compactos abajo.
   ============================================================ */
@media (max-width: 768px) {
  /* --- Header apilado y centrado --- */
  :root { --m-top: calc(92px + env(safe-area-inset-top, 0px)); }
  .mobile-header {
    flex-direction: column; gap: 5px; height: var(--m-top);
    padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px;
    justify-content: center;
  }
  .mobile-header .mh-logo { height: 46px; }
  .mobile-header .mh-tx { font-size: 13px; }

  /* --- Cartel "Usted está en…": UNA línea, compacto --- */
  .floor-banner {
    height: 46px; font-size: 14px; padding: 0 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 12px;
  }
  .floor-banner .msym { font-size: 18px; }

  /* --- Botón 3D: recuadro blanco con borde verde (como la hamburguesa) --- */
  .fab3d {
    background: #fff; color: #35564a; border: 1.6px solid #35564a;
    border-radius: 12px; box-shadow: 0 2px 8px rgba(20,28,46,.08);
  }
  .fab3d:hover { background: #f2f5f4; box-shadow: 0 2px 8px rgba(20,28,46,.08); }
  .fab3d[aria-pressed="true"] { background: #35564a; color: #fff; }
  .fab3d .fab3d-icon { font-size: 22px; }

  /* --- Sin botones flotantes de zoom/encuadre (no están en el diseño) --- */
  .mapTools { display: none; }

  /* --- Selector de pisos compacto (como el mockup) --- */
  .floorPicker { border-radius: 16px; padding: 7px; gap: 7px; }
  .floorPicker button { border-radius: 11px; min-width: 62px; padding: 7px 14px; }
  .floorPicker button b { font-size: 15px; }
  .floorPicker button small { font-size: 8.5px; }
}

/* ============================================================
   FICHA DEL LOCAL EN EL CELULAR = FIGMA
   Hoja inferior: [ícono del rubro + nombre del rubro] · título + chip ·
   estado/horario · descripción · info en UNA línea · botón Ruta a lo ancho.
   Sin banner de foto. En el tótem no cambia nada.
   ============================================================ */
.pc2-logo-wrap { display: contents; }        /* tótem: como si no existiera */
.pc2-logo-lbl { display: none; }

@media (max-width: 768px) {
  .placecard {
    border-radius: 18px 18px 0 0;
    padding: 16px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 34px rgba(20, 28, 46, .22);
  }
  .placecard .pc2-banner { display: none; }          /* sin foto en el celu */
  .placecard .pc2-close {
    top: 12px; right: 12px; width: 36px; height: 36px;
    background: transparent; color: #3a4148; box-shadow: none;
  }
  /* Ícono del rubro con su nombre debajo */
  .placecard .pc2-logo-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 76px; flex: none;
  }
  .placecard .pc2-logo { width: 64px; height: 64px; border: 1px solid #e3e6ea; border-radius: 12px; }
  .placecard .pc2-logo-lbl { display: block; font-size: 10.5px; color: #6b7280; text-align: center; line-height: 1.1; }
  .placecard .pc2-top { display: flex; align-items: center; gap: 14px; margin: 0 36px 0 0; padding: 0; }
  .placecard .pc2-title { font-size: 22px; }
  .placecard .pc2-statusrow { margin: 12px 0 0; padding: 0; }
  .placecard .pc-desc { margin: 10px 0 0; padding: 0; font-size: 12.5px; line-height: 1.45; }
  /* Info en UNA línea: piso · horario · rubro */
  .placecard .pc-grid {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 8px 16px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #eef0f3;
  }
  .placecard .pc-grid .pc-row { font-size: 11.5px; gap: 5px; padding: 0; }
  .placecard .pc-grid .ic { font-size: 16px; }
  .placecard .pc-actions { margin: 14px 0 0; padding: 0; }
}

/* ============================================================
   DOCK ABAJO-DERECHA (pantalla grande / tótem)
   El selector de pisos deja de estar centrado a media altura y baja a la
   esquina, con la fila de herramientas (centrar + zoom) a su izquierda,
   apoyada en la misma línea de base. En celular no cambia nada: el selector
   sigue a media altura para no chocar con la ficha que sube desde abajo.
   ============================================================ */
.tool-ic { width: 46%; height: 46%; object-fit: contain; pointer-events: none; }

@media (min-width: 769px) and (min-height: 601px) {
  :root {
    --dock-x: clamp(16px, 1.4vw, 48px);    /* separación del borde derecho */
    --dock-y: clamp(18px, 2.2vmin, 48px);  /* separación del borde inferior */
    --fp-w:   clamp(64px, 5vw, 132px);     /* ancho del botón de piso */
    --fp-pad: clamp(8px, .9vmin, 20px);    /* padding del recuadro de pisos */
    --dock-gap: clamp(10px, 1vmin, 22px);
  }
  .floorPicker { top: auto; transform: none; right: var(--dock-x); bottom: var(--dock-y); padding: var(--fp-pad); }
  .floorPicker button { min-width: var(--fp-w); }
  /* Se corre a la izquierda EXACTAMENTE el ancho del recuadro de pisos
     (botón + padding + los 1.6px de borde de cada lado) más el gap. */
  .mapTools {
    flex-direction: row; align-items: flex-end; gap: var(--dock-gap);
    bottom: var(--dock-y);
    right: calc(var(--dock-x) + var(--fp-w) + 2 * var(--fp-pad) + 3.2px + var(--dock-gap));
  }
  /* Zoom: tres botones redondos sueltos en fila, no una pastilla partida. */
  .zoomGroup { flex-direction: row; gap: var(--dock-gap); background: transparent; box-shadow: none; overflow: visible; }
  .zoomGroup button, .tool-single { border-radius: 50%; border: 1px solid var(--border); box-shadow: var(--shadow); }
  .zoomGroup button + button { border-top: 1px solid var(--border); }
}

/* ============================================================
   AYUDA DE GESTOS (arriba-der del mapa)
   Botón redondo en el verde de marca + globito con los dos
   gestos. Comparte rincón con el botón de tema, que en el tótem
   está oculto; donde sí se ve, el de tema corre un lugar.
   ============================================================ */
.gestos { position: fixed; top: 16px; right: 16px; z-index: 36; }
.theme-toggle { right: calc(16px + var(--ctrl) + 12px); }

.gestos-btn {
  width: var(--ctrl); height: var(--ctrl);
  border: none; border-radius: 50%;
  background: var(--marca); color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ctrl-font);
}
.gestos-btn:hover,
.gestos-btn[aria-expanded="true"] { background: var(--marca-2); }

/* Arranca cerrado: sale sólo cuando tocás el botón. El `display:flex` de acá
   abajo le gana al `[hidden] { display:none }` del navegador, así que hay que
   apagarlo a mano — si no, el globito queda siempre a la vista. */
.gestos-pop[hidden] { display: none; }
.gestos-pop {
  position: absolute; top: calc(var(--ctrl) + 12px); right: 0;
  width: max-content; max-width: min(320px, 70vw);
  background: var(--surface);
  border: 1px solid var(--marca-weak-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Pico apuntando al botón */
.gestos-pop::before {
  content: ""; position: absolute; top: -7px; right: calc(var(--ctrl) / 2 - 6px);
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--surface);
  border-left: 1px solid var(--marca-weak-2);
  border-top: 1px solid var(--marca-weak-2);
}
.gestos-tit { font-size: 14px; color: var(--marca); font-weight: 700; }
/* Los renglones reusan .h3d-item de la ayuda 3D, pero en verde de marca. */
.gestos-pop .h3d-icon-circle {
  background: var(--marca-weak);
  border-color: var(--marca-weak-2);
  color: var(--marca);
}

/* Tótem: todo más grande, como el resto de los controles. */
@media (orientation: portrait) and (min-height: 900px) {
  .gestos-tit { font-size: clamp(14px, 1.5vmin, 34px); }
  .gestos-pop { padding: clamp(16px, 1.6vmin, 38px) clamp(18px, 1.8vmin, 42px);
                gap: clamp(14px, 1.4vmin, 32px); max-width: min(560px, 60vw); }
  .gestos-pop .h3d-icon-circle { width: clamp(36px, 3.4vmin, 84px); height: clamp(36px, 3.4vmin, 84px); }
  .gestos-pop .h3d-icon-circle .msym { font-size: clamp(18px, 1.8vmin, 44px); }
  .gestos-pop .h3d-text b { font-size: clamp(13px, 1.4vmin, 32px); }
  .gestos-pop .h3d-text span { font-size: clamp(11.5px, 1.2vmin, 28px); }
}