/* Página de mapa — usa tokens.css + site.css del sitio (piel Cinematic Dark Rally) */

/* La nav del sitio es fixed y solo se vuelve sólida con scroll; en el mapa no
   hay scroll, así que la forzamos sólida y dejamos hueco superior para ella. */
.map-body .nav {
  background: rgba(6, 8, 12, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.map-page {
  height: 100dvh;
  box-sizing: border-box;
  padding-top: 100px; /* alto real de la nav fija (logo 72px + padding) */
  display: flex;
  flex-direction: column;
  background: var(--bg, #07090d);
  color: var(--fg, #f2f5f9);
}
@media (max-width: 820px) { .map-page { padding-top: 76px; } }
.map-stage { position: relative; flex: 1 1 auto; }
#map { position: absolute; inset: 0; background: #0a0d12; }

/* El control de zoom de OpenLayers cae arriba-izquierda por defecto, justo donde
   empieza la barra (selector de capas) → se solapaban. Lo llevamos a la esquina
   inferior derecha (estilo Google Maps), libre de la barra y del readout. */
.map-stage .ol-zoom { top: auto; bottom: 44px; left: auto; right: 12px; background: transparent; padding: 0; }
.map-stage .ol-zoom button {
  background: rgba(10, 14, 20, .85); color: #e7edf4;
  border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px);
  width: 34px; height: 34px; font-size: 1.1rem; margin: 2px 0;
}
.map-stage .ol-zoom button:hover { background: rgba(255, 122, 26, .9); color: #0a0d12; }

.map-topbar {
  position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.map-topbar > * { pointer-events: auto; }
.map-spacer { flex: 1 1 auto; }

.map-layer-switch {
  display: inline-flex; background: rgba(10, 14, 20, .82);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  overflow: hidden; backdrop-filter: blur(10px);
}
.map-layer-switch button {
  border: 0; background: transparent; color: #aeb8c4;
  font: 700 .82rem var(--font-display, system-ui); padding: 8px 14px; cursor: pointer;
}
.map-layer-switch button[aria-pressed="true"] { background: var(--orange, #ff7a1a); color: #0a0d12; }

.map-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px; line-height: 0; }
.map-icon-btn svg { width: 18px; height: 18px; display: block; }
.map-icon-btn.is-loading { opacity: .6; pointer-events: none; }
.map-icon-btn.is-loading svg { animation: map-spin 1s linear infinite; }
@keyframes map-spin { to { transform: rotate(360deg); } }

.map-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.map-btn { border: 0; border-radius: 999px; padding: 9px 16px; font: 700 .85rem var(--font-display, system-ui); cursor: pointer; background: var(--orange, #ff7a1a); color: #0a0d12; }
.map-btn:disabled { opacity: .5; cursor: not-allowed; }
.map-btn-ghost { background: rgba(10, 14, 20, .82); color: #e7edf4; border: 1px solid rgba(255, 255, 255, .14); }
.map-freedraw { display: inline-flex; align-items: center; gap: 6px; color: #cfd8e2; font-size: .8rem; background: rgba(10, 14, 20, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 7px 12px; }
.map-readout { position: absolute; z-index: 5; left: 12px; bottom: 16px; display: inline-flex; gap: 14px; background: rgba(10, 14, 20, .85); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 10px 14px; backdrop-filter: blur(10px); }
.map-readout b { color: var(--orange, #ff7a1a); font-family: var(--font-display, system-ui); }
.map-login { display: inline-flex; align-items: center; gap: 8px; }

.map-mytracks { position: absolute; z-index: 6; top: 70px; right: 12px; width: min(320px, 84vw); max-height: calc(100dvh - 200px); overflow: auto; background: rgba(10, 14, 20, .9); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 12px; backdrop-filter: blur(12px); }
.map-mytracks header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.map-mytracks header b { font-family: var(--font-display, system-ui); text-transform: uppercase; letter-spacing: .03em; }
.map-mt-stats { color: #aeb8c4; font-size: .78rem; }
.map-mt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map-mt-list li { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; cursor: pointer; }
.map-mt-list li:hover { border-color: var(--orange, #ff7a1a); }
.map-mt-list b { display: block; font-family: var(--font-display, system-ui); }
.map-mt-list span { color: #aeb8c4; font-size: .78rem; }
.map-mt-empty { color: #aeb8c4; font-size: .85rem; margin: 4px 0 0; }
@media (max-width: 820px) { .map-mytracks { top: auto; bottom: 96px; left: 12px; right: 12px; width: auto; max-height: 38dvh; } }

.map-toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); opacity: 0; transition: .25s; background: rgba(10, 14, 20, .95); color: #f2f5f9; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px 16px; pointer-events: none; }
.map-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 820px) { .map-topbar { flex-wrap: wrap; } .map-actions { order: 3; width: 100%; justify-content: flex-start; } }

/* Móvil: la nav del mapa lleva login + idioma + descargar además del logo, y no
   cabe el wordmark → se encogía el .brand y "OXXRoad" se desbordaba bajo el
   login. En esta página-herramienta dejamos solo el mark (la X) en móvil. */
@media (max-width: 820px) {
  .map-body .brand { flex: 0 0 auto; }
  .map-body .brand .brand-name { display: none; }
}