@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:Figtree;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:800;font-display:swap;src:url(fonts/figtree-latin-800-normal.woff2) format("woff2")}
:root{
  --azul:#0054A6;--azul-profundo:#003A73;--limao:#D6E040;--tinta:#12233A;--superficie:#FFFFFF;
  --nevoa:#F4F6F9;--apoio:#DCE7F5;--borda:#C9D6E6;--suave:#4A5A6E;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--nevoa);color:var(--tinta);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
#app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--nevoa)}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
a{color:var(--azul)}
h1,h2,h3,p{margin:0}
.rotulo{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.suave{color:var(--suave)}
.pad{padding:16px 20px}
.col{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}
.grow{flex:1 1 auto}
.card{background:var(--superficie);border:1px solid var(--borda);border-radius:10px;padding:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:8px;border:0;background:var(--azul);color:#fff;font-weight:800;font-size:17px;width:100%;text-decoration:none;padding:0 16px}
.btn:disabled{background:var(--borda);color:var(--suave);cursor:default}
.btn.sec{background:var(--superficie);color:var(--azul);border:1px solid var(--borda);font-weight:600;min-height:52px}
.btn.link{background:none;color:var(--azul);font-weight:600;min-height:44px;font-size:15px}
.barra{height:10px;border-radius:999px;background:var(--apoio);overflow:hidden}
.barra>span{display:block;height:100%;background:var(--azul);border-radius:999px;transition:width .3s}
.titulo{font-size:21px;font-weight:800;color:var(--azul-profundo);letter-spacing:-.015em;line-height:1.2}
.hero{font-size:34px;font-weight:800;color:var(--azul-profundo);letter-spacing:-.02em;line-height:1.08}
svg.ic{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* topo */
.topo{background:var(--superficie);border-bottom:1px solid var(--borda);padding:calc(16px + var(--safe-t)) 20px 14px;display:flex;flex-direction:column;gap:12px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--nevoa);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:20px;font-weight:800;color:var(--azul-profundo);display:flex;align-items:center;gap:6px}
.stat span{font-size:13px;color:var(--suave)}
.stat b.peq{font-size:15px;line-height:1.65}

/* trilha */
.conteudo{flex:1 1 auto;padding:16px 20px 110px;display:flex;flex-direction:column;gap:14px}
.revisao{display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.revisao .quad{width:40px;height:40px;border-radius:6px;background:var(--apoio);color:var(--azul);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.faixa-mod{background:var(--azul);color:#fff;border-radius:10px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faixa-mod .rotulo{color:var(--apoio)}
.faixa-mod b{font-size:17px;font-weight:800}
.faixa-mod small{font-size:13px;color:var(--apoio);white-space:nowrap}
.trilha{display:flex;flex-direction:column;gap:14px;padding:6px 0 14px}
.no{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;width:120px}
.no .bola{width:60px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.no.feito .bola{background:var(--azul);color:#fff}
.no.bloq .bola{background:var(--superficie);border:2px solid var(--borda);color:var(--suave)}
.no.atual .bola{width:84px;height:84px;background:var(--limao);color:var(--tinta);border:6px solid var(--superficie);box-shadow:0 0 0 2px var(--borda)}
.no.atual .bola svg{width:34px;height:34px}
.no span{font-size:13px;color:var(--suave);text-align:center}
.no.atual strong{font-size:15px;font-weight:800;color:var(--azul-profundo)}
.mais{font-size:14px;font-weight:600;color:var(--azul);background:none;border:0;padding:8px;align-self:center}

/* navegação */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--superficie);border-top:1px solid var(--borda);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 6px calc(10px + var(--safe-b));z-index:5}
.nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:12px;font-weight:600;color:var(--suave);min-height:52px;position:relative}
.nav button[aria-current="page"]{color:var(--azul)}
.nav .badge{position:absolute;top:2px;right:calc(50% - 22px);background:var(--azul);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* sessão */
.sessao{background:var(--superficie);min-height:100%;display:flex;flex-direction:column;padding:calc(14px + var(--safe-t)) 20px calc(20px + var(--safe-b));gap:16px;flex:1 1 auto}
.sessao-topo{display:flex;align-items:center;gap:12px}
.x{width:44px;height:44px;border:0;background:none;display:flex;align-items:center;justify-content:center;color:var(--suave);flex-shrink:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);background:var(--apoio);border-radius:999px;padding:6px 12px}
.chip.cont{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--suave);background:none;border:1px solid var(--borda);padding:5px 12px}
.enun{font-size:19px;line-height:1.4;font-weight:800;color:var(--azul-profundo);white-space:pre-line}
.alts{display:flex;flex-direction:column;gap:10px}
.alt{text-align:left;background:var(--superficie);border:1px solid var(--borda);border-radius:10px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;width:100%}
.alt .l{width:28px;height:28px;border-radius:6px;background:var(--nevoa);color:var(--azul-profundo);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.alt[aria-checked="true"]{background:var(--apoio);border:2px solid var(--azul);padding:12px 14px}
.alt[aria-checked="true"] .l{background:var(--azul);color:#fff}
.alt.certa{border:2px solid var(--azul);padding:12px 14px;background:var(--superficie)}
.alt.certa .l{background:var(--azul);color:#fff}
.alt.errada{border:2px dashed var(--suave);padding:12px 14px;background:var(--nevoa);color:var(--suave)}
.alt.apagada{opacity:.55}
.alt:disabled{cursor:default}
.folha{background:var(--nevoa);border-top:1px solid var(--borda);border-radius:22px 22px 0 0;margin:0 -20px calc(-20px - var(--safe-b));padding:22px 20px calc(24px + var(--safe-b));display:flex;flex-direction:column;gap:14px}
.tarja{background:var(--tinta);color:#fff;border-radius:10px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.tarja .rotulo{color:var(--limao)}
.tarja svg{color:var(--limao)}
.fonte{background:var(--apoio);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.4}
.volta{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--suave)}
.volta svg{color:var(--azul);width:18px;height:18px}

/* fim */
.selo{background:var(--limao);color:var(--tinta);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.num{border:1px solid var(--borda);border-radius:10px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--superficie)}
.num b{font-size:26px;font-weight:800;color:var(--azul-profundo)}
.num span{font-size:13px;color:var(--suave)}
.circ{width:96px;height:96px;border-radius:999px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center}
.circ svg{width:48px;height:48px}

/* listas */
.mod-linha{display:flex;flex-direction:column;gap:4px}
.mod-linha .row{justify-content:space-between;font-size:14px}
.barra.fina{height:8px}
.medalhas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.medalha{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;line-height:1.3}
.medalha .m{width:56px;height:56px;border-radius:999px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center}
.medalha.nao .m{background:var(--superficie);border:2px dashed var(--borda);color:var(--suave)}
.medalha.nao{color:var(--suave)}
.niveis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;align-items:center}
.niveis span{height:8px;border-radius:999px;background:var(--apoio)}
.niveis span.ok{background:var(--azul)}
.niveis span.aqui{height:14px;background:var(--limao)}
.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dia{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--suave)}
.dia i{width:36px;height:36px;border-radius:999px;border:2px solid var(--borda);display:flex;align-items:center;justify-content:center;font-style:normal}
.dia.ok i{background:var(--azul);border-color:var(--azul);color:#fff}
.dia.hoje{color:var(--tinta);font-weight:600}
.cab-azul{background:var(--azul-profundo);color:#fff;padding:calc(24px + var(--safe-t)) 20px 20px;display:flex;flex-direction:column;gap:6px}
.cab-azul .rotulo{color:var(--apoio)}
.cab-azul h1{font-size:30px;font-weight:800;letter-spacing:-.02em}
.cab-azul p{color:var(--apoio);font-size:15px}

/* formulários */
.opcao{display:flex;align-items:center;gap:12px;border:1px solid var(--borda);border-radius:10px;padding:14px 15px;font-size:15px;line-height:1.4;background:var(--superficie);text-align:left;width:100%}
.opcao[aria-checked="true"]{border:2px solid var(--azul);background:var(--apoio);padding:13px 14px}
.opcao .rad{width:20px;height:20px;border-radius:999px;border:2px solid var(--suave);flex-shrink:0}
.opcao[aria-checked="true"] .rad{border:6px solid var(--azul)}
.metas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.meta{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--borda);border-radius:10px;padding:12px 6px;background:var(--superficie)}
.meta b{font-size:21px;font-weight:800;color:var(--azul-profundo)}
.meta span{font-size:13px;color:var(--suave)}
.meta[aria-checked="true"]{border:2px solid var(--azul);background:var(--apoio);padding:11px 5px}
.campo{font-family:inherit;font-size:17px;border:1px solid var(--borda);border-radius:8px;padding:12px 14px;color:var(--tinta);background:var(--superficie);width:100%}
.campo.sigla{text-transform:uppercase;letter-spacing:.2em;font-weight:800;text-align:center;font-size:24px;max-width:160px}
.passos{display:flex;gap:6px}
.passos span{flex:1;height:6px;border-radius:999px;background:var(--apoio)}
.passos span.ok{background:var(--azul)}
.aviso{background:var(--superficie);border:1px solid var(--borda);border-radius:10px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.aviso svg{color:var(--azul)}
.lista-gab{display:flex;flex-direction:column;gap:10px}
.toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);background:var(--tinta);color:#fff;border-radius:10px;padding:12px 16px;font-size:15px;z-index:20;max-width:90%}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}