/* ============================================================
   DANGOFE · Configuración → Checklists (configuracion/checklists.js · .cfgx-card.cfgx-chk)
   Una tarjeta por categoría; abierta, la lista de puntos (texto · tipo · Obligatorio · quitar) con su número,
   y abajo «Agregar punto», el interruptor «Checklist encendido» y «Guardar». Pieza del chat de Diseño (1.0.290).
   Usa los tokens del sistema (--text-*, --accent-rgb, --glass-*, --border-soft): claro y oscuro salen solos.
   Va después de configuracion.css.
   2026-10-21: el numerador se sube desde la fila (.cfgx-chk__puntos es un contenedor y cortaba el contador en el ::before: salía 1, 1, 1).
   ============================================================ */
.cfgx-chk { transition: border-color .25s; }
.cfgx-chk.is-abierta { border-color: rgba(var(--accent-rgb), .55); }
.cfgx-chk .cfgx-card-head { align-items: center; }
.cfgx-chk .cfgx-card-head > div { flex: 1 1 auto; min-width: 0; }
.cfgx-chk .cfgx-card-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cfgx-chk .cfgx-card-head > .btn { flex: none; white-space: nowrap; }
.cfgx-chk .cfgx-card-head .cfgx-badge { vertical-align: middle; }
.cfgx-chk:not(.is-abierta) .cfgx-card-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* la lista de puntos */
.cfgx-chk__puntos { display: flex; flex-direction: column; gap: 8px; counter-reset: punto; margin-bottom: var(--space-4); }
.cfgx-chk__puntos > .cfgx-hint { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--glass-bg); }
.cfgx-chk__fila {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 150px auto 36px; gap: 8px 10px; align-items: center;
  padding: 8px 10px 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--glass-bg);
  animation: cfgx-chk-sube .35s cubic-bezier(.2, .9, .25, 1) both;
}
.cfgx-chk__fila { counter-increment: punto; }
.cfgx-chk__fila::before { counter-increment: none; content: counter(punto); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(var(--accent-rgb), .14); color: var(--text-primary); }
.cfgx-chk__fila .cfgx-input { width: 100%; min-height: 38px; margin: 0; }
.cfgx-chk__fila select.cfgx-input { padding-right: 28px; }
.cfgx-chk__obl { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.cfgx-chk__obl input[type='checkbox'] { width: 18px; height: 18px; margin: 0; accent-color: rgb(var(--accent-rgb)); cursor: pointer; }
.cfgx-chk__obl:has(input:checked) { color: var(--text-primary); }
.cfgx-chk__fila > .btn--ghost { width: 36px; height: 36px; min-height: 36px; min-width: 36px; padding: 0; border-radius: 50%; color: var(--text-secondary); }
.cfgx-chk__fila > .btn--ghost:hover { color: var(--color-danger); background: rgba(255, 90, 78, .12); }
/* acciones de la tarjeta abierta */
.cfgx-chk .cfgx-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfgx-chk .cfgx-actions > .btn--primary { margin-left: auto; }
/* tarjeta angosta (teléfono, o el panel de vista previa al lado): el texto ocupa la fila y debajo tipo · obligatorio · quitar */
.cfgx-chk__puntos { container: cfgx-chk / inline-size; }
@container cfgx-chk (max-width: 600px) {
  .cfgx-chk__fila { grid-template-columns: 26px minmax(0, 1fr) 36px; }
  .cfgx-chk__fila select.cfgx-input { grid-column: 2; }
  .cfgx-chk__obl { grid-column: 2; }
  .cfgx-chk__fila > .btn--ghost { grid-row: 1; grid-column: 3; }
}
@media (max-width: 760px) {
  .cfgx-chk__fila { grid-template-columns: 26px minmax(0, 1fr) 36px; }
  .cfgx-chk__fila select.cfgx-input { grid-column: 2; }
  .cfgx-chk__obl { grid-column: 2; }
  .cfgx-chk__fila > .btn--ghost { grid-row: 1; grid-column: 3; }
  .cfgx-chk .cfgx-actions > .btn--primary { margin-left: 0; flex: 1 1 100%; }
}
@keyframes cfgx-chk-sube { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cfgx-chk__fila { animation: none; } }