:root{
  --bg:#111827;
  --bg2:#243247;

  --panel:rgba(24,34,51,.96);
  --panel2:rgba(36,50,71,.94);

  --line:rgba(240,127,69,.28);

  --text:#f8fafc;
  --muted:#b7c0cc;

  --accent:#f07f45;
  --accent2:#f4a261;

  --danger:#ef4444;
  --warn:#f59e0b;

  --card:#182233;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(
    135deg,
    #243247 0%,
    #172133 48%,
    #0b1220 100%
  );
  color:var(--text);
  overflow:hidden;
}
.shell{display:grid;grid-template-columns:390px 1fr;height:100vh;width:100vw}
.sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.98));
  border-right:1px solid var(--line);
  overflow:auto;
}
.topbar{
  position:absolute;
  top:14px;
  left:406px;
  right:14px;
  z-index:500;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.status-pill{
  background:rgba(2,6,23,.82);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  color:var(--text);
  box-shadow:0 12px 38px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px rgba(240,127,69,.85);
}
.brand{
  border:1px solid rgba(240,127,69,.35);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(
    135deg,
    rgba(240,127,69,.16),
    rgba(36,50,71,.20)
  );
}
.brand img{width:180px;max-width:100%;display:block;margin-bottom:14px}
.brand h1{font-size:24px;line-height:1.05;margin:0 0 8px;letter-spacing:-.03em}
.brand p{font-size:13px;color:var(--muted);margin:0;line-height:1.45}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge{
  border:1px solid var(--line);
  background:rgba(2,6,23,.6);
  color:#cbd5e1;
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:650;
}
.badge.green{
  border-color:rgba(240,127,69,.55);
  color:#ffd4bf;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 14px 45px rgba(0,0,0,.18);
}
.card h2{
  margin:0 0 12px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#cbd5e1;
}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.75));
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.kpi span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.kpi strong{font-size:22px;letter-spacing:-.02em}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
select,input,button{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#050b18;
  color:var(--text);
  padding:10px 11px;
  font-size:14px;
  outline:none;
}
select:focus,input:focus{border-color:rgba(56,189,248,.7);box-shadow:0 0 0 3px rgba(56,189,248,.12)}
button{
  background:linear-gradient(135deg, #0284c7, #10b981);
 button{
  background:linear-gradient(135deg, #f07f45, #d96b35);
  border:0;
  color:#ffffff;
  font-weight:750;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(240,127,69,.25);
}
button.secondary{background:#0f172a;border:1px solid var(--line)}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.legend-row{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:12px;color:var(--muted)}
.swatch{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.55)}
.note{font-size:12px;color:var(--muted);line-height:1.5;margin:0}
.note strong{color:#e2e8f0}
#map{
  height:100vh;
  width:100%;
  min-width:0;
}

.leaflet-container{
  background:#f8fafc !important;
}

/* Protección para que las teselas no sean deformadas
   por otros estilos globales */
.leaflet-container img.leaflet-tile{
  max-width:none !important;
  max-height:none !important;
  transition:none !important;
  filter:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.leaflet-popup-content-wrapper{
  border-radius:16px;
  background:#f8fafc;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.leaflet-popup-content{margin:14px;min-width:270px}
.popup h3{margin:0 0 8px;color:#0f172a;font-size:16px}
.popup .code{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}
.popup .tag{display:inline-block;background:#e0f2fe;color:#075985;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}
.popup .privacy{background:#dcfce7;color:#166534}
.popup table{border-collapse:collapse;width:100%;font-size:12px}
.popup td{padding:5px 4px;border-bottom:1px solid #e2e8f0;vertical-align:top;color:#334155}
.popup td:first-child{font-weight:750;color:#0f172a;width:46%}
.leaflet-control-layers,.leaflet-control-zoom a{border-radius:8px!important}
.data-panel{
  max-height:230px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
}
.data-row{
  display:grid;
  grid-template-columns:70px 1fr 58px;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid rgba(148,163,184,.15);
  color:var(--muted);
  font-size:12px;
}
.data-row:hover{background:rgba(56,189,248,.08);color:#e5e7eb;cursor:pointer}
.data-row:last-child{border-bottom:0}
.data-row strong{color:#e5e7eb}
  /* Botón para alternar panel y mapa en dispositivos móviles */
}
/* Centrado de la interfaz */
.brand{
  position:relative;
  text-align:center;
}

.brand img{
  margin:0 auto 16px auto;
}

.brand h1,
.brand p,
.card h2,
.note{
  text-align:center;
}

.badges{
  justify-content:center;
}

.kpi{
  text-align:center;
}

.card label{
  text-align:center;
}

select{
  text-align:center;
  text-align-last:center;
}

input{
  text-align:center;
}

/* Botones para ocultar y recuperar el panel */
.sidebar-toggle,
.sidebar-restore{
  align-items:center;
  justify-content:center;
  width:44px !important;
  height:44px;
  padding:0;
  border-radius:50%;
  color:#f07f45;
  background:rgba(15,23,42,.94);
  border:1px solid rgba(240,127,69,.65);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.sidebar-toggle svg,
.sidebar-restore svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sidebar-toggle{
  display:none;
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
}

.sidebar-restore{
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  z-index:4000;
}
@media(max-width:900px){

  html,
  body{
    width:100%;
    min-height:100%;
    overflow:auto;
  }

  .shell{
    display:block;
    width:100%;
    height:auto;
  }

  .sidebar{
    width:100%;
    height:auto;
    max-height:none;
    padding-bottom:36px;
  }

  #map{
    display:block;
    width:100%;
    height:75vh;
    min-height:520px;
  }

  .topbar{
    display:none;
  }

  .sidebar-toggle{
    display:flex;
  }

  /* Mapa a pantalla completa */
  body.sidebar-collapsed{
    overflow:hidden;
  }

  body.sidebar-collapsed .sidebar{
    display:none;
  }

  body.sidebar-collapsed #map{
    position:fixed;
    inset:0;
    z-index:2500;
    width:100vw;
    height:100vh;
    min-height:100vh;
  }

  body.sidebar-collapsed .sidebar-restore{
    display:flex;
  }
}
/* =====================================================
   PARCHE DEFINITIVO: BOTONES MÓVILES DEL PANEL
   ===================================================== */

.brand{
  position:relative;
}

#sidebar-toggle,
#sidebar-restore{
  box-sizing:border-box !important;

  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;

  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;

  padding:0 !important;
  margin:0 !important;

  display:none !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(240,127,69,.85) !important;
  border-radius:50% !important;

  background:#182233 !important;
  color:#f07f45 !important;

  box-shadow:0 10px 28px rgba(0,0,0,.38) !important;

  line-height:1 !important;
  text-align:center !important;
  cursor:pointer;
}

#sidebar-toggle span,
#sidebar-restore span{
  display:block;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;

  color:inherit !important;
  font-size:30px !important;
  font-weight:500 !important;
  line-height:1 !important;
}

#sidebar-toggle{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:50 !important;
}

#sidebar-restore{
  position:fixed !important;
  top:16px !important;
  left:16px !important;
  z-index:5000 !important;
}

@media(max-width:900px){

  /* Flecha visible cuando está abierto el panel */
  #sidebar-toggle{
    display:flex !important;
  }

  /* Botón menú oculto mientras se ve el panel */
  #sidebar-restore{
    display:none !important;
  }

  /* Al abrir el mapa, desaparece el panel */
  body.sidebar-collapsed{
    overflow:hidden !important;
  }

  body.sidebar-collapsed .sidebar{
    display:none !important;
  }

  body.sidebar-collapsed #sidebar-toggle{
    display:none !important;
  }

  /* Aparece el menú para recuperar el panel */
  body.sidebar-collapsed #sidebar-restore{
    display:flex !important;
  }

  /* Mapa a pantalla completa */
  body.sidebar-collapsed #map{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100vh !important;
    min-height:100vh !important;

    z-index:2500 !important;
  }

  .topbar{
    display:none !important;
  }
}

@media(min-width:901px){

  #sidebar-toggle,
  #sidebar-restore{
    display:none !important;
  }
}