/* Painel de agendamentos — folha única.

   Produto multi-cliente: roda para clientes de terceiros, então não carrega
   a marca de nenhum deles. A paleta foi emprestada de padol.com.br por
   decisão do dono do projeto — são cores, não identidade.

   Único token novo em relação àquela paleta: --color-danger, porque o site
   não tem cor de perigo e este painel cancela agendamento em massa sem
   desfazer. */

:root{
  --color-bg:#fafaf8;
  --color-surface:#ffffff;
  --color-ink:#1a1a1a;
  --color-muted:#5b6570;
  --color-border:#e3e6e1;
  --color-primary:#1f7a3d;
  --color-primary-dark:#175c2e;
  --color-primary-light:#eaf5ec;
  --color-accent-warn:#b8791f;

  /* adição deste projeto — ação irreversível precisa de cor própria */
  --color-danger:#b3261e;
  --color-danger-light:#fdecea;

  --font-base:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --fs-h1:clamp(1.5rem,1.3rem + 1vw,2rem);
  --fs-h2:1.25rem;
  --fs-body:1rem;
  --fs-small:.875rem;
  --lh-body:1.6;

  --space-1:.5rem;  --space-2:1rem;   --space-3:1.5rem;
  --space-4:2rem;   --space-6:3rem;   --space-8:4rem;

  --radius:8px;
  --shadow-sm:0 1px 2px rgba(26,26,26,.06), 0 4px 12px -6px rgba(26,26,26,.12);
  --largura:820px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-base);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;line-height:1.25;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.015em}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:1.0625rem;font-weight:600}
p{margin:0}
a{color:var(--color-primary-dark)}
a:hover{color:var(--color-primary)}

/* ── cabeçalho ─────────────────────────────────────────────── */
.topo{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  box-shadow:0 1px 0 rgba(26,26,26,.02);
}
.topo::before{content:"";display:block;height:3px;background:var(--color-primary)}
.topo .dentro{
  max-width:var(--largura);margin:0 auto;padding:var(--space-3) var(--space-2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;
}
/* Nome do produto. Neutro de propósito: o painel roda para clientes de
   terceiros — não pode carregar a marca de nenhum deles. Trocar aqui (e no
   bloco `marca` do base.html) quando o produto tiver nome e logo próprios. */
.marca{font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;color:var(--color-ink)}
.contexto{font-size:var(--fs-small);color:var(--color-muted)}
.contexto strong{color:var(--color-ink);font-weight:600}

/* faixa de área interna — separa a ferramenta do operador da tela do cliente */
.topo.interno::before{background:var(--color-ink)}
.selo-interno{
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--color-muted);border:1px solid var(--color-border);
  padding:.15rem .45rem;border-radius:4px;
}

/* ── corpo ─────────────────────────────────────────────────── */
main{max-width:var(--largura);margin:0 auto;padding:var(--space-4) var(--space-2) var(--space-8)}
main.estreito{max-width:520px}
.cabecalho-pagina{margin-bottom:var(--space-3)}
.cabecalho-pagina p{color:var(--color-muted);margin-top:var(--space-1);max-width:60ch}

.cartao{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow-sm);
}
.cartao + .cartao{margin-top:var(--space-2)}

/* ── formulários ───────────────────────────────────────────── */
label{display:block;font-weight:600;font-size:var(--fs-small);margin-bottom:var(--space-1)}
label.linha{display:inline-flex;flex-direction:column;gap:.25rem;margin:0}
input[type=text],input[type=password],input[type=date],input[type=number]{
  font:inherit;font-size:var(--fs-body);color:var(--color-ink);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:6px;padding:.5rem .625rem;width:100%;
}
input:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
input::placeholder{color:var(--color-muted)}
.ajuda{font-weight:400;font-size:var(--fs-small);color:var(--color-muted)}
.campo + .campo{margin-top:var(--space-2)}

.filtro{display:flex;gap:var(--space-2);align-items:flex-end;flex-wrap:wrap}
.filtro label.linha input{width:auto;min-width:150px}

