/* BaseForum — Mapa interactivo (mapa.css) · Mobile-first */

/* ── Visibilidad de headers (mobile-first) ── */
.col-header-desktop { display: none !important; }
@media (min-width: 769px) {
  .col-header-desktop { display: flex !important; }
  .col-header-mobile  { display: none !important; }
}

/* ── Topbar móvil (replica de coleccion.css) ── */
.col-topbar {
  display: flex;
  align-items: center;
  padding: 12px var(--app-padding-mob);
  border-bottom: 1px solid var(--bf-line);
  gap: 12px;
  background: var(--bf-bg);
}
.col-topbar__back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink);
  flex-shrink: 0;
  text-decoration: none;
}
.col-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.col-topbar__stripe {
  display: inline-block;
  width: 4px;
  height: 28px;
  background: var(--bf-rojo);
  border-radius: 1px;
  flex-shrink: 0;
}
.col-topbar__titulo {
  font-family: var(--bf-font-display);
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}
.col-topbar__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bf-ink);
  margin-left: auto;
}

/* ── Sub-cabecera bajo el header del sitio (eyebrow + contador) ── */
.map-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--app-padding-mob);
  border-bottom: 1px solid var(--bf-line);
  background: var(--bf-bg);
  gap: 12px;
}
.map-subhead__count {
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  flex-shrink: 0;
  text-align: right;
}

/* Body flex column: header + content + flagbar.
   Fijamos altura al viewport y bloqueamos scroll para que el footer
   (bf-flagbar inferior) quede siempre clavado a la parte baja.
   Usamos 100dvh para que en iOS Safari descuente las barras dinámicas
   (sin esto, 100vh deja contenido oculto bajo la barra de herramientas). */
body {
  margin: 0;
  height: 100vh;       /* fallback */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Flagbar inferior — siempre al fondo del viewport, aunque el contenido
   no llegue (mobile pequeño con stage de aspect-ratio fijo). */
body > .bf-flagbar:last-of-type {
  margin-top: auto;
  flex-shrink: 0;
}

/* ── Contenedor principal ──
   El landmark <main id="contenido"> (añadido por accesibilidad, WCAG 1.3.1) es
   ahora el hijo flex de body y ocupa el espacio restante del viewport; su
   contenido (.map-content) lo llena y centra el plano. Antes .map-content era
   hijo directo de body; al envolverlo en <main>, la regla `body > .map-content`
   dejó de casar y el plano quedaba pegado al header. */
body > #contenido {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body > #contenido > .map-content {
  flex: 1;
  min-height: 0;
}

.map-content {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: stretch;  /* stage y panel llenan altura completa */
  overflow: hidden;
  /* En pantallas anchas damos aire lateral, pero con la caja de la cabecera
     (--app-max-width-bar), no con la del texto: el plano es una pieza gráfica y
     necesita sitio. Así queda alineado con el logo y la navegación de arriba.
     El panel lateral va posicionado dentro de este contenedor, de modo que se
     desplaza con él y sigue anclado a su borde derecho.
     El `width: 100%` es necesario: al ser un elemento flex, los márgenes `auto`
     del eje transversal anulan el estirado y el ancho pasaría a depender del
     contenido (quedaba en 1536 y desalineado de la cabecera). */
  width: 100%;
  max-width: var(--app-max-width-bar);
  margin-inline: auto;
}

/* ── Visor (plano + hotspots) ──
   Stage llena el espacio disponible. El wrap del plano tiene
   aspect-ratio fijo y se centra en el stage. */
.map-stage {
  position: relative;
  background: var(--bf-bg);
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex 240ms cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
}
.map-plano-wrap {
  width: 80vw;
  max-width: 100%;
  aspect-ratio: 1531.81 / 683.75;
  max-height: 100%;
}
.map-plano-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-plano-error {
  font-family: var(--bf-font-mono);
  font-size: 11px;
  color: var(--bf-rojo);
  padding: 24px;
  text-align: center;
}

