:root{
  --bg:#0f1720;
  --panel:#161f2b;
  --panel-2:#1c2733;
  --border:#263141;
  --text:#e7edf3;
  --muted:#8fa1b3;
  --accent:#3ddc97;
  --carniceria:#e74c3c;
  --geriatrico:#3b82f6;
  --despensa:#f5a623;
  --pescaderia:#16a596;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
#app{display:flex;height:100vh;width:100vw;overflow:hidden;}

/* Sidebar */
#sidebar{
  width:330px;min-width:330px;background:var(--panel);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  z-index:1000;overflow-y:auto;
}
#sidebar-header{padding:18px 18px 12px;border-bottom:1px solid var(--border);}
#sidebar-header h1{font-size:16px;margin:0 0 4px;font-weight:700;letter-spacing:.2px;}
#sidebar-header p{margin:0;font-size:12px;color:var(--muted);}

#search-box{padding:12px 18px;border-bottom:1px solid var(--border);}
#search-box input{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:13px;outline:none;
}
#search-box input:focus{border-color:var(--accent);}

#filters{padding:12px 18px;border-bottom:1px solid var(--border);}
.filter-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;}
.filter-row{
  display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;
  cursor:pointer;user-select:none;margin-bottom:3px;transition:background .15s;
}
.filter-row:hover{background:var(--panel-2);}
.filter-row .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,0.05);}
.filter-row .label{flex:1;font-size:13px;}
.filter-row .count{font-size:11px;color:var(--muted);background:var(--panel-2);padding:2px 7px;border-radius:20px;}
.filter-row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;}

/* Listas personalizadas */
#lists-section{padding:12px 18px;border-bottom:1px solid var(--border);}
#listCreator{display:flex;gap:6px;margin-bottom:10px;}
#listCreator input{
  flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:12.5px;outline:none;
}
#listCreator input:focus{border-color:var(--accent);}
#listCreator button{
  padding:7px 10px;border-radius:8px;border:none;background:var(--accent);
  color:#08130d;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
}
#listsContainer{display:flex;flex-direction:column;gap:5px;}
.list-chip{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--border);cursor:pointer;
  font-size:12.5px;transition:border-color .15s;
}
.list-chip:hover{border-color:var(--accent);}
.list-chip.active{border-color:var(--accent);background:rgba(61,220,151,0.08);}
.list-chip .lc-name{flex:1;font-weight:600;}
.list-chip .lc-count{font-size:11px;color:var(--muted);background:var(--bg);padding:2px 7px;border-radius:20px;}
.list-chip .lc-del{color:var(--muted);cursor:pointer;font-size:13px;padding:0 3px;}
.list-chip .lc-del:hover{color:#e74c3c;}
#lists-empty{font-size:12px;color:var(--muted);padding:4px 2px;}

#stats{padding:14px 18px;border-bottom:1px solid var(--border);}
#progress-bar{height:8px;border-radius:5px;background:var(--panel-2);overflow:hidden;margin-top:8px;}
#progress-fill{height:100%;background:var(--accent);width:0%;transition:width .3s;}
#stats .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;}
#stats .row b{color:var(--text);}

#list-wrap{flex:1;overflow-y:auto;padding:6px 10px 16px;}
.place-card{
  background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;margin:6px 8px;cursor:pointer;transition:border-color .15s;
}
.place-card:hover{border-color:var(--accent);}
.place-card.visited{opacity:.45;}
.place-card .pc-top{display:flex;align-items:center;gap:8px;}
.place-card .pc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.place-card .pc-name{font-size:13px;font-weight:600;flex:1;}
.place-card .pc-addr{font-size:11.5px;color:var(--muted);margin-top:4px;padding-left:17px;}
.place-card .pc-check{font-size:14px;}
.place-card .pc-note{font-size:11px;color:var(--accent);margin-top:4px;padding-left:17px;font-style:italic;}

#sidebar-footer{padding:10px 18px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);}
#reset-btn{
  width:100%;padding:8px;margin-top:8px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-size:12px;cursor:pointer;
}
#reset-btn:hover{border-color:#e74c3c;color:#e74c3c;}

/* Map */
#map{flex:1;height:100%;}

.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:10px;}
.leaflet-popup-tip{background:var(--panel);}
.leaflet-popup-content{margin:12px 14px;min-width:230px;}
.popup-title{font-size:14px;font-weight:700;margin:0 0 2px;}
.popup-type{font-size:11px;color:var(--muted);margin-bottom:8px;}
.popup-addr{font-size:12px;margin-bottom:6px;color:#c7d2dc;}
.popup-phone{font-size:12px;margin-bottom:8px;}
.popup-phone a{color:var(--accent);text-decoration:none;}

.popup-maps-link{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--accent);
  text-decoration:none;margin-bottom:10px;font-weight:600;
}
.popup-maps-link:hover{text-decoration:underline;}

.popup-note-label{font-size:11px;color:var(--muted);margin-bottom:4px;display:block;}
.popup-note{
  width:100%;min-height:44px;resize:vertical;border-radius:7px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:12px;padding:6px 8px;font-family:inherit;
  margin-bottom:6px;outline:none;
}
.popup-note:focus{border-color:var(--accent);}
.popup-note-save{
  width:100%;padding:6px;border:1px solid var(--border);border-radius:7px;background:transparent;
  color:var(--muted);font-size:11.5px;cursor:pointer;margin-bottom:10px;
}
.popup-note-save:hover{border-color:var(--accent);color:var(--accent);}
.popup-note-save.saved{border-color:var(--accent);color:var(--accent);}

.popup-list-label{font-size:11px;color:var(--muted);margin-bottom:4px;display:block;}
.popup-list-select{
  width:100%;padding:6px 8px;border-radius:7px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:12px;margin-bottom:10px;outline:none;
}

.visit-btn{
  width:100%;padding:8px;border:none;border-radius:7px;cursor:pointer;font-size:12.5px;font-weight:600;
  background:var(--accent);color:#08130d;
}
.visit-btn.is-visited{background:var(--panel-2);color:var(--muted);border:1px solid var(--border);}

.custom-marker-icon{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:700;
  border-radius:50% 50% 50% 0;transform:rotate(45deg);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,.85);
}
.custom-marker-icon span{transform:rotate(-45deg);}
.custom-marker-icon.visited{opacity:.35;filter:grayscale(60%);}

/* mobile */
@media (max-width:720px){
  #app{flex-direction:column;}
  #sidebar{width:100%;min-width:0;height:46vh;order:2;border-right:none;border-top:1px solid var(--border);}
  #map{order:1;height:54vh;}
}