/* Diagnostico de aderencia ao ICP (24/10/2026): so a pagina /teste-de-aderencia-ao-icp/ carrega este
   arquivo. Cores so por variavel do style.css, que tem valor nos quatro temas. */
.diag{position:relative;max-width:1180px;margin:0 auto;padding:clamp(22px,3.2vw,48px);border:1px solid var(--borda);border-radius:28px;background:var(--superficie);box-shadow:var(--sombra)}
.diag-cab{max-width:62ch;margin-bottom:clamp(22px,2.6vw,34px)}
.diag-cab .olho{display:block;margin-bottom:10px}
.diag-cab h2{max-width:none;margin:0;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:600;color:var(--tinta)}
.diag-cab p{margin:12px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--tinta-2)}

.diag-corpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,44px);align-items:start}
.diag-palco{min-width:0}

/* sem JavaScript, tudo aparece em coluna; com ele, uma tela por vez */
.diag-tela{border:0;margin:0;padding:0;min-width:0}
.diag-vivo .diag-tela{display:none}
.diag-vivo .diag-tela.ativa{display:block}
.diag-tela:focus{outline:none}
.diag:not(.diag-vivo) .diag-res,.diag:not(.diag-vivo) .diag-painel,.diag:not(.diag-vivo) .diag-inicio .diag-acoes{display:none}
.diag:not(.diag-vivo) .diag-q{margin-top:28px}
.vem-frente{animation:diag-frente .44s cubic-bezier(.2,.8,.2,1)}
.vem-tras{animation:diag-tras .44s cubic-bezier(.2,.8,.2,1)}
@keyframes diag-frente{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes diag-tras{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* abertura */
.diag-campo{display:flex;flex-direction:column;gap:8px;max-width:520px}
.diag-campo span{font-weight:600;font-size:16px;color:var(--tinta)}
.diag-campo small{font-weight:400;font-size:13.5px;color:var(--tinta-3);margin-left:4px}
.diag-campo input{height:54px;padding:0 18px;border:1px solid var(--borda-forte);border-radius:14px;background:var(--superficie);color:var(--tinta);font:inherit;font-size:17px;transition:border-color .15s ease,box-shadow .15s ease}
.diag-campo input::placeholder{color:var(--tinta-3)}
.diag-campo input:focus{outline:none;border-color:var(--acao);box-shadow:0 0 0 4px var(--acao-fraca)}
.diag-mede{margin:28px 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.diag-dims{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.diag-dims li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--borda);border-radius:16px;background:var(--plano)}
.diag-dims i{grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;background:var(--acao-fraca);color:var(--acao-tinta)}
.diag-dims b{font-size:16px;color:var(--tinta)}
.diag-dims span{font-size:14px;line-height:1.4;color:var(--tinta-2)}
.diag-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px}
.diag-tempo{font-size:14px;color:var(--tinta-3)}

/* progresso */
.diag-topo{display:grid;grid-template-columns:auto auto minmax(0,1fr);justify-items:start;align-items:center;gap:14px 16px;margin-bottom:clamp(22px,2.4vw,32px)}
.diag-voltar{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px 6px 10px;border:1px solid var(--borda-forte);border-radius:99px;background:transparent;color:var(--tinta-2);font:inherit;font-size:14px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.diag-voltar:hover{border-color:var(--acao);color:var(--acao-tinta)}
.diag-voltar:active{transform:scale(.97)}
.diag-voltar:focus-visible{outline:3px solid var(--acao);outline-offset:2px}
.diag-conta{font-size:14px;font-weight:600;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.diag-chip{padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--acao-fraca);color:var(--acao-tinta)}
.diag-trilho{grid-column:1 / -1;justify-self:stretch;list-style:none;margin:0;padding:0;display:flex;gap:5px}
.diag-trilho li{flex:1;height:6px;border-radius:99px;background:var(--borda);transition:background .25s ease}
.diag-trilho li.feito{background:var(--acao)}
.diag-trilho li.atual{background:var(--acao);opacity:.4}
.diag-trilho li.atual.feito{opacity:1}

/* pergunta */
.diag-q legend{float:left;width:100%;padding:0;margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.25;letter-spacing:-.012em;font-weight:600;color:var(--tinta);text-wrap:balance}
.diag-q-dim{clear:both;margin:0;padding-top:8px;font-size:13px;font-weight:600;color:var(--acao-tinta)}
.diag-vivo .diag-q-dim{display:none}
.diag-dica{clear:both;margin:0;padding-top:12px;font-size:16px;line-height:1.5;color:var(--tinta-2)}
.diag-op{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:clamp(20px,2.2vw,28px)}
.diag-op label{position:relative;display:block}
.diag-op input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.diag-op span{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;border:1.5px solid var(--borda-forte);border-radius:16px;background:var(--superficie);font-size:17px;font-weight:500;color:var(--tinta);transition:border-color .15s ease,background .15s ease,transform .1s ease;cursor:pointer}
.diag-op kbd{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--borda-forte);font:inherit;font-size:13px;font-weight:600;color:var(--tinta-3);background:var(--plano);transition:background .15s ease,color .15s ease,border-color .15s ease}
.diag-op label:hover span{border-color:var(--acao)}
.diag-op label:active span{transform:scale(.985)}
.diag-op input:checked+span{border-color:var(--acao);background:var(--acao-fraca);color:var(--acao-tinta);font-weight:600}
.diag-op input:checked+span kbd{background:var(--acao);border-color:var(--acao);color:#fff}
.diag-op input:focus-visible+span{outline:3px solid var(--acao);outline-offset:2px}
@media(hover:none){.diag-op kbd{display:none}}

/* painel ao vivo */
.diag-painel{position:sticky;top:96px;padding:24px;border-radius:22px;background:var(--azul-claro);border:1px solid var(--borda)}
.diag-painel-rot{margin:10px 0 18px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.diag-escala{margin:18px 0 0;font-size:13px;line-height:1.45;color:var(--tinta-3)}
.diag-no-fim .diag-painel{display:none}
.diag-no-fim .diag-corpo{grid-template-columns:minmax(0,1fr)}

/* medidor */
.diag-medidor{position:relative;width:132px;height:132px;margin:0 auto}
.diag-anel{width:100%;height:100%;transform:rotate(-90deg)}
.diag-anel circle{fill:none;stroke-width:10}
.diag-anel-fundo{stroke:var(--borda-forte)}
.diag-anel-valor{stroke:var(--diag-cor,var(--acao));stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1),stroke .3s ease,opacity .2s ease}
.diag-anel-valor.zero{opacity:0}
.diag-medidor-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.diag-medidor-num b{font-size:40px;line-height:1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.diag-medidor-num span{margin-top:4px;font-size:12.5px;color:var(--tinta-3)}

/* barras por dimensao */
.diag-barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.diag-barras li{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px;align-items:baseline}
.diag-barra-rot{font-size:14.5px;font-weight:600;color:var(--tinta)}
.diag-barra-num{grid-row:1;grid-column:2;font-size:13px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.diag-barra{grid-column:1 / -1;height:8px;border-radius:99px;background:var(--borda);overflow:hidden}
.diag-barra i{display:block;height:100%;border-radius:inherit;background:var(--diag-cor,var(--acao));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}

/* resultado */
.diag-res{--diag-cor:var(--acao)}
.diag-res.faixa-a{--diag-cor:var(--bom)}
.diag-res.faixa-b{--diag-cor:var(--atencao)}
.diag-res.faixa-c{--diag-cor:var(--critico)}
.diag-res-topo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:center;padding-bottom:clamp(24px,2.6vw,34px);border-bottom:1px solid var(--borda)}
.diag-res .diag-medidor{width:clamp(150px,15vw,184px);height:clamp(150px,15vw,184px)}
.diag-res .diag-medidor-num b{font-size:clamp(46px,4.4vw,60px)}
.diag-res-olho{margin:0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);overflow-wrap:anywhere}
.diag-selo{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;padding:5px 6px 5px 14px;border-radius:99px;background:color-mix(in srgb,var(--diag-cor) 13%,transparent);color:var(--tinta);font-size:14px;font-weight:600}
.diag-selo b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--diag-cor);color:#fff;font-size:15px}
.diag-res h3{margin:12px 0 0;font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.015em;font-weight:600;color:var(--tinta)}
.diag-res-leitura{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--tinta-2);max-width:60ch}
.diag-res-barras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--borda)}
.diag-listas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:clamp(22px,2.4vw,30px)}
.diag-lista{padding:18px 20px;border:1px solid var(--borda);border-radius:18px;background:var(--plano)}
.diag-lista h4{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px;font-weight:600;color:var(--tinta)}
.diag-lista h4::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--acao)}
.diag-lista-fortes h4::before{background:var(--bom)}
.diag-lista-atencao h4::before{background:var(--atencao);border-radius:2px;transform:rotate(45deg)}
.diag-lista-pesquisar h4::before{background:transparent;border:2px solid var(--acao)}
.diag-lista ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.diag-lista li b{display:block;font-size:15px;font-weight:600;color:var(--tinta)}
.diag-lista li span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--tinta-2)}
.diag-lista li.vazio{font-size:14px;color:var(--tinta-3)}
.diag-passo{margin-top:clamp(22px,2.4vw,30px);padding:clamp(20px,2.4vw,28px);border-radius:20px;background:var(--azul-claro);border:1px solid var(--borda)}
.diag-passo-rot{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acao-tinta)}
.diag-passo-txt{margin:8px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:500;color:var(--tinta);max-width:62ch}
.diag-passo .diag-acoes{margin-top:20px}

