/* Gabinete Conecta — interface
   Tokens → base → layout → componentes → telas. Fontes servidas pelo próprio sistema (política CSP). */
@font-face{font-family:'Figtree';src:url('/static/fonts/figtree-latin-wght-normal.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/static/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}

:root{
  /* cores */
  --ink:#0B2A33; --ink2:#14404C; --ink3:#1C5565;
  --accent:#0C7A66; --accent-d:#095F4F; --accent-soft:#E3F4EF;
  --mark:#F2B632;                       /* detalhe âmbar: marca do menu e destaques */
  --bg:#F3F6F8; --card:#FFFFFF; --line:#DDE5EA; --line2:#EAF0F3; --line3:#C5D2DA;
  --text:#122029; --muted:#52626E;
  --err:#B3261E; --errbg:#FDECEA;
  --warn:#85520A; --warnbg:#FFF3DC;
  --info:#1F55A6; --infobg:#E6EFFC;
  --ok:#0A5B48; --okbg:#DCF3EA;
  /* forma */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(11,42,51,.06),0 1px 1px rgba(11,42,51,.04);
  --sh-2:0 2px 4px rgba(11,42,51,.05),0 8px 24px -6px rgba(11,42,51,.10);
  --sh-3:0 4px 8px rgba(11,42,51,.06),0 20px 44px -10px rgba(11,42,51,.22);
  --ring:0 0 0 4px rgba(12,122,102,.20);
  --pad:clamp(20px,3.2vw,44px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-head:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);color:var(--text);background:var(--bg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-head);margin:0;letter-spacing:-.015em;line-height:1.15}
h1{font-size:clamp(26px,3.2vw,36px);font-weight:700}
h2{font-size:19px;font-weight:650}
h3{font-size:16px;font-weight:650}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13.5px}
::selection{background:#BFE6DC}
:focus-visible{outline:3px solid #7FB7FF;outline-offset:2px}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:var(--topo,0px);height:calc(100vh - var(--topo,0px));background:linear-gradient(180deg,var(--ink) 0%,var(--ink-deep,#0A232B) 100%);color:#fff;padding:26px 16px 20px;display:flex;flex-direction:column;gap:28px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px;font-family:var(--f-head);font-weight:700;font-size:19px;letter-spacing:-.01em}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--accent),var(--accent-d));display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:800;font-size:19px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{position:relative;display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:var(--r-md);font-weight:550;color:#C4D6DD;min-height:46px;transition:background .18s var(--ease),color .18s var(--ease)}
.nav a svg{width:20px;height:20px;flex:0 0 20px;opacity:.85;transition:transform .2s var(--ease),opacity .18s}
.nav a span:first-of-type{flex:1}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a:hover svg{transform:translateX(1px) scale(1.06);opacity:1}
.nav a.on{background:rgba(255,255,255,.11);color:#fff;font-weight:650}
.nav a.on::before{content:"";position:absolute;left:-16px;top:11px;bottom:11px;width:4px;border-radius:0 4px 4px 0;background:var(--mark)}
.nav a.on svg{opacity:1}
.badge{background:var(--mark);color:#3A2800;border-radius:99px;padding:1px 9px;font-size:12px;font-weight:800;min-width:22px;text-align:center}
.userbox{margin-top:auto;font-size:13.5px;color:#C4D6DD;display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:var(--r-md);background:rgba(255,255,255,.06)}
.userbox b{color:#fff;font-weight:650;font-size:14.5px}
.userbox .who{margin-bottom:6px}
.userbox a,.userbox button{color:#E6F0F3;background:none;border:0;padding:7px 0;text-align:left;font:inherit;cursor:pointer;min-height:36px;border-radius:6px;transition:color .15s,transform .15s var(--ease)}
.userbox a:hover,.userbox button:hover{color:#fff;transform:translateX(2px)}
.userbox form{margin:0}
.main{min-width:0;padding:var(--pad);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);max-width:1480px;width:100%}
.solo{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:
  radial-gradient(900px 500px at 12% -10%,rgba(12,122,102,.14),transparent 60%),
  radial-gradient(700px 420px at 100% 100%,rgba(31,85,166,.10),transparent 60%),var(--bg)}
.solo>div{width:100%;max-width:440px}
.head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.head>div>.muted{margin-top:6px}
.row{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px)}
.row>.grow{flex:1 1 280px;min-width:0}

/* ---------- cartões ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:16px;box-shadow:var(--sh-1);transition:box-shadow .25s var(--ease),border-color .25s}
.card.tight{padding:0;gap:0;overflow:hidden}
.solo .card{border-radius:var(--r-xl);padding:clamp(24px,5vw,38px);box-shadow:var(--sh-3);gap:20px}
.solo h1{font-size:28px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--r-md);border:1.5px solid var(--line3);background:#fff;font:inherit;font-weight:650;cursor:pointer;color:var(--text);box-shadow:var(--sh-1);transition:background .18s var(--ease),border-color .18s,box-shadow .2s var(--ease),transform .15s var(--ease),color .18s;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:#9FB2BE;box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1)}
.btn.primary{background:linear-gradient(180deg,#0F8A73,var(--accent));border-color:var(--accent-d);color:#fff;box-shadow:0 1px 2px rgba(9,95,79,.35),0 6px 14px -4px rgba(12,122,102,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{background:linear-gradient(180deg,#0C7A66,var(--accent-d));border-color:var(--accent-d);box-shadow:0 2px 4px rgba(9,95,79,.35),0 10px 20px -6px rgba(12,122,102,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink2);border-color:var(--ink2)}
.btn.danger{border-color:#E4B4B0;color:var(--err);background:#fff}
.btn.danger:hover{background:var(--errbg);border-color:var(--err)}
.btn.sm{min-height:38px;padding:0 15px;font-size:14px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- formulários ---------- */
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
input[type=text],input[type=url],input[type=time],input[type=email],input[type=password],input[type=date],input[type=search],input[type=number],input[type=tel],select,textarea{font:inherit;color:var(--text);min-height:46px;border-radius:var(--r-md);border:1.5px solid var(--line3);padding:0 14px;background:#fff;width:100%;box-shadow:inset 0 1px 1px rgba(11,42,51,.04);transition:border-color .18s,box-shadow .2s var(--ease),background .18s}
input:hover,select:hover,textarea:hover{border-color:#9FB2BE}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);background:#fff}
input::placeholder,textarea::placeholder{color:#8396A2}
textarea{padding:12px 14px;resize:vertical;min-height:92px;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352626E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
input[type=file]{font:inherit;font-size:14px;color:var(--muted)}
input[type=file]::file-selector-button{font:inherit;font-weight:650;margin-right:12px;padding:9px 16px;border-radius:10px;border:1.5px solid var(--line3);background:#fff;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
input[type=file]::file-selector-button:hover{background:var(--line2);border-color:#9FB2BE}
input[readonly]{background:var(--bg)}
label.check{flex-direction:row;align-items:center;gap:10px;font-weight:550;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:18px;height:18px}
.form{display:flex;flex-direction:column;gap:18px}
.form .two,.form.two{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:flex-end}
.form .two>*,.form.two>*{flex:1 1 180px}
.form.two>.btn{flex:0 0 auto}

/* ---------- etiquetas e avisos ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:650;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;opacity:.75}
.chip-nova,.chip-info{background:var(--infobg);color:var(--info)}
.chip-andamento,.chip-aguardando{background:var(--warnbg);color:var(--warn)}
.chip-resolvida,.chip-aprovada{background:var(--okbg);color:var(--ok)}
.chip-atrasada,.chip-erro{background:var(--errbg);color:var(--err)}
.chip-rascunho{background:var(--line2);color:var(--muted)}
.flash{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:var(--r-md);font-weight:600;background:var(--okbg);color:var(--ok);border:1px solid rgba(10,91,72,.14);box-shadow:var(--sh-1);animation:entra .35s var(--ease) both;transition:opacity .4s,transform .4s}
.flash::before{content:"";flex:0 0 20px;height:20px;border-radius:99px;background:currentColor;opacity:.9;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center/20px no-repeat}
.flash.erro{background:var(--errbg);color:var(--err);border-color:rgba(179,38,30,.16)}
.flash.erro::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm1 15h-2v-2h2zm0-4h-2V9h2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm1 15h-2v-2h2zm0-4h-2V9h2z'/%3E%3C/svg%3E")}
.flash.sai{opacity:0;transform:translateY(-6px)}
@keyframes entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- painel ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,1.6vw,22px)}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);opacity:.9}
.kpi:nth-child(2)::after{background:var(--info)}
.kpi:nth-child(3)::after{background:var(--ok)}
.kpi:nth-child(4)::after{background:var(--err)}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.kpi b{font-family:var(--f-head);font-size:clamp(38px,4vw,48px);font-weight:700;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:20px;height:200px;border-bottom:1.5px solid var(--line);padding:0 8px;background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--line2) 49px,var(--line2) 50px)}
.bars .g{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:5px;height:100%}
.bars .g i{display:block;width:42%;max-width:30px;border-radius:7px 7px 0 0;transform-origin:bottom;animation:cresce .7s var(--ease) both;transition:filter .15s}
.bars .g i:nth-child(2){animation-delay:.08s}
.bars .g:hover i{filter:brightness(1.15)}
@keyframes cresce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bars-l{display:flex;gap:20px;padding:8px 8px 0}
.bars-l span{flex:1;text-align:center;font-size:13px;color:var(--muted);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px;font-weight:600;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.meter{height:10px;border-radius:99px;background:var(--line2);overflow:hidden}
.meter i{display:block;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--ink3),var(--accent));transform-origin:left;animation:preenche .8s var(--ease) both}
@keyframes preenche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.item{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 12px;margin:0 -12px;border-top:1px solid var(--line2);border-radius:var(--r-md);transition:background .18s var(--ease)}
.item:first-of-type{border-top-color:transparent}
a.item:hover{background:var(--bg)}
.avatar{width:44px;height:44px;flex:0 0 44px;border-radius:99px;background:linear-gradient(145deg,#E3F4EF,#CFE6EE);color:var(--ink2);font-family:var(--f-head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:inset 0 0 0 1px rgba(11,42,51,.06)}

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:13.5px;font-weight:650;color:var(--muted);padding:13px 16px;border-bottom:1.5px solid var(--line);background:#FAFCFD;white-space:nowrap}
td{padding:15px 16px;border-bottom:1px solid var(--line2);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tr.link{cursor:pointer}
tr.link:hover,tbody tr:hover{background:#F6FAFB}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- caixa de entrada ---------- */
.inbox{display:flex;flex-wrap:wrap;align-items:stretch;margin:calc(var(--pad) * -1);min-height:100vh}
.inbox>.col{min-width:0}
.flash ~ .inbox{margin-top:0}  /* com aviso na tela, a caixa começa abaixo dele */
.c-list{flex:1 1 320px;max-width:420px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.c-chat{flex:3 1 420px;display:flex;flex-direction:column;background:linear-gradient(180deg,#E9F0F3,#E2EBEF)}
.c-info{flex:1 1 300px;max-width:380px;background:#fff;border-left:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:18px}
.conv{position:relative;display:flex;gap:13px;padding:15px 22px;border-top:1px solid var(--line2);transition:background .16s var(--ease)}
.conv:hover{background:#F6FAFB}
.conv.on{background:var(--accent-soft)}
.conv.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.conv .n{min-width:0;flex:1}
.conv .t{display:flex;justify-content:space-between;gap:8px;font-weight:650}
.unread{background:var(--accent);color:#fff;border-radius:99px;padding:0 8px;font-size:12px;font-weight:800;min-width:22px;text-align:center;box-shadow:0 2px 6px rgba(12,122,102,.4)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:99px;border:1.5px solid var(--line3);background:#fff;font-weight:650;font-size:14px;color:var(--text);transition:background .16s,border-color .16s,color .16s,transform .15s var(--ease)}
.pill:hover{border-color:var(--ink3);transform:translateY(-1px)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chathead{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);padding:16px 26px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2}
.thread{flex:1;padding:26px;display:flex;flex-direction:column;gap:10px;min-height:360px;max-height:70vh;overflow-y:auto;scroll-behavior:smooth}
.bub{max-width:min(78%,560px);padding:11px 16px;border-radius:6px 18px 18px 18px;background:#fff;word-break:break-word;box-shadow:var(--sh-1);line-height:1.5}
.bub .txt{white-space:pre-wrap;margin-top:2px}
.bub.out{align-self:flex-end;background:#D3EFE4;border-radius:18px 6px 18px 18px}
.bub .meta{font-size:12px;color:var(--muted);margin-top:5px}
.bub .via{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.composer{background:#fff;padding:18px 26px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;box-shadow:0 -8px 24px -16px rgba(11,42,51,.18)}
.hr{height:1px;background:var(--line2);border:0;margin:0}
.notes div{padding:9px 0;border-top:1px solid var(--line2);font-size:14px}

/* ---------- estúdio de artes ---------- */
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,1.6vw,22px)}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.art:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.art .thumb{background:#E3EAEF;border-radius:var(--r-md);display:flex;justify-content:center;align-items:center;padding:10px;height:240px}
.art .thumb svg{max-width:100%;max-height:100%;width:auto;height:100%;border-radius:3px;box-shadow:0 3px 12px rgba(11,42,51,.22)}
.preview{background:linear-gradient(160deg,#E3EAEF,#D6E1E8);border-radius:var(--r-lg);padding:clamp(16px,3vw,32px);display:flex;justify-content:center}
.preview svg{width:100%;max-width:480px;height:auto;border-radius:4px;box-shadow:var(--sh-3)}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatches label{flex-direction:row;align-items:center;gap:0;cursor:pointer}
.swatches input{position:absolute;opacity:0;width:1px;height:1px}
.swatches span{display:block;width:42px;height:42px;border-radius:99px;border:3px solid transparent;box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s}
.swatches label:hover span{transform:scale(1.1)}
.swatches input:checked+span{border-color:var(--text);box-shadow:0 0 0 3px #fff inset,var(--sh-2)}
.swatches input:focus-visible+span{outline:3px solid #7FB7FF;outline-offset:2px}

/* ---------- conexões, passos, utilidades ---------- */
.steps{background:var(--bg);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line2)}
.steps .s{display:flex;gap:14px;font-size:14.5px}
.steps .s b{flex:0 0 28px;height:28px;border-radius:99px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:13.5px}
.copy{display:flex;gap:8px}
.danger-zone{border:1.5px solid #F3C9C6;background:#FFF9F8;border-radius:var(--r-md);padding:18px}

/* ---------- confirmação (janela própria) ---------- */
dialog.confirma{border:0;padding:0;border-radius:var(--r-xl);box-shadow:var(--sh-3);max-width:min(440px,calc(100vw - 32px));width:100%;color:var(--text);background:#fff}
dialog.confirma::backdrop{background:rgba(11,42,51,.52);backdrop-filter:blur(3px);animation:fundo .2s ease both}
dialog.confirma[open]{animation:modal .28s var(--ease) both}
dialog.confirma .corpo{padding:28px 28px 8px}
dialog.confirma h2{margin-bottom:8px}
dialog.confirma .acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:20px 28px 26px}
@keyframes modal{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fundo{from{opacity:0}to{opacity:1}}

/* ---------- faixa do modo de teste (só aparece no computador de quem está testando) ---------- */
.faixas{position:sticky;top:0;z-index:40;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.faixa-teste{background:var(--mark);color:#3A2800;font-weight:650;font-size:14px;text-align:center;padding:8px 16px;box-shadow:0 2px 8px rgba(0,0,0,.12)}


/* ---------- navegação em telas menores ---------- */
.ic{display:none}
@media (max-width:1180px){
  .c-info{max-width:none}
  .c-list{max-width:none}
}
@media (max-width:900px){
  .shell{display:block;padding-bottom:78px}
  .side{position:sticky;top:var(--topo,0px);z-index:20;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;overflow:visible}
  .brand{padding:0;font-size:17px}
  .logo{width:34px;height:34px;border-radius:10px;font-size:17px}
  .userbox{margin:0;flex-direction:row;align-items:center;gap:4px;padding:0;background:none}
  .userbox .who{display:none}
  .userbox a,.userbox button{padding:6px 10px;min-height:40px;background:rgba(255,255,255,.09);border-radius:10px;font-weight:600}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:30;flex-direction:row;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(11,42,51,.97);backdrop-filter:blur(10px);box-shadow:0 -6px 24px rgba(11,42,51,.3);overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:1 0 auto;min-width:68px;flex-direction:column;justify-content:center;gap:3px;padding:6px 8px;min-height:56px;font-size:12px;text-align:center;border-radius:12px}
  .nav a span:first-of-type{flex:none;white-space:nowrap}
  .nav a.on::before{left:30%;right:30%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 4px 4px}
  .nav a .badge{position:absolute;top:2px;right:calc(50% - 26px);font-size:11px;min-width:18px;padding:0 6px}
  .inbox{display:block;min-height:0}
  .c-list,.c-info{flex:none;border:0}
  .c-list{max-height:46vh;overflow-y:auto;border-bottom:1px solid var(--line)}
  .c-chat{flex:none}
  .thread{max-height:60vh;min-height:280px}
  .chathead{position:static}
}
@media (max-width:600px){
  body{font-size:16px}
  .head .row{width:100%}
  .head .row>.btn{flex:1 1 auto}
  .bub{max-width:90%}
  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .kpi{padding:16px 16px 16px 20px}
  .kpi b{font-size:34px}
  .thread,.chathead,.composer{padding-left:16px;padding-right:16px}
  .c-info{padding:20px 16px}
  .conv{padding:14px 16px}
  th,td{padding:12px}
  dialog.confirma .acoes .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{.side,.nav{display:none}.shell{display:block}}


/* ---------- faixa de notícias (topo) ---------- */
.faixa-noticias{display:flex;align-items:stretch;background:var(--ink);color:#EAF2F5;font-size:14px;height:36px;overflow:hidden}
.fn-rotulo{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;background:var(--accent);color:#fff;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.fn-janela{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.fn-fita{display:inline-flex;white-space:nowrap;will-change:transform;animation:fn-rola var(--fn-dur,45s) linear infinite}
.fn-fita:hover,.fn-fita:focus-within,.faixa-noticias.pausada .fn-fita{animation-play-state:paused}
.fn-fita a{display:inline-flex;gap:8px;align-items:center;padding:0 22px;color:#EAF2F5;height:36px}
.fn-fita a:hover{color:#fff;text-decoration:underline}
.fn-fita a b{color:var(--mark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.fn-fita a::after{content:"";width:5px;height:5px;border-radius:99px;background:var(--mark);opacity:.7;margin-left:14px}
.fn-vazio{padding:0 18px;opacity:.75}
.fn-pausa{flex:0 0 auto;border:0;background:rgba(255,255,255,.08);color:#fff;width:40px;cursor:pointer;font-size:11px}
.fn-pausa:hover{background:rgba(255,255,255,.18)}
@keyframes fn-rola{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.fn-fita{animation:none}.fn-janela{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}
@media (max-width:900px){.fn-rotulo{padding:0 10px}}

/* ---------- versão ---------- */
.versao{font-size:12px;color:#8FA9B3;text-align:center;padding-top:4px}
.solo-versao{color:var(--muted);margin-top:18px}
.beta{display:inline-block;padding:0 7px;border-radius:99px;background:var(--mark);color:#3A2800;font-weight:800;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
.badge.erro{background:var(--err);color:#fff}
@media (max-width:900px){.side .versao{display:none}.brand-nome{display:none}}

/* ---------- administração: abas, cartões e tabelas de estado ---------- */
.subnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;padding:9px 16px;border-radius:var(--r-md);font-weight:600;font-size:14.5px;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.subnav a:hover{background:var(--line2);color:var(--text)}
.subnav a.on{background:var(--ink);color:#fff}
.cards-config{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px)}
.cc{display:flex;flex-direction:column;gap:8px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .2s}
.cc:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.cc h3{font-size:17px}
.cc p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.cc .fato{font-size:13.5px;font-weight:650;color:var(--ink3)}
.estado{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700;white-space:nowrap}
.estado::before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor}
.estado.ok{background:var(--okbg);color:var(--ok)}
.estado.atencao{background:var(--warnbg);color:var(--warn)}
.estado.erro{background:var(--errbg);color:var(--err)}
.estado.desligado{background:var(--line2);color:var(--muted)}
.resumo-status{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r-lg);font-weight:650;border:1px solid transparent}
.resumo-status b{font-family:var(--f-head);font-size:20px}
.resumo-status.ok{background:var(--okbg);color:var(--ok);border-color:rgba(10,91,72,.16)}
.resumo-status.atencao{background:var(--warnbg);color:var(--warn);border-color:rgba(133,82,10,.18)}
.resumo-status.erro{background:var(--errbg);color:var(--err);border-color:rgba(179,38,30,.18)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kv>div{padding:12px 14px;background:var(--bg);border-radius:var(--r-md)}
.kv small{display:block;color:var(--muted);font-weight:600}
.kv b{font-size:15.5px}
td.detalhe{max-width:420px;overflow-wrap:anywhere}
.feeds-linha{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(200px,2.4fr) auto;gap:10px;align-items:center}
.feeds-linha[hidden]{display:none}
.feeds-linha .estado{justify-self:start}
@media (max-width:700px){.feeds-linha{grid-template-columns:auto 1fr}.feeds-linha input[type=url]{grid-column:1/-1}}
.temas-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tema-op{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid var(--line3);border-radius:var(--r-md);cursor:pointer;background:#fff;font-weight:650;font-size:14px;color:var(--text)}
.tema-op input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tema-op:has(input:checked){border-color:var(--accent);box-shadow:var(--ring)}
.tema-op:has(input:focus-visible){box-shadow:var(--ring)}
.tema-amostra{display:flex;height:30px;border-radius:8px;overflow:hidden}
.tema-amostra i{flex:1}
.previa-tema{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);display:grid;grid-template-columns:90px 1fr;min-height:150px;background:var(--bg)}
.previa-tema .pm{background:var(--pv-ink,#0B2A33);padding:12px;display:flex;flex-direction:column;gap:8px}
.previa-tema .pm i{height:8px;border-radius:4px;background:rgba(255,255,255,.35)}
.previa-tema .pm i:first-child{background:var(--pv-mark,#F2B632)}
.previa-tema .pc{padding:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.previa-tema .pb{background:var(--pv-accent,#0C7A66);color:#fff;border-radius:10px;padding:8px 14px;font-weight:700;font-size:14px}
.previa-tema .pt{background:var(--pv-mark,#F2B632);color:#3A2800;border-radius:99px;padding:3px 12px;font-weight:800;font-size:12px}
.horarios{display:flex;flex-wrap:wrap;gap:10px}
.horarios label{min-width:130px}
.passo-a-passo{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px;display:flex;flex-direction:column;gap:4px}

/* ---------- dicas ---------- */
.dica{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-lg);background:var(--infobg);color:#173F78;border:1px solid rgba(31,85,166,.16)}
.dica[hidden]{display:none}
.dica .dica-i{flex:0 0 26px;height:26px;border-radius:99px;background:var(--info);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.dica b{display:block;margin-bottom:2px}
.dica p{margin:0;font-size:14.5px}
.dica .dica-x{margin-left:auto;flex:0 0 auto;border:0;background:rgba(31,85,166,.1);color:#173F78;font:inherit;font-weight:650;font-size:13px;padding:6px 12px;border-radius:99px;cursor:pointer}
.dica .dica-x:hover{background:rgba(31,85,166,.2)}
.alerta-sistema{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r-lg);background:var(--errbg);color:var(--err);font-weight:600;border:1px solid rgba(179,38,30,.18)}
.alerta-sistema a{margin-left:auto;text-decoration:underline}

/* ---------- situação da demanda, união e mapa ---------- */
.chip-suspensa{background:var(--warnbg);color:var(--warn)}
.chip-cancelada{background:var(--line2);color:var(--muted)}
.acoes-demanda{display:block}
.acoes-demanda>div{margin-bottom:12px}
.acoes-demanda form{max-width:760px}
.mapa{width:100%;height:auto;display:block;border-radius:var(--r-md);background:#EEF4F1;touch-action:none}
.mapa .terra{fill:#DCE9DF;stroke:#B9CFC0;stroke-width:.4}
.mapa .trilha{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;opacity:.9}
.mapa .norte path{fill:var(--ink)}
.mapa .norte text{font-size:3px;font-weight:800;fill:var(--ink)}
.mapa .bairro circle{fill:var(--accent);stroke:var(--accent-d);stroke-width:.4;transition:r .2s}
.mapa .bairro:hover circle,.mapa .bairro:focus circle{stroke:var(--ink);stroke-width:.8}
.mapa .bairro.auto circle{stroke-dasharray:1.2 .8}
.mapa .nome{font-size:2.5px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:.7px;stroke-linejoin:round;pointer-events:none}
.mapa .qtd{font-size:3px;font-weight:800;fill:#fff;dominant-baseline:middle;pointer-events:none}
.mapa .bairro a{cursor:pointer}
.rank{position:relative;display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line2);font-size:14.5px;overflow:hidden}
.rank i{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);opacity:.5;border-radius:3px}
.rank:hover{color:var(--accent-d)}

.versao .credito{display:block;margin-top:4px;font-size:11px;opacity:.75;letter-spacing:.02em}
.solo-versao .credito{display:inline;margin-left:8px}

.mapa-real{height:520px;border-radius:var(--r-md);overflow:hidden;z-index:0}
.mk-wrap{background:none;border:0}
.mk{position:relative;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.mk b{font-size:13px;line-height:1}
.mk.auto{border-style:dashed}
.mk.edit{cursor:grab}
.mk span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;font-size:11px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.9);padding:1px 6px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
@media (max-width:700px){.mapa-real{height:380px}}

details.visual{border:1px solid var(--line,#D6E1E8);border-radius:var(--r-md);padding:10px 14px}
details.visual summary{cursor:pointer;font-weight:700;margin-bottom:8px}
.swatches .livre{border:3px solid transparent}
.arts .art .thumb{min-height:240px}
.modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}

/* relatórios */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line,#D6E1E8);border-top:3px solid var(--accent);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-size:28px;line-height:1.1;color:var(--accent-d,var(--accent))}.kpi span{font-size:12.5px;color:var(--muted,#5B6B75)}
.barra{display:grid;grid-template-columns:minmax(80px,32%) 1fr auto;gap:10px;align-items:center;padding:4px 0;font-size:13.5px}
.barra .bt{height:12px;background:#E6EDF0;border-radius:99px;overflow:hidden}.barra .bt i{display:block;height:100%;background:var(--accent);border-radius:99px}
.barra small{font-weight:500;color:var(--muted,#5B6B75)}
.insight{border-left:4px solid #1F5FBF;background:#F6F9FC;padding:9px 14px;border-radius:0 var(--r-sm,8px) var(--r-sm,8px) 0;margin:8px 0;font-size:14px}
.insight.alerta{border-color:#C0392B;background:#FDF4F2}.insight.ok{border-color:#1E8449;background:#F2FAF5}
.insight b{display:block;margin-bottom:2px}
.mensal{display:flex;gap:8px;align-items:flex-end;height:170px;overflow-x:auto;padding-bottom:4px}
.mensal .mes{flex:1 0 34px;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.mensal .cols{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.mensal .cols i{display:block;width:40%;max-width:18px;border-radius:4px 4px 0 0;min-height:2px}
.c1{background:var(--accent)}.c2{background:var(--mark,#F2B632)}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle}
table.matriz td.cel{text-align:center;background:color-mix(in srgb,var(--accent) calc(var(--a) * 85%),#F2F6F7)}
table.matriz td.cel[style*="--a:0.5"],table.matriz td.cel[style*="--a:0.6"],table.matriz td.cel[style*="--a:0.7"],table.matriz td.cel[style*="--a:0.8"],table.matriz td.cel[style*="--a:0.9"],table.matriz td.cel[style*="--a:1"]{color:#fff}
.swatches .livre-wrap{position:relative}.swatches input.picker{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}