/* Estilo do sistema de agendamento.
   Para combinar com a identidade da Hermes, troque as cores abaixo
   (--marca é a cor principal; os demais tons derivam dela). */

:root {
  --marca: #0e5a4a;
  --marca-forte: #0a4538;
  --sobre-marca: #ffffff;
  --marca-fraca: #e1eee9;
  --papel: #f2f6f4;
  --superficie: #ffffff;
  --tinta: #13211c;
  --suave: #52645d;
  --linha: #cfdad5;
  --perigo: #a3361c;
  --ok: #1c6b3c;
  --foco: #1d6fd8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marca: #5fc4a4;
    --marca-forte: #7fd6ba;
    --sobre-marca: #0b1a15;
    --marca-fraca: #173028;
    --papel: #0e1714;
    --superficie: #15211d;
    --tinta: #e5eeea;
    --suave: #9db1a8;
    --linha: #2a3b35;
    --perigo: #f08a6c;
    --ok: #6ccb8e;
    --foco: #7db4f5;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.55 var(--sans);
}

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: var(--marca); }
.suave { color: var(--suave); }
.pequeno { font-size: 0.875rem; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Cabeçalho ---------- */

.topo { background: var(--superficie); border-bottom: 1px solid var(--linha); }
.topo-int {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca img { height: 40px; width: auto; max-width: 100%; }
.marca-texto { display: grid; min-width: 0; }
.marca-nome { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.marca-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
}

/* ---------- Página ---------- */

.pagina {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: 36px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.pagina.estreita { max-width: 640px; }
.pagina.larga { max-width: 1080px; }
.intro { display: grid; gap: 8px; margin-bottom: 28px; max-width: 60ch; }
.intro p { margin: 0; }

.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}
.lado { position: sticky; top: 16px; display: grid; gap: 14px; }

@media (max-width: 900px) {
  .grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lado { position: static; }
}

/* ---------- Passos do formulário ---------- */

.passo { border-top: 1px solid var(--linha); padding-block: 22px; min-width: 0; }
.passo h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: 14px;
}
.passo h2 .n { font-family: var(--mono); color: var(--marca); margin-right: 0.6em; }
.dica { margin: 0; color: var(--suave); }

.opcoes { display: grid; gap: 8px; }
.opcao { display: block; cursor: pointer; }
.opcao input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.caixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--superficie);
}
.opcao:hover .caixa { border-color: var(--marca); }
.opcao input:checked + .caixa {
  border-color: var(--marca);
  box-shadow: inset 0 0 0 1px var(--marca);
  background: var(--marca-fraca);
}
.opcao input:focus-visible + .caixa { outline: 3px solid var(--foco); outline-offset: 2px; }
.chip { font-family: var(--mono); font-size: 0.8rem; color: var(--suave); white-space: nowrap; }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg .caixa { padding: 10px 14px; }

.dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.horas-grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 16px; }
.periodo { margin: 0 0 8px; font-size: 0.8rem; color: var(--suave); }

.dia, .hora {
  font: inherit;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.dia { display: grid; gap: 1px; padding: 8px 4px; line-height: 1.15; }
.dia .sem, .dia .mes { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--suave); }
.dia .dd { font-family: var(--mono); font-size: 1.4rem; font-weight: 600; }
.hora { padding: 10px 4px; font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums; }
.dia:hover, .hora:hover { border-color: var(--marca); }
.dia[aria-pressed="true"], .hora[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}
.dia[aria-pressed="true"] .sem, .dia[aria-pressed="true"] .mes { color: inherit; }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo.cheio { grid-column: 1 / -1; }
@media (max-width: 560px) { .campos { grid-template-columns: minmax(0, 1fr); } }
.campo label { font-weight: 600; font-size: 0.92rem; }
.campo .opc { font-weight: 400; color: var(--suave); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea,
.form-linha input, .form-linha select {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 11px 12px;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo.invalido input, .campo.invalido textarea { border-color: var(--perigo); }
.msg-campo { color: var(--perigo); font-size: 0.85rem; margin: 0; }
.campo label.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; font-weight: 400; color: var(--suave); }
.aceite input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--marca); }
.campo.invalido label.aceite { color: var(--perigo); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Comprovante (resumo) ---------- */

.comprovante {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 20px 20px 18px;
}
.comprovante .titulo {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--linha);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
}
.item { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.rot { color: var(--suave); font-size: 0.9rem; white-space: nowrap; }
.pontos { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--linha); transform: translateY(-4px); }
.val { text-align: right; font-weight: 600; overflow-wrap: anywhere; max-width: 62%; }
.val.vazio { font-weight: 400; color: var(--suave); }
.comprovante.riscado .val { text-decoration: line-through; color: var(--suave); }
.comprovante .rodape-slip {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--linha);
  font-size: 0.82rem;
  color: var(--suave);
}
.comprovante .botao { margin-top: 16px; width: 100%; }

/* ---------- Botões e avisos ---------- */

.botao {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 6px;
  border: 1px solid var(--marca);
  background: var(--marca);
  color: var(--sobre-marca);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.botao:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.botao.sec { background: transparent; color: var(--marca); }
.botao.sec:hover { background: var(--marca-fraca); }
.botao.perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
.botao.pequeno { padding: 7px 12px; font-size: 0.875rem; }
.botao[disabled] { opacity: 0.6; cursor: progress; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }

.aviso { margin: 0; padding: 12px 14px; border-radius: 6px; border: 1px solid; }
.aviso.erro { color: var(--perigo); border-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 8%, var(--superficie)); }
.aviso.ok { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--superficie)); }
.aviso.neutro { color: var(--tinta); border-color: var(--linha); background: var(--superficie); }

.rodape { text-align: center; color: var(--suave); font-size: 0.85rem; padding: 8px 16px 32px; }

/* ---------- Confirmação ---------- */

.conf { display: grid; gap: 18px; max-width: 640px; }
.conf .selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
}

/* ---------- Painel da equipe ---------- */

.barra-admin { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 24px; }
.abas a {
  padding: 10px 16px;
  text-decoration: none;
  color: var(--suave);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
}
.abas a[aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }
.link-publico {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 6px;
  margin-bottom: 24px;
}
.link-publico code { font-family: var(--mono); font-size: 0.9rem; overflow-wrap: anywhere; flex: 1; min-width: 0; }

.lista { display: grid; gap: 12px; }
.dia-titulo {
  margin: 20px 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}
.ag {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 14px 16px;
}
.ag-hora { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.3; }
.ag-hora small { display: block; font-weight: 400; color: var(--suave); font-size: 0.8rem; }
.ag-corpo { min-width: 0; display: grid; gap: 2px; }
.ag-corpo .nome { font-weight: 700; overflow-wrap: anywhere; }
.ag-corpo .msg { margin-top: 6px; padding: 8px 10px; background: var(--papel); border-radius: 4px; font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-acoes { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.etiqueta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--linha);
  color: var(--suave);
}
.etiqueta.cancelado { color: var(--perigo); border-color: var(--perigo); }
@media (max-width: 720px) {
  .ag { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ag-acoes { flex-direction: row; flex-wrap: wrap; }
}

.form-bloqueio { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; padding: 16px; margin-bottom: 24px; }
.form-linha { display: grid; gap: 6px; min-width: 0; }
.form-linha label { font-weight: 600; font-size: 0.9rem; }
.vazio-lista { color: var(--suave); padding: 24px 0; }
.login { max-width: 380px; margin: 8vh auto 0; display: grid; gap: 16px; }