/* Shared components every area uses. Area-specific styles go in
   stylesheets/areas/<area>.css (loaded after this file, alphabetically). */

/* ── Avatar: a client's colour + initials ───────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--avatar-bg, var(--hue-1));
  color: var(--avatar-fg, var(--ink));
  font: 600 14px var(--font-body);
}
.avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.avatar--lg { width: 72px; height: 72px; font-size: 22px; }
.avatar--hue-1 { --avatar-bg: var(--hue-1); }
.avatar--hue-2 { --avatar-bg: var(--hue-2); --avatar-fg: var(--card); }
.avatar--hue-3 { --avatar-bg: var(--hue-3); }
.avatar--hue-4 { --avatar-bg: var(--hue-4); }
.avatar--hue-5 { --avatar-bg: var(--hue-5); }
.avatar--hue-6 { --avatar-bg: var(--hue-6); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font: 700 16px var(--font-body);
  cursor: pointer;
  background: var(--ink);
  color: var(--card);
}
.btn--block { display: flex; width: 100%; }
.btn--verniz { background: var(--verniz); color: var(--card); }
.btn--white { background: var(--card); color: var(--ink); }
.btn--whatsapp { background: var(--whatsapp); color: var(--card); }
.btn--ghost { background: transparent; color: var(--muted); font-weight: 500; }
.btn--md { height: 50px; font: 600 14px var(--font-body); }
.btn--sm { height: 36px; padding: 0 14px; font: 600 13px var(--font-body); }
.btn[disabled], .btn--disabled { opacity: .4; pointer-events: none; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--verniz);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.button_to { display: inline; }

.back-link { display: inline-block; padding-top: 8px; font: 500 15px var(--font-body); color: var(--muted); }

/* ── Cards and rows ─────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}

/* The appointment row on Hoje, Agenda and a client's profile (design 1). */
.appt {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}
.appt--pending { outline: 2px solid var(--pending); }
.appt--done { opacity: .6; }
.appt__body { flex: 1; min-width: 0; }
.appt__name { font: 600 16px var(--font-body); }
.appt__meta { font: 400 13px var(--font-body); color: var(--muted); }
.appt--pending .appt__meta { color: var(--pending-ink); }
.appt__aside { text-align: right; }
.appt__time { font: 700 16px var(--font-display); }
.appt__sub { font: 400 12px var(--font-body); color: var(--muted); }

/* A free stretch of time: dashed, red, actionable (design 1, B2). */
.gap-card {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 2px dashed var(--verniz-dash);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}
.gap-card__body { flex: 1; min-width: 0; }
.gap-card__title { font: 600 15px var(--font-body); color: var(--verniz); }
.gap-card__meta { font: 400 13px var(--font-body); color: var(--muted); }

/* Settings-style row with a chevron (design C1). */
.row-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 14px 16px;
}
.row-link__title { font: 600 15px var(--font-body); }
.row-link__sub { font: 400 12px var(--font-body); color: var(--muted); }
.row-link::after { content: "›"; color: var(--soft); font-size: 20px; }

.list { display: flex; flex-direction: column; gap: 10px; }
.list--tight { gap: 8px; }

.section { padding: 18px var(--gutter) 0; }
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.section__link { font: 500 13px var(--font-body); color: var(--verniz); }

/* ── Chips and pills ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  font: 600 13px/1.1 var(--font-body);
  color: var(--ink);
  border: 2px solid transparent;
}
.chip--selected { border-color: var(--verniz); background: var(--verniz-wash); color: var(--verniz); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  display: inline-block;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  font: 500 13px var(--font-body);
}

/* Segmented control (Semana | Mês). */
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--line); }
.seg__item {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font: 600 13px var(--font-body);
  color: var(--muted);
}
.seg__item[aria-current="page"] { background: var(--card); color: var(--ink); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 8px; }

.field { background: var(--card); border-radius: 18px; padding: 12px 16px; }
.field--tinted { background: var(--verniz-wash); }
.field--tinted .field__label { color: var(--verniz); }
.field--invalid { outline: 2px solid var(--verniz); }
.field__head { display: flex; justify-content: space-between; align-items: baseline; }
.field__label {
  display: block;
  font: 500 11px var(--font-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.field__hint { font: 500 12px var(--font-body); color: var(--muted); }
.field__input {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 16px var(--font-body);   /* 16px: iOS zooms into anything smaller */
}
.field__input::placeholder { color: var(--soft); font-weight: 500; }
.field__prefixed { display: flex; align-items: baseline; margin-top: 2px; }
.field__prefix { font: 600 15px var(--font-body); color: var(--muted); }
.field__prefixed .field__input { margin-top: 0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Rounded search / quick input (design A2 "Quem"). */
.input-pill {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font: 500 16px var(--font-body);
}
.input-pill:focus { outline: 3px solid var(--verniz); outline-offset: 3px; }

.form-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* ── Feedback ───────────────────────────────────────────────────────────── */
.flash {
  padding: 12px 16px;
  border-radius: 16px;
  font: 500 14px var(--font-body);
  background: var(--card);
}
.flash--alert { background: var(--verniz-wash); color: var(--verniz); }
.flash--notice { background: var(--notice-wash); color: var(--notice-ink); }

/* ── Page titles for sub-screens ────────────────────────────────────────── */
.page { padding: 8px var(--gutter) 0; }
.page-title {
  margin: 24px 0 0;
  font: 800 34px/1.05 var(--font-display);
  letter-spacing: -.02em;
}
.page-lede { margin: 10px 0 20px; font: 400 15px/1.5 var(--font-body); color: var(--muted-strong); }