:root {
  --primary: #1d4ed8;
  --primary-600: #2563eb;
  --primary-700: #1e40af;
  --bg: #f1f5f9;
  --sidebar-bg: #ffff;
  --muted-bg: #f8fafc;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --shadow-sm: 0 4px 16px rgba(2, 6, 23, .06);
  --t: .25s ease;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); overflow: hidden; }

/* HEADER */
.app-header{
  position: relative; display: flex; align-items: center; gap: .8rem;
  background: var(--primary); color: #fff; padding: .8rem 1.2rem;
  box-shadow: var(--shadow); z-index: 1000;
}
.app-header h1{ margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: .2px; }

/* Botón hamburger */
.btn-hamburger{
  width: 40px; height: 40px; border: none; border-radius: 12px;
  background: rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t), transform var(--t); outline: none;
}
.btn-hamburger:hover{ background: rgba(255,255,255,.25); transform: translateY(-1px) }
.btn-hamburger:active{ transform: translateY(0) scale(.98) }
.btn-hamburger:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,.6) }
.hamburger, .hamburger::before, .hamburger::after{
  content: ""; display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  position: relative; transition: var(--t);
}
.hamburger::before{ position: absolute; top: -6px }
.hamburger::after{ position: absolute; top: 6px }

/* LAYOUT */
.layout{ display: flex; height: calc(100vh - 96px); position: relative; }

/* SIDEBAR */
#sidebar{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 360px; background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.1rem; overflow: auto; transform: translateX(0);
  transition: transform .32s ease; z-index: 3;
}
#sidebar.collapsed{ transform: translateX(-102%) }

/* Marca */
.sidebar-brand{
  display: flex; align-items: center; gap: .8rem;
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(29,78,216,.08));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-brand i{ font-size: 1.25rem; color: var(--primary-600) }
.sidebar-brand strong{ display:block; font-size:.95rem }
.sidebar-brand small{ color: var(--muted) }

/* Tarjetas */
.card{
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.card-title{
  display:flex; align-items:center; justify-content: space-between;
  gap:.6rem; margin: 0 0 .7rem 0; font-size: .98rem; font-weight: 700; color: var(--primary-700);
}
.card-title .row{ display:flex; align-items:center; gap:.5rem }
.row-between{ display:flex; align-items:center; justify-content:space-between }
.gap8{ gap:.5rem }
.badge{
  background: #e0e7ff; color: #3730a3; font-weight: 700; font-size: .75rem;
  border-radius: 999px; padding: .15rem .5rem;
}

/* Buscador */
.search{
  position: relative; display:flex; align-items:center; gap:.5rem;
  background: var(--muted-bg); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:.4rem .6rem; margin-bottom:.6rem;
}
.search i{ color: var(--muted) }
.search input{
  border:none; outline:none; flex:1; background:transparent; color:var(--text);
  font-size:.95rem;
}
.search .clear{
  border:none; background:transparent; color:#9aa7b5; cursor:pointer; padding:2px;
}
.search .clear:hover{ color:#6b7280 }

/* Acordeones */
.accordion{ border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; }
.accordion + .accordion{ margin-top:.6rem }
.accordion > summary{
  list-style:none; cursor:pointer; user-select:none; padding:.6rem .8rem;
  background:var(--muted-bg); font-weight:600; color:#0b1324; display:flex; align-items:center; gap:.5rem;
}
.accordion[open] > summary{ background:#eef2ff; border-bottom:1px solid var(--border) }
.accordion > div{ padding:.7rem .8rem }

/* Botones chips */
.btn-chip{
  border:1px solid var(--border);
  background: #ffff;
  color:#0b1324; border-radius: 999px; padding:.3rem .6rem; cursor:pointer;
  box-shadow: var(--shadow-sm); transition: background var(--t), transform var(--t), border-color var(--t);
  font-weight:600; font-size:.82rem;
}
.btn-chip:hover{ background:#eef2ff; border-color:#c7d2fe; transform: translateY(-1px) }

/* Listas de controles */
.list{ display: flex; flex-direction: column; gap: .5rem }
.list .item{
  display: flex; align-items: center; justify-content: space-between;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.list .item:hover{ background: #eef2ff; border-color: #c7d2fe; transform: translateY(-1px) }
.item label{ display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-weight: 500; }
.item input[type="checkbox"], .item input[type="radio"]{ width: 16px; height: 16px; accent-color: var(--primary-600); }

/* Items con leyenda (capas con símbolo) */
.item-with-legend {
  display: flex; align-items: center;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  transition: background var(--t), border-color var(--t), transform var(--t);
  margin-bottom: .5rem;
}
.item-with-legend:hover{ background: #eef2ff; border-color: #c7d2fe; transform: translateY(-1px) }
.item-with-legend label{ 
  display: flex; align-items: center; gap: .6rem; 
  cursor: pointer; user-select: none; font-weight: 500; 
  width: 100%;
}
.item-with-legend input[type="checkbox"]{ 
  width: 16px; height: 16px; accent-color: var(--primary-600); 
  flex-shrink: 0;
}
.legend-icon {
  width: 28px; height: 28px; 
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  background: white;
  padding: 2px;
}
.layer-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
}
.layer-name {
  font-weight: 500;
  color: var(--text);
  font-size: .95rem;
}
.layer-category {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 400;
}

/* Estado vacío */
.empty{
  display:flex; align-items:center; gap:.5rem; color:#6b7280;
  background:#f9fafb; border:1px dashed var(--border);
  border-radius: var(--radius-sm); padding:.6rem .7rem; font-size:.9rem;
}

/* MAPA */
#map{ flex:1; height: 100%; z-index: 1 }
.leaflet-top.leaflet-left{ z-index: 500 } /* que no tape el header */
.leaflet-draw-toolbar{ box-shadow: var(--shadow-sm) }

/* FOOTER */
footer{
  text-align: center; font-size: .9rem; color: var(--muted);
  border-top: 1px solid var(--border); padding: .6rem; background: var(--sidebar-bg);
}

/* Scroll */
#sidebar::-webkit-scrollbar{ width: 10px }
#sidebar::-webkit-scrollbar-thumb{ background: #dbeafe; border-radius: 6px; border: 2px solid transparent; background-clip: content-box }
#sidebar::-webkit-scrollbar-thumb:hover{ background: #bfdbfe; border-color: transparent }

/* Responsive */
@media (max-width: 900px){
  #sidebar{ width: 100% }
  .btn-hamburger{ width: 44px; height: 44px }
  .layout{ height: calc(100vh - 112px) }
}