/* ============================================================
   Vías Verdes Murcia v7 — Kit de botones (Rediseño UX/UI)
   ------------------------------------------------------------
   Replica la "estructura de los botones" del handoff de Claude Design
   (design_handoff_viasverdes: ui.jsx / app.jsx / panels-sidebar.jsx)
   como clases CSS reutilizables. Estética hi-fi con los tokens del §4.

   NO reescribe los botones existentes: es la BASE para migrar. Se
   adoptan aplicando estas clases (todas con prefijo .vvb- para no
   colisionar con el CSS actual).

   USO (referencia):
     <button class="vvb-chip is-active" style="--vvb-c:#3f8f86">
        <span class="vvb-chip-dot"></span> Mazarrón
     </button>
     <span class="vvb-tag">Fácil</span>
     <button class="vvb-iconbtn vvb-iconbtn--glass is-active" aria-label="Clima">
        <svg>…</svg><span class="vvb-iconbtn-badge">2</span>
     </button>
     <div class="vvb-segmented vvb-segmented--full">
        <button class="is-active">Tiempo</button><button>Aire y polen</button>
     </div>
     <button class="vvb-btn vvb-btn--primary">Mi ubicación</button>
     <button class="vvb-btn vvb-btn--secondary">Vista general</button>
     <button class="vvb-dock-btn"><span class="vvb-dock-ic"><svg/></span> Clima</button>
     <button class="vvb-dock-btn vvb-dock-btn--circle" aria-label="Clima"><svg/></button>
     <button class="vvb-modal-close" aria-label="Cerrar"><svg/></button>
   ============================================================ */

:root {
  /* Tokens del rediseño, namespaced para el kit de botones */
  --vvb-green: #4A8C3F;
  --vvb-green-dark: #1A4A18;
  --vvb-green-soft: #EAF1E7;
  --vvb-ink: #1c2418;
  --vvb-ink-soft: #5a6356;
  --vvb-line: #e4e8df;
  --vvb-amber: #E8A13A;
  --vvb-red: #D6473B;
  --vvb-sky: #3E89C9;
  --vvb-pill: 999px;
  --vvb-font: 'Manrope', system-ui, sans-serif;
}

/* ---------- Chip — píldora seleccionable ---------- */
.vvb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--vvb-pill);
  font-size: 13.5px; font-weight: 600; font-family: var(--vvb-font);
  cursor: pointer; white-space: nowrap; transition: all .15s;
  border: 1.5px solid var(--vvb-line); background: #fff; color: var(--vvb-ink);
}
.vvb-chip--sm { padding: 5px 11px; font-size: 12.5px; }
.vvb-chip.is-active {
  border-color: var(--vvb-c, var(--vvb-green));
  background: var(--vvb-c, var(--vvb-green));
  color: #fff; box-shadow: 0 2px 8px rgba(74, 140, 63, .25);
}
.vvb-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vvb-c, var(--vvb-green)); flex-shrink: 0; }
.vvb-chip.is-active .vvb-chip-dot { background: #fff; }

/* ---------- Tag — meta read-only ---------- */
.vvb-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--vvb-pill);
  font-size: 12px; font-weight: 700; font-family: var(--vvb-font); letter-spacing: .1px;
  color: var(--vvb-tag-color, #fff); background: var(--vvb-tag-bg, var(--vvb-green));
}

/* ---------- IconButton — círculo ---------- */
.vvb-iconbtn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .7); background: #fff; color: var(--vvb-ink);
  box-shadow: 0 4px 14px rgba(26, 74, 24, .16); transition: all .15s;
}
.vvb-iconbtn--glass {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.vvb-iconbtn.is-active { border: 1.5px solid var(--vvb-green); color: var(--vvb-green); }
.vvb-iconbtn-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--vvb-red); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

/* ---------- Segmented — tabs ---------- */
.vvb-segmented {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 3px; background: var(--vvb-green-soft); border-radius: 12px;
}
.vvb-segmented--full { display: grid; width: 100%; }
.vvb-segmented > button {
  padding: 8px 14px; border-radius: 9px; border: none; cursor: pointer;
  font-family: var(--vvb-font); font-size: 13.5px; font-weight: 700;
  background: transparent; color: var(--vvb-ink-soft); transition: all .15s;
}
.vvb-segmented > button.is-active {
  background: #fff; color: var(--vvb-green-dark); box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

/* ---------- CTA — primario / secundario (radius 12, no píldora) ---------- */
.vvb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 12px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 700; font-family: var(--vvb-font); transition: all .15s;
}
.vvb-btn--primary { background: var(--vvb-btn-c, var(--vvb-green)); color: #fff; box-shadow: 0 3px 10px rgba(74, 140, 63, .3); }
.vvb-btn--secondary { background: var(--vvb-green-soft); color: var(--vvb-green-dark); }

/* ---------- Dock button — píldora flotante (desktop) / círculo 50 (móvil) ---------- */
.vvb-dock-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 16px 0 13px;
  border-radius: var(--vvb-pill); cursor: pointer; border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .92); color: var(--vvb-ink);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(26, 74, 24, .2);
  font-family: var(--vvb-font); font-weight: 700; font-size: 14px; white-space: nowrap; transition: all .15s;
}
.vvb-dock-btn .vvb-dock-ic { color: var(--vvb-green); display: inline-flex; align-items: center; }
.vvb-dock-btn.is-active { border: 1.5px solid var(--vvb-green); background: var(--vvb-green); color: #fff; }
.vvb-dock-btn.is-active .vvb-dock-ic { color: #fff; }
.vvb-dock-btn--circle { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; }

/* ---------- Botón cerrar de modal (sobre header sólido) ---------- */
.vvb-modal-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .2); color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Accesibilidad: foco visible + touch target ---------- */
.vvb-chip, .vvb-iconbtn, .vvb-btn, .vvb-dock-btn, .vvb-modal-close, .vvb-segmented > button { min-height: 0; }
.vvb-iconbtn, .vvb-dock-btn--circle { min-width: 44px; min-height: 44px; }
.vvb-chip:focus-visible, .vvb-iconbtn:focus-visible, .vvb-btn:focus-visible,
.vvb-dock-btn:focus-visible, .vvb-modal-close:focus-visible,
.vvb-segmented > button:focus-visible {
  outline: 2px solid var(--vvb-green); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .vvb-chip, .vvb-iconbtn, .vvb-btn, .vvb-dock-btn, .vvb-segmented > button { transition: none; }
}