/* ─────────────────────────────────────────────────────────────────────────
   COPIA LITERAL de obras-gestion/plugin/app-src/src/styles/utilities.css (20/09/2026).
   Es el sistema de diseño de la app de obras. NO se edita aquí: si hay que
   cambiar algo, se cambia allí y se vuelve a copiar, o las dos apps se separan.
   ───────────────────────────────────────────────────────────────────────── */

.qw-stack > * + * { margin-top: var(--qw-sp-4); }
.qw-stack-sm > * + * { margin-top: var(--qw-sp-2); }
.qw-stack-lg > * + * { margin-top: var(--qw-sp-6); }

.qw-row { display: flex; gap: var(--qw-sp-3); align-items: center; }
.qw-row-between { justify-content: space-between; }
.qw-row-wrap { flex-wrap: wrap; }

.qw-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--qw-sp-3); }
.qw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--qw-sp-2); }

.qw-text-muted { color: var(--qw-text-muted); }
.qw-text-sm { font-size: var(--qw-fs-sm); }
.qw-text-xs { font-size: var(--qw-fs-xs); }
.qw-text-center { text-align: center; }
.qw-text-bold { font-weight: 600; }

.qw-card {
  background: #fff;
  border: none;
  border-radius: var(--qw-radius-lg);
  padding: var(--qw-sp-4);
  box-shadow: var(--qw-card-shadow);
}

/* -- Banda de previsualizacion "Ver como cliente" (admin/gestor) -- */
.qw-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--qw-celeste-soft);
  color: var(--qw-celeste-deep);
  font-size: var(--qw-fs-sm);
  font-weight: 700;
  border-bottom: 1px solid var(--qw-border);
}
.qw-preview-banner__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.qw-preview-banner__btn {
  flex-shrink: 0;
  /* F4: relleno celeste de MARCA (era celeste-deep, se veía azul marino). */
  background: var(--qw-celeste-fill);
  color: var(--qw-celeste-fill-on);
  border: 0;
  border-radius: var(--qw-radius-pill);
  padding: 8px 14px;
  min-height: 40px;
  font-weight: 700;
  font-size: var(--qw-fs-sm);
  cursor: pointer;
  transition: transform var(--qw-duration) var(--qw-ease);
}
.qw-preview-banner__btn:active { transform: scale(0.97); }
.qw-preview-banner__btn:focus-visible { outline: 2px solid var(--qw-celeste-deep); outline-offset: 2px; }

/* -- Variante DEMOSTRACION (1.5.0): ambar, no celeste. La banda de "ver como cliente" es
   una vista temporal; esta es un aviso sobre la instalacion entera, y tiene que distinguirse
   de un vistazo de las bandas informativas de la app. -- */
.qw-preview-banner--demo {
  background: var(--qw-warning-bg);
  color: var(--qw-warning-ink);
  border-bottom-color: var(--qw-warning-line);
}

/* --- PeriodFilter chips --- */
.og-chip { border: 1px solid var(--qw-green); background: var(--qw-surface); color: var(--qw-green); border-radius: var(--qw-radius-pill); padding: 6px 14px; font-weight: 600; cursor: pointer; min-height: 36px; }
.og-chip--active { background: var(--qw-green); color: var(--qw-green-on); }
/* 1.10.2 — selector de periodo en dos filas (atajos / selectores), sin bordes grises:
   los inputs son bloques blancos con la sombra de la casa y el activo se marca en verde
   como el chip activo. */
.og-periodfilter { display: flex; flex-direction: column; gap: 12px; flex: 1 1 100%; }
.og-periodfilter__chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.og-periodfilter__picks { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.og-periodfilter__pick { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--qw-text-muted); flex: 1 1 160px; max-width: 240px; }
.og-periodfilter__pick input { min-height: 40px; padding: 6px 12px; border: none; border-radius: var(--qw-radius-pill); background: var(--qw-surface); box-shadow: var(--qw-card-shadow); color: var(--qw-text); font: inherit; font-size: 14px; }
.og-periodfilter__pick input:focus-visible { outline: none; box-shadow: var(--qw-card-shadow), 0 0 0 3px var(--qw-celeste-soft); }
.og-periodfilter__pick--active { color: var(--qw-green-deep); }
.og-periodfilter__pick--active input { box-shadow: var(--qw-card-shadow), inset 0 0 0 2px var(--qw-green); }