/* questionario.css — o CSS do QUESTIONÁRIO, compartilhado (05/09/2026, noite).
   Morava inteiro no <style> do index.html. Saiu de lá no dia em que o questionário completo
   passou a viver TAMBÉM no Portal do Paciente (app/portal-paciente.html): duas telas, um motor
   (js/quiz.js), um CSS — copiar seria uma das cópias envelhecendo calada.
   ⚠️ As duas telas ligam este arquivo; nada daqui volta a ser escrito no index.html.
   ⚠️ Unidades em rem: no index.html o <html> tem 19px (var(--fs-base)); no portal, 16px. É de
      propósito — no portal a pergunta convive com a tela dos exames e não é a tela inteira. */
/* COM-005 Fase 1: tokens locais → contrato da plataforma (plataforma.css). Sem hex hardcoded.
   Questionário/check-in: padrão ESCURO via <html data-tema="escuro">. */
:root{
  --bg:var(--fundo);--s1:var(--superficie);--s2:var(--fundo-2);--s3:var(--borda);
  --border:var(--borda);
  --text:var(--texto);--muted:var(--texto-2);
  --gold:var(--acento);--gold2:var(--acento);
  --teal:var(--acento);--red:var(--erro);--green:var(--ok);--amber:var(--atencao);
  --r:14px;--rsm:10px;
  --fs-base:19px;--fs-sm:15px;--fs-xs:13px;
  --fs-h1:2.2rem;--fs-h2:1.6rem;--fs-q:1.65rem;
}
.quiz-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--s1);position:sticky;top:0;z-index:10}
.quiz-logo{font-family:'Playfair Display',serif;font-size:1rem;color:var(--gold);letter-spacing:.2em}
.quiz-prog{font-size:var(--fs-sm);color:var(--muted)}
.prog-wrap{height:4px;background:var(--s2)}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--teal));transition:width .4s cubic-bezier(.4,0,.2,1)}
.quiz-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.3rem;min-height:calc(100vh - 80px)}
.q-wrap{width:100%;max-width:500px;animation:slideIn .28s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.section-badge{display:inline-flex;align-items:center;gap:.65rem;padding:.6rem 1.1rem;background:var(--s2);border:1px solid var(--border);border-radius:99px;font-size:.9rem;font-weight:600;color:var(--muted);margin-bottom:1.8rem}
.s-icon{font-size:1.25rem}
.s-icon .ico{width:1.25rem;height:1.25rem}
.q-label{font-family:'Playfair Display',serif;font-size:var(--fs-q);font-weight:600;line-height:1.3;text-align:center;margin-bottom:.5rem;color:var(--text)}
.q-sub{text-align:center;font-size:var(--fs-sm);color:var(--muted);margin-bottom:1.8rem;line-height:1.5}
.opt-list{display:flex;flex-direction:column;gap:.7rem}
.opt-big{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.3rem;border-radius:var(--r);border:1.5px solid var(--border);background:var(--s1);cursor:pointer;transition:all .18s;text-align:left;width:100%}
@media(hover:hover){.opt-big:hover{border-color:var(--gold);background:var(--s2)}}
.opt-big.sel-yes{border-color:var(--green);background:rgba(52,211,153,.1)}
.opt-radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:all .18s}
.opt-big.sel-yes .opt-radio{background:var(--green);border-color:var(--green)}
.opt-name{font-weight:600;font-size:1.05rem;color:var(--text)}
.opt-hint{font-size:var(--fs-xs);color:var(--muted);margin-top:.2rem}
.freq3-list{display:flex;flex-direction:column;gap:.65rem}
.freq3-item{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;transition:border-color .18s}
.freq3-item.f-occ{border-color:var(--amber)}
.freq3-item.f-yes{border-color:var(--red);background:rgba(248,113,113,.05)}
.freq3-nome{font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:.7rem}
.freq3-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}
.f3btn{padding:.65rem .3rem;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s2);color:var(--muted);font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .18s;text-align:center;line-height:1.3}
@media(hover:hover){.f3btn:hover{border-color:var(--gold);color:var(--text)}}
.f3btn.active-no{border-color:var(--green);background:rgba(52,211,153,.12);color:var(--green)}
.f3btn.active-occ{border-color:var(--amber);background:rgba(251,191,36,.12);color:var(--amber)}
.f3btn.active-yes{border-color:var(--red);background:rgba(248,113,113,.12);color:var(--red)}
/* Âncora 0–4 (MSQ). Só tokens do contrato visual — COM-004, nenhum hex à mão. */
.sev5-legenda{background:var(--s1);border:1px solid var(--border);border-radius:var(--rsm);padding:.8rem .9rem;margin-bottom:.9rem;display:flex;flex-direction:column;gap:.3rem}
.s5leg-tit{font-size:var(--fs-xs);color:var(--muted);margin-bottom:.25rem}
.s5leg-item{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.35}
.s5leg-n{flex:0 0 1.35rem;height:1.35rem;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text)}
.sev5-item{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.55rem;transition:border-color .18s}
.sev5-item.s5-1,.sev5-item.s5-2{border-color:var(--amber)}
.sev5-item.s5-3,.sev5-item.s5-4{border-color:var(--red);background:rgba(248,113,113,.05)}
.sev5-nome{font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:.7rem}
.sev5-btns{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.s5btn{min-height:48px;padding:.6rem .2rem;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s2);color:var(--muted);font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .18s;text-align:center}
@media(hover:hover){.s5btn:hover{border-color:var(--gold);color:var(--text)}}
.s5btn.s5-sel{border-color:var(--green);background:rgba(52,211,153,.12);color:var(--green)}
.s5btn.s5-sel.s5-1,.s5btn.s5-sel.s5-2{border-color:var(--amber);background:rgba(251,191,36,.12);color:var(--amber)}
.s5btn.s5-sel.s5-3,.s5btn.s5-sel.s5-4{border-color:var(--red);background:rgba(248,113,113,.12);color:var(--red)}
/* ── Escalas de 6 pontos: WHO-5 e CS-10 (21/08/2026) ──────────────────────────────────
   ⚠️ Sem cor de valência, de propósito. No WHO-5 o 5 é a MELHOR resposta; na CS-10 o 5 é a
   PIOR. Verde para "alto" acertaria numa e mentiria na outra — então as duas usam o mesmo
   destaque neutro, e quem diz o sentido é a legenda do bloco. */