/* ── botões ────────────────────────────────────────────────── */
button,.botao{
  font:inherit;font-weight:600;font-size:var(--fs-body);
  border:1px solid transparent;border-radius:6px;padding:.5rem 1rem;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:background-color .12s ease,border-color .12s ease;
}
button:focus-visible,.botao:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.botao,button[type=submit]{background:var(--color-primary);color:#fff}
.botao:hover,button[type=submit]:hover{background:var(--color-primary-dark);color:#fff}
button.secundario{background:var(--color-surface);color:var(--color-ink);border-color:var(--color-border)}
button.secundario:hover{background:var(--color-bg)}
button.perigo,button.perigo[type=submit]{background:var(--color-danger);color:#fff}
button.perigo:hover{background:#8f1e18}
button.link{background:none;border:none;color:var(--color-danger);padding:.25rem .4rem;font-size:var(--fs-small);text-decoration:underline}
button:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover{background:var(--color-danger)}
button.secundario:disabled:hover{background:var(--color-surface)}

/* ── tabela ────────────────────────────────────────────────── */
.tabela-rolagem{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:.625rem .875rem;border-bottom:1px solid var(--color-border);vertical-align:middle}
thead th{
  background:var(--color-bg);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-muted);font-weight:700;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--color-bg)}
td.data{font-family:var(--font-mono);font-size:var(--fs-small);font-variant-numeric:tabular-nums;white-space:nowrap}
td.trecho{color:var(--color-muted);font-size:var(--fs-small)}
td.acoes{text-align:right;white-space:nowrap}
td.acoes form{display:inline}

/* ── pílulas de estado ─────────────────────────────────────── */
.pilula{
  display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:99px;white-space:nowrap;
}
.pilula.ok{background:var(--color-primary-light);color:var(--color-primary-dark)}
.pilula.pendente{background:#fdf3e3;color:#8a5a12}

/* ── avisos ────────────────────────────────────────────────── */
.aviso{
  border:1px solid var(--color-border);border-left:3px solid var(--color-accent-warn);
  background:#fdf8f0;border-radius:var(--radius);padding:var(--space-2);
  font-size:var(--fs-small);
}
.aviso.erro{border-left-color:var(--color-danger);background:var(--color-danger-light)}
.aviso.ok{border-left-color:var(--color-primary);background:var(--color-primary-light)}
.aviso ul{margin:var(--space-1) 0 0;padding-left:1.1rem}
.aviso + *{margin-top:var(--space-2)}

/* ── blocos de ação destrutiva ─────────────────────────────── */
.acao{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-3);margin-top:var(--space-2);
}
.acao.destrutiva{border-color:#f0cdc9;box-shadow:inset 3px 0 0 var(--color-danger)}
.acao h3{margin-bottom:var(--space-1)}
.acao .explica{color:var(--color-muted);font-size:var(--fs-small);margin-bottom:var(--space-2)}
.acao .explica strong{color:var(--color-ink)}
.confirmacao{
  display:flex;align-items:flex-end;gap:var(--space-2);flex-wrap:wrap;
  padding-top:var(--space-2);border-top:1px dashed var(--color-border);margin-top:var(--space-2);
}
.confirmacao input{width:180px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}

/* ── estado vazio ──────────────────────────────────────────── */
.vazio{
  border:1px dashed var(--color-border);border-radius:var(--radius);
  padding:var(--space-6) var(--space-3);text-align:center;color:var(--color-muted);
  background:var(--color-surface);
}
.vazio strong{display:block;color:var(--color-ink);margin-bottom:.25rem}

/* ── passo a passo (tela do cliente) ───────────────────────── */
.passos{list-style:none;counter-reset:passo;margin:0;padding:0}
.passos li{
  counter-increment:passo;position:relative;padding-left:2.25rem;
  padding-bottom:var(--space-2);margin-bottom:var(--space-2);
  border-bottom:1px solid var(--color-border);
}
.passos li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.passos li::before{
  content:counter(passo);position:absolute;left:0;top:.05rem;
  width:1.55rem;height:1.55rem;border-radius:99px;
  background:var(--color-primary-light);color:var(--color-primary-dark);
  font-size:var(--fs-small);font-weight:700;display:grid;place-items:center;
}
code{
  font-family:var(--font-mono);font-size:.9em;background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:4px;padding:.1rem .35rem;
  word-break:break-all;
}
.copiavel{display:block;padding:.5rem .625rem;margin-top:.35rem;font-size:var(--fs-small)}

/* ── rodapé / nota legal ───────────────────────────────────── */
.nota{
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
  font-size:var(--fs-small);color:var(--color-muted);max-width:65ch;
}
.nota strong{color:var(--color-ink)}
.voltar{display:inline-block;font-size:var(--fs-small);margin-bottom:var(--space-2)}

/* ── página de erro ────────────────────────────────────────── */
.erro-pagina{max-width:520px;margin:var(--space-8) auto;padding:0 var(--space-2);text-align:center}
.erro-pagina .codigo{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-2);
}
.erro-pagina h1{margin-bottom:var(--space-3)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}