[hidden]{display:none!important}
img{max-width:100%}
:root{
  color-scheme:light;
  --ground:#FBF7EE; --surface:#FFFFFF; --surface-2:#F8F4EA; --line:#EBE3D5; --line-soft:#F3EDE2;
  --ink:#241B12; --ink-2:#5B4C3D; --ink-3:#8B7A66;
  --navy:#0A66B0; --navy-ink:#FFFFFF; --navy-soft:#E7F1FA;
  --bar:#FFFFFF; --bar-ink:#33291F; --bar-ink-2:#9A8A76; --bar-line:#F0E9DD; --bar-hover:#F8F4EA;
  --gold:#9A6E14; --gold-soft:#F6EEDA; --gold-bar:#D2A34A;
  --ok:#2F6B3F; --ok-soft:#E8F0E4;
  --warn:#8F5500; --warn-soft:#F8EDDC;
  --crit:#9C2A20; --crit-soft:#F8E6E3;
  --shadow:0 1px 2px rgba(59,39,25,.06), 0 10px 26px -18px rgba(59,39,25,.45);
  --r:10px;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.55;
}
h1,h2,h3,h4{font-family:Archivo,"IBM Plex Sans",sans-serif; margin:0; line-height:1.2; text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- estrutura ---------- */
.app{display:grid; grid-template-columns:238px 1fr; min-height:100%}
@media (max-width:900px){.app{grid-template-columns:1fr}}

.side{background:var(--bar); color:var(--bar-ink); border-right:1px solid var(--bar-line); display:flex; flex-direction:column; gap:4px; padding:0 0 18px; max-height:100vh; position:sticky; top:0; overflow-y:auto}
.side-top{padding:18px 18px 14px; border-bottom:1px solid var(--bar-line)}
.marca{display:flex; align-items:center; gap:10px}
.marca img{width:38px; height:38px; border-radius:9px; flex:none}
.logo{font-family:Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:.06em; color:var(--bar-ink)}
.logo em{font-style:normal; color:var(--navy)}
.logo-sub{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bar-ink-2); margin-top:3px}
.side nav{display:flex; flex-direction:column; gap:1px; padding:10px}
.side .cat{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bar-ink-2); padding:14px 10px 6px}
.nav-b{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--bar-ink); padding:8px 10px; border-radius:7px; font-size:13.5px;
}
.nav-b:hover{background:var(--bar-hover)}
.nav-b[aria-current="true"]{background:var(--navy-soft); color:var(--navy); font-weight:600; box-shadow:inset 2px 0 0 var(--navy)}
:root[data-theme="dark"] .nav-b[aria-current="true"],
:root:not([data-theme="light"]) .nav-b[aria-current="true"]{color:var(--ink)}
.nav-b svg{width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.7}
.nav-b[aria-current="true"] svg{opacity:1; color:var(--navy)}
.side-foot{margin-top:auto; padding:14px 18px 0; border-top:1px solid var(--bar-line); font-size:11px; color:var(--bar-ink-2)}

@media (max-width:900px){
  .side{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; max-height:none; overflow:visible}
  .side nav{flex-direction:row; overflow-x:auto; gap:4px; padding:8px 12px}
  .side .cat{display:none}
  .nav-b{white-space:nowrap}
  .side-foot{display:none}
}

main{padding:22px 24px 60px; min-width:0}
@media (max-width:560px){main{padding:18px 16px 48px}}

