/*
 * Pendientes on the private family page (/c/<token>/pendientes). Every value
 * is copied from Ana's handover screens 12, 12b and 21:
 * docs/design/prototypes/contactos/screens/*.html
 * Builds on family_calendar.css and family_contacts.css (chips, no-results card).
 */

.fct-wrap, .fct-body { display: flex; flex-direction: column; }
/* The list's footer sits 4 px closer than the empty state's (§B.3). */
.fct-wrap:has(> .fct-body.is-list) + .fc-footer { padding-top: 24px; }

/* Summary (§B.3): date, count, chips */
.fct-summary { padding: 20px 20px 0; display: flex; flex-direction: column; }
.fct-summary.has-chips { gap: 12px; }
.fct-summary-head { display: flex; flex-direction: column; }

/* Groups */
.fct-group { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.fct-group[hidden], .fct-item[hidden] { display: none; }
.fct-overline { font-weight: 600; }
.fct-overline.is-overdue { color: #9a1509; }
.fct-card { list-style: none; margin: 0; padding: 0 16px; background: #ffffff; border-radius: 16px; }
.fct-item { padding: 12px 0; border-bottom: 1px solid #d2dcdc; }
.fct-item:last-child, .fct-item.is-last { border-bottom: 0; }
.fct-form { margin: 0; }

/* Row: a real checkbox inside its label (§B.0) */
.fct-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; min-height: 44px; }
.fct-box {
  width: 24px; height: 24px; flex-shrink: 0; box-sizing: border-box; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; background: #ffffff; border: 2px solid #789192;
}
.fct-box.is-overdue { border-color: #9a1509; }
.fct-box svg { display: none; }
.fct-input:checked + .fct-box { background: #88d7d4; border: 0; }
.fct-input:checked + .fct-box svg { display: block; }
.fct-input:focus-visible + .fct-box { outline: 2px solid #131717; outline-offset: 2px; }
.fct-input:disabled + .fct-box { opacity: 0.6; }
.fct-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fct-title { font-size: 15px; line-height: 22px; font-weight: 500; color: #131717; overflow-wrap: anywhere; }
.fct-input:checked ~ .fct-text .fct-title { color: #506162; text-decoration: line-through; }
.fct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; line-height: 18px; color: #506162; }
.fct-due.is-overdue { display: flex; align-items: center; gap: 4px; color: #9a1509; font-weight: 600; }
.fct-person { display: flex; align-items: center; gap: 5px; }
.fct-av {
  width: 20px; height: 22px; border-radius: 10px 10px 3px 3px; background: var(--fill); color: var(--on);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Hechos toggle */
.fct-toggle-section { padding: 16px 20px 0; }
.fct-toggle, .fct-see-done {
  border: 0; background: transparent; color: #131717; font-family: inherit; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.fct-toggle { width: 100%; height: 44px; border-radius: 12px; }
.fct-toggle:disabled { cursor: default; text-decoration: none; color: #506162; }

/* Pendientes al día (§C, screen 21) */
.fct-state-section { padding: 16px 20px 0; }
.fct-see-done { margin-top: 4px; min-height: 44px; }