/* Painel clínico — identidade visual (mesma linguagem do site psicologajuliaoliveira.com.br).
   Tokens do plano (seção 7). Fontes servidas pelo próprio painel (OFL). */

@font-face { font-family: "Fredoka"; src: url("../fontes/fredoka-latin-wght-normal.9591efe1be62.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fontes/quicksand-latin-wght-normal.9d503278216c.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fontes/josefin-sans-latin-wght-normal.4316a5aa6c07.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --paper: #FAF8F2;
  --paper-2: #F3EFE3;
  --surface: #FFFFFF;
  --teal: #88B8BF;
  --teal-deep: #3F7B84;
  --rosa: #EE9E9E;
  --rosa-deep: #C4666C;
  --lilas: #7F86D6;
  --lilas-deep: #585FB0;
  --lilas-soft: #E7E8F8;
  --manteiga: #F5EDB0;
  --whatsapp: #25A366;
  --ink: #3E4263;
  --ink-soft: #676B8C;
  --ink-deep: #2C3050;
  --linha: #E4DFD0;
  --raio: 22px;
  --raio-lg: 28px;
  --raio-sm: 14px;
  --sombra: 0 18px 40px -22px rgba(62, 66, 99, 0.25);
  --arco: linear-gradient(90deg, #EE9E9E 0%, #F5C9A0 20%, #F5EDB0 40%, #A9D3BE 60%, #88B8BF 78%, #7F86D6 100%);
  --foco: 0 0 0 3px rgba(127, 134, 214, 0.35);
  --titulo: "Fredoka", "Quicksand", system-ui, sans-serif;
  --texto: "Quicksand", system-ui, sans-serif;
  --etiqueta: "Josefin Sans", "Quicksand", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: var(--texto); font-size: 16.5px; line-height: 1.55; font-weight: 500;
}
a { color: var(--lilas-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink-deep); }
h1, h2, h3 { font-family: var(--titulo); color: var(--ink-deep); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
h2 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 10px; }

/* ---- estrutura ---------------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 10; background: rgba(250, 248, 242, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
}
.topo::after { content: ""; display: block; height: 3px; background: var(--arco); opacity: .8; }
.topo-dentro { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--ink-deep); margin-right: auto; }
.marca-nome { font-family: var(--titulo); font-size: 1.15rem; font-weight: 600; }
.eyebrow {
  font-family: var(--etiqueta); text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; color: var(--ink-soft); font-weight: 600;
}
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--ink); padding: 8px 12px; border-radius: 999px; font-weight: 600; }
.nav a[aria-current="page"], .nav a:hover { background: var(--lilas-soft); color: var(--lilas-deep); }

.conteudo { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
.estreito { max-width: 460px; margin: 0 auto; padding: 40px 16px 64px; }

/* ---- cartões ------------------------------------------------------------------------ */
.cartao {
  background: var(--surface); border-radius: var(--raio-lg); box-shadow: var(--sombra);
  padding: 24px; border: 1px solid rgba(228, 223, 208, .7);
}
.cartao + .cartao { margin-top: 16px; }
.grade > .cartao { margin-top: 0; }
.cartao-suave { background: var(--paper-2); box-shadow: none; }
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vazio { color: var(--ink-soft); font-style: italic; }

/* ---- etiquetas (categorias da agenda) -------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--etiqueta); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  background: var(--paper-2); color: var(--ink);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-anamnese { background: #E3EEF8; color: #2F5F8F; }
.badge-regular { background: #E2F2EA; color: #2F7A55; }
.badge-devolutiva { background: var(--lilas-soft); color: var(--lilas-deep); }
.badge-reuniao { background: #FBF5D5; color: #8A7417; }
.badge-ok { background: #E2F2EA; color: #2F7A55; }
.badge-pendente { background: #FBE7E7; color: var(--rosa-deep); }

/* ---- formulários (inclui os do allauth) ---------------------------------------------- */
form p, .campo { margin: 0 0 14px; }
label { display: block; font-weight: 600; color: var(--ink-deep); margin-bottom: 6px; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; color: var(--ink-deep); background: var(--surface);
  border: 1.5px solid var(--linha); border-radius: var(--raio-sm); padding: 12px 14px; min-height: 48px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lilas); box-shadow: var(--foco); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--lilas-deep); vertical-align: middle; }
