:root { --bg:#0f172a; --panel:#111827; --panel2:#1f2937; --text:#f8fafc; --muted:#94a3b8; --accent:#22c55e; --border:#334155; }
* { box-sizing: border-box; }
html, body, #appShell { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
#appShell { display: grid; grid-template-columns: minmax(330px, 390px) minmax(0, 1fr); overflow: hidden; }
#sidebar { overflow: auto; padding: 18px; border-right: 1px solid var(--border); background: linear-gradient(180deg, #111827 0%, #0f172a 100%); }
header h1 { font-size: 24px; margin: 4px 0 8px; line-height: 1.1; }
header p { margin: 0 0 18px; color: var(--muted); line-height: 1.4; }
.eyebrow { color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.panel { background: rgba(30,41,59,.72); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.panel h2 { font-size: 15px; margin: 0 0 10px; }
.toolbar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
button { border: 0; border-radius: 10px; background: var(--accent); color: #052e16; padding: 10px 12px; font-weight: 800; cursor: pointer; }
button.secondary { background: #334155; color: var(--text); }
button.wide { width: 100%; margin-top: 8px; }
button:hover { filter: brightness(1.08); }
.toggle-row { display:flex; align-items:center; gap:8px; margin: 6px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.toggle-row input { width:auto; accent-color: var(--accent); }
select, input[type="file"], input, textarea { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: #0f172a; color: var(--text); padding: 9px; }
.field-label { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 5px; }
.small { font-size: 12px; line-height: 1.35; }
.muted { color: var(--muted); }
main { min-width: 0; display: grid; grid-template-rows: 46px 1fr; }
#topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding: 0 16px; border-bottom:1px solid var(--border); background: rgba(15,23,42,.96); min-width:0; }
#statusDetails { color: var(--muted); margin-left: 8px; font-size: 12px; }
#map { width: 100%; height: 100%; min-height: 0; background: #dbeafe; overflow: hidden; }
.leaflet-container { background: #dbeafe; }
.leaflet-container img.leaflet-tile { mix-blend-mode: normal !important; }
.legend { font-size: 12px; color: var(--muted); display:flex; align-items:center; gap:7px; }
.swatch { width: 12px; height: 12px; display:inline-block; border-radius: 99px; }
.swatch.city { background:#38bdf8; } .swatch.barrio { background:#f97316; }
.prop-row { display:grid; grid-template-columns: 96px 1fr; gap:8px; align-items:start; margin-bottom:7px; }
.prop-row label { color: var(--muted); font-size: 11px; padding-top: 8px; overflow:hidden; text-overflow:ellipsis; }
.prop-row input { font-size: 12px; padding: 7px; }
.selected-feature { filter: drop-shadow(0 0 4px #facc15); }
.leaflet-popup-content { font-family: Inter, system-ui, sans-serif; }
.coverage-label { background: rgba(15, 23, 42, .92); border: 1px solid rgba(148, 163, 184, .55); color: #f8fafc; box-shadow: 0 8px 20px rgba(0,0,0,.22); font-weight: 800; }
.coverage-label::before { border-top-color: rgba(15, 23, 42, .92); }
.city-actions { display: grid; gap: 8px; margin: 10px 0 12px; }
.city-actions button.wide { margin-top: 0; }
.child-list { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: rgba(15,23,42,.6); color: var(--muted); }
.child-list div + div { margin-top: 4px; }
@media (max-width: 900px) { #appShell { grid-template-columns: 1fr; grid-template-rows: 42vh 58vh; } #sidebar { order:2; border-right:0; border-top:1px solid var(--border); } main { order:1; } }