/*
 * Contactos on the private family page (/c/<token>/contactos). Every value
 * is copied from Ana's handover screens:
 * docs/design/prototypes/contactos/screens/*.html
 * Builds on family_calendar.css (header, footer, details card, hero).
 */

.fc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Search + person chips (§B.0, §B.1) */
.fcc-search-section { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.fcc-search {
  display: flex; align-items: center; gap: 10px; height: 48px; box-sizing: border-box; padding: 0 14px;
  background: #f4fbfb; border: 1px solid #d2dcdc; border-radius: 12px; color: #506162;
}
.fcc-search svg { flex-shrink: 0; }
.fcc-search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 15px;
  color: #131717; outline: none; padding: 1px 2px; margin: 0;
}
.fcc-search-input::placeholder { color: #506162; opacity: 1; }
.fcc-search:focus-within { border-color: #131717; }
/* One focus cue, on the field's own border: .fc-page :focus-visible would
   draw a second ring on the input inside the first one. */
.fc-page .fcc-search-input:focus-visible { outline: none; }

.fcc-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fcc-chips::-webkit-scrollbar { display: none; }
.fcc-chip {
  height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
  font-family: inherit; font-size: 14px; cursor: pointer; margin: 0;
  background: #ffffff; color: #131717; font-weight: 500; border: 1px solid #d2dcdc;
}
.fcc-chip[aria-pressed="true"] { background: #d9297b; color: #000000; font-weight: 600; border: 0; }

/* Groups */
.fcc-group { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.fcc-group[hidden], .fcc-row[hidden] { display: none; }
.fcc-card { background: #ffffff; border-radius: 16px; padding: 0 16px; }
.fcc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #d2dcdc; }
.fcc-row:last-child, .fcc-row.is-last { border-bottom: 0; }
:where(.fc-page) a.fcc-row-link { color: #131717; }
.fcc-row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fcc-tile {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--tint);
  display: flex; align-items: center; justify-content: center; color: #131717;
}
.fcc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fcc-name { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.fcc-role { font-size: 14px; line-height: 20px; color: #506162; overflow-wrap: anywhere; }
.fcc-call {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: #88d7d4;
  display: flex; align-items: center; justify-content: center;
}

/* No-results card (§C.1) */
.fcc-no-results.has-card { padding: 20px 20px 0; }
.fcc-empty-card { background: #ffffff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.fcc-empty-title { font-size: 15px; line-height: 22px; font-weight: 600; color: #131717; }
.fcc-empty-body { font-size: 14px; line-height: 20px; color: #506162; }

/* Detalle del contacto (§B.2) */
.fcc-share {
  width: 44px; height: 44px; border: 0; border-radius: 999px; background: #ffffff; color: #131717;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.fcc-hero-tile {
  width: 44px; height: 44px; border-radius: 12px; background: #ffffff;
  display: flex; align-items: center; justify-content: center; color: #131717;
}
.fcc-hero-names { display: flex; flex-direction: column; gap: 4px; }
.fcc-hero-role { font-size: 16px; line-height: 24px; }
.fcc-pchip { background: #ffffff; align-self: flex-start; }
.fcc-actions { padding: 12px 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fcc-action {
  height: 72px; border-radius: 16px; background: #88d7d4; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.fcc-dsub { font-size: 14px; line-height: 20px; color: #506162; overflow-wrap: anywhere; }
.fcc-appt {
  display: flex; align-items: center; gap: 12px; background: var(--tint); border-radius: 16px; padding: 12px 14px;
  text-decoration: none;
}
.fcc-appt > svg { flex-shrink: 0; }
.fcc-appt-date {
  width: 48px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  background: #ffffff; border-radius: 12px; padding: 6px 0;
}
.fcc-appt-month { font-size: 12px; line-height: 16px; font-weight: 500; color: #506162; }
.fcc-appt-day { font-size: 18px; line-height: 22px; font-weight: 700; }
.fcc-appt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fcc-appt-title { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.fcc-appt-meta { font-size: 14px; line-height: 20px; color: #506162; }
.fcc-saved { font-size: 13px; line-height: 20px; color: #506162; }