/* ── QatarPM.razor ── */
/* Movido verbatim (tema oscuro/cian; la unificación de theming se hará en otra fase — ver plan
   design-tokens). Las reglas sobre html/body (.tdev-root) y sobre los controles Leaflet
   globales quedaron INLINE en QatarPM.razor: solo deben aplicar con la página montada. */
:root {
  --neon-cyan: var(--atlas-cyan);
  --neon-orange: #ff9f43;
  --neon-red: #ff4757;
  --neon-green: #00ffbc;
}

/* ── Neon Colors ── */
/* cyan/amber: idénticos a technification.css (duplicado inocuo). green/orange quedaron INLINE en
   QatarPM.razor: aquí añaden text-shadow que technification no lleva y en global pintarían glow
   en los widgets de Technification. red: solo existe aquí. */
.text-cyan-neon   { color: var(--atlas-cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
.text-amber-neon  { color: #ffc107; text-shadow: 0 0 8px rgba(255, 193, 7, 0.5); }
.text-red-neon    { color: #ff4757; text-shadow: 0 0 8px rgba(255, 71, 87, 0.5); }



/* Map background overrides */
#qatarSiteMap { background: #08111b; }
/* ── Compass ── */
.compass-container {
    width: 110px; height: 110px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); position: relative;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.compass-dial {
    position: absolute; width: 100%; height: 100%; font-weight: 900; font-size: 10px; color: rgba(255,255,255,0.5);
}
.dial-mark { position: absolute; }
.dial-mark.n { top: 8px; left: 50%; transform: translateX(-50%); color: var(--atlas-red-500); }
.dial-mark.e { right: 8px; top: 50%; transform: translateY(-50%); }
.dial-mark.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.dial-mark.w { left: 8px; top: 50%; transform: translateY(-50%); }

.compass-needle {
    position: absolute; top: 15%; left: 50%; width: 2px; height: 70%; background: linear-gradient(180deg, var(--atlas-cyan) 50%, rgba(255,255,255,0.1) 50%);
    transform-origin: center center;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}
.compass-needle::after {
    content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 12px solid var(--atlas-cyan);
}

/* ── Custom Leaflet Popups ── */
.custom-qatar-popup .leaflet-popup-content-wrapper {
    background: rgba(2, 5, 10, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    backdrop-filter: blur(10px);
    color: var(--atlas-white);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.custom-qatar-popup .leaflet-popup-tip {
    background: rgba(2, 5, 10, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
}
.zone-popup { padding: 10px; }
.zone-popup-header {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--atlas-cyan);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.zone-popup-body { font-size: 0.75rem; color: rgba(255,255,255,0.7); }