/* Afiliados Presente de Deus — visual do protótipo aprovado (app de banco: menu fixo à esquerda, no celular barra embaixo) */
:root{--bg:#F4F2F7;--surface:#FFF;--ink:#191423;--ink2:#3C3548;--muted:#696176;--line:#E5E0EB;--chip:#EFEAF3;
 --navy:#0F2A4F;--navy2:#081429;--navy3:#14233C;--navy4:#1D3557;--ice:#5FB8E6;--gold:#A87A1F;--gold2:#C99A3A;
 --good:#11775A;--warn:#B4641B;--bad:#B4432B;--vinho:#5E0A24;
 --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;--body:"Figtree","Helvetica Neue",system-ui,sans-serif;
 --sombra:0 1px 2px rgba(25,20,35,.04),0 8px 24px -16px rgba(25,20,35,.18)}
*{box-sizing:border-box}html,body{margin:0}
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--body);-webkit-font-smoothing:antialiased}
.num,.tb td,.kpi b{font-variant-numeric:tabular-nums}h1,h2,h3,p{margin:0}
a{color:inherit}a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.muted{color:var(--muted)}.peq{font-size:.82rem}small{font-size:.8em}
code{font:600 .95em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip);padding:1px 6px;border-radius:6px}

/* botões e campos */
button,.btn{white-space:nowrap;font:600 .88rem var(--body);color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:10px;padding:9px 15px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center;justify-content:center;transition:background .15s,transform .05s}
button:hover,.btn:hover{background:var(--navy4);color:#fff}button:active{transform:translateY(1px)}
.btn.sec,button.sec{background:var(--surface);color:var(--ink);border-color:var(--line)}.btn.sec:hover,button.sec:hover{background:var(--chip);color:var(--ink)}
.btn.vinho,button.vinho{background:var(--vinho);border-color:var(--vinho)}
.btn.peq,button.peq{padding:5px 10px;font-size:.78rem;border-radius:8px}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(95,184,230,.25)}
label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:10px 0 4px}
label.chk{display:flex;gap:8px;align-items:center;color:var(--ink);font-weight:500;font-size:.88rem}label.chk input{width:auto}
.form-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 12px;align-items:end;margin-top:6px}
.form-linha>div:last-child{padding-top:10px}
details>summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
details[open]>summary::before{transform:rotate(45deg)}
details+details{border-top:1px solid var(--line)}

