/* HostMind Parcerias — sistema visual (design.md 3-8). Fontes locais, zero rede. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plusjakartasans-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-next-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-next-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --fundo:#F6F3EA;--superficie:#FFFFFF;--texto:#202C27;--texto-sec:#53605A;
  --acao:#185540;--acao-hover:#103E2F;--acao-suave:#E8F0EB;
  --urgente:#A83E2C;--urgente-suave:#F9E8E2;--coral:#C95B45;
  --borda:rgba(32,44,39,.10);--campo:#748078;--foco:#185540;
  --e1:0 1px 2px rgba(24,85,64,.03),0 4px 12px rgba(24,85,64,.04),0 12px 32px rgba(24,85,64,.03);
  --e1h:0 1px 2px rgba(24,85,64,.03),0 4px 12px rgba(24,85,64,.04),0 16px 40px rgba(24,85,64,.05);
  --r-campo:8px;--r-botao:12px;--r-dossie:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --lateral:15.5rem;
  --font-ui:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-marca:"Atkinson Hyperlegible Next","Plus Jakarta Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* raiz 16-24px: 12px + 0,27778vw (design.md §6, bate a regra da casa) */
html{font-size:clamp(16px,12px + .27778vw,24px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--texto);font:400 1.25rem/1.5 var(--font-ui);font-feature-settings:"tnum" 1;overflow-wrap:anywhere}
img,svg{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1{font-size:2.44rem;font-weight:500;line-height:1.15;letter-spacing:-.025em}
h2{font-size:1.5625rem;font-weight:500;line-height:1.15;letter-spacing:-.025em}
h3{font-size:1.25rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
a{color:var(--acao)}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.pular{position:absolute;left:-999px;top:0;background:var(--acao);color:#fff;padding:.75rem 1rem;z-index:50;border-radius:0 0 var(--r-botao) 0}
.pular:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec{color:var(--texto-sec)}
.peq{font-size:1rem}
.etiqueta{font-size:.75rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-sec)}

/* marca */
.marca{display:block;text-decoration:none;color:var(--texto)}
.marca b{display:block;font:700 1.8rem/1.05 var(--font-marca);letter-spacing:-.05em;color:#202c27}
.marca span{display:block;font:400 1rem/1.2 var(--font-marca);color:var(--texto-sec);margin-top:.3rem}

/* shell */
.app{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);min-height:100dvh;background:linear-gradient(to right,#F0EDE4 var(--lateral),transparent 0)}
.lateral{background:#F0EDE4;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:2rem;position:sticky;top:0;height:100dvh;overflow:auto}
.lateral .marca{padding:0 .5rem}
.nav{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:.5rem .75rem;border-radius:var(--r-botao);color:var(--texto);text-decoration:none;font-size:1rem;font-weight:400;transition:background 150ms var(--ease)}
.nav a:hover{background:rgba(24,85,64,.06)}
.nav a[aria-current="page"]{background:var(--acao-suave);font-weight:600}
.ic{width:1.5rem;height:1.5rem;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.lateral .rodape-lateral{margin-top:auto;padding:0 .5rem;font-size:1rem}
.lateral .rodape-lateral b{display:block;font-weight:600}
.corpo{display:flex;flex-direction:column;min-width:0;padding:1.5rem 2rem 2rem}
.topo{display:flex;align-items:center;gap:2rem;margin-bottom:2rem}
.topo .marca{display:none}
.busca{flex:0 1 40rem;display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:0 1rem;background:var(--superficie);border:1px solid var(--campo);border-radius:var(--r-botao);width:100%}
.busca input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;color:var(--texto);min-height:2.75rem}
.busca input:focus-visible{outline:none}
.busca:focus-within{outline:2px solid var(--foco);outline-offset:3px}
.busca kbd{font:500 .75rem var(--font-ui);background:var(--acao-suave);color:var(--acao);padding:.35rem .6rem;border-radius:var(--r-campo)}
.aviso-demo{font-size:.8rem;color:var(--texto-sec);white-space:nowrap}
main{flex:1;max-width:80rem;width:100%}
.titulo{margin-bottom:1.5rem}
.oq{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;margin-top:.75rem;max-width:62rem}
.oq h2{font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.5}
.oq p{color:var(--texto-sec);max-width:65ch}
.rodape{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--borda);font-size:1rem;color:var(--texto-sec)}
.dock{display:none}

/* blocos */
.bloco{margin-top:2rem}
.bloco>h2{margin-bottom:1rem}
.cartao{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-botao);padding:1.5rem;box-shadow:var(--e1)}
.cartao.dossie{border-radius:var(--r-dossie);padding:0;overflow:hidden;box-shadow:var(--e1)}
.dossie .miolo{padding:1.5rem 2rem 2rem}
.dossie img.foto{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:center 60%}
.cartao a.cobre{color:inherit;text-decoration:none}
.cartao a.cobre::after{content:"";position:absolute;inset:0}
.cartao.link{position:relative;transition:transform 150ms var(--ease),box-shadow 150ms var(--ease)}
.cartao.link:hover{transform:translateY(-2px);box-shadow:var(--e1h)}
.cartao.link:focus-within{outline:2px solid var(--foco);outline-offset:3px}
.cartao h3{margin-bottom:.25rem}
.cartao p{color:var(--texto-sec);font-size:1rem}
.grade-decisao{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2rem;align-items:start}
.coluna>h2{margin-bottom:1rem}
.coluna .cartao+.cartao{margin-top:1rem}
.orgao{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}
.inicial{flex:none;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--acao);color:#fff;font-weight:600;font-size:1.25rem}
.alerta-urgente{margin-top:1.5rem;background:var(--urgente-suave);border-radius:var(--r-botao);padding:1.25rem 1.5rem}
.alerta-urgente h3{color:var(--urgente)}
.pendencias{color:var(--urgente);font-weight:600;margin:1.5rem 0 1rem;display:flex;align-items:center;gap:.6rem}
.ponto{width:.7rem;height:.7rem;border-radius:50%;background:var(--urgente);display:inline-block;flex:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(168,62,44,.45)}100%{box-shadow:0 0 0 .7rem rgba(168,62,44,0)}}
[data-vivo="pulso"] .ponto{animation:pulso 1.4s var(--ease) 3}
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.valores dt{font-size:1rem;color:var(--texto-sec)}
.valores dd{margin:0;font-size:1.5625rem;font-weight:600;color:var(--acao);font-variant-numeric:tabular-nums}
.valores .neg{color:var(--urgente)}
.etapas{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:e}
.etapas li{position:relative;padding-top:2rem;font-size:1rem;color:var(--texto-sec)}
.etapas li::before{content:"";position:absolute;top:.3rem;left:0;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--texto-sec);background:var(--superficie);z-index:1}
.etapas li::after{content:"";position:absolute;top:.8rem;left:1.1rem;right:0;height:2px;background:#d6d9d6}
.etapas li:last-child::after{display:none}
.etapas li.ok,.etapas li.atual{color:var(--acao)}
.etapas li.ok::before,.etapas li.atual::before{background:var(--acao);border-color:var(--acao)}
.etapas li.ok::after{background:var(--acao)}
.etapas li.atual{font-weight:600}
[data-vivo="etapas"] li.ok::after{transform-origin:left;animation:preenche 600ms var(--ease) both}
@keyframes preenche{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* botões */
.acoes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.acoes.col{flex-direction:column;align-items:flex-start;gap:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;min-width:2.75rem;padding:.5rem 1.25rem;border-radius:var(--r-botao);border:1px solid var(--campo);background:var(--superficie);color:var(--acao);font:600 1.25rem/1.3 var(--font-ui);text-decoration:none;cursor:pointer;transition:background 150ms var(--ease),color 150ms var(--ease)}
.btn:hover{background:var(--acao-suave)}
.btn.primario{background:var(--acao);border-color:var(--acao);color:#fff;min-width:14rem;justify-content:flex-start}
.btn.primario:hover{background:var(--acao-hover)}
.btn.bloco-total{display:flex;width:100%;border-radius:0 0 var(--r-dossie) var(--r-dossie)}
.btn[aria-disabled="true"]{background:var(--acao-suave);color:var(--texto-sec);border-color:var(--borda);cursor:not-allowed}
.btn.texto{border:0;background:none;padding:.5rem 0;min-height:2.75rem}
.motivo{font-size:1rem;color:var(--texto-sec)}

/* formulário (campos lidos) */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.5rem;margin-top:1.5rem}
.campo{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label,.campo .rot{font-size:1rem;font-weight:600;color:var(--texto-sec)}
.campo input,.campo select,.campo .valor{min-height:3.25rem;padding:.5rem 1rem;border:1px solid var(--campo);border-radius:var(--r-campo);background:var(--superficie);font:400 1rem/1.4 var(--font-ui);color:var(--texto);width:100%}
.campo .ajuda{font-size:1rem;color:var(--texto-sec)}
.campo input[readonly]{background:#fbfaf6}
.campo.erro input{border-color:var(--urgente);border-width:2px}
.campo .msg-erro{color:var(--urgente);font-size:1rem;font-weight:600}
.perfis{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;border:0;padding:0;margin:0}
.perfis legend{font-weight:600;margin-bottom:.75rem;padding:0}
.perfis label{display:flex;align-items:center;min-height:3.25rem;padding:.5rem 1rem;border:1px solid var(--campo);border-radius:var(--r-botao);color:var(--acao);font-weight:600;font-size:1rem;cursor:pointer}
.perfis input{position:absolute;opacity:0}
.perfis label:has(input:checked){background:var(--acao-suave);border-color:var(--acao)}
.perfis label:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:3px}

/* tabelas */
.tabela-wrap{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-botao);box-shadow:var(--e1);overflow:hidden}
table{border-collapse:collapse;width:100%;font-size:1rem}
caption{text-align:left;padding:1rem 1.5rem;font-weight:600}
th,td{padding:.9rem 1.5rem;text-align:left;border-bottom:1px solid var(--borda);vertical-align:middle;min-height:4rem}
th{font-weight:600;color:var(--texto-sec);font-size:.9rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot td{font-weight:700;border-bottom:0;background:#fbfaf6}
tbody tr:last-child td{border-bottom:0}
.filtros{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0}
.filtros .campo{flex:1 1 12rem}

/* selos, avisos, estado vazio */
.selo{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:var(--r-campo);font-size:.9rem;font-weight:600;background:var(--acao-suave);color:var(--acao);white-space:nowrap}
.selo.pendente{background:#f3eede;color:#5a4a16}
.selo.erro{background:var(--urgente-suave);color:var(--urgente)}
.selo.neutro{background:#ecece8;color:var(--texto-sec)}
.selo::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.aviso{border-radius:var(--r-botao);padding:1.25rem 1.5rem;background:var(--acao-suave);border-left:4px solid var(--acao)}
.aviso.erro{background:var(--urgente-suave);border-color:var(--urgente)}
.aviso.erro h2,.aviso.erro h3{color:var(--urgente)}
.aviso p{color:var(--texto-sec)}
.pilha>*+*{margin-top:1rem}
.vazio{text-align:center;padding:3rem 1.5rem;max-width:40rem;margin:2rem auto}
.vazio .glifo{width:4rem;height:4rem;margin:0 auto 1rem;border-radius:50%;background:var(--acao-suave);display:grid;place-items:center;color:var(--acao)}
.vazio .acoes{justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}

/* cena e diagrama sequencial (vivo.js) */
.cena{position:relative;max-width:42rem}
.cena img{width:100%;height:auto}
.cena svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cena .fio{fill:none;stroke:#3b5a4a;stroke-width:.35;stroke-dasharray:.6 1;opacity:.35;transition:opacity 300ms var(--ease)}
.cena[data-q~="1"] .fio,.cena.q1 .fio{opacity:1}
.cena .ponto-vivo{fill:var(--coral);opacity:0}
.cena.q2 .ponto-vivo,.cena.q-fim .ponto-vivo{opacity:1}
.cena .legenda{margin-top:.75rem;font-size:1rem;color:var(--texto-sec)}
.seq{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none;margin:1.5rem 0 0;padding:0}
.seq li{position:relative;padding:1rem;border:1px solid var(--borda);border-radius:var(--r-botao);background:var(--superficie);font-size:1rem;color:var(--texto-sec);opacity:1}
.seq li b{display:block;color:var(--texto);font-weight:600}
.seq li.erro{border-color:var(--urgente);background:var(--urgente-suave)}
.seq li.erro b{color:var(--urgente)}
.seq li.ok{border-color:var(--acao);background:var(--acao-suave)}
[data-vivo="seq"].espera li{opacity:.25;transform:translateY(4px)}
[data-vivo="seq"] li{transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
[data-vivo="seq"] li.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-vivo="seq"].espera li{opacity:1;transform:none}
}

/* login público */
.publico{max-width:80rem;margin:0 auto;padding:1.5rem 2rem 2rem}
.publico .topo{margin-bottom:2rem}
.publico .topo .marca{display:block}
.login-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:3rem;align-items:start;margin-top:1rem}
.login-form{background:var(--superficie);border-radius:var(--r-dossie);padding:2rem;box-shadow:var(--e1);display:flex;flex-direction:column;gap:1.25rem}
.login-cena{padding-top:1rem}
.login-grade .oq{grid-template-columns:1fr;gap:1rem}

.links-login{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0}
.links-login a{display:inline-flex;align-items:center;min-height:2.75rem}
/* lista rotulada (mobile) */
@media (max-width:900px){
  html{font-size:16px}
  body{font-size:1.0625rem;padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
  .app{display:block;background:none}
  .lateral{display:none}
  .corpo{padding:1rem 1rem 1.5rem}
  .topo{flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
  .topo .marca{display:block}
  .topo .marca b{font-size:1.45rem}
  .topo .marca span{font-size:.85rem}
  .topo .aviso-demo{order:2;flex-basis:100%;white-space:normal}
  .busca{order:3;flex-basis:100%}
  .busca kbd{display:none}
  h1{font-size:1.9rem}
  .oq,.grade-decisao,.form,.login-grade{grid-template-columns:1fr}
  .btn{font-size:1.0625rem}
  .oq{gap:.75rem}
  .grade-decisao{gap:1.5rem}
  .valores{grid-template-columns:1fr;gap:.75rem}
  .etapas{grid-template-columns:1fr;gap:.9rem}
  .etapas li{padding:0 0 0 2rem}
  .etapas li::after{top:1.2rem;left:.45rem;width:2px;height:calc(100% - .2rem);right:auto}
  .seq{grid-template-columns:1fr}
  .dossie .miolo{padding:1.25rem}
  .btn.primario{width:100%;min-width:0}
  .acoes .btn{width:100%}
  .publico{padding:1rem}
  .login-form{padding:1.25rem}
  .rodape{margin-bottom:1rem}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--superficie);border-top:1px solid var(--borda);padding:.25rem .5rem calc(.25rem + env(safe-area-inset-bottom));z-index:20}
  .dock a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:3.25rem;min-width:2.75rem;font-size:.85rem;font-weight:600;color:var(--acao);text-decoration:none;border-radius:var(--r-campo)}
  .dock a[aria-current="page"]{background:var(--acao-suave)}
  /* tabela vira registros rotulados */
  table,caption,thead,tbody,tfoot,tr,th,td{display:block}
  caption{width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{padding:1rem 1.25rem;border-bottom:1px solid var(--borda)}
  td{border:0;padding:.2rem 0;display:flex;justify-content:space-between;gap:1rem;text-align:right}
  td::before{content:attr(data-r);font-weight:600;color:var(--texto-sec);text-align:left}
  td.num{white-space:normal}
  tfoot tr{background:#fbfaf6}
}
@media (min-width:2200px){main{max-width:min(80%,120rem)}}

/* integração (telas dinâmicas) */
.topo .sessao{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--texto-sec);white-space:nowrap;margin-left:auto}
.topo .sessao .btn{min-height:2.75rem;padding:.4rem 1rem;font-size:1rem}
.cel{min-height:2.75rem;padding:.4rem .75rem;border:1px solid var(--campo);border-radius:var(--r-campo);background:var(--superficie);font:400 1rem/1.4 var(--font-ui);color:var(--texto);width:100%;min-width:6rem}
td .cel[name="mes"],td .cel[name="numero"]{min-width:4rem;max-width:6rem}
form [hidden],.aviso[hidden]{display:none}
.msg-erro[hidden]{display:none}
.aviso ul{margin:.5rem 0 0}
.login-form .aviso{margin-bottom:.25rem}