/* ── Navegador del mapa (zoom+/zoom-/reset) — sólo móvil vertical ── */
.map-nav { display: none; }
@media (max-width: 599px) {
  .map-nav {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 4;
  }
  .map-nav__btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bf-bg);
    border: 1px solid var(--bf-line);
    border-radius: 6px;
    color: var(--bf-ink);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(10,34,64,.08);
    transition: transform 140ms var(--ease-out, ease-out), background 140ms ease;
  }
  .map-nav__btn:hover { background: var(--bf-bg-sunken); }
  .map-nav__btn:active { transform: scale(0.94); }
  .map-nav__btn:disabled { opacity: 0.4; cursor: not-allowed; }
}

/* Plano que admite transform de zoom + pan */
.map-plano-wrap {
  transform-origin: center center;
  transition: transform 180ms var(--ease-out, cubic-bezier(0.23,1,0.32,1));
  touch-action: pan-y; /* permite scroll vertical fuera del mapa */
}
.map-plano-wrap.is-zoomed { cursor: grab; touch-action: none; }
.map-plano-wrap.is-panning { cursor: grabbing; transition: none; }

/* Capa de hotspots — encima del plano, mismo viewBox */
.map-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* solo los hotspots reciben clicks */
}

/* Cada hotspot es un grupo clickable con polígono invisible y etiqueta visible */
.map-hotspot {
  cursor: pointer;
  pointer-events: auto;
}
.map-hotspot__shape {
  fill: transparent;
  stroke: transparent;
  stroke-width: 4;
  /* Crucial: SVG no captura clicks sobre fill:transparent por defecto.
     pointer-events: all fuerza la captura en toda el área del polígono. */
  pointer-events: all;
  transition: fill 200ms ease, stroke 200ms ease, opacity 200ms ease;
}

/* El navegador dibuja su anillo de foco sobre la CAJA del <g>, no sobre el
   polígono: por eso al hacer click aparecía un rectángulo enorme que además se
   quedaba fijo (el foco no se pierde al soltar). Lo quitamos — la zona ya se
   resalta con su propia forma — y para quien navega con teclado la marcamos
   con trazo discontinuo, que sí sigue el contorno real. */
.map-hotspot:focus { outline: none; }
.map-hotspot:focus-visible .map-hotspot__shape { stroke-dasharray: 12 7; }

.map-hotspot:hover .map-hotspot__shape { fill: rgba(0,0,0,0.04); }

.map-hotspot--rojo:hover   .map-hotspot__shape,
.map-hotspot--rojo.is-active   .map-hotspot__shape { stroke: var(--bf-rojo); }
.map-hotspot--marino:hover .map-hotspot__shape,
.map-hotspot--marino.is-active .map-hotspot__shape { stroke: var(--bf-marino); }
.map-hotspot--gualda:hover .map-hotspot__shape,
.map-hotspot--gualda.is-active .map-hotspot__shape { stroke: var(--bf-gualda); }
.map-hotspot--azul:hover   .map-hotspot__shape,
.map-hotspot--azul.is-active   .map-hotspot__shape { stroke: var(--bf-azul); }

/* Zona seleccionada: se tiñe con su propio color (rgba literal en vez de
   color-mix, por compatibilidad con navegadores antiguos de kiosco). */
.map-hotspot--rojo.is-active   .map-hotspot__shape { fill: rgba(200, 16, 46, 0.16); }
.map-hotspot--marino.is-active .map-hotspot__shape { fill: rgba(10, 34, 64, 0.14); }
.map-hotspot--gualda.is-active .map-hotspot__shape { fill: rgba(242, 183, 0, 0.22); }
.map-hotspot--azul.is-active   .map-hotspot__shape { fill: rgba(0, 124, 186, 0.16); }

/* Con una zona abierta, las demás se atenúan para que destaque la elegida */
.map-plano-svg.has-seleccion .map-hotspot:not(.is-active) { opacity: 0.35; }

