/* ══════════════════════════════════════════════════════════════════════
   YAMERO — el mapa con nuestros colores

   ⚠️ ESTE ARCHIVO LO PIDEN LAS CUATRO PANTALLAS CON MAPA: la app del
      cliente, la del repartidor, el rastreo y el panel de administración.
      Al cambiarlo, sube su `?v=` en todas — si no, el navegador sirve el
      viejo hasta un año.

   ══════════════════════════════════════════════════════════════════════
   POR QUÉ UN FILTRO Y NO UN PROVEEDOR DE MAPAS CON ESTILO
   ══════════════════════════════════════════════════════════════════════

   Las tres formas de tener un mapa con la cara de uno:

     1. Un proveedor con estilos (Mapbox, Stadia, Thunderforest). Se ve
        precioso y se paga por vista. Además es la MISMA trampa del OSRM
        de demostración: el día que crezca el pueblo, o el servicio topa o
        llega la factura, y el mapa —que es la pantalla principal de la
        app del repartidor— se queda en blanco por algo que no controlamos.

     2. Servir nuestras propias baldosas vectoriales. Control total y
        ningún tercero, pero son varios GB de generación, un archivo de
        estilo entero y cambiar Leaflet por MapLibre en cuatro pantallas.
        Es el camino bueno el día que el mapa sea parte del producto.

     3. Teñir con CSS las baldosas de OSM que ya usamos. Gratis, sin
        depender de nadie, y se ve distinto desde el primer segundo.

   Esto es la 3. No pretende ser cartografía propia: es la base apagada
   para que lo NUESTRO resalte.

   🔴 EL FILTRO VA SOLO EN LAS BALDOSAS, nunca en el contenedor del mapa.
      Puesto en `.leaflet-container` se lleva por delante los pines, la
      línea de la ruta y los controles: el naranja de la marca saldría
      lavado, que es exactamente lo contrario de lo que se busca. El
      `.leaflet-tile-pane` es la capa del dibujo y nada más.

   La receta: bajar el color y subir el brillo apaga el ruido de OSM —los
   morados de las tiendas, los azules de los hoteles, los verdes
   chillones— y deja un papel claro. El toque cálido lo emparenta con el
   naranja de la marca sin teñir de naranja el pueblo entero.
   ══════════════════════════════════════════════════════════════════════ */

.leaflet-tile-pane {
  filter:
    saturate(0.62)      /* menos color: OSM viene a todo volumen        */
    brightness(1.06)    /* papel, no pantalla                            */
    contrast(0.94)      /* que las calles no compitan con la ruta        */
    sepia(0.14)         /* el toque cálido, del lado del naranja         */
    hue-rotate(-6deg);  /* corrige el amarilleo que deja el sepia        */
}

/* El agua se queda azul: es la única referencia que la gente usa para
   ubicarse de un vistazo en un pueblo con estero, y apagarla del todo lo
   convierte en un plano sin sentido. El filtro ya la baja lo justo. */

/* Los controles, con la forma del resto de la app. Los de Leaflet son
   cuadrados grises de 2011 y desentonan al lado de todo lo demás. */