.top-linha{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.top-linha h1{font-size:23px}
.top-linha p{color:var(--ink-2); font-size:14px; max-width:64ch; margin-top:5px}
.top-acoes{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.perfil{display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 5px 4px 12px}
.perfil span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.perfil select{border:0; background:var(--surface-2); border-radius:999px; padding:5px 10px; font-size:13px; font-weight:500}

.aviso-proto{
  display:flex; gap:10px; align-items:baseline; background:var(--gold-soft); border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0; padding:11px 14px; font-size:13px; color:var(--ink-2); margin-bottom:20px;
}
.aviso-proto b{color:var(--ink)}

/* ---------- blocos ---------- */
.painel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.painel-h{padding:13px 16px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.painel-h h2{font-size:15px; font-weight:600}
.painel-b{padding:16px}
.eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.cols{display:grid; gap:18px; align-items:start}
.c-2{grid-template-columns:1.25fr 1fr}
.c-form{grid-template-columns:minmax(280px,340px) 1fr}
@media (max-width:900px){.c-2,.c-form{grid-template-columns:1fr}}

/* indicadores */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px}
.kpi .rot{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.kpi .num{font-family:Archivo,sans-serif; font-size:27px; font-weight:700; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums}
.kpi .pe{font-size:12px; color:var(--ink-3); margin-top:2px}
.kpi[data-t="gold"] .num{color:var(--gold)}
.kpi[data-t="ok"] .num{color:var(--ok)}
.kpi[data-t="warn"] .num{color:var(--warn)}

/* ação coletiva */
.acao{
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:var(--r); padding:20px 22px; display:grid; box-shadow:var(--shadow);
  grid-template-columns:1fr auto; gap:18px; align-items:center; margin-bottom:20px;
}
@media (max-width:640px){.acao{grid-template-columns:1fr}}
.acao .rot{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600}
.acao h2{font-size:22px; color:var(--ink); margin-top:5px}
.acao p{color:var(--ink-2); font-size:13.5px; margin-top:6px; max-width:52ch}
.contagem{text-align:center; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:12px 20px}
.contagem .n{font-family:Archivo,sans-serif; font-size:34px; font-weight:700; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums}
.contagem .l{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:5px}

/* formulários */
.campo{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.campo label{font-size:12px; font-weight:600; color:var(--ink-2)}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="date"],input[type="file"],select,textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px; font-size:14px;
}
textarea{min-height:70px; resize:vertical}
.linha-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:460px){.linha-2{grid-template-columns:1fr}}
.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; padding:8px 13px; border-radius:8px; font-size:13.5px; font-weight:500}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn-main{background:var(--navy); color:var(--navy-ink); border-color:var(--navy); font-weight:600}
.btn-main:hover{filter:brightness(1.08); background:var(--navy)}
.btn-ghost{background:none; border-color:transparent; color:var(--ink-2)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}
.btn-pq{padding:5px 9px; font-size:12.5px}

/* tabelas */
.tab-wrap{overflow-x:auto}
table.t{width:100%; border-collapse:collapse; font-size:13.5px}
table.t th{
  text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.t td{padding:9px 10px 9px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t .nome{color:var(--ink); font-weight:500}
table.t .doc,table.t .val{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
table.t .val{text-align:right}
table.t input[type="checkbox"]{width:16px; height:16px; accent-color:var(--navy)}
.vazio{padding:26px 0; text-align:center; color:var(--ink-3); font-size:13.5px}

.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill[data-s="pendente"]{color:var(--warn); background:var(--warn-soft)}
.pill[data-s="enviado"]{color:var(--navy); background:var(--navy-soft)}
.pill[data-s="analise"]{color:var(--navy); background:var(--navy-soft)}
.pill[data-s="concluido"]{color:var(--ok); background:var(--ok-soft)}
.pill[data-s="parado"]{color:var(--crit); background:var(--crit-soft)}

/* barra de seleção */
.barra-sel{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--navy-soft);
  border:1px solid color-mix(in srgb,var(--navy) 25%,transparent); border-radius:9px; padding:11px 14px; margin-bottom:14px;
}
.barra-sel .res{font-size:13px; color:var(--ink-2)}
.barra-sel b{color:var(--ink); font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.barra-sel .btn-row{margin-left:auto}

/* serviços */
.serv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:16px}
.serv{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px}
.serv .g{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold)}
.serv h3{font-size:15.5px}
.serv p{font-size:13px; color:var(--ink-2)}
.precos{display:flex; gap:18px; flex-wrap:wrap}
.precos > div{display:flex; flex-direction:column; gap:2px}
.precos .r{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.precos .v{font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink)}
.precos .v.destaque{color:var(--gold)}
.serv .precos{padding-top:10px; border-top:1px solid var(--line-soft); margin-top:auto}

/* trilha do método */
.trilha{display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin:16px 0 4px}
@media (max-width:640px){.trilha{grid-template-columns:repeat(3,1fr)}}
.et{padding:9px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line-soft)}
.et .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}
.et .t{font-size:12px; font-weight:600; color:var(--ink-2); margin-top:2px; line-height:1.25}
.et[data-st="feito"]{background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.et[data-st="feito"] .t{color:var(--ok)}
.et[data-st="feito"] .n{color:var(--ok)}
.et[data-st="atual"]{background:var(--navy); border-color:var(--navy)}
.et[data-st="atual"] .t,.et[data-st="atual"] .n{color:var(--navy-ink)}

.bola{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:14px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line-soft)}
.bola .quem{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:999px}
.bola[data-d="cliente"] .quem{background:var(--warn-soft); color:var(--warn)}
.bola[data-d="mesa"] .quem{background:var(--navy-soft); color:var(--navy)}
.bola h4{font-size:14.5px; margin-bottom:3px}
.bola p{font-size:13px; color:var(--ink-2)}
.bola .prazo{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); margin-top:6px}

