/* Recepção (out/2026) — a última camada de estilo, carregada depois de todas as outras.
   A central é a mesa da secretária: ela olha de relance, com o paciente no telefone.
   Por isso: um azul só (o da marca), cinzas quentes de papel, hierarquia por peso e não por
   cor, e a agenda lida como uma folha do dia — hora à esquerda, pessoa no meio, situação à
   direita. O que saiu do produto (IA, funil, tarefas, fila de retornos) some aqui também. */

:root {
  --desk: #f6f5f2;          /* o balcão: fundo quente, não cinza de painel */
  --sheet: #ffffff;         /* a folha */
  --sheet-edge: #e8e5df;    /* borda que some quando não se procura */
  --sheet-rule: #f0ede8;    /* linha entre itens */
  --ink: #1f2a3d;           /* texto principal */
  --ink-soft: #4d5a70;      /* apoio */
  --ink-faint: #7d8799;     /* metadado */
  --brand: #284b9e;         /* o azul da marca SemDor — o único acento */
  --brand-deep: #1d3878;
  --brand-wash: #eef2fb;
  --ok: #2f7a5b;  --ok-wash: #e7f4ee;
  --warn: #9a6a14; --warn-wash: #fdf3df;
  --stop: #a8403a; --stop-wash: #fbeceb;
  --radius: 10px;
  --blue: var(--brand); --blue-dark: var(--brand-deep); --line: var(--sheet-edge); --muted: var(--ink-faint);
}

body { background: var(--desk); color: var(--ink); }
.standard-page { background: var(--desk); }

/* Cabeçalho: marca, as abas da recepção e a conta. Nada além. */
.app-header { background: var(--sheet); border-bottom: 1px solid var(--sheet-edge); box-shadow: none; }
.app-header #navigation { gap: 2px; }
.app-header #navigation button, .nav-menu>summary {
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft); height: 38px; min-height: 38px;
  padding: 8px 13px; border-radius: 8px;
}
.app-header #navigation button:hover, .nav-menu>summary:hover { background: var(--desk); color: var(--ink); }
.app-header #navigation button.active {
  background: var(--brand-wash); color: var(--brand); font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.nav-menu[open]>summary, .nav-menu:has(button.active)>summary { background: var(--brand-wash); color: var(--brand); }
.nav-menu-panel { border-color: var(--sheet-edge); border-radius: var(--radius); box-shadow: 0 14px 40px #1f2a3d1a; }
.workspace-strip { background: var(--desk); border-bottom: 1px solid var(--sheet-rule); }

/* Superfícies: uma borda leve, sem sombra; o fundo quente faz a folha aparecer. */
.surface, .metric, .metrics, .callback-card, .day-row, article.surface {
  border-color: var(--sheet-edge);
}
.surface { background: var(--sheet); border-radius: var(--radius); box-shadow: none; }
.page-heading h1, .page-heading h2 { color: var(--ink); letter-spacing: -.5px; }
.page-heading p.muted, .muted { color: var(--ink-faint); }
.metrics { border-radius: var(--radius); background: var(--sheet); }
.metric strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Botões e campos: o primário é o único preenchido. */
button { border-radius: 8px; border-color: var(--sheet-edge); color: var(--ink-soft); }
button:hover { background: var(--desk); border-color: #d8d3ca; }
.primary, button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.primary:hover, button.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
input, select, textarea { border-color: var(--sheet-edge); border-radius: 8px; background: #fdfcfa; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #284b9e1f; background: #fff; }

/* Selos: só cor quando a cor quer dizer alguma coisa. */
.pill { border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 550; }
.pill.blue { background: var(--brand-wash); color: var(--brand); }
.pill.green { background: var(--ok-wash); color: var(--ok); }
.pill.amber { background: var(--warn-wash); color: var(--warn); }
.pill.red { background: var(--stop-wash); color: var(--stop); }

/* Lista de atendimentos e conversa. */
.inbox-list { background: var(--sheet); border-right: 1px solid var(--sheet-edge); }
.conversation-row:hover { background: var(--desk); }
.conversation-row.selected { background: var(--brand-wash); box-shadow: inset 3px 0 var(--brand); }
.chat-panel, .messages { background: #faf9f7; }

/* A AGENDA COMO FOLHA DO DIA — cada dia é um bloco; cada horário, uma linha. */
#clinicAppointments { display: flex; flex-direction: column; gap: 18px; }
.agenda-day { border: 1px solid var(--sheet-edge); border-radius: var(--radius); overflow: hidden; background: var(--sheet); }
.agenda-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: #faf9f6; border-bottom: 1px solid var(--sheet-rule);
}
.agenda-day-head h3 { font-size: 14px; font-weight: 650; color: var(--ink); text-transform: capitalize; }
.agenda-day-head span { font-size: 12px; color: var(--ink-faint); }
.agenda-row {
  display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(150px,auto) auto; align-items: center;
  gap: 16px; padding: 12px 18px; border-top: 1px solid var(--sheet-rule);
}
.agenda-row:first-of-type { border-top: 0; }
.agenda-row:hover { background: #fcfbf9; }
.agenda-row time { font-size: 16px; font-weight: 650; color: var(--brand); font-variant-numeric: tabular-nums; }
.agenda-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agenda-who strong { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-who span { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.agenda-state small { font-size: 11.5px; color: var(--ink-faint); }
.agenda-row.is-off time, .agenda-row.is-off strong { color: var(--ink-faint); }
.agenda-row.is-off strong { text-decoration: line-through; text-decoration-color: #c9c4bb; }
@media (max-width: 760px) {
  .agenda-row { grid-template-columns: 52px minmax(0,1fr); }
  .agenda-state, .agenda-row > button { grid-column: 2; }
}
/* O histórico da automação é diagnóstico da gestão, não leitura do balcão. */
.clinic-journal { display: none; }

/* O que saiu do produto (out/2026): IA, funil, tarefas e a fila de retornos. As telas
   continuam no código para não quebrar caminhos antigos; o balcão não as vê mais. */
#aiSuggest, #aiOfferHuman, #aiAttendanceBanner, #aiSuggestionPanel, #aiReturnToAi, #aiViewHistory,
.day-tasks,
#contactPanel label:has(#detailStage), #contactPanel label:has(#detailPriority),
#contactPanel .contact-section:has(#addContactTask),
#contactPanel .contact-section:has(#detailStage),
[data-relaction="call"], [data-relaction="queue"],
button[data-page="tasks"], button[data-page="pipeline"], button[data-page="callbacks"], button[data-page="ai"],
button[data-day-view="tasks"] { display: none !important; }
.day-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }