/* ================================================================================================
   ACCIONES Y RESPUESTAS RÁPIDAS — chips reutilizables (ERP, CRM y Portal del cliente)
   ================================================================================================

   Un solo lenguaje visual para los atajos de captura. Los colores se toman de variables de la
   superficie que los aloja (--qa-*), con un valor de respaldo para cada una: el ERP (UI Pro 2) y el
   portal (client-portal.css) los redefinen en su propio ámbito y los chips se visten solos.

   Accesibilidad: foco visible (anillo), estado pulsado con contraste, objetivo táctil de 44 px en
   dispositivos de puntero grueso, sin depender del color para comunicar el estado (aria-pressed).
   Responsive: los chips fluyen y, si el grupo se declara desplazable, se deslizan en horizontal
   sin provocar scroll de página.
   ================================================================================================ */

:root {
  --qa-fondo: var(--surface, #ffffff);
  --qa-tinta: var(--ink, #17201d);
  --qa-borde: var(--line-strong, #cbd5d0);
  --qa-acento: var(--accent, #17695d);
  --qa-acento-tinta: var(--accent-dark, #0f5148);
  --qa-acento-suave: var(--accent-soft, #e7f2ef);
  --qa-suave: var(--muted, #68736e);
  --qa-anillo: 0 0 0 3px rgba(23, 105, 93, 0.22);
  --qa-radio: 999px;
}

/* El portal del cliente tiene su propia paleta: los chips la heredan sin una sola regla duplicada. */
body.as-portal-activo {
  --qa-fondo: var(--as-superficie, #ffffff);
  --qa-tinta: var(--as-tinta, #0d1117);
  --qa-borde: var(--as-linea-fuerte, #d3d8e2);
  --qa-acento: var(--as-marca, #1a4d3a);
  --qa-acento-tinta: var(--as-marca-tinta, #123528);
  --qa-acento-suave: var(--as-marca-clara, #ecf3ef);
  --qa-suave: var(--as-tinta-suave, #5b6570);
  --qa-anillo: var(--as-anillo, 0 0 0 3px rgba(26, 77, 58, 0.18));
}

.qa-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
}
.qa-grupo--desplazable {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.qa-grupo--desplazable::-webkit-scrollbar { display: none; }
.qa-grupo-titulo {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--qa-suave);
  margin-right: 2px;
}

.qa-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: var(--qa-radio);
  border: 1px solid var(--qa-borde);
  background: var(--qa-fondo);
  color: var(--qa-tinta);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.qa-chip:hover { border-color: var(--qa-acento); color: var(--qa-acento-tinta); }
.qa-chip:focus { outline: none; }
.qa-chip:focus-visible { outline: none; box-shadow: var(--qa-anillo); border-color: var(--qa-acento); }
.qa-chip[aria-pressed="true"] {
  background: var(--qa-acento-suave);
  border-color: var(--qa-acento);
  color: var(--qa-acento-tinta);
}
.qa-chip[aria-pressed="true"]::before {
  content: "✓";
  font-size: 0.7em;
  margin-right: 5px;
}
.qa-chip--contexto { border-style: dashed; }
.qa-chip--reciente { color: var(--qa-suave); }
.qa-chip:disabled,
.qa-grupo--deshabilitado .qa-chip { opacity: 0.5; cursor: not-allowed; }

/* Acciones rápidas (chips que ejecutan algo en vez de escribir): mismo tamaño, acento de marca. */
.qa-grupo--acciones .qa-chip { border-color: var(--qa-acento); color: var(--qa-acento-tinta); }
.qa-grupo--acciones .qa-chip.qa-chip--primaria { background: var(--qa-acento); color: #fff; }
.qa-grupo--acciones .qa-chip.qa-chip--primaria:hover { color: #fff; filter: brightness(1.05); }

/* Teléfono y tableta: objetivo táctil de 44 px y separación un poco mayor; nada se desborda. */
@media (pointer: coarse) {
  .qa-chip { min-height: 44px; min-width: 48px; padding: 0 14px; font-size: 0.875rem; }
  .qa-grupo { gap: 8px; }
}
@media (max-width: 430px) {
  .qa-grupo { gap: 6px; }
  .qa-chip { min-width: 44px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-chip { transition: none; }
}