/* ============================================================
   Vías Verdes Murcia v7 — R4: Dock unificado abajo-derecha
   ------------------------------------------------------------
   Un único dock (columna) abajo-derecha que agrupa:
     · grupo "Más" (Fotos 360 / Cine / Info) — oculto hasta pulsar
     · Capas y filtros (trigger del LayersControl, montado en el dock)
     · Clima (#weatherFloatBtn)
     · Transporte (#transportMapBtn)
     · botón "Más" (sparkles, toggle)
   Desktop = píldoras con etiqueta (.dock-btn / .vvb-dock-btn).
   Móvil    = círculos de 50px icon-only (.vvb-dock-btn--circle).
   Glass solo en el dock (chrome sobre el mapa). Tokens --vvb-*.
   ============================================================ */

#toolsDock {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(40px, env(safe-area-inset-bottom));
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--vvb-font, 'Manrope', system-ui, sans-serif);
  pointer-events: none; /* los hijos reactivan eventos; el hueco entre botones no captura */
}
#toolsDock > * { pointer-events: auto; }

/* El control de capas se monta dentro del dock; ya no es fixed top-center. */
#toolsDock #layersStripMount { display: contents; }
#toolsDock .lc-root {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
}

/* (R8: el dock unificado retiró los botones del dock — .dock-btn / grupo "Más".
   El dock monta solo #layersStripMount; el chrome usa .trc-btn y .bl-btn más abajo.) */

/* ============================================================
   Re-anclaje del panel de Capas: abre desde el dock hacia
   ARRIBA-IZQUIERDA, secciones en vertical con scroll.
   (El markup/API del panel NO cambia — solo posición.)
   ============================================================ */

#toolsDock .lc-panel {
  position: fixed;
  top: auto;
  left: auto;
  right: 14px;
  bottom: 100px;            /* por encima del dock */
  transform: none;
  width: 380px;
  max-width: calc(100vw - 28px);
  max-height: min(72vh, calc(100vh - 130px));
  overflow: hidden;
  transform-origin: bottom right;
  animation: dockPanelIn .26s cubic-bezier(.22, 1, .36, 1);
}

@keyframes dockPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* El backdrop del LayersControl solo es relevante en móvil (bottom-sheet). */
#toolsDock .lc-backdrop { z-index: 44; }

/* ---------- Móvil: círculos 50px + bottom-sheet ---------- */
@media (max-width: 768px) {
  #toolsDock {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(var(--sheet-handle-top, 140px) + 12px);
    gap: 8px;
  }

  /* El panel de capas usa su bottom-sheet propio (definido en layers.css). */
  #toolsDock .lc-panel {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 82%;
    max-height: 82%;
    border-radius: 22px 22px 0 0;
    transform-origin: bottom center;
  }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #toolsDock .lc-panel { animation: none; }
}

/* ============================================================
   R7 — Reorganización del chrome
   · Arriba-derecha: Clima + Estilo de mapa (bajo el zoom)
   · Abajo-izquierda: Filtros + Vista general + Mi ubicación
   ============================================================ */

/* ---------- Arriba-derecha ---------- */
#topRightControls {
  position: fixed; top: max(110px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 35;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-family: var(--vvb-font, 'Manrope', system-ui, sans-serif);
  pointer-events: none;
}
#topRightControls > * { pointer-events: auto; }

