/* Clientes: the list with "A voltar", a client's profile (design 4) and her
   form. Values are 1:1 with docs/design/screens/4-perfil-da-cliente.html. */

/* ── List ───────────────────────────────────────────────────────────────── */
/* The search pill carries design A2's ring as its icon. */
.client-search { position: relative; }
.client-search::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--soft);
  border-radius: 50%;
  pointer-events: none;
}
.client-search__input { padding-left: 40px; }
.client-search__input::placeholder { color: var(--muted); font-weight: 400; }
.client-search__input::-webkit-search-cancel-button { display: none; }
.client-search__none { margin: 8px 0 0; font: 400 14px var(--font-body); }

/* A row the whole of which opens her profile; in "A voltar" the Convidar
   button sits beside it, outside the link. */
.client-row__link { display: flex; flex: 1; min-width: 0; gap: 14px; align-items: center; }
.client-row__link[hidden] { display: none; }
.client-row__late { color: var(--pending-ink); }

/* ── Profile hero (design 4) ────────────────────────────────────────────── */
/* Reaches under the status bar: the wine runs to the top edge, as designed. */
.client-hero {
  margin-top: calc(-1 * env(safe-area-inset-top));
  padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 22px;
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  background: var(--wine);
  color: var(--card);
}
.client-hero__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 15px var(--font-body);
  opacity: .85;
}
.client-hero__who { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.client-hero__who .avatar { box-shadow: 0 0 0 4px color-mix(in srgb, var(--card) 18%, transparent); }
.client-hero__name { margin: 0; font: 700 28px/1 var(--font-display); }
.client-hero__sub { margin-top: 6px; font: 400 13px var(--font-body); opacity: .8; }

.client-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 18px; }
.client-stats__item {
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 12%, transparent);
}
.client-stats__value { font: 700 20px var(--font-display); }
.client-stats__label { font: 400 12px var(--font-body); opacity: .8; }

/* ── Profile body ───────────────────────────────────────────────────────── */
.client-body { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--gutter) 0; }
.client-section__body { margin-top: 8px; }
.client-section__empty { margin: 6px 0 0; font: 400 13px var(--font-body); color: var(--muted); }

.client-next { display: block; padding: 14px 16px; }
.client-next--due { display: flex; align-items: center; gap: 12px; }
.client-next__body { flex: 1; min-width: 0; }
.client-next__title { margin-top: 2px; font: 700 17px var(--font-display); }
.client-next__sub { font: 400 13px var(--font-body); color: var(--muted); }
.client-next__sub b { color: var(--ink); }

.client-notes {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--note-wash);
  color: var(--note-ink);
  font: 400 14px/1.4 var(--font-body);
  white-space: pre-line;
}

/* "A cor da última vez é a identidade dela." */
.client-color--last { outline: 2px solid var(--verniz); outline-offset: 2px; }

.client-history { padding: 4px 14px; border-radius: 18px; background: var(--card); }
.client-history__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: 400 14px var(--font-body);
}
.client-history__row:last-child { border-bottom: 0; }
.client-history__row--off > span:first-child { color: var(--muted); text-decoration: line-through; }
.client-history__aside { flex: none; color: var(--muted); }
.client-history__aside--no-show { color: var(--pending-ink); }

/* WhatsApp · Marcar, held in the thumb zone above the tab bar. */
.client-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
  padding: 12px var(--gutter);
  background: linear-gradient(to top, var(--cream) 70%, transparent);
}
.client-actions--single { grid-template-columns: 1fr; }
.client-actions .btn { height: 52px; }
.client-actions__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--card); }

/* ── Form ───────────────────────────────────────────────────────────────── */
.client-form__paste {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--verniz-wash);
  color: var(--verniz);
  font: 500 12px var(--font-body);
}
.client-form__select { appearance: none; -webkit-appearance: none; }
.client-form__notes { min-height: 66px; resize: vertical; font-weight: 500; line-height: 1.4; }
.client-form__error { margin-top: 4px; font: 500 13px var(--font-body); color: var(--verniz); }

.client-delete { padding-top: 8px; }
.client-delete__button { color: var(--verniz); }