/* agenda.paulacosta.com.br — identidade Paula Costa Psicóloga */
:root{
  --marinho:#213346; --azul:#416784; --areia:#bca791;
  --creme:#f5ede2; --creme-claro:#faf6ef; --tinta:#2a3a4d;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --ok:#2e7d60; --alerta:#b3544a;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--sans); font-weight:300; font-size:1.03rem;
  line-height:1.6; color:var(--tinta); background:var(--creme-claro); }
.wrap{ max-width:62rem; margin-inline:auto; padding-inline:1.25rem; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--marinho); margin:0 0 .4em; }
a{ color:var(--azul); text-underline-offset:3px; }
img{ max-width:100%; height:auto; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }

.topo{ background:var(--creme-claro); border-bottom:1px solid color-mix(in srgb, var(--areia) 45%, transparent); }
.topo .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.7rem; }
.topo img{ width:clamp(150px,18vw,190px); display:block; }
.topo a.voltar{ font-size:.92rem; color:var(--marinho); text-decoration:none; }
.topo a.voltar:hover{ text-decoration:underline; }

.cabecalho{ background:var(--marinho); color:var(--creme); }
.cabecalho .wrap{ padding-block:2.4rem 2.1rem; }
.cabecalho h1{ color:var(--creme); font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:.2em; }
.cabecalho p{ margin:0; color:color-mix(in srgb, var(--creme) 85%, var(--azul)); max-width:36rem; }

.botao{ display:inline-block; font-weight:500; font-size:1rem; text-decoration:none;
  border-radius:999px; padding:.75rem 1.6rem; border:none; cursor:pointer;
  transition:background .2s, color .2s; }
.botao-escuro{ background:var(--marinho); color:var(--creme); }
.botao-escuro:hover{ background:var(--azul); }
.botao-claro{ background:var(--creme); color:var(--marinho); border:1px solid var(--areia); }
.botao-claro:hover{ background:var(--areia); }

/* seletor presencial/online */
.modalidades{ display:flex; gap:.6rem; margin:1.6rem 0 1.2rem; }
.modalidade{ font:inherit; font-weight:500; padding:.6rem 1.4rem; border-radius:999px;
  border:1px solid var(--marinho); background:transparent; color:var(--marinho); cursor:pointer; }
.modalidade.ativa{ background:var(--marinho); color:var(--creme); }

/* grade de dias */
.grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:1rem; margin-bottom:2.5rem; }
.dia{ border-top:2px solid var(--areia); padding-top:.6rem; }
.dia h3{ font-family:var(--sans); font-size:.95rem; font-weight:600; margin-bottom:.1rem; }
.dia .data{ font-size:.82rem; color:color-mix(in srgb, var(--tinta) 70%, transparent); margin:0 0 .6rem; }
.horarios{ display:grid; gap:.45rem; }
.pilula{ display:block; text-align:center; font-weight:500; font-size:.98rem;
  background:var(--creme); color:var(--marinho); border:1px solid color-mix(in srgb, var(--areia) 70%, transparent);
  border-radius:999px; padding:.45rem .2rem; text-decoration:none; }
.pilula:hover{ background:var(--marinho); color:var(--creme); border-color:var(--marinho); }
.vazio{ padding:2.2rem 0 3rem; max-width:34rem; }

/* formulário */
.cartao{ background:#fff; border:1px solid color-mix(in srgb, var(--areia) 55%, transparent);
  border-radius:16px; padding:1.6rem 1.7rem; }
.resumo{ background:var(--marinho); color:var(--creme); border-radius:16px; padding:1.4rem 1.6rem; }
.resumo h3{ color:var(--creme); margin-bottom:.4em; }
.resumo p{ margin:.2em 0; font-size:.98rem; }
.resumo a{ color:var(--areia); }
.duas-colunas{ display:grid; grid-template-columns:minmax(15rem,22rem) 1fr; gap:1.6rem; align-items:start; padding-block:2rem 3rem; }
form.agendar{ display:grid; gap:1rem; }
form.agendar label{ display:grid; gap:.3rem; font-size:.92rem; font-weight:400; color:var(--marinho); }
form.agendar input, form.agendar select, form.agendar textarea{
  font:inherit; color:var(--tinta); background:#fff; border:1px solid color-mix(in srgb, var(--areia) 80%, transparent);
  border-radius:10px; padding:.65rem .8rem; }
.aviso{ font-size:.85rem; color:color-mix(in srgb, var(--tinta) 75%, transparent); }
.erro{ background:#fbeae8; border:1px solid var(--alerta); color:#7c2d25; border-radius:10px; padding:.8rem 1rem; }
.sucesso{ background:#e8f3ee; border:1px solid var(--ok); color:#1d4f3c; border-radius:10px; padding:.8rem 1rem; }

/* admin */
.admin-nav{ display:flex; gap:1.2rem; align-items:center; padding-block:1rem; flex-wrap:wrap; }
.admin-nav a{ color:var(--marinho); text-decoration:none; font-weight:500; }
.admin-nav a.ativo{ border-bottom:2px solid var(--areia); }
table{ width:100%; border-collapse:collapse; font-size:.95rem; background:#fff; border-radius:12px; overflow:hidden; }
th, td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid color-mix(in srgb, var(--areia) 35%, transparent); }
th{ background:var(--creme); color:var(--marinho); font-weight:600; }
.tag{ display:inline-block; font-size:.78rem; font-weight:500; border-radius:999px; padding:.1rem .6rem; }
.tag-pendente{ background:#f7ecd9; color:#8a6214; }
.tag-confirmado{ background:#e8f3ee; color:#1d4f3c; }
.tag-cancelado{ background:#f3e5e3; color:#7c2d25; }
.tag-livre{ background:#eef2f6; color:var(--azul); }
.acao{ font-size:.85rem; }
.form-linha{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:end; }
.form-linha label{ display:grid; gap:.25rem; font-size:.88rem; color:var(--marinho); }
.form-linha input, .form-linha select{ font:inherit; border:1px solid color-mix(in srgb, var(--areia) 80%, transparent); border-radius:8px; padding:.5rem .6rem; }
.dias-semana{ display:flex; gap:.5rem; flex-wrap:wrap; }
.dias-semana label{ flex-direction:row; display:flex; gap:.3rem; align-items:center; font-size:.9rem; }

.rodape{ background:var(--marinho); color:color-mix(in srgb, var(--creme) 80%, var(--azul)); margin-top:3rem; }
.rodape .wrap{ padding-block:1.6rem; font-size:.88rem; }
.rodape a{ color:var(--areia); }

@media (max-width:720px){
  .duas-colunas{ grid-template-columns:1fr; }
  .grade{ grid-template-columns:repeat(2, 1fr); }
}