/* ============================================================================
   AVALIAÇÃO DE SAÚDE MENTAL — estilos da página /saude-mental/avaliacao/
   ============================================================================
   Complementa /css/global.css. Reaproveita as variáveis e as classes .btn,
   .btn-row, .visually-hidden já definidas lá; aqui só existe o que é
   específico da ferramenta.

   Prefixo .mh- para não colidir com nada do design system.
   ========================================================================= */

.mh-app{margin:28px 0 8px}

/* ── Escolha do instrumento ─────────────────────────────────────────── */
.mh-escolha{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

.mh-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:22px 20px;border:1.5px solid var(--brd,#e3e0d8);border-radius:16px;
  background:var(--surf,#fff);cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.mh-card:hover{border-color:var(--g,#2d6a4f);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(45,106,79,.10)}
.mh-card:focus-visible{outline:3px solid var(--g3,#95d5b2);outline-offset:3px}
.mh-card__tag{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--g,#2d6a4f)}
.mh-card__nome{font-size:19px;font-weight:600;color:var(--txt,#1a1a17);letter-spacing:-.3px}
.mh-card__desc{font-size:13.5px;line-height:1.6;color:var(--txt2,#55534c)}
.mh-card__meta{font-size:11.5px;color:var(--txt3,#8a887f);margin-top:4px}

/* ── Questionário ───────────────────────────────────────────────────── */
.mh-quiz__head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mh-quiz__inst{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--g,#2d6a4f)}
.mh-quiz__count{font-size:12.5px;color:var(--txt3,#8a887f);font-variant-numeric:tabular-nums}

.mh-prog{height:4px;border-radius:99px;background:var(--brd,#e3e0d8);overflow:hidden}
.mh-prog__fill{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--g3,#95d5b2),var(--g,#2d6a4f));
  transition:width .4s cubic-bezier(.4,0,.2,1)}

.mh-quiz{margin-top:22px;padding:28px 24px;border:1px solid var(--brd,#e3e0d8);
  border-radius:18px;background:var(--surf,#fff)}
.mh-quiz.is-in{animation:mhIn .3s cubic-bezier(.4,0,.2,1) both}
@keyframes mhIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mh-quiz__prompt{font-size:12.5px;line-height:1.6;color:var(--txt3,#8a887f);
  padding-bottom:14px;border-bottom:1px solid var(--brd,#e3e0d8)}
.mh-quiz__q{font-size:clamp(19px,3.2vw,25px);line-height:1.35;font-weight:400;
  margin-top:18px;color:var(--txt,#1a1a17)}
.mh-quiz__q:focus{outline:none}
.mh-quiz__q:focus-visible{outline:3px solid var(--g3,#95d5b2);outline-offset:6px;border-radius:4px}
.mh-quiz__hint{font-size:12.5px;color:var(--txt3,#8a887f);margin-top:12px}
.mh-quiz__help{margin-top:20px;text-align:center;font-size:12px;color:var(--txt3,#8a887f)}

/* Opções — inputs radio reais, estilizados */
.mh-opts{display:flex;flex-direction:column;gap:9px;margin-top:20px;border:0;padding:0}
.mh-opt{position:relative;display:flex;align-items:center;gap:13px;padding:16px 18px;
  border:1.5px solid var(--brd,#e3e0d8);border-radius:12px;cursor:pointer;
  background:var(--surf2,#faf9f6);min-height:56px;
  transition:border-color .2s,background .2s}
.mh-opt:hover{border-color:var(--g3,#95d5b2)}
.mh-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mh-opt__mark{width:21px;height:21px;flex-shrink:0;border-radius:50%;
  border:1.5px solid var(--brd2,#c9c5b8);display:flex;align-items:center;justify-content:center;
  background:var(--surf,#fff);transition:border-color .2s}
.mh-opt__mark::after{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--g,#2d6a4f);transform:scale(0);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.mh-opt__lbl{font-size:15px;line-height:1.4;color:var(--txt,#1a1a17)}
.mh-opt input:checked~.mh-opt__mark{border-color:var(--g,#2d6a4f)}
.mh-opt input:checked~.mh-opt__mark::after{transform:scale(1)}
.mh-opt:has(input:checked){border-color:var(--g,#2d6a4f);background:var(--gf,#f2f8f4)}
.mh-opt input:focus-visible~.mh-opt__mark{outline:3px solid var(--g3,#95d5b2);outline-offset:3px}

.mh-nav{display:flex;gap:12px;margin-top:22px}
.mh-nav .btn:first-child{margin-right:auto}
.mh-nav .btn[disabled]{opacity:.42;cursor:not-allowed}

/* ── Fluxo de segurança ─────────────────────────────────────────────── */
.mh-safety{border:1.5px solid var(--amb,#9a5d22);border-radius:18px;
  background:var(--ambp,#fdf6ec);padding:26px 24px;margin-bottom:22px}
.mh-safety:focus{outline:none}
.mh-safety__top{display:flex;align-items:center;gap:11px}
.mh-safety__top svg{width:22px;height:22px;stroke:var(--amb,#9a5d22);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mh-safety__top h2{font-size:17px;font-weight:600;margin:0;color:var(--txt,#1a1a17)}
.mh-safety p{font-size:14px;line-height:1.75;color:var(--txt2,#55534c);margin-top:14px}
.mh-safety__acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mh-safety__call{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;
  border-radius:12px;background:var(--surf,#fff);border:1.5px solid var(--amb,#9a5d22);
  text-decoration:none;min-height:52px;transition:background .2s}
.mh-safety__call:hover{background:var(--amb,#9a5d22)}
.mh-safety__call:hover .n,.mh-safety__call:hover .d{color:#fff}
.mh-safety__call:hover svg{stroke:#fff}
.mh-safety__call svg{width:18px;height:18px;stroke:var(--amb,#9a5d22);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:stroke .2s}
.mh-safety__call .n{display:block;font-size:15px;font-weight:700;line-height:1.2;
  color:var(--txt,#1a1a17);transition:color .2s}
.mh-safety__call .d{display:block;font-size:11.5px;margin-top:2px;
  color:var(--txt3,#8a887f);transition:color .2s}
.mh-safety__fim{font-size:12.5px}

/* ── Resultado ──────────────────────────────────────────────────────── */
.mh-res{border:1px solid var(--brd,#e3e0d8);border-radius:18px;
  background:var(--surf,#fff);padding:28px 24px}
.mh-res.is-attn{border-color:var(--amb,#9a5d22)}
.mh-res__top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.mh-res__titulo{font-size:18px;font-weight:600;margin:0;color:var(--txt,#1a1a17)}
.mh-res__sub{font-size:12px;color:var(--txt3,#8a887f);margin-top:5px}
.mh-res__score{text-align:right;flex-shrink:0}
.mh-res__score b{font-family:'Playfair Display',serif;font-size:36px;font-weight:400;
  line-height:1;letter-spacing:-1px;color:var(--g,#2d6a4f);font-variant-numeric:tabular-nums}
.mh-res.is-attn .mh-res__score b{color:var(--amb,#9a5d22)}
.mh-res__score span{display:block;font-size:12px;color:var(--txt3,#8a887f);margin-top:5px}
.mh-res__read{margin-top:20px;padding-top:19px;border-top:1px solid var(--brd,#e3e0d8)}
.mh-res__read p{font-size:14.5px;line-height:1.75;color:var(--txt2,#55534c)}
.mh-res__read p+p{margin-top:11px}
.mh-res__ref{font-size:11.5px;color:var(--txt3,#8a887f);margin-top:16px;line-height:1.55}

/* Régua de faixas */
.mh-escala{margin-top:22px}
.mh-escala__bar{display:flex;gap:3px;height:9px}
.mh-escala__seg{background:var(--gl,#d8ede0);border-radius:3px}
.mh-escala__seg.is-cur{background:var(--g,#2d6a4f)}
.mh-escala__seg.is-cur.is-attn{background:var(--amb,#9a5d22)}
.mh-escala__lbls{display:flex;gap:3px;margin-top:9px}
.mh-escala__lbl{font-size:10px;line-height:1.35;text-align:center;color:var(--txt3,#8a887f)}
.mh-escala__lbl.is-cur{color:var(--txt,#1a1a17);font-weight:700}
.mh-escala__range{display:flex;justify-content:space-between;margin-top:11px;
  font-size:11px;color:var(--txt3,#8a887f)}

/* Barra contínua do WHO-5 */
.mh-pct{margin-top:22px}
.mh-pct__track{height:10px;border-radius:99px;background:var(--gl,#d8ede0);overflow:hidden}
.mh-pct__fill{height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--g3,#95d5b2),var(--g,#2d6a4f));
  transition:width .8s cubic-bezier(.4,0,.2,1)}
.mh-pct__fill.is-attn{background:linear-gradient(90deg,#c98a4b,var(--amb,#9a5d22))}
.mh-pct__scale{display:flex;justify-content:space-between;margin-top:9px;
  font-size:11px;color:var(--txt3,#8a887f)}

/* ── Aviso, CTA, ações ──────────────────────────────────────────────── */
.mh-aviso{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px;
  border-radius:12px;background:var(--surf2,#faf9f6);border:1px solid var(--brd,#e3e0d8)}
.mh-aviso svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;stroke:var(--g,#2d6a4f);
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-aviso p{font-size:13px;line-height:1.65;color:var(--txt2,#55534c)}

.mh-cta{margin-top:26px;padding:28px 24px;border-radius:18px;
  background:linear-gradient(135deg,var(--gd,#1b4332) 0%,var(--g,#2d6a4f) 100%);color:#fff}
.mh-cta h2{font-family:'Playfair Display',serif;font-size:clamp(21px,3.2vw,27px);
  font-weight:400;line-height:1.2;margin:0}
.mh-cta p{font-size:14.5px;line-height:1.75;margin-top:12px;color:rgba(255,255,255,.88)}
.mh-cta .btn-row{margin-top:20px}
.mh-cta .btn--primary{background:#fff;color:var(--gd,#1b4332);border-color:#fff}
.mh-cta .btn--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

.mh-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mh-nota{font-size:12.5px;line-height:1.65;color:var(--txt3,#8a887f);margin-top:18px}

/* ── Conteúdo editorial da página ───────────────────────────────────── */
.mh-def{margin:0 0 18px;padding:18px 20px;border-left:3px solid var(--g3,#95d5b2);
  background:var(--surf2,#faf9f6);border-radius:0 12px 12px 0}
.mh-def dt{font-weight:600;color:var(--txt,#1a1a17);font-size:15px}
.mh-def dd{margin:6px 0 0;font-size:14.5px;line-height:1.7;color:var(--txt2,#55534c)}
.mh-def+.mh-def{margin-top:14px}

.mh-refs{font-size:13px;line-height:1.75;color:var(--txt2,#55534c);padding-left:20px}
.mh-refs li+li{margin-top:8px}

.mh-autoria{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding:16px 18px;
  border-radius:12px;border:1px solid var(--brd,#e3e0d8);background:var(--surf2,#faf9f6)}
.mh-autoria p{font-size:13px;line-height:1.65;color:var(--txt2,#55534c);margin:0}
.mh-autoria strong{color:var(--txt,#1a1a17)}

/* ── Responsivo ─────────────────────────────────────────────────────── */
@media(max-width:560px){
  .mh-quiz{padding:22px 18px}
  .mh-res{padding:22px 18px}
  .mh-cta{padding:24px 18px}
  .mh-opt{padding:17px 16px;min-height:62px}
  .mh-nav{gap:10px}
  .mh-nav .btn{flex:1;justify-content:center}
  .mh-escala__lbl{font-size:8.5px}
  .mh-res__score{text-align:left}
}

/* ── Movimento reduzido ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .mh-quiz.is-in{animation:none}
  .mh-prog__fill,.mh-pct__fill{transition:none}
  .mh-card:hover{transform:none}
}

/* ── Impressão: o paciente leva o resultado à consulta ──────────────── */
@media print{
  .site-header,.site-footer,.breadcrumb,.mh-cta,.mh-acoes,.mh-nav{display:none!important}
  .mh-res,.mh-safety{break-inside:avoid;border-color:#bbb}
  body{background:#fff}
}