/* Tela: clientes */

/* Busca + novo cliente */
.cli-bar { display: flex; gap: 10px; margin-bottom: 12px; }
.cli-search { flex: 1; min-width: 0; }
.cli-search .input { height: 50px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.cli-search .input::-webkit-search-cancel-button { cursor: pointer; }
.cli-new-in { display: none; height: 50px; border-radius: 14px; }

/* Filtros */
.cli-chips {
  display: flex; gap: 8px; margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.cli-chips::-webkit-scrollbar { display: none; }
.cli-chips .pchip { flex: none; }

/* Lista (cartão com linhas, no estilo da "Agenda de hoje") */
.cli-cols,
.cli-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 70px 16px;
  align-items: center; gap: 16px;
}
.cli-cols {
  margin: 0 8px; padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
}
.cli-list { list-style: none; margin: 0; padding: 0 8px 8px; }
.cli-list li + li { box-shadow: 0 -1px 0 var(--line); }
.cli-row {
  width: 100%; min-height: 60px; padding: 8px 10px;
  text-align: left; border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.cli-row:hover { background: var(--hover); }
.cli-list li:has(.cli-row:hover) + li,
.cli-list li:hover { box-shadow: none; }
.cli-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cli-name strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-sub { display: none; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-cell { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-phone { font-variant-numeric: tabular-nums; }
.cli-num { text-align: right; font-variant-numeric: tabular-nums; }
.cli-chev { width: 16px; height: 16px; color: var(--ink-3); }

.cli-empty { padding: 8px 18px 22px; }
.cli-empty p { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }

/* ---------- Ficha do cliente ---------- */
/* A janela é uma coluna flexível: nada aqui pode encolher (senão some com overflow). */
.cli-top, .cli-nums, .cli-info, .cli-sec, .cli-appts, .cli-appt { flex: none; }
#cliDup:empty { display: none; }
.cli-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cli-top .btn { padding: 0 10px; }

.cli-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cli-nums > div {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: 12px;
  background: #F6F7F9; border: 1px solid var(--line);
}
.cli-nums strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cli-nums span { font-size: 12.5px; color: var(--ink-3); }
.cli-nums .is-warn strong { color: #B45309; }

.cli-note { white-space: pre-wrap; }
.cli-top + .link-btn, .cli-nums + .link-btn { align-self: flex-start; }

.cli-sec { display: flex; flex-direction: column; gap: 8px; }
.cli-sec h3 { margin: 4px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cli-sec .empty-note { margin: 0; }
.cli-sec .link-btn { align-self: flex-start; margin-top: 2px; }
.cli-appts {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.cli-appt {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 14px; text-align: left;
  background: var(--surface);
}
.cli-appt + .cli-appt { border-top: 1px solid var(--line); }
.cli-appt:hover { background: #FAFBFC; }
.cli-appt:active { background: var(--hover); }
.cli-appt-when { display: flex; flex-direction: column; width: 108px; flex: none; line-height: 1.3; white-space: nowrap; }
.cli-appt-when strong { font-size: 14px; font-weight: 600; }
.cli-appt-when span { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cli-appt-what {
  flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3;
  font-size: 14px; color: var(--ink-2);
}
.cli-appt-what em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }

.cli-bday { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .cli-cols, .cli-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 56px 16px; gap: 12px; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  .cli-new-top { display: none; }
  .page-actions:has(.cli-new-top) { display: none; }
  .cli-new-in { display: inline-flex; padding: 0 14px; }
  .cli-search .input { height: 50px; }
  .cli-chips { margin: 0 -16px 12px; padding: 0 16px; }

  .cli-cols { display: none; }
  .cli-list { padding: 0 4px 6px; }
  .cli-row { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px; padding: 8px; min-height: 62px; }
  .cli-cell { display: none; }
  .cli-sub { display: block; }
  .cli-who { gap: 10px; }
  .card-head { padding: 14px 14px 10px; }

  .cli-top { grid-template-columns: 1fr; }
  .cli-appt { padding: 8px 12px; gap: 10px; }
  .cli-appt-when { width: 104px; }
}

@media (max-width: 380px) {
  .cli-new-in { padding: 0 12px; }
  .cli-appt-when { width: 100px; }
}