/* Maquetación: mapa a pantalla completa, barras, vistas, bottom sheet; al final, adaptación a escritorio (≥ 900 px). */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; user-select: none; -webkit-user-select: none; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
i[data-icon] { display: inline-grid; place-items: center; line-height: 0; }

#app { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: calc(var(--nav-h) + var(--safe-b) + 2px); }
/* flechas en el borde hacia operativos fuera de pantalla (map.js) */
.edge-arrows { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
body[data-mode="placing"] .edge-arrows, body[data-mode="form"] .edge-arrows { display: none; }
.edge-arrow { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; padding: 0; border-radius: 10px; display: grid; place-items: center;
  pointer-events: auto; border: 2px solid #fff; background: #ff2020; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.edge-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.edge-arrow b { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #b91c1c; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.glass { background: var(--surface); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border); box-shadow: var(--shadow); }

/* barra superior */
#topbar { position: absolute; z-index: 10; top: calc(var(--safe-t) + 12px); left: 12px; right: 12px; display: flex; gap: 8px; }
#topbar .title { flex: 1; height: 48px; border-radius: 24px; padding: 0 18px; display: flex; align-items: center; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .icon-btn { border: 1px solid var(--border); }
.icon-btn { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; border: 0; background: none; flex: none; }
#offline { position: absolute; z-index: 10; top: calc(var(--safe-t) + 70px); left: 12px; right: 12px; padding: 8px 14px; border-radius: 14px; font-size: 14px; color: var(--danger); text-align: center; }

/* navbar */
#navbar { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
.nav-btn { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--muted); min-height: 44px; }
.nav-btn[aria-current="true"] { color: var(--accent); }
.nav-btn:active { transform: scale(.94); }
/* colocando el punto: la barra queda difuminada por detrás de los botones; el "+" (ahora X para cancelar) sigue nítido */
#navbar > .nav-btn, .nav-ind { transition: filter .3s, opacity .3s, transform .35s cubic-bezier(.3,1.3,.5,1); }
body[data-mode="placing"] #navbar { z-index: 11; }
body[data-mode="placing"] #navbar > .nav-btn, body[data-mode="placing"] .nav-ind { filter: blur(4px); opacity: .35; pointer-events: none; }
.nav-fab { display: grid; place-items: start center; }
.fab { width: 64px; height: 64px; margin-top: -22px; border-radius: 50%; border: 4px solid var(--bg); background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .2s cubic-bezier(.3,.7,.4,1); }
.fab:active { transform: scale(.94); }
/* pastilla que se desliza bajo la pestaña activa (5 columnas iguales: mapa, lista, +, ubicarme, info) */
.nav-ind { position: absolute; z-index: -1; left: 0; top: 0; width: 20%; height: var(--nav-h); pointer-events: none; transition: transform .35s cubic-bezier(.3,1.3,.5,1); }
.nav-ind::before { content: ""; position: absolute; inset: 6px 10px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
#navbar:has([data-view="list"][aria-current="true"]) .nav-ind { transform: translateX(100%); }
#navbar:has([data-view="info"][aria-current="true"]) .nav-ind { transform: translateX(400%); }
.fab svg { transition: transform .25s; }
body:not([data-mode="idle"]) .fab svg { transform: rotate(45deg); }
body:not([data-mode="idle"]) .fab { background: var(--danger); }

/* vistas */
.view { position: absolute; inset: 0; z-index: 15; background: var(--bg); overflow: hidden auto; overscroll-behavior: contain;
  padding: calc(var(--safe-t) + 20px) 16px calc(var(--nav-h) + var(--safe-b) + 24px); }
.view, #place { opacity: 0; visibility: hidden; filter: blur(10px); transition: opacity .3s ease, filter .3s ease, transform .3s ease, visibility 0s .3s; }
.view { transform: scale(.98); pointer-events: none; }
.view.open, #place.show { opacity: 1; visibility: visible; filter: none; transition-delay: 0s; }
.view.open { transform: none; pointer-events: auto; }
#offline[hidden] { display: none; }
.view h1 { font-size: 24px; margin-bottom: 12px; }
.view h2 { font-size: 16px; margin: 20px 0 6px; }
.view p, .view li { color: var(--text); }
.view ul.plain { padding-left: 20px; display: grid; gap: 4px; }
.muted { color: var(--muted); font-size: 13px; margin-top: 16px; }
.view .lead { color: var(--muted); line-height: 1.5; }
.faq { display: grid; gap: 8px; }
.faq details { border-radius: 14px; background: var(--field); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) { padding: 0 14px 12px; }
.faq ul.plain { padding-left: 34px; }
.notice { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--field); }

/* modo colocar */
#place { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
/* mira (mismo dibujo que MIRA en map.js) centrada en el punto; crece un poco al arrastrar */
#place .pin { position: absolute; left: 50%; top: 50%; line-height: 0; transform: translate(-50%, -50%); transition: transform .15s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
#place.dragging .pin { transform: translate(-50%, -50%) scale(1.15); }
#place .actions { position: absolute; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-b) + 18px); display: flex; gap: 8px; pointer-events: auto; }
#place .actions .btn-primary { flex: 1; }

/* bottom sheet */
#sheet { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; background: var(--surface-solid);
  padding: 0 16px calc(var(--safe-b) + 16px); transform: translateY(110%); opacity: 0; visibility: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease, visibility 0s .3s; }
#sheet.open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
#sheet.dragging { transition: none; }
#sheet-handle { position: sticky; top: 0; height: 28px; display: grid; place-items: center; touch-action: none; cursor: grab; background: var(--surface-solid); margin: 0 -16px; }
#sheet-handle span { width: 36px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .5; }
#sheet-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; z-index: 1; color: var(--muted); }

#toasts { position: absolute; z-index: 40; left: 12px; right: 12px; top: calc(var(--safe-t) + 12px); display: grid; gap: 8px; justify-items: center; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (hover: hover) {
  .nav-btn:hover { color: var(--accent); }
  .fab:hover { transform: translateY(-3px); }
  .fab:hover:active { transform: translateY(-3px) scale(.94); }
}

/* escritorio: barra flotante abajo, paneles laterales en vez de pantalla completa */
@media (min-width: 900px) {
  :root { --panel-w: 400px; }
  #topbar { right: auto; width: var(--panel-w); }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: 0; }
  #navbar { left: 50%; right: auto; width: 460px; transform: translateX(-50%); bottom: 20px; height: var(--nav-h); padding-bottom: 0; border-radius: 32px; border-bottom: 1px solid var(--border); }
  .view { inset: 72px auto 96px 12px; width: var(--panel-w); border-radius: var(--radius); padding: 20px 20px 24px; border: 1px solid var(--border); box-shadow: var(--shadow); }
  #sheet { left: 12px; right: auto; bottom: 96px; width: var(--panel-w); max-height: calc(100dvh - 120px); border-radius: var(--radius); border: 1px solid var(--border); }
  #sheet-handle { display: none; }
  #sheet { padding-top: 16px; }
  #sheet-close { top: 8px; }
  #place .actions { left: 50%; right: auto; width: 440px; transform: translateX(-50%); bottom: 96px; }
  #toasts { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
}

/* botón de tema: redondo, crece al hover, se hunde al click; el ícono gira al cambiar (theme.js) */
#btn-theme { border-radius: 50%; transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s; }
#btn-theme svg { transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
@media (hover: hover) { #btn-theme:hover { transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
  #btn-theme:hover svg { transform: rotate(-20deg); } }
#btn-theme:active { transform: scale(.88); transition-duration: .08s; }

/* transición de tema: capa con el color del tema anterior que se desvanece */
.theme-fx { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }