/* ===========================================================
   Calculadora de Honorários — OAB Tocantins
   Identidade visual OAB Fácil (ver ../assets/marca-oabfacil.css)
   =========================================================== */

:root{
  --azul:#074EF6; --azul-esc:#0038C4; --azul-claro:#E8EEFF;
  /* O magenta da marca (#E22294) rende 4,29:1 sobre branco — reprova na WCAG AA
     para texto normal. Fica reservado a preenchimentos e elementos decorativos,
     onde não há exigência de contraste. Texto e botões usam a variação escura,
     que rende 5,04:1 e é o menor desvio possível da marca. */
  --magenta:#E22294; --magenta-txt:#D01A85; --magenta-esc:#B01670;
  --periwinkle:#9EB5F9;
  --fundo:#F4F4F4; --cartao:#FFF;
  --texto:#111319; --fraco:#5B6273; --borda:#E2E5EC;
  --ok:#0A7A4B; --alerta:#B45309;
  --f-tit:'Outfit',system-ui,sans-serif;
  --f-txt:'Roboto',system-ui,sans-serif;
  --raio:12px; --raio-p:8px;
  --sombra:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --max:940px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:400 16px/1.6 var(--f-txt);
  overflow-x:hidden;
}
h1,h2,h3,b,strong{font-family:var(--f-tit)}
button,input,textarea,select{font:inherit;color:inherit}
.oculto{display:none !important}

/* ---------------- topo ---------------- */
.topo{background:var(--azul);color:#fff;position:relative;overflow:hidden}
.topo::after{
  content:"";position:absolute;top:0;right:0;
  border-width:0 76px 76px 0;border-style:solid;
  border-color:transparent rgba(255,255,255,.09) transparent transparent;
}
.topo-in{
  max-width:var(--max);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:12px;position:relative;z-index:1;
}
.topo-logo{width:36px;height:36px;border-radius:8px;flex:none;background:#fff;padding:2px}
.topo-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.topo-txt strong{font-size:16px;font-weight:800;letter-spacing:-.01em}
.topo-txt span{font-size:12.5px;opacity:.85}
.selo{
  margin-left:auto;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;background:rgba(255,255,255,.16);padding:5px 10px;border-radius:99px;
  white-space:nowrap;
}

/* ---------------- trilha de etapas ---------------- */
.trilha{background:var(--cartao);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:30}
.trilha ol{
  max-width:var(--max);margin:0 auto;padding:0 20px;list-style:none;
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
}
.trilha ol::-webkit-scrollbar{display:none}
.trilha li{
  display:flex;align-items:center;gap:7px;padding:12px 12px;font-size:13px;
  color:var(--fraco);white-space:nowrap;border-bottom:3px solid transparent;font-weight:500;
}
.trilha li span{
  width:21px;height:21px;border-radius:50%;background:var(--borda);color:var(--fraco);
  display:grid;place-items:center;font:700 11.5px var(--f-tit);flex:none;
}
.trilha li.feita{color:var(--texto)}
.trilha li.feita span{background:var(--azul);color:#fff}
.trilha li.atual{color:var(--azul);border-bottom-color:var(--magenta);font-weight:700}
.trilha li.atual span{background:var(--magenta);color:#fff}

/* ---------------- barra-resumo ---------------- */
.resumo{position:sticky;top:47px;z-index:25;background:var(--azul);color:#fff}
.resumo-in{
  max-width:var(--max);margin:0 auto;padding:9px 20px;
  display:flex;gap:22px;align-items:center;overflow-x:auto;scrollbar-width:none;
}
.resumo-in::-webkit-scrollbar{display:none}
.resumo-bloco{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.resumo-bloco b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:38vw}
.resumo-bloco i{font-style:normal;font-size:10.5px;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.resumo-bloco.destaque{margin-left:auto}
.resumo-bloco.destaque b{color:#FFD9EE;font-size:16px}

/* ---------------- palco / telas ---------------- */
.palco{max-width:var(--max);margin:0 auto;padding:26px 20px 60px}
.tela{display:none;animation:entra .3s ease}
.tela.ativa{display:block}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.etapa-tag{
  font:700 11px var(--f-tit);text-transform:uppercase;letter-spacing:.12em;
  color:var(--magenta-txt);margin:0 0 6px;
}
.titulo{font-size:clamp(25px,5vw,36px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;line-height:1.15}
.linha-fina{color:var(--fraco);margin:0 0 22px;max-width:64ch}
.linha-fina b{color:var(--texto);font-weight:600}

.rotulo-secao{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:700 12.5px var(--f-tit);text-transform:uppercase;letter-spacing:.09em;
  margin:30px 0 12px;
}
.rotulo-secao small{font:400 12px var(--f-txt);text-transform:none;letter-spacing:0;color:var(--fraco)}
.regua{width:34px;height:4px;background:var(--magenta);border-radius:2px;flex:none}

/* ---------------- capa ---------------- */
.na-capa .palco{padding-top:0}
.capa{display:grid;gap:30px;padding:36px 0 10px}
@media(min-width:800px){.capa{grid-template-columns:1.15fr .85fr;align-items:center;padding:56px 0 20px}}
.sobretitulo{
  font:700 11px var(--f-tit);text-transform:uppercase;letter-spacing:.14em;
  color:var(--magenta-txt);margin:0 0 12px;
}
.capa h1{font-size:clamp(38px,8.5vw,66px);line-height:1.02;letter-spacing:-.035em;font-weight:900;margin:0 0 18px}
.capa h1 em{font-style:normal;color:var(--azul)}
.chamada{font-size:17px;color:var(--fraco);max-width:46ch;margin:0 0 26px}
.chamada b{color:var(--texto);font-weight:600}
.contador{margin:18px 0 0;font-size:13px;color:var(--fraco)}
.contador b{font:800 17px var(--f-tit);color:var(--azul)}

.capa-arte{display:grid;gap:14px;justify-items:center}
.moeda{
  background:var(--azul);color:#fff;border-radius:22px;padding:34px 30px;text-align:center;
  width:100%;max-width:290px;position:relative;overflow:hidden;box-shadow:var(--sombra);
}
.moeda::after{
  content:"";position:absolute;bottom:-46px;left:-46px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.09);
}
.urh-rot{
  display:inline-block;font:700 10.5px var(--f-tit);letter-spacing:.16em;
  background:var(--magenta-txt);padding:4px 11px;border-radius:99px;margin-bottom:14px;
}
.moeda b{display:block;font:900 38px/1 var(--f-tit);letter-spacing:-.03em}
.moeda i{display:block;font-style:normal;font-size:11.5px;opacity:.82;margin-top:9px}
.capa-num{font-size:13px;color:var(--fraco)}
.capa-num span{font:800 16px var(--f-tit);color:var(--texto)}

.capa-pes{display:grid;gap:12px;margin-top:34px}
@media(min-width:700px){.capa-pes{grid-template-columns:repeat(3,1fr)}}
.pe{
  background:var(--cartao);border-radius:var(--raio);padding:18px 18px 16px;
  position:relative;box-shadow:var(--sombra);
}
.pe::before{content:"";position:absolute;top:0;left:0;width:56px;height:4px;
  background:var(--magenta);border-radius:var(--raio) 0 0 0}
.pe b{display:block;font-size:15px;margin-bottom:3px}
.pe span{font-size:13.5px;color:var(--fraco)}

/* ---------------- ressalvas ---------------- */
.ressalvas{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.ressalvas li{
  background:var(--cartao);border-radius:var(--raio-p);padding:14px 16px;
  font-size:14.5px;color:var(--fraco);border-left:3px solid var(--periwinkle);
}
.ressalvas b{color:var(--texto)}
.aviso-erros{
  background:#FFF7ED;border:1px solid #FDBA74;border-radius:var(--raio-p);
  padding:15px 17px;margin-bottom:22px;font-size:14px;
}
.aviso-erros b{display:block;margin-bottom:5px;color:var(--alerta)}
.aviso-erros p{margin:0;color:#7C4A11}
.link-btn{
  background:none;border:0;color:var(--magenta-txt);font-weight:700;
  text-decoration:underline;cursor:pointer;padding:0;
}
.erros-lista{margin-top:12px;display:grid;gap:7px}
.erro-item{background:#fff;border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.5}
.erro-item b{display:inline;color:var(--texto)}
.erro-item .certo{color:var(--ok);font-weight:700}
.erro-item .errado{color:#B42318;text-decoration:line-through}

.ciente{
  display:flex;gap:11px;align-items:flex-start;background:var(--cartao);
  border-radius:var(--raio-p);padding:15px 17px;margin-bottom:18px;cursor:pointer;
}
.ciente input{width:20px;height:20px;accent-color:var(--magenta);flex:none;margin:1px 0 0;cursor:pointer}
.ciente span{font-size:14.5px;font-weight:500}

/* ---------------- botões ---------------- */
.btn{
  border:0;border-radius:var(--raio-p);padding:12px 22px;cursor:pointer;
  font:700 14.5px var(--f-tit);letter-spacing:.01em;transition:filter .15s,background .15s;
}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primario{background:var(--magenta-txt);color:#fff;text-transform:uppercase;letter-spacing:.05em}
.btn-primario:not(:disabled):hover{background:var(--magenta-esc)}
.btn-fantasma{background:var(--cartao);color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--borda)}
.btn-fantasma:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--azul);color:var(--azul)}
.btn-texto{background:none;color:var(--fraco);text-decoration:underline;padding:12px 8px}
.btn-texto:hover{color:var(--magenta-txt)}
.btn.grande{padding:15px 30px;font-size:15.5px}
.btn-voltar{
  background:none;border:0;color:var(--fraco);cursor:pointer;padding:0;
  font:600 14px var(--f-txt);margin-bottom:14px;
}
.btn-voltar:hover{color:var(--azul)}
.acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:32px;
  padding-top:22px;border-top:1px solid var(--borda)}
.acoes .btn-primario{margin-left:auto}

/* ---------------- busca e lista de serviços ---------------- */
.busca{position:relative;margin-bottom:20px}
.busca input{
  width:100%;padding:15px 17px;border:1.5px solid var(--borda);border-radius:var(--raio-p);
  background:var(--cartao);font-size:15.5px;
}
.busca input:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(7,78,246,.13)}
.busca-cont{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--fraco);pointer-events:none;background:var(--cartao);padding-left:8px;
}
.dica{font-size:13px;color:var(--fraco);margin:12px 0 0}

.grade-atalhos{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.servico{
  background:var(--cartao);border:1.5px solid transparent;border-radius:var(--raio-p);
  padding:12px 14px;cursor:pointer;text-align:left;display:flex;gap:10px;
  align-items:center;justify-content:space-between;transition:border-color .12s,background .12s;
  box-shadow:var(--sombra);width:100%;
}
.servico:hover{border-color:var(--periwinkle)}
.servico.sel{border-color:var(--magenta);background:#FFF5FB}
.servico-txt{min-width:0}
.servico-nome{display:block;font:600 14px var(--f-txt);line-height:1.35}
.servico-meta{display:block;font-size:11.5px;color:var(--fraco);margin-top:3px}
/* nos atalhos os cartões ficam lado a lado: limita a 2 linhas para a grade
   não ficar irregular. O texto completo fica no title. */
.grade-atalhos .servico{align-items:flex-start}
.grade-atalhos .servico-nome{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em;
}
.grade-atalhos .servico-meta{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch;
}
.servico-val{text-align:right;flex:none}
.servico-val b{display:block;font:700 14.5px var(--f-tit);color:var(--azul);white-space:nowrap}
.servico-val span{display:block;font-size:10.5px;color:var(--fraco)}

.secao{background:var(--cartao);border-radius:var(--raio-p);margin-bottom:7px;overflow:hidden;
  box-shadow:var(--sombra)}
.secao-cab{
  display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer;width:100%;
  background:none;border:0;text-align:left;
}
.secao-cab:hover{background:var(--azul-claro)}
.secao-rom{
  font:700 10.5px var(--f-tit);background:var(--azul);color:#fff;padding:3px 8px;
  border-radius:5px;flex:none;min-width:34px;text-align:center;
}
.secao-nome{flex:1;font:600 14px var(--f-txt);line-height:1.35}
.secao-qtd{font-size:11.5px;color:var(--fraco);flex:none}
.secao-itens{display:none;padding:0 10px 10px;gap:6px;flex-direction:column}
.secao.aberta .secao-itens{display:flex}
.grupo-rot{
  font:700 10.5px var(--f-tit);text-transform:uppercase;letter-spacing:.08em;
  color:var(--fraco);padding:10px 4px 2px;
}
.vazio{padding:26px;text-align:center;color:var(--fraco);font-size:14px}

.ancora{
  position:sticky;bottom:12px;z-index:20;display:flex;gap:14px;align-items:center;
  justify-content:space-between;background:var(--texto);color:#fff;border-radius:var(--raio);
  padding:13px 17px;margin-top:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.ancora-rot{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.65}
.ancora b{font-size:14.5px;font-weight:600;display:block;line-height:1.3}
.ancora-val{text-align:right;flex:none}
.ancora-val b{font:800 19px var(--f-tit);color:#FFD9EE}
.ancora-val span{font-size:11px;opacity:.7}

.nota-sucumbencia{
  background:var(--azul-claro);border-radius:var(--raio-p);padding:15px 17px;
  font-size:13.5px;color:#1A2E6B;margin-top:20px;
}

/* ---------------- custos ---------------- */
.grade-custos{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.custo{background:var(--cartao);border-radius:var(--raio-p);padding:12px 14px;box-shadow:var(--sombra)}
.custo label{display:block;font:600 13px var(--f-txt);margin-bottom:2px}
.custo small{display:block;font-size:11.5px;color:var(--fraco);margin-bottom:7px}
.custo input{
  width:100%;border:1.5px solid var(--borda);border-radius:6px;padding:8px 10px;font-size:15px;
}
.custo input:focus{outline:0;border-color:var(--azul)}

.total-custos{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--texto);color:#fff;border-radius:var(--raio-p);padding:14px 18px;margin-top:12px;
}
.total-custos span{font-size:13.5px;opacity:.8}
.total-custos b{font:800 21px var(--f-tit)}

.grade2{display:grid;gap:12px;margin-top:16px}
@media(min-width:640px){.grade2{grid-template-columns:1fr 1fr}}
.grade3{display:grid;gap:12px;margin-top:12px}
@media(min-width:640px){.grade3{grid-template-columns:repeat(3,1fr)}}
.grade2>label,.grade3>label,.campo-largo{
  display:block;font:600 13px var(--f-txt);
}
.campo-largo{margin-top:12px}
.grade2 small,.grade3 small,.campo-largo small{font-weight:400;color:var(--fraco)}
.grade2 input,.grade3 input,.campo-largo input,.campo-largo textarea{
  width:100%;margin-top:5px;border:1.5px solid var(--borda);border-radius:6px;
  padding:10px 12px;font-size:15px;background:var(--cartao);font-family:var(--f-txt);
}
.grade2 input:focus,.grade3 input:focus,.campo-largo input:focus,.campo-largo textarea:focus{
  outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(7,78,246,.12)
}

.painel-hora{background:var(--cartao);border-radius:var(--raio);padding:20px;margin-top:22px;
  box-shadow:var(--sombra);position:relative;overflow:hidden}
.painel-hora::before{content:"";position:absolute;top:0;left:0;width:70px;height:4px;background:var(--magenta)}
.painel-tit{font:700 12px var(--f-tit);text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
.medidor-barra{height:11px;background:var(--borda);border-radius:99px;overflow:hidden}
.medidor-barra span{display:block;height:100%;background:var(--azul);border-radius:99px;transition:width .3s}
.medidor-leg{font-size:13px;color:var(--fraco);margin:9px 0 0}
.medidor-leg b{color:var(--texto)}
.resultado-hora{display:grid;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--borda)}
@media(min-width:520px){.resultado-hora{grid-template-columns:1fr 1fr}}
.resultado-hora b{display:block;font:800 27px var(--f-tit);color:var(--azul);letter-spacing:-.02em}
.resultado-hora span{font-size:12.5px;color:var(--fraco)}

.bloco-trib{background:var(--cartao);border-radius:var(--raio);margin-top:22px;box-shadow:var(--sombra)}
.bloco-trib summary{padding:16px 20px;cursor:pointer;font-size:15px;list-style:none}
.bloco-trib summary::-webkit-details-marker{display:none}
.bloco-trib summary::before{content:"▸ ";color:var(--magenta);font-weight:700}
.bloco-trib[open] summary::before{content:"▾ "}
.bloco-trib summary small{color:var(--fraco);font-weight:400;font-family:var(--f-txt)}
.trib-in{padding:0 20px 20px}
.regimes{display:grid;gap:8px;margin-bottom:14px}
@media(min-width:640px){.regimes{grid-template-columns:repeat(3,1fr)}}
.regime{
  background:var(--fundo);border:1.5px solid transparent;border-radius:var(--raio-p);
  padding:13px;cursor:pointer;text-align:left;
}
.regime.ativo{border-color:var(--azul);background:var(--azul-claro)}
.regime b{display:block;font-size:14px}
.regime span{display:block;font-size:11.5px;color:var(--fraco);margin-top:2px}
.trib-ops,.trib-cliente{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:11px;font-size:13px}
.trib-ops>span,.trib-cliente>span{color:var(--fraco)}
.pilula{
  background:var(--fundo);border:1.5px solid var(--borda);border-radius:99px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:var(--f-txt);
}
.pilula.ativa{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.trib-saida{display:grid;gap:11px;margin-top:16px;padding-top:15px;border-top:1px solid var(--borda)}
@media(min-width:560px){.trib-saida{grid-template-columns:repeat(3,1fr)}}
.trib-saida span{display:block;font-size:11.5px;color:var(--fraco)}
.trib-saida b{font:800 19px var(--f-tit)}
.trib-saida .ok b{color:var(--ok)}
.rodape-nota{font-size:12px;color:var(--fraco);margin:15px 0 0;line-height:1.5}

/* ---------------- estratégia ---------------- */
.modalidades{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.modo{
  background:var(--cartao);border:1.5px solid transparent;border-radius:var(--raio-p);
  padding:14px;cursor:pointer;text-align:left;box-shadow:var(--sombra);
}
.modo.ativo{border-color:var(--magenta);background:#FFF5FB}
.modo b{display:block;font-size:14.5px}
.modo span{display:block;font-size:11.5px;color:var(--fraco);margin-top:3px}
.ficha-modalidade{
  background:var(--azul-claro);border-radius:var(--raio-p);padding:15px 17px;
  margin-top:12px;font-size:13.5px;color:#1A2E6B;display:grid;gap:7px;
}
.ficha-modalidade b{color:var(--azul-esc)}
.campos-modo{margin-top:16px}
.campos-modo:empty{display:none}

.caixa-valor{
  background:var(--azul);color:#fff;border-radius:var(--raio);padding:24px;margin-top:24px;
  position:relative;overflow:hidden;
}
.caixa-valor::after{
  content:"";position:absolute;top:0;right:0;border-width:0 62px 62px 0;border-style:solid;
  border-color:transparent rgba(255,255,255,.1) transparent transparent;
}
.caixa-rot{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.caixa-valor>b{display:block;font:900 clamp(34px,8vw,46px)/1 var(--f-tit);letter-spacing:-.03em;margin:8px 0}
.caixa-valor p{margin:0;font-size:13.5px;opacity:.9}
.quebra{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22)}
@media(min-width:600px){.quebra{grid-template-columns:repeat(3,1fr)}}
.quebra div{font-size:12.5px}
.quebra b{display:block;font:700 16px var(--f-tit);margin-bottom:1px}
.quebra span{opacity:.78}

.explicacao{
  background:var(--cartao);border-radius:var(--raio-p);padding:16px 18px;margin-top:12px;
  font-size:13.5px;color:var(--fraco);line-height:1.65;box-shadow:var(--sombra);
}
.explicacao b{color:var(--texto)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;
  background:var(--fundo);padding:1px 5px;border-radius:4px}

.grafico{display:grid;gap:10px}
.barra-linha{background:var(--cartao);border-radius:var(--raio-p);padding:14px 16px;box-shadow:var(--sombra)}
.barra-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.barra-nome{font:600 13.5px var(--f-txt)}
.barra-nome small{display:block;font-size:11.5px;color:var(--fraco);font-weight:400}
.barra-val{font:800 17px var(--f-tit);white-space:nowrap}
.barra-trilho{height:10px;background:var(--fundo);border-radius:99px;overflow:hidden}
.barra-fill{display:block;height:100%;border-radius:99px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.b-min .barra-fill{background:#94A3B8} .b-min .barra-val{color:#64748B}
.b-sus .barra-fill{background:var(--azul)} .b-sus .barra-val{color:var(--azul)}
.b-agr .barra-fill{background:var(--magenta)} .b-agr .barra-val{color:var(--magenta-txt)}

.argumentos{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.argumentos li{
  background:var(--cartao);border-radius:var(--raio-p);padding:13px 16px;font-size:14px;
  border-left:3px solid var(--magenta);box-shadow:var(--sombra);
}
.argumentos b{color:var(--azul)}

/* legendas do gráfico: o gráfico mostra quanto, a legenda explica por quê */
.legenda{display:grid;gap:9px;margin-top:11px}
@media(min-width:700px){.legenda{grid-template-columns:repeat(3,1fr)}}
.leg-card{
  background:var(--cartao);border-radius:var(--raio-p);padding:14px 16px;
  box-shadow:var(--sombra);border-left:3px solid var(--borda);
}
.leg-card.b-min{border-left-color:#94A3B8}
.leg-card.b-sus{border-left-color:var(--azul)}
.leg-card.b-agr{border-left-color:var(--magenta)}
.leg-rot{
  display:block;font:700 10.5px var(--f-tit);text-transform:uppercase;
  letter-spacing:.1em;color:var(--fraco);
}
.leg-card b{display:block;font:800 19px var(--f-tit);margin:3px 0 5px;letter-spacing:-.02em}
.leg-card.b-min b{color:#64748B}
.leg-card.b-sus b{color:var(--azul)}
.leg-card.b-agr b{color:var(--magenta-txt)}
.leg-card p{margin:0;font-size:12.5px;color:var(--fraco);line-height:1.5}

/* pró-labore complementar */
.bloco-pl{background:var(--cartao);border-radius:var(--raio);margin-top:26px;box-shadow:var(--sombra)}
.bloco-pl summary{padding:16px 20px;cursor:pointer;font-size:15px;list-style:none}
.bloco-pl summary::-webkit-details-marker{display:none}
.bloco-pl summary::before{content:"▸ ";color:var(--magenta);font-weight:700}
.bloco-pl[open] summary::before{content:"▾ "}
.bloco-pl summary small{color:var(--fraco);font-weight:400;font-family:var(--f-txt)}
.pl-in{padding:0 20px 20px}
.pl-in .rotulo-secao{margin-top:20px}
.pl-linha{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--borda);
}
.pl-linha:last-child{border-bottom:0}
.pl-rot{font-size:13.5px;line-height:1.35;min-width:0}
.pl-rot small{display:block;font-size:11px;color:var(--fraco);margin-top:2px}
.pl-linha input{
  width:130px;flex:none;border:1.5px solid var(--borda);border-radius:6px;
  padding:8px 10px;font-size:14.5px;text-align:right;
}
.pl-linha input:focus{outline:0;border-color:var(--azul)}

/* resumo executivo */
.exec{
  background:var(--cartao);border-radius:var(--raio);padding:22px;margin-bottom:30px;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.exec::before{content:"";position:absolute;top:0;left:0;width:86px;height:4px;background:var(--magenta)}
.exec-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.exec-rot{font:700 11px var(--f-tit);text-transform:uppercase;letter-spacing:.1em;color:var(--fraco)}
.btn-mini{
  background:var(--cartao);border:1.5px solid var(--borda);border-radius:6px;padding:6px 12px;
  font:600 12px var(--f-txt);color:var(--fraco);cursor:pointer;
}
.btn-mini:hover:not(:disabled){border-color:var(--azul);color:var(--azul)}
.btn-mini:disabled{opacity:.5;cursor:wait}
.btn-mini.discreto{border-color:transparent;text-decoration:underline;padding:6px 6px}
.exec-botoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rotulo-secao .btn-mini{margin-left:auto;text-transform:none;letter-spacing:0}
.exec-serv{margin:12px 0 0;font:600 15px var(--f-txt)}
.exec-val{display:block;font:900 clamp(30px,7vw,40px)/1 var(--f-tit);color:var(--azul);
  letter-spacing:-.03em;margin:6px 0 4px}
.exec-sub{margin:0;font-size:12.5px;color:var(--fraco)}
.exec-ind{display:grid;gap:12px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--borda)}
@media(min-width:560px){.exec-ind{grid-template-columns:repeat(3,1fr)}}
.exec-ind span{display:block;font-size:11px;color:var(--fraco);text-transform:uppercase;letter-spacing:.06em}
.exec-ind b{font:700 17px var(--f-tit)}
.exec-args{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px}
.exec-args li{font-size:13px;color:var(--fraco);padding-left:18px;position:relative;line-height:1.55}
.exec-args li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.exec-args b{color:var(--texto)}

/* ---------------- documentos ---------------- */
.abas{display:flex;gap:5px;margin:26px 0 0;border-bottom:2px solid var(--borda);overflow-x:auto}
.aba{
  background:none;border:0;padding:11px 17px;cursor:pointer;font:600 14px var(--f-txt);
  color:var(--fraco);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;
}
.aba.ativa{color:var(--magenta-txt);border-bottom-color:var(--magenta-txt);font-weight:700}
.previa{
  background:var(--cartao);border-radius:0 0 var(--raio-p) var(--raio-p);padding:22px;
  margin:0;font:400 13px/1.75 var(--f-txt);white-space:pre-wrap;word-wrap:break-word;
  max-height:440px;overflow-y:auto;box-shadow:var(--sombra);
}
.acoes-doc{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* ---------------- rodapé / toast ---------------- */
.rodape{
  background:var(--texto);color:#fff;padding:26px 20px 22px;margin-top:40px;font-size:13px;
}
.rodape-in{max-width:var(--max);margin:0 auto}
.rodape p{margin:0 0 5px}
.rodape b{color:#fff}
.rodape-fino{opacity:.6;font-size:12px;margin-top:14px !important;line-height:1.6}

/* endereço institucional — uma informação por linha */
.rodape-end{font-style:normal;display:flex;flex-direction:column;gap:3px}
.rodape-end b{font-size:13.5px;margin-bottom:2px}
.rodape-end a{color:#fff;opacity:.85;text-decoration:none;width:fit-content}
.rodape-end a:hover{opacity:1;text-decoration:underline}
.rodape-end [hidden]{display:none}

/* assinatura do produto: Citare.IA à esquerda, OAB à direita */
.credito{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
}
/* Hierarquia: a OAB é a instituição e domina; a Citare é crédito de autoria
   e fica discreta. */
.credito-esq{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.credito-logo{height:13px;width:auto;flex:none;opacity:.75}
.credito-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.credito-txt #creditoTxt{font-size:10px;opacity:.45;line-height:1.5;letter-spacing:.01em}
.credito-txt a{
  font-size:10px;color:#fff;opacity:.6;text-decoration:none;
  width:fit-content;letter-spacing:.02em;
}
.credito-txt a:hover{opacity:1;text-decoration:underline}
.credito-txt a[hidden]{display:none}
/* o emblema da OAB é multicolorido e tem miolo escuro: precisa de fundo claro */
.credito-oab{
  height:62px;width:auto;flex:none;
  background:#fff;border-radius:8px;padding:9px 14px;
}
/* Em telas estreitas os dois empilham. A OAB vem primeiro — é a instituição;
   a assinatura do produto fica abaixo. */
@media(max-width:640px){
  .credito{flex-direction:column;align-items:flex-start;gap:16px}
  .credito-oab{order:-1;height:54px;padding:8px 12px}
}
.aviso-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,120%);
  background:var(--texto);color:#fff;padding:12px 20px;border-radius:99px;
  font-size:14px;z-index:100;transition:transform .28s;box-shadow:0 8px 26px rgba(0,0,0,.25);
}
.aviso-toast.aparece{transform:translate(-50%,0)}

/* ---------------- impressão ---------------- */
#areaImpressao{display:none}
@media print{
  body{background:#fff}
  .topo,.trilha,.resumo,.palco,.rodape,.aviso-toast{display:none !important}
  #areaImpressao{display:block;white-space:pre-wrap;font:12pt/1.7 'Times New Roman',serif;padding:0}
  @page{margin:2.5cm 2cm}
}

/* ---------------- área de toque ----------------
   Controles menores que ~44px são difíceis de acertar no celular. Onde o
   visual precisa continuar pequeno, o alvo cresce por padding ou por
   pseudo-elemento invisível, sem mudar a aparência. */
.btn-voltar{padding:12px 4px;margin-left:-4px}
.link-btn{padding:6px 2px}
.pilula{padding:10px 15px}
.btn-mini{padding:10px 14px}
.btn-mini.discreto{padding:10px 8px}
.ciente input{width:22px;height:22px}
.aba{padding:14px 17px}
/* alvo ampliado para o rótulo do gráfico e ícones pequenos */
.trilha li{padding:14px 12px}

/* ---------------- foco de teclado ----------------
   Sem isto, quem navega por Tab não enxerga onde está. O anel usa o azul da
   marca e um halo branco por fora, para permanecer visível também sobre os
   fundos azuis (topo, barra-resumo, caixa de valor). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--azul);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(255,255,255,.9);
}
.topo :focus-visible, .resumo :focus-visible,
.caixa-valor :focus-visible, .rodape :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 5px rgba(0,0,0,.35);
}
/* o checkbox de ciência é o gargalo do fluxo: merece destaque próprio */
.ciente:has(:focus-visible){box-shadow:0 0 0 3px var(--azul-claro)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}