/* Switch de idioma ES/EN de la landing.
   ============================================================================
   Fuente: BOLETERA LEGACY · boletera-front-main/src/components/PreferencesControls.css
   (commits df4b0b2, ffa4327 y 10e728d). Las reglas .preference-switch* se copian
   TAL CUAL, sin tocar una sola: mismo tamaño (área 72×44, cara 72×28), mismo
   pulgar, mismos colores oscuros, mismo foco y mismo movimiento reducido.

   Lo que NO viene de Legacy, y por qué:
   - Las variables --color-orange, --font-mono y --control-radius no existen en
     PDLM; se declaran solo dentro de .pdlm-idioma con los valores de Legacy
     (src/index.css:6,13,17). Space Mono NO se carga (sería una petición a
     Google Fonts): la pila cae a ui-monospace en Safari y a monospace en el
     resto. Decisión pendiente de Lú si quiere el glifo exacto.
   - Sin tema claro, sin bandera y sin switch de tema (fuera de alcance).
   - Ubicación (decisión de Lú, 21-oct): fijo arriba a la derecha, siempre
     visible al hacer scroll, en escritorio, tableta y móvil. La landing no
     tiene <header> ni menú: la «cabecera» es una cápsula fija con fondo de la
     noche de BVG (#100b32) para que se lea sobre cualquier sección.
     z-index 21: por encima de la nieve (#snow, z20) y de las pestañas del
     planificador (.tabs, z5); por debajo del skip-link (.pdlm-skip, z10000).
     Los <dialog> modales de BVG van en la capa superior y lo tapan.
   - Neutralizadores, no cambios al CSS de Legacy: Legacy depende del
     box-sizing:border-box del preflight de Tailwind, y el CSS global de BVG
     baja 1px todo botón al pulsarlo (button:active{translate:0 1px}).
   - scroll-margin-top en los anclajes que BVG desplaza con scrollIntoView,
     para que la cápsula fija no tape el encabezado del mapa ni su botón.
   - Hasta 413px se baja el bloque del héroe para no pisar el logo, y desde
     761px se apartan del borde derecho el botón «Descargar mapa» y las
     pestañas «Explorar / Mi noche».
============================================================================ */
.pdlm-idioma{--color-orange:#ff5a1f;--font-mono:"Space Mono",ui-monospace,monospace;--control-radius:8px;
  position:fixed;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:21;
  margin:0;padding:0 4px;border-radius:12px;background:rgba(16,11,50,.78);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 6px 18px rgba(5,2,20,.45)}
.pdlm-idioma[hidden]{display:none!important}
.pdlm-idioma,.pdlm-idioma *{box-sizing:border-box}
.pdlm-idioma .preference-switch:active{translate:none}
.pdlm-idioma .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#mapa,#boletos,#experiencias,#preguntas,#contenido{scroll-margin-top:68px}
@media(max-width:767px){.pdlm-idioma{top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right));padding:0 2px;border-radius:10px}}
/* Escritorio y tableta: el botón «Descargar mapa» vive arriba a la derecha del
   encabezado del mapa; se aparta para que la cápsula no lo tape al pasar. */
/* Las pestañas «Explorar / Mi noche» (sticky dentro del panel) pueden quedar
   bajo la cápsula al hacer scroll: se les deja libre el borde derecho. */
@media(min-width:761px){#mapa.top{padding-right:120px}.sidebar>.tabs{padding-right:100px}.sidebar>.tabs button{white-space:nowrap;padding-left:8px;padding-right:8px}}
/* Hasta 413px el logo centrado de BVG llega al borde derecho: se le reserva
   hueco bajando el bloque del héroe para que la cápsula nunca lo pise. */
@media(max-width:413px){#hero .pdm-hero-copy{padding-top:calc(58px + env(safe-area-inset-top))}}

/* —— Legacy, PreferencesControls.css:1-10 y 17-39, literal —— */
.preferences-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.preference-switch {
  --switch-track-top: #101010; --switch-track-bottom: #303030;
  --switch-thumb-top: #505050; --switch-thumb-bottom: #2c2c2c;
  --switch-edge: #555; --switch-shine: rgba(255,255,255,.18); --switch-shadow: rgba(0,0,0,.55);
  --switch-accent: var(--color-orange); --switch-accent-border: rgba(255,90,31,.45); --switch-muted: #b1aba0;
  appearance: none; display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 72px; height: 44px; padding: 0; border: 0; border-radius: var(--control-radius);
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.preference-switch__track {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  width: 72px; height: 28px; border: 1px solid var(--switch-edge); border-radius: var(--control-radius);
  background: linear-gradient(180deg,var(--switch-track-top),var(--switch-track-bottom));
  box-shadow: inset 0 1px 3px var(--switch-shadow),0 1px 0 var(--switch-shine);
}
.preference-switch__thumb {
  position: absolute; left: 2px; top: 2px; width: calc(50% - 2px); height: 22px;
  border: 1px solid var(--switch-accent-border); border-radius: 5px;
  background: linear-gradient(180deg,var(--switch-thumb-top),var(--switch-thumb-bottom));
  box-shadow: inset 0 1px 0 var(--switch-shine),0 1px 3px var(--switch-shadow); transition: transform 160ms ease;
}
.preference-switch[aria-checked="true"] .preference-switch__thumb { transform: translateX(100%); }
.preference-switch__option {
  position: relative; display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--switch-muted); font: 600 10px/1 var(--font-mono); letter-spacing: .025em;
}
.preference-switch__option[data-selected="true"] { color: var(--switch-accent); }
.preference-switch:hover .preference-switch__track { border-color: var(--switch-accent-border); }
.preference-switch:active .preference-switch__thumb { box-shadow: inset 0 1px 3px var(--switch-shadow); }
.preference-switch:focus-visible { outline: 2px solid var(--switch-accent); outline-offset: 1px; }
.preference-switch svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .preference-switch__thumb { transition: none; } }
