/*
 * Listas on the private family page: the Listas row of Pendientes and one
 * list (/c/<token>/listas/<id>). Every value is copied from Ana's handover
 * screens 12, 13, 21 and 22: docs/design/prototypes/contactos/screens/*.html
 * Builds on family_calendar.css (header, footer, message card) and
 * family_tasks.css (the checkbox, the white list card).
 */

/* Listas row (§B.3) */
.fcl-row-section { padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.fcl-row-section.is-spaced { padding-top: 24px; }
.fcl-row-overline { padding: 0 20px; }
/* No scrollbar, like the person chips: Ana's reference has none (a phone's
   overlay scrollbar), and desktop Chrome would draw one over the 4 px. */
.fcl-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 4px; scrollbar-width: none; }
.fcl-row::-webkit-scrollbar { display: none; }
.fcl-list-card {
  width: 140px; flex-shrink: 0; box-sizing: border-box; background: #ffffff; border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
}
.fcl-list-tile {
  width: 40px; height: 40px; border-radius: 12px; background: var(--tint);
  display: flex; align-items: center; justify-content: center;
}
.fcl-list-text { display: flex; flex-direction: column; min-width: 0; }
.fcl-list-name { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.fcl-list-status { font-size: 13px; line-height: 18px; color: #506162; }

/* List tag on a task row (§B.3) */
.fct-tag { padding: 1px 8px; border-radius: 6px; background: #e3ecec; color: #131717; font-size: 12px; line-height: 18px; font-weight: 500; }

/* One list (§B.4) */
.fcl-wrap, .fcl-body { display: flex; flex-direction: column; }
.fcl-card-section { padding: 18px 20px 0; }
.fcl-card { background: #ffffff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.fcl-head { display: flex; align-items: center; gap: 14px; }
.fcl-tile {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: var(--tint);
  display: flex; align-items: center; justify-content: center;
}
.fcl-names { display: flex; flex-direction: column; min-width: 0; }
.fcl-progress { display: flex; flex-direction: column; gap: 6px; }
.fcl-progress-text { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.fcl-progress-left { font-weight: 600; }
.fcl-progress-right { color: #506162; }
.fcl-bar { height: 8px; border-radius: 4px; background: #e3ecec; overflow: hidden; display: block; }
.fcl-bar-fill { display: block; height: 8px; border-radius: 4px; background: #88d7d4; }
.fcl-event {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #e3ecec;
  text-decoration: none; font-size: 14px; line-height: 20px;
}
.fcl-event > svg { flex-shrink: 0; }
.fcl-event-text { flex: 1; min-width: 0; }
.fcl-event-text b { font-weight: 600; }

/* Items, grouped by kind */
.fcl-group { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.fcl-item { padding: 10px 0; border-bottom: 1px solid #d2dcdc; }
.fcl-item:last-child { border-bottom: 0; }
.fcl-label { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.fcl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fcl-label .fct-input:checked ~ .fcl-text .fct-title { color: #506162; text-decoration: line-through; }
.fcl-who { font-size: 13px; line-height: 18px; color: #506162; }
.fcl-qty { font-size: 14px; line-height: 20px; font-weight: 500; color: #506162; flex-shrink: 0; }

/* Lista vacía (§C, screen 22) */
.fcl-empty-section { padding: 12px 20px 0; }