.leaflet-bar {
  border: 1px solid var(--linea, #EAE7E4) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(27, 26, 25, .12) !important;
  overflow: hidden;
}
.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--fondo, #fff);
  color: var(--tinta, #1B1A19);
  border-bottom-color: var(--linea, #EAE7E4);
  /* 34 px de lado. El de Leaflet son 26: con guantes de moto no se atina,
     y el mapa del repartidor se usa con guantes. */
  width: 34px; height: 34px; line-height: 34px;
  font-size: 19px; font-weight: 700;
}
.leaflet-bar a:active { background: var(--papel, #F7F5F3); }

/* La atribución es obligatoria por la licencia de OSM y se queda. Solo se
   baja de tono para que no compita con el pedido. */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .78) !important;
  font-size: 10px !important;
  color: #8A8580 !important;
}
.leaflet-control-attribution a { color: #8A8580 !important; }

/* ══════════════════════════════════════════════════════════════════════
   LA MOTO EN EL MAPA — el envoltorio del dibujo de /js/moto-mapa.js
   ══════════════════════════════════════════════════════════════════════
   Aquí y no en cada pantalla: son tres las que la enseñan (repartidor,
   rastreo y cotizar) y tres copias de estas seis líneas son tres copias
   que se separan. Ya pasó con el propio dibujo de la moto.

   🔴 LA TRANSICIÓN VA SOBRE EL SVG, NUNCA SOBRE EL ELEMENTO QUE LEAFLET
      POSICIONA (`.leaflet-marker-icon`).

      En un zoom SIN animación —el que usan `fitBounds` y `setView`, o sea
      todos los encuadres— Leaflet dispara `zoomstart`, reposiciona los
      marcadores y dispara `zoomend` en la MISMA tarea síncrona. El
      navegador junta las tres escrituras, ve un solo cambio de posición
      con la transición puesta, y lo ANIMA: las motos se deslizan por la
      pantalla durante segundos en cada encuadre. No truena y no avisa;
      parece que el mapa está roto.

      Con la transición aquí dentro, Leaflet mueve el padre de golpe y
      solo se anima el giro, que es lo que se quería.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   OCUPADO: SE VE, PERO SE HUNDE
   ══════════════════════════════════════════════════════════════════════
   Lo eligió el dueño el 18 de septiembre, señalando cómo se ve un negocio
   cerrado: «gris pero como transparentoso». Un negocio cerrado lleva un
   velo oscuro encima y la foto sigue ahí; aquí es lo mismo con otra
   herramienta —gris y translúcido—, porque un velo oscuro sobre una
   silueta de 26 px la deja del color del asfalto.

   🔴 SE VE, NO SE ESCONDE. Decir «no hay motos» cuando sí las hay se lee
      como que la plataforma está muerta. Y el que mira un mapa de
      compañeros lo hace justo para saber si una colonia está cubierta —
      esconder a los ocupados contesta esa pregunta al revés.

   🔴 Y VIVE AQUÍ, EN UNA SOLA REGLA, para las cuatro pantallas que
      enseñan vehículos. Estaba escrito a mano en cada una: `color:
      '#8A857E'` en el mapa del repartidor y otra variable distinta en el
      de cotizar, ya con dos grises diferentes. El día que se cambie el
      tono, se cambia una vez.

   ⚠️ La opacidad va en la CAJA, no en el `<svg>`: ahí dentro vive la
      transición del giro, y mezclar las dos propiedades en el mismo nodo
      hace que el navegador anime también el desvanecido en cada refresco.
   ══════════════════════════════════════════════════════════════════════ */
.ym-ocupado { --ym-moto-color: #B7B7B2; opacity: .38; }

.ym-moto { display: block; }
.ym-moto svg {
  display: block; width: 100%; height: 100%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .38));
  /* La posición nueva llega cada pocos segundos. Sin transición la moto
     pega un salto seco en cada refresco y parece que se teletransporta. */
  transition: transform .45s ease-out;
}

/* ══════════════════════════════════════════════════════════════════════
   🔴 UN MAPA NO SE TREPA ENCIMA DE NADA
   ══════════════════════════════════════════════════════════════════════
   Leaflet reparte z-index a lo suyo: 200 a las baldosas, 400 a las
   líneas, 600 a los marcadores, 700 a los globos, 800 y 1000 a sus
   botones. Y su contenedor NO crea contexto de apilamiento: no lleva
   z-index propio, solo `position: relative`. Así que esos 600 no compiten
   DENTRO del mapa — compiten con la página entera.

   Enfrente, la casa usa números de persona: la cabecera 20, la barra de
   abajo 30, la hoja del rastreo 56, el escogedor de punto 60. Un marcador
   de Leaflet le gana a todo eso sin despeinarse.

   El dueño lo dijo el 19 de septiembre: «revisa que los mapas no se
   enciman por nada de la plataforma, ese bug seguido pasa». Y "seguido"
   es la palabra exacta: se arregló TRES VECES, una por mapa —
   `#c-mapa` en la app, `html.escritorio .leaflet-container` en
   escritorio.css— y cada mapa nuevo nacía otra vez con el fallo. Medido
   el 19: de trece mapas de la plataforma, uno estaba protegido.

   El que se veía: al abrir «ubicar en el mapa» encima de «Mis datos», el
   mapa de abajo se pintaba ENCIMA del escogedor. Comprobado preguntándole
   al navegador quién recibía el dedo en ese punto.

   `isolation: isolate` crea el contexto sin tocar la maquetación: todo lo
   que Leaflet pinta se queda DENTRO y ya no puede ganarle a nada de
   fuera. Va aquí, que es el archivo que piden las cinco pantallas con
   mapa, y no mapa por mapa — que es como se llegó hasta aquí.

   ⚠️ El pin del centro (`.mapa-pin`, z 500) es HERMANO del mapa, no hijo:
      sigue ganándole, que es lo que tiene que pasar.
   ══════════════════════════════════════════════════════════════════════ */
.leaflet-container { isolation: isolate; }