/* ==========================================================================
   IRON ROUTE — EL MAPA GIRADO, Y EL VEHÍCULO SIEMPRE DERECHO

   La regla que manda aquí, dicha por el dueño: «el camión siempre tiene que
   estar derecho; el mapa es el que coge la orientación de la brújula». Todo
   lo de este archivo sale de esa frase.

   POR QUÉ EL CONTENEDOR ES MÁS GRANDE QUE LA PANTALLA. Al girar un rectángulo
   sobre su centro, las esquinas se salen y aparecen huecos sin baldosas — el
   defecto que se ve en todos los mapas rotados mal hechos. Con el lado igual a
   la DIAGONAL de la pantalla no hay ángulo en el que asome nada. Los píxeles
   de más no cuestan: son las mismas baldosas que Leaflet ya iba a pedir.

   POR QUÉ EL VEHÍCULO NO ES UN MARCADOR. Un marcador dentro de un mapa rotado
   hay que contragirarlo en cada cuadro, y cualquier desfase entre las dos
   rotaciones se ve como un temblor. Fuera del mapa, fijo en la pantalla, está
   derecho por construcción y no hay nada que sincronizar.

   Y EL EMOJI, FUERA. `js/navigation.js` pintaba `🚛` a 32 px. Un emoji lo
   dibuja cada sistema a su manera —en Android es un camión de juguete de seis
   colores— así que el aspecto del producto dependía del teléfono. Con sol de
   frente, a 32 px, eso no se lee. Aquí hay una silueta con dos tonos y un
   contorno blanco: se distingue de un vistazo sobre mapa claro y oscuro.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1 · EL MAPA QUE GIRA
   ══════════════════════════════════════════════════════════════════════════ */
html.ir-mapa-rumbo #map {
  position: fixed;
  /* El tamaño y la posición los pone `js/navegacion-rumbo.js`: dependen de la
     diagonal de ESTA pantalla, y eso no se puede escribir en una hoja. */
  transition: transform 350ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* Nada de transición al arrancar y al parar: el primer giro sería una vuelta
   desde el norte, y el último, otra de vuelta. */
html.ir-mapa-rumbo #map.ir-sin-transicion { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html.ir-mapa-rumbo #map { transition: none; }
}

/* La atribución vive DENTRO del contenedor de Leaflet y giraba con él: medido
   a rumbo 38°, salía inclinada y anclada a 463 px FUERA de la pantalla por la
   izquierda. La licencia de OSM exige que sea legible, y torcida y medio fuera
   no lo es.

   Contragirarla no bastaba —se enderezaba el texto pero seguía anclada a una
   esquina fuera de la ventana— y `position: fixed` tampoco, porque un ancestro
   con `transform` se convierte en su bloque contenedor. `js/navegacion-rumbo.js`
   la SACA del elemento que gira y la devuelve al salir; esto solo la coloca
   mientras está fuera. */
.leaflet-control-container.ir-controles-fuera {
  position: fixed;
  inset: 0;
  z-index: 610;
  pointer-events: none;
}
.leaflet-control-container.ir-controles-fuera > * { pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   2 · EL VEHÍCULO — fijo, derecho, y en el sitio donde se mira
   ══════════════════════════════════════════════════════════════════════════ */
.ir-puck {
  position: fixed;
  left: 50%;
  /* 68 % y no 50 %: lo que hace falta mirar es lo que VIENE. Con el vehículo
     en el centro, media pantalla se gasta en carretera ya pasada. Es la misma
     proporción que usan Google Maps y Waze en navegación. */
  top: 68%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  z-index: 620;              /* encima del mapa, debajo del carril y las hojas */
  pointer-events: none;      /* no se toca: es una indicación, no un control */
  display: none;
}
html.ir-mapa-rumbo .ir-puck { display: block; }

.ir-puck svg { display: block; width: 100%; height: 100%; }

.ir-puck-cono {
  fill: var(--accent-fill, #D4A84B);
  opacity: .28;
}
.ir-puck-borde { fill: #FFFFFF; }
.ir-puck-cuerpo { fill: var(--accent-fill, #D4A84B); }
.ir-puck-punta  { fill: var(--accent-ink, #030D1C); }

/* En tema claro el disco necesita un contorno oscuro: el blanco sobre un mapa
   claro desaparece, y lo que queda es una mancha dorada sin forma. */
html[data-theme="light"] .ir-puck-borde { fill: #0A1B33; }
html[data-theme="light"] .ir-puck-punta { fill: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════════════════
   3 · VOLVER AL NORTE
   Solo mientras el mapa está girado: un botón de «volver al norte» con el
   norte ya arriba no dice nada y ocupa 48 px de mapa.
   ══════════════════════════════════════════════════════════════════════════ */
.ir-btn-norte {
  position: fixed;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  left: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  z-index: 900;
  border-radius: 24px;
  border: 1px solid var(--line, #1E3A5F);
  background: var(--surface, #0A1B33);
  color: var(--text, #F5F7FA);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
html.ir-mapa-rumbo .ir-btn-norte { display: flex; }

/* En escritorio el carril derecho manda en ese borde; este va al izquierdo,
   por debajo de la cabecera de búsqueda, donde no compite con nada. */
.ir-escritorio .ir-btn-norte { left: calc(var(--rail-w, 240px) + 12px); top: 96px; }

.ir-btn-norte svg { position: absolute; transition: transform 350ms cubic-bezier(.22,.61,.36,1); }
.ir-aguja-n { fill: var(--error, #EF4444); }   /* el norte, en rojo, como toda aguja */
.ir-aguja-s { fill: var(--text-muted, #9FB0C3); }
.ir-btn-norte-tx {
  position: relative;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  transform: translateY(14px);
  pointer-events: none;
}

html[data-theme="light"] .ir-btn-norte {
  background: #FFFFFF;
  color: #0A1B33;
  border-color: #D8E0EA;
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · LO QUE NO PUEDE GIRAR CON EL MAPA
   El carril de controles, la cabecera, las hojas y los avisos viven FUERA del
   contenedor del mapa, así que no giran. Esto es solo un recordatorio con
   dientes: si alguien mete un control dentro de `#map`, girará con él y
   acabará boca abajo. `tests/mapa-gira-camion-derecho.mjs` lo comprueba.
   ══════════════════════════════════════════════════════════════════════════ */
html.ir-mapa-rumbo .map-controls,
html.ir-mapa-rumbo .ir-carril-colapso,
html.ir-mapa-rumbo .search-header,
html.ir-mapa-rumbo .bottom-nav,
html.ir-mapa-rumbo .toast-container {
  transform: none;
}