.esc6-btns{grid-template-columns:repeat(6,1fr)}
.s5btn.esc6-btn{font-size:.95rem}
.sev5-item.esc6-marcado{border-color:var(--gold)}
.s5btn.esc6-sel{border-color:var(--gold);background:var(--s1);color:var(--gold)}
/* Campo numérico (PAVS) */
.num-linha{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* Módulos validados (GAD-7 / PHQ-9) e tela do CVV. Só tokens — COM-004. */
.mod-selo{border:1px solid var(--gold);border-radius:var(--rsm);padding:.75rem .9rem;margin-bottom:1rem;background:var(--s1)}
.mod-selo-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.mod-sigla{font-weight:800;letter-spacing:.06em;color:var(--gold)}
.mod-nome{font-size:var(--fs-xs);color:var(--text)}
.mod-fonte{font-size:var(--fs-xs);color:var(--muted);margin-top:.35rem;line-height:1.4}
.mod-abriu{margin-top:.9rem;padding:.8rem .9rem;border:1px solid var(--gold);border-radius:var(--rsm);background:var(--s1);font-size:var(--fs-xs);color:var(--text);line-height:1.45}
.phq-item{background:var(--s1);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.55rem;transition:border-color .18s}
.phq-item.phq-marcado{border-color:var(--amber)}
.phq-nome{font-size:1.02rem;font-weight:500;color:var(--text);margin-bottom:.7rem;line-height:1.45}
.phq-btns{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.phqbtn{min-height:52px;padding:.55rem .5rem;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s2);color:var(--muted);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:.5rem;text-align:left;line-height:1.25}
.phq-n{flex:0 0 1.4rem;height:1.4rem;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.8rem}
@media(hover:hover){.phqbtn:hover{border-color:var(--gold);color:var(--text)}}
.phqbtn.phq-sel{border-color:var(--gold);background:rgba(212,175,55,.12);color:var(--text)}
/* Escala com opções próprias (Wexner). Uma coluna: os rótulos são frases inteiras
   ("1 ou 2 vezes a cada 1 a 2 dias") e em duas colunas quebram em quatro linhas. */
.esc-btns{grid-template-columns:1fr}
.esc-btns .phqbtn{min-height:44px}
.cvv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:1.2rem;z-index:9999;overflow-y:auto}
.cvv-caixa{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem 1.4rem;max-width:30rem;width:100%;color:var(--text);line-height:1.55}
.cvv-tit{font-size:1.2rem;font-weight:700;margin-bottom:.9rem}
.cvv-caixa p{margin:0 0 .9rem;font-size:.96rem}
.cvv-num{background:var(--s2);border:1px solid var(--gold);border-radius:var(--rsm);padding:1rem;margin:1.1rem 0;text-align:center;line-height:1.7}
.cvv-tel{display:inline-block;font-size:2.1rem;font-weight:800;color:var(--gold);text-decoration:none;letter-spacing:.06em}
.cvv-emerg{font-size:.9rem;color:var(--muted)}
.cvv-clin{font-size:.9rem;color:var(--muted);border-top:1px solid var(--border);padding-top:.9rem}
.cvv-ok{width:100%;min-height:52px;margin-top:.4rem;border-radius:var(--rsm);border:1.5px solid var(--gold);background:var(--gold);color:var(--s0,#111);font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer}
.chk-grid{display:flex;flex-direction:column;gap:.55rem}
.chk-btn{padding:1rem 1.2rem;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s1);color:var(--muted);font-family:'Inter',sans-serif;font-size:1rem;font-weight:500;cursor:pointer;transition:all .18s;text-align:left}
@media(hover:hover){.chk-btn:hover{border-color:var(--gold);color:var(--text)}}
.chk-btn.chk-sel{border-color:var(--gold);background:rgba(201,169,110,.12);color:var(--gold2)}
.num-grid{display:flex;flex-direction:column;gap:.9rem}
.num-item{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border:1px solid var(--border);border-radius:var(--rsm);padding:1rem 1.2rem;gap:.8rem}
.num-label{font-size:1rem;color:var(--text);font-weight:500;flex:1}
.num-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.num-input{width:90px;padding:.55rem .7rem;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:'Inter',sans-serif;font-size:1rem;outline:none;text-align:center}
.num-input:focus{border-color:var(--gold)}
.num-unit{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.bristol-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.bri-btn{border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s1);cursor:pointer;transition:all .18s;padding:.8rem;text-align:center}
@media(hover:hover){.bri-btn:hover{border-color:var(--gold)}}
.bri-btn.bri-sel{border-color:var(--gold);background:rgba(201,169,110,.13)}
.bri-svg{display:block;margin:0 auto .45rem}
.bri-tipo{font-size:.9rem;font-weight:700;color:var(--text)}
.bri-desc{font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem;line-height:1.35}
.scale-block{margin-bottom:1.3rem}
.scale-lbl{font-size:1rem;color:var(--text);font-weight:500;margin-bottom:.55rem}
.scale-row{display:flex;gap:.4rem}
.scale-btn{flex:1;height:52px;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s1);color:var(--muted);font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .18s}
@media(hover:hover){.scale-btn:hover{border-color:var(--gold);color:var(--text)}}
.scale-btn.scale-sel{border-color:var(--gold);background:rgba(201,169,110,.18);color:var(--gold2)}
.scale-labels{display:flex;justify-content:space-between;margin-top:.3rem;font-size:var(--fs-xs);color:var(--muted)}
.yn-multi{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.9rem}
.yn-btn{padding:1.1rem;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s1);color:var(--text);font-family:'Inter',sans-serif;font-size:1rem;font-weight:500;cursor:pointer;transition:all .18s;text-align:center}
@media(hover:hover){.yn-btn:hover{border-color:var(--gold)}}
.yn-btn.yn-sim{border-color:var(--red);background:rgba(248,113,113,.1);color:var(--red)}
.yn-btn.yn-nao{border-color:var(--green);background:rgba(52,211,153,.1);color:var(--green)}
.atv-freq{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.9rem}
.txt-input{width:100%;padding:1rem;background:var(--s1);border:1.5px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:'Inter',sans-serif;font-size:1rem;outline:none;transition:border-color .2s;resize:none;line-height:1.55}
.txt-input:focus{border-color:var(--gold)}
.txt-input::placeholder{color:var(--muted)}
/* Campos multi — quiz v2 */
.campo{margin-bottom:1.4rem}
.campo-lbl{font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:.6rem;line-height:1.4}
.campo-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:-.35rem;margin-bottom:.6rem;line-height:1.5}
.btns-inline{display:flex;flex-wrap:wrap;gap:.5rem}
.binline{flex:1 1 30%;min-width:120px;padding:.85rem 1rem;border-radius:var(--rsm);border:1.5px solid var(--border);background:var(--s1);color:var(--text);font-family:'Inter',sans-serif;font-size:.98rem;font-weight:500;cursor:pointer;transition:all .18s;text-align:center}
@media(hover:hover){.binline:hover{border-color:var(--gold)}}
.binline.bin-sel{border-color:var(--gold);background:rgba(201,169,110,.16);color:var(--gold2)}
/* Porta de bloco: uma pergunta só; as demais do bloco só aparecem se responder 'sim'. */
.campo-porta{padding:1rem;border:1px solid var(--border);border-radius:var(--rsm);background:var(--s1);margin-bottom:1rem}
.campo-porta .campo-lbl{font-weight:600;line-height:1.45}
.campo-porta .btns-inline{margin-top:.85rem}
.porta-btn{flex:1 1 46%;min-height:52px;font-size:1rem}
.q-txt{width:100%;padding:.85rem 1rem;background:var(--s1);border:1.5px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:'Inter',sans-serif;font-size:1rem;outline:none;transition:border-color .2s}
.q-txt:focus{border-color:var(--gold)}
.q-txt::placeholder{color:var(--muted)}
.freq3-item{margin-bottom:.55rem}
.obj-hint{font-size:var(--fs-xs);color:var(--gold);margin-bottom:.6rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.quem-list{display:flex;flex-direction:column;gap:.5rem}
.quem-row{display:flex;gap:.5rem;align-items:stretch}
.quem-chk{flex:1;text-align:left}
.quem-inp{width:120px;flex-shrink:0}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.btn-ghost{background:none;border:1.5px solid var(--border);color:var(--muted);padding:.8rem 1.3rem;border-radius:var(--rsm);font-family:'Inter',sans-serif;font-size:1rem;cursor:pointer;transition:all .18s}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.btn-ghost:disabled{opacity:.25;pointer-events:none}
.btn-next{background:var(--acento);border:none;color:white;padding:.85rem 2.2rem;border-radius:var(--rsm);font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s;opacity:.25;pointer-events:none}
.btn-next.ready{opacity:1;pointer-events:all}
/* Toast de sync */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--s1);border:1px solid var(--border);border-radius:var(--rsm);padding:.8rem 1.2rem;font-size:var(--fs-sm);color:var(--text);z-index:9998;display:none;align-items:center;gap:.6rem;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast.show{display:flex}
.toast.ok{border-color:rgba(52,211,153,.4);color:var(--green)}
.toast.err{border-color:rgba(248,113,113,.4);color:var(--red)}