.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; border:1px solid var(--line-soft); border-radius:8px; overflow:hidden}
.checklist li{display:flex; gap:10px; align-items:center; padding:10px 13px; background:var(--surface); font-size:13.5px}
.checklist li .ic{width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}
.checklist li[data-ok="1"] .ic{background:var(--ok-soft); color:var(--ok)}
.checklist li[data-ok="0"] .ic{background:var(--warn-soft); color:var(--warn)}
.checklist li[data-ok="1"] span{color:var(--ink-3)}
.checklist li span{color:var(--ink-2)}

.hist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.hist li{display:grid; grid-template-columns:86px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-2)}
.hist li:last-child{border-bottom:0}
.hist time{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}

/* ranking */
.rank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.rank li{display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; font-size:13.5px}
.rank .pos{font-family:"IBM Plex Mono",monospace; color:var(--ink-3); font-size:12px}
.rank .barra{height:7px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:5px}
.rank .barra i{display:block; height:100%; background:var(--navy); border-radius:99px}
.rank li:first-child .barra i{background:var(--gold)}
.rank .v{font-family:"IBM Plex Mono",monospace; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--ink); color:var(--ground); padding:9px 16px; border-radius:999px; font-size:13px; font-weight:500;
  z-index:60; box-shadow:var(--shadow);
}
.rodape-nota{margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); max-width:74ch}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

/* ---------- capa (Início) ---------- */
.capa{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF7EF 100%); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1.15fr .85fr; gap:0; margin-bottom:20px;
}
@media (max-width:820px){.capa{grid-template-columns:1fr}}
.capa-txt{padding:32px 34px}
@media (max-width:560px){.capa-txt{padding:24px 20px}}
.capa .saud{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600}
.capa h2{font-size:31px; line-height:1.12; margin-top:10px; color:var(--ink); letter-spacing:-.015em}
@media (max-width:560px){.capa h2{font-size:25px}}
.capa h2 em{font-style:normal; color:var(--navy)}
.capa p{color:var(--ink-2); font-size:14.5px; margin-top:12px; max-width:46ch}
.capa .btn-row{margin-top:20px}
.capa-marca{display:grid; place-items:center; padding:28px; background:var(--surface-2); border-left:1px solid var(--line)}
@media (max-width:820px){.capa-marca{border-left:0; border-top:1px solid var(--line)}}
.capa-marca img{width:100%; max-width:190px; border-radius:16px; box-shadow:0 16px 34px -20px rgba(10,45,90,.5)}