.diag-privado{display:flex;align-items:center;gap:8px;margin:clamp(22px,2.4vw,30px) 0 0;font-size:13.5px;color:var(--tinta-3)}

@media(max-width:1000px){.diag-res-barras{grid-template-columns:repeat(2,minmax(0,1fr))}.diag-listas{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.diag-corpo{grid-template-columns:minmax(0,1fr)}.diag-painel{display:none}}
@media(max-width:600px){
  .diag{padding:20px 16px;border-radius:20px}
  .diag-dims,.diag-op{grid-template-columns:minmax(0,1fr)}
  .diag-em-curso .diag-cab p,.diag-no-fim .diag-cab p{display:none}
  .diag-em-curso .diag-cab,.diag-no-fim .diag-cab{margin-bottom:18px}
  .diag-op span{min-height:56px}
  .diag-res-topo{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .diag-res-leitura{margin-left:auto;margin-right:auto}
  .diag-res-barras{grid-template-columns:minmax(0,1fr)}
  .diag-chip{margin-left:6px}
  .diag-acoes .btn,.diag-acoes .btn-linha{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .vem-frente,.vem-tras{animation:none}
  .diag-anel-valor,.diag-barra i,.diag-trilho li{transition:none}
}

/* o e-mail antes das perguntas e o PDF do resultado (24/10/2026) */
.diag-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px}
.diag-campos .diag-campo{max-width:none}
.diag-armadilha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.diag-erro{margin:12px 0 0;max-width:760px;font-size:14.5px;line-height:1.45;color:var(--critico-tinta)}
.diag-campo input[aria-invalid="true"]{border-color:var(--critico)}
.diag-acoes .btn svg{flex:none}
.diag-privado span{min-width:0}
@media(max-width:600px){.diag-campos{grid-template-columns:minmax(0,1fr)}}
/* A NOTA ANTES DO E-MAIL (24/10/2026, melhoria 4): a abertura tem só a empresa, e o resultado mostra a nota e a faixa
   com uma caixa que pede o e-mail para liberar o detalhe */
.diag-campos{grid-template-columns:minmax(0,520px)}
.diag-porta{margin-top:clamp(22px,2.4vw,30px);padding:clamp(20px,2.4vw,28px);border-radius:20px;background:var(--azul-claro);border:1px solid var(--borda)}
.diag-porta h4{margin:0 0 6px;font-size:19px;font-weight:600;color:var(--tinta)}
.diag-porta>p{margin:0 0 16px;max-width:64ch;font-size:15.5px;line-height:1.5;color:var(--tinta-2)}
.diag-porta-linha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.diag-porta-linha .diag-campo{flex:1 1 300px}
.diag-porta-linha .btn{min-height:54px}
.diag-porta .diag-erro{margin-top:10px}
.diag-porta-refazer{margin-top:14px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--tinta-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.diag-porta-refazer:hover{color:var(--acao)}
.diag-porta[hidden],.diag-detalhe[hidden]{display:none!important}