/* Sólo la página del recorrido aprovecha un lienzo amplio en escritorio. */
.pagina:has(.paseo-app) { max-width:1280px; }
.paseo-tabs { display:flex; gap:4px; padding:4px; width:min(100%,520px); }
.paseo-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.paseo-heading h1 { font-family:var(--font-display); font-size:calc(clamp(24px,3vw,36px) * var(--escala-letra,1)); line-height:1.25; font-weight:500; margin:8px 0 0; }
.paseo-heading p { max-width:340px; margin:0; font-size:calc(16px * var(--escala-letra,1)); line-height:1.6; }
.paseo-app { border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-raised); }
.paseo-toolbar { display:flex; justify-content:space-between; gap:16px; padding:12px 16px; border-radius:0; }
.paseo-destino { display:flex; flex-direction:column; gap:3px; font-size:calc(12px * var(--escala-letra,1)); font-weight:700; color:var(--text-muted); min-width:0; }
.paseo-destino select { font:inherit; font-size:calc(16px * var(--escala-letra,1)); min-height:56px; color:var(--text); background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 32px 8px 12px; max-width:100%; }
/* stretch y no end: los tres botones miden lo mismo pase lo que pase con su texto. Alineados
   abajo, el que se partía en dos renglones sobresalía por arriba y el grupo quedaba disparejo. */
.paseo-tools { display:flex; gap:8px; align-items:stretch; }
.paseo-tools button,.paseo-map-toggle { min-height:56px; padding:10px 15px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font:inherit; font-size:calc(14px * var(--escala-letra,1)); font-weight:700; background:var(--bg-raised); color:var(--text); cursor:pointer; }
.paseo-tools button[aria-pressed=true] { background:var(--accent); color:var(--text-on-accent); }
.paseo-viewport { position:relative; height:clamp(480px,65vh,760px); background:var(--bg-brand); overflow:hidden; isolation:isolate; }
.paseo-viewport>[data-escena] { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.paseo-viewport>[data-escena]:active { cursor:grabbing; }
.paseo-viewport>[data-escena]:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-4px; }
.paseo-location { position:absolute; top:20px; left:20px; padding:9px 14px; display:flex; align-items:center; gap:9px; background:var(--bg-brand-strong); color:var(--text-on-brand); font-size:calc(14px * var(--escala-letra,1)); font-weight:700; border:1px solid var(--border-brand); border-radius:var(--radius-pill); pointer-events:none; }
.paseo-live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.paseo-minimap { position:absolute; top:20px; right:20px; width:166px; padding:12px; background:var(--bg-brand-strong); color:var(--text-on-brand); border:1px solid var(--border-brand); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); }
.paseo-minimap .eyebrow { font-size:calc(10px * var(--escala-letra,1)); display:flex; justify-content:space-between; }
.paseo-minimap canvas { width:100%; height:auto; display:block; margin-top:8px; }
.paseo-map-caption { font-size:calc(10px * var(--escala-letra,1)); line-height:1.4; display:block; margin-top:8px; color:var(--text-on-brand-muted); }
.paseo-map-toggle { display:none; position:absolute; top:14px; right:14px; }
.paseo-crosshair { position:absolute; top:50%; left:50%; width:5px; height:5px; border:1px solid var(--text-on-brand); border-radius:50%; background:var(--bg-brand); pointer-events:none; }
.paseo-controls { position:absolute; bottom:22px; left:22px; right:22px; display:flex; align-items:end; justify-content:space-between; pointer-events:none; }
.paseo-pad { display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,56px); gap:3px; pointer-events:auto; }
.paseo-pad button,.paseo-look button { width:56px; height:56px; border:1px solid var(--border-brand); background:var(--bg-brand-strong); color:var(--text-on-brand); border-radius:var(--radius-sm); font:inherit; font-size:28px; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none; box-shadow:var(--shadow-card); }
.paseo-pad button:active,.paseo-look button:active,.paseo-controls button.is-held { background:var(--accent); color:var(--text-on-accent); }
.pad-up { grid-area:1/2; }.pad-left { grid-area:2/1; }.pad-right { grid-area:2/3; }.pad-down { grid-area:3/2; }.pad-center { grid-area:2/2; display:grid; place-items:center; background:var(--bg-brand-strong); color:var(--text-on-brand); border-radius:50%; }
/* Correr es un estado elegido, y en v2 lo elegido se marca en bronce (`accent`). El pad es verde de
   marca en los dos temas; sobre él el bronce da 4.2:1 en claro y más en oscuro, de sobra para un
   aro (los indicadores piden 3:1). El amarillo suelto de antes salía de un token que v2 ya no tiene. */
