/* ── Málaga Desfibriladores – map.css v1.0.0 ─────────────────────────────── */

.mlg-map-wrapper {
    --mlg-orange: #e25822;
    --mlg-blue:   #1565c0;
    --mlg-dark:   #1a1a2e;
    --mlg-border: #d8cfc8;
    --mlg-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
    margin: 1.5em 0;
}

/* ── Map canvas ──────────────────────────────────────────────────────────── */
.mlg-map-wrapper .mlg-map {
    position: relative !important;
    width: 100% !important;
    border: 1px solid var(--mlg-border) !important;
    border-radius: var(--mlg-radius) !important;
    overflow: hidden !important;
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.mlg-map-wrapper .mlg-map-loading {
    position: absolute !important;
    inset: 0 !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .75rem !important;
    background: rgba(255,255,255,.85) !important;
    font-size: .95rem !important;
    color: var(--mlg-dark) !important;
}
.mlg-map-wrapper .mlg-map-loading.hidden { display: none !important; }

.mlg-map-wrapper .mlg-spinner {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    border: 3px solid var(--mlg-border) !important;
    border-top-color: var(--mlg-orange) !important;
    border-radius: 50% !important;
    animation: mlg-spin .7s linear infinite !important;
    background: none !important;
}
@keyframes mlg-spin { to { transform: rotate(360deg); } }

/* ── Live EMT badge ──────────────────────────────────────────────────────── */
.mlg-map-wrapper .mlg-mobile-badge {
    position: absolute !important;
    bottom: 30px !important;
    right: 10px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--mlg-blue) !important;
    border-radius: 20px !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--mlg-blue) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.2) !important;
    pointer-events: none !important;
}
.mlg-mobile-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--mlg-blue) !important;
    animation: mlg-blink 1.4s ease-in-out infinite !important;
}
@keyframes mlg-blink { 0%,100% { opacity:1; } 50% { opacity:.2; } }

.mlg-map-wrapper .mlg-mobile-badge.mlg-mobile-badge--updating { border-color: #f59e0b !important; }
.mlg-map-wrapper .mlg-mobile-badge.mlg-mobile-badge--updating .mlg-mobile-dot { background: #f59e0b !important; animation: mlg-spin .7s linear infinite !important; border-radius: 2px !important; }
.mlg-map-wrapper .mlg-mobile-badge.mlg-mobile-badge--updating .mlg-mobile-label { color: #92400e !important; }
.mlg-map-wrapper .mlg-mobile-badge.mlg-mobile-badge--ok { border-color: #16a34a !important; }
.mlg-map-wrapper .mlg-mobile-badge.mlg-mobile-badge--ok .mlg-mobile-dot { background: #16a34a !important; animation: none !important; }
.mlg-map-wrapper .mlg-mobile-badge.mlg-mobile-badge--ok .mlg-mobile-label { color: #166534 !important; }

/* ── Locate button ───────────────────────────────────────────────────────── */
.mlg-map-wrapper .mlg-map .mlg-locate-btn {
    position:        absolute !important;
    top:             80px !important;
    left:            10px !important;
    z-index:         1000 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           30px !important;
    height:          30px !important;
    padding:         0 !important;
    margin:          0 !important;
    border:          2px solid rgba(0,0,0,.3) !important;
    border-radius:   4px !important;
    background:      #fff !important;
    color:           #333 !important;
    cursor:          pointer !important;
    box-shadow:      0 1px 5px rgba(0,0,0,.3) !important;
    box-sizing:      border-box !important;
}
.mlg-map-wrapper .mlg-map .mlg-locate-btn svg { display:block !important; width:16px !important; height:16px !important; fill:none !important; pointer-events:none !important; }
.mlg-map-wrapper .mlg-map .mlg-locate-btn:hover { background: #f4f4f4 !important; }
.mlg-map-wrapper .mlg-map .mlg-locate-btn.mlg-locate-active { color: var(--mlg-orange) !important; border-color: var(--mlg-orange) !important; background: #fff8f5 !important; }
.mlg-map-wrapper .mlg-map .mlg-locate-btn.mlg-locate-loading { animation: mlg-spin .7s linear infinite !important; pointer-events: none !important; opacity: .6 !important; }

/* ── User dot ────────────────────────────────────────────────────────────── */
.mlg-user-dot { position:relative !important; width:16px !important; height:16px !important; background:var(--mlg-orange) !important; border:2.5px solid #fff !important; border-radius:50% !important; box-shadow:0 0 0 2px rgba(226,88,34,.3) !important; }
.mlg-user-pulse { position:absolute !important; inset:-8px !important; border-radius:50% !important; background:rgba(226,88,34,.15) !important; animation:mlg-pulse 1.8s ease-out infinite !important; }
@keyframes mlg-pulse { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(1.8); opacity:0; } }

/* ── Attribution ─────────────────────────────────────────────────────────── */
.mlg-map-wrapper .mlg-attribution { font-size:.74rem !important; color:#888 !important; margin:.35rem 0 0 !important; text-align:right !important; }
.mlg-map-wrapper .mlg-attribution a { color:#555 !important; }

/* ── Markers ─────────────────────────────────────────────────────────────── */
.mlg-marker-icon, .mlg-bus-icon { display:flex !important; align-items:center !important; justify-content:center !important; }
.mlg-marker-icon svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.mlg-bus-icon svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

/* ── Popup ───────────────────────────────────────────────────────────────── */
.mlg-popup { font-size:.82rem; line-height:1.5; min-width:220px; }
.mlg-popup-badge { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:10px; margin-bottom:.4rem; }
.mlg-popup-badge--fixed  { background:#fff3ee; color:var(--mlg-orange); border:1px solid var(--mlg-orange); }
.mlg-popup-badge--mobile { background:#eff6ff; color:var(--mlg-blue);   border:1px solid var(--mlg-blue); }
.mlg-popup h4 { margin:.25rem 0 .4rem; font-size:.92rem; color:var(--mlg-dark); border-bottom:2px solid var(--mlg-orange); padding-bottom:.3rem; }
.mlg-popup table { width:100%; border-collapse:collapse; }
.mlg-popup td { padding:.18rem .25rem; vertical-align:top; }
.mlg-popup td:first-child { font-weight:600; color:#555; white-space:nowrap; padding-right:.55rem; }

/* ── MarkerCluster ───────────────────────────────────────────────────────── */
.marker-cluster-small, .marker-cluster-medium { background-color: rgba(226,88,34,.18); }
.marker-cluster-small div, .marker-cluster-medium div { background-color: rgba(226,88,34,.65); color:#fff; font-weight:600; }
.marker-cluster-large { background-color: rgba(26,26,46,.18); }
.marker-cluster-large div { background-color: rgba(26,26,46,.7); color:#fff; font-weight:600; }