.atalhos{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:20px}
.atalho{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; text-align:left;
  cursor:pointer; display:flex; flex-direction:column; gap:5px; box-shadow:var(--shadow);
}
.atalho:hover{border-color:var(--navy); transform:translateY(-1px)}
.atalho .r{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600}
.atalho b{font-family:Archivo,sans-serif; font-size:16px}
.atalho span{font-size:13px; color:var(--ink-2)}

.msg{display:grid; grid-template-columns:186px 1fr; gap:22px; align-items:center}
@media (max-width:640px){.msg{grid-template-columns:1fr}}
.msg img{width:100%; border-radius:12px; display:block}
.msg blockquote{margin:9px 0 0; font-family:Archivo,sans-serif; font-size:19px; line-height:1.4; color:var(--ink)}
@media (max-width:560px){.msg blockquote{font-size:17px}}
.msg cite{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:11px; letter-spacing:.04em}

/* ================= layout bento ================= */
:root{ --r:18px; --linha-suave:#F1EBE1; }
body{ font-size:15px; }
.app{grid-template-columns:78px 1fr}
@media (max-width:900px){.app{grid-template-columns:1fr}}

.side{
  width:78px; height:100vh; position:sticky; top:0; z-index:40; overflow:visible;
  border-right:1px solid var(--linha-suave); transition:width .18s ease; padding-bottom:10px;
}
.side:hover,.side:focus-within{width:252px; box-shadow:26px 0 46px -34px rgba(40,28,16,.55)}
.side-top{padding:16px 18px; border-bottom:1px solid var(--linha-suave)}
.marca{gap:12px}
.marca img{width:42px; height:42px; border-radius:12px}
.marca-txt{opacity:0; transition:opacity .16s ease; white-space:nowrap}
.side:hover .marca-txt,.side:focus-within .marca-txt{opacity:1}
.side nav{padding:10px 12px; gap:2px; overflow-y:auto; overflow-x:hidden}
.side .cat{opacity:0; height:10px; padding:4px 10px 0; overflow:hidden; transition:opacity .16s ease}
.side:hover .cat,.side:focus-within .cat{opacity:1; height:auto; padding:15px 10px 6px}
.nav-b{gap:14px; padding:10px 13px; border-radius:12px; white-space:nowrap; overflow:hidden}
.nav-b svg{width:19px; height:19px; stroke-width:1.6}
.nav-b b{font-weight:500; opacity:0; transform:translateX(-5px); transition:opacity .16s ease, transform .16s ease}
.side:hover .nav-b b,.side:focus-within .nav-b b{opacity:1; transform:none}
.nav-b[aria-current="true"]{box-shadow:none; background:var(--navy-soft)}
.nav-b[aria-current="true"] b{font-weight:600}
.side-foot{opacity:0; transition:opacity .16s; white-space:nowrap}
.side:hover .side-foot{opacity:1}
@media (max-width:900px){
  .side{width:100%; height:auto; position:sticky; top:env(safe-area-inset-top,0px)}
  .side:hover,.side:focus-within{width:100%; box-shadow:none}
  .side .cat{display:none}
  .nav-b b,.marca-txt{opacity:1!important; transform:none!important}
  .side-foot{display:none}
}

main{padding:26px 30px 70px}
@media (max-width:560px){main{padding:18px 16px 48px}}
.top-linha{align-items:center; margin-bottom:18px}
.top-linha h1{font-size:27px; letter-spacing:-.02em}
.top-linha p{font-size:14px}

/* busca rápida */
.busca{position:relative}
.busca input{
  width:260px; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:9px 14px 9px 36px; font-size:13.5px;
}
.busca svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--ink-3); fill:none; stroke-width:1.8}
@media (max-width:560px){.busca input{width:100%}.busca{flex:1 1 100%}}
.resultados{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 22px 44px -26px rgba(40,28,16,.6); padding:6px; z-index:50; max-height:320px; overflow:auto;
}
.resultados button{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:9px 11px; border-radius:10px;
}
.resultados button:hover{background:var(--surface-2)}
.resultados b{font-size:13.5px; font-weight:600}
.resultados span{font-size:11.5px; color:var(--ink-3)}
.resultados .nada{padding:12px; font-size:13px; color:var(--ink-3)}