.trc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px; border-radius: var(--vvb-pill, 999px);
  cursor: pointer; border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 6px 18px rgba(26,74,24,0.2);
  font-weight: 700; font-size: 13px; color: var(--vvb-ink, #1c2418); white-space: nowrap;
  transition: background .18s ease, transform .12s ease;
}
.trc-btn:hover { background: #fff; transform: translateY(-1px); }
.trc-btn:active { transform: scale(.97); }
.trc-btn:focus-visible { outline: 2px solid var(--vvb-green, #4A8C3F); outline-offset: 2px; }
.trc-ic { font-size: 19px; line-height: 1; }
.trc-btn .vv-float-temp { font-weight: 800; }
[data-theme="dark"] .trc-btn { background: rgba(20,32,29,0.86); border-color: rgba(141,186,138,0.25); color: #e8efe6; }

/* ---------- Abajo-izquierda ---------- */
#bottomLeftMenu {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(40px, env(safe-area-inset-bottom)); z-index: 36;
  font-family: var(--vvb-font, 'Manrope', system-ui, sans-serif);
}
.bl-row {
  display: inline-flex; gap: 4px; padding: 6px;
  border-radius: var(--vvb-pill, 999px);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 6px 18px rgba(26,74,24,0.2);
}
.bl-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px; border-radius: var(--vvb-pill, 999px);
  border: none; background: transparent; cursor: pointer;
  font-weight: 700; font-size: 12.5px; color: var(--vvb-ink, #1c2418); white-space: nowrap;
  transition: background .15s ease;
}
.bl-btn:hover { background: rgba(74,140,63,0.12); }
.bl-btn:active { transform: scale(.97); }
.bl-btn:focus-visible { outline: 2px solid var(--vvb-green, #4A8C3F); outline-offset: 2px; }
.bl-ic { display: inline-flex; align-items: center; color: var(--vvb-green, #4A8C3F); }
[data-theme="dark"] .bl-row { background: rgba(20,32,29,0.86); border-color: rgba(141,186,138,0.25); }
[data-theme="dark"] .bl-btn { color: #e8efe6; }

/* No solapar con el drawer (hamburguesa): ocultar el menú mientras está abierto */
body.drawer-open #bottomLeftMenu { display: none; }

/* ---------- Móvil ---------- */
@media (max-width: 768px) {
  #topRightControls { top: 96px; right: max(10px, env(safe-area-inset-right)); gap: 6px; }
  .trc-btn { height: 42px; width: 42px; padding: 0; justify-content: center; }
  .trc-btn .vv-float-temp { display: none; }

  #bottomLeftMenu { left: max(10px, env(safe-area-inset-left)); bottom: calc(var(--sheet-handle-top, 140px) + 12px); }
  .bl-btn .bl-label { display: none; }
  .bl-btn { padding: 0; width: 38px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .trc-btn, .bl-btn { transition: none; }
  .trc-btn:hover { transform: none; }
}

/* ---------- v8 (F4): botones flotantes 3D + Satélite (estilo merenderos) ----------
   Viven dentro de #toolsDock (abajo-derecha), encima del control "Capas y filtros".
   Estado .active = relleno verde de marca (3D ON / Satélite ON). */
#mapModeControls { display: flex; flex-direction: row; gap: 8px; margin-bottom: 8px; pointer-events: auto; }
.mm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--glass-chrome, rgba(255, 255, 255, 0.94));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line, #E1E6DC); color: var(--text-primary, #1C2418);
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 40, 15, 0.12);
  transition: background var(--dur-fast, 0.15s) ease, transform var(--dur-fast, 0.15s) ease, color var(--dur-fast, 0.15s) ease;
}
.mm-btn .mm-ic { display: inline-flex; }
.mm-btn:hover { transform: translateY(-1px); }
.mm-btn:active { transform: scale(.97); }
.mm-btn:focus-visible { outline: 2px solid var(--vvb-green, #4A8C3F); outline-offset: 2px; }
.mm-btn.active {
  background: var(--color-brand, #4A8C3F); color: #fff; border-color: var(--color-brand, #4A8C3F);
  box-shadow: 0 6px 18px rgba(74, 140, 63, 0.4);
}
[data-theme="dark"] .mm-btn { background: rgba(20, 32, 29, 0.86); border-color: rgba(141, 186, 138, 0.25); color: #e8efe6; }
@media (max-width: 1024px) {
  .mm-btn .mm-label { display: none; }
  .mm-btn { padding: 0; width: 40px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-btn { transition: none; }
  .mm-btn:hover { transform: none; }
}