:root{
  --bg: #f7faf7;
  --panel:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  --green-600:#16a34a;
  --green-500:#22c55e;
  --green-100:#dcfce7;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; color:var(--text);
  background: var(--bg);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  color: var(--green-600);
  text-decoration:none; font-weight:800; letter-spacing:.2px;
}
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:12px;}
.site-nav a{
  display:block; padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--text);
  border:1px solid transparent;
}
.site-nav a:hover{
  border-color: var(--border);
  background: var(--green-100);
}

/* Mobile menu */
.nav-toggle{ width:40px;height:40px;display:none;align-items:center;justify-content:center;background:transparent;border:none;}
.nav-toggle span{ display:block;width:22px;height:2px;background:#111827;margin:4px 0;transition:.2s;}

/* Main */
.site-main{ min-height: calc(100vh - 120px); }
.section{ padding:24px 0; }
.section-tight{ padding-top:12px; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.section-title{ margin:8px 0 12px; font-size:20px; font-weight:800; color:#0f172a; }

.toolbar{
  background: var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:12px; display:grid; gap:10px;
}
.toolbar-row{ display:flex; gap:10px; flex-wrap:wrap; }
.input,.select{
  background:#ffffff; border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; min-width:200px;
}
.input:focus,.select:focus{ outline:2px solid var(--green-100); }

.btn{
  background: var(--green-500); color:#fff; border:1px solid var(--green-500);
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700;
}
.btn:hover{ filter: brightness(1.03); }
.btn-secondary{
  background:#fff; color:var(--text); border:1px solid var(--border);
}
.btn-geo{
  background: var(--green-600); color:#fff; border-color: var(--green-600);
}

.badge{
  display:inline-block; padding:.22rem .55rem; border-radius:999px;
  background: var(--green-100);
  color:#065f46; font-size:.76rem; margin-left:.4rem;
  border:1px solid var(--border);
}
.muted{ color: var(--muted); }

.cards-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px; margin-top:16px;
}
.card{
  background: var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:16px; color:var(--text); text-decoration:none; display:block;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-color:#d1fae5;
}

/* Footer */
.site-footer{ background:#ffffff; border-top:1px solid var(--border); color:#065f46; }
.site-footer .wrap{ max-width:1200px; margin:0 auto; padding:14px 16px; }

/* Responsive */
@media (max-width: 960px){
  .cards-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px){
  .cards-grid{ grid-template-columns: 1fr; }
  .nav-toggle{ display:inline-flex; }
  .site-nav{ position:absolute; top:60px; right:16px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px; display:none; }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; gap:4px; }
}

/* ====== MAPA (altura y contenedor) ====== */
.map-wrap{
  margin-top:12px;
  border-top:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
#map{
  width:100%;
  height: calc(150vh - 210px);
  min-height: 440px;
}

/* Ajustes popups/labels (opcional pero recomendado) */
.leaflet-popup-content{ line-height:1.25; }
.popup h3{ margin:0 0 4px; font-size:15px; }
.row{ margin:6px 0; font-size:13px; }
.label{ font-weight:700; color:#065f46; }

/* Marcador con etiqueta visible (si aún no lo tenías) */
.prod-marker{ position:relative; background:transparent; border:none; }
.prod-marker .pill{
  display:inline-block; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
  color:#065f46; background:#dcfce7; border:1px solid #c7eed7; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.prod-marker .pin{
  width:2px; height:10px; background:#84cc16; margin:3px auto 0; border-radius:2px;
}

/* Responsive mapa */
@media (max-width: 720px){
  #map{ height: calc(100vh - 260px); min-height:380px; }
}

/* ===== Autocompletado del buscador ===== */
.sug{
  position:absolute; top:42px; left:0; right:0; z-index:2000;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  max-height: 340px; overflow:auto;
}
.sug.hidden{ display:none; }
.sug ul{ list-style:none; margin:0; padding:6px; }
.sug-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer;
}
.sug-item:hover, .sug-item.active{
  background: var(--green-100);
}
.sug-label{ color: var(--text); }
.sug-type{
  font-size:.8rem; color:#065f46; background:#ecfdf5;
  border:1px solid #d1fae5; border-radius:999px; padding:2px 8px;
}

/* ====== MAPA ====== */
.map-wrap{
  margin-top:12px;
  border-top:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
#map{ width:100%; height: calc(100vh - 210px); min-height: 440px; }
@media (max-width: 720px){
  #map{ height: calc(100vh - 260px); min-height:380px; }
}

/* Marcador con etiqueta visible */
.prod-marker{ position:relative; background:transparent; border:none; }
.prod-marker .pill{
  display:inline-block; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
  color:#065f46; background:#dcfce7; border:1px solid #c7eed7; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.prod-marker .pin{ width:2px; height:10px; background:#84cc16; margin:3px auto 0; border-radius:2px; }

/* Autocompletado */
.sug{ position:absolute; top:42px; left:0; right:0; z-index:2000;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08); max-height:340px; overflow:auto; }
.sug.hidden{ display:none; }
.sug ul{ list-style:none; margin:0; padding:6px; }
.sug-item{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.sug-item:hover, .sug-item.active{ background: var(--green-100); }
.sug-label{ color: var(--text); }
.sug-type{ font-size:.8rem; color:#065f46; background:#ecfdf5;
  border:1px solid #d1fae5; border-radius:999px; padding:2px 8px; }

/* Popups */
.leaflet-popup-content{ line-height:1.25; }
.popup h3{ margin:0 0 4px; font-size:15px; }
.row{ margin:6px 0; font-size:13px; }
.label{ font-weight:700; color:#065f46; }