/* ============================================================
   DANGOFE OS LIQUID V2 — date-range.css (Fase 3C.1)
   Selector de fechas reutilizable (chips de vidrio + rango
   personalizado). Se adapta a tema claro/oscuro y a la paleta
   ambiental sin usar colores fijos.
   ============================================================ */
.date-range { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.date-range__chips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

.date-range__chip {
  appearance: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.date-range__chip:hover {
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.10);
}
.date-range__chip.is-active {
  color: var(--action-primary-text);
  background: var(--action-primary-bg);
  border-color: transparent;
}
.date-range__chip:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
}

.date-range__custom {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.date-range__custom label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--text-secondary);
}
.date-range__custom .fm-input { min-width: 150px; }

@media (max-width: 560px) {
  .date-range__chip { padding: 6px 10px; font-size: 0.78rem; }
  .date-range__custom .fm-input { min-width: 130px; flex: 1; }
}