/* mando.css (25-oct-2026, renglón 20 «el mismo mando en todos lados») — el dock de 9 ranuras del Mundo NTL.
Se carga DESPUÉS de hoja.css y ANTES de ux-familiar.css (la capa de UX sigue ganando el orden de ).
La API y los enganches por página viven en mando.js (cabecera).
POR QUÉ (Manuel, 25-oct 15:20): «estandarizar a que siempre esté el menú igual en base, plaza y mapa, para cambiar
a 3D o 2D, zoom, y cambiar rápido entre plaza, base y mapa; si no se puede usar en algún lado el botón, que salga
inhábil pero que salga, para que la gente se acostumbre a que está en un lugar todo».
La forma es la de una tab bar nativa de iPhone (HIG · Tab bars: icono de 24 pt con etiqueta de 10 pt debajo, fondo
claro con hairline arriba, el activo en el acento), NO la de un videojuego: nada de madera, bordes gruesos ni sombras
duras. Es una barra inferior fija de borde a borde EN TODOS LOS TAMAÑOS (Manuel, 25-oct 18:20: «estandarizar entre
compu, iPad y Mac los botones, para que siempre se entienda»): en teléfono la hoja asoma ENCIMA (a --mando-alto de
altura); en escritorio el panel lateral y el chip de la hora también suben esa medida. Lo que el dock repite se
retira: el «Dónde estoy» de la barra de arriba, el zoom de MapLibre y el botón flotante «Contar una aventura».
Las ranuras son SIEMPRE las mismas nueve, en el mismo orden y del mismo tamaño en todas las pantallas:
[Mapa][Plaza][Base] | [2D/3D] | [−][+] | [Dónde estoy] | [Cielo] | [＋Contar]
Una ranura que no aplica en esa pantalla se ve igual pero inhábil (opacidad .38, aria-disabled, razón en el title);
al tocarla, mando.js enseña la razón en una línea de la hoja. */
:root{ --mando-alto:0px; } /* mando.js la mide de verdad (ResizeObserver) en teléfono; en escritorio queda en 0 */
.mando-ntl,.mando-ntl *{box-sizing:border-box}
.mando-ntl{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:0;
padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));
background:var(--ux-card,#fbf6ea);border-top:1px solid var(--ux-sep,rgba(74,46,20,.16));
font-family:var(--ux-font,-apple-system,system-ui,sans-serif);user-select:none;-webkit-user-select:none;
touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mando-ntl .mn-sep{flex:0 0 1px;background:var(--ux-sep,rgba(74,46,20,.16));margin:12px 1px}
.mn-r{flex:1 1 0;min-width:0;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding-top:4px;
appearance:none;border:0;background:transparent;padding:0;margin:0;border-radius:10px;cursor:pointer;text-decoration:none;
color:var(--ux-fg2,#6b5739);font:500 10px/1.1 var(--ux-font,-apple-system,system-ui,sans-serif);letter-spacing:.01em;
touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;transition:opacity .15s,color .15s}
.mn-r svg{width:24px;height:24px;flex:0 0 auto;pointer-events:none}
/* la etiqueta cabe en dos renglones («Dónde estoy»); el icono queda a la misma altura en las nueve ranuras */
.mn-r .mn-t{max-width:100%;overflow:hidden;text-align:center;line-height:1.05;pointer-events:none;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
/* el activo (la pantalla en la que estás, la vista actual, el cielo abierto): el acento, como una tab bar */
.mn-r[aria-current],.mn-r[aria-pressed="true"],.mn-r.mn-activo{color:var(--ux-acento,#8a4b1f)}
.mn-r[aria-current] svg{filter:drop-shadow(0 0 0 transparent)}
/* presionado como en iOS: se atenúa, no se hunde */
.mn-r:active:not([aria-disabled="true"]){opacity:.6}
/* inhábil: SE VE (para que la gente aprenda dónde está todo) pero no hace nada; mando.js explica el porqué al tocarlo */
.mn-r[aria-disabled="true"]{opacity:.38;cursor:default}
.mn-r[aria-disabled="true"]:active{opacity:.38}
/* «Contar» es la acción principal: relleno de acento como el «+» de Instagram/Strava, sin dejar de ser una ranura */
.mn-r.mn-contar svg{width:26px;height:26px;padding:3px;border-radius:8px;background:var(--ux-acento,#8a4b1f);color:var(--ux-acento-fg,#fff7e6)}
.mn-r.mn-contar[aria-disabled="true"] svg{background:var(--ux-fg2,#6b5739)}
.mn-r:focus-visible{outline:2px solid var(--ux-acento,#8a4b1f);outline-offset:-2px}
/* mientras se mantiene presionada la pestaña activa (abre el radial de la hoja): un aro que se dibuja */
.mn-r.mn-presionado{color:var(--ux-acento,#8a4b1f)}
.mn-r.mn-presionado svg{animation:mn-carga .38s linear both}
@keyframes mn-carga{from{transform:scale(1)}to{transform:scale(1.18)}}
/* ---------- lo que vivía pegado al borde de abajo se sube a --mando-alto (solo con dock, solo teléfono) ---------- */
@media (max-width:899px){
/* el botón de pausar/seguir de la aventura y la cinta ya siguen --hoja-h, que hoja.js engorda con --mando-alto */
body.con-mando .maplibregl-ctrl-bottom-left,body.con-mando .maplibregl-ctrl-bottom-right{bottom:calc(var(--hoja-h,0px) + 2px)}
body.con-mando .maplibregl-ctrl-bottom-left{left:8px}
/* la aventura (/a/): «Saltar» y la narración suben; su hoja propia vive adoptada en la hoja única */
body.con-mando #saltar{bottom:calc(var(--mando-alto,0px) + 14px + env(safe-area-inset-bottom,0px))}
body.con-mando.ver #narra{bottom:calc(var(--mando-alto,0px) + 76px + env(safe-area-inset-bottom,0px))}
body.con-mando.ver #toast{bottom:calc(var(--mando-alto,0px) + 84px + env(safe-area-inset-bottom,0px))}
/* la expedición tiene hoja propia (no la única): se le quita el dock de debajo */
body.con-mando.expedicion #hoja{bottom:var(--mando-alto,0px);padding-bottom:0;max-height:calc(56vh - var(--mando-alto,0px))}
body.con-mando.expedicion #hoja.alto{max-height:calc(var(--vvh,100vh) - 52px - env(safe-area-inset-top,0px) - var(--mando-alto,0px))}
body.con-mando.expedicion #toast{bottom:calc(var(--mando-alto,0px) + 84px + env(safe-area-inset-bottom,0px))}
/* el reloj del mapa es HUD arriba a la izquierda (renglón 14): no se mueve. El joystick de la plaza/base sube */
/* Manuel (25-oct 18:10): «en el móvil se tapa el joystick en la plaza» → el joystick va encima de la HOJA asomada
(--hoja-h ya incluye el dock), y mientras la hoja está a media o completa se aparta (estás en el menú, no caminando) */
body.con-mando #stickBase,body.con-mando #ap-stick{bottom:calc(var(--hoja-h,var(--mando-alto,0px)) + 14px)!important;transition:bottom .25s,opacity .2s}
body.con-mando:has(.hoja-ntl[data-estado="media"]) #stickBase,body.con-mando:has(.hoja-ntl[data-estado="completa"]) #stickBase,
body.con-mando:has(.hoja-ntl[data-estado="media"]) #ap-stick,body.con-mando:has(.hoja-ntl[data-estado="completa"]) #ap-stick{opacity:0!important;pointer-events:none!important}
body.con-mando #ayuda{bottom:calc(var(--mando-alto,0px) + var(--hoja-h,0px) + 12px)}
}
/* ---------- escritorio e iPad: LA MISMA barra inferior; las ranuras centradas y del mismo tamaño ---------- */
@media (min-width:900px){
.mando-ntl{justify-content:center;padding:4px 8px}
.mn-r{flex:0 0 72px;width:72px;height:52px}
.mando-ntl .mn-sep{margin:10px 4px}
/* lo que el dock repite se retira en todas las pantallas */
body.con-mando #bt-contar.flota{display:none}
/* lo que vivía pegado al borde de abajo sube el alto de la barra */
body.con-mando .hoja-ntl{bottom:calc(var(--mando-alto,0px) + 12px)}
/* con contenido base el panel cuelga del tope y crece con su contenido (bottom:auto, como en hoja.css); la regla de
arriba le ponía también bottom y lo estiraba hasta el dock aunque sólo tuviera un aviso (la base: «¿Tienes mascota?»
abría un panel vacío de 580 px) */
body.con-mando .hoja-ntl.hn-con-base{bottom:auto;max-height:calc(100% - var(--hn-desk-top,76px) - var(--mando-alto,0px) - 14px)}
body.con-mando #hora-lugar{bottom:calc(var(--mando-alto,0px) + 16px)}
body.con-mando .maplibregl-ctrl-bottom-left,body.con-mando .maplibregl-ctrl-bottom-right{bottom:var(--mando-alto,0px)}
body.con-mando #ayuda{bottom:calc(var(--mando-alto,0px) + 12px)}
body.con-mando #banner{bottom:calc(var(--mando-alto,0px) + 64px)} /* 26-oct: el letrero «Estás de visita…» se encimaba a la ayuda y al dock */
body.con-mando .toast,body.con-mando #toast{bottom:calc(var(--mando-alto,0px) + 24px)}
body.con-mando #ubic-aviso{bottom:calc(var(--mando-alto,0px) + 16px)!important}
/* a pie (Manuel, 25-oct 23:43: «las instrucciones tapan el botón de abajo»): Montar sobre el dock, la ayuda sobre Montar,
y el toast sobre la ayuda; el botón de pantalla completa del mapa también sube */
body.con-mando #ap-info{bottom:calc(var(--mando-alto,0px) + 14px)}
body.con-mando #ap-abordar{bottom:calc(var(--mando-alto,0px) + 62px)} /* 26-oct: «Montar» se encimaba al chip de info */
body.con-mando #ap-ayuda{bottom:calc(var(--mando-alto,0px) + 118px)}
body.con-mando.apie .toast{bottom:calc(var(--mando-alto,0px) + 124px)!important}
body.con-mando #pc-btn.mapa{bottom:calc(var(--mando-alto,0px) + 12px)}
/* lo que el dock repite arriba en la plaza y la base se retira (Manuel: «que abajo sea solamente»): el 2D/3D de la
plaza (#vista), y en la base «Vista: puerta/cerca/lejos» (#modo; sigue en la hoja) y «Mirar al cielo» (#bCielo, que el
dock pulsa oculto). Se quedan: Volver al mapa, sonido, pantalla completa, invitar, mascota, canasta. */
body.con-mando #vista,body.con-mando #modo,body.con-mando #bCielo{display:none!important}
}
/* el «Dónde estoy» de la barra de arriba del mapa y el zoom de MapLibre sobran en todos los tamaños: están en el dock
(Manuel, 25-oct 18:35: «en lugar del botón de arriba, que abajo sea solamente») */
body.con-mando #mi-ubic{display:none}
/* mirando al cielo en la plaza o la base la capa de la mirada (z 60) cubría el dock: el dock queda ENCIMA para que «Volver»
siempre responda (Manuel, 25-oct 23:47: «el botón volver al frente no sirve bien») */
body.mirando-cielo .mando-ntl,body.cielo-mirando .mando-ntl,body:has(.cielo-mirador[data-abierto]) .mando-ntl{z-index:70}
/* y en la base el visor aparte (cielo-mirar.js, z 60) también quedaba sobre el dock: el dock encima, con su «Volver» */
/* y el muñeco de arriba («a pie») también: la ranura [2D/3D] del dock cicla Plano → Perspectiva → A pie (Manuel, 25-oct 22:50) */
body.con-mando #btn-apie{display:none}
body.con-mando .maplibregl-ctrl-group{display:none}
@media (prefers-reduced-motion:reduce){.mn-r,.mn-r svg{transition:none!important;animation:none!important}}