/* Mapa Enamed aberto: uma página do caderno, impressa, não um painel de app. A capa cita o caderno da prova pela estrutura
   (campos em diagonal, aba, placa de título); o miolo é um forest plot em tinta navy com a faixa da etapa em ouro.
   Escala do gráfico: 20–80%. Área com poucas respostas sai vazada, com o que falta. */
.cad{--c1:#966C43;--c2:#3C3025;--c3:#D0C8BE;--tinta:#0A213F;--apoio:#566479;--filete:#E4DFD4;position:fixed;inset:0;margin:auto;width:min(960px,calc(100vw - 20px));max-width:none;height:fit-content;max-height:calc(100dvh - 20px);padding:0;border:0;background:none;color:var(--tinta);font-family:var(--sans);overflow:visible}
.cad[data-cor="roxo"]{--c1:#432C74;--c2:#44432A;--c3:#BDB29A}
.cad:not([open]){display:none}
.cad[open]{display:grid;grid-template-columns:minmax(0,620px) 300px;gap:24px;align-items:center;justify-content:center}
.cad.ja-aberto .cad__folha{animation:none}
.cad::backdrop{background:rgba(7,18,38,.55);animation:ds-veu .3s cubic-bezier(.4,0,.2,1) both}
.cad.is-saindo::backdrop{animation:ds-veu-sai .24s cubic-bezier(.4,0,1,1) both}
.cad__folha{position:relative;max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain;border-radius:4px;background:#FDFCF8;box-shadow:0 30px 70px -24px rgba(7,18,38,.7);transform-origin:50% 100%;animation:cad-abre .46s cubic-bezier(.16,1,.3,1) both}
.cad.is-saindo .cad__folha{animation:cad-fecha .24s cubic-bezier(.4,0,1,1) both}
@keyframes cad-abre{from{opacity:.3;transform:translateY(26px) rotate(-1.2deg) scale(.97)}}
@keyframes cad-fecha{to{opacity:0;transform:translateY(18px)}}
.cad__capa{position:relative;height:172px;overflow:hidden;background:var(--c3)}
.cad__capa::before{content:"";position:absolute;inset:0;background:var(--c1);clip-path:polygon(0 0,72% 0,44% 100%,0 100%)}
.cad__capa::after{content:"";position:absolute;inset:0;background:var(--c2);clip-path:polygon(66% 0,100% 0,100% 62%)}
.cad__aba{position:absolute;z-index:1;left:20px;top:16px;margin:0;padding:8px 12px;border-radius:10px;background:#fff;font:700 12.5px/1.15 var(--sans);letter-spacing:.01em;color:#16161A}
.cad__aba small{display:block;margin-top:2px;font:600 11.5px/1.2 var(--sans)}
.cad__t{position:absolute;z-index:1;left:50%;bottom:20px;width:min(390px,calc(100% - 40px));margin:0;padding:10px 12px;border-radius:14px;background:#fff;transform:translateX(-50%);text-align:center;font:700 clamp(26px,6.4vw,36px)/1.1 var(--sans);letter-spacing:-.01em;color:#16161A;outline:0}
.cad__x{position:absolute;z-index:2;right:8px;top:8px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;transition:background-color .18s ease-out}
.cad__x:hover{background:rgba(0,0,0,.5)}
.cad__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cad__x:focus-visible,.cad__linha:focus-visible,.cad__cta:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.cad__miolo{padding:18px 22px 18px}
.cad__leia{margin:0;text-align:center;font:700 12.5px/1.3 var(--sans);letter-spacing:.02em;color:#16161A}
.cad__m{margin:3px 0 0;text-align:center;font:400 12.5px/1.35 var(--sans);color:var(--apoio)}
.cad__cols,.cad__linha{display:grid;grid-template-columns:118px minmax(0,1fr) 104px;column-gap:10px;align-items:center}
.cad__cols{margin-top:12px;padding:0 4px 5px;border-bottom:1px solid var(--tinta);font:600 11px/1.15 var(--sans)}
.cad__eixo{position:relative;display:block;height:1.2em}
.cad__eixo i{position:absolute;bottom:0;transform:translateX(-50%);font-style:normal;font-weight:500;color:var(--apoio);font-variant-numeric:tabular-nums}
.cad__eixo i:first-child{transform:none}
.cad__eixo i:last-child{transform:translateX(-100%)}
.cad__linha{width:100%;min-height:44px;padding:0 4px;border:0;border-bottom:1px solid var(--filete);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .18s ease-out}
.cad__linha:hover{background:#F8F4EA}
.cad__linha.is-on{background:#F6EFDF}
.cad__area{display:flex;align-items:center;gap:7px;min-width:0;font:600 12.5px/1.15 var(--sans)}
.cad__area img{flex:none;width:24px;height:24px;border-radius:50%}
.cad__plot{position:relative;align-self:stretch;display:block}
.cad__plot::before{content:"";position:absolute;top:0;bottom:-1px;left:var(--fa);width:var(--fl);background:rgba(198,154,75,.26);box-shadow:inset 1px 0 0 rgba(169,124,44,.55),inset -1px 0 0 rgba(169,124,44,.55)}
.cad__ic{position:absolute;top:50%;left:var(--de);width:calc(var(--ate) - var(--de));height:2px;margin-top:-1px;background:var(--cor);animation:cad-ic .55s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i) * .1s) backwards}
.cad__ic::before,.cad__ic::after{content:"";position:absolute;top:-3px;width:2px;height:8px;background:var(--cor)}
.cad__ic::before{left:0}
.cad__ic::after{right:0}
.cad__pt{position:absolute;top:50%;left:var(--p);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:var(--cor);box-shadow:0 0 0 2px #FDFCF8;animation:cad-pt .34s cubic-bezier(.16,1,.3,1) calc(.22s + var(--i) * .1s) backwards}
.cad__linha.is-on .cad__pt{box-shadow:0 0 0 2px #F6EFDF}
@keyframes cad-ic{from{transform:scaleX(0)}}
@keyframes cad-pt{from{opacity:0;transform:scale(.3)}}
.cad__linha--abaixo{--cor:#8A6420}
.cad__linha--faixa{--cor:#0A213F}
.cad__linha--insuf{--cor:#6B7888}
.cad__linha--insuf .cad__pt{background:#FDFCF8;box-shadow:inset 0 0 0 2px var(--cor)}
.cad__linha--insuf .cad__ic{background:repeating-linear-gradient(90deg,var(--cor) 0 4px,transparent 4px 7px)}
.cad__cond{font:500 12px/1.15 var(--sans);color:#26354F}
.cad__cond b{font-weight:600;color:#1C5B39}
.cad__cond em{font-style:normal;font-weight:600;color:#6B4A12}
/* Registro: mesma folha, sem gráfico. As turmas são abas de impresso e cada linha é um encaminhamento. */
.cad__turmas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px;border-bottom:1px solid var(--tinta)}
.cad__turmas button{min-height:44px;margin-bottom:-1px;padding:0 4px;border:0;border-bottom:3px solid transparent;background:none;color:var(--apoio);font:600 13px/1.1 var(--sans);cursor:pointer;transition:color .18s ease-out,border-color .18s ease-out}
.cad__turmas button:hover{color:var(--tinta)}
.cad__turmas button[aria-pressed="true"]{border-bottom-color:var(--c1);color:var(--tinta)}
.cad__turmas button:focus-visible{outline:2px solid var(--c1);outline-offset:-2px}
.cad__resumo{margin:10px 0 4px;padding:0 4px;font:500 12.5px/1.35 var(--sans);color:var(--apoio);font-variant-numeric:tabular-nums}
.cad__linha.cad__reg{grid-template-columns:50px minmax(0,1fr) minmax(0,auto);min-height:58px;padding:7px 4px}
.cad__reg .cad__area small{display:block;margin-top:1px;font:400 11.5px/1.2 var(--sans);color:var(--apoio)}
.cad__data{font:500 12.5px/1 var(--sans);color:var(--apoio);font-variant-numeric:tabular-nums}
.cad__acao{display:grid;justify-items:end;gap:4px;font:500 12px/1.15 var(--sans);color:#26354F;text-align:right}
.cad__st{padding:3px 8px;border-radius:999px;font:600 11px/1.2 var(--sans);font-style:normal;background:#F7F3EA;color:#7A5C25}
.cad__st--atendido{background:#E4F0E7;color:#1C5B39}
.cad__st--andamento{background:#F6EBD2;color:#6B4A12}
.cad__info{margin:10px 0 0;min-height:1.35em;font:600 13px/1.35 var(--sans)}
.cad__nota{margin:4px 0 0;font:400 12px/1.4 var(--sans);color:var(--apoio)}
.cad__cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:12px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font:600 14.5px/1 var(--brand);box-shadow:0 0 0 1px rgba(216,181,101,.6)}
.cad__cta:hover{background:#12355E}
.cad__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Fala do guia: o médico do herói explica a página. Papel marfim com fio dourado, como uma nota à margem, sem cara de chat. */
.cad__fala{position:relative;align-self:center}
.cad__guia{display:block;width:96px;height:96px;margin:0 0 -30px 20px;position:relative;z-index:1;border-radius:50%;background:#D9E9F6;box-shadow:0 0 0 2px var(--ouro-claro,#DDB86E),0 10px 22px -10px rgba(7,18,38,.7)}
.cad__balao{position:relative;padding:42px 22px 18px;border-radius:4px;background:#FDFCF8;border-top:2px solid #C69A4B;box-shadow:0 26px 60px -26px rgba(7,18,38,.8)}
.cad__balao::before{content:"";position:absolute;left:-8px;top:96px;width:16px;height:16px;background:#FDFCF8;transform:rotate(45deg)}
.cad__balao.is-entra [aria-live]{animation:cad-fala .42s cubic-bezier(.16,1,.3,1) both}
@keyframes cad-fala{from{opacity:0;transform:translateY(8px)}}
.cad__quem{margin:0 0 8px;font:600 11.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#6E5120}
.cad__balao h3{margin:0 0 7px;font:400 24px/1.16 var(--serif,serif);color:var(--tinta)}
.cad__balao [data-f-d]{margin:0;min-height:6.9em;font:400 14.5px/1.5 var(--sans);color:#3F5068}
.cad__fpe{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.cad__pts{display:flex;gap:6px}
.cad__pts i{width:7px;height:7px;border-radius:50%;background:#DCCFB2}
.cad__pts i.is-on{background:#B98A33}
.cad__fpe button{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--navy);color:#fff;font:600 14px/1 var(--sans);cursor:pointer;transition:background-color .18s ease-out}
.cad__fpe button:hover{background:#12355E}
.cad__fpe button:focus-visible{outline:2px solid #B98A33;outline-offset:2px}
/* O trecho de que o guia fala fica aceso; o resto recua */
.cad__area,.cad__plot,.cad__cond,.cad__reg,.cad__turmas,.cad__info{transition:opacity .3s ease-out,background-color .3s ease-out,box-shadow .3s ease-out}
[data-foco="faixa"] .cad__area,[data-foco="faixa"] .cad__cond,[data-foco="cond"] .cad__area,[data-foco="cond"] .cad__plot,[data-foco="reg"] .cad__turmas,[data-foco="nota"] .cad__reg:not(.is-on),[data-foco="turmas"] .cad__reg{opacity:.32}
[data-foco="faixa"] .cad__plot::before{background:rgba(198,154,75,.5)}
[data-foco="cond"] .cad__cond{box-shadow:inset 2px 0 0 #B98A33;padding-left:7px}
[data-foco="nota"] .cad__info{padding:7px 9px;background:#F6EFDF;box-shadow:inset 2px 0 0 #B98A33}
[data-foco="turmas"] .cad__turmas button{color:var(--tinta)}
[data-foco="turmas"] .cad__turmas{box-shadow:0 0 0 2px rgba(198,154,75,.55);border-radius:3px}
@media (max-width:960px){
  .cad{width:min(620px,calc(100vw - 20px))}
  .cad[open]{display:flex;flex-direction:column;gap:8px}
  .cad__folha{flex:1 1 auto;min-height:0}
  .cad__fala{flex:none;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:4px;background:#FDFCF8;border-top:2px solid #C69A4B}
  .cad__guia{width:48px;height:48px;margin:0}
  .cad__balao{padding:0;background:none;border:0;box-shadow:none}
  .cad__balao::before,.cad__quem{display:none}
  .cad__balao h3{margin-bottom:3px;font-size:18px}
  .cad__balao [data-f-d]{min-height:5.8em;font-size:13.5px;line-height:1.42}
  .cad__fpe{margin-top:4px}
}
@media (max-width:560px){
  .cad__capa{height:104px}
  .cad__t{bottom:10px;padding:6px 10px;font-size:22px;width:min(250px,calc(100% - 150px))}
  .cad__aba{left:14px;top:12px;padding:6px 10px;font-size:11.5px}
  .cad__miolo{padding:14px 12px 14px}
  .cad__cols,.cad__linha{grid-template-columns:88px minmax(0,1fr) 78px;column-gap:6px}
  .cad__area{gap:5px;font-size:11.5px}
  .cad__area img{width:20px;height:20px}
  .cad__cond{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .cad::backdrop,.cad *,.cad *::before{animation:none!important;transition:none!important}
}