/* Painel Caminho de Virtudes: sistema visual único das telas administrativas (tema claro). */
:root{
  --accent:#3B33B5;--accent-2:#6A5FE0;--grad:linear-gradient(135deg,#3B33B5,#6A5FE0);
  --accent-bg:#EEEDFB;--accent-line:#D4D0F5;
  --bg:#F4F5F9;--card:#FFFFFF;--line:#E4E6EE;--line-2:#D6D9E3;
  --text:#171933;--text-2:#5F6275;--text-3:#9295A6;
  --fill:#F0F1F6;--fill-2:#E2E4EC;
  --shadow:0 1px 2px rgba(15,18,50,.04),0 4px 14px -6px rgba(15,18,50,.08);
  --shadow-2:0 2px 6px rgba(15,18,50,.06),0 16px 36px -14px rgba(15,18,50,.18);
  --green:#1F8A4C;--green-bg:#E7F5EC;--red:#C92A2A;--red-bg:#FDECEC;
  --amber:#B76E00;--amber-bg:#FFF4DB;--blue:#1C64C8;--blue-bg:#E8F1FD;
  --gray:#5F6275;--gray-bg:#EEEFF4;--r:16px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 14.5px/1.5 Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0;padding:0}ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.mut{color:var(--text-2);font-size:13.5px}
.hint{color:var(--text-2);font-size:13.5px;margin:0 0 14px}

/* ---------- estrutura */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;padding:20px 14px 16px;background:#fff;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;padding:4px 10px 20px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.brand img{width:36px;height:36px;object-fit:contain}
.brand b{display:block;font-size:14.5px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.brand small{color:var(--text-3);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--text-2);font-weight:500;font-size:14px;transition:background .12s,color .12s}
.nav a svg{flex:none;width:19px;height:19px}
.nav a:hover{background:var(--fill);color:var(--text)}
.nav a.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
.nav a .bd{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.nav a .bd.soft{background:var(--accent)}
.side .foot{margin-top:auto;display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.side .foot a,.side .foot button{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--text-2);font-weight:500;font-size:13.5px;text-align:left}
.side .foot a:hover,.side .foot button:hover{background:var(--fill);color:var(--text)}
.side .foot svg{width:18px;height:18px}
.col{min-width:0}
.top,.page{max-width:1240px;margin:0 auto}
.top{display:flex;align-items:flex-end;gap:14px;padding:30px 40px 0}
.top h1{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.top p{color:var(--text-2);font-size:14px;margin-top:3px}
.top .sp{margin-left:auto}
.page{padding:22px 40px 80px}
.tabbar,.mtop{display:none}

/* ---------- componentes */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.card>h2,.card>h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.card>h2+.hint{margin-top:-6px}
.cardh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cardh h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
.cardh>a,.cardh>button{margin-left:auto;color:var(--accent);font-size:13px;font-weight:600}
.cardh>a:hover{text-decoration:underline}
.cardh .pill{margin-left:auto}
.subh{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.subh span{color:var(--text-3);font-weight:600}
.subh::after{content:"";flex:1;height:1px;background:var(--line)}
.tools,.tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.tab,.btn2{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:7px 14px;font-weight:600;font-size:13.5px;color:var(--text-2);transition:background .12s,color .12s,border-color .12s}
.tab:hover,.btn2:hover{color:var(--text);border-color:var(--text-3)}
.tab.on{background:var(--text);border-color:var(--text);color:#fff}
.tab span{opacity:.6;font-weight:500}
.tools .sp{margin-left:auto}
.btn2.main,.btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn2.main:hover,.btn:hover{background:#2E278F;color:#fff}
.btn{display:inline-flex;justify-content:center;align-items:center;border-radius:12px;padding:12px 20px;font-weight:700;font-size:15px}
.btn2.sm{padding:4px 10px;font-size:12.5px;border-radius:8px}
.seg{display:inline-flex;background:var(--fill-2);border-radius:10px;padding:3px}
.seg button{padding:5px 14px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--text-2)}
.seg button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
input.t,select.t,.tools input[type=search],dialog input,dialog select,dialog textarea,.linkrow input,.sug textarea,.login input{width:100%;font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.tools input[type=search]{flex:1;min-width:220px}
.pill,.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--gray-bg);color:var(--gray);white-space:nowrap}
.pill.green,.s-concluido,.t4{background:var(--green-bg);color:var(--green)}
.pill.blue,.s-andamento,.t3{background:var(--blue-bg);color:var(--blue)}
.pill.amber,.s-aguardando{background:var(--amber-bg);color:var(--amber)}
.pill.red,.t1{background:var(--red-bg);color:var(--red)}
.s-a_fazer,.t2{background:var(--gray-bg);color:var(--gray)}
.tag{margin-left:6px}
select.st{font:inherit;font-size:12px;font-weight:600;border:0;border-radius:99px;padding:5px 12px;cursor:pointer;appearance:none;-webkit-appearance:none;text-align:center}
.prog{height:8px;border-radius:99px;background:var(--fill-2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.prog.g i{background:var(--green)}
.empty{text-align:center;color:var(--text-3);padding:46px 0}
.x{color:var(--text-3);font-size:20px;line-height:1;padding:2px 7px;border-radius:8px}.x:hover{color:var(--red);background:var(--red-bg)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:9px 18px;border-radius:10px;font-size:13.5px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:99}
.toast.on{opacity:1}
dialog{border:0;border-radius:18px;padding:26px;width:min(580px,calc(100vw - 28px));background:#fff;color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(15,18,50,.4)}
dialog h3{font-size:19px;margin-bottom:4px}
dialog label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin:14px 0 5px}
dialog textarea{min-height:84px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acts{display:flex;gap:10px;margin-top:22px;align-items:center;flex-wrap:wrap}
.acts .sp{margin-left:auto}

/* ---------- início */
.hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap;border-radius:var(--r);padding:24px 26px;margin-bottom:16px;background:linear-gradient(110deg,#F4F3FD 0%,#E6E3FA 100%);border:1px solid var(--accent-line)}
.hero .hl{flex:1 1 320px;min-width:0}
.hero small{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hero h2{font-size:24px;letter-spacing:-.02em;margin:4px 0 4px}
.hero p{color:var(--text-2);font-size:14.5px;max-width:520px}
.hero p b{color:var(--text)}
.hero .cd{display:flex;flex-wrap:wrap;gap:10px}
.cdi{background:#fff;border:1px solid var(--accent-line);border-radius:14px;padding:12px 16px;min-width:132px}
.cdi b{display:block;font-size:28px;line-height:1.05;letter-spacing:-.03em;color:var(--accent)}
.cdi span{display:block;font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.3}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
a.kpi:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.kpi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);margin-bottom:10px}
.kpi .ic svg{width:18px;height:18px}
.kpi.red .ic{background:var(--red-bg);color:var(--red)}.kpi.green .ic{background:var(--green-bg);color:var(--green)}.kpi.amber .ic{background:var(--amber-bg);color:var(--amber)}.kpi.blue .ic{background:var(--blue-bg);color:var(--blue)}
.kpi.red b{color:var(--red)}
.kpi b{font-size:26px;line-height:1.1;letter-spacing:-.03em;font-weight:700}
.kpi span{color:var(--text-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.dg .card,.g3 .card{margin-bottom:0}.dg>div{display:grid;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.dl{display:grid}
.dl a{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.dl a:first-child{border-top:0;padding-top:2px}
.dl a:hover b{color:var(--accent)}
.dd{width:46px;height:50px;border-radius:11px;background:var(--fill);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.dd strong{font-size:16px;font-weight:700}.dd small{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-2);letter-spacing:.04em}
.dd.red{background:var(--red-bg);border-color:transparent;color:var(--red)}.dd.red small{color:var(--red)}
.dd.amber{background:var(--amber-bg);border-color:transparent;color:var(--amber)}.dd.amber small{color:var(--amber)}
.dl b{display:block;font-size:14px;font-weight:600}
.dl em{font-style:normal;color:var(--text-2);font-size:12.5px}
.donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.dn{position:relative;width:124px;height:124px;border-radius:50%;flex:none}
.dn::after{content:"";position:absolute;inset:16px;border-radius:50%;background:#fff}
.dn div{position:absolute;inset:0;display:grid;place-content:center;z-index:1;text-align:center;line-height:1.1}
.dn b{font-size:24px;letter-spacing:-.03em}.dn span{font-size:11px;color:var(--text-2)}
.lg{display:grid;gap:9px;font-size:13.5px;flex:1;min-width:150px}
.lg div{display:flex;align-items:center;gap:9px}.lg i{width:10px;height:10px;border-radius:3px;flex:none}.lg b{margin-left:auto;font-weight:600}
.mb{display:grid;gap:16px}
.mb .r{display:grid;gap:7px}.mb .h{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600}.mb .h span{color:var(--text-2);font-weight:500}
.al{display:grid;gap:8px}
.al a{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--fill);font-size:13px;line-height:1.45}
.al a svg{flex:none;width:17px;height:17px;margin-top:1px}
.al a.red{background:var(--red-bg)}.al a.red svg{color:var(--red)}
.al a.amber{background:var(--amber-bg)}.al a.amber svg{color:var(--amber)}
.al a.blue svg{color:var(--blue)}.al a.green{background:var(--green-bg)}.al a.green svg{color:var(--green)}
.al a:hover{filter:brightness(.97)}
.msgs a{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.msgs a:first-child{border-top:0;padding-top:0}.msgs b{font-weight:600}.msgs p{color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- tarefas */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:24px;line-height:1.1;letter-spacing:-.03em}.stat span{font-size:12.5px;color:var(--text-2)}
.stat.red b{color:var(--red)}
.kb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;align-items:stretch;height:max(460px,calc(100dvh - 300px));overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x proximity}
.kb-col{display:flex;flex-direction:column;scroll-snap-align:start;padding:0 8px 8px;border-radius:14px;background:#ECEDF3;min-width:0;min-height:0;overflow-y:auto;scrollbar-width:thin;transition:background .15s}
.kb-col.over{background:var(--accent-bg)}
.kb-col header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:0 -8px 4px;padding:13px 14px 9px;background:#ECEDF3;border-radius:14px 14px 0 0}
.kb-col header i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--text-3)}
.kb-col header i.blue{background:var(--blue)}.kb-col header i.orange{background:#E8920C}.kb-col header i.green{background:var(--green)}
.kb-col h2{flex:1;margin:0;font-size:13.5px;font-weight:700}
.kb-col header b{color:var(--text-2);font-size:12px;font-weight:600;background:#fff;border-radius:99px;padding:1px 8px}
.kb-card{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;padding:12px 13px;border-radius:11px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,18,50,.05);cursor:grab;transition:box-shadow .12s,border-color .12s}
.kb-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.kb-card.drag{opacity:.45}
.kb-card.late{border-left:3px solid var(--red)}
.kb-card strong{font-size:14px;line-height:1.35;font-weight:600}
.kb-card>span{color:var(--text-2);font-size:12.5px}
.kb-card footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin-top:8px;padding:8px 0 0;border-top:1px solid var(--line);font-size:12px;font-weight:500;color:var(--text-2)}
.kb-card footer .livre{color:var(--amber)}
.kb-vazio{padding:16px 4px;color:var(--text-3);font-size:13px;text-align:center}
.kb-mais{width:100%;min-height:34px;border-radius:9px;color:var(--text-2);font-size:13px;font-weight:600}
.kb-mais:hover{background:#fff;color:var(--accent)}
.grp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 20px 4px;margin-bottom:16px;box-shadow:var(--shadow)}
.grp h3{margin:12px 0 4px;font-size:15px}
.row{display:grid;grid-template-columns:minmax(0,2.2fr) 140px 170px minmax(0,1.2fr) minmax(0,1.2fr);gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.row:hover .tt{color:var(--accent)}
.tt{font-weight:600}.tt.done{text-decoration:line-through;color:var(--text-3)}
.sub{font-size:12.5px;color:var(--text-2);margin-top:2px;white-space:pre-wrap}
.pz{font-size:13px;font-weight:600}.pz.late{color:var(--red)}.pz.soon{color:var(--amber)}

/* ---------- chapa */
.fxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.fx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.fx.vago{border-style:dashed;border-color:#B3ACEB;background:#F9F9FE}
.fx .cg{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--text-2)}
.ck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-3);cursor:pointer;white-space:nowrap}
.ck.on{color:var(--green)}.ck input{width:17px;height:17px;accent-color:var(--green)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px}
.gbox{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.gh{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}.gh b{flex:1;min-width:0;font-size:15px}.gh .sum{margin-right:6px}
.pp{display:grid;grid-template-columns:minmax(0,1fr) 108px 104px 26px;gap:8px;align-items:center;padding:7px 0}.pp+.pp{border-top:1px solid var(--line)}
.pp .nm{font-weight:500;font-size:14px}
.pp select.t{padding:6px 8px;font-size:13px}
.add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.add input{flex:1;min-width:140px}.add select{width:120px}
.sum{font-size:12px;color:var(--text-2);font-weight:500}
.novo{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.novo input{flex:1;min-width:180px}

/* ---------- pesquisa e sugestões */
.linkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.linkrow input{flex:1;min-width:220px;background:var(--fill)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px}
ul.l{margin:6px 0 0;font-size:13.5px}
ul.l li{padding:7px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}ul.l li:first-child{border-top:0}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 6px;border-top:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);border-top:0}
td.n{text-align:center;width:56px}
.bar4{display:flex;height:8px;border-radius:99px;overflow:hidden;min-width:110px;background:var(--fill-2)}.bar4 i{display:block;height:100%}
.resp{border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:8px;background:#fff}
.resp summary{cursor:pointer;font-weight:600}
.resp .q{margin-top:10px;font-size:13.5px}.resp .q b{display:block;font-weight:600}
.list{display:grid;gap:12px}
.sug{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.sug.nova{border-left:3px solid var(--accent)}
.sug .meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--text-2);margin-bottom:10px}
.sug .meta b{color:var(--text);font-size:14.5px}
.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--accent-bg);color:var(--accent);text-transform:capitalize}
.badge.lida{background:var(--green-bg);color:var(--green)}.badge.arquivada{background:var(--gray-bg);color:var(--gray)}
.sug .msg{white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.6}
.sug textarea{margin-top:14px;resize:vertical;background:var(--fill)}
.sug .acts{margin-top:12px}
.sug .acts button{background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--text-2)}
.sug .acts button:hover{color:var(--text);border-color:var(--text-3)}.sug .acts .del:hover{color:var(--red);border-color:var(--red)}

/* ---------- acesso */
.loginw{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(800px 420px at 50% -10%,#E3E0F9,transparent 70%),var(--bg)}
.login{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 28px 28px;box-shadow:var(--shadow-2);text-align:center}
.login img{width:64px;margin:0 auto 14px;display:block}
.login h1{font-size:23px;letter-spacing:-.02em;margin-bottom:4px}
.login p{color:var(--text-2);margin-bottom:22px;font-size:14px}
.login input{margin-bottom:12px;padding:13px 15px;border-radius:12px}
.login .btn{width:100%}
.err{color:var(--red);font-size:14px;min-height:1.3em;margin-top:12px}

@media(max-width:1280px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.dg{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr 1fr}.row>:first-child{grid-column:1/-1}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .app{display:block}.side{display:none}
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
  .mtop img{width:28px;height:28px;object-fit:contain}.mtop b{font-size:15px}.mtop button{margin-left:auto;color:var(--text-2);padding:6px}.mtop svg{width:20px;height:20px}
  .top{padding:18px 16px 0}.top h1{font-size:22px}.page{padding:14px 16px 100px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;font-size:10.5px;font-weight:600;color:var(--text-3)}
  .tabbar a svg{width:22px;height:22px}.tabbar a.on{color:var(--accent)}
  .tabbar a .bd{position:absolute;top:1px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:10px;display:grid;place-items:center}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.cols,.two{grid-template-columns:1fr}.cgrid,.fxg{grid-template-columns:minmax(0,1fr)}
  .kb{grid-auto-columns:85%;height:max(420px,calc(100dvh - 380px))}
  .pp{grid-template-columns:minmax(0,1fr) auto 26px;row-gap:6px}.pp .nm{grid-column:1/-1}.pp select.t{width:auto;min-width:110px}
  .gh{flex-wrap:wrap}.gh b{flex-basis:100%}.gh .sum{margin-right:auto}
  .add select{width:auto;flex:1}
  input.t,select.t,.tools input[type=search],dialog input,dialog select,dialog textarea,.linkrow input,.sug textarea,.login input,.pp select.t{font-size:16px}
  .kb{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .hero{padding:18px}.hero h2{font-size:20px}.cdi{flex:1;min-width:100px}.card{padding:16px}
  .row{grid-template-columns:1fr}
  .kpi{padding:12px 14px}.kpi .ic{width:30px;height:30px;margin-bottom:6px}.kpi b{font-size:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- fluidez e movimento */
html{scroll-behavior:smooth}
@view-transition{navigation:auto}
.side{view-transition-name:side}.tabbar{view-transition-name:tabbar}.mtop{view-transition-name:mtop}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
.app{transition:grid-template-columns .45s cubic-bezier(.2,.8,.2,1)}
.top,.page{padding-left:clamp(16px,3.2vw,40px);padding-right:clamp(16px,3.2vw,40px);transition:padding .35s ease}
.top h1{font-size:clamp(22px,calc(1.2vw + 12px),28px)}
.hero h2{font-size:clamp(20px,calc(1vw + 12px),26px)}
.cdi b{font-size:clamp(22px,calc(1vw + 14px),30px)}
.card,.kpi,.stat,.gbox,.fx,.sug,.kb-card,.kb-col,.cdi,.hero{transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease,background .2s ease,padding .3s ease}
.tab,.btn2,.btn,.seg button,.nav a,.kb-mais,.x{transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.btn:active,.btn2:active,.tab:active,.seg button:active,.kb-mais:active{transform:scale(.96)}
a.kpi:hover{transform:translateY(-2px)}
.kb-card:hover{transform:translateY(-1px)}
.dl a,.al a,.msgs a{transition:background .15s ease,color .15s ease}
.dl a{border-radius:10px;margin:0 -8px;padding-left:8px;padding-right:8px}
.dl a:hover{background:var(--fill)}

body:not(.ready) :is(.hero,.cdi,.kpi,.card,.stat,.kb-col,.grp,.fx,.gbox,.sug,.tools,.tabs){animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
dialog[open]{animation:pop .28s cubic-bezier(.2,.9,.3,1.2)}
dialog[open]::backdrop{animation:fade .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes fade{from{opacity:0}}

/* menu lateral vira trilho de ícones em telas médias */
.side .lb{display:inline-block;white-space:nowrap;transition:opacity .2s ease .15s}
.brand>div{transition:opacity .2s ease .15s}
@media(min-width:821px) and (max-width:1180px){
  .app{grid-template-columns:72px minmax(0,1fr)}
  .side{padding:20px 10px 16px;overflow:hidden}
  .brand{justify-content:center;padding:4px 0 18px}
  .brand>div,.side .lb{opacity:0;width:0;overflow:hidden;transition:none}
  .nav a,.side .foot a,.side .foot button{justify-content:center;gap:0;padding:11px 0;position:relative}
  .nav a .bd{position:absolute;top:3px;right:5px;min-width:17px;height:17px;padding:0 4px;font-size:10px}
}
body.mq .side{animation:leftin .45s cubic-bezier(.2,.8,.2,1)}
@media(max-width:820px){
  body.mq .tabbar{animation:upin .45s cubic-bezier(.2,.8,.2,1)}
  body.mq .mtop{animation:downin .45s cubic-bezier(.2,.8,.2,1)}
}
@keyframes leftin{from{opacity:0;transform:translateX(-24px)}}
@keyframes upin{from{transform:translateY(100%)}}
@keyframes downin{from{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- controle de votos */
body[data-page=votos] .stats{grid-template-columns:repeat(6,minmax(0,1fr))}
.stat.green b{color:var(--green)}.stat.amber b{color:var(--amber)}
.g2v{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.vbar{position:relative;display:flex;height:14px;border-radius:99px;background:var(--fill-2);overflow:visible}
.vbar i{display:block;height:100%;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.vbar i:first-of-type{border-radius:99px 0 0 99px}.vbar i:last-of-type{border-radius:0 99px 99px 0}.vbar i:only-of-type{border-radius:99px}
.vbar em{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--text);border-radius:2px}
.vbar em::after{content:"maioria";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;font-style:normal;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
.card>.vbar{margin-top:26px}
.vleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13px;color:var(--text-2)}
.vleg span{display:inline-flex;align-items:center;gap:6px}.vleg i{width:10px;height:10px;border-radius:3px}.vleg b{color:var(--text)}
.vreg{display:grid;gap:4px}
.vr{display:grid;gap:7px;text-align:left;padding:8px 10px;margin:0 -10px;border-radius:10px;transition:background .15s}
.vr:hover{background:var(--fill)}.vr.on{background:var(--accent-bg)}
.vr .h{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600}.vr .h span{color:var(--text-2);font-weight:500}
.vr .vbar{height:8px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px;padding:6px 0 16px}
.vcap{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;display:grid;gap:10px;min-width:0}
.vh{display:flex;align-items:center;gap:10px;min-width:0}
.vh>div:nth-child(2){flex:1;min-width:0}
.vh b{display:block;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh small{color:var(--text-2);font-size:12.5px}
.vn{flex:none;min-width:44px;height:34px;padding:0 8px;border-radius:10px;background:var(--grad);color:#fff;font-weight:700;font-size:13.5px;display:grid;place-items:center}
.vel{display:grid;gap:6px;padding:10px 10px 10px 12px;border-radius:12px;background:var(--fill);border-left:4px solid var(--c);transition:border-color .2s}
.vt{display:grid;grid-template-columns:auto minmax(0,1fr) 130px;gap:6px;align-items:center}
.vt .fn{font-size:11.5px;font-weight:700;color:var(--text-2);letter-spacing:.04em;min-width:32px}
.vx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.vel input.t,.vel select.t{width:100%;min-width:0;padding:7px 10px;font-size:13px;background:#fff}
.vel select.vs{font-weight:600;color:var(--c);border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
@media(max-width:1100px){.g2v{grid-template-columns:1fr}body[data-page=votos] .stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){body[data-page=votos] .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.vt{grid-template-columns:auto minmax(0,1fr)}.vt select.vs{grid-column:1/-1}.vx{grid-template-columns:minmax(0,1fr)}.vel input.t,.vel select.t{font-size:16px}}
.tools select.t{width:auto;flex:none;min-width:180px}
'.tools select.t{width:auto;flex:none;min-width:180px}'  -s true -e 0