:root{
  --bg:#0b0f14;
  --panel:#0f1720;
  --card:#121c27;
  --muted:rgba(255,255,255,.65);
  --line:rgba(255,255,255,.08);

  --red:#ff2a2a;
  --yellow:#ffd400;
  --green:#00ff6a;

  --blue:#2a6bff;
  --dark:#0b1220;
}

*{ box-sizing:border-box; }

html,body{
  width:100%;
  height:100%;
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

.app{
  display:flex;
  height:100vh;
  overflow:hidden;
}

.panel{
  width:360px;
  min-width:360px;
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:12px;
  overflow:auto;
}

.panelHeader{ display:flex; flex-direction:column; gap:10px; }

.title{ display:flex; gap:10px; align-items:center; }
.dotRed{
  width:10px; height:10px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px rgba(255,42,42,.8);
}
.h1{ font-weight:800; letter-spacing:.4px; }
.sub{ font-size:12px; color:var(--muted); }

.statusBox{
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}
.label{ font-size:12px; color:var(--muted); }
.status{ font-size:13px; margin-top:2px; }

.card{
  margin-top:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}

.cardTitle{
  font-weight:700;
  font-size:13px;
  margin-bottom:8px;
}

.select{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.gap8{ gap:8px; }
.mt10{ margin-top:10px; }
.mt8{ margin-top:8px; }
.mt6{ margin-top:6px; }
.mt4{ margin-top:4px; }

.btn{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btnRed{ background:rgba(255,42,42,.2); border-color:rgba(255,42,42,.35); }
.btnBlue{ background:rgba(42,107,255,.2); border-color:rgba(42,107,255,.35); }
.btnDark{ background:rgba(0,0,0,.35); }

.kpiRow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.kpiBox{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px;
}
.kpiLabel{ font-size:12px; color:var(--muted); }
.kpiValue{ font-size:26px; font-weight:900; margin-top:2px; }

.mini{ font-size:12px; }
.muted{ color:var(--muted); }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:flex; gap:8px; align-items:center;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
}
.cRed,.cYel,.cGrn{ width:8px; height:8px; border-radius:50%; }
.cRed{ background:var(--red); box-shadow:0 0 10px rgba(255,42,42,.7); }
.cYel{ background:var(--yellow); box-shadow:0 0 10px rgba(255,212,0,.6); }
.cGrn{ background:var(--green); box-shadow:0 0 10px rgba(0,255,106,.6); }

.ranking{ display:flex; flex-direction:column; gap:8px; }

.rankItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.2);
}
.rankLeft{ min-width:0; }
.rankName{ font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rankMeta{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rankBadge{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.mapWrap{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.topBar{
  position:absolute;
  z-index:1000;
  right:12px;
  top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  align-items:flex-end;
}

.topBarMeta{ pointer-events:none; }

.chipTop{
  pointer-events:none;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:12px;
  backdrop-filter: blur(6px);

  max-width:360px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}

/* ✅ Leyenda fija (como tu imagen) */
.legendBox{
  pointer-events:none;
  width:190px;
  background:rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(0,0,0,.35);
}
.legendTitle{
  font-weight:900;
  font-size:12px;
  margin-bottom:6px;
  opacity:.95;
}
.legendItem{
  display:flex;
  align-items:center;
  gap:4px;   /* antes estaba muy separado */
}
.legendDot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  margin-right:8px;
  box-shadow:0 0 10px rgba(255,255,255,.15);
}
.legendItem > span.legendDot{
  margin-right:0;
}
.legendItem::before{
  content:"";
  display:none;
}

.map{ width:100%; height:100%; }
.leaflet-container{ background:var(--bg); }

.projectIcon{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.7);
}

.methodBox{
  margin-top:10px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px;
}
.methodTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:6px;
}
.methodLine{
  font-size:11px;
  color:rgba(255,255,255,.88);
  line-height:1.45;
}
.methodIso{
  margin-top:6px;
  font-size:10.8px;
  color:rgba(255,255,255,.70);
  line-height:1.35;
}



/* =========================
   EFECTO "RESPIRAR" (marker + anillos)
========================= */
@keyframes breatheGlow {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(255,42,42,.55)); opacity:.92; }
  50%  { transform: scale(1.12); filter: drop-shadow(0 0 16px rgba(255,42,42,.95)); opacity:1; }
  100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(255,42,42,.55)); opacity:.92; }
}

.projectIcon.breathe{
  animation: breatheGlow 1.6s ease-in-out infinite;
  will-change: transform, filter, opacity;
}

/* SVG de Leaflet (circles) */
@keyframes ringPulse {
  0%   { stroke-width:3; opacity:.55; }
  50%  { stroke-width:5; opacity:.95; }
  100% { stroke-width:3; opacity:.55; }
}

@keyframes fillPulse {
  0%   { fill-opacity:.10; }
  50%  { fill-opacity:.22; }
  100% { fill-opacity:.10; }
}

.leaflet-interactive.ringPulse{
  animation: ringPulse 1.6s ease-in-out infinite, fillPulse 1.6s ease-in-out infinite;
  will-change: stroke-width, opacity, fill-opacity;
}
/* =========================
   RESPONSIVE (PC + TELÉFONO)
========================= */
@media (max-width: 900px){
  .app{ flex-direction:column; }
  .panel{
    width:100%;
    min-width:100%;
    border-right:none;
    border-bottom:1px solid var(--line);
    max-height:46vh;   /* panel arriba */
  }
  .mapWrap{
    height:54vh;       /* mapa abajo */
  }
  .topBar{ right:10px; top:10px; }
  .chipTop{ max-width:92vw; }
}

@media (max-width: 480px){
  .grid2{ grid-template-columns:1fr; }  /* botones uno debajo del otro */
  .panel{ padding:10px; }
  .kpiValue{ font-size:22px; }
}