/* Etiquetas dentro del hotspot (SVG <text>) */
.map-hotspot__num,
.map-hotspot__nombre,
.map-hotspot__nombre--sm,
.map-hotspot__sub {
  pointer-events: none;
  user-select: none;
}
.map-hotspot__num {
  font-family: var(--bf-font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 4px;
  fill: var(--bf-ink-2);
  opacity: 0.85;
}
.map-hotspot__nombre {
  font-family: var(--bf-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.5px;
  fill: var(--bf-ink);
}
.map-hotspot__nombre--sm {
  font-family: var(--bf-font-display);
  font-size: 18px;
  font-weight: 700;
  fill: var(--bf-ink);
}
.map-hotspot__sub {
  font-family: var(--bf-font-body);
  font-size: 16px;
  font-weight: 500;
  fill: var(--bf-ink-2);
  opacity: 0.75;
}
/* Tinte de etiqueta por zona */
.map-hotspot--rojo   .map-hotspot__num,
.map-hotspot--rojo   .map-hotspot__nombre,
.map-hotspot--rojo   .map-hotspot__nombre--sm,
.map-hotspot--rojo   .map-hotspot__sub      { fill: var(--bf-rojo); }
.map-hotspot--marino .map-hotspot__num,
.map-hotspot--marino .map-hotspot__nombre,
.map-hotspot--marino .map-hotspot__nombre--sm,
.map-hotspot--marino .map-hotspot__sub      { fill: var(--bf-marino); }
.map-hotspot--gualda .map-hotspot__num,
.map-hotspot--gualda .map-hotspot__nombre,
.map-hotspot--gualda .map-hotspot__nombre--sm,
.map-hotspot--gualda .map-hotspot__sub      { fill: #8C6A00; }

/* ── Leyenda (flotante sobre el mapa por defecto, bloque en mobile pequeño) ── */
.map-legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--bf-line);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-2);
}
.map-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-legend__sq {
  width: 12px; height: 12px;
  flex-shrink: 0;
  border-radius: 2px;
}
.map-legend__sq--rojo   { background: var(--bf-rojo); }
.map-legend__sq--marino { background: var(--bf-marino); }
.map-legend__sq--gualda { background: var(--bf-gualda); }
.map-legend__sq--azul   { background: var(--bf-azul); }

/* ── Curvas de easing del drawer ── */
:root {
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-style (Ionic) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1); /* ease-out fuerte */
  /* Curva front-loaded para layout-triggering: avanza muy rápido al inicio
     para compensar el frame extra que pierde el navegador al recalcular
     layout. Hace que `padding` parezca sincronizado con el transform GPU
     del drawer. */
  --ease-layout: cubic-bezier(0.05, 0.85, 0.1, 1);
}

/* Cuando el panel está abierto en desktop, dejamos un margen a la izquierda
   y reservamos a la derecha el ancho del panel + margen, para que el plano
   no quede pisado por el panel ni pegado al borde.
   Enter 320ms / exit 240ms para sincronizar con el drawer. */
@media (min-width: 1025px) {
  .map-stage {
    transition: padding 240ms var(--ease-layout);
  }
  .map-content.panel-open .map-stage {
    padding-left: 32px;
    padding-right: 392px; /* 360px panel + 32px de aire */
    transition: padding 320ms var(--ease-layout);
  }
}

/* ── Panel lateral derecho con el detalle de la zona ──
   Drawer overlay: entra deslizando desde la derecha sobre el stage.
   Enter más lento (320ms) que exit (240ms): el cierre es respuesta del
   sistema y debe sentirse instantánea. */
.map-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 360px;
  max-width: 100%;
  background: var(--bf-bg);
  border-left: 4px solid var(--bf-rojo);
  padding: 28px 24px 24px;
  box-shadow: -12px 0 28px rgba(0,0,0,.10);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
  transform: translateX(0);
  transition: transform 320ms var(--ease-drawer);
  will-change: transform;
}
.map-panel.is-closed {
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 240ms var(--ease-drawer), box-shadow 240ms var(--ease-drawer);
  /* Cerrado, el panel queda justo en el borde derecho del contenedor, y su
     sombra (que cae hacia dentro) dibujaba una línea vertical que hacía leer el
     margen lateral como una franja aparte. Sin panel abierto no hay nada que
     sombrear, así que la quitamos. */
  box-shadow: none;
}
.map-panel[data-color="marino"] { border-left-color: var(--bf-marino); }
.map-panel[data-color="gualda"] { border-left-color: var(--bf-gualda); }
.map-panel[data-color="azul"]   { border-left-color: var(--bf-azul); }

