/* Página do paciente. Ela não usa a casca do painel: quem abre este link vê uma coisa só, o
   horário. Os tokens são os mesmos do sistema, e o acento vem da clínica, gravado pelo
   agendar.js no elemento raiz. */

:root {
  --fundo: #f5f5f7;
  --superficie: #ffffff;
  --preenchimento: rgba(118, 118, 128, 0.12);
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --linha: rgba(0, 0, 0, 0.1);
  --linha-forte: rgba(0, 0, 0, 0.18);
  --acento: #0f6f74;
  --acento-suave: rgba(15, 111, 116, 0.09);
  --acento-anel: rgba(15, 111, 116, 0.38);
  --botao-texto: #ffffff;
  --erro: #b8141b;
  --erro-fundo: rgba(255, 59, 48, 0.1);
  --r-1: 8px;
  --r-2: 12px;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #000000;
    --superficie: #1c1c1e;
    --preenchimento: rgba(118, 118, 128, 0.24);
    --texto: #f5f5f7;
    --texto-2: #a1a1a6;
    --linha: rgba(255, 255, 255, 0.12);
    --linha-forte: rgba(255, 255, 255, 0.24);
    --acento: #5fd3d8;
    --acento-suave: rgba(95, 211, 216, 0.14);
    --acento-anel: rgba(95, 211, 216, 0.5);
    --botao-texto: #06282a;
    --erro: #ff8c84;
    --erro-fundo: rgba(255, 69, 58, 0.16);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.5 var(--fonte);
  letter-spacing: -0.009em;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--acento-anel); outline-offset: 2px; border-radius: var(--r-1); }
[hidden] { display: none !important; }

.pagina { max-width: 560px; margin: 0 auto; padding: var(--e-8) var(--e-4) var(--e-8); }
.topo { margin-bottom: var(--e-6); }
.sobre { margin: 0 0 var(--e-1); font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; }
h1 { margin: 0 0 var(--e-2); font-size: clamp(26px, 7vw, 34px); line-height: 1.12; letter-spacing: -0.022em; }
h2 { margin: var(--e-6) 0 var(--e-3); font-size: 19px; letter-spacing: -0.012em; }
h3 { margin: 0 0 var(--e-2); font-size: 15px; font-weight: 600; color: var(--texto-2); }
.chamada { margin: 0; color: var(--texto-2); }

.erro {
  margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-1); background: var(--erro-fundo); color: var(--erro);
}

/* Um bloco por dia, e as horas como botões: o paciente escolhe num toque. */
.dias { display: grid; gap: var(--e-6); }
.dia { display: grid; gap: var(--e-2); }
.horas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.hora {
  min-width: 76px; min-height: 44px; padding: 0 var(--e-3);
  border: 1px solid var(--linha-forte); border-radius: var(--r-1);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.hora:hover { border-color: var(--acento); color: var(--acento); }

.escolhido {
  margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-1); background: var(--acento-suave); color: var(--acento); font-weight: 600;
}

form { display: grid; gap: var(--e-4); }
.campo { display: grid; gap: var(--e-1); }
label { font-size: 14px; font-weight: 600; }
.opcional { font-weight: 400; color: var(--texto-2); }
input, select {
  min-height: 44px; padding: 0 var(--e-3);
  border: 1px solid var(--linha-forte); border-radius: var(--r-1);
  background: var(--superficie); color: var(--texto); font: inherit;
}
input[aria-invalid="true"] { border-color: var(--erro); }
.campo-erro { margin: 0; font-size: 14px; color: var(--erro); }
/* A caixa de ciência: alvo de 44 px, e o texto quebra do lado da caixa, não embaixo dela. */
.campo-check label { display: flex; gap: var(--e-3); align-items: flex-start; font-weight: 400; cursor: pointer; }
.campo-check input { width: 22px; height: 22px; min-height: 22px; margin: 11px 0; flex: none; }
.campo-check span { padding: 11px 0; }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.botao {
  min-height: 48px; padding: 0 var(--e-6);
  border: 0; border-radius: var(--r-2);
  background: var(--acento); color: var(--botao-texto);
  font: inherit; font-weight: 600; cursor: pointer;
}
.botao:hover { filter: brightness(1.08); }
.botao[disabled] { opacity: .5; cursor: not-allowed; }
.botao.simples { background: none; color: var(--acento); padding: 0 var(--e-2); }
.botao.simples:hover { background: var(--acento-suave); filter: none; }

.aviso-dados { margin: 0; font-size: 13px; color: var(--texto-2); }
a { color: var(--acento); }

/* Aviso de privacidade: texto longo, com tabela que vira lista em tela estreita. */
.tabela-aviso { width: 100%; border-collapse: collapse; margin: var(--e-3) 0 var(--e-6); font-size: 15px; }
.tabela-aviso th, .tabela-aviso td { text-align: left; vertical-align: top; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha); }
.tabela-aviso th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-2); }
@media (max-width: 560px) {
  .tabela-aviso, .tabela-aviso tbody, .tabela-aviso tr, .tabela-aviso td { display: block; width: 100%; }
  .tabela-aviso thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-aviso tr { padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); }
  .tabela-aviso td { border: 0; padding: 2px 0; }
  .tabela-aviso td:first-child { font-weight: 600; }
}
ul { padding-left: var(--e-6); }
li { margin-bottom: var(--e-2); }
.confirmacao { font-size: 19px; font-weight: 600; margin: 0 0 var(--e-2); }

/* ---------- Documento para assinar (A1 do gate de 29/10/2026) ---------- */
/* O paciente lê o texto inteiro antes de confirmar, então ele rola no corpo da página e não
   numa caixa com rolagem própria: em celular, caixa com rolagem interna esconde o fim. */
.documento { margin: 0 0 var(--e-6); padding: var(--e-4) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.documento h2 { font-size: 19px; margin: 0 0 var(--e-3); }
.documento h3 { font-size: 16px; margin: var(--e-4) 0 var(--e-2); }
.documento p { margin: 0 0 var(--e-2); }
.documento-linha { font-variant-numeric: tabular-nums; }
.documento hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-4) 0; }
.codigo { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-weight: 600; margin: 0 0 var(--e-3); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}