/* casca do app */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{background:var(--navy2);color:#D9E4F2;padding:22px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:8px;padding:0 8px;text-decoration:none}
.brand img{width:118px;height:auto;display:block}
.brand small{display:block;font:500 .74rem var(--body);color:#93A8C4;letter-spacing:.02em}
.brand:hover{color:inherit}
.side .mes{padding:0 4px}.side .mes label{color:#93A8C4;margin:0 4px 4px}
.side select{background:var(--navy3);border-color:var(--navy4);color:#fff;font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;font-weight:500;color:#C3D2E5;text-decoration:none;font-size:.93rem}
.nav a:hover{background:var(--navy3);color:#fff}.nav a[aria-current=page]{background:var(--navy4);color:#fff;font-weight:600}
.nav a .ct{margin-left:auto;background:var(--gold2);color:var(--navy2);font:700 .7rem var(--body);border-radius:99px;padding:1px 7px}
.nav svg,.baixo svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quem{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 8px 0;border-top:1px solid var(--navy4);font-size:.86rem}
.quem small{display:block;color:#93A8C4}.quem a{color:#C3D2E5}
.ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ice),var(--gold2));display:grid;place-items:center;font-weight:700;color:var(--navy2);flex:none}
main{padding:26px clamp(16px,3vw,40px) 64px;min-width:0;max-width:1320px;width:100%}
.topo-mob{display:none}
.baixo{display:none}
footer.rod{color:var(--muted);font-size:.78rem;text-align:center;padding:26px 0 0}

/* faixas e avisos */
.faixa{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.faixa h1{font:800 1.75rem/1.1 var(--display);letter-spacing:-.02em}
.faixa p{color:var(--muted);margin-top:4px}
.faixa .acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.banner-local{background:#FFF3C4;color:#5C4500;text-align:center;font-weight:600;font-size:.8rem;padding:6px 10px}
.banner-admin{background:var(--vinho);color:#fff;text-align:center;font-size:.84rem;padding:7px 10px}.banner-admin a{color:#fff;font-weight:700}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;margin-bottom:16px;font-weight:500;box-shadow:var(--sombra)}
.erro{background:#FBE7E1;color:#7E2614;border:1px solid #F2C6B9}.ok-msg{background:#DDF1E9;color:#0B573F;border:1px solid #BFE3D4}
.aviso{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;background:#FBF3E2;color:#6B4C10;font-size:.88rem;margin-bottom:14px}
.vazio{color:var(--muted);font-size:.9rem;padding:14px 0;text-align:center}
.vazio.box{border:1.5px dashed var(--line);border-radius:12px;padding:22px}

/* pílulas e chips de graduação */
.pill{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:99px;background:var(--chip);font-size:.76rem;font-weight:600;color:var(--muted);white-space:nowrap}
.pill.ok{background:#DDF1E9;color:var(--good)}.pill.av{background:#FBEBD8;color:var(--warn)}.pill.mal{background:#F9E2DC;color:var(--bad)}.pill.ex{background:#E5ECF7;color:#2C5282}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.gr{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font:700 .74rem var(--body);color:#fff;white-space:nowrap}
.gr::before{content:"";width:6px;height:6px;border-radius:2px;background:rgba(255,255,255,.75);transform:rotate(45deg)}
.gr-Diamante{background:#1F4E8C}.gr-Rubi{background:#A3123A}.gr-Ouro{background:#9C6B3A}.gr-Prata{background:#7D8792}.gr-Executivo{background:#6E5A8A}
.gr-Sem{background:var(--chip);color:var(--muted)}.gr-Sem::before{background:#C9BFD6}

/* grade e cartões */
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.c12{grid-column:span 12}.c9{grid-column:span 9}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
.pn{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0;box-shadow:var(--sombra)}
.pn h2{font:700 1.05rem/1.2 var(--display);letter-spacing:-.01em;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.pn h2 small{font:500 .78rem var(--body);color:var(--muted)}
.pn h3{font:700 .95rem var(--display);margin:14px 0 6px}
.pn p.exp,.exp{color:var(--muted);font-size:.86rem;margin:2px 0 10px}
.sec-tit{font:700 .78rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:22px 0 10px}

/* cartão principal (herói) */
.card{position:relative;overflow:hidden;border-radius:22px;padding:24px 26px;color:#F3F8FF;
 background:radial-gradient(120% 110% at 100% 0%,#5FB8E6 0%,transparent 52%),radial-gradient(80% 90% at 0% 100%,#C99A3A 0%,transparent 58%),linear-gradient(150deg,var(--navy),var(--navy2));
 box-shadow:0 18px 38px -20px rgba(8,20,41,.7);display:flex;flex-direction:column;gap:14px}
.card .marca-agua{position:absolute;right:18px;top:16px;width:92px;opacity:.9}
.card .gem{display:inline-flex;gap:6px;align-items:center;font:700 .82rem var(--display);background:rgba(255,255,255,.16);padding:5px 12px;border-radius:99px;align-self:flex-start;backdrop-filter:blur(4px)}
.card .val{font:800 clamp(2.2rem,5vw,3.3rem)/1 var(--display);letter-spacing:-.02em}
.card .lb{font-size:.86rem;opacity:.88}
.tri{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.tri b{display:block;font:700 1.12rem var(--display)}.tri span{font-size:.76rem;opacity:.86}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sombra);min-width:0}
.kpi span{display:block;color:var(--muted);font-size:.8rem;font-weight:600}
.kpi b{display:block;font:800 1.55rem/1.15 var(--display);letter-spacing:-.01em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi em{font-style:normal;font-size:.78rem;color:var(--muted);display:block;margin-top:4px}
.kpi.hero{grid-column:span 2;background:radial-gradient(120% 120% at 100% 0%,rgba(95,184,230,.55) 0%,transparent 55%),radial-gradient(90% 100% at 0% 100%,rgba(201,154,58,.6) 0%,transparent 60%),linear-gradient(150deg,var(--navy),var(--navy2));color:#F3F8FF;border:0}
.kpi.hero span,.kpi.hero em{color:#C9D8EA}.kpi.hero b{font-size:2.2rem}

/* linhas e tabelas */
.linha{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.linha:last-child{border-bottom:0}.linha>*{min-width:0;overflow-wrap:anywhere}
.linha small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.linha.tot{border-top:2px solid var(--ink);border-bottom:0;font:800 1.05rem var(--display);margin-top:4px}
.rol{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tb,.tab{width:100%;border-collapse:collapse;font-size:.88rem}
.tb th,.tab th{text-align:left;color:var(--muted);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FBFAFC}
.tb td,.tab td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tb tr:last-child td,.tab tr:last-child td{border-bottom:0}
.tb tbody tr:hover td{background:#FBFAFD}
.tb .r,.tab .r{text-align:right;white-space:nowrap}
.tb tr.tot td{border-top:2px solid var(--ink);font-weight:800;background:none}
.tb tr.agora td{background:#EEF4FB;font-weight:600}.tb tr.agora td:first-child{box-shadow:inset 3px 0 0 var(--navy)}
.tb a{text-decoration:none;font-weight:600}.tb a:hover{text-decoration:underline}
.nome-cel>a{display:block}.nome-cel small{display:block;color:var(--muted)}.tb form{white-space:nowrap}.tb button{white-space:nowrap}

/* barras de progresso */
.barra{height:10px;background:var(--chip);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--ice));border-radius:99px}
.barra.fina{height:6px;margin:6px 0 0;min-width:80px}
.prox{display:flex;gap:16px;align-items:center}
.anel .anel-t{font:800 17px var(--display);fill:var(--ink)}

/* escada de graduações */
.esc{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.esc div{padding:10px 6px;border-radius:12px;background:var(--chip);text-align:center;font-size:.74rem;color:var(--muted);min-width:0}
.esc div b{display:block;color:var(--ink);font:700 .86rem var(--display)}
.esc .feito{background:#DDF1E9}.esc .agora{background:var(--navy);color:#CFE1F5}.esc .agora b{color:#fff}

/* gráficos */
.viz{width:100%;height:auto;display:block;overflow:visible}
.viz text{font-family:var(--body)}
.viz .ax{font-size:11px;fill:#8A8296}.viz .vl{font-size:11.5px;font-weight:700;fill:var(--ink2)}.viz .lb{font-size:12.5px;font-weight:600;fill:var(--ink)}
.viz .ok{font-size:10.5px;font-weight:700;fill:var(--good)}
.viz .mk{cursor:default}.viz .mk:hover path,.viz .mk:hover rect{filter:brightness(1.12)}
.leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink2);margin:0 0 8px}
.leg span{display:inline-flex;align-items:center;gap:6px}.leg i{width:11px;height:11px;border-radius:3px;display:inline-block}.leg i.ln{height:3px;width:16px;border-radius:2px}
.tabela-viz>summary{font-size:.8rem;color:var(--muted);font-weight:600;padding:6px 0 0}
.tabela-viz table{margin-top:6px;font-size:.82rem}

/* pendências */
.pend{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px}
.pend a,.pend div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;background:#fff;min-width:0}
.pend a:hover{border-color:var(--ice)}
.pend b{font:800 1.35rem var(--display)}.pend span{font-size:.8rem;color:var(--muted);font-weight:600}
.pend .alerta{border-color:#F2C6B9;background:#FDF3EF}.pend .alerta b{color:var(--bad)}
.pend .bom b{color:var(--good)}

/* listas compactas (perto de graduar) */
.perto{display:flex;flex-direction:column;gap:12px}
.perto>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.perto .nm{font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.perto .ft{font-size:.78rem;color:var(--muted);text-align:right;white-space:nowrap}
.perto .barra{grid-column:1/-1;margin:2px 0 0}

/* cupons */
.cupom{padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff,#FBFAFD)}
.cupom+.cupom{margin-top:12px}
.cupom .cod{font:800 1.35rem var(--display);letter-spacing:.06em;color:var(--navy)}
.link{display:flex;gap:6px;margin-top:10px}.link input{font-size:.8rem;background:#FBFAFD}

/* extrato */
.ext>details{padding:0 2px}.ext summary .vl{margin-left:auto;font:800 1rem var(--display)}
.ext .corpo{padding:0 0 12px 18px}

/* páginas públicas */
.pub{min-height:100vh;display:flex;flex-direction:column}
.pub-topo{background:var(--navy2);padding:16px clamp(16px,4vw,40px);display:flex;align-items:center;gap:12px}
.pub-topo img{height:40px;width:auto}.pub-topo span{color:#93A8C4;font-size:.82rem;border-left:1px solid var(--navy4);padding-left:12px}
.pub-hero{background:radial-gradient(90% 120% at 100% 0%,rgba(95,184,230,.45) 0%,transparent 55%),radial-gradient(70% 120% at 0% 100%,rgba(201,154,58,.5) 0%,transparent 60%),linear-gradient(150deg,var(--navy),var(--navy2));color:#F3F8FF;padding:34px clamp(16px,4vw,40px) 70px}
.pub-hero h1{font:800 clamp(1.6rem,4vw,2.3rem)/1.1 var(--display);letter-spacing:-.02em;max-width:720px}
.pub-hero p{opacity:.88;margin-top:8px;max-width:640px}
.pub-corpo{max-width:620px;width:100%;margin:-46px auto 0;padding:0 14px 40px}
.passo{display:flex;align-items:center;gap:10px;font:700 1rem var(--display);margin:6px 0 4px}
.passo i{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 .8rem var(--body);font-style:normal}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(80% 90% at 100% 0%,rgba(95,184,230,.35) 0%,transparent 55%),linear-gradient(150deg,var(--navy),var(--navy2));padding:20px}
.login .pn{width:100%;max-width:380px;padding:26px}
.login img{width:120px;margin:0 auto 18px;display:block}

@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.c9,.c8,.c7{grid-column:span 12}.c5,.c4{grid-column:span 6}}
@media(max-width:860px){.c6,.c5,.c4{grid-column:span 12}.c3{grid-column:span 6}}
@media(max-width:760px){
 .app{display:block}.side{display:none}main{padding:16px 14px 96px}
 .topo-mob{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy2);padding:12px 14px;position:sticky;top:0;z-index:6}
 .topo-mob img{height:30px;width:auto}.topo-mob select{width:auto;max-width:52vw;padding:6px 10px;font-size:.85rem;background:var(--navy3);border-color:var(--navy4);color:#fff;font-weight:600}
 .baixo{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset:auto 0 0 0;background:#fff;border-top:1px solid var(--line);z-index:5;padding-bottom:env(safe-area-inset-bottom)}
 .baixo a{display:flex;flex-direction:column;gap:3px;align-items:center;padding:8px 2px 10px;font-size:.68rem;color:var(--muted);font-weight:600;text-decoration:none}
 .baixo a[aria-current=page]{color:var(--navy)}.baixo svg{width:21px;height:21px}
 .faixa h1{font-size:1.4rem}.card{padding:20px}.card .marca-agua{width:64px}.tri{grid-template-columns:repeat(2,1fr)}.tri b{font-size:1rem}
 .pn{padding:15px;border-radius:14px}.kpi.hero b{font-size:1.8rem}.kpi b{font-size:1.25rem}
 .c3{grid-column:span 12}.esc{grid-template-columns:repeat(5,minmax(58px,1fr));overflow-x:auto}.esc div{font-size:.66rem;padding:8px 3px}.esc div b{font-size:.74rem}
 .tb th,.tb td{padding:9px 7px}.esconde-mob{display:none}
}
@media(prefers-reduced-motion:no-preference){.pn,.card,.kpi{animation:sobe .25s ease both}@keyframes sobe{from{transform:translateY(5px)}to{transform:none}}}
@media print{.side,.baixo,.topo-mob,.banner-local{display:none}.app{display:block}}

/* abas no celular (as que não cabem na barra de baixo também ficam aqui) */
.abas-mob{display:none}
.aba{display:none}.aba.on{display:block}
@media(max-width:760px){.abas-mob{display:flex;gap:6px;overflow-x:auto;padding:14px 0 2px;scrollbar-width:none}
 .abas-mob button{background:#fff;color:var(--ink);border:1px solid var(--line);white-space:nowrap;font-weight:600;padding:7px 12px;font-size:.82rem;border-radius:99px}
 .abas-mob button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}}

.so-mob{display:none}
.linha b.num{white-space:nowrap}
@media(max-width:760px){.so-desk{display:none}.so-mob{display:block}span.so-mob{display:inline}
 .vizbox{overflow-x:auto;margin:0 -6px;padding:0 6px}.vizbox .viz{min-width:600px}.vizbox .leg{position:sticky;left:0}}

/* extras do painel (protótipo) */
.perto{padding:9px 0;border-bottom:1px solid var(--line)}.perto:last-child{border-bottom:0}
.perto .pt{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}.perto .pt span{color:var(--muted);font-size:.8rem}
.perto small{color:var(--muted);font-size:.78rem}.perto .barra{margin:6px 0 3px}
.barra.fina{height:7px}
.marcos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.marcos>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#FBFAFC}.marcos>div.feito{background:#FBF3E2;border-color:#E9CF94}
.marcos b{display:block;font:800 1rem var(--display)}.marcos span{display:block;font-size:.8rem;color:var(--ink);margin-top:2px}.marcos em{font-style:normal;font-size:.72rem;color:var(--muted)}
.marcos>div.feito em{color:var(--gold);font-weight:700}
.trilha .barra{margin:8px 0 2px}
.gh{display:flex;flex-wrap:wrap;gap:8px}.gh>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:96px}
.gh span{font-size:.74rem;color:var(--muted);font-weight:600}.gh small{font-size:.7rem;color:var(--warn)}
.trilha-nav{font-size:.85rem;margin:-4px 0 10px;color:var(--muted)}.trilha-nav a{font-weight:600}
.pos{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--chip);align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-right:8px;color:var(--navy)}
.linha:nth-child(-n+4) .pos{background:var(--navy);color:#fff}
.cupom.convite{border-color:#BFE3D3}
svg .meta{font:600 10px var(--body);fill:#A87A1F}
@media (max-width:700px){.marcos{grid-template-columns:1fr}}

/* material de divulgação */
.mat-adm{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:#fff}.mat-adm.off{opacity:.6}
.mat-adm summary{display:flex;justify-content:space-between;gap:8px;align-items:center;cursor:pointer;list-style:none}
.mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mat{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.mat .prev{aspect-ratio:4/5;background:var(--chip);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mat .prev img,.mat .prev video{width:100%;height:100%;object-fit:cover}
.mat .prev.txt{aspect-ratio:auto;align-items:flex-start;justify-content:flex-start;padding:12px;font-size:.86rem;white-space:pre-line;max-height:220px;overflow:auto;background:#F7F5FA}
.mat .prev.pdf{font:800 1.4rem var(--display);color:var(--vinho)}
.mat .info{padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.mat .info b{font-weight:700;font-size:.92rem}.mat .acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.mat .acoes .btn,.mat .acoes button{padding:6px 10px;font-size:.8rem}
.btn.wa{background:#1F8B4C}

.passos ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.passos li{line-height:1.45}.passos li a{font-weight:600}
.banner-teste{background:#B4432B;color:#fff;text-align:center;font-weight:800;font-size:.85rem;padding:7px 10px;letter-spacing:.03em;position:sticky;top:0;z-index:50}
.lista-conv{margin:6px 0 0 18px;display:grid;gap:6px;font-size:.92rem}

/* ferramentas de venda */
.faixa-dir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sino{position:relative}.sino summary{list-style:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:6px 8px;border-radius:10px;background:var(--surface);border:1px solid var(--line);position:relative}
.sino summary::-webkit-details-marker{display:none}
.sino .badge{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;font:700 .68rem var(--body);border-radius:99px;padding:2px 6px}
.sino-lista{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(340px,86vw);max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 12px 30px rgba(15,42,79,.18);display:grid;gap:8px}
.aviso-item{display:flex;gap:8px;align-items:flex-start;font-size:.88rem}.aviso-item small{display:block;color:var(--muted);font-size:.74rem}
.aviso-item.novo{font-weight:600}
.selos{display:flex;gap:10px;flex-wrap:wrap}
.selo{display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,#FFF6DF,#FFFFFF);border:1px solid #EBD39A;border-radius:14px;padding:8px 12px}
.selo span{font-size:1.5rem}.selo b{display:block;font:700 .9rem var(--display)}.selo small{color:var(--muted);font-size:.76rem}
.pix .val{font:800 1.9rem/1.1 var(--display);margin:4px 0 6px}
.cli-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cli-row:last-child{border-bottom:0}.cli-info{min-width:0}.cli-info b{display:block;font-weight:600}
.cli-info small{display:block;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.cli-info small.destaque{color:var(--ink);font-weight:600}.cli-info small.chamado{color:var(--good)}
.cli-row .acoes{display:flex;gap:6px;align-items:center;flex-shrink:0}.cli-row form{margin:0}
.btn.wa{background:#1F9D55;color:#fff;white-space:nowrap}.btn.wa:hover{background:#178246}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.seg button{background:var(--chip);color:var(--ink);font-weight:600;font-size:.82rem;padding:7px 11px}
.seg button b{margin-left:4px;background:#fff;border-radius:99px;padding:0 7px;font-size:.75rem}
.seg button[aria-selected=true]{background:var(--navy);color:#fff}.seg button[aria-selected=true] b{color:var(--navy)}
.seg-pn{display:none}.seg-pn.on{display:block}
.chegar{margin-top:8px;display:grid;gap:4px;font-size:.9rem}
.prod{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.prod img{width:38px;height:38px;object-fit:cover;border-radius:8px;flex-shrink:0}.prod span{flex:1;min-width:0}
.sub{font:700 .85rem var(--body);color:var(--muted);margin:0 0 4px}
.msg-form{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}.msg-form .acoes{display:flex;gap:6px}
.sino summary::marker{content:"";display:none}
.sino summary{display:inline-flex}