/* Generated by Copilot */
.map-zoomctrl {
     display: flex;
     align-items: center;
     gap: 6px;
     width: max-content;
     margin: 8px auto;
     /* the page has a blanket `body div { background-color: transparent !important; }`
        rule (see inline <style> in <head>) — must override it to render the glass panel */
     background: rgba(20, 20, 24, 0.72) !important;
     backdrop-filter: blur(14px) saturate(160%);
     -webkit-backdrop-filter: blur(14px) saturate(160%);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 11px;
     padding: 6px 10px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
     font-size: 13px;
}

.map-zoomctrl__btn {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     background: rgba(255, 255, 255, 0.06);
     color: #f2f2f2;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     padding: 0;
     flex: none;
     transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.map-zoomctrl__btn:hover {
     background: rgba(255, 255, 255, 0.14);
     border-color: rgba(255, 255, 255, 0.26);
}

.map-zoomctrl__btn:active {
     background: rgba(255, 59, 48, 0.22);
     border-color: #ff3b30;
     box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18);
}

.map-zoomctrl__btn:focus-visible {
     outline: 2px solid #ff6b60;
     outline-offset: 2px;
}

.map-zoomctrl__icon {
     width: 15px;
     height: 15px;
     display: block;
     pointer-events: none;
}

.map-zoomctrl__slider-wrap {
     display: flex;
     align-items: center;
     gap: 8px;
}

.map-zoomctrl__slider {
     -webkit-appearance: none;
     appearance: none;
     width: 110px;
     height: 3px;
     border-radius: 3px;
     background: rgba(255, 255, 255, 0.18);
     outline: none;
     cursor: pointer;
}

.map-zoomctrl__slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 15px;
     height: 15px;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.35), 0 2px 4px rgba(0, 0, 0, .5);
     cursor: pointer;
     transition: box-shadow .15s ease;
     margin-top: -6px;
}

.map-zoomctrl__slider::-webkit-slider-thumb:hover {
     box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.45), 0 2px 4px rgba(0, 0, 0, .5);
}

.map-zoomctrl__slider::-moz-range-thumb {
     width: 15px;
     height: 15px;
     border: none;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.35), 0 2px 4px rgba(0, 0, 0, .5);
     cursor: pointer;
}

.map-zoomctrl__slider:focus-visible {
     outline: 2px solid #ff6b60;
     outline-offset: 4px;
}

.map-zoomctrl__pct {
     font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
     font-size: 10px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.65);
     min-width: 30px;
     font-variant-numeric: tabular-nums;
}

.map-zoomctrl__reset {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     height: 28px;
     padding: 0 10px;
     margin-left: 4px;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     background: rgba(255, 255, 255, 0.06);
     color: #f2f2f2;
     font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
     font-size: 11px;
     font-weight: 600;
     cursor: pointer;
     flex: none;
     transition: background .2s ease, border-color .2s ease;
}

.map-zoomctrl__reset:hover {
     background: rgba(255, 255, 255, 0.16);
}

.map-zoomctrl__reset:focus-visible {
     outline: 2px solid #ff6b60;
     outline-offset: 2px;
}

.map-viewport {
     position: relative;
     overflow: hidden;
     /* responsive: shrinks to fit the screen width instead of forcing the
        page to the image's native 1800px box (which caused huge vertical
        scroll with only a corner of the diagram visible). .panzoom keeps its
        fixed 1800x900 native size — zoom-controller.ts scales it down to fit
        via panzoom's own scale (see fitScale), so marker coordinates are untouched. */
     width: 100%;
     max-width: 1800px;
     aspect-ratio: 1800 / 900;
     margin: 0 auto;
     touch-action: none;
     cursor: grab;
}

.map-viewport:active {
     cursor: grabbing;
}

.panzoom {
     position: relative;
     width: 1800px;
     height: 900px;
     transform-origin: 0 0;
     /* no will-change: transform here — it pins the huge diagramaFinal-2026.jpg
        to a fixed-resolution GPU layer and the browser never re-rasterizes it
        sharp after the zoom settles, it just keeps scaling the same bitmap */
}

.map-minimap {
     /* fixed to the browser viewport (not .map-viewport) so it stays visible
        even if the page scrolls past the map. top-right avoids the top-center
        zoom control bar and the dev-only Ball Position Editor panel, which
        both sit at bottom-right in PlanimetriaPTD-v2.html. */
     position: fixed;
     top: 14px;
     right: 14px;
     width: 220px;
     height: 110px;
     border: 2px solid #333;
     overflow: hidden;
     z-index: 500;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
     /* override the page's blanket `body div { background-color: transparent !important; }` */
     background: #000 !important;
}

.map-minimap img {
     position: absolute;
     top: 0;
     left: 0;
     width: 220px;
     height: 110px;
     pointer-events: none;
     display: block;
}

.map-minimap__rect {
     position: absolute;
     border: 2px solid #ff3b30;
     background: rgba(255, 59, 48, .15);
     pointer-events: none;
     box-sizing: border-box;
}

/* ============================================================
   Móvil (<=640px): el mapa llena la pantalla
   ============================================================ */
@media (max-width: 640px) {
     #pan-when-zoomed {
          display: flex;
          flex-direction: column;
          height: 100dvh;
          height: 100vh;
          overflow: hidden;
     }

     /* la barra inferior y el texto de marca no caben en un móvil */
     #pan-when-zoomed > .map-zoomctrl:last-child,
     #pan-when-zoomed > span {
          display: none;
     }

     /* viewport: ocupa todo el alto restante entre los controles */
     .map-viewport {
          flex: 1 1 auto;
          width: 100%;
          max-width: none;
          aspect-ratio: auto;
          margin: 0;
     }

     /* controles compactos y táctiles; sin slider en touch */
     .map-zoomctrl {
          margin: 6px auto;
          padding: 5px 8px;
          gap: 4px;
          border-radius: 10px;
     }

     .map-zoomctrl__btn {
          width: 40px;
          height: 40px;
          border-radius: 10px;
     }

     .map-zoomctrl__icon {
          width: 20px;
          height: 20px;
     }

     .map-zoomctrl__reset {
          height: 40px;
          padding: 0 12px;
          font-size: 12px;
     }

     .map-zoomctrl__slider-wrap {
          display: none;
     }

     /* minimap compacto en la esquina inferior derecha */
     .map-minimap {
          top: auto;
          bottom: 12px;
          right: 12px;
          width: 110px;
          height: 55px;
          border-width: 1px;
          border-radius: 8px;
          opacity: .92;
     }

     .map-minimap img {
          width: 110px;
          height: 55px;
     }

     /* sin brillo/retardo de tap en los marcadores */
     .panzoom img {
          -webkit-tap-highlight-color: transparent;
     }
}