/* cartões */
.painel,.kpi,.serv,.atalho{border-radius:var(--r); border-color:var(--linha-suave)}
.painel,.serv,.atalho{box-shadow:0 1px 1px rgba(40,28,16,.03), 0 16px 34px -28px rgba(40,28,16,.55)}
.painel-h{padding:15px 20px}
.painel-b{padding:20px}

/* grade bento */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-bottom:8px}
.bcard{
  background:var(--surface); border:1px solid var(--linha-suave); border-radius:22px; padding:22px;
  box-shadow:0 1px 1px rgba(40,28,16,.03), 0 16px 34px -28px rgba(40,28,16,.55);
  display:flex; flex-direction:column; min-width:0;
}
.b-capa{grid-column:span 8; grid-row:span 2; justify-content:center; gap:4px;
  background:radial-gradient(120% 140% at 88% 10%, rgba(10,102,176,.10) 0%, rgba(255,255,255,0) 58%), var(--surface);}
.b-acao{grid-column:span 4}
.b-kpi{grid-column:span 2; padding:18px}
.b-lista{grid-column:span 7}
.b-msg{grid-column:span 5}
.b-atalho{grid-column:span 3; cursor:pointer; gap:6px; padding:18px; transition:transform .14s ease, border-color .14s ease}
.b-atalho:hover{transform:translateY(-2px); border-color:var(--navy)}
.b-full{grid-column:span 12}
@media (max-width:1100px){
  .b-capa{grid-column:span 12; grid-row:auto}
  .b-acao{grid-column:span 6}
  .b-kpi{grid-column:span 3}
  .b-lista,.b-msg{grid-column:span 12}
  .b-atalho{grid-column:span 6}
}
@media (max-width:640px){
  .b-acao,.b-kpi,.b-atalho{grid-column:span 12}
  .bcard{padding:18px; border-radius:18px}
}
.bcard .rot{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600}
.bcard h2{font-size:34px; line-height:1.08; letter-spacing:-.025em; margin-top:12px}
@media (max-width:640px){.bcard h2{font-size:26px}}
.bcard h2 em{font-style:normal; color:var(--navy)}
.bcard .sub{color:var(--ink-2); font-size:15px; margin-top:12px; max-width:42ch}
.marca-capa{display:flex; align-items:center; gap:12px}
.marca-capa img{width:46px; height:46px; border-radius:13px; flex:none}
.marca-capa span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.b-capa .btn-row{margin-top:22px}
.grande{font-family:Archivo,sans-serif; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.b-acao .grande{font-size:56px; line-height:1; color:var(--navy); margin-top:auto}
.b-acao .data{font-size:17px; font-weight:600; margin-top:10px}
.b-acao .nota{font-size:13px; color:var(--ink-2); margin-top:8px}
.b-kpi .rot{color:var(--ink-3); letter-spacing:.1em}
.b-kpi .grande{font-size:32px; margin-top:auto; padding-top:14px}
.b-kpi .pe{font-size:12px; color:var(--ink-3); margin-top:3px}
.b-atalho .t{font-family:Archivo,sans-serif; font-size:16px; font-weight:600; margin-top:auto; padding-top:10px}
.b-atalho .d{font-size:12.5px; color:var(--ink-2)}
.b-msg{flex-direction:row; gap:20px; align-items:center}
.b-msg img{width:150px; border-radius:16px; flex:none}
@media (max-width:640px){.b-msg{flex-direction:column; align-items:flex-start}.b-msg img{width:120px}}
.b-msg blockquote{margin:8px 0 0; font-family:Archivo,sans-serif; font-size:17px; line-height:1.4}
.b-msg cite{display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:10px}
.b-lista .cab{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.b-lista .cab h3{font-size:16px}
.b-lista .cab .eyebrow{margin-left:auto}
.linhas{display:flex; flex-direction:column; gap:2px}
.linha{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:11px 12px; border-radius:12px; background:var(--surface-2)}
.linha .nm{font-weight:500; font-size:14px}
.linha .sv{font-size:12px; color:var(--ink-3)}
.linha .btn{padding:6px 11px; font-size:12.5px}

/* ---------- banner com foto ---------- */
.b-banner{
  grid-column:span 12; flex-direction:row; padding:0; overflow:hidden; align-items:stretch; height:300px;
  background:radial-gradient(90% 130% at 74% 0%, rgba(10,102,176,.10) 0%, rgba(255,255,255,0) 60%), var(--surface);
}
.banner-txt{flex:1 1 auto; padding:30px 34px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.banner-foto{flex:0 0 38%; max-width:430px; position:relative; overflow:hidden}
.banner-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block}
.banner-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--surface) 0%, rgba(255,255,255,.55) 26%, rgba(255,255,255,0) 62%);
}
.b-quote{grid-column:span 4; justify-content:center}
.b-quote blockquote{margin:10px 0 0; font-family:Archivo,sans-serif; font-size:17px; line-height:1.4}
.b-quote cite{display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:12px}
.b-lista{grid-column:span 8}
.b-atalho{grid-column:span 3}
@media (max-width:1100px){
  .b-quote{grid-column:span 12}
  .b-lista{grid-column:span 12}
  .b-atalho{grid-column:span 6}
}
@media (max-width:820px){
  .b-banner{flex-direction:column-reverse; height:auto}
  .banner-foto{flex:none; max-width:none; width:100%; height:190px}
  .banner-foto img{object-position:50% 16%}
  .banner-foto::after{background:linear-gradient(0deg, var(--surface) 0%, rgba(255,255,255,.35) 34%, rgba(255,255,255,0) 72%)}
  .banner-txt{padding:22px}
}
@media (max-width:640px){.b-atalho{grid-column:span 12}}