/* Reducir movimiento: drawer hace fade en vez de slide */
@media (prefers-reduced-motion: reduce) {
  .map-panel {
    transition: opacity 200ms ease;
    transform: none;
  }
  .map-panel.is-closed {
    transform: none;
    opacity: 0;
  }
  .map-stage { transition: none; }
}

.map-panel__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bf-bg);
  border: 1px solid var(--bf-line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--bf-ink-2);
  transition: transform 140ms var(--ease-out), background 140ms ease, color 140ms ease;
}
.map-panel__close:hover { background: var(--bf-bg-sunken); color: var(--bf-ink); }
.map-panel__close:active { transform: scale(0.94); }

.map-panel__titulo {
  font-size: 22px;
  line-height: 1.05;
  margin: 4px 0 0;
}
.map-panel__subtitulo {
  font-size: 13px;
  color: var(--bf-ink-2);
  line-height: 1.4;
  margin: 4px 0 8px;
}
.map-panel__counts {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
  margin-bottom: 8px;
  font-family: var(--bf-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-ink-2);
}
.map-panel__counts strong {
  color: var(--bf-ink);
  font-family: var(--bf-font-display);
  font-size: 18px;
  margin-right: 4px;
}
.map-panel__list {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.map-panel__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bf-line);
  text-decoration: none;
  color: var(--bf-ink);
  transition: background 120ms ease;
}
.map-panel__row:last-child { border-bottom: none; }
.map-panel__row:hover { background: var(--bf-bg-sunken); }

/* Stagger sutil: cuando el panel se abre, las filas entran con un pequeño
   retraso entre ellas. Sin bloquear interacción. */
.map-panel:not(.is-closed) .map-panel__row {
  opacity: 0;
  transform: translateY(4px);
  animation: panel-row-in 260ms var(--ease-out) forwards;
}
.map-panel:not(.is-closed) .map-panel__row:nth-child(1) { animation-delay: 140ms; }
.map-panel:not(.is-closed) .map-panel__row:nth-child(2) { animation-delay: 180ms; }
.map-panel:not(.is-closed) .map-panel__row:nth-child(3) { animation-delay: 220ms; }
.map-panel:not(.is-closed) .map-panel__row:nth-child(4) { animation-delay: 260ms; }
.map-panel:not(.is-closed) .map-panel__row:nth-child(n+5) { animation-delay: 300ms; }

@keyframes panel-row-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .map-panel:not(.is-closed) .map-panel__row {
    opacity: 1; transform: none; animation: none;
  }
}
.map-panel__row-ref {
  font-family: var(--bf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bf-rojo);
  flex-shrink: 0;
  min-width: 44px;
}
.map-panel__row-ref--vehiculo { color: var(--bf-gualda); }
.map-panel__row-titulo {
  font-size: 12px;
  line-height: 1.25;
  flex: 1;
}
.map-panel__row svg { opacity: 0.4; flex-shrink: 0; }

.map-panel__empty {
  font-size: 12px;
  color: var(--bf-ink-3);
  text-align: center;
  padding: 24px 0;
  font-style: italic;
}

/* ── Móvil pequeño (<600px): panel como bottom sheet, leyenda anclada abajo
   El .map-content llena el espacio restante del viewport y la leyenda usa
   margin-top: auto para pegarse justo encima de la flagbar inferior. */
@media (max-width: 599px) {
  body > .map-content {
    flex: 1;
    max-height: none;
  }
  .map-content > .map-legend {
    margin-top: auto;
  }
  .map-content {
    flex-direction: column;
    overflow: visible;
    align-items: stretch;
  }
  .map-stage {
    flex: 1;
    min-height: 0;
  }
  .map-legend {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--bf-line);
    background: var(--bf-bg-elev);
    backdrop-filter: none;
    z-index: auto;
  }
}