.paseo-pad .pad-center { --paseo-running:var(--accent); border:3px solid transparent; border-radius:50%; padding:3px; align-content:center; gap:0; }
.pad-center>span { display:flex; align-items:center; justify-content:center; }
.paseo-pad .pad-center[aria-pressed=true] { border-color:var(--paseo-running); color:var(--paseo-running); background:var(--bg-brand-strong); box-shadow:0 0 8px color-mix(in srgb,var(--paseo-running) 45%,transparent); }
.pad-center .pad-velocidad { font-size:calc(10px * var(--escala-letra,1)); line-height:1; font-weight:800; }
.paseo-look { display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:auto; background:var(--overlay); padding:10px; border-radius:var(--radius-sm); color:var(--text-on-brand); }
.paseo-look>div { display:flex; gap:8px; }.paseo-look>span { font-size:calc(12px * var(--escala-letra,1)); line-height:1.2; }
.paseo-loading { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:28px; text-align:center; background:var(--bg-brand-strong); color:var(--text-on-brand); z-index:5; }
.paseo-loading strong { font-family:var(--font-display); font-size:calc(26px * var(--escala-letra,1)); line-height:1.4; }
/* Barra sin porcentaje: dice que se está trabajando, no cuánto falta, que nadie lo sabe. */
.paseo-loading-barra { width:min(260px,72%); height:6px; border-radius:var(--radius-pill); overflow:hidden; background:color-mix(in srgb, var(--text-on-brand) 20%, transparent); }
.paseo-loading-barra span { display:block; width:40%; height:100%; border-radius:inherit; background:var(--accent); animation:paseo-avanza 1.5s ease-in-out infinite; }
@keyframes paseo-avanza { from { transform:translateX(-110%); } to { transform:translateX(260%); } }
@media(prefers-reduced-motion:reduce) { .paseo-loading-barra span { width:100%; animation:none; } }
.paseo-footer { border-radius:0; display:flex; align-items:center; gap:12px; padding:14px 20px; min-height:88px; }
.paseo-footer>div { flex:1; min-width:0; }.paseo-footer strong { display:block; line-height:1.4; font-size:calc(18px * var(--escala-letra,1)); }
.paseo-footer .eyebrow { font-size:calc(10px * var(--escala-letra,1)); }
.paseo-footer .btn { font-size:calc(14px * var(--escala-letra,1)); }
.paseo-help { padding:12px 16px; }.paseo-help summary { cursor:pointer; min-height:56px; display:flex; align-items:center; font-size:calc(16px * var(--escala-letra,1)); font-weight:700; }
.paseo-help summary::before { content:'+'; margin-right:12px; color:var(--accent); }.paseo-help[open] summary::before { content:'−'; }
.paseo-help p,.paseo-nota { font-size:calc(14px * var(--escala-letra,1)); line-height:1.65; }.paseo-nota { margin:0; }
.paseo-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.paseo-app [hidden] { display:none!important; }
.paseo-app button:disabled { cursor:wait; opacity:.5; }
.paseo-app button:focus-visible,.paseo-app select:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
body:has(.paseo-expanded) { overflow:hidden; }
.pagina:has(.paseo-expanded) { z-index:20; }
.paseo-expanded { position:fixed; inset:0; z-index:20; border:0; border-radius:0; display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.paseo-expanded .paseo-viewport { flex:1; height:auto; min-height:0; }.paseo-expanded .paseo-toolbar,.paseo-expanded .paseo-footer { flex-shrink:0; }
@media(max-width:700px) {
 .paseo-heading { display:block; }.paseo-heading p { margin-top:8px; max-width:none; }
 .paseo-toolbar { flex-direction:column; gap:8px; padding:10px; }.paseo-destino { gap:2px; }.paseo-tools { gap:6px; }.paseo-tools button { flex:1; padding:8px; font-size:calc(13px * var(--escala-letra,1)); }
 .paseo-viewport { height:62svh; min-height:440px; }.paseo-location { top:14px; left:12px; max-width:calc(100% - 116px); font-size:calc(12px * var(--escala-letra,1)); line-height:1.4; padding:8px 10px; }
 .paseo-map-toggle { display:block; padding:8px; font-size:calc(12px * var(--escala-letra,1)); }
 .paseo-minimap { display:none; top:78px; right:14px; width:130px; padding:8px; }.paseo-minimap.is-visible { display:block; }.paseo-map-caption { display:none; }
 .paseo-controls { left:10px; right:10px; bottom:16px; }.paseo-look { padding:7px; }.paseo-look>span { font-size:calc(10px * var(--escala-letra,1)); }.paseo-look>div { gap:5px; }
 .paseo-footer { padding:12px; flex-wrap:wrap; gap:8px; }.paseo-footer>div { flex-basis:100%; }.paseo-footer .btn { flex:1; padding:8px; }
 .paseo-expanded .paseo-footer { display:none; }.paseo-expanded .paseo-viewport { min-height:200px; }
}
@media(max-width:360px) { .paseo-controls { left:5px; right:5px; }.paseo-pad { gap:0; }.paseo-look { padding:3px; } }
@media(max-height:550px) and (orientation:landscape) {
 .paseo-expanded .paseo-toolbar { flex-direction:row; align-items:center; padding:4px 10px; }.paseo-expanded .paseo-destino { flex-direction:row; align-items:center; }.paseo-expanded .paseo-footer { display:none; }.paseo-expanded .paseo-minimap { display:none; }
}

.paseo-llegada { position:absolute; top:88px; left:20px; max-width:calc(100% - 220px); display:flex; flex-direction:column; gap:4px; padding:12px 16px; border-left:3px solid var(--accent); border-radius:var(--radius-sm); background:var(--bg-brand-strong); color:var(--text-on-brand); pointer-events:none; box-shadow:var(--shadow-card); }
.paseo-llegada strong { font-size:calc(17px * var(--escala-letra,1)); line-height:1.4; }
.paseo-llegada span { font-size:calc(13px * var(--escala-letra,1)); line-height:1.4; color:var(--text-on-brand-muted); }
@media(max-width:700px) { .paseo-llegada { left:12px; top:84px; max-width:calc(100% - 24px); right:12px; } .paseo-minimap { z-index:1; } }

.paseo-orbita { position:absolute; left:20px; bottom:20px; max-width:calc(100% - 40px); padding:10px; background:var(--overlay); color:var(--text-on-brand); border-radius:var(--radius-sm); }
.paseo-orbita-titulo,.paseo-orbita-ayuda { display:block; text-align:center; font-size:calc(12px * var(--escala-letra,1)); line-height:1.4; }
.paseo-orbita-titulo { margin-bottom:6px; }.paseo-orbita-ayuda { margin-top:6px; font-size:calc(11px * var(--escala-letra,1)); }
.paseo-ayuda-tactil { display:none; }
.paseo-orbita-botones { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.paseo-orbita-direcciones { margin-bottom:6px; }
.paseo-orbita button { min-width:56px; min-height:56px; border:1px solid var(--border-brand); border-radius:var(--radius-sm); background:var(--bg-brand); color:var(--text-on-brand); cursor:pointer; font:inherit; font-size:calc(24px * var(--escala-letra,1)); touch-action:manipulation; }
.paseo-orbita .paseo-orbita-mas { padding:0 8px; font-size:calc(12px * var(--escala-letra,1)); }
.paseo-orbita-mas[aria-expanded=true] { background:var(--accent); color:var(--text-on-accent); }
.paseo-orbita output { min-width:44px; text-align:center; font-size:calc(12px * var(--escala-letra,1)); }
.paseo-orbita button:disabled { cursor:default; }
@media(max-width:700px) { .paseo-orbita { left:50%; transform:translateX(-50%); bottom:12px; width:max-content; max-width:calc(100% - 16px); padding:8px; }.paseo-orbita-botones { gap:4px; }.paseo-ayuda-tactil { display:inline; }.paseo-ayuda-raton { display:none; } }
@media(pointer:coarse) { .paseo-ayuda-tactil { display:inline; }.paseo-ayuda-raton { display:none; } }
@media(max-height:550px) and (orientation:landscape) { .paseo-orbita { bottom:8px; padding:6px; }.paseo-orbita-titulo,.paseo-orbita-ayuda { display:none; } }

.paseo-local-dialog { width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:24px; overflow:auto; background:var(--bg-raised); color:var(--text); border:1px solid var(--border-brand); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
.paseo-local-dialog::backdrop { background:var(--overlay); backdrop-filter:blur(4px); }
.paseo-local-dialog h2 { margin:8px 0 12px; font-family:var(--font-display); font-size:calc(24px * var(--escala-letra,1)); line-height:1.35; }
.paseo-local-dialog p { margin:0 0 24px; font-size:calc(18px * var(--escala-letra,1)); line-height:1.6; }
.paseo-local-acciones { display:flex; flex-wrap:wrap; gap:12px; }.paseo-local-acciones .btn { flex:1; }