/* =========================
SIGMA COMMAND CENTER STYLE
========================= */

body{
background:#0a0a0a;
color:#ffffff;
font-family:Montserrat,Arial;
}

/* RADAR REALISTA */

.radar{
width:180px;
height:180px;
border-radius:50%;
margin:auto;
position:relative;
overflow:hidden;
border:2px solid #00ff9c;
box-shadow:
0 0 20px rgba(0,255,156,.3),
inset 0 0 40px rgba(0,255,156,.2);
background:
radial-gradient(circle at center,
rgba(0,255,156,0.15) 0%,
rgba(0,255,156,0.08) 40%,
rgba(0,0,0,0.9) 75%);
}

/* círculos del radar */

.radar:before{
content:"";
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background:
repeating-radial-gradient(
circle,
rgba(0,255,156,0.15) 0px,
rgba(0,255,156,0.15) 2px,
transparent 2px,
transparent 30px
);
}

/* línea giratoria */

.radar-line{
position:absolute;
width:50%;
height:2px;
background:#00ff9c;
top:50%;
left:50%;
transform-origin:left center;
animation:radarRotate 4s linear infinite;
box-shadow:0 0 12px #00ff9c;
}

/* cono del radar */

.radar-line:after{
content:"";
position:absolute;
width:180px;
height:180px;
left:-2px;
top:-90px;
background:conic-gradient(
rgba(0,255,156,0.35),
rgba(0,255,156,0.15),
transparent 60deg
);
}

@keyframes radarRotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

/* =========================
NODOS SIGMA
========================= */

.sigma-central{
background:#e2231a;
padding:14px;
text-align:center;
font-weight:bold;
cursor:pointer;
border-radius:6px;
}

.sigma-nivel{
border:1px solid #d4af37;
padding:12px;
margin:10px;
cursor:pointer;
text-align:center;
background:#111;
}

.hidden{
display:none;
opacity:0;
}

.visible{
display:block;
opacity:1;
transition:all .4s ease;
}

/* =========================
GRID ALCALDIAS
========================= */

.grid-alcaldias{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-top:20px;
}

.alcaldia{
background:#111;
border:1px solid #d4af37;
padding:12px;
cursor:pointer;
text-align:center;
transition:all .3s ease;
}

.alcaldia:hover{
background:#e2231a;
}

/* =========================
MAPA
========================= */

#mapa-cdmx{
max-width:900px;
margin:auto;
}

.alcaldia-svg{
fill:#1a1a1a;
stroke:#d4af37;
stroke-width:1;
cursor:pointer;
transition:all .3s ease;
}

.alcaldia-svg:hover{
fill:#e2231a;
}

/* =========================
ICS PANEL
========================= */

.ics-panel{
margin-top:40px;
border:1px solid #d4af37;
padding:20px;
background:#111;
}

.ics-title{
color:#e2231a;
font-weight:bold;
margin-bottom:10px;
}