/* ==========================================================================
   Tótem Km.0 · Conserxe Dixital
   Mapa ampliable a pantalla completa — hoja de estilos
   Depende de: Leaflet 1.9.x
   ========================================================================== */

/* --- 1. Estado mini -------------------------------------------------------
   El contenedor del mapa conserva el tamaño que ya tenga en la página.
   Aquí solo se añade lo necesario para la transición y la etiqueta.        */

.km0-mapa {
  position: relative;
  transition:
    top .26s cubic-bezier(.22, .61, .36, 1),
    right .26s cubic-bezier(.22, .61, .36, 1),
    bottom .26s cubic-bezier(.22, .61, .36, 1),
    left .26s cubic-bezier(.22, .61, .36, 1),
    border-radius .26s cubic-bezier(.22, .61, .36, 1);
}

/* El mapa pequeño no se arrastra: un toque solo sirve para ampliarlo.
   El cursor y el sombreado lo anuncian antes de tocarlo. */
.km0-mapa:not(.km0-mapa--ampliado) {
  cursor: zoom-in;
  touch-action: pan-y;               /* el dedo hace scroll de página, no pan del mapa */
}

/* Los controles de Leaflet estorban en miniatura */
.km0-mapa:not(.km0-mapa--ampliado) .leaflet-control-container {
  display: none;
}

/* --- 2. Etiqueta «Toca para ampliar» ------------------------------------ */

.km0-mapa__aviso {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 500;                      /* por encima de los panes de Leaflet */
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: 0;
  padding: .42em .78em;
  border-radius: 999px;
  background: rgba(24, 26, 28, .82);
  color: #fff;
  font: 500 .8125rem/1.2 inherit;
  letter-spacing: .01em;
  pointer-events: none;              /* el toque lo recibe el mapa, no la etiqueta */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.km0-mapa__aviso svg { flex: none; }

.km0-mapa.km0-mapa--ampliado .km0-mapa__aviso { display: none !important; }

/* --- 3. Fondo oscuro ----------------------------------------------------- */

.km0-mapa-fondo {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(22, 24, 26, .84);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.km0-mapa-fondo--visible {
  opacity: 1;
  pointer-events: auto;              /* tocar fuera cierra */
}

/* --- 4. Estado ampliado --------------------------------------------------
   El mapa NO se saca del documento: solo cambia de posición. Leaflet
   conserva zoom, capas y estado. El margen que queda alrededor es el
   borde oscuro que se puede tocar para cerrar.                            */

.km0-mapa.km0-mapa--ampliado,
.leaflet-container.km0-mapa--ampliado {
  position: fixed !important;
  top:    calc(env(safe-area-inset-top,    0px) + 14px);
  right:  calc(env(safe-area-inset-right,  0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  left:   calc(env(safe-area-inset-left,   0px) + 14px);
  z-index: 1201;
  width: auto !important;
  height: auto !important;
  max-width: none;
  max-height: none;
  margin: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  touch-action: none;                /* aquí sí manda el mapa: pellizco, arrastre */
}

/* Reserva de altura en la página mientras el mapa está fuera de flujo,
   para que el texto de alrededor no dé un salto al abrir. */
.km0-mapa-hueco { display: block; }

/* Bloqueo del scroll del fondo. El desplazamiento se restituye por JS. */
.km0-sin-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- 5. Botón de cierre --------------------------------------------------
   48 × 48 reales: es un objetivo de pulgar, no un icono decorativo.       */

.km0-mapa__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 501;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #16181a;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  -webkit-tap-highlight-color: transparent;
}

.km0-mapa.km0-mapa--ampliado .km0-mapa__cerrar { display: inline-flex !important; }

.km0-mapa__cerrar:hover { background: #f2f2f0; }

.km0-mapa__cerrar:focus-visible {
  outline: 3px solid #1b6ef3;
  outline-offset: 2px;
}

.km0-mapa__cerrar svg { pointer-events: none; }

/* --- 6. Accesibilidad y preferencias ------------------------------------ */

.km0-visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .km0-mapa,
  .km0-mapa-fondo { transition: none; }
}

@media (prefers-contrast: more) {
  .km0-mapa-fondo { background: rgba(0, 0, 0, .92); }
  .km0-mapa__cerrar { border: 2px solid #16181a; }
}