/* ================= tela de entrada ================= */
.entrada{
  min-height:100%; display:grid; place-items:center; padding:28px 18px;
  background:radial-gradient(90% 70% at 50% 0%, rgba(10,102,176,.10) 0%, rgba(255,255,255,0) 60%), var(--ground);
}
.entrada-cartao{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--linha-suave, var(--line));
  border-radius:22px; padding:30px 28px; box-shadow:0 1px 1px rgba(40,28,16,.03), 0 26px 50px -32px rgba(40,28,16,.6);
}
.entrada-logo{width:56px; height:56px; border-radius:15px; display:block}
.entrada-cartao h1{font-size:21px; margin-top:16px; letter-spacing:-.01em}
.entrada-cartao > p{color:var(--ink-2); font-size:14px; margin:6px 0 20px}
.entrada-erro{
  margin-top:14px; font-size:13px; color:var(--crit); background:var(--crit-soft);
  border-radius:10px; padding:10px 12px;
}
.entrada-rodape{margin-top:18px; font-size:12px; color:var(--ink-3); line-height:1.5}
.entrada .campo input{border-radius:10px; padding:11px 12px}

.perfil span{font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-2)}
.perfil .btn-pq{border-radius:999px}

.carregando{
  position:fixed; inset:auto 0 0 0; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px; background:var(--surface); border-top:1px solid var(--line); font-size:13px; color:var(--ink-2); z-index:70;
}
.carregando span{
  width:14px; height:14px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--navy);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.carregando span{animation:none}}