/* ── Tablet (600–1024): leyenda en el flow inferior; el stage llena el aire
   restante entre header y leyenda, centrando el plano ahí. ── */
@media (min-width: 600px) and (max-width: 1024px) {
  .map-content {
    flex-direction: column;
  }
  .map-legend {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--bf-line);
    background: var(--bf-bg-elev);
    backdrop-filter: none;
    z-index: auto;
  }
}

@media (max-width: 599px) {
  .map-panel {
    position: fixed;
    inset: auto 0 0 0;
    flex: none;
    width: 100%;
    max-height: 70vh;
    border-left: none;
    border-top: 4px solid var(--bf-rojo);
    box-shadow: 0 -12px 32px rgba(0,0,0,.12);
    z-index: 30;
    transform: translateY(0);
    transition: transform 240ms cubic-bezier(.2,.7,.3,1);
  }
  .map-panel.is-closed {
    transform: translateY(100%);
    flex: none;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    border-top-width: 4px;
    pointer-events: none;
  }
  /* Con el panel abierto (bottom sheet que ocupa hasta el 70% de la pantalla),
     el plano quedaba completamente tapado. Le damos al stage un relleno inferior
     igual al solape real con el panel: como el plano va centrado en el stage,
     sube solo al hueco libre de arriba. El valor lo calcula map.js al abrir,
     porque depende de la altura que tenga el panel según su contenido. */
  .map-content.panel-open .map-stage {
    padding-bottom: var(--map-stage-shift, 0px);
  }
  .map-stage {
    transition: flex 240ms cubic-bezier(.2,.7,.3,1),
                padding-bottom 240ms cubic-bezier(.2,.7,.3,1);
  }

  .map-panel[data-color="marino"] { border-top-color: var(--bf-marino); }
  .map-panel[data-color="gualda"] { border-top-color: var(--bf-gualda); }
  .map-panel[data-color="azul"]   { border-top-color: var(--bf-azul); }
}

/* ── Desktop / Tablet ── */
@media (min-width: 769px) {
  .map-topbar { padding: 18px var(--app-padding-x); }
  .map-topbar__titulo { font-size: 24px; }
  .map-stage { min-height: 500px; }
  .map-panel { padding: 32px 28px; }
  .map-panel__titulo { font-size: 28px; }
  .map-panel__row-titulo { font-size: 13px; }
}

/* ── Puntos de bloques y vehículos sobre el plano (map_points) ── */
.map-points-layer { pointer-events: none; }
.map-point { pointer-events: all; cursor: pointer; }
.map-point__dot {
  fill: var(--bf-rojo);
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(10,34,64,.25));
  transition: transform 160ms cubic-bezier(0.23,1,0.32,1), fill 160ms ease;
  transform-origin: center;
  transform-box: fill-box;
}
.map-point__ref {
  fill: #fff;
  font-family: var(--bf-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.map-point:hover .map-point__dot,
.map-point:focus-visible .map-point__dot {
  transform: scale(1.18);
}
/* Color del dot por zona (asignado por JS según el bloque) */
.map-point--color-rojo   .map-point__dot { fill: var(--bf-rojo); }
.map-point--color-marino .map-point__dot { fill: var(--bf-marino); }
.map-point--color-gualda .map-point__dot { fill: var(--bf-gualda); }
.map-point--color-azul   .map-point__dot { fill: var(--bf-azul); }

/* Vehículos: dot gualda; ref en marino para contraste */
.map-point--vehiculo .map-point__dot { fill: var(--bf-gualda); }
.map-point--vehiculo .map-point__ref { fill: var(--bf-marino); }

/* Bloques de zona marino (oscuro) — el texto blanco ya contrasta */
.map-point--color-marino .map-point__ref { fill: #fff; }
.map-point--color-azul   .map-point__ref { fill: #fff; }
/* Bloques de zona gualda (claro) — texto en marino para contraste */
.map-point--bloque.map-point--color-gualda .map-point__ref { fill: var(--bf-marino); }