.helptext, form .helptext, form ul.helptext, form small { display: block; color: var(--ink-soft); font-size: .85rem; margin-top: 4px; }
.errorlist { list-style: none; padding: 10px 14px; margin: 0 0 12px; background: #FBE7E7; color: #8E3B40;
  border-radius: var(--raio-sm); font-weight: 600; font-size: .92rem; }

button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  font: inherit; font-weight: 700; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; background: var(--lilas-deep); color: #fff; text-decoration: none;
  transition: transform .08s ease, background .15s ease;
}
button:hover, .botao:hover { background: var(--ink-deep); color: #fff; }
button:active, .botao:active { transform: scale(.98); }
.botao-largo, form button[type=submit] { width: 100%; }
.botao-contorno { background: transparent; color: var(--lilas-deep); border-color: var(--lilas); }
.botao-contorno:hover { background: var(--lilas-soft); color: var(--lilas-deep); }
.botao-teal { background: var(--teal-deep); }
.botao-perigo { background: var(--rosa-deep); }
.botao-whatsapp { background: var(--whatsapp); }
.botao-pequeno { min-height: 38px; padding: 6px 14px; font-size: .92rem; }
.botao-bloquear { background: var(--ink-deep); }
.botao-bloquear:hover { background: var(--rosa-deep); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.separador { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); margin: 20px 0;
  font-family: var(--etiqueta); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

/* ---- avisos -------------------------------------------------------------------------- */
.aviso { padding: 14px 16px; border-radius: var(--raio); margin-bottom: 16px; background: var(--manteiga); color: var(--ink-deep); font-weight: 600; }
.aviso-info { background: var(--lilas-soft); }
.aviso-ok { background: #E2F2EA; }
.aviso-erro { background: #FBE7E7; color: #8E3B40; }
.mensagens { list-style: none; padding: 0; margin: 0 0 16px; }

/* ---- entrada (login, primeiro acesso) ------------------------------------------------- */
.entrada-marca { text-align: center; margin-bottom: 24px; }
.entrada-marca .arco { width: 72px; height: 6px; border-radius: 6px; background: var(--arco); margin: 12px auto 0; }
.cadeado { font-size: 2.2rem; display: block; margin-bottom: 6px; }

/* ---- tabelas e listas (allauth usa table/ul) --------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linha); }
th { font-family: var(--etiqueta); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--ink-soft); }
.lista-status { list-style: none; padding: 0; margin: 0; }
.lista-status li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.lista-status li:last-child { border-bottom: 0; }
code, pre, .codigos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre, .codigos { background: var(--paper-2); padding: 16px; border-radius: var(--raio-sm); white-space: pre-wrap; font-size: 1.05rem; letter-spacing: .06em; }

/* ---- bloqueio imediato da tela ------------------------------------------------------- */
body.bloqueando .topo, body.bloqueando main { display: none !important; }
body.bloqueando::after {
  content: "🔒  Tela bloqueada"; position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--paper); font-family: var(--titulo); font-size: 1.6rem; color: var(--ink-deep);
}

/* ---- pequeno ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .topo-dentro { gap: 6px; padding: 8px 12px; }
  .nav { gap: 0; }
  .nav a { padding: 8px 9px; font-size: .92rem; }
  .marca .eyebrow { display: none; }
  .marca-nome { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
  .botao-bloquear { padding: 6px 12px; min-height: 40px; }
  .botao-bloquear .rotulo { display: none; }
  .cartao { padding: 18px; border-radius: var(--raio); }
}
@media print { .topo, .acoes, button { display: none !important; } body { background: #fff; } }
.mt { margin-top: 16px; }