/* ================= formulário de rating ================= */
.abas{display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:0}
.aba{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  padding:9px 16px; font-size:14px; font-weight:500; color:var(--ink-2); border-radius:8px 8px 0 0;
}
.aba:hover{background:var(--surface-2); color:var(--ink)}
.aba[aria-selected="true"]{color:var(--navy); border-bottom-color:var(--navy); font-weight:600}
.secao{margin-bottom:22px}
.secao > .eyebrow{display:block; margin-bottom:10px}
.grade-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 14px}
.grade-campos .campo{margin-bottom:0}
.nota-acessos{
  font-size:12.5px; color:var(--ink-2); background:var(--crit-soft); border-left:3px solid var(--crit);
  border-radius:0 8px 8px 0; padding:10px 12px; margin-bottom:12px;
}
.nota-acessos b{color:var(--ink)}

/* ================= area do PIX ================= */
.pix-area{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
@media (max-width:640px){.pix-area{grid-template-columns:1fr}}
.pix-qr{
  width:210px; height:210px; display:grid; place-items:center; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
}
.pix-qr svg{display:block; width:190px; height:190px}
.pix-codigo{
  font-size:11.5px; line-height:1.5; word-break:break-all; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:4px; max-height:120px; overflow:auto;
}

/* ================= minhas listas ================= */
.lista-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:0; overflow:hidden;
  box-shadow:0 1px 1px rgba(40,28,16,.03), 0 16px 34px -28px rgba(40,28,16,.55); margin-bottom:18px;
}
.lista-topo{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; background:var(--surface-2); border-bottom:1px solid var(--line-soft);
}
.lista-id{
  flex:none; width:46px; height:46px; border-radius:13px; background:var(--navy); color:var(--navy-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;
}
.lista-tit{min-width:180px; flex:1 1 220px}
.lista-tit h3{font-size:17px; line-height:1.25}
.lista-sub{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.lista-pag{margin-left:auto}
.lista-conta{margin-left:auto; font-size:12px; color:var(--ink-3); white-space:nowrap}

.progresso{display:flex; align-items:center; gap:12px; padding:14px 20px 0}
.progresso .barra{
  flex:1 1 auto; height:7px; border-radius:999px; background:var(--line-soft); overflow:hidden;
  border:1px solid var(--line);
}
.progresso .barra i{
  display:block; height:100%; border-radius:999px; background:var(--ok);
  transition:width .35s ease;
}
.progresso .p-txt{
  flex:none; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); white-space:nowrap;
}

.biros{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; padding:14px 20px 18px}
.biro{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:13px;
  border:1px solid var(--line); background:var(--surface); text-align:left; font:inherit; cursor:default; width:100%;
}
button.biro{cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease}
button.biro:hover{border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-soft)}
.biro .sigla{
  flex:none; width:34px; height:34px; border-radius:10px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.04em;
}
.biro .b-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.biro .b-nome{font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.biro .b-st{display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--warn)}
.ic-st{width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.biro[data-st="baixado"]{background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.biro[data-st="baixado"] .b-st{color:var(--ok)}

.lista-nomes{
  display:flex; flex-direction:column; gap:1px; margin:0 20px;
  border:1px solid var(--line-soft); border-radius:12px; overflow:hidden;
}
.nome-linha{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface)}
.nome-linha:nth-child(even){background:var(--surface-2)}
.nm-bloco{display:flex; flex-direction:column; gap:1px; min-width:0}
.nome-linha .nm{font-size:13.5px; font-weight:500}
.nome-linha .dc{font-size:11.5px; color:var(--ink-3)}
.selo{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:4px 10px; border-radius:999px;
  background:var(--warn-soft); color:var(--warn); white-space:nowrap;
}
.nome-linha .selo{margin-left:auto}
.selo[data-s="pago"]{background:var(--ok-soft); color:var(--ok)}
.selo[data-s="aguardando"]{background:var(--warn-soft); color:var(--warn)}
.ver-todos{margin:12px 20px 0; display:inline-flex}
.lista-card .lista-nomes + .ver-todos{margin-bottom:0}
.lista-card > :last-child{margin-bottom:18px}

@media(max-width:720px){
  .lista-topo{padding:14px}
  .biros{grid-template-columns:1fr 1fr; padding:12px 14px 16px}
  .progresso{padding:12px 14px 0; flex-wrap:wrap}
  .lista-nomes{margin:0 14px}
  .ver-todos{margin:12px 14px 0}
}

/* ================= tela de envio: etapas, abas e filtros ================= */
.etapas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin:0 0 10px;
}
.etapa{
  display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface); min-width:0;
}
.etapa[role="button"]{cursor:pointer}
.etapa[role="button"]:hover{border-color:var(--navy)}
.et-n{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:14px;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);
}
.et-txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.et-txt b{font-size:13.5px; font-weight:600; color:var(--ink)}
.et-txt i{font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.35}
.etapa[data-e="agora"]{border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-soft)}
.etapa[data-e="agora"] .et-n{background:var(--navy); color:var(--navy-ink); border-color:var(--navy)}
.etapa[data-e="feito"]{background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.etapa[data-e="feito"] .et-n{background:var(--ok); color:#fff; border-color:var(--ok)}
.etapa[data-e="feito"] .et-n .ic-st{width:16px; height:16px}
.etapa[data-e="espera"]{opacity:.72}
.et-rodape{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px}
.et-rodape .btn{margin-left:auto}

.abas{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:14px}
.aba{
  border:0; background:none; cursor:pointer; padding:6px 14px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--ink-3);
}
.aba[aria-pressed="true"]{background:var(--surface); color:var(--navy); box-shadow:var(--shadow)}

.filtros{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.filtros input[type="search"]{
  flex:1 1 230px; min-width:180px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font-size:13.5px;
}
.filtros select{flex:none; border-radius:999px; padding:8px 12px; background:var(--surface-2); border:1px solid var(--line); font-size:13.5px}
.btn-perigo{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 35%,transparent); font-weight:600}
.btn-perigo:hover{background:var(--crit); color:#fff; border-color:var(--crit)}

/* ================= JusBrasil e Escavador ================= */
.c-jus{grid-template-columns:1fr minmax(260px,330px)}
@media (max-width:980px){.c-jus{grid-template-columns:1fr}}
.bloco{display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--line-soft)}
.bloco:first-child{padding-top:2px; border-top:0}
.bl-n{
  flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--navy-soft); color:var(--navy); font-family:Archivo,sans-serif; font-weight:700; font-size:13px;
}
.bl-c{flex:1 1 auto; min-width:0}
.bl-c h3{font-size:15px; margin-bottom:8px}
.bl-p{font-size:13px; color:var(--ink-2); margin-bottom:12px; max-width:60ch}
.arquivo{
  display:flex; flex-direction:column; gap:3px; margin-top:12px; padding:14px 16px; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:12px; background:var(--surface-2);
}
.arquivo:hover{border-color:var(--navy); background:var(--navy-soft)}
.arquivo input[type="file"]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ar-t{font-size:13px; font-weight:600; color:var(--ink)}
.ar-s{font-size:12px; color:var(--ink-3); word-break:break-all}
.ar-s[data-ok="sim"]{color:var(--ok); font-weight:600}
.ck{list-style:none; display:flex; flex-direction:column; gap:10px}
.ck-i{display:flex; align-items:flex-start; gap:10px}
.ck-m{
  flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-3);
  font-family:Archivo,sans-serif; font-weight:700; font-size:12px;
}
.ck-t{display:flex; flex-direction:column; gap:1px; min-width:0}
.ck-t b{font-size:13px; color:var(--ink)}
.ck-t i{font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.35}
.ck-i[data-ok="sim"] .ck-m{background:var(--ok); border-color:var(--ok); color:#fff; font-size:0}
.ck-i[data-ok="sim"] .ck-m::after{content:"✓"; font-size:13px}
.ck-i[data-ok="nao"]{opacity:.8}