/* NPS CactusMed
   Estrutura: menu lateral (computador) ou menu inferior (celular), páginas (visão geral, clientes, reuniões, calendário, como funciona), janelas (ficha, registro, Google Agenda, importação).
   Cores: tokens em :root, versão escura no media query e em data-theme.
   Estados: ok (verde), warn (amarelo), bad (vermelho), idle (cinza), lidos pelas variáveis --s, --sf, --ss. */

:root{
  --bg:#F3F2EA; --surface:#FFFFFF; --surface-2:#F6F5EE;
  --ink:#0F231C; --ink-2:#47594F; --ink-3:#5B6C63;
  --line:#DEDDD0; --line-2:#CBCABB;
  --brand:#1B7A5A; --brand-soft:#DCEFE5; --on-brand:#FFFFFF;
  --hero-a:#0D4A38; --hero-b:#1B7A5A; --hero-ink:#FFFFFF; --lime:#CDE86B;
  --ok:#126B41; --ok-soft:#DDF1E5; --ok-f:#23A06A; --on-ok-f:#FFFFFF;
  --warn:#8A5300; --warn-soft:#FCEFCF; --warn-f:#E0A021; --on-warn-f:#2B1D00;
  --bad:#A52D23; --bad-soft:#FBE3E0; --bad-f:#DB4A3D; --on-bad-f:#FFFFFF;
  --idle:#475E6C; --idle-soft:#E5ECEF; --idle-f:#8AA0AD; --on-idle-f:#FFFFFF;
  --lg-ok:#43E09F; --lg-warn:#FFCB45; --lg-bad:#FF7468;
  --track:#E6E5DA;
  --c1:#2A78D6; --c2:#EB6834; --c7:#6250D6;
  --grid:var(--line); --axis:var(--line-2);
  --shadow:0 1px 2px rgba(15,35,28,.06),0 10px 28px rgba(15,35,28,.07);
  --r:18px; --r-sm:12px; --side:264px;
  --s:var(--idle); --sf:var(--idle-f); --ss:var(--idle-soft); --on:var(--on-idle-f);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1512; --surface:#122019; --surface-2:#172821;
    --ink:#E6F0EA; --ink-2:#A8BDB2; --ink-3:#8AA095;
    --line:#24372E; --line-2:#33493E;
    --brand:#52CC9E; --brand-soft:#173B2E; --on-brand:#06261B;
    --hero-a:#0C3A2D; --hero-b:#14543F; --hero-ink:#EAF7F0; --lime:#C5E266;
    --ok:#5DD39E; --ok-soft:#153A2B; --ok-f:#3DB985; --on-ok-f:#062016;
    --warn:#F0BE5A; --warn-soft:#3A2E10; --warn-f:#E5A92F; --on-warn-f:#2B1D00;
    --bad:#FF8F84; --bad-soft:#431D19; --bad-f:#EF6759; --on-bad-f:#2B0A07;
    --idle:#A5BAC6; --idle-soft:#1E2E36; --idle-f:#6F8896; --on-idle-f:#0B1512;
    --track:#203129;
    --c1:#3987E5; --c2:#D95926; --c7:#9085E9;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1512; --surface:#122019; --surface-2:#172821;
  --ink:#E6F0EA; --ink-2:#A8BDB2; --ink-3:#8AA095;
  --line:#24372E; --line-2:#33493E;
  --brand:#52CC9E; --brand-soft:#173B2E; --on-brand:#06261B;
  --hero-a:#0C3A2D; --hero-b:#14543F; --hero-ink:#EAF7F0; --lime:#C5E266;
  --ok:#5DD39E; --ok-soft:#153A2B; --ok-f:#3DB985; --on-ok-f:#062016;
  --warn:#F0BE5A; --warn-soft:#3A2E10; --warn-f:#E5A92F; --on-warn-f:#2B1D00;
  --bad:#FF8F84; --bad-soft:#431D19; --bad-f:#EF6759; --on-bad-f:#2B0A07;
  --idle:#A5BAC6; --idle-soft:#1E2E36; --idle-f:#6F8896; --on-idle-f:#0B1512;
  --track:#203129;
  --c1:#3987E5; --c2:#D95926; --c7:#9085E9;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0; margin:0}
a{color:var(--brand); font-weight:600}
svg{display:block}
:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
h1,h2,h3{text-wrap:balance}

body:not(.can-write) .w-only{display:none !important}
body:not(.can-admin) .a-only{display:none !important}
body.demo .no-demo{display:none !important}

/* estados de cor: cada elemento com data-s lê as variáveis --s (texto), --sf (preenchimento), --ss (fundo suave) */
[data-s="ok"]{--s:var(--ok); --sf:var(--ok-f); --ss:var(--ok-soft); --on:var(--on-ok-f)}
[data-s="warn"]{--s:var(--warn); --sf:var(--warn-f); --ss:var(--warn-soft); --on:var(--on-warn-f)}
[data-s="bad"]{--s:var(--bad); --sf:var(--bad-f); --ss:var(--bad-soft); --on:var(--on-bad-f)}
[data-s="idle"]{--s:var(--idle); --sf:var(--idle-f); --ss:var(--idle-soft); --on:var(--on-idle-f)}

/* ---------- estrutura geral ---------- */
.app{display:block; min-height:100vh}
.side{display:none}
.mtop{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 4px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em; min-width:0}
.brand .mark{flex:0 0 auto; width:38px; height:38px; border-radius:12px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center}
.brand b{display:block; line-height:1.15}
.brand small{display:block; font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.mode{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); line-height:1.2}
.mode i{flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--idle-f)}
.mode.on i{background:var(--ok-f)}
.content{container-type:inline-size; container-name:pg; max-width:1280px; margin:0 auto; padding:8px 16px 128px}
.page[hidden]{display:none !important}

.bnav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--surface); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -6px 20px rgba(15,35,28,.06);
}
.bnav button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:54px; padding:4px 2px;
  background:none; border:0; border-radius:12px; color:var(--ink-3); font-size:11.5px; font-weight:700; line-height:1.15; text-align:center;
}
.bnav button[aria-current="page"]{color:var(--brand); background:var(--brand-soft)}
.fab{
  position:fixed; right:16px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); z-index:31; display:inline-flex; align-items:center; gap:8px;
  min-height:52px; padding:0 20px 0 16px; border-radius:999px; border:0; background:var(--brand); color:var(--on-brand); font-weight:800;
  box-shadow:0 8px 24px rgba(13,74,56,.35);
}

@media (min-width:960px){
  .app{display:grid; grid-template-columns:var(--side) minmax(0,1fr); align-items:start}
  .side{
    display:flex; flex-direction:column; gap:20px; position:sticky; top:env(safe-area-inset-top, 0px);
    height:calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow:auto;
    padding:24px 16px 20px; background:var(--surface); border-right:1px solid var(--line);
  }
  .mtop, .bnav, .fab{display:none}
  .content{padding:30px 32px 72px}
}
.snav{display:grid; gap:4px}
.nav-btn{
  display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:0 12px; border:0; border-radius:12px;
  background:none; color:var(--ink-2); font-weight:700; text-align:left;
}
.nav-btn:hover{background:var(--surface-2); color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--brand-soft); color:var(--brand)}
.nav-btn .nbadge{margin-left:auto; min-width:24px; height:22px; padding:0 7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:12px; display:grid; place-items:center; color:var(--ink-2)}
.nav-btn .nbadge[data-s]{background:var(--ss); color:var(--s); border-color:var(--sf)}
.side .btn.primary{width:100%}
.side-foot{margin-top:auto; display:grid; gap:10px}
.side-foot p{font-size:12.5px; color:var(--ink-3)}

/* ---------- cabeçalho das páginas ---------- */
.pg-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 18px; margin:6px 0 18px}
.h1{font-size:clamp(25px,4vw,32px); font-weight:800; letter-spacing:-.025em; line-height:1.1}
.h2{font-size:20px; font-weight:800; letter-spacing:-.015em}
.sub{color:var(--ink-2); font-size:14.5px; margin-top:4px; max-width:68ch}
.acts-top{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- aviso do modo exemplo e de carregamento ---------- */
.demo-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 16px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--brand-soft); border:1px dashed var(--brand); font-size:14px;
}
.demo-bar b{font-weight:800}
.demo-bar .grow{flex:1 1 240px}
.state-note{margin:0 0 16px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); font-size:14px; color:var(--ink-2)}

/* ---------- visão geral: composição ---------- */
.ov-grid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
.ov-grid > *{min-width:0}
@container pg (min-width:900px){
  .ov-grid{grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px}
  .s12{grid-column:span 12} .s8{grid-column:span 8} .s7{grid-column:span 7} .s5{grid-column:span 5} .s4{grid-column:span 4} .s6{grid-column:span 6}
}
@container pg (min-width:640px) and (max-width:899px){
  .ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s12, .s8, .s7, .s5, .s4{grid-column:span 2}
}

/* ---------- destaque do NPS ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:26px; padding:22px 20px; color:var(--hero-ink);
  background:
    radial-gradient(520px 260px at 92% -10%, color-mix(in srgb, var(--lime) 40%, transparent), transparent 70%),
    radial-gradient(420px 220px at -5% 120%, color-mix(in srgb, var(--lime) 16%, transparent), transparent 70%),
    linear-gradient(135deg, var(--hero-a), var(--hero-b));
  box-shadow:var(--shadow);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 100%); mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
}
.hero-in{position:relative; z-index:1; display:grid; gap:18px}
@container pg (min-width:700px){ .hero{padding:26px 30px} .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:30px} }
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.92}
.hero-num{font-size:clamp(68px,13vw,104px); font-weight:800; letter-spacing:-.045em; line-height:.95; margin:10px 0 6px}
.hero-num.none{font-size:clamp(48px,9vw,72px); opacity:.7}
.hero-cap{font-size:14.5px; max-width:44ch; opacity:.95}
.hero-cap b{font-weight:800}
.per{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.per button{
  min-height:38px; padding:0 13px; border-radius:999px; border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.1);
  color:var(--hero-ink); font-weight:700; font-size:13.5px;
}
.per button:hover{background:rgba(255,255,255,.2)}
.per button[aria-pressed="true"]{background:var(--hero-ink); color:var(--hero-a); border-color:var(--hero-ink)}
.dist{display:grid; gap:12px}
.dist-bar{display:flex; gap:2px; height:14px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.14)}
.dist-bar i{display:block; flex:1 1 0; min-width:0; height:100%}
.dist-bar i[data-c="promotor"]{background:var(--lg-ok)}
.dist-bar i[data-c="neutro"]{background:var(--lg-warn)}
.dist-bar i[data-c="detrator"]{background:var(--lg-bad)}
.dist-rows{display:grid; gap:8px}
.dist-row{display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; gap:10px; align-items:center; font-size:14.5px}
.dist-row svg{color:var(--c)}
.dist-row[data-c="promotor"]{--c:var(--lg-ok)} .dist-row[data-c="neutro"]{--c:var(--lg-warn)} .dist-row[data-c="detrator"]{--c:var(--lg-bad)}
.dist-row b{font-weight:800}
.dist-row small{display:block; font-size:12px; opacity:.85}
.dist-row .n{font-weight:800; font-size:18px; min-width:1.6ch; text-align:right}
.dist-row .p{opacity:.9; font-size:13.5px; min-width:4ch; text-align:right}
.hero-foot{font-size:13px; opacity:.88; margin-top:2px}

/* ---------- cartão de pendências ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px}
.panel-head{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 12px; margin-bottom:12px}
.panel-head h2{font-size:17px; font-weight:800; letter-spacing:-.01em}
.panel-head p{font-size:13.5px; color:var(--ink-2); margin-top:2px}
.meter{height:12px; border-radius:999px; background:var(--track); overflow:hidden}
.meter i{display:block; height:100%; width:var(--w, 0%); border-radius:999px; background:var(--brand); transition:width .3s ease}
.pend-big{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 0 10px}
.pend-big b{font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1}
.pend-big span{color:var(--ink-2); font-size:14.5px}
.pend-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pchip{
  max-width:100%; min-height:34px; padding:0 11px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface-2);
  font-size:13px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pchip:hover{border-color:var(--brand)}
.pchip.more{background:none; color:var(--ink-2)}

/* ---------- indicadores de saúde e números de apoio ---------- */
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@container pg (min-width:760px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px} }
.tile{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 14px 13px; box-shadow:inset 0 4px 0 var(--sf), var(--shadow); display:flex; flex-direction:column; gap:2px; color:var(--ink);
  transition:transform .15s ease, border-color .15s ease, background .15s ease; min-width:0;
}
.tile:hover{transform:translateY(-2px)}
.tile[aria-pressed="true"]{border-color:var(--sf); background:var(--ss)}
.tile .row{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--s)}
.tile .row svg{flex:0 0 auto}
.tile .num{font-size:38px; font-weight:800; letter-spacing:-.035em; line-height:1.1}
.tile .cap{font-size:12.5px; color:var(--ink-2); line-height:1.35}
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@container pg (min-width:760px){ .stats{grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px} }
@container pg (min-width:480px) and (max-width:759px){ .stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
.stat{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sf); border-radius:14px;
  padding:11px 12px; display:flex; flex-direction:column; gap:1px; color:var(--ink); min-width:0;
}
button.stat:hover{border-color:var(--sf)}
.stat .l{font-size:12.5px; font-weight:700; color:var(--ink-2); line-height:1.25}
.stat .v{font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.15}
.stat .c{font-size:12px; color:var(--ink-3); line-height:1.3}
.stat[data-s="bad"] .v{color:var(--bad)}
.stat[data-s="warn"] .v{color:var(--warn)}

/* ---------- lista "o que fazer agora" e agenda ---------- */
.todo-list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.todo-item{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 12px;
  border:1px solid var(--line); border-left:5px solid var(--sf); border-radius:14px; background:var(--surface-2);
}
.todo-item .ti-ico{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--ss); color:var(--s)}
.todo-item .ti-body{min-width:0}
.todo-item .ti-name{background:none; border:0; padding:0; font-weight:800; font-size:15px; text-align:left; line-height:1.25; overflow-wrap:anywhere; color:var(--ink)}
.todo-item .ti-name:hover{color:var(--brand); text-decoration:underline}
.todo-item .ti-txt{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.35; margin-top:1px}
.todo-item .ti-act{display:flex; gap:6px}
@media (max-width:520px){
  .todo-item{grid-template-columns:34px minmax(0,1fr)}
  .todo-item .ti-act{grid-column:2; justify-content:flex-start}
}
.empty-line{font-size:14.5px; color:var(--ink-2); padding:8px 2px}
.agenda-list{display:grid; gap:6px}
.ag-day{font-size:12.5px; font-weight:800; color:var(--ink-2); margin-top:8px}
.ag-day:first-child{margin-top:0}
.ag-item{
  display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; width:100%;
  padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink);
}
.ag-item:hover{border-color:var(--e)}
.ag-item > i{width:12px; height:12px; border-radius:50%; background:var(--e)}
.ag-item b{display:block; font-size:14px; line-height:1.3; overflow-wrap:anywhere}
.ag-item small{display:block; font-size:12.5px; color:var(--ink-2)}
.ag-item .gl{font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; padding:4px 8px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface)}

/* ---------- componentes comuns ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-weight:700; white-space:nowrap; transition:transform .12s ease, background .12s ease; text-decoration:none;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{min-height:38px; padding:0 12px; font-size:14px}
.btn.danger{color:var(--bad); border-color:var(--bad-f)}
.btn[disabled]{opacity:.55; cursor:default}
.btn svg{flex:0 0 auto}
.icon-btn{
  width:40px; height:40px; display:inline-grid; place-items:center; border-radius:12px; flex:0 0 auto;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
}
.icon-btn:hover{color:var(--brand); border-color:var(--brand)}
.icon-btn.sm{width:36px; height:36px; border-radius:10px}
.inp{
  width:100%; min-height:44px; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink);
}
textarea.inp{min-height:84px; resize:vertical; line-height:1.4}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; min-height:130px}
.inp:focus-visible{border-color:var(--brand)}
.inp[disabled], .inp[readonly]{background:var(--surface-2); color:var(--ink)}
select.inp{max-width:100%; min-width:0}
select.inp[disabled]{opacity:1; -webkit-text-fill-color:var(--ink)}
.fld{display:block; min-width:0}
.fld > span, .fld-l{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px}
.hint{font-size:13px; color:var(--ink-3)}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px;
  background:var(--ss); color:var(--s); font-size:13px; font-weight:800; white-space:nowrap; line-height:1.4;
}
.pill svg{flex:0 0 auto}
.tag{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:800; background:var(--idle-soft); color:var(--idle); white-space:nowrap}
.tag.new{background:var(--ok-soft); color:var(--ok)}
.tag.upd{background:var(--brand-soft); color:var(--brand)}
.tag.skip{background:var(--bad-soft); color:var(--bad)}
.tag.claude{background:var(--brand-soft); color:var(--brand)}
.tag.ghost{background:none; border:1px solid var(--line-2); color:var(--ink-2)}
.stack{display:grid; gap:10px}
.span-all{grid-column:1/-1}
.link-btn{background:none; border:0; padding:6px 8px; border-radius:8px; color:var(--ink-2); font-weight:700; font-size:13.5px}
.link-btn:hover{color:var(--ink); text-decoration:underline}
.link-btn.danger{color:var(--bad)}
.nchip{
  display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 8px; border-radius:11px;
  background:var(--sf); color:var(--on); font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1;
}
.nchip.sm{min-width:30px; height:30px; font-size:15px; border-radius:9px}
.nchip.none{background:var(--idle-soft); color:var(--idle); font-size:15px}
.ncat{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--s)}

/* ---------- formas de ver ---------- */
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:4px; gap:2px; max-width:100%}
.seg button{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border:0; border-radius:10px;
  background:transparent; font-weight:700; color:var(--ink-2); white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--brand); color:var(--on-brand)}
.seg button svg{flex:0 0 auto}
.seg.full{display:flex; width:100%}
.seg.full button{flex:1 1 0; min-width:0; justify-content:center; padding:0 6px; white-space:normal; text-align:center; line-height:1.15}
@media (max-width:560px){ .seg.full.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .seg.views{width:100%}
  .seg.views button{flex:1 1 0; min-width:0; padding:0 4px; flex-direction:column; gap:3px; min-height:56px; font-size:12.5px; justify-content:center}
}
.view-help{font-size:14px; color:var(--ink-2); margin:10px 0 0; max-width:84ch}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 8px}
.search{position:relative; flex:1 1 240px}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.search .inp{padding-left:40px}
.toolbar > label{flex:0 1 214px; min-width:0}
.toolbar > label.search{flex:1 1 240px}
.toolbar > label.check-line{flex:0 0 auto}
.toolbar select.inp{width:100%; min-width:0; max-width:100%; font-size:14.5px; padding-left:10px; padding-right:6px}
.filt-tog{display:none}
.filt-tog .nbadge{min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--brand); color:var(--on-brand); font-size:12px; font-weight:800; display:inline-grid; place-items:center}
@media (max-width:640px){
  .toolbar > label{flex:1 1 calc(50% - 10px)}
  .toolbar > label.search{flex:1 1 150px}
  .toolbar > label.check-line{flex:1 1 100%}
  .filt-tog{display:inline-flex}
  .toolbar:not(.open):not(.ftb) > label:not(.search){display:none}
}
.fchip{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 10px 0 14px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:13.5px; border:0;
}
.check-line{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-size:14px; color:var(--ink-2)}
.check-line input{width:20px; height:20px; accent-color:var(--brand)}

/* ---------- gráficos ---------- */
.chart .panel-head{align-items:center}
.ch-tog{
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:700;
}
.ch-tog:hover{color:var(--ink); border-color:var(--ink-3)}
.ch-body{min-width:0}
.ch-note{font-size:13px; color:var(--ink-3); margin-top:10px}
.ch-empty{display:flex; flex-direction:column; justify-content:center; min-height:150px; gap:6px; color:var(--ink-2); font-size:14.5px; padding:6px 2px}
svg.lc{width:100%; height:auto; overflow:visible}
svg.lc .grid line{stroke:var(--grid); stroke-width:1}
svg.lc .zero line{stroke:var(--axis); stroke-width:1.5}
svg.lc text{font-family:inherit; font-size:11.5px; fill:var(--ink-3)}
svg.lc .yl{text-anchor:end}
svg.lc .xl{text-anchor:middle}
svg.lc .line{fill:none; stroke:var(--c1); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
svg.lc .dot{fill:var(--c1); stroke:var(--surface); stroke-width:2}
svg.lc .vlab{font-size:13px; font-weight:800; fill:var(--ink); text-anchor:start}
svg.lc .hit{fill:transparent; cursor:default}
svg.lc .hit:focus-visible{outline:none}
svg.lc .hit:focus-visible + .ring, svg.lc .ring.on{stroke:var(--ink)}
svg.lc .ring{fill:none; stroke:transparent; stroke-width:2}
svg.lc .hov{stroke:var(--ink-3); stroke-width:1; opacity:0}
svg.lc .hov.on{opacity:.6}
.hb{display:grid; gap:6px}
.hb-row{display:grid; grid-template-columns:minmax(80px,38%) minmax(0,1fr) auto; gap:10px; align-items:center; min-height:34px; padding:2px 4px; border-radius:8px}
.hb-row:hover, .hb-row:focus-visible{background:var(--surface-2)}
.hb-label{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.25; overflow-wrap:anywhere}
.hb-label small{display:block; font-size:12px; color:var(--ink-3); font-weight:500}
.hb-track{height:18px; display:flex; align-items:center}
.hb-bar{display:block; height:18px; min-width:3px; border-radius:0 4px 4px 0; background:var(--c1)}
.hb-val{font-size:14px; font-weight:800; min-width:2.2ch; text-align:right}
.rc{display:flex; align-items:flex-end; gap:6px; height:200px; padding-top:4px}
.rc-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; border-radius:8px; padding:0 2px}
.rc-col:hover, .rc-col:focus-visible{background:var(--surface-2)}
.rc-tot{font-size:13px; font-weight:800; color:var(--ink); min-height:18px}
.rc-stack{width:100%; max-width:28px; display:flex; flex-direction:column-reverse; gap:2px}
.rc-seg{display:block; width:100%; background:var(--sf)}
.rc-seg:last-child{border-radius:4px 4px 0 0}
.rc-lab{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.lg{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:13px; color:var(--ink-2)}
.lg span{display:inline-flex; align-items:center; gap:7px}
.lg i{width:12px; height:12px; border-radius:3px; background:var(--sf)}
.rc-info{display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:10px}
.tview{max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm)}
.tview table{width:100%; border-collapse:collapse; font-size:13.5px}
.tview th, .tview td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tview th{position:sticky; top:0; background:var(--surface-2); font-size:12px; color:var(--ink-2)}
.tview td.num, .tview th.num{text-align:right; font-variant-numeric:tabular-nums}
.tip{
  position:fixed; z-index:80; max-width:min(300px, calc(100vw - 20px)); padding:9px 12px; border-radius:12px; background:var(--ink); color:var(--bg);
  font-size:13px; line-height:1.35; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.tip b{display:block; font-size:16px; font-weight:800; margin:2px 0}
.tip span{display:block; opacity:.85}

/* ---------- clientes: tabela ---------- */
.tbl-wrap{background:none; border:0; box-shadow:none}
.ctbl{width:100%; border-collapse:collapse}
.ctbl, .ctbl tbody{display:block}
.ctbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.ctbl tr.row{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 12px; padding:16px 14px 14px; margin:0 0 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:inset 0 4px 0 var(--sf), var(--shadow);
}
.ctbl td{display:block; padding:0; border:0; min-width:0}
.ctbl td.c-name{grid-column:1/-1; padding-right:84px}
.ctbl td.c-acao{grid-column:1/-1}
.ctbl td.c-btns{position:absolute; top:10px; right:10px; display:flex; gap:6px}
.ctbl td[data-label]::before{display:block; content:attr(data-label); font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px}
.ctbl td.c-name::before, .ctbl td.c-btns::before{display:none}
.name-btn{
  background:none; border:0; padding:0; text-align:left; font-weight:800; font-size:16px; line-height:1.25;
  color:var(--ink); overflow-wrap:anywhere;
}
.name-btn:hover{color:var(--brand); text-decoration:underline}
.sub-line{display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.35}
.cell-note{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.cell-sub{display:block; font-size:12.5px; color:var(--ink-2); margin-top:4px; line-height:1.3}
.cell-sub .blk{display:block}
.cell-sub[data-s]{color:var(--s); font-weight:700}
.act-txt{font-size:13.5px; line-height:1.35; color:var(--ink-2)}
.act-txt[data-s="bad"], .act-txt[data-s="warn"]{color:var(--s); font-weight:700}
.act-txt.ok{color:var(--ok); font-weight:700; display:inline-flex; align-items:center; gap:6px}
.date-inp{min-height:40px; padding:7px 8px; font-size:14px}
@container pg (min-width:1020px){
  .ctbl{display:table; table-layout:fixed; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
  .ctbl tbody{display:table-row-group}
  .ctbl thead{position:static; width:auto; height:auto; overflow:visible; clip:auto; display:table-header-group}
  .ctbl tr.row{display:table-row; padding:0; margin:0; background:none; border:0; box-shadow:none; border-radius:0}
  .ctbl thead tr{display:table-row}
  .ctbl th{background:var(--surface-2); text-align:left; font-size:12.5px; font-weight:800; color:var(--ink-2); padding:8px 10px; border-bottom:1px solid var(--line-2)}
  .ctbl th.c-nota{width:116px} .ctbl th.c-saude{width:152px} .ctbl th.c-risco{width:158px} .ctbl th.c-renov{width:162px} .ctbl th.c-btns{width:104px}
  .ctbl td.c-risco .reason-line{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
  .ctbl .em-pre{display:none}
  .ctbl td{display:table-cell; padding:12px 10px; vertical-align:top; border-bottom:1px solid var(--line)}
  .ctbl td.c-name{border-left:5px solid var(--sf); padding-right:10px}
  .ctbl td.c-btns{position:static; display:table-cell; text-align:right; white-space:nowrap}
  .ctbl td.c-btns .icon-btn{margin-left:4px}
  .ctbl td[data-label]::before{display:none}
  .ctbl tr.row:hover td{background:color-mix(in srgb, var(--ss) 35%, var(--surface))}
}
.th{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 0; font:inherit; color:inherit; font-weight:800; min-height:30px}
.th .arr{width:10px; opacity:.3; font-size:11px}
.th[data-on="1"]{color:var(--brand)}
.th[data-on="1"] .arr{opacity:1}
@keyframes flashbg{0%{background:color-mix(in srgb, var(--brand) 24%, var(--surface))} 100%{background:transparent}}
.ctbl tr.row.flash td{animation:flashbg 1.8s ease-out}

/* ---------- clientes: quadro por saúde ---------- */
.board{display:grid; gap:14px; grid-template-columns:minmax(0,1fr); align-items:start}
@container pg (min-width:640px){ .board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container pg (min-width:1100px){ .board{grid-template-columns:repeat(4,minmax(0,1fr))} }
.bcol{
  background:color-mix(in srgb, var(--ss) 55%, var(--bg)); border:1px solid var(--line); border-radius:var(--r);
  padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; box-shadow:inset 0 4px 0 var(--sf);
}
.bcol-head h3{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; color:var(--s)}
.bcol-head .n{margin-left:auto; min-width:26px; height:26px; padding:0 8px; border-radius:999px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); font-size:13px; display:grid; place-items:center}
.bcol-head p{font-size:12.5px; color:var(--ink-2); margin-top:2px}
.bcol-body{display:flex; flex-direction:column; gap:10px; min-width:0}
.bempty{font-size:13.5px; color:var(--ink-3); padding:6px 4px 10px}
.bcard{
  display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; padding:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); color:var(--ink);
}
.bcard:hover{border-color:var(--sf)}
.bcard .b-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.bcard .b-name{font-weight:800; line-height:1.25; overflow-wrap:anywhere}
.bcard .b-meta{font-size:12.5px; color:var(--ink-2); line-height:1.35}
.bcard .b-next{font-size:13px; font-weight:700; color:var(--s); line-height:1.3}
.bcard .b-pills{display:flex; flex-wrap:wrap; gap:6px}

/* ---------- clientes: mapa de notas ---------- */
.hm-wrap{overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.hm{border-collapse:separate; border-spacing:3px; width:100%; min-width:520px; table-layout:fixed}
.hm th{font-size:12px; font-weight:800; color:var(--ink-2); padding:8px 6px; text-align:center; white-space:nowrap}
.hm th.c0, .hm td.c0{position:sticky; left:0; background:var(--surface); z-index:1; text-align:left; width:150px}
@container pg (min-width:720px){ .hm th.c0, .hm td.c0{width:250px} }
.hm td.c0{padding:4px 8px}
.hm td.c0 .name-btn{font-size:14px}
.hm td.cell{height:42px; text-align:center; border-radius:9px; font-weight:800; font-size:16px; background:var(--ss); color:var(--s)}
.hm td.cell[data-s="idle"]{font-weight:600; font-size:13px}
.hm td.cell.blank{background:var(--surface-2); color:var(--ink-3); font-weight:500}
.hm td.cell:hover{outline:2px solid var(--ink-3); outline-offset:-2px}
.hm td.cell{padding:0}
.hm .cellbtn{display:block; width:100%; height:100%; min-height:42px; padding:0 4px; margin:0; background:transparent; border:0; border-radius:9px; color:inherit; font:inherit; cursor:pointer}
.hm .cellbtn:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.hm td.cell.blank .cellbtn{font-weight:500}
.hm-key{display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0; font-size:13px; color:var(--ink-2)}
.hm-key span{display:inline-flex; align-items:center; gap:7px}
.hm-key i{width:14px; height:14px; border-radius:4px; background:var(--ss); border:1px solid var(--sf)}

/* ---------- reuniões ---------- */
.mgroup{margin:20px 0 8px; font-size:14px; font-weight:800; color:var(--ink-2); display:flex; align-items:center; gap:10px}
.mgroup::after{content:""; flex:1; height:1px; background:var(--line)}
.mlist{display:grid; gap:8px}
.mrow{
  display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:4px 14px; align-items:start; padding:12px 12px 12px 10px;
  background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sf); border-radius:14px; box-shadow:var(--shadow);
}
.mdate{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 4px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); text-align:center; line-height:1.1}
.mdate b{font-size:22px; font-weight:800; letter-spacing:-.03em}
.mdate span{font-size:11.5px; font-weight:700; color:var(--ink-2); text-transform:uppercase}
.mbody{min-width:0; display:grid; gap:6px}
.mline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.mline .name-btn{font-size:15.5px}
.mquote{font-size:13.5px; color:var(--ink-2); font-style:italic; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.msum{font-size:13px; color:var(--ink-2); line-height:1.4; overflow-wrap:anywhere}
.mact{display:flex; gap:6px}
@media (max-width:560px){
  .mrow{grid-template-columns:52px minmax(0,1fr)}
  .mact{grid-column:2}
}

/* ---------- calendário ---------- */
.cal{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:980px){ .cal{grid-template-columns:minmax(0,2.3fr) minmax(280px,1fr); align-items:start} }
.cal-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:10px}
.cal-title{font-size:21px; font-weight:800; letter-spacing:-.015em; margin-right:auto}
.cal-togs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.evtog{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-size:13px; color:var(--ink-2);
}
.evtog i{width:10px; height:10px; border-radius:50%; background:var(--e)}
.evtog[aria-pressed="false"]{opacity:.55}
.evtog[aria-pressed="false"] i{background:transparent; box-shadow:inset 0 0 0 2px var(--e)}
[data-e="agendada"]{--e:var(--c1)} [data-e="renov"]{--e:var(--c7)} [data-e="inicio"]{--e:var(--c7)} [data-e="prazo"]{--e:var(--c2)} [data-e="feita"]{--e:var(--idle-f)}
[data-e="feita"][data-s]{--e:var(--sf)}
.cal-grid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--surface); box-shadow:var(--shadow);
}
.cal-dow{padding:8px 2px; text-align:center; font-size:12px; font-weight:800; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--line)}
.cal-day{
  min-height:98px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:5px 4px 4px;
  display:flex; flex-direction:column; gap:3px; min-width:0; background:var(--surface);
}
.cal-day:nth-child(7n){border-right:0}
.cal-day.out{background:var(--surface-2)}
.cal-day.out .dnum{opacity:.5}
.cal-day.past .evs{opacity:.7}
.cal-day.sel{box-shadow:inset 0 0 0 2px var(--brand)}
.dnum{
  align-self:flex-start; min-width:26px; height:26px; padding:0 6px; border:0; border-radius:999px; background:none;
  font-weight:700; font-size:13px; color:var(--ink);
}
.dnum:hover{background:var(--brand-soft)}
.cal-day.today .dnum{background:var(--brand); color:var(--on-brand)}
.evs{display:flex; flex-direction:column; gap:3px; min-width:0}
.ev{
  display:block; width:100%; border:0; border-left:3px solid var(--e); border-radius:6px; padding:3px 6px 3px 7px; min-width:0; text-align:left;
  line-height:1.25; color:var(--ink);
  background:color-mix(in srgb, var(--e) 16%, var(--surface));
}
.ev i{display:none}
.ev .evx{display:block; min-width:0}
.ev .evt, .ev .evn{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev .evt{font-size:10.5px; font-weight:800; color:var(--ink-2)}
.ev .evn{font-size:12px; font-weight:700}
.ev:hover{background:color-mix(in srgb, var(--e) 28%, var(--surface))}
.ev.late{border-left-color:var(--bad-f)}
.more{font-size:11px; color:var(--ink-3); font-weight:700; background:none; border:0; padding:0 4px; text-align:left}
@media (max-width:640px){
  .cal-day{min-height:62px; padding:3px 2px}
  .evs{flex-direction:row; flex-wrap:wrap; gap:3px; padding:0 2px}
  .ev{width:auto; padding:3px; border:0; border-radius:50%}
  .ev .evx{display:none}
  .ev i{display:block; width:9px; height:9px; border-radius:50%; background:var(--e)}
  .more{padding:0 2px; font-size:10.5px}
}
.cal-side{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:14px}
.cal-side h3{font-size:16px; font-weight:800}
.cal-side .sub2{font-size:13px; color:var(--ink-2); margin:2px 0 10px}
.ag-list{display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; padding-right:2px}

/* ---------- janelas ---------- */
dialog.dlg{
  border:0; padding:0; border-radius:22px; background:var(--bg); color:var(--ink);
  width:min(760px, calc(100vw - 20px)); max-height:calc(100vh - 20px); overflow:auto; box-shadow:0 24px 80px rgba(0,0,0,.4);
}
dialog.dlg.wide{width:min(900px, calc(100vw - 20px))}
dialog.dlg::backdrop{background:rgba(6,18,13,.62)}
.dlg-in{padding:16px 14px 18px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .dlg-in{padding:22px 24px 22px} }
.dlg-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.dlg-top h2{font-size:21px; font-weight:800; letter-spacing:-.015em; line-height:1.2; overflow-wrap:anywhere}
.dlg-top p{font-size:13.5px; color:var(--ink-2); margin-top:3px}
.dlg-foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.dlg-foot .grow{flex:1}
@media (max-width:640px){
  dialog.dlg, dialog.dlg.wide{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; margin:0}
  .dlg-in{padding:calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px))}
  .dlg-foot.sticky{position:sticky; bottom:0; background:var(--bg); padding:10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); margin-bottom:calc(-1 * env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); z-index:2}
}
.opts{display:grid; gap:8px}
.opt{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); cursor:pointer}
.opt input{margin-top:3px; width:20px; height:20px; accent-color:var(--brand); flex:0 0 auto}
.opt b{display:block; font-size:14.5px}
.opt small{display:block; font-size:13px; color:var(--ink-2)}
.ol{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:10px}
.ol li{counter-increment:s; position:relative; padding-left:38px; font-size:14.5px; color:var(--ink-2); min-height:28px}
.ol li::before{
  content:counter(s); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand); font-weight:800; display:grid; place-items:center; font-size:14px;
}
.ol li b{color:var(--ink)}
.note-box{font-size:13.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px}
.note-box[data-s]{border-color:var(--sf); background:var(--ss); color:var(--ink)}
.sec-t{font-size:15px; font-weight:800; letter-spacing:-.005em}
.sec-d{font-size:13.5px; color:var(--ink-2); margin-top:2px}
.fsec{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
.cols2{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .cols2{grid-template-columns:repeat(2,minmax(0,1fr))} .cols3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cols3{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}

/* ---------- ficha do cliente ---------- */
.fh-cards{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .fh-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fh-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--sf); border-radius:var(--r-sm); padding:12px 13px; display:grid; gap:4px; align-content:start}
.fh-card .k{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.fh-card .v{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.fh-card .v b{font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.fh-card .v span{font-size:13px; color:var(--ink-2)}
.fh-card p{font-size:13px; color:var(--ink-2); line-height:1.4}
.why{list-style:none; padding:0; margin:0; display:grid; gap:7px}
.why li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px; align-items:start; font-size:14px; line-height:1.4}
.why li svg{color:var(--s); margin-top:1px}
.pil{display:grid; gap:10px}
.pil-row{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr) 62px; gap:10px; align-items:center; font-size:13.5px}
.pil-row b{font-weight:700; line-height:1.25}
.pil-row small{display:block; color:var(--ink-3); font-size:12px; font-weight:500}
.pil-row .meter i{background:var(--sf)}
.pil-row .pv{text-align:right; font-weight:800}
.pil-row.off{opacity:.65}
@media (max-width:520px){ .pil-row{grid-template-columns:minmax(0,1fr) 54px} .pil-row .meter{grid-column:1/-1; order:3} }
.nl{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px}
.nl-i{flex:0 0 auto; display:grid; justify-items:center; gap:4px; min-width:56px; padding:0; background:none; border:0; color:var(--ink)}
.nl-i small{font-size:11.5px; color:var(--ink-2); font-weight:600}
.so{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.so li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--sf); border-radius:12px; background:var(--surface)}
.so li b{font-size:14px; line-height:1.3; overflow-wrap:anywhere}
.so li small{display:block; font-size:12.5px; color:var(--s); font-weight:700}
.mh{display:grid; gap:8px}
.mh-i{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.mh-i .mline{gap:6px 8px}
.gbtns{display:flex; flex-wrap:wrap; gap:8px}
.edit-form{display:grid; gap:12px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:14px}

/* ---------- registro da reunião ---------- */
.nbtns{display:flex; flex-wrap:wrap; gap:6px}
.nb{
  width:44px; height:48px; border-radius:12px; border:2px solid var(--sf); background:var(--surface); color:var(--s);
  font-weight:800; font-size:18px; display:grid; place-items:center; padding:0;
}
.nb:hover{background:var(--ss)}
.nb[aria-pressed="true"]{background:var(--sf); color:var(--on); box-shadow:0 0 0 3px color-mix(in srgb, var(--sf) 30%, transparent)}
.nb.none{width:auto; padding:0 14px; font-size:14px; border-color:var(--line-2); --s:var(--ink-2); --sf:var(--ink-3)}
.nb.none[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.nkey{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2); margin-top:8px}
.nkey span{display:inline-flex; align-items:center; gap:6px}
.nkey i{width:10px; height:10px; border-radius:3px; background:var(--sf)}
.qline{font-size:14px; color:var(--ink); background:var(--brand-soft); border-radius:var(--r-sm); padding:10px 12px; line-height:1.4}
.qline b{font-weight:800}
.chipset{display:flex; flex-wrap:wrap; gap:8px}
.sgn{
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 13px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface); font-weight:700; font-size:13.5px; color:var(--ink-2);
}
.sgn[data-t="neg"]{--s:var(--bad); --sf:var(--bad-f); --ss:var(--bad-soft)}
.sgn[data-t="pos"]{--s:var(--ok); --sf:var(--ok-f); --ss:var(--ok-soft)}
.sgn[aria-pressed="true"]{background:var(--ss); border-color:var(--sf); color:var(--s)}
.sgn svg{opacity:0; width:0}
.sgn[aria-pressed="true"] svg{opacity:1; width:14px}
details.det{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
details.det > summary{cursor:pointer; padding:12px 14px; font-weight:800; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px}
details.det > summary::-webkit-details-marker{display:none}
details.det > summary::after{content:"+"; font-size:22px; line-height:1; color:var(--brand)}
details.det[open] > summary::after{content:"\2212"}
details.det > .det-in{padding:0 14px 14px; display:grid; gap:14px}
.claude-box{display:grid; gap:10px}
.cx-list{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:13.5px}
.cx-list li{background:var(--warn-soft); color:var(--warn); border-radius:10px; padding:7px 10px; font-weight:600}
.cx-ev{font-size:13px; color:var(--ink-2); font-style:italic; margin-top:6px}
.err-line{font-size:13.5px; font-weight:700; color:var(--bad); background:var(--bad-soft); border-radius:10px; padding:8px 12px}

/* ---------- importação ---------- */
.prev-wrap{max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.prev-tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.prev-tbl th, .prev-tbl td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.prev-tbl th{position:sticky; top:0; background:var(--surface-2); font-size:12px; color:var(--ink-2)}
.prev-tbl td.nm{max-width:220px; overflow-wrap:anywhere; font-weight:700}
.prev-tbl td.wn{color:var(--warn); font-size:12.5px}
.sum-line{font-size:14px; color:var(--ink-2)}
.sum-line b{color:var(--ink)}
label.link-btn{cursor:pointer}
label.link-btn:has(+ input:focus-visible){outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset:2px}

/* ---------- vazio e carregando ---------- */
.empty{
  text-align:center; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r);
  padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty .ico{width:64px; height:64px; border-radius:20px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center}
.empty h3{font-size:19px; font-weight:800}
.empty p{color:var(--ink-2); max-width:52ch; font-size:14.5px}
.empty .btns{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px}
.skel{height:220px; border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(90deg,var(--surface) 0,var(--surface-2) 50%,var(--surface) 100%); background-size:220% 100%; animation:sh 1.5s ease-in-out infinite}
@keyframes sh{from{background-position:120% 0} to{background-position:-120% 0}}

/* ---------- como funciona ---------- */
.steps{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.step .n{width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:800; display:grid; place-items:center; margin-bottom:10px}
.step h3{font-size:16.5px; font-weight:800; margin-bottom:4px}
.step p{font-size:14.5px; color:var(--ink-2)}
.block{margin-top:30px}
.block > .h2{margin-bottom:12px}
.rows{display:grid; gap:10px}
.rowc{display:grid; gap:8px; grid-template-columns:minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
@container pg (min-width:720px){ .rowc{grid-template-columns:200px minmax(0,1fr); align-items:start; gap:16px} }
.rowc p{font-size:14.5px; color:var(--ink-2)}
.rowc p + p{margin-top:6px}
.rowc h3{font-size:15.5px; font-weight:800}
.rowc ul{margin:6px 0 0; padding-left:20px; font-size:14.5px; color:var(--ink-2); display:grid; gap:4px}
.legend-grid{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lgc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:grid; gap:10px; align-content:start}
.lgc h3{font-size:15.5px; font-weight:800}
.lgc ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; align-content:start}
.lgc li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; font-size:14px; color:var(--ink-2); line-height:1.4}
.lgc li .pill{margin-top:1px}
.settings{display:grid; gap:12px; grid-template-columns:minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px}
@container pg (min-width:720px){ .settings{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sources{display:grid; gap:8px; padding:0; margin:0; list-style:none}
.sources li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; font-size:14.5px; color:var(--ink-2)}
.foot-note{margin-top:34px; font-size:13px; color:var(--ink-3); text-align:center}
.code-box{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; overflow-wrap:anywhere; color:var(--ink)}

/* ---------- aviso rápido ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%,24px); opacity:0; pointer-events:none; z-index:90;
  background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:14px; font-weight:700; font-size:14.5px;
  box-shadow:var(--shadow); transition:opacity .25s ease, transform .25s ease; max-width:calc(100% - 32px); text-align:center;
}
@media (min-width:960px){ .toast{bottom:24px} }
.toast.on{opacity:1; transform:translate(-50%,0)}
dialog.dlg .toast{position:sticky; bottom:8px; left:auto; transform:none; margin:0 auto; display:none; width:fit-content; opacity:1; pointer-events:auto}
dialog.dlg .toast.on{display:block}
@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 65%, transparent)} 100%{box-shadow:0 0 0 16px transparent}}
.flash{animation:flash 1.8s ease-out}
body.can-admin .r-only{display:none !important}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- ajustes finais ---------- */
.gap-top{margin-top:10px}
.main{min-width:0}
.ag-item .ag-open{background:none; border:0; padding:0; text-align:left; color:inherit; min-width:0; display:block}
.ag-item .ag-open:hover b{text-decoration:underline}
.ag-item.late{border-color:var(--bad-f)}
.toolbar-info{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:2px 0 14px; font-size:13.5px; color:var(--ink-2)}
.cal-side .btn{width:100%; margin-top:10px}
.pill.lg2{padding:5px 12px 5px 10px; font-size:14px}
.sgn-t{font-size:12.5px; font-weight:800; color:var(--ink-2); margin:2px 0 -2px}
.inline-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.grid-2{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.res-list{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:13.5px}
.res-list li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; align-items:start; color:var(--ink-2)}
.res-list li svg{color:var(--s)}
.res-list li[data-s]{color:var(--ink)}
.tbl-sm{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl-sm th, .tbl-sm td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tbl-sm th{font-size:12px; color:var(--ink-2); background:var(--surface-2)}
.tbl-sm td.num{text-align:right; font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.brand-link{font-size:13px; font-weight:700}
.reason-line{display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.35}
.tone-ico{display:inline-grid; place-items:center}

/* ===== fstyle.html ===== */

/* ===================== FINANCEIRO ===================== */
:root{
  --c4:#1BAF7A; --c5:#C2417A; --fin-in:#126B41; --fin-out:#A52D23;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --c4:#199E70; --c5:#E0679D; --fin-in:#5DD39E; --fin-out:#FF8F84; }
}
:root[data-theme="dark"]{ --c4:#199E70; --c5:#E0679D; --fin-in:#5DD39E; --fin-out:#FF8F84; }
[data-m="med"]{--mc:var(--c1)} [data-m="law"]{--mc:var(--c4)} [data-m="varejo"]{--mc:var(--c2)} [data-m=""]{--mc:var(--idle-f)}

/* troca entre NPS e Financeiro */
.modsw{display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:4px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line)}
.modsw button{min-height:40px; border:0; border-radius:10px; background:none; font-weight:800; font-size:13.5px; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; gap:7px}
.modsw button[aria-pressed="true"]{background:var(--surface); color:var(--brand); box-shadow:0 1px 3px rgba(15,35,28,.14)}
.mtop .modsw{grid-template-columns:auto auto; padding:3px}
body.fin-ok .mtop{flex-wrap:wrap; row-gap:10px}
body.fin-ok .mtop .modsw{order:3; flex:1 1 100%; grid-template-columns:1fr 1fr}
.mtop .brand b{white-space:nowrap}
.mtop .modsw button{min-height:34px; padding:0 10px; font-size:12.5px}
body:not(.fin-ok) .fin-only{display:none !important}
body.mod-fin .nps-mod{display:none !important}
body:not(.mod-fin) .fin-mod{display:none !important}
.snav-t{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:2px 12px 4px}

/* barra de filtros do financeiro */
.fbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 18px; padding:10px 12px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.fbar .mnav{display:flex; align-items:center; gap:6px}
.fbar .mtitle{font-weight:800; font-size:16.5px; min-width:12ch; text-align:center; letter-spacing:-.01em}
.fbar .grow{flex:1 1 auto}
.mchips{display:flex; flex-wrap:wrap; gap:6px}
.mchip{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-size:13px; color:var(--ink-2)}
.mchip i{width:9px; height:9px; border-radius:50%; background:var(--mc, var(--brand))}
.mchip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.live{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-2)}
.live i{width:8px; height:8px; border-radius:50%; background:var(--ok-f); box-shadow:0 0 0 0 color-mix(in srgb, var(--ok-f) 60%, transparent); animation:pulse 2.2s ease-out infinite}
.live.off i{background:var(--idle-f); animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok-f) 55%, transparent)} 100%{box-shadow:0 0 0 9px transparent}}
@media (max-width:640px){ .fbar{gap:8px} .fbar .mnav{width:100%; justify-content:space-between} .mchips{width:100%} .mchip{flex:1 1 0; justify-content:center; padding:0 6px; white-space:nowrap} .mpre{display:none} }

/* dinheiro */
.amt{font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap}
.amt.in{color:var(--fin-in)} .amt.out{color:var(--fin-out)}
.num{font-variant-numeric:tabular-nums}

/* destaque do resultado */
.fhero .hero-num{font-size:clamp(40px,6vw,76px)}
.fhero .hero-num.none{font-size:clamp(36px,5.2vw,56px)}
.fhero .hero-num.neg{color:#FFD2CC}
.hstats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.hstat{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px 12px; min-width:0}
.hstat span{display:block; font-size:12.5px; opacity:.88; font-weight:700}
.hstat b{display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hstat small{display:block; font-size:12px; opacity:.85}
.hbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.hbtns .btn{background:rgba(255,255,255,.14); color:var(--hero-ink); border-color:rgba(255,255,255,.34)}
.hbtns .btn.primary{background:var(--hero-ink); color:var(--hero-a); border-color:var(--hero-ink)}

/* cartões de números */
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@container pg (min-width:700px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} }
@container pg (min-width:1060px){ .kpis{grid-template-columns:repeat(6,minmax(0,1fr))} .kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))} .kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))} }
.kpi{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 13px; display:flex; flex-direction:column; gap:2px;
  color:var(--ink); min-width:0; box-shadow:inset 0 3px 0 var(--sf), var(--shadow); position:relative
}
button.kpi:hover{border-color:var(--sf)}
.kpi .l{font-size:12.5px; font-weight:700; color:var(--ink-2); line-height:1.25; display:flex; align-items:center; gap:6px}
.kpi .v{font-size:23px; font-weight:800; letter-spacing:-.025em; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.kpi .c{font-size:12px; color:var(--ink-3); line-height:1.3}
.kpi .c[data-s]{color:var(--s); font-weight:700}
.kpi[data-s="bad"] .v{color:var(--bad)}
.delta{display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; color:var(--s)}

/* listas de linhas (lançamentos, previstos, contratos) */
.flist{display:grid; gap:8px}
.frow{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--sf); border-radius:14px
}
.frow .fdate{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:48px; padding:5px 4px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); line-height:1.1; text-align:center}
.frow .fdate b{font-size:17px; font-weight:800}
.frow .fdate span{font-size:10.5px; font-weight:700; color:var(--ink-2); text-transform:uppercase}
.frow .fmain{min-width:0}
.frow .ft{font-weight:800; font-size:14.5px; line-height:1.3; overflow-wrap:anywhere}
.frow .fm{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12.5px; color:var(--ink-2); margin-top:2px; align-items:center}
.frow .fend{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.frow .facts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
@container pg (min-width:900px){ .frow .fend{flex-direction:row; align-items:center; gap:14px} .frow .fend .amt{min-width:120px; text-align:right} }
.mtag{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ink-2)}
.mtag i{width:8px; height:8px; border-radius:50%; background:var(--mc)}
@media (max-width:600px){
  .frow{grid-template-columns:auto minmax(0,1fr)}
  .frow .fend{grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center}
}
.fsum{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:2px 0 12px; font-size:13.5px; color:var(--ink-2)}
.fsum b{color:var(--ink)}
.grp-t{margin:18px 0 8px; font-size:13.5px; font-weight:800; color:var(--ink-2); display:flex; align-items:center; gap:10px}
.grp-t::after{content:""; flex:1; height:1px; background:var(--line)}
.grp-t .amt{font-size:13.5px}

/* prestação de contas */
.pc-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px}
.accs{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:900px){ .accs{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start} }
@container pg (min-width:640px) and (max-width:899px){ .accs{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
.acc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:14px; display:grid; gap:12px; min-width:0}
.acc h3{font-size:16.5px; font-weight:800; display:flex; align-items:center; gap:8px}
.acc h3 small{font-size:12.5px; font-weight:700; color:var(--ink-3)}
.acc-sec{display:grid; gap:4px}
.acc-sec > b{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.acc-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; font-size:13.5px; padding:3px 0; border-bottom:1px dashed var(--line)}
.acc-row span{overflow-wrap:anywhere}
.acc-row:last-child{border-bottom:0}
.acc-tot{display:grid; gap:4px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line)}
.acc-tot .acc-row{border:0; font-weight:700}
.acc-tot .acc-row.big{font-size:15.5px; font-weight:800}
.more-btn{justify-self:start}
.split{width:100%; border-collapse:collapse; font-size:14px}
.split th, .split td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums}
.split th:first-child, .split td:first-child{text-align:left}
.split th{font-size:12px; color:var(--ink-2); background:var(--surface-2)}
.split tr.tot td{font-weight:800; border-top:2px solid var(--line-2)}
.split td.big{font-weight:800; font-size:15.5px}
.transfers{display:grid; gap:8px}
.transfer{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line)}
.transfer .who{font-weight:800; overflow-wrap:anywhere}
.transfer .arr{color:var(--brand)}
.transfer .amt{font-size:17px}
@media (max-width:560px){ .transfer{grid-template-columns:minmax(0,1fr) auto; } .transfer .arr{display:none} .transfer .who.to::before{content:"para "; font-weight:600; color:var(--ink-2)} .transfer .amt{grid-column:1 / -1} }
.steps4{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .steps4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.steps4 .step{padding:14px}
.lock{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; padding:5px 11px; border-radius:999px; background:var(--ss); color:var(--s)}

/* contratos */
.ctr{display:grid; grid-template-columns:minmax(0,1fr) 150px 110px 200px 214px; gap:10px 14px; align-items:center; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--mc); border-radius:14px}
.ctr .cn{min-width:0}
.ctr .cn b{display:block; font-weight:800; overflow-wrap:anywhere}
.ctr .cn small{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12.5px; color:var(--ink-2); margin-top:2px}
.ctr .lbl{display:none; font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:3px}
.ctr .money-inp{width:100%}
.ctr .cact .pill{white-space:normal; text-align:center}
.ctr-head{display:grid; grid-template-columns:minmax(0,1fr) 150px 110px 200px 214px; gap:10px 14px; padding:0 14px 6px 18px; font-size:12px; font-weight:800; color:var(--ink-2)}
@container pg (max-width:980px){
  .ctr{grid-template-columns:minmax(0,1fr) 120px minmax(0,1.2fr)} .ctr .cn{grid-column:1 / -1} .ctr .lbl{display:block} .ctr-head{display:none}
  .ctr .cact{grid-column:1 / -1; justify-content:flex-start}
}
@container pg (max-width:560px){
  .ctr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ctr > :nth-child(4){grid-column:1 / -1}
}
.cact{display:flex; gap:6px; justify-content:flex-end}
.money-inp{font-variant-numeric:tabular-nums; text-align:right; min-height:40px; padding:7px 10px}
.flag{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--warn); background:var(--warn-soft); border-radius:999px; padding:2px 9px}
.banner{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 14px; border-radius:var(--r-sm); background:var(--ss); border:1px solid var(--sf); margin:0 0 14px; font-size:14px}
.banner .grow{flex:1 1 260px}
.banner b{font-weight:800}

/* gráficos do financeiro */
svg.bc{width:100%; height:auto; overflow:visible}
svg.bc text{font-family:inherit; font-size:11.5px; fill:var(--ink-3)}
svg.bc .yl{text-anchor:end} svg.bc .xl{text-anchor:middle}
svg.bc .grid line{stroke:var(--grid); stroke-width:1}
svg.bc .zero line{stroke:var(--axis); stroke-width:1.5}
svg.bc .b1{fill:var(--c1)} svg.bc .b2{fill:var(--c2)} svg.bc .b4{fill:var(--c4)} svg.bc .b5{fill:var(--c5)} svg.bc .b7{fill:var(--c7)}
svg.bc .bgh{fill:var(--track)}
svg.bc .ln{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
svg.bc .ln.l1{stroke:var(--c1)} svg.bc .ln.l2{stroke:var(--c2)} svg.bc .ln.l7{stroke:var(--c7)} svg.bc .ln.l4{stroke:var(--c4)}
svg.bc .ln.dash{stroke-dasharray:5 5}
svg.bc .dt{fill:var(--ink); stroke:var(--surface); stroke-width:2}
svg.bc .dt.l1{fill:var(--c1)} svg.bc .dt.l2{fill:var(--c2)} svg.bc .dt.l7{fill:var(--c7)} svg.bc .dt.l4{fill:var(--c4)}
svg.bc .vlab{font-size:12.5px; font-weight:800; fill:var(--ink)}
svg.bc .hit{fill:transparent}
svg.bc .hit:focus-visible{outline:none}
svg.bc .hov{stroke:var(--ink-3); stroke-width:1; opacity:0}
svg.bc .hov.on{opacity:.6}
svg.bc .band{fill:var(--c1); opacity:.1}
svg.bc .wf-up{fill:var(--c1)} svg.bc .wf-down{fill:var(--c2)} svg.bc .wf-tot{fill:var(--ink-2)}
svg.bc .conn{stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3}
.lgd{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13px; color:var(--ink-2)}
.lgd span{display:inline-flex; align-items:center; gap:7px}
.lgd i{width:12px; height:12px; border-radius:3px; background:var(--k)}
.lgd i.ln{height:3px; border-radius:2px}
.k1{--k:var(--c1)} .k2{--k:var(--c2)} .k4{--k:var(--c4)} .k5{--k:var(--c5)} .k7{--k:var(--c7)} .kink{--k:var(--ink)} .kidle{--k:var(--idle-f)}
.hb-bar.k1{background:var(--c1)} .hb-bar.k2{background:var(--c2)} .hb-bar.k4{background:var(--c4)} .hb-bar.k5{background:var(--c5)} .hb-bar.k7{background:var(--c7)}
.hb-bar.km{background:var(--mc)}
.stackbar{display:flex; gap:2px; height:16px; border-radius:6px; overflow:hidden; background:var(--track)}
.stackbar i{display:block; height:100%; min-width:2px; background:var(--k)}
.spark{display:block; width:100%; height:34px}
.spark path{fill:none; stroke:var(--c1); stroke-width:2}
.spark circle{fill:var(--c1)}

/* saúde financeira */
.checks{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.checks li{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:start; font-size:14px; line-height:1.4}
.checks li svg{color:var(--s); margin-top:1px}
.checks li b{display:block; font-weight:800}
.checks li small{display:block; font-size:12.5px; color:var(--ink-2)}
.checks li .amt{font-size:13.5px; padding-top:1px}

/* comercial: quadro por etapa */
.kan{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:12px; overflow-x:auto; padding:2px 2px 10px}
.kcol{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; min-width:0}
.kcol h3{font-size:14.5px; font-weight:800; display:flex; align-items:center; gap:8px}
.kcol h3 .n{margin-left:auto; font-size:12.5px; min-width:24px; height:24px; border-radius:999px; background:var(--surface); border:1px solid var(--line-2); display:grid; place-items:center}
.kcol .ksum{font-size:12.5px; color:var(--ink-2)}
.kcard{display:grid; gap:6px; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); text-align:left; color:var(--ink); width:100%}
.kcard b{font-weight:800; overflow-wrap:anywhere}
.kcard small{font-size:12.5px; color:var(--ink-2)}
.kmove{display:flex; gap:6px; justify-content:space-between}

/* grades de preenchimento (operação, equipe, orçamento) */
.gwrap{overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.gtbl{border-collapse:separate; border-spacing:0; font-size:13.5px; min-width:100%}
.gtbl th, .gtbl td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; background:var(--surface)}
.gtbl thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); font-size:12px; color:var(--ink-2); min-width:110px; line-height:1.25}
.gtbl .g0{position:sticky; left:0; z-index:1; min-width:170px; max-width:220px; font-weight:700; border-right:1px solid var(--line)}
.gtbl thead .g0{z-index:3}
.gtbl tr.gtot td{font-weight:800; background:var(--surface-2)}
.gin{width:100%; min-width:84px; min-height:36px; padding:6px 8px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface); text-align:right; font-variant-numeric:tabular-nums}
.gin:focus-visible{border-color:var(--brand)}
.gin.saved{border-color:var(--ok-f)}

/* riscos */
.matrix{display:grid; grid-template-columns:28px repeat(5,minmax(0,1fr)); gap:4px; max-width:520px}
.matrix .ax{font-size:11.5px; font-weight:800; color:var(--ink-3); display:grid; place-items:center}
.matrix .cell{min-height:46px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:15px; background:var(--ss); color:var(--s); border:1px solid color-mix(in srgb, var(--sf) 40%, transparent)}
.matrix .cell.zero{background:var(--surface-2); color:var(--ink-3); font-weight:600; border-color:var(--line)}
.mx-cap{font-size:12.5px; color:var(--ink-2); margin-top:6px}

/* rotina */
.rot{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:900px){ .rot{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
.rot-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:grid; gap:8px}
.rot-box h3{font-size:15.5px; font-weight:800; display:flex; align-items:center; gap:8px}
.rot-box h3 .meter{flex:1 1 auto; max-width:140px; height:8px}
.chk{display:flex; align-items:flex-start; gap:10px; font-size:14px; padding:6px 4px; border-radius:8px; cursor:pointer}
.chk:hover{background:var(--surface-2)}
.chk input{width:20px; height:20px; accent-color:var(--brand); margin:1px 0 0; flex:0 0 auto}
.chk.done span{color:var(--ink-3); text-decoration:line-through}

/* indicadores */
.isec{margin:22px 0 10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
.isecd > summary{list-style:none; cursor:pointer; border-radius:12px}
.isecd > summary::-webkit-details-marker{display:none}
.isecd > summary .chev{margin-left:auto; align-self:center; display:inline-flex; color:var(--ink-3); transition:transform .15s}
.isecd[open] > summary .chev{transform:rotate(90deg)}
.isecd > summary:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
@media (max-width:640px){ .isecd{border-bottom:1px solid var(--line)} .isecd > summary{margin:0; padding:16px 2px; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px} .isecd > summary h2{grid-column:1} .isecd > summary span{grid-column:1} .isecd > summary .chev{grid-column:2; grid-row:1 / 3} .isecd[open] > .igrid{padding-bottom:16px} }
.isec h2{font-size:19px; font-weight:800; letter-spacing:-.01em}
.isec span{font-size:13px; color:var(--ink-2)}
.igrid{display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start}
.ind details.det > summary{font-size:13px; font-weight:700; min-height:38px; padding:8px 12px; color:var(--ink-2)}
.ind details.det > summary::after{font-size:18px}
.ov-grid.top{align-items:start}
#navFin .nav-btn{min-height:40px}
#navFin{gap:2px}
@container pg (min-width:700px){ .igrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container pg (min-width:1100px){ .igrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ind{display:grid; gap:6px; align-content:start; padding:12px 13px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:inset 3px 0 0 var(--sf); min-width:0}
.ind .it{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.ind .it b{font-size:14.5px; font-weight:800; line-height:1.3}
.ind .iv{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.ind[data-s="bad"] .iv{color:var(--bad)} .ind[data-s="ok"] .iv{color:var(--ok)} .ind[data-s="warn"] .iv{color:var(--warn)}
.ind .iv.none{font-size:14px; font-weight:700; color:var(--ink-3)}
.ind .id{font-size:13px; color:var(--ink-2); line-height:1.4}
.ind .imeta{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; color:var(--ink-3)}
.ind ol, .ind ul.il{margin:0; padding-left:18px; font-size:13px; display:grid; gap:2px}
.ind ul.il{list-style:none; padding:0}
.ind ul.il li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; border-bottom:1px dashed var(--line); padding:2px 0}
.ind ul.il li span:last-child{font-weight:700; font-variant-numeric:tabular-nums; text-align:right}
.prio{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); background:var(--brand-soft); border-radius:999px; padding:2px 8px; white-space:nowrap}
.ibar{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13.5px; color:var(--ink-2); margin:4px 0 6px}
.ibar b{color:var(--ink)}

/* simulador e premissas */
.sim{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:900px){ .sim{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start} }
.sim-out{display:grid; gap:8px}
.sim-line{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:baseline; font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line)}
.sim-line b{font-weight:800}
.sim-line .delta{min-width:9ch; justify-content:flex-end}
.tax{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .tax{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ficha do sócio */
.sgrid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:900px){ .sgrid{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start} }
.scard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; display:grid; gap:10px; min-width:0}
.scard .sn{display:flex; align-items:center; gap:10px}
.scard .av{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:800; background:var(--brand-soft); color:var(--brand); font-size:16px; flex:0 0 auto}
.scard h3{font-size:17px; font-weight:800}
.scard .big{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.txt-box{white-space:pre-wrap; font-size:14px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; min-height:44px}

/* agenda financeira */
[data-e="receber"]{--e:var(--c1)} [data-e="pagar"]{--e:var(--c2)} [data-e="obrig"]{--e:var(--c7)} [data-e="renovf"]{--e:var(--c4)} [data-e="rotina"]{--e:var(--idle-f)}

/* análise do Claude */
.ai-out{white-space:pre-wrap; font-size:14.5px; line-height:1.55; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; min-height:60px}
.mais-list{display:grid; gap:6px}
.mais-list .nav-btn{border:1px solid var(--line); background:var(--surface)}
@media (max-width:640px){ .fpage .seg.views{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))} .fpage .seg.views button{flex-direction:row; min-height:44px; gap:6px; white-space:normal; text-align:left; line-height:1.15; font-size:13px; justify-content:flex-start; padding:0 10px} }

/* ===================== explicações ===================== */
.kpi .kx{display:none}
body.explica .kpi .kx{display:block; font-size:12px; line-height:1.35; color:var(--ink-2); border-top:1px dashed var(--line); margin-top:6px; padding-top:6px}
.exp-tog{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px 0 8px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-size:13px; color:var(--ink-2)}
.exp-tog .sw{width:30px; height:18px; border-radius:999px; background:var(--track); position:relative; flex:0 0 auto; transition:background .15s}
.exp-tog .sw i{position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s}
.exp-tog[aria-pressed="true"]{color:var(--ink)}
.exp-tog[aria-pressed="true"] .sw{background:var(--brand)}
.exp-tog[aria-pressed="true"] .sw i{left:14px}
.fbar .tlbl{min-width:0; text-align:left}
.gloss{display:grid; gap:4px 18px; grid-template-columns:minmax(0,1fr); margin:10px 0 0}
.gloss dt{font-weight:800; margin-top:8px}
.gloss dd{margin:0; font-size:14px; color:var(--ink-2); line-height:1.45}
.gloss dd .hint{display:block; margin-top:2px}
@container pg (min-width:900px){ .gloss{grid-template-columns:220px minmax(0,1fr)} .gloss dt{margin-top:0} }

/* ===================== HOJE ===================== */
.today-card{display:grid; gap:16px}
.td-head{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:flex-start}
.td-head > div:first-child{flex:1 1 320px; min-width:0}
.td-date{font-size:clamp(24px,3.2vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:4px 0 4px}
.td-big{display:grid; gap:2px; padding:12px 16px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); min-width:0; flex:0 1 300px}
.td-big span{font-size:12.5px; font-weight:800; color:var(--ink-2)}
.td-big b{font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--fin-in)}
.td-big b.neg{color:var(--fin-out)}
.td-big small{font-size:12px; color:var(--ink-3); line-height:1.35}
.td-meters{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .td-meters{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tdm{display:grid; gap:6px}
.tdm-t{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; font-size:14px}
.tdm-t span{font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:700}
.tdm small{font-size:12.5px; color:var(--ink-2)}
.meter.m-in i{background:var(--c1)} .meter.m-out i{background:var(--c2)} .meter.m-brand i{background:var(--brand)}
.setup-card{display:grid; gap:12px; border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); background:linear-gradient(0deg, var(--surface), color-mix(in srgb, var(--brand-soft) 60%, var(--surface)))}
.su-row{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between}
.su-txt{flex:1 1 360px; min-width:0}
.su-txt h2{font-size:19px; font-weight:800; letter-spacing:-.01em}
.su-txt p{font-size:14px; color:var(--ink-2); margin-top:4px; max-width:70ch}
.su-act{display:grid; gap:4px; justify-items:start}
.su-act small{font-size:12px; color:var(--ink-3)}
svg.bc .prev{opacity:.38}
svg.bc .today-l{stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3 3}
.lgd i.lprev{opacity:.38}
.day-pick{display:grid; gap:6px; margin-top:12px; padding:10px 12px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); font-size:14px}
.day-items{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.day-items li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-bottom:1px dashed var(--line); padding:3px 0}
.day-items li:last-child{border-bottom:0}

/* ===================== ASSISTENTE ===================== */
#fdWiz .dlg-top > .grow{flex:1 1 auto; min-width:0}
.wz-top{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:800; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em}
.wz-bar{height:8px; margin:8px 0 12px}
.wz-bar i{background:var(--brand)}
.wz-body{display:grid; gap:16px}
.wz-q{display:grid; gap:8px}
.wz-q > b{font-size:15px}
.wz-days{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.wz-day{min-width:52px; min-height:48px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); font-weight:800; font-size:17px; color:var(--ink)}
.wz-day:hover{border-color:var(--brand)}
.wz-day[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.wz-dayin{width:120px; min-height:48px}
.wz-chips{display:flex; flex-wrap:wrap; gap:8px}
.wz-chip{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; min-height:44px; padding:6px 12px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-size:13.5px; color:var(--ink); text-align:left}
.wz-chip span{font-size:12px; color:var(--ink-2); font-weight:700}
.wz-chip b{font-variant-numeric:tabular-nums}
.wz-chip:hover{border-color:var(--brand)}
.wz-chip[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.wz-money{max-width:260px; min-height:48px; font-size:18px}
.wz-known{font-size:15px; font-weight:700}
.wz-big{font-size:34px; font-weight:800; letter-spacing:-.02em}
.wz-table{display:grid; gap:6px}
.wz-tr{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 84px 92px; gap:8px; align-items:center}
.wz-th{font-size:12px; font-weight:800; color:var(--ink-2)}
.wz-n{font-weight:700; overflow-wrap:anywhere}
.wz-tr .inp{min-height:42px}
.wz-ck{display:flex; justify-content:center}
.wz-ck input{width:22px; height:22px; accent-color:var(--brand)}
@media (max-width:560px){
  .wz-tr{grid-template-columns:minmax(0,1fr) 76px 56px}
  .wz-tr > :nth-child(2){grid-column:1 / -1; order:4}
  .wz-th > :nth-child(2){display:none}
  .wz-th > :nth-child(4){font-size:0; text-align:center}
  .wz-th > :nth-child(4)::after{content:"Auto"; font-size:12px}
  .wz-tr:not(.wz-th){padding:8px 0; border-bottom:1px dashed var(--line)}
}

/* ===================== PAINÉIS ===================== */
.dtabs{margin-bottom:6px}
@media (min-width:641px){ .dtabs{display:flex; flex-wrap:wrap} }
.dash-sub{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin:6px 0 14px}
.dash-sub .view-help{margin:0; flex:1 1 360px}
.seg.sm button{min-height:36px; font-size:13px; padding:0 10px}

/* ===================== CALCULADORA ===================== */
.calc-card{display:grid; gap:12px}
.calc-l{display:block}
.calc-in{width:100%; min-height:56px; font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; padding:10px 14px}
.calc-res{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
.calc-res b{font-size:clamp(28px,4vw,38px); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.calc-res span{font-size:13px; color:var(--ink-2)}
.calc-keys{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.ck{min-height:50px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); font-size:19px; font-weight:800; color:var(--ink)}
.ck:hover{border-color:var(--brand)}
.ck.op{background:var(--surface-2); color:var(--brand)}
.ck.txt{font-size:14px}
.ck.eq{grid-column:span 4; background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.hist-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; width:100%; text-align:left; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px}
.hist-row span{overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.hist-row b{font-variant-numeric:tabular-nums; white-space:nowrap}
.hist-row small{color:var(--ink-2); font-size:12.5px; text-align:right}
.hist-row:hover{border-color:var(--brand)}
.cc-grid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
@container pg (min-width:1200px){ .cc-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cc-card{display:grid; gap:10px; align-content:start}
.cc-card .panel-head{margin-bottom:0}
.cc-body{display:grid; gap:12px}
.cc-f{display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-f .fld{min-width:0}
.cc-f .fld span{font-size:12.5px}
@media (max-width:420px){ .cc-f{grid-template-columns:minmax(0,1fr)} }
.cc-out{display:grid; gap:4px; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line)}
.cc-bl{font-size:12.5px; font-weight:800; color:var(--ink-2)}
.cc-big{font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cc-lines{margin:2px 0 6px; padding-left:18px; font-size:13.5px; color:var(--ink-2); display:grid; gap:2px}
.cc-src{font-size:12px; color:var(--ink-3)}
.cc-src a{color:var(--ink-2)}

/* ===== quem está usando ===== */
.eu-chip{display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:6px 10px; margin-bottom:8px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-weight:800; font-size:13.5px; text-align:left}
.eu-chip small{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-3)}
.eu-chip:hover{border-color:var(--brand)}
.autor{font-size:11.5px; color:var(--ink-3); font-style:italic}
.ftag{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.clip{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:var(--brand)}

/* ===== lançamentos por bloco ===== */
.blk-sec{margin:22px 0 8px; font-size:15px; font-weight:800; letter-spacing:-.01em}
.blk{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:8px; overflow:hidden}
.blk[data-s="bad"]{border-color:var(--bad-f)}
.blk > summary{list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; gap:10px; align-items:center; padding:12px 14px; cursor:pointer; min-height:56px}
.blk > summary::-webkit-details-marker{display:none}
.blk > summary .chev{display:inline-flex; color:var(--ink-3); transition:transform .2s ease}
.blk[open] > summary .chev{transform:rotate(90deg)}
.blk[data-s="none"] > summary{opacity:.72}
.blk-ico{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--brand-soft); color:var(--brand)}
.blk-n{min-width:0; display:flex; flex-direction:column}
.blk-n b{font-size:14.5px; font-weight:800}
.blk-n small{font-size:12.5px; color:var(--ink-2)}
.blk-v{display:flex; flex-direction:column; align-items:flex-end}
.blk-v b{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums}
.blk-v small{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.blk > .meter{height:4px; border-radius:0; margin:0 14px}
.blk-body{padding:10px 14px 14px; display:grid; gap:8px}
@container pg (max-width:560px){ .blk > summary{grid-template-columns:auto minmax(0,1fr) auto; } .blk > summary .blk-v{grid-column:2 / 3; align-items:flex-start} .blk > summary .icon-btn{grid-row:1} }
.stackbar.big{height:22px; border-radius:8px}
.kb0{--k:var(--c1)} .kb1{--k:var(--c2)} .kb2{--k:var(--c4)} .kb3{--k:var(--c5)} .kb4{--k:var(--c7)} .kb5{--k:var(--idle-f)}
.blk-lgd{display:flex; flex-wrap:wrap; gap:6px}
.blk-chip{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--ink-2)}
.blk-chip i{width:10px; height:10px; border-radius:3px; background:var(--k)}
.blk-chip b{color:var(--ink); font-variant-numeric:tabular-nums}
.cards-row{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card-mini{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-2); text-align:left; color:var(--ink)}
.card-mini:hover{border-color:var(--brand)}
.card-mini b{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums}
.card-mini small{font-size:12.5px; color:var(--ink-2)}
.card-mini.wide{width:100%}
.cm-t{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13.5px}
.cat-blk{padding:10px 0; border-bottom:1px solid var(--line)}
.cat-blk:last-child{border-bottom:0}
.cat-h{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.cat-h b{flex:1; font-size:14px}
.cat-h .blk-ico{width:28px; height:28px}
.cat-chips{display:flex; flex-wrap:wrap; gap:6px}
.cat-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; min-height:32px; border-radius:999px; background:var(--surface-2); border:1px solid transparent; font-size:12.5px; font-weight:700; color:var(--ink)}
.cat-chip b{font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cat-chip.custom{border-color:var(--brand); background:var(--brand-soft)}
.cat-chip.off{opacity:.55; text-decoration:line-through}
.cat-chip:disabled{cursor:default; color:var(--ink)}

/* ===== lançamento rápido ===== */
.qk{gap:16px}
.qk-step{display:grid; gap:10px}
.qk-t{font-size:14.5px; font-weight:800}
.qk-two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.qk-big{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:74px; border-radius:var(--r-sm); border:1.5px solid var(--line-2); background:var(--surface); font-weight:800; font-size:15px; color:var(--ink)}
.qk-big.in span{color:var(--fin-in)} .qk-big.out span{color:var(--fin-out)}
.qk-big[aria-pressed="true"].in{border-color:var(--fin-in); background:var(--ok-soft)}
.qk-big[aria-pressed="true"].out{border-color:var(--fin-out); background:var(--bad-soft)}
.qk-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px}
.qk-tile{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px; min-height:66px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); font-weight:800; font-size:13px; line-height:1.25; color:var(--ink); text-align:left}
.qk-tile span:first-child{color:var(--brand)}
.qk-tile:hover{border-color:var(--brand)}
.qk-tile[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.qk-tile[aria-pressed="true"] span:first-child{color:var(--on-brand)}
.qk-val{font-size:20px; font-weight:800}
.qk-q{display:grid; gap:8px}
.qk-l{font-size:13px; font-weight:800; color:var(--ink-2)}
.wz-chip.sm{min-height:36px; padding:4px 10px; font-size:12.5px}

/* ===== histórico ===== */
.hlist{display:grid; gap:6px; margin-top:6px}
.hrow{display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; padding:10px 12px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--idle-f)}
.hrow[data-a="criou"]{border-left-color:var(--ok-f)}
.hrow[data-a="apagou"]{border-left-color:var(--bad-f)}
.h-time{font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); padding-top:1px}
.h-main{min-width:0; display:grid; gap:4px}
.h-t{font-size:14px; line-height:1.4; overflow-wrap:anywhere}
.h-meta{display:flex; gap:6px; flex-wrap:wrap}
.h-det{display:grid; gap:2px}
.h-ch{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:12.5px; color:var(--ink-2)}
.h-old{text-decoration:line-through; color:var(--ink-3)}
.h-new{color:var(--ink); font-weight:700}
.h-arr{display:inline-flex; color:var(--ink-3)}

/* ===== período ===== */
.fbar .pseg{display:inline-flex}
.pertbl .link-btn{white-space:nowrap; padding-left:0; text-align:left; color:var(--brand)}
.pertbl td.tot, .pertbl tr.tot td{font-weight:800}
.pertbl tr.tot td{border-top:2px solid var(--line-2)}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.neg{color:var(--fin-out)}
.dre-tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.dre-tbl th, .dre-tbl td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.dre-tbl th{font-size:12px; font-weight:800; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
.dre-tbl th.num, .dre-tbl td.num{text-align:right}
.dre-tbl td small{display:block; font-size:11.5px; color:var(--ink-3); font-weight:500}
.dre-tbl tr.tot td{font-weight:800; background:var(--surface-2)}
.dre-tbl tr.big td{font-size:15px; background:var(--brand-soft)}
.dre-tbl tr.sub td{color:var(--ink-2); font-size:12.5px}
.dre-tbl tr.sub td:first-child{padding-left:26px}
.dre-tbl tr.sep td{border-bottom:0; padding-top:16px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3)}
.dre-tbl td.av{color:var(--ink-3); font-size:12px}
.dre-tbl .tog{border:0; background:none; padding:0; font:inherit; color:inherit; display:inline-flex; align-items:center; gap:4px; text-align:left}
.met-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.met{display:grid; gap:6px; padding:14px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--sf)}
.met-h{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.met-h b{font-size:13.5px; font-weight:800}
.met-h span{font-size:11.5px; font-weight:800; color:var(--ink-3); letter-spacing:.04em}
.met-v{font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.met-n{font-size:13px; line-height:1.45; color:var(--ink)}
.met-c{font-size:12px; color:var(--ink-3); line-height:1.4}
.met-c b{color:var(--ink-2)}

/* ===== diagnóstico ===== */
.ov-k{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--s)}
.dg-hero{display:grid; gap:10px; padding:18px; border-radius:var(--r); background:var(--ss); border:1px solid var(--sf)}
.dg-hero h2{font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--s)}
.dg-hero p{font-size:14.5px; line-height:1.5}
.dg-need{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.dg-n{padding:14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line)}
.dg-n b{display:block; font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--brand)}
.dg-n span{display:block; font-weight:800; font-size:13.5px}
.dg-n small{display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px}
.al-list{display:grid; gap:8px}
.al{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--sf)}
.al .tone-ico{color:var(--s)}
.al b{display:block; font-size:14px; font-weight:800}
.al p{font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:2px}
.al .al-do{color:var(--ink); font-weight:700}
.al .al-m{display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; align-items:center; font-size:12px}
.al .al-m a{color:var(--ink-2)}
.al ul{margin:4px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-2)}

/* ===== cobranças ===== */
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.cal-wd{font-size:11px; font-weight:800; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:4px 0}
.cal-d{min-height:92px; padding:6px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:3px; min-width:0}
.cal-d.out{background:transparent; border-color:transparent}
.cal-d.hoje{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.cal-d .dn{font-size:12px; font-weight:800; color:var(--ink-2)}
.cob-ev{display:block; width:100%; padding:3px 6px; border-radius:6px; border:0; font-size:11.5px; font-weight:800; text-align:left; line-height:1.25; background:var(--ss); color:var(--s); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cob-ev small{font-weight:700; opacity:.85}
.cal-lgd{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-2); margin:8px 0}
.cal-lgd span{display:inline-flex; align-items:center; gap:6px}
.cal-lgd i{width:10px; height:10px; border-radius:3px; background:var(--sf)}
@container pg (max-width:620px){ .cal-d{min-height:56px; padding:4px} .cob-ev{font-size:0; padding:0; height:7px; border-radius:4px; background:var(--sf)} .cob-ev small{display:none} }
.parc-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:6px; margin-top:8px}
.parc{padding:8px; border-radius:10px; background:var(--ss); border:1px solid var(--sf); font-size:12px}
button.parc{cursor:pointer; text-align:left; color:var(--ink); font-weight:700; white-space:nowrap}
.dre-tbl button.parc{padding:3px 8px}
.parc b{display:block; font-size:13.5px; color:var(--s); font-variant-numeric:tabular-nums}

/* cores da Google Agenda, iguais às do Google */
.gcor{display:inline-flex; align-items:center; gap:5px; margin-left:8px; font-size:11.5px; font-weight:700; color:var(--ink-2)}
.gcor::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--gc)}
[data-c="11"]{--gc:#D50000} [data-c="5"]{--gc:#F6BF26} [data-c="6"]{--gc:#F4511E} [data-c="9"]{--gc:#3F51B5} [data-c="8"]{--gc:#616161}

/* ===== relatórios ===== */
.rel-opts{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rel-opts .check-line{width:100%}
.rel-prev{border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; background:var(--surface); font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; max-height:480px; overflow:auto}

/* ===== dicionário ===== */
.dic{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dic-it{padding:14px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); display:grid; gap:6px}
.dic-it h3{font-size:15px; font-weight:800; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.dic-it h3 span{font-size:12px; font-weight:800; color:var(--brand); letter-spacing:.04em}
.dic-it p{font-size:13.5px; line-height:1.5}
.dic-it .ex{font-size:13px; color:var(--ink-2); background:var(--surface-2); border-radius:10px; padding:8px 10px}
.dic-letra{grid-column:1 / -1; font-size:13px; font-weight:800; color:var(--ink-3); margin-top:6px}

/* ===== checklist 100% ===== */
.ck-hero{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; padding:16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.ck-ring{width:84px; height:84px}
.ck-ring circle{fill:none; stroke-width:9}
.ck-ring .bg{stroke:var(--track)}
.ck-ring .fg{stroke:var(--brand); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%}
.ck-ring text{font-size:20px; font-weight:800; fill:var(--ink); text-anchor:middle; dominant-baseline:central}
.ck-list{display:grid; gap:8px}
.ck{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line)}
.ck .tone-ico{color:var(--s)}
.ck b{display:block; font-size:14px}
.ck p{font-size:12.5px; color:var(--ink-2); line-height:1.45}
.ck .why{color:var(--ink-3)}
@container pg (max-width:560px){ .ck{grid-template-columns:auto minmax(0,1fr)} .ck .btn{grid-column:2} }

/* ===== ztheme.html ===== */

/* ===================================================================
   CACTUS OS: visual escuro das imagens de referência.
   Um tema só, escolhido de propósito: fundo quase preto com toque verde,
   cartões com cor própria, menu lateral com a logo da CactusMed.
   Os tokens daqui vencem os anteriores em qualquer configuração de tema.
   =================================================================== */
:root:not(.zz1):not(.zz2){
  --bg:#070B0A; --surface:#0E1412; --surface-2:#141B18; --surface-3:#19221E;
  --ink:#EEF4F0; --ink-2:#A9B8B0; --ink-3:#7F8F88;
  --line:#1C2622; --line-2:#2A3631;
  --brand:#22C55E; --brand-2:#16A34A; --brand-soft:#0F2A1C; --on-brand:#03140A;
  --hero-a:#0B2A1B; --hero-b:#11402A; --hero-ink:#EEF4F0; --lime:#B9F27C;
  --ok:#4ADE80; --ok-soft:#0F2A1C; --ok-f:#22C55E; --on-ok-f:#03140A;
  --warn:#FBBF24; --warn-soft:#2B2110; --warn-f:#F59E0B; --on-warn-f:#1F1500;
  --bad:#F87171; --bad-soft:#2C1214; --bad-f:#EF4444; --on-bad-f:#FFFFFF;
  --idle:#9FB1C2; --idle-soft:#141E26; --idle-f:#64748B; --on-idle-f:#FFFFFF;
  --lg-ok:#4ADE80; --lg-warn:#FBBF24; --lg-bad:#F87171;
  --track:#1A2420;
  --c1:#22C55E; --c2:#EF4444; --c4:#3B82F6; --c5:#F59E0B; --c7:#A855F7;
  --h-blue:#3B82F6; --h-purple:#A855F7; --h-teal:#14B8A6; --h-amber:#F59E0B; --h-green:#22C55E; --h-red:#EF4444; --h-pink:#EC4899;
  --fin-in:#4ADE80; --fin-out:#F87171;
  --grid:#1A2420; --axis:#2A3631;
  --shadow:none;
  --r:14px; --r-sm:10px; --side:248px;
  color-scheme:dark;
}
body{background:var(--bg); font-size:15px}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(900px 500px at 12% -10%, rgba(34,197,94,.08), transparent 60%), radial-gradient(700px 400px at 100% 0%, rgba(59,130,246,.05), transparent 60%)}
[data-m="med"]{--mc:#22C55E} [data-m="law"]{--mc:#3B82F6} [data-m="varejo"]{--mc:#A855F7}

/* ---------- menu lateral ---------- */
.side-logo{padding:2px 6px 6px}
.side-logo img{width:190px; height:auto; display:block}
.side .snav{gap:2px}
.side .snav + .snav{margin-top:2px}
.nav-btn{min-height:40px; gap:12px; padding:0 12px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--ink-2); border:1px solid transparent; position:relative}
.nav-btn svg{color:var(--ink-2)}
.nav-btn:hover{background:var(--surface-2); color:var(--ink)}
.nav-btn[aria-current="page"]{background:rgba(34,197,94,.12); color:#EAFBEF; border-color:var(--brand)}
.nav-btn[aria-current="page"] svg{color:var(--brand)}
.nav-btn .nbadge{height:20px; min-width:22px; font-size:11.5px; font-weight:800; background:var(--surface-3); border-color:var(--line-2)}
.nav-btn .nbadge[data-s="bad"]{background:var(--bad-f); color:#fff; border-color:var(--bad-f)}
.nav-btn .nbadge[data-s="warn"]{background:var(--warn-f); color:var(--on-warn-f); border-color:var(--warn-f)}
.nav-sub{display:grid; gap:2px; padding-left:16px; margin:2px 0 4px; border-left:1px solid var(--line-2); margin-left:20px}
.nav-sub .nav-btn{min-height:36px; font-size:13.5px}
body.mod-fin .nav-sub{display:none}
.nav-more > summary{list-style:none; cursor:pointer}
.nav-more > summary::-webkit-details-marker{display:none}
.nav-more[open] > summary{color:var(--ink)}
.nav-more > .nav-btn{padding-left:28px; font-size:13.5px; min-height:36px}
.side{background:#090E0C; border-right:1px solid var(--line); gap:14px; padding:20px 12px 18px}
.side-foot{gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.side-brand{display:grid; gap:2px; padding:4px 6px}
.side-brand img{width:150px; height:auto; margin-bottom:4px}
.side-brand small{font-size:11.5px; color:var(--ink-3)}
.side-brand p{font-size:13px; color:var(--ink-2); line-height:1.35}
.side-today{font-size:12px; color:var(--ink-3); padding:0 6px}
.side .brand-link{padding:0 6px; font-size:12.5px}
.eu-chip{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 10px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); font-weight:800; font-size:13.5px}
.eu-chip small{margin-left:auto; font-size:11.5px; color:var(--ink-3)}
.uav{flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--avc, var(--h-blue)); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--avc, var(--h-blue))}
.uav.sm{width:24px; height:24px; font-size:10px; box-shadow:none}
.uav[data-i="0"]{--avc:#3B82F6} .uav[data-i="1"]{--avc:#22C55E} .uav[data-i="2"]{--avc:#A855F7} .uav[data-i="3"]{--avc:#F59E0B} .uav[data-i="4"]{--avc:#EC4899}

/* ---------- barra do topo ---------- */
.mtop{display:none !important}
.topbar{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; display:flex; align-items:center; gap:14px; padding:10px 16px; background:rgba(9,14,12,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.tb-logo img{width:34px; height:auto; display:block}
.tb-title{display:flex; flex-direction:column; min-width:0; line-height:1.2; flex:0 1 auto; max-width:330px}
.tb-title b{font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap}
.tb-title small{font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-title .tb-today{display:none}
.tb-search{position:relative; flex:1 1 320px; min-width:0; max-width:520px; margin-left:auto}
.tb-s{display:flex; align-items:center; gap:8px; height:40px; padding:0 10px 0 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line-2); color:var(--ink-3)}
.tb-s:focus-within{border-color:var(--brand)}
.tb-s input{flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink); font-size:14px; height:100%}
.tb-s input::placeholder{color:var(--ink-3)}
.tb-s kbd{font:inherit; font-size:11px; font-weight:700; color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:1px 6px; white-space:nowrap}
.gs-res{position:absolute; left:0; right:0; top:46px; max-height:420px; overflow:auto; background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.5); padding:6px; display:grid; gap:2px}
.gs-it{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; text-align:left; color:var(--ink); width:100%}
.gs-it:hover, .gs-it[aria-selected="true"]{background:var(--surface-3)}
.gs-it b{display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gs-it small{display:block; font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gs-it .gi{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--surface-3); color:var(--brand)}
.gs-it .gt{font-size:11px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.gs-vazio{padding:12px; font-size:13.5px; color:var(--ink-3)}
.tb-per{position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; cursor:pointer}
.tb-per svg{color:var(--ink-2)}
.tb-per input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.tb-bell{position:relative; width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); display:grid; place-items:center; color:var(--ink-2); flex:0 0 auto}
.tb-bell:hover{color:var(--ink)}
.tb-n{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--bad-f); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center}
.tb-users{display:flex; align-items:center; gap:12px}
.tb-u{display:flex; align-items:center; gap:8px; padding:2px; border-radius:999px; color:var(--ink); text-align:left}
.tb-u b{display:block; font-size:13px; line-height:1.15; white-space:nowrap}
.tb-u small{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.15}
.tb-u.eu .uav{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--brand)}
.tb-u:not(.eu){opacity:.82}
.tb-new{flex:0 0 auto}
@media (max-width:1380px){ .tb-u:not(.eu) .tb-un{display:none} .tb-users{gap:6px} }
@media (max-width:1180px){ .tb-title small:not(.tb-today){display:none} .tb-new{display:none} }
@media (min-width:960px){ .tb-logo{display:none} }
@media (max-width:959px){
  .topbar{gap:10px; padding:8px 12px}
  .tb-title b{font-size:15.5px}
  .tb-title .tb-today{display:block}
  .tb-title small:not(.tb-today){display:none}
  .tb-search, .tb-per, .tb-u:not(.eu), .tb-u .tb-un, .tb-new{display:none}
  .tb-bell{margin-left:auto}
}
.content{max-width:1560px}
@media (min-width:960px){ .content{padding:22px 26px 64px} }

/* ---------- títulos ---------- */
.h1{font-size:clamp(24px,3.4vw,32px); font-weight:800; letter-spacing:-.02em}
.sub{font-size:14px; color:var(--ink-2)}
.pg-head{margin:0 0 16px; align-items:center}
.acts-top{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- botões ---------- */
.btn{min-height:40px; border-radius:10px; border-color:var(--line-2); background:var(--surface); color:var(--ink); font-weight:700; font-size:14px}
.btn:hover{background:var(--surface-2); border-color:#3A4842}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:800}
.btn.primary:hover{background:#2FD46A; filter:none}
.btn.sm{min-height:34px; font-size:13px; padding:0 12px}
.icon-btn{border-radius:10px}
.link-btn{color:var(--brand)}

/* ---------- cartões de números (KPI) ---------- */
.kpi{--kh:var(--h-blue); background:linear-gradient(135deg, color-mix(in srgb, var(--kh) 22%, var(--surface)) 0%, color-mix(in srgb, var(--kh) 8%, var(--surface)) 100%);
  border:1px solid color-mix(in srgb, var(--kh) 55%, transparent); border-radius:14px; box-shadow:none; padding:14px 16px 14px 74px; min-height:104px; justify-content:center; gap:3px; overflow:hidden}
.kpi[data-s="ok"]{--kh:var(--h-green)} .kpi[data-s="bad"]{--kh:var(--h-red)} .kpi[data-s="warn"]{--kh:var(--h-amber)}
.kpis > .kpi[data-s="idle"]:nth-child(4n+1){--kh:var(--h-blue)}
.kpis > .kpi[data-s="idle"]:nth-child(4n+2){--kh:var(--h-purple)}
.kpis > .kpi[data-s="idle"]:nth-child(4n+3){--kh:var(--h-teal)}
.kpis > .kpi[data-s="idle"]:nth-child(4n){--kh:var(--h-amber)}
.kpi .kpi-ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--kh); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 5px color-mix(in srgb, var(--kh) 18%, transparent)}
.kpi:has(.kx) .kpi-ic{top:30px; transform:none}
.kpi .kpi-bars{position:absolute; right:14px; top:14px; display:flex; align-items:flex-end; gap:2px; height:18px; opacity:.9}
.kpi .kpi-bars i{display:block; width:3px; border-radius:1px; background:var(--kh)}
.kpi .kpi-bars i:nth-child(1){height:30%} .kpi .kpi-bars i:nth-child(2){height:55%} .kpi .kpi-bars i:nth-child(3){height:40%} .kpi .kpi-bars i:nth-child(4){height:75%} .kpi .kpi-bars i:nth-child(5){height:100%}
.kpi .l{font-size:13px; font-weight:700; color:#DDE7E1; padding-right:26px}
.kpi .v{font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em}
.kpi[data-s="bad"] .v{color:#fff}
.kpi .c{font-size:12.5px; color:color-mix(in srgb, var(--kh) 55%, #D7E2DB); font-weight:600}
.kpi .kx{font-size:12px; color:#C9D6CF; border-top:1px dashed color-mix(in srgb, var(--kh) 40%, transparent); margin-top:6px; padding-top:6px}
button.kpi:hover{border-color:var(--kh); filter:brightness(1.08)}
.kpis{gap:12px}
@container pg (max-width:560px){ .kpi{padding:12px 12px 12px 56px; min-height:92px} .kpi .kpi-ic{width:32px; height:32px; left:12px; box-shadow:0 0 0 3px color-mix(in srgb, var(--kh) 18%, transparent)} .kpi .kpi-ic svg{width:17px; height:17px} .kpi .v{font-size:19px} .kpi .kpi-bars{display:none} .kpi .l{padding-right:0} }

@container pg (min-width:560px){ .kpis, .kpis.k4, .kpis.k5, .kpis.k8{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} }
.dre-tbl td{vertical-align:middle}
.ch-body{background:none !important; border:0 !important}

/* ---------- painéis ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:none; padding:16px 18px}
.panel-head{margin-bottom:14px; align-items:center}
.panel-head h2{font-size:16px; font-weight:800; display:flex; align-items:center; gap:10px}
.panel-head p{font-size:13px; color:var(--ink-3)}
.ph-ic{flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; background:var(--ph, var(--h-green))}
.ph-ic[data-h="0"]{--ph:var(--h-green)} .ph-ic[data-h="1"]{--ph:var(--h-blue)} .ph-ic[data-h="2"]{--ph:var(--h-purple)} .ph-ic[data-h="3"]{--ph:var(--h-amber)} .ph-ic[data-h="4"]{--ph:var(--h-red)} .ph-ic[data-h="5"]{--ph:var(--h-teal)}
.panel-head > div:first-child:has(.ph-ic) > p{padding-left:38px}
.ch-tog{border-radius:8px}

/* ---------- abas e seletores ---------- */
.seg{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px}
.seg button{min-height:38px; border-radius:9px; font-weight:700; font-size:14px; color:var(--ink-2); border:1px solid transparent}
.seg button[aria-pressed="true"]{background:rgba(34,197,94,.14); color:#EAFBEF; border-color:var(--brand)}
.seg button[aria-pressed="true"] svg{color:var(--brand)}
.seg.views{margin-bottom:14px}
.seg.sm button{min-height:32px; font-size:12.5px}

/* ---------- etiquetas, avisos e tabelas ---------- */
.pill{border-radius:6px; padding:2px 9px 2px 7px; font-size:12px; font-weight:800; background:color-mix(in srgb, var(--sf) 22%, transparent); color:var(--s); border:1px solid color-mix(in srgb, var(--sf) 55%, transparent)}
.banner{border-radius:12px; background:color-mix(in srgb, var(--sf) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--sf) 50%, transparent)}
.flag{border-radius:6px}
.dre-tbl th, .split th, table th{color:var(--ink-3); font-weight:700; text-transform:none; letter-spacing:0; font-size:12.5px; background:var(--surface-2)}
.dre-tbl td, .dre-tbl th{border-bottom-color:var(--line)}
.dre-tbl tbody tr:hover td{background:rgba(255,255,255,.02)}
.dre-tbl tr.tot td{background:var(--surface-2)}
.dre-tbl tr.big td{background:rgba(34,197,94,.12)}
.scroll-x{border-color:var(--line); background:var(--surface)}
.inp{background:var(--surface-2); border-color:var(--line-2); color:var(--ink); border-radius:10px}
.inp:focus{border-color:var(--brand)}
select.inp{background-color:var(--surface-2)}
.frow{background:var(--surface); border-color:var(--line); border-radius:12px}
.frow .fdate{background:var(--surface-2); border-color:var(--line-2)}
.grp-t{color:var(--ink-2)}
.meter{background:var(--track)}
.dlg{background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:16px}
.dlg::backdrop{background:rgba(2,6,5,.72); backdrop-filter:blur(3px)}
.toast{background:#EAFBEF; color:#06140C}
.fbar{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px; box-shadow:none}
.blk, .met, .dic-it, .ck, .al, .card-mini, .cat-blk, .dg-n, .hrow, .qk-tile, .qk-big, .wz-chip{border-color:var(--line-2)}
.blk-ico{background:rgba(34,197,94,.14)}
.hero{background:linear-gradient(135deg, var(--hero-a), var(--hero-b)); border:1px solid #1F5A3B}

/* ---------- entrada (login) ---------- */
#dlgEu{width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#060A09; overflow:auto}
#dlgEu::backdrop{background:#060A09}
#dlgEu[open]{display:grid; place-items:center}
.login-bg{position:fixed; inset:0; pointer-events:none; background:radial-gradient(600px 420px at 20% 30%, rgba(34,197,94,.16), transparent 70%), radial-gradient(500px 380px at 85% 80%, rgba(34,197,94,.08), transparent 70%)}
.login-bg img{position:absolute; left:-60px; bottom:-40px; width:520px; max-width:70vw; opacity:.06}
.login{position:relative; width:min(420px, calc(100vw - 32px)); margin:24px auto; padding:28px 26px 22px; border-radius:18px; background:rgba(14,20,18,.9); border:1px solid var(--line-2); box-shadow:0 30px 80px rgba(0,0,0,.55); display:grid; gap:16px}
.login .lg-logo{display:grid; place-items:center; gap:10px; text-align:center}
.login .lg-logo img{width:220px; height:auto}
.login h2{font-size:21px; font-weight:800; text-align:center}
.login .lg-sub{font-size:13.5px; color:var(--ink-3); text-align:center; margin-top:-8px}
.login .fld > span{font-size:13px; color:var(--ink-2)}
.login .inp{height:46px}
.lg-row{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.lg-row label{display:inline-flex; align-items:center; gap:8px}
.login .btn.primary{width:100%; min-height:46px; font-size:15px}
.lg-users{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.lg-users button{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-3); padding:4px; border-radius:10px}
.lg-users button:hover{color:var(--ink)}
.lg-nota{font-size:12px; color:var(--ink-3); text-align:center; line-height:1.45}

/* ---------- telas novas: grade com coluna da direita ---------- */
.vg-wrap{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:1060px){ .vg-wrap{grid-template-columns:minmax(0,1fr) 320px} }
.vg-main, .vg-rail{display:grid; gap:16px; align-content:start; min-width:0}
.vg-main{container-type:inline-size; container-name:pg}
.vg-main > *, .vg-rail > *, .vg-wrap > *{min-width:0}
.g2{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.g3{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.g4{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container pg (min-width:1100px){ .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g2.w12{grid-template-columns:1.25fr 1fr} }
.g2 > *, .g3 > *, .g4 > *{min-width:0}
.kpis.k8{grid-template-columns:repeat(2,minmax(0,1fr))}
@container pg (min-width:760px){ .kpis.k8{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mini-list{display:grid; gap:2px}
.mini-it{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 8px; border-radius:10px; text-align:left; width:100%; color:var(--ink)}
button.mini-it:hover{background:var(--surface-2)}
.mini-it .dot{width:9px; height:9px; border-radius:50%; background:var(--sf)}
.mini-it b{display:block; font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-it small{display:block; font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-it .amt{font-size:13.5px}
.ver-todos{font-size:13px; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:4px}
.al-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.al-tabs button{min-height:30px; padding:0 10px; border-radius:8px; border:1px solid var(--line-2); font-size:12.5px; font-weight:700; color:var(--ink-2)}
.al-tabs button[aria-pressed="true"]{border-color:var(--brand); color:#EAFBEF; background:rgba(34,197,94,.14)}
.ins{display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.ins:last-child{border-bottom:0}
.ins .ii{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--sf) 20%, transparent); color:var(--s)}
.ins b{display:block; font-size:13.5px; line-height:1.35}
.ins p{font-size:12.5px; color:var(--ink-3); line-height:1.4; margin-top:2px}
.gl-it{display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.gl-it:last-child{border-bottom:0}
.gl-it .n{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:rgba(34,197,94,.16); color:var(--brand)}
.gl-it b{font-size:13.5px}
.gl-it p{font-size:12.5px; color:var(--ink-3); line-height:1.4}
.donut-wrap{display:grid; grid-template-columns:minmax(110px, 160px) minmax(0,1fr); gap:16px; align-items:center}
@container pg (max-width:420px){ .donut-wrap{grid-template-columns:minmax(0,1fr)} }
.donut{width:100%; max-width:180px; height:auto; aspect-ratio:1}
.donut text{fill:var(--ink); font-weight:800; text-anchor:middle}
.dl{display:grid; gap:6px}
.dl-it{display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:8px; align-items:center; font-size:13px}
.dl-it i{width:10px; height:10px; border-radius:3px; background:var(--k)}
.dl-it span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.dl-it b{font-variant-numeric:tabular-nums; font-size:12.5px}
.dl-it em{font-style:normal; color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums; min-width:44px; text-align:right}
.kc0{--k:#22C55E} .kc1{--k:#3B82F6} .kc2{--k:#A855F7} .kc3{--k:#F59E0B} .kc4{--k:#EF4444} .kc5{--k:#14B8A6} .kc6{--k:#EC4899} .kc7{--k:#64748B} .kc8{--k:#84CC16} .kc9{--k:#F97316}
.cat-cards{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat-card{display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; padding:12px; border-radius:12px; text-align:left; color:var(--ink);
  background:color-mix(in srgb, var(--k) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--k) 50%, transparent)}
.cat-card .ci{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--k); color:#fff}
.cat-card b{display:block; font-size:13.5px}
.cat-card strong{display:block; font-size:17px; font-variant-numeric:tabular-nums}
.cat-card small{display:block; font-size:12px; color:var(--ink-2)}
.cat-card small em{font-style:normal; color:var(--k); font-weight:800}
.fp-bars{display:grid; gap:10px}
.fp-it{display:grid; grid-template-columns:minmax(110px,1fr) minmax(80px,1.4fr) 54px minmax(90px,auto); gap:10px; align-items:center; font-size:13px}
.fp-it .tr{height:8px; border-radius:999px; background:var(--track); overflow:hidden}
.fp-it .tr i{display:block; height:100%; border-radius:999px; background:var(--k)}
.fp-it b, .fp-it em{font-variant-numeric:tabular-nums; text-align:right; font-style:normal}
.fp-it em{color:var(--ink-3)}
.filtros{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin:4px 0 10px}
.filtros label{display:grid; gap:3px; font-size:11.5px; color:var(--ink-3); font-weight:700; min-width:0}
.filtros .inp{height:38px; min-width:130px; font-size:13px}
.filtros .grow{flex:1 1 220px}
.tx-tbl td{white-space:nowrap}
.tx-tbl td.wrap{white-space:normal; min-width:160px}
.tag-cat{display:inline-flex; align-items:center; gap:7px}
.tag-cat i{width:9px; height:9px; border-radius:50%; background:var(--k)}
.who{display:inline-flex; align-items:center; gap:6px}
.brand-cards{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@container pg (min-width:760px){ .brand-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bc{padding:16px; border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--k) 24%, var(--surface)), color-mix(in srgb, var(--k) 6%, var(--surface))); border:1px solid color-mix(in srgb, var(--k) 55%, transparent); display:grid; gap:10px; text-align:left; color:var(--ink)}
.bc[data-m="med"]{--k:#22C55E} .bc[data-m="law"]{--k:#3B82F6} .bc[data-m="varejo"]{--k:#A855F7}
.bc-h{display:flex; align-items:center; gap:12px}
.bc-h .ci{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--k); color:#fff}
.bc-h b{font-size:16px; display:block}
.bc-h small{font-size:12.5px; color:var(--ink-2)}
.bc-n{display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; align-items:end}
.bc-n strong{font-size:32px; line-height:1; font-weight:800}
.bc-n span{display:block; font-size:12px; color:var(--ink-2)}
.bc-n b{font-size:15px; font-variant-numeric:tabular-nums}
.stk{display:flex; height:10px; border-radius:999px; overflow:hidden; gap:2px; background:var(--track)}
.stk i{display:block; height:100%; background:var(--k)}
.stk-l{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; color:var(--ink-2); margin-top:8px}
.stk-l span{display:inline-flex; align-items:center; gap:5px}
.stk-l i{width:8px; height:8px; border-radius:50%; background:var(--k)}
.npsb{display:inline-grid; place-items:center; min-width:30px; height:22px; padding:0 6px; border-radius:6px; font-weight:800; font-size:12px; color:#04140B; background:var(--sf)}
.drawer-h{display:flex; align-items:center; gap:12px}
.drawer-h .ci{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--mc, var(--brand)); color:#fff; font-weight:800; font-size:18px}
.kv{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.kv div{padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.kv span{display:block; font-size:11.5px; color:var(--ink-3); font-weight:700}
.kv b{display:block; font-size:15px; font-variant-numeric:tabular-nums}

.donut text.dsub{fill:var(--ink-3); font-weight:600}
.dre-tbl td.pos{color:var(--ok)}
.dre-tbl td.neg, .num.neg{color:var(--bad)}
.dlg.drawer{margin:0 0 0 auto; height:100vh; max-height:100vh; width:min(620px, 100vw); max-width:100vw; border-radius:0; border-width:0 0 0 1px}
.dlg.drawer .dlg-in{min-height:100%}
.cat-card[aria-pressed="true"]{box-shadow:0 0 0 2px var(--k)}
.bc:hover{filter:brightness(1.08)}
.npsb[data-s="ok"]{background:var(--ok-f)} .npsb[data-s="warn"]{background:var(--warn-f)} .npsb[data-s="bad"]{background:var(--bad-f); color:#fff}
.fbar.mini{background:none; border:0; padding:0; margin:0 0 6px; justify-content:flex-end}
#modeM{display:none !important}
.tbl-acts{display:flex; gap:4px; justify-content:flex-end}

/* ===== zv.html ===== */

/* ===================================================================
   CACTUS FINANCEIRO 2: entrada com senha, presença, conferência, motor de visões,
   quadros, CRM, equipamentos, precificação e cálculos
   =================================================================== */
/* ----- entrada com senha e trava ----- */
body.trancado .app{visibility:hidden}
.login .lg-conta{display:block}
.lg-quem{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2)}
.lg-quem b{display:block; font-weight:800}
.lg-quem small{display:block; font-size:12.5px; color:var(--ink-3)}
.lg-quem.big .uav{width:44px; height:44px; font-size:15px}
.fld > span.pw, .pw{display:flex; gap:8px; align-items:center; margin:0; font-size:inherit; color:inherit; font-weight:inherit}
.pw .inp{flex:1 1 auto}
.pw-forca{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; align-items:center; margin-top:-6px}
.pw-forca i{height:5px; border-radius:3px; background:var(--line-2)}
.pw-forca span{grid-column:1 / -1; font-size:12px; color:var(--ink-3)}
.pw-forca[data-f="1"] i:nth-child(-n+1){background:var(--bad-f)}
.pw-forca[data-f="2"] i:nth-child(-n+2){background:var(--warn-f)}
.pw-forca[data-f="3"] i:nth-child(-n+3){background:var(--h-teal)}
.pw-forca[data-f="4"] i:nth-child(-n+4){background:var(--brand)}
.lg-link{background:none; border:0; color:var(--brand); font-weight:700; font-size:13.5px; justify-self:center; padding:4px; cursor:pointer}
.lg-link:hover{text-decoration:underline}
/* ----- quem está usando ----- */
.online-bar{display:flex; align-items:center; gap:10px; padding:9px 14px; margin:0 0 14px; border-radius:12px; font-size:13.5px; color:var(--ink-2);
  background:color-mix(in srgb, var(--brand) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--brand) 35%, transparent)}
.on-dot{width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); flex:0 0 auto}
.tb-u{position:relative}
.tb-u.on .uav::after{content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:var(--brand); border:2px solid var(--surface)}
.tb-u .uav{position:relative}
.nav-h{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:12px 12px 4px; margin:0}
.h-mot{font-size:13px; color:var(--ink-2); margin-top:4px; padding:6px 9px; border-left:3px solid var(--warn-f); background:var(--surface-2); border-radius:0 8px 8px 0}
.mot-diff{display:grid; gap:4px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-2)}
.dlg-in.sm{max-width:520px}
.banner.priv{margin-bottom:14px}
/* ----- botões e campos compactos ----- */
.btn.xs{min-height:30px; padding:0 9px; font-size:12.5px; gap:5px; border-radius:8px}
.danger-txt{color:var(--bad)}
.danger-txt:hover{border-color:var(--bad-f)}
.inp.sm{min-height:36px; padding:6px 10px; font-size:13.5px}
.search.sm .inp{min-height:36px; padding-left:38px}
.search.sm svg{left:11px}
.fld.sm > span{font-size:12px; margin-bottom:3px}
.prem > p, .prem > a{grid-column:1 / -1}
.prem{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px 12px; align-items:end}
.cmp-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.cmp-row > span{color:var(--ink-2); flex:1 1 220px}
.cmp-row.tot{border-bottom:0; border-top:1px solid var(--line-2); font-size:15px}
td[data-s="ok"]{color:var(--ok)} td[data-s="bad"]{color:var(--bad)}
.dl .tot dt, .dl .tot dd{font-weight:800; color:var(--ink)}
/* ----- motor de visões ----- */
.vw{display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; min-width:0}
.vw-tabs{display:flex; gap:4px; overflow-x:auto; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface); scrollbar-width:thin}
.vw-tabs button{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px; font-size:13px; font-weight:700; color:var(--ink-2); white-space:nowrap; border:1px solid transparent; background:none}
.vw-tabs button:hover{color:var(--ink); background:var(--surface-2)}
.vw-tabs button[aria-selected="true"]{background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--ink); border-color:var(--brand)}
.vw-tabs button[aria-selected="true"] svg{color:var(--brand)}
.vw-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.vw-bar .search{flex:1 1 200px; max-width:340px}
.vw-sel{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); font-weight:700; min-width:0}
.vw-sel select{max-width:220px}
.vw-new{margin-left:auto}
.vw-body{min-width:0}
.vchip{display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 6px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
  background:color-mix(in srgb, var(--k, var(--h-blue)) 16%, transparent); color:var(--ink); border:1px solid color-mix(in srgb, var(--k, var(--h-blue)) 45%, transparent)}
.vchip i{width:7px; height:7px; border-radius:50%; background:var(--k, var(--h-blue))}
button.vchip{cursor:pointer}
button.vchip[aria-pressed="false"]{opacity:.55}
button.vchip[aria-pressed="true"]{box-shadow:0 0 0 1px var(--k)}
.vprop{font-size:12.5px; color:var(--ink-2)}
.vprop small{color:var(--ink-3); font-size:12px}
.vw-props{display:flex; flex-wrap:wrap; gap:5px 8px; align-items:center}
.vw-card{position:relative; display:grid; gap:7px; padding:11px 12px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; text-align:left; color:var(--ink); cursor:pointer; min-width:0}
.vw-card:hover{border-color:color-mix(in srgb, var(--brand) 55%, var(--line-2))}
.vw-card > b{font-weight:800; font-size:14px; overflow-wrap:anywhere; padding-right:18px}
.vw-prazo{font-size:12px; font-weight:700; color:var(--s, var(--ink-3))}
.vw-grip{position:absolute; top:8px; right:6px; color:var(--ink-3); touch-action:none; cursor:grab; padding:2px}
.vw-arr{opacity:.35}
.vw-ghost{position:fixed; left:0; top:0; z-index:9999; pointer-events:none; box-shadow:0 18px 40px rgba(0,0,0,.5); border-color:var(--brand) !important}
.vw-kan{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 290px); gap:12px; overflow-x:auto; padding:2px 2px 12px; align-items:start}
.vw-col{display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); border-top:3px solid var(--k, var(--line-2)); min-width:0; min-height:120px}
.vw-col.vw-over{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, var(--surface-2))}
.vw-col-h{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.vw-col-h .dot{width:9px; height:9px; border-radius:50%; background:var(--k)}
.vw-col-h b{font-size:14px; font-weight:800}
.vw-col-h .n{margin-left:auto; min-width:24px; height:22px; padding:0 7px; border-radius:999px; background:var(--surface); border:1px solid var(--line-2); display:grid; place-items:center; font-size:12px; font-weight:800}
.vw-col-h .icon-btn{width:28px; height:28px}
.vw-col-s{flex:1 1 100%; font-size:12px; color:var(--ink-3)}
.vw-col-b{display:grid; gap:8px; min-height:30px}
.vw-col .bempty{font-size:12.5px; color:var(--ink-3); text-align:center; padding:10px 4px; border:1px dashed var(--line-2); border-radius:10px}
.vw-add{display:flex; align-items:center; gap:6px; justify-content:center; padding:7px; border-radius:10px; color:var(--ink-3); font-size:13px; font-weight:700; background:none; border:1px dashed var(--line-2)}
.vw-add:hover{color:var(--brand); border-color:var(--brand)}
.vw-col-new{align-items:center; justify-content:center; color:var(--ink-3); font-weight:800; border-style:dashed; min-height:120px; cursor:pointer}
.vw-col-new:hover{color:var(--brand)}
.vw-list{display:grid; gap:6px}
.vw-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line); cursor:pointer}
.vw-row:hover{border-color:var(--line-2)}
.vw-row > b{flex:1 1 220px; min-width:0; overflow-wrap:anywhere; font-weight:700}
.vw-row.feito > b{text-decoration:line-through; color:var(--ink-3)}
.vw-gal{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px}
.vw-calnav{align-items:center; margin-bottom:8px}
.vw-calnav b{font-size:15px; min-width:150px; text-align:center}
.vw-cal{display:grid; grid-template-columns:repeat(7, minmax(92px, 1fr)); gap:4px; min-width:660px}
.vw-cal-h{font-size:12px; font-weight:800; color:var(--ink-3); text-align:center; padding:4px}
.vw-cal-d{min-height:92px; padding:5px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:3px; min-width:0}
.vw-cal-d.fora{opacity:.45}
.vw-cal-d.hoje{border-color:var(--brand)}
.vw-cal-d.vw-over{background:color-mix(in srgb, var(--brand) 12%, var(--surface))}
.vw-cal-n{font-size:12px; font-weight:800; color:var(--ink-3)}
.vw-cal-it{display:block; width:100%; text-align:left; font-size:12px; font-weight:700; padding:3px 6px; border-radius:6px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:color-mix(in srgb, var(--k, var(--h-blue)) 22%, transparent); border:0; border-left:3px solid var(--k, var(--h-blue)); cursor:pointer}
.vw-cal-mais{font-size:11.5px; color:var(--ink-3)}
.vw-g-wrap{display:grid; grid-template-columns:minmax(120px, 210px) minmax(0, 1fr); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.vw-g-nomes{border-right:1px solid var(--line)}
.vw-g-scroll{overflow-x:auto}
.vw-g-esc{position:relative; height:30px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--ink-3)}
.vw-g-esc span{position:absolute; top:8px; padding-left:4px; border-left:1px solid var(--line-2); white-space:nowrap}
.vw-g-rows{position:relative}
.vw-g-row{position:relative; height:34px; border-bottom:1px solid var(--line)}
.vw-g-row.nome{display:flex; align-items:center; padding:0 10px; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vw-g-bar{position:absolute; top:6px; height:22px; border-radius:6px; font-size:11.5px; font-weight:700; color:var(--ink); text-align:left; padding:0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:color-mix(in srgb, var(--k, var(--h-blue)) 45%, var(--surface-2)); border:1px solid var(--k, var(--h-blue)); cursor:pointer}
.vw-g-hoje{position:absolute; top:0; bottom:0; width:2px; background:var(--warn-f); z-index:1}
.vw-tl{display:grid; gap:8px}
.vw-tl-it{display:grid; grid-template-columns:52px 14px minmax(0, 1fr); gap:8px; align-items:start}
.vw-tl-d{font-size:12.5px; font-weight:800; color:var(--ink-3); padding-top:12px; text-align:right}
.vw-tl-it .dot{width:12px; height:12px; border-radius:50%; background:var(--brand); margin-top:13px; box-shadow:0 0 0 3px var(--surface)}
.vw-tl-it.fut .dot{background:var(--h-blue)}
.vw-mat{border-collapse:separate; border-spacing:4px; width:100%; min-width:560px}
.vw-mat th{font-size:12.5px; color:var(--ink-3); font-weight:800; padding:6px; text-align:center}
.vw-mat-c{vertical-align:top; padding:6px; min-width:110px; height:70px; border-radius:10px; background:var(--surface); border:1px solid var(--line)}
.vw-mat-c[data-n="3"]{background:color-mix(in srgb, var(--h-amber) 10%, var(--surface))}
.vw-mat-c[data-n="4"]{background:color-mix(in srgb, var(--h-red) 12%, var(--surface))}
.vw-mat-c .vw-cal-it{margin-bottom:3px}
.vw-funil{display:grid; gap:8px}
.vw-f-row{display:flex; flex-direction:column; align-items:center; gap:2px}
.vw-f-bar{display:flex; justify-content:space-between; gap:10px; padding:10px 14px; border-radius:10px; min-width:0; font-size:13.5px;
  background:color-mix(in srgb, var(--k, var(--h-blue)) 30%, var(--surface)); border:1px solid var(--k, var(--h-blue))}
.vw-f-bar b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vw-f-bar span{white-space:nowrap; color:var(--ink-2)}
.vw-f-row small{font-size:12px; color:var(--ink-3)}
.vw-table{width:max-content; min-width:100%}
.vw-table th, .vw-table td{white-space:nowrap}
.vw-table td:first-child{white-space:normal; min-width:180px; max-width:300px; font-weight:700}
.vw-table td .inp.sm{min-width:110px}
.vw-table td input[type="checkbox"]{width:18px; height:18px}
.vw-table th.sortable{cursor:pointer; user-select:none; white-space:nowrap}
.vw-table tfoot td{font-weight:800; border-top:1px solid var(--line-2)}
.vw-multi{display:flex; flex-wrap:wrap; gap:6px}
.heat-wrap{display:grid; gap:8px}
.heat{display:flex; gap:3px; width:max-content; padding:4px 0}
.heat-w{display:grid; grid-template-rows:repeat(7, 12px); gap:3px}
.heat i, .heat-lg i{width:12px; height:12px; border-radius:3px; background:var(--track); display:block}
.heat i[data-n="1"], .heat-lg i[data-n="1"]{background:color-mix(in srgb, var(--brand) 30%, var(--track))}
.heat i[data-n="2"], .heat-lg i[data-n="2"]{background:color-mix(in srgb, var(--brand) 55%, var(--track))}
.heat i[data-n="3"], .heat-lg i[data-n="3"]{background:color-mix(in srgb, var(--brand) 78%, var(--track))}
.heat i[data-n="4"], .heat-lg i[data-n="4"]{background:var(--brand)}
.heat i.fut{opacity:.25}
.heat-lg{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--ink-3); flex-wrap:wrap}
.heat-lg small{font-size:12px}
.vw-pn{min-width:0}
.hb-bar[class*="kc"]{background:var(--k)} .hb-bar.k3{background:var(--c5)}
/* ----- janela de um item ----- */
.cd-tit{font-size:20px; font-weight:800; border-color:transparent; background:transparent; padding-left:0}
.cd-tit:focus-visible{border-color:var(--brand); background:var(--surface); padding-left:10px}
.cd-base{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); font-weight:700}
.cd-props{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px 14px}
.cd-row{display:grid; gap:4px; min-width:0}
.cd-row.full{grid-column:1 / -1}
.cd-k{font-size:12px; font-weight:800; color:var(--ink-3); letter-spacing:.02em}
.cd-ro{padding:8px 10px; border-radius:var(--r-sm); background:var(--surface-2); border:1px dashed var(--line-2); font-weight:700}
/* ----- quadros ----- */
.qd-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:10px; scrollbar-width:thin}
.qd-tab{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-weight:700; font-size:13.5px; white-space:nowrap}
.qd-tab small{font-size:11.5px; color:var(--ink-3); background:var(--surface-2); padding:1px 7px; border-radius:999px}
.qd-tab[aria-pressed="true"]{color:var(--ink); border-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, var(--surface))}
.qd-tab.add{border-style:dashed}
.qd-cols{display:grid; gap:8px}
.qd-col{display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(0, 170px) auto; gap:6px; align-items:center}
.qd-col-l{display:flex; gap:2px}
.qd-col-l .icon-btn{width:28px; height:28px}
.qd-col-op{display:grid; gap:3px; padding-left:66px}
.qd-col-op small{font-size:12px; color:var(--ink-3)}
.qd-modelos{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px}
.qd-modelo{display:grid; gap:5px; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink)}
.qd-modelo:hover{border-color:var(--brand)}
.qd-modelo b{font-weight:800}
.qd-modelo small{font-size:12px; color:var(--ink-2)}
.cor-pick{display:flex; flex-wrap:wrap; gap:6px}
.cor-pick button{width:28px; height:28px; border-radius:50%; background:var(--k); border:2px solid transparent}
.cor-pick button[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface)}
/* ----- responsabilidades e contribuição ----- */
.resp-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
.resp-card{display:grid; gap:10px; padding:14px; border-radius:14px; background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--sf, var(--line-2))}
.rc-top{display:flex; align-items:center; gap:10px}
.rc-top b{display:block; font-weight:800}
.rc-top small{display:block; font-size:12px; color:var(--ink-3)}
.rc-top > span:nth-child(2){flex:1 1 auto; min-width:0}
.rc-pos{font-size:20px; font-weight:800; color:var(--brand)}
.rc-big b{font-size:30px; font-weight:800; line-height:1}
.rc-big small{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px}
.rc-bar{height:8px; border-radius:4px; background:var(--track); overflow:hidden}
.rc-bar i{display:block; height:100%; background:var(--sf, var(--brand)); border-radius:4px}
.rc-nums{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.rc-nums.c3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.rc-nums span{display:grid; gap:1px; padding:7px 8px; border-radius:9px; background:var(--surface-2)}
.rc-nums b{font-weight:800; font-size:15px}
.rc-nums small{font-size:11.5px; color:var(--ink-3); line-height:1.25}
/* ----- CRM ----- */
.crm-card{border-left:3px solid var(--mk, var(--line-2))}
.crm-card[data-m="med"]{--mk:#22C55E} .crm-card[data-m="law"]{--mk:#3B82F6} .crm-card[data-m="varejo"]{--mk:#A855F7}
.crm-top{display:flex; align-items:flex-start; gap:8px; justify-content:space-between; padding-right:16px}
.crm-top b{font-weight:800; font-size:14px; overflow-wrap:anywhere}
.crm-val{display:flex; align-items:baseline; gap:4px; flex-wrap:wrap}
.crm-val b{font-size:16px; font-weight:800}
.crm-val small{font-size:12px; color:var(--ink-3)}
.crm-pe{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.crm-resp{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700}
.crm-resp .uav{width:22px; height:22px; font-size:9.5px; box-shadow:none}
.crm-age{font-size:12px; font-weight:700; color:var(--s)}
.crm-qa{display:flex; flex-wrap:wrap; gap:5px; padding-top:6px; border-top:1px solid var(--line)}
/* ----- equipamentos, preços e cálculos ----- */
.eq-pick{display:grid; gap:10px; max-height:300px; overflow:auto; padding:8px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2)}
.eq-grp{display:grid; gap:2px}
.eq-grp-h{display:flex; justify-content:space-between; align-items:center; gap:8px}
.eq-grp-h b{font-size:13px}
.sv-comp{display:grid; gap:8px}
.sv-row{display:grid; grid-template-columns:auto minmax(0, 1fr) 90px auto auto; gap:6px; align-items:center}
.sv-t{font-size:12.5px; font-weight:700; color:var(--ink-3)}
.calc-mini{display:grid; gap:10px}
.lab-ser{display:grid; grid-template-columns:minmax(0, 200px) minmax(0, 1fr) auto; gap:6px}
.lab-vars{display:flex; flex-wrap:wrap; gap:5px; max-height:150px; overflow:auto}
.lab-prev{display:grid; padding:8px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-2)}
.lab-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.lab-big{font-size:28px; font-weight:800}
.lab-head small{color:var(--ink-3)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; overflow-wrap:anywhere}
.tree{display:grid; gap:8px; padding-left:14px; border-left:2px solid var(--line-2)}
.tree-n{position:relative; display:grid; gap:2px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-2)}
.tree-n::before{content:""; position:absolute; left:-16px; top:50%; width:14px; height:2px; background:var(--line-2)}
.tree-n[data-k="pess"]{border-left:3px solid var(--bad-f)} .tree-n[data-k="base"]{border-left:3px solid var(--brand)} .tree-n[data-k="otim"]{border-left:3px solid var(--h-blue)}
.tree-n span{font-size:13px; color:var(--ink-2)}
.cv-lista{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0 18px}
@media (max-width:640px){
  .vw-kan{grid-auto-columns:minmax(240px, 82vw)}
  .qd-col{grid-template-columns:auto minmax(0, 1fr) auto}
  .qd-col select{grid-column:2 / 3}
  .qd-col-op{padding-left:0}
  .sv-row{grid-template-columns:minmax(0, 1fr) 80px auto}
  .sv-row .sv-t, .sv-row .hint{display:none}
  .lab-ser{grid-template-columns:minmax(0, 1fr) auto}
  .lab-ser .inp:first-child{grid-column:1 / -1}
  .vw-g-wrap{grid-template-columns:110px minmax(0, 1fr)}
  .rc-nums.c3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .vw-new{margin-left:0}
}

/* ===== zw.html ===== */

/* ===================================================================
   CACTUS FINANCEIRO 3: governança, metas, sucesso do cliente, integrações e sistema
   =================================================================== */
/* ----- menu agrupado ----- */
.nav-grp{margin:2px 0}
.nav-grp > summary{list-style:none}
.nav-grp > summary::-webkit-details-marker{display:none}
.nav-gh{display:flex; align-items:center; gap:10px; min-height:38px; padding:0 12px; border-radius:10px; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); cursor:pointer; user-select:none}
.nav-gh::after{content:''; margin-left:auto; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s}
.nav-grp[open] > .nav-gh::after{transform:rotate(45deg)}
.nav-gh:hover{color:var(--ink-2); background:var(--surface-2)}
.nav-gh:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.nav-gh [data-ico] svg{width:16px; height:16px}
.nav-grp .nav-btn{padding-left:20px}
.nav-grp:has([aria-current="page"]) > .nav-gh{color:var(--brand)}
#fFab{display:none !important}
.bnav-novo{color:var(--on-brand) !important; background:var(--brand) !important; border-radius:14px; margin:4px}

.kpis + .qd-tabs, .kpis + .banner, .kpis + .gx-list, .kpis + .toolbar, .kpis + .gx-metas, .kpis + .inline-row{margin-top:14px}
.qd-tabs + .kpis, .toolbar + .kpis, .banner + .gx-list{margin-top:12px}
/* ----- linhas de lista ----- */
.gx-list{display:flex; flex-direction:column; gap:8px}
.gx-list.gx-mini{gap:0}
.gx-row{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:4px 12px; align-items:start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); border-left:4px solid var(--idle-f)}
.gx-row[data-s="ok"]{border-left-color:var(--ok-f)} .gx-row[data-s="warn"]{border-left-color:var(--warn-f)} .gx-row[data-s="bad"]{border-left-color:var(--bad-f)}
.gx-ic{width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); color:var(--ink-2)}
.gx-row[data-s="ok"] .gx-ic{color:var(--ok); background:var(--ok-soft)} .gx-row[data-s="warn"] .gx-ic{color:var(--warn); background:var(--warn-soft)} .gx-row[data-s="bad"] .gx-ic{color:var(--bad); background:var(--bad-soft)}
.gx-body{min-width:0; display:flex; flex-direction:column; gap:3px}
.gx-t{font-weight:800; font-size:14.5px; overflow-wrap:anywhere}
.gx-s{color:var(--ink-2); font-size:13px; line-height:1.45; overflow-wrap:anywhere}
.gx-s[data-s="ok"]{color:var(--ok)} .gx-s[data-s="warn"]{color:var(--warn)}
.gx-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.gx-v{font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}
.gx-acts{grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.gx-acts .btn, .gx-foot .btn{min-height:36px}
.gx-more{grid-column:2 / -1; margin-top:2px}
.gx-more > summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-2); padding:4px 0}
.gx-dets{display:flex; flex-direction:column; gap:8px; padding:8px 0 2px}
.gx-dec{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; background:var(--surface-2); border-left:3px solid var(--idle-f); font-size:13px}
.gx-dec[data-s="ok"]{border-left-color:var(--ok-f)} .gx-dec[data-s="warn"]{border-left-color:var(--warn-f)} .gx-dec[data-s="bad"]{border-left-color:var(--bad-f)}
.gx-pills{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.gx-right .pill{max-width:240px}
.gx-vazio{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:22px 14px; color:var(--ink-2); border:1px dashed var(--line-2); border-radius:var(--r-sm)}
.gx-vazio > span:first-child{color:var(--ok)}
.gx-fonte{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:12px 0 0}
.gx-acao{font-size:13px; color:var(--ink); background:var(--brand-soft); border-radius:8px; padding:6px 10px; margin:4px 0 0}
.gx-alerta{font-weight:800; color:var(--bad); margin:0}
.gx-h3{font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin:14px 0 6px}
.gx-foot{margin-top:12px}
.form-err{color:var(--bad); font-weight:700; font-size:13.5px; margin:6px 0 0}

/* ----- pares chave e valor ----- */
.gx-kv{display:grid; grid-template-columns:minmax(120px, max-content) minmax(0, 1fr); gap:6px 14px; margin:8px 0; font-size:13.5px}
.gx-kv dt{color:var(--ink-3); font-weight:600}
.gx-kv dd{margin:0; color:var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
@media (max-width:520px){ .gx-kv{grid-template-columns:minmax(0, 1fr)} .gx-kv dd{margin-bottom:6px} }

/* ----- cartões ----- */
.gx-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap:10px}
.gx-card{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); min-width:0}
.gx-pair{display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); margin:8px 0}
.gx-pair-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px}

/* ----- checklist ----- */
.gx-check{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:8px}
.gx-chk{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:2px 10px; align-items:start; text-align:left; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; min-height:44px}
button.gx-chk{cursor:pointer}
button.gx-chk:hover{border-color:var(--line-2)}
.gx-chk > span:first-child{grid-row:span 2; color:var(--idle)}
.gx-chk[data-s="ok"] > span:first-child{color:var(--ok)} .gx-chk[data-s="warn"] > span:first-child{color:var(--warn)}
.gx-chk b{font-size:14px} .gx-chk > span:last-child{font-size:12.5px; color:var(--ink-2)}

/* ----- + Novo ----- */
.gx-novo{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(150px, 46%), 1fr)); gap:8px}
.gx-novo-it{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:76px; padding:12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.gx-novo-it:hover{border-color:var(--brand)}
.gx-novo-it > span{color:var(--brand)}
.gx-novo-it b{font-size:13.5px}

/* ----- metas ----- */
.gx-metas{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap:12px}
.gx-meta{display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); border-top:4px solid var(--idle-f); min-width:0}
.gx-meta[data-s="ok"]{border-top-color:var(--ok-f)} .gx-meta[data-s="warn"]{border-top-color:var(--warn-f)} .gx-meta[data-s="bad"]{border-top-color:var(--bad-f)}
.gx-meta-h{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px}
.gx-meta-h b{font-size:15.5px}
.gx-bar{position:relative; height:10px; border-radius:999px; background:var(--track); overflow:hidden}
.gx-bar-f{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--idle-f)}
.gx-bar-f[data-s="ok"]{background:var(--ok-f)} .gx-bar-f[data-s="warn"]{background:var(--warn-f)} .gx-bar-f[data-s="bad"]{background:var(--bad-f)}
.gx-bar-t{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink); opacity:.55}
.gx-bar-f[data-w="0"]{width:0} .gx-bar-f[data-w="5"]{width:5%} .gx-bar-f[data-w="10"]{width:10%} .gx-bar-f[data-w="15"]{width:15%} .gx-bar-f[data-w="20"]{width:20%} .gx-bar-f[data-w="25"]{width:25%}
.gx-bar-f[data-w="30"]{width:30%} .gx-bar-f[data-w="35"]{width:35%} .gx-bar-f[data-w="40"]{width:40%} .gx-bar-f[data-w="45"]{width:45%} .gx-bar-f[data-w="50"]{width:50%} .gx-bar-f[data-w="55"]{width:55%}
.gx-bar-f[data-w="60"]{width:60%} .gx-bar-f[data-w="65"]{width:65%} .gx-bar-f[data-w="70"]{width:70%} .gx-bar-f[data-w="75"]{width:75%} .gx-bar-f[data-w="80"]{width:80%} .gx-bar-f[data-w="85"]{width:85%}
.gx-bar-f[data-w="90"]{width:90%} .gx-bar-f[data-w="95"]{width:95%} .gx-bar-f[data-w="100"]{width:100%}
.gx-bar-t[data-w="0"]{left:0} .gx-bar-t[data-w="5"]{left:5%} .gx-bar-t[data-w="10"]{left:10%} .gx-bar-t[data-w="15"]{left:15%} .gx-bar-t[data-w="20"]{left:20%} .gx-bar-t[data-w="25"]{left:25%}
.gx-bar-t[data-w="30"]{left:30%} .gx-bar-t[data-w="35"]{left:35%} .gx-bar-t[data-w="40"]{left:40%} .gx-bar-t[data-w="45"]{left:45%} .gx-bar-t[data-w="50"]{left:50%} .gx-bar-t[data-w="55"]{left:55%}
.gx-bar-t[data-w="60"]{left:60%} .gx-bar-t[data-w="65"]{left:65%} .gx-bar-t[data-w="70"]{left:70%} .gx-bar-t[data-w="75"]{left:75%} .gx-bar-t[data-w="80"]{left:80%} .gx-bar-t[data-w="85"]{left:85%}
.gx-bar-t[data-w="90"]{left:90%} .gx-bar-t[data-w="95"]{left:95%} .gx-bar-t[data-w="100"]{left:calc(100% - 2px)}

/* ----- custo do atraso ----- */
.gx-serie{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.gx-serie > span{display:flex; flex-direction:column; padding:6px 10px; border-radius:8px; background:var(--surface-2); min-width:72px}
.gx-serie small{font-size:11px; color:var(--ink-3)} .gx-serie b{font-size:13px; font-variant-numeric:tabular-nums}

/* ----- integrações ----- */
.gx-ints{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap:12px}
.gx-int{display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); min-width:0}
.gx-int[data-s="ok"]{border-color:color-mix(in srgb, var(--ok-f) 55%, var(--line))}
.gx-int[data-s="bad"]{border-color:color-mix(in srgb, var(--bad-f) 55%, var(--line))}
.gx-int .gx-kv{grid-template-columns:minmax(0, 1fr)}
.gx-int .gx-kv dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em}
.gx-int .gx-kv dd{margin-bottom:4px}

/* ----- notícias ----- */
.gx-news{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.gx-news p{margin:2px 0; font-size:13.5px; line-height:1.5}
.gx-news-t{font-weight:800; color:var(--ink); text-decoration:none; font-size:14.5px}
.gx-news-t:hover{text-decoration:underline; color:var(--brand)}

/* ----- tabela simples ----- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:max-content}
.tbl th, .tbl td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.tbl th{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); background:var(--surface-2)}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}

@media (max-width:640px){
  .gx-row{grid-template-columns:auto minmax(0, 1fr); padding:12px}
  .gx-right{grid-column:2; align-items:flex-start; text-align:left; flex-direction:row; flex-wrap:wrap}
  .gx-acts{grid-column:1 / -1}
  .gx-acts .btn{flex:1 1 auto; min-height:44px}
  .gx-more{grid-column:1 / -1}
}

/* ===== Cactus Operação: componentes próprios, sobre o tema do Cactus Financeiro ===== */
.lnk{background:none; border:0; padding:0; color:var(--ink); font:inherit; font-weight:700; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--brand) 60%, transparent); text-underline-offset:3px}
.lnk:hover{color:var(--brand)}
.grow{flex:1 1 auto; min-width:0}
.mais-h{font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin:18px 0 8px}
.gx-s[data-s]{color:var(--s); font-weight:700}

/* cabeçalho da peça e esteira de passos */
.pc-head{display:grid; gap:6px}
.pc-head .h2{margin:0; text-wrap:balance}
.pe-wrap{overflow-x:auto; padding:2px 0 8px; margin:0 0 12px}
.pe-steps{list-style:none; margin:0; padding:0; display:flex; gap:6px; min-width:max-content}
.pe-step{display:flex; align-items:flex-start; gap:7px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); min-width:150px; max-width:200px}
.pe-step[data-s="ok"]{border-color:color-mix(in srgb, var(--ok-f) 45%, var(--line))}
.pe-step[data-atual="1"]{border-color:var(--sf); background:color-mix(in srgb, var(--sf) 14%, var(--surface)); box-shadow:0 0 0 1px var(--sf)}
.pe-dot{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--track); color:var(--ink-2)}
.pe-step[data-s="ok"] .pe-dot{background:var(--ok-f); color:#fff}
.pe-step[data-atual="1"] .pe-dot{background:var(--sf); color:#fff}
.pe-t{display:grid; gap:2px; min-width:0}
.pe-t b{font-size:12.5px; font-weight:800; line-height:1.2}
.pe-t small{font-size:11.5px; color:var(--ink-3); line-height:1.25; overflow-wrap:anywhere}

/* arquivos da peça */
.md-list{display:grid; gap:6px; margin:4px 0 8px}
.md-it{display:flex; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); min-width:0}
.md-th{width:44px; height:44px; flex:0 0 auto; border-radius:8px; object-fit:cover; background:var(--track); display:grid; place-items:center; color:var(--ink-2)}
.md-n{flex:1 1 auto; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* barras de progresso em passos de 5 */
.gx-bar{display:block}
.gx-bar-f[data-s="bad"]{background:var(--bad-f)}
.gx-bar-f[data-w="0"]{width:2%}
.gx-bar-f[data-w="5"]{width:5%} .gx-bar-f[data-w="10"]{width:10%} .gx-bar-f[data-w="15"]{width:15%} .gx-bar-f[data-w="20"]{width:20%}
.gx-bar-f[data-w="25"]{width:25%} .gx-bar-f[data-w="30"]{width:30%} .gx-bar-f[data-w="35"]{width:35%} .gx-bar-f[data-w="40"]{width:40%}
.gx-bar-f[data-w="45"]{width:45%} .gx-bar-f[data-w="50"]{width:50%} .gx-bar-f[data-w="55"]{width:55%} .gx-bar-f[data-w="60"]{width:60%}
.gx-bar-f[data-w="65"]{width:65%} .gx-bar-f[data-w="70"]{width:70%} .gx-bar-f[data-w="75"]{width:75%} .gx-bar-f[data-w="80"]{width:80%}
.gx-bar-f[data-w="85"]{width:85%} .gx-bar-f[data-w="90"]{width:90%} .gx-bar-f[data-w="95"]{width:95%} .gx-bar-f[data-w="100"]{width:100%}
td.w-bar{min-width:120px}

/* gráficos: séries por situação */
.bc .s-ok{fill:var(--ok-f)} .bc .s-bad{fill:var(--bad-f)} .bc .s-warn{fill:var(--warn-f)} .bc .s-idle{fill:var(--idle-f)}
.lgd i.s-ok{--k:var(--ok-f)} .lgd i.s-bad{--k:var(--bad-f)} .lgd i.s-warn{--k:var(--warn-f)} .lgd i.s-idle{--k:var(--idle-f)}
.hb-bar.ok{background:var(--ok-f)} .hb-bar.warn{background:var(--warn-f)} .hb-bar.bad{background:var(--bad-f)} .hb-bar.idle{background:var(--idle-f)}

/* cartões de cliente */
.cl-card{text-align:left; cursor:pointer; color:var(--ink); gap:8px; border-left:3px solid var(--sf, var(--line))}
.cl-card:hover{border-color:var(--brand)}
.cl-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.cl-top b{font-size:15px; font-weight:800; overflow-wrap:anywhere}
.cl-est{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.cl-est b{color:var(--ink); font-variant-numeric:tabular-nums}
.cl-risco{font-size:12.5px; font-weight:700; color:var(--s)}
.cl-eq{display:flex; flex-wrap:wrap; gap:4px; min-height:24px}

/* quadro e calendário */
.vw-col[data-s]{border-top-color:var(--sf)}
.vw-prazo[data-s]{--s:var(--s)}
.pchip{display:block; width:100%; text-align:left; font-size:11.5px; line-height:1.25; padding:3px 6px; border-radius:6px; border:1px solid color-mix(in srgb, var(--sf, var(--line-2)) 60%, transparent); background:color-mix(in srgb, var(--sf, var(--surface-2)) 16%, var(--surface)); color:var(--ink); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pchip b{font-weight:800}

/* ranking */
.rk-pod{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px}
.rk-p{display:grid; justify-items:center; gap:4px; padding:16px 12px; border-radius:14px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; text-align:center}
.rk-p[data-i="1"]{border-color:var(--warn-f); background:color-mix(in srgb, var(--warn-f) 12%, var(--surface))}
.rk-p strong{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.rk-p small{color:var(--ink-3); font-size:12px}
.rk-n{font-size:12px; font-weight:800; color:var(--ink-3)}

/* leitura em tela cheia */
.tp-wrap{display:grid; gap:18px}
.tp-it{padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.tp-t{white-space:pre-wrap; line-height:1.6; font-size:17px; max-width:68ch}
.tp-g{font-weight:800; color:var(--brand)}
.tp-wrap[data-z="0"] .tp-t{font-size:15px} .tp-wrap[data-z="2"] .tp-t{font-size:21px} .tp-wrap[data-z="3"] .tp-t{font-size:26px}

/* post no estilo do Instagram */
.ig{width:100%; max-width:470px; margin:0 auto; background:var(--surface); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; color:var(--ink)}
.ig-h{display:flex; align-items:center; gap:10px; padding:10px 12px}
.ig-av{width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(45deg, #F59E0B, #DB4A3D 55%, #A855F7); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px #DB4A3D}
.ig-av.lg{width:52px; height:52px; font-size:16px}
.ig-u{display:grid; flex:1 1 auto; min-width:0}
.ig-u b{font-size:13.5px; font-weight:800}
.ig-u small{font-size:11.5px; color:var(--ink-3)}
.ig-mid{position:relative; background:#000; aspect-ratio:4/5; max-width:100%}
.ig-mid.v{aspect-ratio:9/16; max-height:72vh; margin:0 auto}
.ig.story .ig-mid{aspect-ratio:9/16}
.ig-mid.txt{background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 26%, var(--surface-2)), var(--surface-2)); aspect-ratio:auto; min-height:260px; display:flex}
.ig-txt{padding:22px 20px; display:grid; align-content:center; gap:10px; width:100%}
.ig-txt p{margin:0; white-space:pre-wrap; font-size:16px; line-height:1.55; font-weight:600}
.ig-m{display:block; width:100%; height:100%; object-fit:cover; background:#000}
.ig-link{position:relative; display:grid; place-items:center; gap:8px; color:#fff; text-decoration:none; align-content:center}
.ig-link img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7}
.ig-play{position:relative; width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center}
.ig-link small{position:relative; font-weight:800}
.ig-car{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; height:100%; scrollbar-width:none}
.ig-car::-webkit-scrollbar{display:none}
.ig-sl{flex:0 0 100%; scroll-snap-align:start; height:100%}
.ig-cnt{position:absolute; top:10px; right:10px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px}
.ig-dots{display:flex; justify-content:center; gap:4px; padding:8px 0 0}
.ig-dots i{width:6px; height:6px; border-radius:50%; background:var(--line-2)}
.ig-dots i[data-on="1"]{background:#3B82F6}
.ig-acts{display:flex; align-items:center; gap:14px; padding:10px 12px 4px}
.ig-leg{margin:0; padding:2px 12px 12px; font-size:13.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.ig-leg[data-cut="1"]{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ig-mais{margin:-8px 12px 12px; color:var(--ink-3); text-decoration:none}

/* espaço do cliente */
.pt-root{max-width:720px; margin:0 auto; display:grid; gap:14px; padding-block:8px 90px}
.pt-preview{display:grid; gap:14px}
.pt-top{display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.pt-top b{display:block; font-size:16px; font-weight:800}
.pt-top small{color:var(--ink-3)}
.pt-num{text-align:center; display:grid}
.pt-num b{font-size:22px; color:var(--brand)}
.pt-tit{display:grid; gap:2px; max-width:470px; width:100%; margin:0 auto}
.pt-tit b{font-size:16px; font-weight:800; text-wrap:balance}
.pt-tit small{color:var(--ink-3); font-size:12.5px}
.pt-item{display:grid; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.pt-acts{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; max-width:470px; width:100%; margin:0 auto}
.btn.lg{min-height:52px; font-size:16px; justify-content:center}
.pt-rot{max-width:470px; margin:0 auto; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.pt-rot .tp-t{font-size:15.5px}
.ig-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px}
.ig-cell{position:relative; aspect-ratio:4/5; border:0; padding:0; background:var(--surface-2); overflow:hidden; cursor:pointer; color:var(--ink)}
.ig-cell img{width:100%; height:100%; object-fit:cover; display:block}
.ig-cell-t{position:absolute; inset:0; display:grid; place-items:center; padding:10px; font-size:12.5px; font-weight:700; text-align:center; line-height:1.3}
.ig-cell-d{position:absolute; left:6px; top:6px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:800; padding:1px 6px; border-radius:6px}
.ig-cell-v{position:absolute; right:6px; top:6px; color:#fff}
.ig-cell-s{position:absolute; left:0; right:0; bottom:0; font-size:10.5px; font-weight:800; padding:3px 6px; background:color-mix(in srgb, var(--sf, #000) 70%, #000); color:#fff; text-align:left}
.pt-cal{min-width:520px}
body.portal-mode .side, body.portal-mode .topbar, body.portal-mode .bnav, body.portal-mode .fbar, body.portal-mode .online-bar{display:none !important}
body.portal-mode .main{margin-left:0}
body.portal-mode .content{padding-top:12px}

@media (max-width: 640px){
  .ig-grid{gap:2px}
  .pe-step{min-width:132px}
  .rk-pod{grid-template-columns:1fr}
}

.rk-nm{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.pt-acts .btn{white-space:nowrap; font-size:15px}
.pt-acts .btn{display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; padding-inline:10px}

/* ===================== v2 ===================== */
.chip{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:700; cursor:pointer; text-align:left}
.chip:hover{border-color:var(--brand); color:var(--ink)}
.chip.on,.chip[aria-pressed="true"]{background:color-mix(in srgb, var(--brand) 16%, var(--surface)); border-color:var(--brand); color:var(--ink)}
.chip:disabled{opacity:.5; cursor:not-allowed}
.chip.sm{min-height:28px; padding:3px 9px; font-size:12px}
.fld-l{font-size:13px; font-weight:700; color:var(--ink-2)}
.inp.sm{min-height:32px; padding:4px 8px; font-size:13px}
.inp.mono{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px}
.spin{display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite; margin-right:6px; vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2.5s} }
.btn.busy,.btn:disabled{opacity:.7; cursor:progress}
label.btn.busy{pointer-events:none; opacity:.6}

/* janelas largas */
.dlg.drawer.xl{width:min(1180px, 100vw)}
#fdInfo.xl{width:min(1180px, 96vw); max-width:96vw}

/* peça aberta em duas colunas */
.pc-head{display:grid; gap:8px; min-width:0}
.pc-bc{display:flex; flex-wrap:wrap; align-items:center; gap:2px; font-size:12.5px; color:var(--ink-3)}
.pc-bc .lnk{font-size:12.5px}
.pc-titulo{width:100%; font-size:22px; font-weight:800; border:1px solid transparent; border-radius:10px; padding:6px 8px; margin-left:-8px; background:transparent; color:var(--ink)}
.pc-titulo:hover{border-color:var(--line)} .pc-titulo:focus{border-color:var(--brand); outline:none; background:var(--surface)}
.pc-salvo{color:var(--ink-3); font-size:12px} .pc-salvo[data-s="ok"]{color:var(--ok)}
.pc-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start}
@media (min-width:900px){ .pc-grid{grid-template-columns:minmax(0,1fr) 320px} }
.pc-main,.pc-side{display:grid; gap:14px; min-width:0}
@media (min-width:900px){ .pc-side{position:sticky; top:0} }
.pc-sec{display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); min-width:0}
.pc-sh{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; font-weight:800; margin:0}
.pc-card{display:grid; gap:6px; padding:14px; border-radius:14px; border:1px solid var(--sf); background:color-mix(in srgb, var(--sf) 10%, var(--surface))}
.pc-agora{font-size:17px}
.resp-l{display:grid; gap:8px}
.resp-it{display:flex; align-items:center; gap:10px; min-width:0}
.resp-it .grow{display:grid; min-width:0} .resp-it small{color:var(--ink-3)}
.rt-met{display:grid; gap:8px}
.rt-ck{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.rt-ck li{display:flex; align-items:flex-start; gap:6px; font-size:13.5px; color:var(--ink-2)}
.rt-ck li[data-s="ok"] span:first-child{color:var(--ok)} .rt-ck li[data-s="warn"] span:first-child{color:var(--warn)} .rt-ck li[data-s="bad"] span:first-child{color:var(--bad)}
.pacote{display:grid; gap:6px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px dashed var(--line-2)}
.cards-ed{display:grid; gap:10px}
.card-ed{display:grid; gap:8px; padding:12px; border-radius:12px; border:1px solid var(--line); border-left:4px solid var(--sf); background:var(--surface-2)}
.card-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.drop{display:grid; place-items:center; gap:4px; padding:22px; border:2px dashed var(--line-2); border-radius:12px; color:var(--ink-3); text-align:center}
.coms{display:grid; gap:10px}
.com{display:flex; gap:10px; align-items:flex-start}
.com p{margin:2px 0 0; white-space:pre-wrap}
.com-novo{display:flex; gap:8px; align-items:flex-end}
.com-novo .inp{flex:1 1 auto; min-width:0}
.com-b .btn{white-space:nowrap}

/* metas por período */
.metas{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr))}
.meta{display:grid; gap:6px; padding:12px; border-radius:14px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--sf)}
.meta-h{display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap}
.meta-n{display:flex; align-items:baseline; gap:8px} .meta-n strong{font-size:20px; font-variant-numeric:tabular-nums} .meta-n span{color:var(--ink-3); font-size:12.5px}

/* motor de visões */
.vw-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.vw-top .vw-tabs{flex:1 1 360px; min-width:0}
.vw-sel{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2)}
.vw-ajuda{margin:8px 2px 10px; font-size:12.5px; color:var(--ink-3)}
.th-sort{border:0; background:none; font:inherit; font-weight:800; color:inherit; cursor:pointer; padding:0; text-align:left}
.tr-click{cursor:pointer} .tr-click:hover td{background:var(--surface-2)}
.tl-bloco{display:grid; gap:6px}
.tl{list-style:none; margin:0; padding:0; display:grid; gap:10px; border-left:2px solid var(--line); margin-left:6px}
.tl-dia{display:grid; gap:6px; padding-left:14px; position:relative}
.tl-dia::before{content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--sf); border:2px solid var(--surface)}
.tl-d{font-size:12.5px; color:var(--ink-2)}
.tl-its{display:grid; gap:6px}
.tl-it{display:grid; gap:2px; text-align:left; padding:8px 10px; border-radius:10px; border:1px solid var(--line); border-left:3px solid var(--sf); background:var(--surface); color:var(--ink); cursor:pointer; font:inherit}
.tl-it small{color:var(--ink-3)}
.gantt{display:grid; gap:4px; min-width:640px}
.gt-row{display:grid; grid-template-columns:220px minmax(0,1fr); gap:8px; align-items:center}
.gt-l{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gt-track{position:relative; height:22px; border-radius:6px; background:var(--surface-2)}
.gt-head .gt-track{background:none; height:18px}
.gt-tick{position:absolute; top:0; font-size:11px; color:var(--ink-3); white-space:nowrap}
.gt-bar{position:absolute; top:3px; bottom:3px; left:var(--l, 0); width:var(--w, 4%); border-radius:5px; border:0; background:var(--sf); cursor:pointer; padding:0}
.gt-hoje{position:absolute; top:-2px; bottom:-2px; left:var(--l, 0); width:2px; background:var(--ok-f)}
.heat{border-collapse:separate; border-spacing:3px; font-size:12px}
.heat th{font-weight:700; color:var(--ink-3); text-align:center}
.heat-l{text-align:left !important; white-space:nowrap; color:var(--ink) !important; padding-right:8px}
.heat-c{width:30px; height:26px; border-radius:5px; border:0; font-size:11px; font-weight:800; color:var(--ink); cursor:pointer; background:var(--surface-2)}
.heat-c[data-n="1"]{background:color-mix(in srgb, var(--sf) 22%, var(--surface))} .heat-c[data-n="2"]{background:color-mix(in srgb, var(--sf) 40%, var(--surface))}
.heat-c[data-n="3"]{background:color-mix(in srgb, var(--sf) 58%, var(--surface))} .heat-c[data-n="4"]{background:color-mix(in srgb, var(--sf) 78%, var(--surface)); color:var(--on)} .heat-c[data-n="5"]{background:var(--sf); color:var(--on)}
.funil{display:grid; gap:6px}
.fn-row{display:grid; grid-template-columns:minmax(120px, 220px) minmax(0,1fr) 44px 90px; gap:10px; align-items:center; text-align:left; padding:6px 8px; border-radius:10px; border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; font:inherit}
.fn-row:hover{border-color:var(--line); background:var(--surface-2)}
.fn-n{font-size:13px; font-weight:700} .fn-row small{color:var(--ink-3); font-size:12px}
.fn-bar{display:flex; justify-content:center; height:22px}
.fn-bar i{display:block; height:100%; border-radius:6px; background:var(--sf)}
.mtz{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.mtz-q{display:grid; gap:8px; align-content:start; padding:12px; border-radius:14px; border:1px solid var(--sf); background:color-mix(in srgb, var(--sf) 8%, var(--surface))}
.mtz-h{display:grid} .mtz-h small{color:var(--ink-3)}
.mtz-its{display:flex; flex-wrap:wrap; gap:6px}
.pg-row{display:grid; grid-template-columns:minmax(120px, 220px) minmax(0,1fr) 48px 70px; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.pg-n{font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .pg-row small{color:var(--ink-3)}
.resumo{display:grid; gap:8px} .resumo p{display:flex; gap:8px; align-items:flex-start; margin:0} .resumo p span:first-child{color:var(--brand); flex:0 0 auto}
.resumo-ia{white-space:pre-wrap; padding:12px; border-radius:12px; background:var(--surface-2); margin-top:8px; font-size:14px; line-height:1.55}
.resumo-ia:empty{display:none}
.dep{max-width:100%; height:auto}
.dep-l{fill:none; stroke:var(--warn-f); opacity:.65; cursor:pointer} .dep-l:hover{opacity:1}
.dep-n{fill:var(--surface-2); stroke:var(--line-2)} .dep-n.b{fill:color-mix(in srgb, var(--warn-f) 18%, var(--surface))}
.dep-t{fill:var(--ink); font-size:12px; font-weight:700}
.ish{display:grid; gap:8px}
.ish-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px}
.ish-c{display:grid; gap:2px; padding:10px; border-radius:12px; border:1px solid var(--sf); background:color-mix(in srgb, var(--sf) 10%, var(--surface)); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.ish-c span{font-size:12.5px; color:var(--ink-2)}
.ish-espinha{display:flex; align-items:center; height:28px; border-radius:999px; background:var(--track); position:relative}
.ish-cabeca{margin-left:auto; padding:4px 14px; border-radius:999px; background:var(--bad-f); color:var(--on-bad-f); font-weight:800; font-size:13px}
.geo{max-width:100%; height:auto}
.geo-bg{fill:var(--surface-2); stroke:var(--line)}
.geo-c{fill:color-mix(in srgb, var(--ok-f) 55%, transparent); stroke:var(--ok-f); cursor:pointer} .geo-c.bad{fill:color-mix(in srgb, var(--bad-f) 55%, transparent); stroke:var(--bad-f)}
.geo-t{fill:var(--ink); font-size:12px; font-weight:700} .geo-uf{fill:var(--ink-3); font-size:28px; font-weight:800; opacity:.35}
.geo-p:focus{outline:none} .geo-p:focus .geo-c{stroke-width:3}
.arv{display:grid; gap:8px}
.arv-r{display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--line); border-left:4px solid var(--sf); background:var(--surface)}
.arv-q,.arv-a{display:grid} .arv-q small,.arv-a small{color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em}
.arv-seta{color:var(--ink-3)}
.arv-n{border:1px solid var(--sf); border-radius:999px; padding:4px 10px; background:color-mix(in srgb, var(--sf) 14%, var(--surface)); color:var(--ink); font-weight:800; cursor:pointer; white-space:nowrap}
@media (max-width:640px){ .arv-r{grid-template-columns:minmax(0,1fr)} .arv-seta{display:none} .fn-row{grid-template-columns:minmax(0,1fr) 44px} .fn-row .fn-bar,.fn-row small{grid-column:1 / -1} .pg-row{grid-template-columns:minmax(0,1fr) 48px} .pg-row .gx-bar{grid-column:1 / -1} .gt-row{grid-template-columns:130px minmax(0,1fr)} }
.chart-box{min-height:200px}
.gx-kv-r{display:contents}

/* gravação em planilha e teleprompter */
.planilha td{vertical-align:middle} .planilha .inp.sm{min-width:110px}
.planilha tr[data-s="ok"] td:first-child{box-shadow:inset 3px 0 0 var(--ok-f)} .planilha tr[data-s="bad"] td:first-child{box-shadow:inset 3px 0 0 var(--bad-f)} .planilha tr[data-s="warn"] td:first-child{box-shadow:inset 3px 0 0 var(--warn-f)}
.doc-l{display:grid; gap:6px; padding:8px 0; border-bottom:1px solid var(--line)}
.tp-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.tp-sl{display:inline-flex; align-items:center; gap:8px; font-size:13px}
.tp-sl input[type=range]{width:140px; accent-color:var(--brand)}
.tp-tela{height:min(70vh, 640px); overflow-y:auto; border-radius:16px; background:#0B0F0D; color:#F4F7F5; padding:40vh 24px; scrollbar-width:none}
.tp-tela:fullscreen{height:100vh; border-radius:0}
.tp-trilho{white-space:pre-wrap; line-height:1.45; font-size:var(--tp-t, 44px); font-family:var(--tp-f, system-ui, sans-serif); max-width:1000px; margin:0 auto; text-align:center}
.tp-trilho[data-esp="1"]{transform:scaleX(-1)}

/* ideias */
.ideias{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}
.ideia{display:grid; gap:6px; align-content:start; text-align:left; padding:10px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font:inherit; min-width:0}
.ideia:hover{border-color:var(--brand)}
.ideia-img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; background:var(--surface-2)}
.ideia-ic{display:grid; place-items:center; aspect-ratio:4/3; border-radius:10px; background:var(--surface-2); color:var(--brand)}
.ideia small{color:var(--ink-2)}

/* IA integrada */
.ia-chat{display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); min-height:240px; max-height:62vh; overflow-y:auto}
.ia-vazio{display:grid; justify-items:center; gap:10px; text-align:center; color:var(--ink-2); padding:20px 0}
.ia-vazio .chipset{justify-content:center}
.ia-m{display:grid; gap:4px; max-width:860px}
.ia-m small{font-size:12px; color:var(--ink-3); font-weight:700}
.ia-m[data-r="user"]{justify-self:end; text-align:right}
.ia-t{white-space:pre-wrap; line-height:1.55; padding:10px 14px; border-radius:14px; background:var(--surface-2)}
.ia-m[data-r="user"] .ia-t{background:color-mix(in srgb, var(--brand) 14%, var(--surface))}

/* ranking e quem é quem */
.coroa{display:inline-flex; color:var(--warn-f); margin-left:2px}
.rk2 td[data-s="ok"]{color:var(--ok)} .rk2 td[data-s="warn"]{color:var(--warn)} .rk2 td[data-s="bad"]{color:var(--bad)}
.rk2 td.num{white-space:nowrap}
.rk2 th .icon-btn.sm{width:24px; height:24px; vertical-align:middle; margin-left:4px}
.quem td{white-space:nowrap} .quem .inp.sm{min-width:140px}
.ln.s1{stroke:var(--c1)} .ln.s2{stroke:var(--c2)} .ln.s3{stroke:var(--ok-f)} .ln.s4{stroke:var(--c7)} .ln.s5{stroke:var(--warn-f)} .ln.s6{stroke:var(--bad-f)}
.dt.s1{fill:var(--c1)} .dt.s2{fill:var(--c2)} .dt.s3{fill:var(--ok-f)} .dt.s4{fill:var(--c7)} .dt.s5{fill:var(--warn-f)} .dt.s6{fill:var(--bad-f)}
.lg .s1,.lgd.s1{background:var(--c1)} .lg .s2,.lgd.s2{background:var(--c2)} .lg .s3,.lgd.s3{background:var(--ok-f)} .lg .s4,.lgd.s4{background:var(--c7)} .lg .s5,.lgd.s5{background:var(--warn-f)} .lg .s6,.lgd.s6{background:var(--bad-f)}

.fn-bar i[data-w="0"]{width:0%} .fn-bar i[data-w="5"]{width:5%} .fn-bar i[data-w="10"]{width:10%} .fn-bar i[data-w="15"]{width:15%} .fn-bar i[data-w="20"]{width:20%} .fn-bar i[data-w="25"]{width:25%} .fn-bar i[data-w="30"]{width:30%} .fn-bar i[data-w="35"]{width:35%} .fn-bar i[data-w="40"]{width:40%} .fn-bar i[data-w="45"]{width:45%} .fn-bar i[data-w="50"]{width:50%} .fn-bar i[data-w="55"]{width:55%} .fn-bar i[data-w="60"]{width:60%} .fn-bar i[data-w="65"]{width:65%} .fn-bar i[data-w="70"]{width:70%} .fn-bar i[data-w="75"]{width:75%} .fn-bar i[data-w="80"]{width:80%} .fn-bar i[data-w="85"]{width:85%} .fn-bar i[data-w="90"]{width:90%} .fn-bar i[data-w="95"]{width:95%} .fn-bar i[data-w="100"]{width:100%}
.lgd i.s1{background:var(--c1)} .lgd i.s2{background:var(--c2)} .lgd i.s3{background:var(--ok-f)} .lgd i.s4{background:var(--c7)} .lgd i.s5{background:var(--warn-f)} .lgd i.s6{background:var(--bad-f)}

/* ===== v4: menu, Meu dia, equipe agora, indicadores, conversas, notícias, integrações, saúde, relatórios, mapa e marcações ===== */
/* toques de pelo menos 44px no celular */
@media (pointer:coarse){ .btn,.chip,.nav-btn,.mn-it,.qd-tab,.icon-btn,.md-k,.eq-av,.ind-v,.conv-it{min-height:44px} .chip.sm{min-height:40px} }

/* menu em tela cheia no celular */
#fdInfo.menu{width:min(560px, 100vw); max-height:100dvh}
.mn-lista{display:grid; gap:6px}
.mn-grp{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.mn-grp > summary{display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; min-height:44px}
.mn-grp > summary::-webkit-details-marker{display:none}
.mn-grp > summary small{margin-left:auto; color:var(--ink-3)}
.mn-grp[open] > .mn-lista{padding:0 8px 10px}
.mn-it{display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--ink); text-align:left; cursor:pointer}
.mn-it:hover{background:var(--surface-2)}
.mn-it[aria-current="page"]{border-color:var(--brand); background:var(--brand-soft)}
.mn-ic{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--surface-2); color:var(--brand); flex:none}
.mn-n{display:grid; min-width:0; flex:1}
.mn-n b{font-size:14px}
.mn-n small{color:var(--ink-3); font-size:12px}
.nav-busca{width:100%; margin-bottom:8px}
.nav-res{display:grid; gap:2px; margin-bottom:8px}
.nav-atalhos{display:grid; gap:2px; margin-bottom:10px}
.nav-gn{margin-left:auto; color:var(--ink-3); font-weight:600}
.pg-ajuda{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:13px}

/* Meu dia */
.md-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:12px}
@media (max-width:640px){ .md-kpis{grid-template-columns:repeat(2, minmax(0,1fr))} }
.md-k{display:grid; gap:2px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); text-align:left; font:inherit}
button.md-k{cursor:pointer}
.md-k b{font-size:22px; font-variant-numeric:tabular-nums}
.md-k small{color:var(--ink-3)}
.md-k[data-s="bad"]{border-color:var(--bad-f); background:var(--bad-soft)}
.md-k[data-s="warn"]{border-color:var(--warn-f); background:var(--warn-soft)}
.md-prox{display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); margin-top:12px; flex-wrap:wrap}
.md-res{display:grid; gap:8px; margin-top:12px}
.md-per{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin}
.md-per .chip{flex:none}
.md-res-l{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--ink-2)}
.md-ctl{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:flex-end}
.md-ctl .fld{min-width:0; flex:1 1 180px}
.dm-info{display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}
.dm-imp{color:var(--warn); font-weight:700}
.vw-ver{display:grid; gap:4px}
.vw-m{min-width:0}

/* estados vazios */
.vazio2{display:grid; justify-items:start; gap:6px; padding:18px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--surface)}
.vazio2 p{margin:0; color:var(--ink-2)}
.vazio2[data-s="bad"]{border-color:var(--bad-f)}
.vazio2[data-s="warn"]{border-color:var(--warn-f)}
.vazio-c{display:grid; place-items:center; min-height:240px}

/* equipe agora */
.eq-strip{display:grid; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); margin-top:12px}
.eq-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.eq-h .lnk,.eq-h .btn{margin-left:auto}
.eq-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px}
.eq-av{position:relative; display:inline-grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border-radius:999px; border:2px solid var(--line); background:var(--surface-2); cursor:pointer}
.eq-av[data-s="ok"]{border-color:var(--ok-f)}
.eq-av[data-s="warn"]{border-color:var(--warn-f)}
.eq-dot{position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:999px; border:2px solid var(--surface); background:var(--idle-f)}
.eq-dot[data-k="online"]{background:var(--ok-f)}
.eq-dot[data-k="semint"]{background:var(--warn-f)}
.eq-dot[data-k="off"]{background:var(--idle-f)}
.eq-dot[data-k="desconhecido"]{background:transparent; border-style:dashed; border-color:var(--ink-3)}

/* indicadores */
.ind-l{display:grid; gap:2px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); overflow:hidden}
.ind-r{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid var(--line)}
.ind-r:first-child{border-top:0}
.ind-n{display:flex; align-items:center; gap:6px; min-width:0; color:var(--ink)}
.ind-v{min-width:64px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:inherit; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; cursor:pointer}
.ind-v[data-s="bad"]{color:var(--bad); border-color:var(--bad-f)}
.ind-v[data-s="warn"]{color:var(--warn); border-color:var(--warn-f)}
.ind-v[data-s="ok"]{color:var(--ok)}
@media (max-width:480px){ .ind-r{grid-template-columns:minmax(0,1fr)} .ind-v{justify-self:start} }

/* desfazer e simulação */
#desfazerBar,.desfazer{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:999px; background:var(--ink); color:var(--bg); box-shadow:var(--shadow); max-width:calc(100vw - 32px)}
.desfazer .btn{background:var(--bg); color:var(--ink)}
.sim-bar{position:sticky; top:env(safe-area-inset-top, 0px); z-index:70; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; background:var(--warn-f); color:var(--on-warn-f); font-weight:700}
body.simulando .main{outline:3px solid var(--warn-f); outline-offset:-3px}

/* conversas */
.conv-wrap{display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; min-height:60dvh}
.conv-l{display:grid; align-content:start; gap:4px; max-height:72dvh; overflow-y:auto}
.conv-it{display:grid; gap:2px; width:100%; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.conv-it[aria-current="true"]{border-color:var(--brand); background:var(--brand-soft)}
.conv-d{display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; min-width:0; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:10px}
.conv-voltar{display:none}
@media (max-width:760px){ .conv-wrap{grid-template-columns:minmax(0,1fr)} .conv-wrap.aberta .conv-l{display:none} .conv-wrap:not(.aberta) .conv-d{display:none} .conv-voltar{display:inline-flex} }
.conv{display:grid; gap:8px; min-width:0}
.msgs{display:grid; align-content:start; gap:8px; max-height:56dvh; overflow-y:auto; padding:4px}
.msg{display:flex; gap:8px; align-items:flex-start; max-width:92%}
.msg.eu{margin-left:auto; flex-direction:row-reverse}
.msg-b{display:grid; gap:4px; padding:8px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); min-width:0}
.msg.eu .msg-b{background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 40%, var(--line))}
.msg-h{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:12px; color:var(--ink-3)}
.msg-h b{color:var(--ink); font-size:13px}
.msg-t{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.msg-a{display:flex; gap:6px; flex-wrap:wrap}
.msg-novo{display:grid; gap:8px; border-top:1px solid var(--line); padding-top:8px}

/* notícias e integrações */
.nt-it{display:grid; gap:6px; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--idle-f); border-radius:var(--r-sm); background:var(--surface)}
.nt-it[data-s="ok"]{border-left-color:var(--ok-f)}
.nt-it[data-s="warn"]{border-left-color:var(--warn-f)}
.nt-it[data-s="bad"]{border-left-color:var(--bad-f)}
.int-c{display:grid; gap:8px; padding:14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.int-c[data-s="ok"]{border-color:var(--ok-f)}
.int-c[data-s="bad"]{border-color:var(--bad-f); background:var(--bad-soft)}
.int-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.int-h .pill{margin-left:auto}

/* relatórios */
.rel-bloco{display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.rel-mini{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px}
.rel-form{display:grid; gap:6px}
.rel-l{display:grid; grid-template-columns:minmax(0,1fr) minmax(120px, 200px); gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line)}
@media (max-width:520px){ .rel-l{grid-template-columns:minmax(0,1fr)} }
.rel-v{display:grid; gap:2px; font-variant-numeric:tabular-nums}
.collab-l{display:grid; gap:2px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm)}

/* saúde em três dimensões */
.s3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px}
@media (max-width:760px){ .s3{grid-template-columns:minmax(0,1fr)} }
.s3-b{display:grid; align-content:start; gap:8px; padding:12px; border:1px solid var(--line); border-top:4px solid var(--idle-f); border-radius:var(--r-sm); background:var(--surface); min-width:0}
.s3-b[data-s="bad"]{border-top-color:var(--bad-f)}
.s3-b[data-s="warn"]{border-top-color:var(--warn-f)}
.s3-b[data-s="ok"]{border-top-color:var(--ok-f)}
.s3-h{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}

/* pesquisa no espaço do cliente */
.pt-pesq{display:grid; gap:10px; padding:16px; border:1px solid var(--brand); border-radius:var(--r); background:var(--brand-soft); margin:12px 0}
.pt-pesq .nbtns{display:flex; flex-wrap:wrap; gap:6px}
.pt-pesq .nb{min-width:44px; min-height:44px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-weight:800; cursor:pointer}
.pt-pesq .nb[data-s="ok"]:hover{border-color:var(--ok-f)}
.pt-pesq .nb[data-s="warn"]:hover{border-color:var(--warn-f)}
.pt-pesq .nb[data-s="bad"]:hover{border-color:var(--bad-f)}
.pt-pesq .nb.none{padding:0 12px; font-weight:600}

/* mapa do processo */
.mapa{display:grid; gap:8px; margin-top:12px}
.mapa-f{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; counter-reset:m}
.mapa-e{position:relative; display:grid; gap:2px; flex:none; width:150px; padding:10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.mapa-e small{color:var(--ink-3); font-variant-numeric:tabular-nums}
.mapa-e span{color:var(--ink-2); font-size:12px}
.mapa-e[data-t="revisao"]{border-color:var(--warn-f)}
.mapa-e[data-t="cliente"],.mapa-e[data-t="cliente_roteiro"]{border-color:var(--c1)}
.mapa-e + .mapa-e::before{content:''; position:absolute; left:-9px; top:50%; width:8px; height:2px; background:var(--line-2)}

/* marcações nas imagens */
.mk-wrap{position:relative; display:inline-block; max-width:100%; cursor:crosshair; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line)}
.mk-img{display:block; max-width:100%; height:auto}
.mk-pt{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, -50%); display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--bad-f); color:var(--on-bad-f); font-weight:800; font-size:13px; border:2px solid var(--surface); box-shadow:var(--shadow); pointer-events:none}
.mk-pt[data-v="antiga"]{background:var(--idle-f); color:var(--on-idle-f)}
.mk-cmp{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.mk-cmp figure{margin:0; display:grid; gap:4px}
.mk-cmp figcaption{color:var(--ink-3); font-size:12px}
@media (max-width:520px){ .mk-cmp{grid-template-columns:minmax(0,1fr)} }
/* contexto do cliente e da unidade nas ações */
.ctx-cli{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2)}
.ctx-cli b{font-size:15px}
.ctx-cli small{color:var(--ink-3)}

/* ===== v6: interface reorganizada ===== */
/* menu lateral: áreas fechadas, favoritos e estrela */
.nav-li{display:flex; align-items:center; gap:2px; min-width:0}
.nav-li > .nav-btn{flex:1; min-width:0}
.nav-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-fav{flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--ink-3); cursor:pointer; opacity:0; transition:opacity .12s}
.nav-li:hover .nav-fav, .nav-fav:focus-visible, .nav-fav.on, .mn-li .nav-fav{opacity:1}
.nav-fav.on{color:var(--warn)}
.nav-fav.on svg{fill:currentColor}
.nav-fav:hover{background:var(--surface-2)}
@media (pointer:coarse){ .nav-fav{opacity:1; width:40px; height:40px} }
.nav-grp{border-top:1px solid var(--line)}
.nav-grp > summary{display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; list-style:none; border-radius:10px; font-weight:700; font-size:14px; color:var(--ink-2); min-height:40px}
.nav-grp > summary::-webkit-details-marker{display:none}
.nav-grp > summary::after{content:''; width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(-45deg); margin-left:6px; transition:transform .15s}
.nav-grp[open] > summary::after{transform:rotate(45deg)}
.nav-grp > summary:hover{background:var(--surface-2); color:var(--ink)}
.nav-grp[open]{padding-bottom:6px}
.nav-grp .nav-btn{padding-left:20px}
.nav-gt{flex:1; min-width:0}
.nav-ajuda{margin-top:8px; border-top:1px solid var(--line); border-radius:0; padding-top:10px}
.mn-li{display:flex; align-items:center; gap:4px}
.mn-li > .mn-it{flex:1; min-width:0}
.mais-h{font-size:13px; font-weight:800; color:var(--ink-3); margin:6px 0 4px}

/* topo: equipe e ajuda no lugar dos avatares */
.tb-eq{white-space:nowrap}
@media (max-width:760px){ .tb-eq{display:none} }

/* menu de ações raras */
details.mm{position:relative; display:inline-block}
details.mm > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
details.mm > summary::-webkit-details-marker{display:none}
.mm-l{position:absolute; right:0; top:calc(100% + 6px); z-index:40; display:grid; gap:4px; min-width:220px; max-width:min(320px, 86vw); padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow)}
.mm-l .btn{justify-content:flex-start; width:100%; border-color:transparent; background:transparent; text-align:left}
.mm-l .btn:hover{background:var(--surface-2)}
.mm-l .btn.danger{color:var(--bad)}
.gx-acts details.mm .mm-l{right:0}

/* "Sobre esta tela" fechado */
details.sobre{margin:0 0 12px}
details.sobre > summary{display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink-2); font-size:13px; font-weight:600; list-style:none}
details.sobre > summary::-webkit-details-marker{display:none}
details.sobre[open] > .note-box{margin-top:8px}

/* quadro individual */
.q-atencao{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 14px; border-radius:var(--r-sm); border:1px solid var(--bad-f); background:var(--bad-soft); color:var(--ink); margin-bottom:12px}
.q-atencao > span:first-child{color:var(--bad)}
.q-atencao .lnk{font-weight:700; color:var(--bad)}
.q-atencao .grow{display:flex; flex-wrap:wrap; gap:4px 10px}
.q-prox{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--line); border-left:4px solid var(--brand); background:var(--surface); margin-bottom:14px}
.q-prox .grow{display:grid; gap:2px; min-width:0; flex:1 1 240px}
.q-prox b{font-size:16px}
.q-filtro{margin:-6px 0 12px}
.q-grid{display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:14px; align-items:start}
@media (max-width:980px){ .q-grid{grid-template-columns:minmax(0, 1fr)} }
.q-col{display:grid; gap:12px; min-width:0; align-content:start; min-height:40px}
.q-grid.edit .q-col{padding:8px; border:2px dashed var(--line-2); border-radius:14px}
.q-sec{font-size:12px; font-weight:800; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; margin:2px 4px}
.qb{display:grid; gap:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); min-width:0}
.qb-h{display:flex; align-items:center; gap:6px; padding:6px 8px 6px 4px; min-width:0}
.qb-tog{display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:8px 8px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; text-align:left; cursor:pointer; border-radius:10px}
.qb-tog:hover{background:var(--surface-2)}
.qb-tog b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qb-tog::after{content:''; width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); margin-left:auto; flex:none}
.qb.rec .qb-tog::after{transform:rotate(-45deg)}
.qb-n{flex:none; min-width:24px; height:22px; padding:0 7px; border-radius:999px; display:inline-grid; place-items:center; font-size:12px; font-weight:800; background:var(--surface-2); color:var(--ink-2); font-variant-numeric:tabular-nums}
.qb-n[data-s="warn"]{background:var(--warn-soft); color:var(--warn)}
.qb-n[data-s="bad"]{background:var(--bad-soft); color:var(--bad)}
.qb-n[data-s="ok"]{background:var(--ok-soft); color:var(--ok)}
.qb-ver{flex:none; font-size:13px}
.qb-b{display:grid; gap:8px; padding:0 12px 12px; min-width:0}
.qb.rec .qb-b{display:none}
.qb-res{margin:0; color:var(--ink-2); font-size:13px}
.qb .gx-list.compacta .gx-row{padding:8px 10px}
.gx-list.compacta{gap:6px}
.gx-list.compacta .gx-row{padding:9px 12px}
.qb.edit{border-style:dashed; border-color:var(--brand); cursor:grab}
.qb.edit.arrastando{opacity:.5}
.qb.edit.alvo{box-shadow:0 0 0 3px var(--brand)}
.qb-ed{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:14px 14px 0 0}
.qb-alca{display:inline-grid; place-items:center; width:28px; height:28px; color:var(--ink-3); cursor:grab}
.q-modo{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border-radius:var(--r-sm); border:2px solid var(--brand); background:var(--brand-soft); margin-bottom:12px}
.q-modo .grow{min-width:0; flex:1 1 260px}
.q-opts{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-bottom:8px}
.q-opts .fld{min-width:0}
.qcal{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px}
.qcal-d{display:grid; gap:2px; padding:6px 4px; border-radius:8px; background:var(--surface-2); text-align:center; min-width:0}
.qcal-d small{font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qcal-d b{font-variant-numeric:tabular-nums}
.qcal-d[data-s="warn"]{background:var(--warn-soft)}
.qcal-d[data-s="idle"] b{color:var(--brand)}

/* peça: seções secundárias fechadas */
.pc-det{border:1px solid var(--line); border-radius:14px; background:var(--surface); min-width:0}
.pc-det > summary{list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:8px; min-height:44px}
.pc-det > summary::-webkit-details-marker{display:none}
.pc-det > summary::after{content:''; width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(-45deg); margin-left:auto}
.pc-det[open] > summary::after{transform:rotate(45deg)}
.pc-det > .pc-sec{border:0; padding-top:0; background:transparent}
.pc-sync{display:block}
.pub-canais{display:flex; flex-wrap:wrap; gap:6px}

/* Como funciona */
.como-top{display:grid; gap:10px; margin-bottom:14px}
.como-busca{font-size:16px; min-height:48px}
.como-cats{display:grid; gap:8px}
.como-cat{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); margin-top:8px}
.como-cat > summary{display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; min-height:44px}
.como-cat > summary::-webkit-details-marker{display:none}
.como-cat > summary small{margin-left:auto; color:var(--ink-3)}
.como-cat[open] > :not(summary){margin:0 10px 10px}
.guia{list-style:none; counter-reset:gp; display:grid; gap:12px; padding:0; margin:12px 0 0}
.guia-pt{counter-increment:gp; display:grid; gap:4px; padding-left:36px; position:relative}
.guia-pt::before{content:counter(gp); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-weight:800; font-size:13px}
.guia-pt p{margin:0; color:var(--ink-2); max-width:68ch}
.guia-passos{margin:0; padding-left:20px; display:grid; gap:4px; color:var(--ink-2); max-width:68ch}
.guia-ex{margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); border:1px dashed var(--line-2); background:var(--surface-2)}
.guia-ex p{margin:4px 0 0}
.guia-meta{margin:0 0 8px}

/* tours */
.tour-b{position:fixed; z-index:1000; display:grid; gap:6px; padding:14px 16px; border-radius:14px; border:1px solid var(--brand); background:var(--surface); color:var(--ink); box-shadow:0 14px 40px rgba(0,0,0,.28); outline:none}
.tour-b p{margin:0; color:var(--ink-2)}
.tour-ctl{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.tour-nunca{justify-self:start; font-size:12.5px}
.tour-alvo{position:relative; z-index:999; outline:3px solid var(--brand) !important; outline-offset:3px; border-radius:10px}
.tour-oferta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-2); margin-bottom:12px; font-size:14px}
.tour-oferta > span:first-child{color:var(--brand)}

/* esteira */
.est-fmt{margin:12px 0}
.est-macros{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
.est-tile{position:relative; display:grid; border:1px solid var(--line); border-radius:12px; background:var(--surface); border-top:4px solid var(--idle-f); min-width:0}
.est-tile[data-s="ok"]{border-top-color:var(--ok-f)} .est-tile[data-s="warn"]{border-top-color:var(--warn-f)} .est-tile[data-s="bad"]{border-top-color:var(--bad-f)}
.est-tile[data-s="vazio"]{opacity:.7}
.est-tile.on{box-shadow:0 0 0 2px var(--brand)}
.est-tb{display:grid; gap:2px; padding:10px 34px 10px 12px; border:0; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; min-height:72px; border-radius:12px}
.est-tb:hover{background:var(--surface-2)}
.est-n{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.est-tb b{font-size:13.5px}
.est-tb small{color:var(--ink-3); font-size:12px}
.est-tile[data-s="bad"] .est-tb small{color:var(--bad); font-weight:700}
.est-q{position:absolute; top:6px; right:6px}
.est-sync{margin:10px 0}
.est-lista{display:grid; gap:10px; margin-top:6px}
@media (max-width:420px){ .est-macros{grid-template-columns:repeat(2, minmax(0, 1fr))} .qb-ed .btn{padding:0 8px} }
.pc-sec > *, .qb-b > *, .como-cat > *{min-width:0}
@media (max-width:760px){ .qb-ed .btn, .qb-ed .icon-btn{min-height:44px} .q-modo .btn, .tour-ctl .btn{min-height:44px} }
/* pontos */
.pt-formula{display:grid; gap:4px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--line); border-left:4px solid var(--brand); background:var(--surface); margin-bottom:12px}
.pt-formula span{color:var(--ink-2)}
.pt-top{display:grid; gap:10px; margin:6px 0 12px}
.pt-card{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); margin-top:8px; min-width:0}
.pt-card > summary{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px; cursor:pointer; list-style:none; min-height:48px}
.pt-card > summary::-webkit-details-marker{display:none}
.pt-ic{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--ok-soft); color:var(--ok); flex:none}
.pt-card[data-g="perder"] .pt-ic{background:var(--bad-soft); color:var(--bad)}
.pt-meu .pt-ic{background:var(--brand-soft); color:var(--brand)}
.pt-vale{margin-left:auto; color:var(--ink-2); font-size:13.5px; font-weight:600}
.pt-body{display:grid; gap:10px; padding:0 14px 14px; min-width:0}
.pt-body > *{min-width:0}
.pt-body h4{margin:6px 0 0; font-size:14px}
.pt-body p{margin:0; color:var(--ink-2); max-width:72ch}
.pt-cen td:first-child{width:55%}
.pt-cen td{white-space:normal; text-align:left}
.pt-req{margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); border:1px dashed var(--line-2)}
.pt-sim{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px}
.pt-sim-res{margin-top:12px}

/* ===================================================================
   v7: linguagem visual inspirada em Liquid Glass
   Vidro só na camada de navegação e controles (menu lateral, barra superior,
   barra de baixo, menus, painéis sobrepostos, balões e avisos).
   Conteúdo, tarefas, formulários e números ficam em superfícies estáveis.
   Modo "menos transparência" troca todo vidro por superfície sólida.
   =================================================================== */
:root:not(.zz1):not(.zz2){
  /* fundo calmo com profundidade, sem movimento */
  --bg:#060A0B; --surface:#0E1514; --surface-2:#131C1A; --surface-3:#18221F;
  --ink:#EEF5F1; --ink-2:#B6C5BE; --ink-3:#9DADA6;
  --line:#1D2825; --line-2:#2B3834;
  /* vidro: tinta, brilho da borda e sombra */
  --glass-tint:rgba(16,24,22,.84);
  --glass-tint-strong:rgba(16,24,22,.9);
  --glass-hi:rgba(255,255,255,.07);
  --glass-edge:rgba(255,255,255,.10);
  --glass-edge-2:rgba(255,255,255,.05);
  --glass-shadow:0 10px 32px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.05) inset;
  --glass-blur:blur(20px) saturate(150%);
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:140ms; --t-mid:200ms;
  --focus:#7EE2B0;
}
body::before{background:
  radial-gradient(1100px 620px at 8% -12%, rgba(34,197,94,.13), transparent 62%),
  radial-gradient(900px 520px at 104% -6%, rgba(56,189,248,.08), transparent 60%),
  radial-gradient(900px 700px at 60% 118%, rgba(20,184,166,.07), transparent 62%)}

/* ---------- material de vidro ---------- */
.side, .topbar, .bnav, .mm-l, .gs-res, .tour-b, .toast, .tb-salvo-pop{
  background:linear-gradient(180deg, var(--glass-hi), transparent 46%), var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-color:var(--glass-edge);
}
.side{border-right:1px solid var(--glass-edge); box-shadow:1px 0 0 var(--glass-edge-2)}
.topbar{border-bottom:1px solid var(--glass-edge); box-shadow:0 1px 0 var(--glass-edge-2), 0 6px 18px rgba(0,0,0,.18)}
.bnav{border-top:1px solid var(--glass-edge); box-shadow:0 -8px 24px rgba(0,0,0,.28)}
.mm-l, .gs-res{background:linear-gradient(180deg, var(--glass-hi), transparent 50%), var(--glass-tint-strong); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); border-radius:14px}
.tour-b{background:linear-gradient(180deg, var(--glass-hi), transparent 50%), var(--glass-tint-strong); border:1px solid rgba(126,226,176,.45); box-shadow:var(--glass-shadow)}
.toast{background:linear-gradient(180deg, var(--glass-hi), transparent 50%), var(--glass-tint-strong); border:1px solid var(--glass-edge); color:var(--ink); box-shadow:var(--glass-shadow)}
/* painéis sobrepostos: moldura de vidro denso; o conteúdo dentro fica estável */
.dlg{background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 120px), rgba(14,21,20,.97); border:1px solid var(--glass-edge); box-shadow:0 24px 70px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset}
.dlg::backdrop{background:rgba(3,7,6,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
/* nada de vidro sobre vidro: o que fica dentro do vidro não ganha outro vidro */
.side .nav-btn, .side .nav-grp, .topbar .btn, .topbar .icon-btn, .topbar .tb-search{-webkit-backdrop-filter:none; backdrop-filter:none}
.topbar .tb-search{background:rgba(255,255,255,.05); border:1px solid var(--glass-edge-2)}
.topbar .btn:not(.primary), .topbar .icon-btn{background:rgba(255,255,255,.04); border-color:var(--glass-edge-2)}
.side .nav-btn:hover{background:rgba(255,255,255,.06)}
.side .nav-btn[aria-current="page"]{background:rgba(34,197,94,.14); border-color:rgba(74,222,128,.55); color:#F2FFF7}
.nav-grp{border-top-color:var(--glass-edge-2)}

/* ---------- conteúdo: superfícies estáveis, menos bordas ---------- */
.qb, .pc-sec, .pt-card, .como-cat, .est-tile, .q-prox{background:var(--surface); border-color:var(--line)}
.qb{border-radius:16px}
/* dentro de um bloco, as linhas não viram cartões dentro de cartões */
.qb .gx-list{gap:0}
.qb .gx-row{background:transparent; border:0; border-left:3px solid var(--idle-f); border-radius:0; padding:10px 10px 10px 12px}
.qb .gx-row + .gx-row{box-shadow:0 -1px 0 var(--line) inset; border-top:1px solid var(--line)}
.qb .gx-row[data-s="bad"]{border-left-color:var(--bad-f)} .qb .gx-row[data-s="warn"]{border-left-color:var(--warn-f)} .qb .gx-row[data-s="ok"]{border-left-color:var(--ok-f)}
.qb .gx-row[data-s="idle"]{border-left-color:var(--line-2)}
.q-prox{border-left-width:4px; border-left-color:var(--brand); box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
/* hierarquia: título, conteúdo e comandos com espaçamento constante */
.page-h h1, .ph h1, h1.pt{letter-spacing:-.01em}
.qb-h{padding:8px 10px 6px 6px}
.qb-b{padding:0 14px 14px}

/* ---------- uma ação principal: secundárias com menos peso ---------- */
.gx-acts .btn:not(.primary), .inline-row .btn:not(.primary):not(.danger){background:transparent; border-color:var(--line-2)}
.btn.primary{box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(34,197,94,.18)}
.btn.danger{color:var(--bad)}

/* ---------- foco visível e alvos confortáveis ---------- */
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}
.btn:focus-visible, .chip:focus-visible, .nav-btn:focus-visible, summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
@media (pointer:coarse){ .gx-acts .btn, .qb-tog, .est-tb, .pt-card > summary, .como-cat > summary, details.mm > summary{min-height:44px} }

/* ---------- transições curtas que explicam abertura, seleção e estado ---------- */
.btn, .chip, .nav-btn, .qb-tog, .est-tb, .nav-fav, .gx-row{transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
@keyframes lgIn{from{opacity:0; transform:translateY(6px) scale(.985)} to{opacity:1; transform:none}}
@keyframes lgFade{from{opacity:0} to{opacity:1}}
dialog.dlg[open]{animation:lgIn var(--t-mid) var(--ease)}
.mm[open] > .mm-l, .tour-b, .gs-res:not([hidden]){animation:lgIn var(--t-fast) var(--ease)}
.qb:not(.rec) > .qb-b, .pt-card[open] > .pt-body, .pc-det[open] > .pc-sec, .como-cat[open] > :not(summary), .nav-grp[open] > .nav-li{animation:lgFade var(--t-mid) var(--ease)}
.est-tile.on{box-shadow:0 0 0 2px var(--brand), 0 8px 24px rgba(34,197,94,.12)}

/* ---------- salvamento: salvando, salvo e falha ---------- */
.tb-salvo{display:inline-flex; align-items:center; gap:6px; padding:0 10px; height:32px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-2); background:rgba(255,255,255,.04); border:1px solid var(--glass-edge-2); white-space:nowrap}
.tb-salvo[data-s="salvando"]{color:var(--warn)}
.tb-salvo[data-s="salvo"]{color:var(--ok)}
.tb-salvo[data-s="falha"]{color:#fff; background:var(--bad-f); border-color:var(--bad-f)}
.tb-salvo[data-s="off"]{color:var(--warn); border-color:var(--warn-f)}
.tb-salvo .dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.tb-salvo[data-s="salvando"] .dot{animation:lgPulse 1s ease-in-out infinite}
@keyframes lgPulse{50%{opacity:.35}}
@media (max-width:760px){ .tb-salvo .tx{display:none} .tb-salvo{padding:0 9px} }

/* ---------- barras fixas não cobrem conteúdo ---------- */
@media (max-width:959px){ .content{padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px))} dialog.dlg .dlg-foot, dialog.dlg footer{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))} }
.tour-b{max-height:calc(100vh - 24px); overflow:auto}

/* ---------- texto maior quando a pessoa pede ---------- */
html.lg-texto body{font-size:17px}
html.lg-texto .nav-btn, html.lg-texto .gx-t{font-size:16px}
html.lg-texto .gx-s, html.lg-texto .hint, html.lg-texto small{font-size:14px}

/* ---------- modo com menos transparência (escolha da pessoa ou do sistema) ---------- */
html.lg-solid .side, html.lg-solid .topbar, html.lg-solid .bnav, html.lg-solid .mm-l, html.lg-solid .gs-res, html.lg-solid .tour-b, html.lg-solid .toast, html.lg-solid .dlg{background:var(--surface-2) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
html.lg-solid .side{background:#0B1110 !important}
html.lg-solid .dlg::backdrop{background:rgba(3,7,6,.82); -webkit-backdrop-filter:none; backdrop-filter:none}
html.lg-solid body::before{display:none}
@media (prefers-reduced-transparency: reduce){
  html:not(.lg-vidro) .side, html:not(.lg-vidro) .topbar, html:not(.lg-vidro) .bnav, html:not(.lg-vidro) .mm-l, html:not(.lg-vidro) .gs-res, html:not(.lg-vidro) .tour-b, html:not(.lg-vidro) .toast, html:not(.lg-vidro) .dlg{background:var(--surface-2) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
}
/* sem suporte a desfoque: superfície sólida, nunca texto sobre transparência fraca */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side, .topbar, .bnav, .mm-l, .gs-res, .tour-b, .toast, .dlg{background:var(--surface-2)}
}
/* ---------- menos movimento ---------- */
html.lg-calmo *, html.lg-calmo *::before, html.lg-calmo *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important}
}

/* ---------- aparência: painel de preferências ---------- */
.ap-grid{display:grid; gap:10px}
.ap-op{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface)}
.ap-op .grow{display:grid; gap:2px; min-width:0}
.ap-op small{color:var(--ink-3)}
.sw-l{position:relative; width:46px; height:28px; flex:none}
.sw-l input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1}
.sw-l span{position:absolute; inset:0; pointer-events:none; border-radius:999px; background:var(--surface-3); border:1px solid var(--line-2); transition:background-color var(--t-fast)}
.sw-l span::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#DDE8E2; transition:transform var(--t-fast) var(--ease)}
.sw-l input:checked + span{background:var(--brand); border-color:var(--brand)}
.sw-l input:checked + span::after{transform:translateX(18px); background:#fff}
.sw-l input:focus-visible + span{outline:2px solid var(--focus); outline-offset:2px}

/* ---------- quadro: abas Demandas, Tarefas, Entregas e Futuro ---------- */
.q-abas{display:flex; gap:6px; overflow-x:auto; padding:4px; margin-bottom:12px; border-radius:14px; background:var(--surface); border:1px solid var(--line); scrollbar-width:none}
.q-abas::-webkit-scrollbar{display:none}
.q-aba{display:inline-flex; align-items:center; gap:8px; flex:none; min-height:40px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:var(--ink-2); font:inherit; font-weight:700; cursor:pointer}
.q-aba:hover{background:var(--surface-2); color:var(--ink)}
.q-aba[aria-selected="true"]{background:var(--brand-soft); color:#F2FFF7; box-shadow:0 0 0 1px rgba(74,222,128,.45) inset}
.q-aba-b{display:grid; gap:12px}
.q-vinc{display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--ink-2); font-size:12.5px}
.q-vinc svg{color:var(--brand)}
.q-nova{display:grid; grid-template-columns:minmax(0,1fr) 160px auto auto; gap:8px; align-items:center}
@media (max-width:640px){ .q-nova{grid-template-columns:minmax(0,1fr) 1fr} .q-nova .btn{width:100%} }
.ent-ms{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:12px 0}
.ent-m{display:grid; gap:2px; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.ent-m:hover:not([disabled]){border-color:var(--line-2); background:var(--surface-2)}
.ent-m[disabled]{cursor:default; opacity:.75}
.ent-m b{font-size:22px; font-variant-numeric:tabular-nums}
.ent-m span{font-weight:700; font-size:13.5px}
.ent-m small{color:var(--ink-3); font-size:12px}
.fut-g{display:grid; gap:4px; margin:0 10px 10px; padding:8px 10px; border-left:3px solid var(--line-2); min-width:0}
.fut-g[data-s="ok"]{border-left-color:var(--ok-f)} .fut-g[data-s="warn"]{border-left-color:var(--warn-f)}
.pc-etapa-dica{margin:0 0 4px; padding:10px 12px; border-radius:10px; background:var(--brand-soft); color:var(--ink); font-size:14px}
/* estoque: contagens neutras, cor só no estado */
.est-resumo{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.est-cnt{display:inline-flex; align-items:baseline; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.est-cnt b{font-size:18px; font-variant-numeric:tabular-nums}
.est-cnt span{color:var(--ink-2); font-size:13px}
.est-cnt[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft)}
.barra-zero{display:inline-block; min-width:18px; color:var(--ink-3); font-size:12px}
.rk-ciclo{margin:0 0 12px; color:var(--ink-2)}
.rk3 td, .rk3 th{white-space:nowrap}
/* treinamento */
.treino-tag{display:grid; gap:2px; padding:10px 12px; margin-bottom:10px; border-radius:12px; border:1px dashed var(--warn-f); background:var(--warn-soft)}
.treino-tag small{color:var(--ink-2)}
.treino-faixa{padding:10px 14px; margin-bottom:12px; border-radius:12px; border:1px dashed var(--warn-f); background:var(--warn-soft); color:var(--ink); font-size:14px}
html.modo-treino .topbar{box-shadow:0 2px 0 var(--warn-f)}
.nav-ap{margin-top:2px}
/* tour com detalhe e progresso */
.tour-dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; margin:4px 0 0; font-size:13px}
.tour-dl dt{color:var(--ink-3); font-weight:700}
.tour-dl dd{margin:0; color:var(--ink-2)}
.tour-prog{height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.tour-prog i{display:block; height:100%; background:var(--brand); width:0}
.tour-prog i[data-w="0"]{width:0%}
.tour-prog i[data-w="5"]{width:5%}
.tour-prog i[data-w="10"]{width:10%}
.tour-prog i[data-w="15"]{width:15%}
.tour-prog i[data-w="20"]{width:20%}
.tour-prog i[data-w="25"]{width:25%}
.tour-prog i[data-w="30"]{width:30%}
.tour-prog i[data-w="35"]{width:35%}
.tour-prog i[data-w="40"]{width:40%}
.tour-prog i[data-w="45"]{width:45%}
.tour-prog i[data-w="50"]{width:50%}
.tour-prog i[data-w="55"]{width:55%}
.tour-prog i[data-w="60"]{width:60%}
.tour-prog i[data-w="65"]{width:65%}
.tour-prog i[data-w="70"]{width:70%}
.tour-prog i[data-w="75"]{width:75%}
.tour-prog i[data-w="80"]{width:80%}
.tour-prog i[data-w="85"]{width:85%}
.tour-prog i[data-w="90"]{width:90%}
.tour-prog i[data-w="95"]{width:95%}
.tour-prog i[data-w="100"]{width:100%}
.pc-sec > .stack, .stack > *{min-width:0}
.btn{max-width:100%}
@media (max-width:480px){ .inline-row .btn, .gx-acts .btn{white-space:normal; height:auto; min-height:40px; text-align:left; line-height:1.25; padding-top:8px; padding-bottom:8px} }
/* menu lateral: nada vaza da coluna; títulos das áreas em caixa normal */
#navOp > *, #navOp .nav-grp > *{min-width:0}
#navOp .nav-li{width:100%; min-width:0}
#navOp .nav-grp > summary{text-transform:none; letter-spacing:0; font-size:14px; font-weight:700; color:var(--ink-2)}
#navOp .nav-gt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#navOp .nav-grp[open] > summary{color:var(--ink)}
.pc-card .gx-kv{grid-template-columns:1fr; gap:2px 0}
.pc-card .gx-kv dt{margin-top:6px; font-size:12.5px}
.pc-card .gx-kv dd{margin:0}
.pc-card .lnk{display:inline-flex; gap:6px; align-items:center}

/* =====================================================================
   Cactus Operação v2
   Layout: menu lateral de vidro (recolhe em trilho), barra de baixo com facho no celular,
   painéis no padrão Dashboard V16 (cartões brancos, bordas suaves, abas em pílula).
   Cores da Cactus: ver a paleta nos tokens abaixo.
   ===================================================================== */

/* ---------- tokens: paleta Cactus ----------
   0F1F17 floresta escura · 1E3A2E floresta · 3E5A3F oliva · 6B7F67 sálvia · C7CBB8 areia · 3D4337 grafite oliva
   O verde-limão só aparece como luz (facho, luminária, destaque no escuro). Vermelho, amarelo e azul só em estados e gráficos. */
html.cx-light:not(.zz1):not(.zz2){
  --bg:#ECEEE4; --surface:#FAFAF6; --surface-2:#F2F3EB; --surface-3:#E6E9DC;
  --ink:#0F1F17; --ink-2:#3D4337; --ink-3:#5B6756;
  --line:#D9DCCB; --line-2:#C7CBB8;
  --brand:#3E5A3F; --brand-2:#1E3A2E; --brand-soft:#DDE4D0; --on-brand:#FFFFFF;
  --hero-a:#0F1F17; --hero-b:#1E3A2E; --hero-ink:#F1F3E8; --lime:#D6E668;
  --ok:#2F6B45; --ok-soft:#DCEBDD; --ok-f:#4C8F5F; --on-ok-f:#FFFFFF;
  --warn:#8A5A00; --warn-soft:#F8EBC4; --warn-f:#DDA52A; --on-warn-f:#2B1D00;
  --bad:#A8322A; --bad-soft:#F6DDD9; --bad-f:#CF4A3F; --on-bad-f:#FFFFFF;
  --idle:#4F5A49; --idle-soft:#E3E6D8; --idle-f:#8A9683; --on-idle-f:#FFFFFF;
  --lg-ok:#4C8F5F; --lg-warn:#DDA52A; --lg-bad:#CF4A3F;
  --track:#DFE2D3; --grid:#DDE0D0; --axis:#C7CBB8;
  --c1:#3E5A3F; --c2:#CF4A3F; --c4:#3B6EA8; --c5:#DDA52A; --c7:#6B5BB0;
  --h-blue:#3B6EA8; --h-purple:#6B5BB0; --h-teal:#3E5A3F; --h-amber:#DDA52A; --h-green:#4C8F5F; --h-red:#CF4A3F; --h-pink:#B84F7E;
  --shadow:0 1px 2px rgba(15,31,23,.05), 0 12px 30px rgba(15,31,23,.07);
  --glass-tint:rgba(250,250,246,.76); --glass-tint-strong:rgba(250,250,246,.93);
  --glass-hi:rgba(255,255,255,.8); --glass-edge:rgba(15,31,23,.10); --glass-edge-2:rgba(15,31,23,.06);
  --glass-shadow:0 12px 36px rgba(15,31,23,.16), 0 1px 0 rgba(255,255,255,.9) inset;
  --focus:#3E5A3F; --r:22px; --r-sm:14px;
  color-scheme:light;
}
html.cx-dark:not(.zz1):not(.zz2){
  --bg:#0F1F17; --surface:#162B20; --surface-2:#1E3A2E; --surface-3:#26463A;
  --ink:#ECEFE2; --ink-2:#C7CBB8; --ink-3:#97A38F;
  --line:#264536; --line-2:#355A45;
  --brand:#D6E668; --brand-2:#B9CB4F; --brand-soft:#23402F; --on-brand:#0F1F17;
  --hero-a:#1E3A2E; --hero-b:#3E5A3F; --hero-ink:#F1F3E8; --lime:#D6E668;
  --ok:#8FD6A0; --ok-soft:#1D3A2A; --ok-f:#4FA76A; --on-ok-f:#06170E;
  --warn:#F0C45A; --warn-soft:#3A2F12; --warn-f:#E5A92F; --on-warn-f:#2B1D00;
  --bad:#FF9188; --bad-soft:#3E1D1A; --bad-f:#E5584B; --on-bad-f:#2B0A07;
  --idle:#B3BEA9; --idle-soft:#20362A; --idle-f:#6F8366; --on-idle-f:#0F1F17;
  --lg-ok:#8FD6A0; --lg-warn:#F0C45A; --lg-bad:#FF9188;
  --track:#21392C; --grid:#21392C; --axis:#355A45;
  --c1:#D6E668; --c2:#FF9188; --c4:#7FB2E5; --c5:#F0C45A; --c7:#B2A6F0;
  --h-blue:#7FB2E5; --h-purple:#B2A6F0; --h-teal:#8FD6A0; --h-amber:#F0C45A; --h-green:#4FA76A; --h-red:#E5584B; --h-pink:#E58BB4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px rgba(0,0,0,.34);
  --glass-tint:rgba(15,31,23,.80); --glass-tint-strong:rgba(15,31,23,.93);
  --glass-hi:rgba(255,255,255,.07); --glass-edge:rgba(255,255,255,.11); --glass-edge-2:rgba(255,255,255,.06);
  --glass-shadow:0 12px 36px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
  --focus:#D6E668; --r:22px; --r-sm:14px;
  color-scheme:dark;
}
html.cx-light body{background:var(--bg); color:var(--ink)}
html.cx-light body::before{background:
  radial-gradient(900px 480px at 6% -8%, rgba(62,90,63,.10), transparent 62%),
  radial-gradient(700px 420px at 100% 0%, rgba(214,230,104,.22), transparent 62%),
  radial-gradient(800px 500px at 60% 120%, rgba(107,127,103,.10), transparent 62%)}
html.cx-dark body{background:var(--bg); color:var(--ink)}
html.cx-dark body::before{background:
  radial-gradient(1000px 560px at 8% -12%, rgba(214,230,104,.10), transparent 62%),
  radial-gradient(900px 520px at 104% -6%, rgba(107,127,103,.16), transparent 60%),
  radial-gradient(900px 700px at 60% 118%, rgba(62,90,63,.20), transparent 62%)}

/* ---------- peças que eram escuras fixas ---------- */
html.cx-light .dlg{background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 70px rgba(14,31,23,.22)}
html.cx-light .dlg::backdrop{background:rgba(14,31,23,.38)}
html.cx-light .topbar .tb-search{background:rgba(14,31,23,.04); border-color:var(--line)}
html.cx-light .topbar .btn:not(.primary), html.cx-light .topbar .icon-btn{background:var(--surface); border-color:var(--line)}
html.cx-light .tb-salvo{background:var(--surface); border-color:var(--line)}
html.cx-light .tour-b{border-color:var(--brand)}
html.cx-light .inp, html.cx-light select.inp, html.cx-light textarea.inp{background:var(--surface); border-color:var(--line-2)}
html.cx-light .toast{background:var(--ink); color:#fff}

/* ---------- estrutura geral ---------- */
body.cx2{font-size:15px}
body.cx2 .app{transition:grid-template-columns .24s cubic-bezier(.2,.7,.2,1)}
@media (min-width:960px){
  html:root:not(.zz1):not(.zz2){--side:268px}
  html.cx-rail:root:not(.zz1):not(.zz2){--side:78px}
}
body.cx2 .content{padding-top:18px}
@media (min-width:960px){ body.cx2 .content{padding:22px 34px 72px} }

/* ---------- menu lateral de vidro ---------- */
body.cx2 .side{padding:14px 12px 12px; gap:10px; overflow:hidden}
body.cx2 #navOp{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; padding-right:2px; margin-right:-2px}
body.cx2 .side-foot{flex:0 0 auto}
body.cx2 .side-logo{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 6px}
body.cx2 .side-logo img{height:32px; width:auto; max-width:176px; object-fit:contain; object-position:left center}
body.cx2 .side-foot .side-brand, body.cx2 .side-foot .side-today{display:none}
body.cx2 .side-foot{gap:8px; margin-top:auto; padding-top:8px; border-top:1px solid var(--glass-edge-2)}
body.cx2 .snav{display:flex; flex-direction:column; gap:2px; position:relative; min-height:0}
.cx-sec{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:12px 12px 4px}
.cx-sec:first-of-type{padding-top:4px}
.cx-find{position:relative; margin:2px 0 2px}
.cx-find .cx-fi{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; display:grid}
.cx-find input{width:100%; min-height:40px; padding:0 40px 0 36px; border-radius:12px; border:1px solid var(--glass-edge); background:rgba(127,143,136,.10); color:var(--ink); font-size:14px}
.cx-find input::placeholder{color:var(--ink-3)}
.cx-find kbd{position:absolute; right:8px; top:50%; transform:translateY(-50%); font:700 10.5px/1 inherit; color:var(--ink-3); border:1px solid var(--glass-edge); border-radius:6px; padding:3px 5px; background:rgba(127,143,136,.10)}
body.cx2 #navOp .nav-res{display:grid; gap:2px; margin:4px 0}
body.cx2 #navOp .nav-li{position:relative; display:block}
body.cx2 .side .nav-btn{
  position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:100%; min-height:42px; padding:0 12px;
  border:1px solid transparent; border-radius:12px; background:transparent; color:var(--ink-2); font-weight:650; font-size:14.5px; text-align:left;
  transition:color .15s ease, background .15s ease}
body.cx2 .side .nav-btn:hover{background:transparent; color:var(--ink)}
body.cx2 .side .nav-btn[aria-current="page"]{background:transparent; border-color:transparent; color:var(--brand)}
html.cx-dark body.cx2 .side .nav-btn[aria-current="page"]{color:#F2FFF7}
body.cx2 .side .nav-btn .nav-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.cx2 .side .nav-btn > span:first-child{flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px}
body.cx2 .side .nbadge{margin-left:auto; min-width:22px; height:20px; padding:0 6px; border-radius:999px; font-size:11.5px; font-weight:800; background:var(--brand); color:var(--on-brand); border:0}
body.cx2 .side .nbadge[data-s="bad"]{background:var(--bad-f); color:#fff}
body.cx2 .side .nav-fav{position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:2; opacity:0; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--ink-3); background:transparent; border:0; transition:opacity .15s}
body.cx2 .side .nav-li:hover .nav-fav, body.cx2 .side .nav-fav:focus-visible{opacity:1}
body.cx2 .side .nav-fav.on{color:#E0A021}
body.cx2 .side .nav-li:hover .nbadge{opacity:0}
/* indicador de vidro que desliza entre os itens */
.cx-ind{position:absolute; left:0; right:0; top:0; height:42px; border-radius:12px; z-index:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 60%), color-mix(in srgb, var(--brand) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .32s cubic-bezier(.3,1.35,.5,1), height .2s ease, opacity .2s ease}
.cx-ind.on{opacity:1}
html.cx-dark .cx-ind{background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 60%), color-mix(in srgb, var(--brand) 18%, transparent); box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14)}
.cx-ind.hov{background:rgba(127,143,136,.12); border-color:transparent; box-shadow:none}
/* áreas (grupos) */
body.cx2 #navOp .nav-grp{border:0; margin:0}
body.cx2 #navOp .nav-grp > summary{display:flex; align-items:center; gap:12px; min-height:42px; padding:0 12px; border-radius:12px; cursor:pointer; list-style:none; font-weight:650; font-size:14.5px; color:var(--ink-2); text-transform:none; letter-spacing:0}
body.cx2 #navOp .nav-grp > summary:hover{background:rgba(127,143,136,.10); color:var(--ink)}
body.cx2 #navOp .nav-grp > summary > span:first-child{display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto}
body.cx2 #navOp .nav-grp > summary .nav-gt{flex:1 1 auto}
body.cx2 #navOp .nav-grp > summary .nav-gn{display:none}
body.cx2 #navOp .nav-grp > summary::after{content:""; width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(-45deg); margin-left:auto; transition:transform .2s ease}
body.cx2 #navOp .nav-grp[open] > summary::after{transform:rotate(45deg)}
body.cx2 #navOp .nav-grp[open] > summary{color:var(--ink)}
body.cx2 #navOp .nav-grp .nav-li{margin-left:20px; padding-left:8px; border-left:1px solid var(--glass-edge); width:auto; max-width:calc(100% - 20px)}
body.cx2 #navOp .nav-grp .nav-btn{padding-left:10px; min-height:38px; font-weight:600; font-size:14px}
body.cx2 #navOp .nav-grp .nav-btn > span:first-child{display:none}
body.cx2 #navOp .nav-ajuda{margin-top:6px}
/* rodapé: usuário e preferências */
.cx-prefs{display:flex; align-items:center; gap:6px}
.cx-prefs .cx-pb{flex:1 1 0; min-width:0; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--ink-2); border:1px solid var(--glass-edge); background:rgba(127,143,136,.08); transition:background .15s, color .15s}
.cx-prefs .cx-pb:hover{color:var(--ink); background:rgba(127,143,136,.16)}
.cx-prefs .cx-pb[aria-pressed="false"].snd{color:var(--ink-3)}
body.cx2 .eu-chip{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:14px; border:1px solid var(--glass-edge); background:rgba(127,143,136,.08); text-align:left}
body.cx2 .eu-chip:hover{background:rgba(127,143,136,.14)}
body.cx2 .eu-chip .uav{flex:0 0 auto; width:34px; height:34px; border-radius:50%}
body.cx2 .eu-chip span:not(.uav){font-weight:750; font-size:14px; line-height:1.15; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.cx2 .eu-chip small{display:block; font-size:11.5px; font-weight:600; color:var(--ink-3)}
body.cx2 .eu-chip > span:nth-child(2){flex:1 1 auto}
/* trilho (menu recolhido) */
@media (min-width:960px){
  html.cx-rail body.cx2 .side{padding:14px 10px 12px}
  html.cx-rail body.cx2 .side-logo{justify-content:center}
  html.cx-rail body.cx2 .side-logo img{display:none}
  html.cx-rail .cx-sec{font-size:0; padding:0; height:1px; margin:8px 14px; background:var(--glass-edge-2)}
  html.cx-rail .cx-find input{padding:0; color:transparent; cursor:pointer; text-indent:-999px}
  html.cx-rail .cx-find kbd{display:none}
  html.cx-rail body.cx2 .side .nav-btn, html.cx-rail body.cx2 #navOp .nav-grp > summary{justify-content:center; padding:0}
  html.cx-rail body.cx2 .side .nav-btn .nav-t, html.cx-rail body.cx2 #navOp .nav-grp > summary .nav-gt, html.cx-rail body.cx2 #navOp .nav-grp > summary::after, html.cx-rail body.cx2 .side .nav-fav{display:none}
  html.cx-rail body.cx2 .side .nbadge{position:absolute; top:2px; right:6px; margin:0; min-width:18px; height:18px; font-size:10.5px; padding:0 4px}
  html.cx-rail body.cx2 #navOp .nav-grp .nav-li{margin:0; padding:0; border:0}
  html.cx-rail body.cx2 #navOp .nav-grp:not([open]) .nav-li{display:none}
  html.cx-rail body.cx2 #navOp .nav-grp .nav-btn > span:first-child{display:grid}
  html.cx-rail .cx-prefs{flex-direction:column}
  html.cx-rail .cx-prefs .th, html.cx-rail .cx-prefs .snd{display:none}
  html.cx-rail .cx-prefs .cx-pb{flex:0 0 auto; width:100%}
  html.cx-rail body.cx2 .eu-chip{justify-content:center; padding:6px}
  html.cx-rail body.cx2 .eu-chip > span:not(.uav){display:none}
  /* dica ao passar o mouse no trilho */
  html.cx-rail body.cx2 .side .nav-btn[title]:hover::after{content:attr(title); position:fixed; left:86px; padding:6px 10px; border-radius:10px; font-size:12.5px; font-weight:700; color:var(--ink); background:var(--glass-tint-strong); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); white-space:nowrap; z-index:60; pointer-events:none; transform:translateY(-2px)}
}

/* ---------- barra do topo enxuta ---------- */
body.cx2 .topbar{gap:10px; padding:10px 18px; min-height:60px}
body.cx2 .tb-title b{font-size:17px; font-weight:800; letter-spacing:-.015em}
body.cx2 .tb-title small{font-size:12.5px; color:var(--ink-3); font-weight:600}
body.cx2 .tb-title .tb-today{display:none}
body.cx2 .tb-search{flex:1 1 360px; max-width:520px; margin:0 auto; border-radius:14px}
body.cx2 .tb-salvo .dot{background:var(--ok-f)}
body.cx2 .tb-salvo[data-s="salvando"] .dot{background:var(--warn-f)}
body.cx2 .tb-salvo{padding:0; width:32px; justify-content:center; font-size:0; gap:0}
body.cx2 .tb-salvo[data-s="falha"], body.cx2 .tb-salvo[data-s="off"]{width:auto; padding:0 10px; font-size:12.5px; gap:6px}
body.cx2 .tb-eq{padding:0 12px}
#cxExp{position:relative}
#cxExp[aria-pressed="true"]{color:var(--brand); border-color:var(--brand); background:var(--brand-soft)}

/* ---------- cabeçalho da tela e ruído removido ---------- */
body.cx2 #fbar{display:none}
body.cx2 .pg-head{margin:0 0 16px; gap:8px 16px}
body.cx2 .h1{font-size:clamp(24px,3.2vw,30px); font-weight:800; letter-spacing:-.025em}
body.cx2 .pg-head .sub{font-size:14px; color:var(--ink-3); margin-top:2px; max-width:72ch}
body.cx2 .pg-ajuda, body.cx2 .tour-oferta{display:none !important}
body.cx2 .qb-help, body.cx2 .card-info{display:none}
body.cx2.explica .qb-help, body.cx2.explica .card-info{display:inline-grid}
@media (max-width:640px){ body.cx2 .pg-head .sub{display:none} }

/* ---------- cartões, abas e tabelas no padrão Dashboard V16 ---------- */
body.cx2 .qb, body.cx2 .panel, body.cx2 .cal-side, body.cx2 .fh-card, body.cx2 .note-box{border-radius:var(--r)}
body.cx2 .qb{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
body.cx2 .qb-h{padding:12px 14px}
body.cx2 .qb-b{padding:2px 14px 14px}
body.cx2 .qb-tog b{font-size:15px; font-weight:800; letter-spacing:-.01em}
body.cx2 .qb-n{border-radius:999px; font-weight:800}
body.cx2 .q-abas, body.cx2 .seg{background:var(--surface-3); border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px; display:inline-flex; flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none}
body.cx2 .q-abas::-webkit-scrollbar, body.cx2 .seg::-webkit-scrollbar{display:none}
body.cx2 .q-aba, body.cx2 .seg button{border-radius:999px; border:0; background:transparent; color:var(--ink-2); font-weight:700; min-height:38px; padding:0 14px; white-space:nowrap; transition:background .2s, color .2s}
body.cx2 .q-aba:hover, body.cx2 .seg button:hover{color:var(--ink)}
body.cx2 .q-aba[aria-selected="true"], body.cx2 .seg button[aria-pressed="true"]{background:var(--hero-a); color:#fff; box-shadow:0 4px 12px rgba(15,31,23,.28)}
html.cx-dark body.cx2 .q-aba[aria-selected="true"], html.cx-dark body.cx2 .seg button[aria-pressed="true"]{background:var(--brand); color:var(--on-brand)}
body.cx2 .q-aba .qb-n{background:rgba(127,143,136,.2); color:inherit}
body.cx2 .q-prox{border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(135deg, var(--hero-a), var(--hero-b)); color:#fff; box-shadow:var(--shadow)}
body.cx2 .q-prox .eyebrow, body.cx2 .q-prox .hint, body.cx2 .q-prox small{color:rgba(255,255,255,.82)}
body.cx2 .q-prox b{color:#fff}
body.cx2 .tile, body.cx2 .stat{border-radius:var(--r)}
body.cx2 .chip, body.cx2 .pill{border-radius:999px}
body.cx2 .btn{border-radius:12px; font-weight:700}
body.cx2 .btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent)}
body.cx2 .icon-btn{border-radius:12px}
body.cx2 .tbl-wrap, body.cx2 .tview{border-radius:var(--r)}

/* ---------- faixa de números do início (estilo V16) ---------- */
.cx-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 14px}
@media (max-width:900px){ .cx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cx-kpi{display:flex; flex-direction:column; gap:4px; text-align:left; padding:14px 16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); min-width:0; transition:transform .16s ease, border-color .16s ease}
.cx-kpi:hover{transform:translateY(-2px); border-color:var(--brand)}
.cx-kpi .k{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:750; color:var(--ink-2)}
.cx-kpi .k i{width:9px; height:9px; border-radius:50%; background:var(--sf)}
.cx-kpi .v{font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1.1; font-variant-numeric:tabular-nums}
.cx-kpi .c{font-size:12.5px; color:var(--ink-3); line-height:1.3}
.cx-kpi[data-s="bad"] .v{color:var(--bad)} .cx-kpi[data-s="warn"] .v{color:var(--warn)}

/* ---------- menu do celular: barra de vidro com facho de luz ---------- */
@media (max-width:959px){
  body.cx2 .bnav{left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); border:1px solid var(--glass-edge); border-radius:28px; padding:6px 6px; overflow:hidden; box-shadow:var(--glass-shadow); position:fixed}
  body.cx2 .bnav button{position:relative; z-index:1; border-radius:20px; min-height:56px; color:var(--ink-3); transition:color .2s}
  body.cx2 .bnav button[aria-current="page"]{background:transparent; color:var(--brand)}
  html.cx-dark body.cx2 .bnav button[aria-current="page"]{color:#fff}
  body.cx2 .bnav .bnav-novo{color:#fff}
  body.cx2 .bnav .bnav-novo > span:first-child{width:46px; height:46px; margin-top:-16px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:var(--on-brand); box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 45%, transparent), 0 0 0 5px var(--glass-tint-strong)}
  body.cx2 .bnav .bnav-novo{color:var(--ink-2); background:transparent; border:0; box-shadow:none}
  .cx-beam{position:absolute; top:0; left:0; width:68px; height:100%; z-index:0; pointer-events:none; transition:transform .38s cubic-bezier(.3,1.35,.5,1); opacity:0}
  .cx-beam.on{opacity:1}
  .cx-beam::before{content:""; position:absolute; top:0; left:12px; right:12px; height:3px; border-radius:0 0 6px 6px; background:var(--lime); box-shadow:0 0 14px 2px var(--lime)}
  .cx-beam::after{content:""; position:absolute; top:0; left:0; right:0; bottom:0; clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%); background:linear-gradient(180deg, color-mix(in srgb, var(--lime) 55%, transparent), transparent 85%)}
  html.cx-light .cx-beam::after{background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 32%, transparent), transparent 85%)}
  html.cx-light .cx-beam::before{background:var(--brand); box-shadow:0 0 12px 1px color-mix(in srgb, var(--brand) 60%, transparent)}
  body.cx2 .content{padding-bottom:132px}
}

/* ---------- janelas (formulários) mais claras ---------- */
.cx-chips{display:flex; flex-wrap:wrap; gap:8px}
.cx-chips button{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-weight:700; font-size:14px; transition:background .15s, color .15s, border-color .15s}
.cx-chips button:hover{border-color:var(--brand); color:var(--ink)}
.cx-chips button[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.cx-hidesel{position:absolute !important; opacity:0 !important; pointer-events:none !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; border:0 !important; overflow:hidden}
.cx-quick{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.cx-quick button{min-height:34px; padding:0 12px; border-radius:999px; border:1px dashed var(--line-2); background:transparent; color:var(--ink-2); font-weight:700; font-size:13px}
.cx-quick button:hover{border-style:solid; border-color:var(--brand); color:var(--brand)}

/* ---------- login da luminária ---------- */
dialog#dlgEu{width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden;
  --bg:#0A150F; --surface:#162B20; --surface-2:#1E3A2E; --surface-3:#26463A; --ink:#ECEFE2; --ink-2:#C7CBB8; --ink-3:#97A38F; --line:#264536; --line-2:#355A45;
  --brand:#D6E668; --on-brand:#0F1F17; --ok-f:#4FA76A; color:var(--ink); color-scheme:dark;
  background:#0A150F; box-shadow:none}
dialog#dlgEu::backdrop{background:#060E09}
dialog#dlgEu .login-bg{display:none}
.cx-scene{position:absolute; inset:0; overflow:hidden; background:radial-gradient(900px 600px at 28% 62%, rgba(214,230,104,0), transparent 60%), #0A150F; transition:background .6s ease}
dialog#dlgEu.lamp-on .cx-scene{background:radial-gradient(900px 640px at 28% 58%, rgba(214,230,104,.14), transparent 62%), radial-gradient(520px 340px at 28% 96%, rgba(214,230,104,.16), transparent 70%), #0A150F}
.cx-lampbtn{position:absolute; left:28%; top:50%; transform:translate(-50%,-50%); width:min(300px,56vw); height:min(560px,70vh); border:0; background:none; padding:0; cursor:pointer; z-index:2}
.cx-lampbtn svg{width:100%; height:100%; overflow:visible}
.cx-lampbtn:focus{outline:none}
.cx-lampbtn:focus-visible .cx-cord circle{stroke:#fff; stroke-width:3}
.cx-lampbtn:focus-visible ~ .cx-hint{color:#E7F5A8}
dialog#dlgEu.lamp-on .cx-hint{position:absolute; left:28%; bottom:7vh; transform:translateX(-50%); font-size:13.5px; font-weight:650; color:#9DADA6; letter-spacing:.02em; z-index:2; transition:opacity .3s; pointer-events:none; white-space:nowrap}
dialog#dlgEu.lamp-on .cx-hint{opacity:.0}
.cx-bulb{opacity:.25; transition:opacity .3s, filter .3s}
dialog#dlgEu.lamp-on .cx-bulb{opacity:1; filter:drop-shadow(0 0 18px #E7F5A8)}
.cx-cord{transform-origin:50% 0; transition:transform .12s ease-in}
.cx-cord.pull{transform:translateY(18px)}
dialog#dlgEu form.login{position:absolute; left:64%; top:50%; width:min(400px,calc(100vw - 32px)); transform:translate(-50%,-46%) scale(.97); margin:0; z-index:3;
  opacity:0; visibility:hidden; transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s;
  background:linear-gradient(180deg, rgba(255,255,255,.07), transparent 40%), rgba(22,43,32,.84); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.12); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.55); max-height:calc(100dvh - 24px); overflow:auto}
dialog#dlgEu.lamp-on form.login{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); transition:opacity .5s ease .12s, transform .55s cubic-bezier(.2,.8,.2,1) .12s, visibility 0s}
@media (max-width:820px){
  dialog#dlgEu .lg-logo{display:none}
  .cx-lampbtn{left:50%; top:20dvh; width:min(160px,34vw); height:min(250px,30dvh)}
    .cx-hint{left:50%; bottom:auto; top:calc(20dvh + 135px)}
  dialog#dlgEu form.login{left:50%; top:auto; bottom:12px; transform:translate(-50%,30px) scale(.97); max-height:70dvh}
  dialog#dlgEu.lamp-on form.login{transform:translate(-50%,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){ dialog#dlgEu *, .cx-ind, .cx-beam{transition-duration:.01ms !important} }

/* ---------- escritório ao vivo (3D) ---------- */
.of-wrap{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1180px){ .of-wrap{grid-template-columns:minmax(0,1fr) 360px; align-items:start} }
.of-stage{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#e4e7d8; box-shadow:var(--shadow); height:calc(100dvh - 210px); min-height:520px; max-height:780px}
.of-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab}
.of-lbls{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2}
.of-lbl{position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; background:rgba(250,250,246,.94); border:1px solid rgba(15,31,23,.12); box-shadow:0 4px 14px rgba(15,31,23,.16); color:#0f1f17; pointer-events:auto; white-space:nowrap; font-size:12.5px; line-height:1.2; transition:box-shadow .15s}
.of-lbl i{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.of-lbl b{font-weight:800}
.of-lbl small{font-size:11px; color:#4f5a49; font-weight:600}
.of-lbl[data-k="off"], .of-lbl[data-k="nova"]{opacity:.75}
.of-lbl.sel{box-shadow:0 0 0 2px #0f1f17, 0 8px 20px rgba(15,31,23,.25)}
.of-hi{position:absolute; left:14px; top:14px; z-index:3; padding:9px 16px; border-radius:18px; background:rgba(250,250,246,.94); border:1px solid rgba(15,31,23,.1); box-shadow:0 6px 20px rgba(15,31,23,.12); color:#0f1f17}
.of-hi b{display:block; font-size:16px; font-weight:800}
.of-hi small{display:block; font-size:12px; color:#4f5a49; font-weight:600}
.of-zoom{position:absolute; right:14px; bottom:14px; z-index:3; display:grid; gap:6px}
.of-zoom .icon-btn{background:rgba(250,250,246,.94); color:#0f1f17; font-size:20px; font-weight:700}
.of-hint{position:absolute; left:14px; bottom:14px; z-index:3; font-size:12px; color:#3d4337; background:rgba(250,250,246,.9); border-radius:999px; padding:6px 12px; max-width:calc(100% - 90px)}
.of-card{position:absolute; left:14px; top:82px; z-index:4; width:min(300px, calc(100% - 28px)); padding:14px; border-radius:20px; background:rgba(250,250,246,.97); border:1px solid rgba(15,31,23,.1); box-shadow:0 14px 40px rgba(15,31,23,.22); color:#0f1f17; display:grid; gap:10px}
.of-ch{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center}
.of-ch b{display:block; font-weight:800} .of-ch small{display:block; color:#4f5a49; font-size:12.5px}
.of-st{display:inline-flex; align-items:center; gap:7px; font-weight:750; font-size:13.5px; padding:4px 10px; border-radius:999px; background:#eef0e4; width:fit-content}
.of-st i{width:9px; height:9px; border-radius:50%; background:#8a9683}
.of-st[data-k="on"] i{background:#5fcb7b} .of-st[data-k="idle"] i{background:#f0c45a}
.of-tiles, .of-tot{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.of-tiles > div, .of-tot > div{padding:10px 12px; border-radius:14px; background:#eef0e4; border:1px solid rgba(15,31,23,.06)}
.of-tiles small, .of-tot small{display:block; font-size:11.5px; font-weight:700; color:#4f5a49}
.of-tiles b, .of-tot b{display:block; font-size:20px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
html.cx-dark .of-tot > div{background:var(--surface-2); border-color:var(--line)} html.cx-dark .of-tot small{color:var(--ink-3)} html.cx-dark .of-tot b{color:var(--ink)}
.of-sub{font-size:12.5px; color:#4f5a49; margin:0}
.of-acts{display:flex; flex-wrap:wrap; gap:8px}
.of-msg{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; color:#3d4337; font-size:14.5px; z-index:1}
.of-side{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; display:grid; gap:12px; align-content:start}
.of-sh{display:grid; gap:10px}
.of-sh h2{font-size:18px; font-weight:800; margin:0} .of-sh p{font-size:13px; color:var(--ink-3); margin:2px 0 0}
.of-list{display:grid; gap:4px; max-height:460px; overflow:auto}
.of-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto 70px auto; gap:10px; align-items:center; text-align:left; padding:8px 10px; border-radius:14px; border:1px solid transparent; background:transparent; color:var(--ink)}
.of-row:hover{background:var(--surface-2)} .of-row.sel{background:var(--brand-soft); border-color:var(--brand)}
.of-rt b{display:block; font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .of-rt small{display:block; font-size:12px; color:var(--ink-3)}
.of-dot{width:9px; height:9px; border-radius:50%}
.of-bar{display:flex; height:8px; border-radius:999px; background:var(--track); overflow:hidden} .of-bar i{display:block; height:100%}
.of-rv{font-size:12.5px; font-weight:750; min-width:44px; text-align:right; font-variant-numeric:tabular-nums}
.of-nota{font-size:12px; color:var(--ink-3); line-height:1.45; margin:0}
.of-fita{display:grid; grid-template-columns:repeat(96,1fr); gap:1px; height:26px; border-radius:8px; overflow:hidden; background:var(--track)}
.of-fita i{display:block; background:transparent} .of-fita i[data-v="a"]{background:var(--ok-f)} .of-fita i[data-v="v"]{background:var(--warn-f)} .of-fita i[data-v="o"]{background:var(--idle-f)}
.of-hor{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); margin-top:4px}
@media (max-width:640px){ .of-stage{height:62dvh; min-height:420px} .of-card{top:72px} .of-row{grid-template-columns:auto minmax(0,1fr) auto 54px auto} }

/* ---------- módulos: título e abas no topo de cada tela ---------- */
body.cx2 .pg-head .h1{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cx-mh{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 22px; margin:0 0 18px}
.cx-mt{display:flex; align-items:center; gap:12px; min-width:0}
.cx-mi{display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--lime); color:#0F1F17; flex:0 0 auto}
.cx-mn{font-size:clamp(28px,3.4vw,38px); font-weight:300; letter-spacing:-.03em; line-height:1.1}
.cx-tabs{display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); max-width:100%; position:relative}
.cx-tab{display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font-weight:700; font-size:14px; white-space:nowrap; cursor:pointer; list-style:none; transition:background .2s, color .2s}
.cx-tab::-webkit-details-marker{display:none}
.cx-tab:hover{color:var(--ink)}
.cx-tab[aria-selected="true"]{background:var(--hero-a); color:#fff; box-shadow:0 4px 12px rgba(15,31,23,.28)}
html.cx-dark .cx-tab[aria-selected="true"]{background:var(--brand); color:var(--on-brand); box-shadow:none}
.cx-tb{min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11.5px; font-weight:800; background:var(--brand); color:var(--on-brand); display:inline-grid; place-items:center}
.cx-tb[data-s="bad"]{background:var(--bad-f); color:#fff}
.cx-chev{display:grid; opacity:.7}
.cx-more{position:relative}
.cx-more[open] > summary{background:var(--surface-3); color:var(--ink)}
.cx-more-l{position:absolute; right:0; top:calc(100% + 8px); z-index:40; min-width:230px; padding:6px; border-radius:16px; background:var(--glass-tint-strong); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); display:grid; gap:2px}
.cx-more-l button{display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:12px; background:transparent; color:var(--ink); font-weight:650; text-align:left; font-size:14px}
.cx-more-l button:hover{background:var(--surface-2)}
@media (max-width:720px){
  .cx-mh{flex-direction:column; align-items:stretch; gap:10px}
  .cx-tabs{overflow-x:auto; scrollbar-width:none; width:100%} .cx-tabs::-webkit-scrollbar{display:none}
  .cx-mn{font-size:28px} .cx-mi{width:38px; height:38px}
}

/* ---------- início e cartões do padrão V16 ---------- */
.cx-ini{display:grid; gap:16px}
.cx-greet{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; border-radius:var(--r); background:linear-gradient(115deg, var(--brand-soft) 0%, var(--surface-3) 55%, var(--surface) 100%); border:1px solid var(--line); box-shadow:var(--shadow)}
.cx-greet small{font-size:13px; font-weight:700; color:var(--ink-3)}
.cx-greet h2{margin:2px 0 4px; font-size:clamp(30px,4vw,46px); font-weight:300; letter-spacing:-.035em; line-height:1.1}
.cx-greet p{margin:0; color:var(--ink-2); font-size:14.5px}
.cx-gact{display:flex; gap:8px; flex-wrap:wrap}
.cx-grid6{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .cx-grid6{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} }
.cx-stat{display:flex; flex-direction:column; gap:6px; text-align:left; padding:16px 18px 15px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); transition:transform .16s ease, border-color .16s ease; min-width:0}
.cx-stat:hover{transform:translateY(-2px); border-color:var(--brand)}
.cx-sh{display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:10px}
.cx-chip{display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--lime); color:#0F1F17; flex:0 0 auto}
.cx-sl{font-size:13px; font-weight:700; color:var(--ink-2)}
.cx-sv{font-size:clamp(32px,3.4vw,44px); font-weight:300; letter-spacing:-.035em; line-height:1.05; font-variant-numeric:tabular-nums}
.cx-sc{font-size:12.5px; color:var(--ink-3); font-weight:600}
.cx-stat[data-s="bad"] .cx-sc{color:var(--bad); font-weight:750} .cx-stat[data-s="warn"] .cx-sc{color:var(--warn); font-weight:750} .cx-stat[data-s="ok"] .cx-sc{color:var(--ok); font-weight:700}
.cx-row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.cx-row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:1100px){ .cx-row3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .cx-row2, .cx-row3{grid-template-columns:minmax(0,1fr)} }
.cx-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; display:grid; gap:12px; min-width:0; align-content:start}
.cx-ch h2{margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em} .cx-ch p{margin:2px 0 0; font-size:13px; color:var(--ink-3)}
.cx-bars{display:grid; gap:10px}
.cx-br{display:grid; grid-template-columns:minmax(90px,34%) minmax(0,1fr) auto; gap:10px; align-items:center}
.cx-bl{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-bt{height:12px; border-radius:999px; background:var(--track); overflow:hidden; display:block}
.cx-bt i{display:block; height:100%; border-radius:999px; background:var(--c1)}
.cx-bn{font-size:13px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.cx-lis{display:grid; gap:6px}
.cx-li{display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); min-width:0}
.cx-li:hover{border-color:var(--brand)}
.cx-lt{min-width:0} .cx-lt b{display:block; font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .cx-lt small{display:block; font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- ferramentas e sistemas conectados ---------- */
.cx-fer{display:grid; gap:14px; margin-top:14px}
.cx-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start}
@media (max-width:900px){ .cx-two{grid-template-columns:minmax(0,1fr)} }
.cx-fk{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.cx-fk > div{padding:10px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line)}
.cx-fk small{display:block; font-size:11.5px; font-weight:700; color:var(--ink-3)} .cx-fk b{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}
.cx-big b{display:block; font-size:44px; font-weight:300; letter-spacing:-.035em; line-height:1.1; font-variant-numeric:tabular-nums} .cx-big small{color:var(--ink-3); font-size:13px}
.cx-qrimg{width:210px; max-width:100%; background:#fff; padding:10px; border-radius:16px; border:1px solid var(--line)} .cx-qrimg svg{width:100%; height:auto; display:block}
.cx-atal{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.cx-sys{margin-top:14px}
.cx-atl{display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); text-decoration:none; font-weight:inherit}
.cx-atl:hover{border-color:var(--brand)} .cx-go{margin-left:auto; color:var(--ink-3)}
.cx-modgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.cx-modcard{display:grid; gap:4px; justify-items:start; text-align:left; padding:14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.cx-modcard b{font-weight:800} .cx-modcard small{color:var(--ink-3)}

.of-lbl[data-k="off"] small, .of-lbl[data-k="nova"] small{display:none}
.of-lbl[data-k="off"], .of-lbl[data-k="nova"]{padding:5px; gap:0}
.of-lbl[data-k="off"] b, .of-lbl[data-k="nova"] b{display:none; margin-left:6px}
.of-lbl[data-k="off"]:hover b, .of-lbl[data-k="nova"]:hover b, .of-lbl.sel b{display:inline}
.of-lbl.sel{z-index:3}

.cx-sub{margin-top:0}
@media (max-width:520px){ .cx-fk{grid-template-columns:repeat(2,minmax(0,1fr))} .cx-br{grid-template-columns:minmax(110px,42%) minmax(0,1fr) auto} }
.of-sh .cx-tabs{width:fit-content; max-width:100%}

/* ---------- dashboards: cockpit escuro na paleta Cactus ---------- */
.dx{--dx-c:#12241B; --dx-ln:rgba(199,203,184,.09); --dx-ink:#ECEFE2; --dx-ink2:#C7CBB8; --dx-ink3:#8F9C88; --dx-lima:#D6E668;
  position:relative; border-radius:28px; padding:20px; color:var(--dx-ink); color-scheme:dark; overflow:hidden; border:1px solid rgba(199,203,184,.08);
  background:radial-gradient(900px 420px at 8% -12%, rgba(214,230,104,.09), transparent 60%), radial-gradient(800px 500px at 110% 0%, rgba(107,127,103,.2), transparent 60%), #0B1711;
  box-shadow:0 30px 80px rgba(15,31,23,.22)}
.dx-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px}
.dx-tt small{font-size:12px; color:var(--dx-ink3); font-weight:600}
.dx-tt h2{margin:2px 0; font-size:clamp(24px,2.6vw,30px); font-weight:600; letter-spacing:-.02em; color:var(--dx-ink)}
.dx-tt p{margin:0; font-size:13.5px; color:var(--dx-ink3)}
.dx-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.dx-seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:999px; background:rgba(199,203,184,.06); border:1px solid var(--dx-ln)}
.dx-seg button{border:0; background:transparent; color:var(--dx-ink3); font-weight:700; font-size:12.5px; padding:6px 12px; border-radius:999px; min-height:30px}
.dx-seg button:hover{color:var(--dx-ink)}
.dx-seg button[aria-pressed="true"]{background:rgba(214,230,104,.16); color:var(--dx-lima); box-shadow:inset 0 0 0 1px rgba(214,230,104,.35)}
.dx-sync{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--dx-ink2); padding:7px 12px; border-radius:999px; background:rgba(199,203,184,.06); border:1px solid var(--dx-ln)}
.dx-sync i{width:7px; height:7px; border-radius:50%; background:#6FCF8E; box-shadow:0 0 8px #6FCF8E}
.dx.ex .dx-sync i{background:#F0C45A; box-shadow:0 0 8px #F0C45A}
.dx-exbar{margin:-4px 0 14px; font-size:12.5px; color:#F0C45A; background:rgba(240,196,90,.08); border:1px dashed rgba(240,196,90,.4); border-radius:12px; padding:8px 12px}
.dx-grid12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px}
.dx-grid12 > .dxs3{grid-column:span 3} .dx-grid12 > .dxs4{grid-column:span 4} .dx-grid12 > .dxs5{grid-column:span 5} .dx-grid12 > .dxs7{grid-column:span 7} .dx-grid12 > .dxs8{grid-column:span 8} .dx-grid12 > .dxs12{grid-column:span 12}
@media (max-width:1180px){ .dx-grid12 > .dxs3{grid-column:span 6} .dx-grid12 > .dxs4, .dx-grid12 > .dxs5, .dx-grid12 > .dxs7, .dx-grid12 > .dxs8{grid-column:span 12} }
@media (max-width:640px){ .dx{padding:14px; border-radius:22px} .dx-grid12 > *{grid-column:span 12 !important} }
.dx-c{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%), var(--dx-c); border:1px solid var(--dx-ln); border-radius:20px; padding:16px; display:grid; gap:10px; align-content:start; min-width:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dx-col{display:grid; gap:14px; align-content:start; min-width:0}
.dx-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.dx-h h3{margin:0; font-size:14.5px; font-weight:700; color:var(--dx-ink)}
.dx-h p{margin:2px 0 0; font-size:12px; color:var(--dx-ink3)}
.dx-live{font-size:11px; font-weight:800; color:#8FE0A6; background:rgba(111,207,142,.12); border-radius:999px; padding:3px 9px; white-space:nowrap}
.dx-big{display:flex; align-items:baseline; flex-wrap:wrap; gap:10px}
.dx-big b{font-size:clamp(34px,3.6vw,48px); font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1.05}
.dx-big.sm b{font-size:28px}
.dx-s{font-size:12.5px; color:var(--dx-ink3); margin:0}
.dx-dp{font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:999px; background:rgba(199,203,184,.1); color:var(--dx-ink2); white-space:nowrap}
.dx-dp.up{background:rgba(111,207,142,.14); color:#8FE0A6} .dx-dp.down{background:rgba(255,122,110,.14); color:#FF9A90}
.dx-globe{position:relative; height:300px; margin:2px -6px}
.dx-globe canvas, .dx-rel canvas, .dx-pipe canvas{position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none}
.dx-chips{display:flex; flex-wrap:wrap; gap:6px}
.dx-chips span{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--dx-ink2); background:rgba(199,203,184,.06); border:1px solid var(--dx-ln); border-radius:999px; padding:4px 10px}
.dx-chips i{width:8px; height:8px; border-radius:50%}
.dx-minis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .dx-minis{grid-template-columns:minmax(0,1fr)} }
.dx-mh{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--dx-ink3); font-weight:700}
.dx-mv{display:flex; align-items:flex-end; justify-content:space-between; gap:8px}
.dx-mv b{font-size:28px; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums} .dx-mv b.bad{color:#FF9A90}
.dx-spark{width:110px; height:34px; flex:0 0 auto}
.dx-areaw{position:relative} .dx-area{width:100%; height:auto; display:block}
.dx-grid{stroke:rgba(199,203,184,.08)} .dx-ax{fill:#8F9C88; font-size:11px; font-family:inherit}
.dx-hov{stroke:rgba(236,239,226,.45); stroke-dasharray:3 3; opacity:0}
.dx-tip{position:absolute; top:4px; transform:translateX(-50%); background:#0F1F17; border:1px solid rgba(214,230,104,.3); border-radius:10px; padding:6px 10px; font-size:12px; pointer-events:none; white-space:nowrap; color:var(--dx-ink)}
.dx-tip b{display:block; font-size:15px} .dx-tip span{color:var(--dx-ink3)}
.dx-leg{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--dx-ink3)}
.dx-leg span{display:inline-flex; align-items:center; gap:6px} .dx-leg i{width:9px; height:9px; border-radius:3px}
.dx-leg .l1::before, .dx-leg .l2::before, .dx-leg .l3::before{content:""; width:14px; height:2px; border-radius:2px; background:#D6E668}
.dx-leg .l2::before{background:repeating-linear-gradient(90deg, #8FA889 0 4px, transparent 4px 8px)} .dx-leg .l3::before{background:#FF7A6E}
.dx-stack{width:100%; height:auto}
.dx-feed{display:grid}
.dx-fi{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--dx-ln)}
.dx-fi:last-child{border-bottom:0}
.dx-fic{width:28px; height:28px; border-radius:9px; background:rgba(214,230,104,.12); position:relative; flex:0 0 auto}
.dx-fic::after{content:""; position:absolute; inset:10px; border-radius:50%; background:#D6E668}
.dx-fic[data-t="warn"]{background:rgba(240,196,90,.14)} .dx-fic[data-t="warn"]::after{background:#F0C45A}
.dx-fic[data-t="bad"]{background:rgba(255,122,110,.14)} .dx-fic[data-t="bad"]::after{background:#FF7A6E}
.dx-ft{min-width:0} .dx-ft b{display:block; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dx-ink)} .dx-ft small{display:block; font-size:12px; color:var(--dx-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dx-fw{font-size:11.5px; color:var(--dx-ink3); font-variant-numeric:tabular-nums; white-space:nowrap}
.dx-gw{position:relative; display:grid; place-items:center; padding-top:6px} .dx-gauge{width:100%; max-width:210px; display:block} .dx-gw b{position:absolute; bottom:2px; font-size:30px; font-weight:500; letter-spacing:-.03em}
.dx-two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dx-two > div{background:rgba(199,203,184,.05); border:1px solid var(--dx-ln); border-radius:12px; padding:8px 10px} .dx-two small{display:block; font-size:11px; color:var(--dx-ink3); font-weight:700} .dx-two b{font-size:18px; font-weight:600}
.dx-hero.lime{background:linear-gradient(150deg, #E6F183, #C9DC62 55%, #9DB86A); color:#0F1F17; border-color:transparent; box-shadow:0 18px 40px rgba(214,230,104,.14)}
.dx-hero.lime .dx-s, .dx-hero.lime small, .dx-hero.lime .dx-tag{color:rgba(15,31,23,.72)}
.dx-hero.sage{background:linear-gradient(150deg, #9AB393, #6B7F67 50%, #3E5A3F); border-color:transparent}
.dx-hero.sage .dx-s, .dx-hero.sage small{color:rgba(236,239,226,.85)}
.dx-tag{font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--dx-ink3)}
.dx-mbars{display:flex; align-items:flex-end; gap:3px; height:46px} .dx-mbars.alto{height:72px}
.dx-mbars i{flex:1; border-radius:3px 3px 1px 1px; background:rgba(214,230,104,.45)} .dx-mbars i.last{background:#D6E668}
.dx-hero.lime .dx-mbars i{background:rgba(15,31,23,.32)} .dx-hero.lime .dx-mbars i.last{background:#0F1F17}
.dx-fcols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); text-align:center; gap:8px}
.dx-fcols small{display:block; font-size:12px; font-weight:700; color:var(--dx-ink2)} .dx-fcols b{display:block; font-size:26px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums} .dx-fcols span{font-size:11.5px; color:var(--dx-ink3)}
.dx-fbox{position:relative; height:230px} .dx-fcv{position:absolute; inset:0; width:100%; height:100%}
.dx-fchips span{position:absolute; top:42%; transform:translate(-50%,-50%); font-size:11.5px; font-weight:800; background:#0F1F17; border:1px solid rgba(214,230,104,.3); color:#D6E668; border-radius:999px; padding:3px 8px; z-index:2}
.dx-tw{overflow-x:auto}
.dx-tab{width:100%; border-collapse:collapse; font-size:13px}
.dx-tab th{font-size:11px; font-weight:700; color:var(--dx-ink3); text-align:left; padding:6px 8px; border-bottom:1px solid var(--dx-ln); white-space:nowrap}
.dx-tab td{padding:9px 8px; border-bottom:1px solid var(--dx-ln); white-space:nowrap} .dx-tab .num{text-align:right; font-variant-numeric:tabular-nums}
.dx-ib{display:inline-block; width:60px; height:6px; border-radius:999px; background:rgba(199,203,184,.1); margin-right:8px; vertical-align:middle; overflow:hidden} .dx-ib i{display:block; height:100%; background:#D6E668; border-radius:999px}
.dx-tl{display:grid; position:relative; padding-left:20px} .dx-tl::before{content:""; position:absolute; left:6px; top:14px; bottom:14px; width:2px; background:linear-gradient(#D6E668, #3E5A3F)}
.dx-tli{position:relative; display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--dx-ln)} .dx-tli:last-child{border-bottom:0}
.dx-tli i{position:absolute; left:-19px; top:14px; width:12px; height:12px; border-radius:50%; background:#0F1F17; border:2px solid #D6E668} .dx-tli.off i{border-color:#355A45}
.dx-tli b{font-size:13.5px; font-weight:650} .dx-tli span{font-size:12.5px; color:var(--dx-ink2); font-variant-numeric:tabular-nums}
.dx-tot{font-size:14px; color:var(--dx-lima); white-space:nowrap}
.dx-pipe{position:relative; height:440px; border-radius:16px; overflow:hidden; background:radial-gradient(600px 300px at 50% 45%, rgba(214,230,104,.07), transparent 70%)}
.dx-pl{position:absolute; inset:0; pointer-events:none; z-index:2}
.dx-plb{position:absolute; left:0; top:0; pointer-events:auto; display:grid; gap:1px; text-align:left; padding:5px 9px; border-radius:10px; background:rgba(15,31,23,.88); border:1px solid rgba(199,203,184,.16); color:#ECEFE2; font-size:11px; white-space:nowrap}
.dx-plb b{font-size:11.5px; font-weight:700} .dx-plb span{color:#8F9C88} .dx-plb.atr{border-color:rgba(240,196,90,.6)} .dx-plb.atr span{color:#F0C45A}
.dx-plb.sel{border-color:#D6E668; box-shadow:0 0 0 1px #D6E668, 0 0 18px rgba(214,230,104,.3)}
.dx-badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.dx-bd{font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:rgba(199,203,184,.1); color:var(--dx-ink2); white-space:nowrap}
.dx-bd.ok{background:rgba(111,207,142,.14); color:#8FE0A6} .dx-bd.bad{background:rgba(255,122,110,.14); color:#FF9A90} .dx-bd.warn{background:rgba(240,196,90,.14); color:#F0C45A} .dx-bd.lime{background:rgba(214,230,104,.16); color:#D6E668}
.dx-plist{display:grid; gap:2px}
.dx-pi{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; text-align:left; padding:8px; border-radius:12px; border:1px solid transparent; background:transparent; color:inherit}
.dx-pi:hover{background:rgba(199,203,184,.06)}
.dx-mono{display:grid; gap:5px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11.5px; background:rgba(0,0,0,.22); border:1px solid var(--dx-ln); border-radius:12px; padding:10px}
.dx-ml{display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:8px; color:var(--dx-ink2)} .dx-ml b{color:#8FE0A6} .dx-ml[data-t="warn"] b{color:#F0C45A}
.dx-ml span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dx-sq{display:flex; gap:4px; flex-wrap:wrap} .dx-sq i{width:14px; height:14px; border-radius:3px; background:rgba(236,239,226,.85)} .dx-sq i.w{background:#F0C45A}
.dx-runs{display:grid; gap:2px; max-height:540px; overflow:auto}
.dx-run{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; padding:8px 10px; border-radius:12px; border:1px solid transparent; background:transparent; color:inherit}
.dx-run:hover{background:rgba(199,203,184,.05)} .dx-run.sel{background:rgba(214,230,104,.08); border-color:rgba(214,230,104,.35)}
.dx-ri{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:13px; background:rgba(199,203,184,.08); color:var(--dx-ink2)}
.dx-ri[data-t="done"]{color:#8FE0A6; background:rgba(111,207,142,.12)} .dx-ri[data-t="bad"]{color:#FF9A90; background:rgba(255,122,110,.12)} .dx-ri[data-t="warn"]{color:#F0C45A; background:rgba(240,196,90,.12)}
.dx-gantt{display:grid; gap:12px; --gl:170px; --gd:110px}
.dx-grow{display:grid; grid-template-columns:var(--gl) minmax(0,1fr) var(--gd); align-items:center; min-height:30px}
.dx-gxr{min-height:0} .dx-gx{display:flex; justify-content:space-between; font-size:10.5px; color:var(--dx-ink3)}
.dx-gr{position:relative; display:grid; gap:6px}
.dx-gl b{display:block; font-size:12.5px; font-weight:650} .dx-gl small{display:block; font-size:11px; color:var(--dx-ink3)}
.dx-gt{position:relative; height:16px; border-radius:6px; background:rgba(199,203,184,.05)}
.dx-gt i{position:absolute; top:2px; bottom:2px; border-radius:5px; min-width:3px}
.dx-gt i.done{background:#D6E668} .dx-gt i.late{background:#F0C45A} .dx-gt i.pend{display:none}
.dx-gt i.run{background:repeating-linear-gradient(45deg, #8FA889 0 6px, #6B7F67 6px 12px); background-size:17px 17px; animation:dxRun 1s linear infinite}
.dx-gt i.late.run{background:repeating-linear-gradient(45deg, #F0C45A 0 6px, #C9962B 6px 12px); background-size:17px 17px}
@keyframes dxRun{to{background-position:17px 0}}
.dx-gd{font-size:11.5px; color:var(--dx-ink3); text-align:right}
.dx-now{position:absolute; top:-4px; bottom:-4px; width:2px; background:#ECEFE2; opacity:.55; left:calc(var(--gl) + var(--p, 1) * (100% - var(--gl) - var(--gd))); pointer-events:none}
.dx-now::before{content:"agora"; position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; color:#ECEFE2}
@media (max-width:640px){ .dx-gantt{--gl:108px; --gd:74px} }
.dx-btn{border:1px solid rgba(214,230,104,.4); background:rgba(214,230,104,.12); color:#D6E668; font-weight:800; font-size:12.5px; border-radius:999px; padding:7px 14px; min-height:34px}
.dx-btn.pri{background:#D6E668; color:#0F1F17; border-color:#D6E668}
.dx-row{display:flex; flex-wrap:wrap; gap:10px}
.dx-evs{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.dx-ev{display:grid; gap:6px; text-align:left; padding:14px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%), var(--dx-c); border:1px solid var(--dx-ln); color:inherit; transition:transform .16s ease, border-color .16s ease}
.dx-ev:hover{transform:translateY(-2px); border-color:rgba(214,230,104,.3)}
.dx-ev.sel{border-color:rgba(214,230,104,.6); box-shadow:0 0 0 1px rgba(214,230,104,.35), 0 12px 30px rgba(0,0,0,.3)}
.dx-evh{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.dx-evh b{display:block; font-size:14px; font-weight:700; line-height:1.25} .dx-evh small{display:block; font-size:11.5px; color:var(--dx-ink3)}
.dx-arc{width:100%; max-width:200px; margin:0 auto; display:block}
.dx-dot.f{fill:#D6E668} .dx-dot.a{fill:#8FA889} .dx-dot.b{fill:#FF7A6E} .dx-dot.v{fill:rgba(199,203,184,.14)} .dx-dot.pivot{fill:#ECEFE2}
.dx-hero.lime .dx-dot.f{fill:#0F1F17} .dx-hero.lime .dx-dot.a{fill:#3E5A3F} .dx-hero.lime .dx-dot.v{fill:rgba(15,31,23,.16)} .dx-hero.lime .dx-dot.pivot{fill:#0F1F17}
.dx-evf{display:flex; justify-content:space-between; align-items:baseline; gap:8px} .dx-evf b{font-size:22px; font-weight:600; font-variant-numeric:tabular-nums} .dx-evf small{font-size:11.5px; color:var(--dx-ink3); text-align:right}
.dx-ht{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em}
.dx-arcbig{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px} .dx-arcbig b{display:block; font-size:40px; font-weight:600; letter-spacing:-.03em}
.dx-st4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.dx-st4 > div{background:rgba(15,31,23,.1); border-radius:10px; padding:6px 8px} .dx-st4 small{display:block; font-size:10.5px; font-weight:700} .dx-st4 b{font-size:17px; font-weight:700}
.dx-fm{display:grid; gap:6px} .dx-fm > div{display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12.5px} .dx-fm .dx-ib{width:100%; margin:0}
.dx-prev{background:rgba(214,230,104,.06); border:1px solid rgba(214,230,104,.2); border-radius:12px; padding:10px 12px; display:grid; gap:4px} .dx-prev small{font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--dx-ink3)} .dx-prev b{font-size:13px; font-weight:600}
.dx-acts{display:flex; gap:8px; flex-wrap:wrap}
.dx-heat{border-collapse:separate; border-spacing:3px; width:100%; font-size:12px}
.dx-heat th{font-size:10.5px; color:var(--dx-ink3); font-weight:700; text-align:center; padding:2px} .dx-heat th:first-child{text-align:left}
.dx-heat td span{display:grid; place-items:center; height:28px; min-width:28px; border-radius:7px; font-weight:700; font-variant-numeric:tabular-nums}
.dx-heat td.nm{white-space:nowrap; font-weight:600; padding-right:8px; max-width:170px; overflow:hidden; text-overflow:ellipsis; color:var(--dx-ink2)}
.dx-heat tr.tt td span{background:transparent; border:1px solid var(--dx-ln); color:var(--dx-ink2)}
.dx-scale{display:flex; align-items:center; gap:6px; color:var(--dx-ink3)} .dx-scale i{width:70px; height:6px; border-radius:999px; background:linear-gradient(90deg, #1E3A2E, #D6E668)}
.dx-rel{position:relative; height:380px}
.dx-vazio{margin:0; padding:18px 4px; color:var(--dx-ink3); font-size:13px; text-align:center}

.dx-tab th, .dx-heat th, .dx-tab td, .dx-heat td{background:transparent; color:inherit}
.dx-tab thead th, .dx-heat thead th{position:static; color:var(--dx-ink3); background:transparent}
.dx-now::before{top:auto; bottom:-16px}
.dx-pipe{height:520px}
@media (max-width:640px){ .dx-pipe{height:420px} .dx-globe{height:240px} .dx-rel{height:300px} .dx-fcols b{font-size:20px} .dx-fcols small{font-size:10.5px} }
.dx-c.dx-pc{grid-template-rows:auto 1fr}

.dx-plb{display:flex; align-items:baseline; gap:6px; padding:4px 9px 4px 7px; max-width:130px}
.dx-plb b{font-size:13px; font-weight:800; color:#D6E668} .dx-plb.atr b{color:#F0C45A}
.dx-plb span{overflow:hidden; text-overflow:ellipsis; color:#C7CBB8 !important; font-weight:600}

.dx-note{font-size:13px; color:var(--dx-ink2); background:rgba(214,230,104,.06); border:1px solid rgba(214,230,104,.22); border-radius:14px; padding:12px 14px; line-height:1.5}
.dx-note b{color:var(--dx-lima)}
.dx-evm{display:grid; gap:4px; padding:8px 0 2px} .dx-evm small{font-size:11px; color:var(--dx-ink3)}
.dx-evf b{font-size:20px}

.dx-par{margin-top:12px}
.dx-pchips{display:flex; flex-wrap:wrap; gap:6px}
.dx-pchips button{border:1px solid var(--dx-ln); background:rgba(199,203,184,.05); color:var(--dx-ink2); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:650}
.dx-pchips button:hover{border-color:rgba(214,230,104,.4); color:var(--dx-ink)}

/* Bloco de estilo do Cássio (camada cx3). Veja o AVISO no início do bloco cx3 do script. */
/* =====================================================================
   Cactus Operação v8 (cx3): vidro líquido
   Fundo com luz verde e limão em movimento lento; superfícies translúcidas com
   desfoque e brilho na borda; menos linhas, menos cor de borda, mais respiro.
   "Menos transparência" (Aparência) continua trocando o vidro por sólido.
   ===================================================================== */
html.cx3.cx-light:not(.zz1):not(.zz2){
  --bg:#E7EBDF;
  --g-fill:rgba(255,255,255,.52); --g-fill-2:rgba(255,255,255,.38); --g-fill-3:rgba(255,255,255,.66);
  --g-edge:rgba(255,255,255,.75); --g-edge-out:rgba(15,31,23,.08);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.25);
  --g-sh:0 1px 2px rgba(15,31,23,.04), 0 10px 30px -8px rgba(15,31,23,.14);
  --g-blur:blur(22px) saturate(170%);
  --surface:rgba(255,255,255,.58); --surface-2:rgba(255,255,255,.42); --surface-3:rgba(240,243,232,.7);
  --line:rgba(15,31,23,.09); --line-2:rgba(15,31,23,.14);
  --r:20px; --r-sm:14px;
}
html.cx3.cx-dark:not(.zz1):not(.zz2){
  --bg:#0B1711;
  --g-fill:rgba(28,48,38,.46); --g-fill-2:rgba(28,48,38,.32); --g-fill-3:rgba(34,58,46,.62);
  --g-edge:rgba(255,255,255,.10); --g-edge-out:rgba(0,0,0,.35);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.02);
  --g-sh:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -10px rgba(0,0,0,.6);
  --g-blur:blur(24px) saturate(150%);
  --surface:rgba(28,48,38,.5); --surface-2:rgba(255,255,255,.04); --surface-3:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13);
  --r:20px; --r-sm:14px;
}

/* ---------- fundo: luz que dá profundidade ao vidro ---------- */
html.cx3 body::before{content:""; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none; filter:blur(10px)}
html.cx3.cx-light body::before{background:
  radial-gradient(38vmax 30vmax at 12% 8%, rgba(62,90,63,.22), transparent 70%),
  radial-gradient(34vmax 28vmax at 92% 6%, rgba(214,230,104,.45), transparent 70%),
  radial-gradient(40vmax 34vmax at 78% 92%, rgba(107,160,120,.22), transparent 70%),
  radial-gradient(30vmax 26vmax at 18% 96%, rgba(214,230,104,.22), transparent 70%)}
html.cx3.cx-dark body::before{background:
  radial-gradient(38vmax 30vmax at 10% 4%, rgba(214,230,104,.12), transparent 70%),
  radial-gradient(40vmax 32vmax at 96% 10%, rgba(79,167,106,.16), transparent 70%),
  radial-gradient(44vmax 36vmax at 70% 100%, rgba(62,90,63,.32), transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  html.cx3:not(.lg-calmo) body::before{animation:cx3-luz 38s ease-in-out infinite alternate}
}
@keyframes cx3-luz{0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-2vmax,1.5vmax,0) scale(1.04)} 100%{transform:translate3d(1.5vmax,-1vmax,0) scale(1.02)}}

/* ---------- vidro: estrutura (menu, topo, barra do celular) ---------- */
html.cx3:not(.lg-solid) .side,
html.cx3:not(.lg-solid) .topbar,
html.cx3:not(.lg-solid) .bnav{
  background:var(--g-fill) !important; -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge) !important; box-shadow:var(--g-hi), var(--g-sh) !important}
@media (min-width:960px){
  html.cx3 .side{margin:12px 0 12px 12px; height:calc(100vh - 24px) !important; height:calc(100dvh - 24px) !important; border-radius:24px !important; top:12px !important}
  html.cx3 .topbar{margin:12px 12px 0 12px; border-radius:20px !important; top:12px !important}
  html.cx3 .main{padding-left:12px}
}
html.cx3 .topbar{min-height:60px}
html.cx3 .side .nav-btn{border-radius:12px}
html.cx3 .side .nav-btn[aria-current="page"]{background:var(--g-fill-3) !important; box-shadow:var(--g-hi), 0 4px 14px -6px rgba(15,31,23,.25) !important; border:1px solid var(--g-edge) !important}
html.cx3.cx-dark .side .nav-btn[aria-current="page"]{background:rgba(214,230,104,.12) !important; color:var(--lime)}
html.cx3 .cx-sec{letter-spacing:.08em; opacity:.7}

/* ---------- vidro: cartões e painéis ---------- */
html.cx3:not(.lg-solid) :is(.panel, .qb, .cx-stat, .cx-card, .gx-card, .tbl-wrap, .kpi, .est-tile, .cx-li, .mm-l, .t3-tile, .ar-p, .pg-head .cx-tabs, .qd-tabs, .chipset.seg, .dx-card){
  background:var(--g-fill) !important; -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge) !important; box-shadow:var(--g-hi), var(--g-sh) !important}
html.cx3 :is(.panel, .qb, .cx-stat, .cx-card, .gx-card, .tbl-wrap, .kpi, .est-tile){border-radius:var(--r) !important}
/* listas dentro de painéis: sem caixa sobre caixa */
html.cx3 .panel .gx-row, html.cx3 .qb .gx-row, html.cx3 .ar-p .gx-row{background:transparent !important; box-shadow:none !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; border-left:3px solid var(--sf, var(--idle-f)) !important; padding-left:12px}
html.cx3 .gx-row{border-left-width:3px !important}
html.cx3 :is(.panel, .qb) .gx-row:last-child{border-bottom:0 !important}
/* barras de cor grossas no topo dos cartões viram um detalhe fino */
html.cx3 :is(.est-tile, .gx-meta, .s3-b, .kpi){border-top-width:1px !important}
html.cx3 .kpi .kpi-bars{opacity:.35}
html.cx3 .kpi .v{font-weight:600; letter-spacing:-.02em}
/* títulos de página mais leves */
html.cx3 .pg-head h1, html.cx3 .h1{font-weight:600 !important; letter-spacing:-.025em}
html.cx3 .pg-head .sub{opacity:.8}
/* botões e campos */
html.cx3:not(.lg-solid) .btn:not(.primary):not(.danger), html.cx3:not(.lg-solid) .icon-btn{background:var(--g-fill-2) !important; border:1px solid var(--g-edge) !important; box-shadow:var(--g-hi) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
html.cx3 .btn{border-radius:12px}
html.cx3 .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px -6px rgba(30,58,46,.55) !important}
html.cx3:not(.lg-solid) .inp, html.cx3:not(.lg-solid) select.inp, html.cx3:not(.lg-solid) textarea.inp{background:var(--g-fill-3) !important; border:1px solid var(--line-2) !important; border-radius:12px}
html.cx3:not(.lg-solid) .topbar .tb-search{background:var(--g-fill-2) !important; border:1px solid var(--g-edge) !important; border-radius:14px}
/* janelas */
html.cx3:not(.lg-solid) .dlg{background:var(--g-fill-3) !important; -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--g-edge) !important; box-shadow:var(--g-hi), 0 30px 80px -10px rgba(15,31,23,.35) !important; border-radius:24px !important}
html.cx3.cx-light:not(.lg-solid) .dlg{background:rgba(250,251,246,.82) !important}
html.cx3.cx-dark:not(.lg-solid) .dlg{background:rgba(18,34,26,.86) !important}
html.cx3 .dlg::backdrop{-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
html.cx3 .toast{border-radius:14px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
html.cx3.cx-light .toast{background:rgba(15,31,23,.88) !important}

/* ---------- correção: números dos cartões que ficavam brancos sobre fundo claro ---------- */
html.cx3.cx-light .kpi .v{color:var(--ink) !important}
html.cx3.cx-light .kpi .l{color:var(--ink-2) !important}
/* situação do cartão: um fio de cor no topo, em vez da borda grossa */
html.cx3:not(.lg-solid) :is(.qb, .gx-card, .cx-card, .est-tile, .kpi, .cx-stat)[data-s="bad"]{box-shadow:inset 0 3px 0 -1px var(--bad-f), var(--g-hi), var(--g-sh) !important}
html.cx3:not(.lg-solid) :is(.qb, .gx-card, .cx-card, .est-tile, .kpi, .cx-stat)[data-s="warn"]{box-shadow:inset 0 3px 0 -1px var(--warn-f), var(--g-hi), var(--g-sh) !important}

/* ---------- menu: alça para mudar a largura ---------- */
.cx3-sz{position:absolute; top:24px; bottom:24px; right:-6px; width:12px; cursor:col-resize; z-index:5; border-radius:8px}
.cx3-sz::after{content:""; position:absolute; top:50%; left:5px; width:2px; height:40px; margin-top:-20px; border-radius:2px; background:var(--line-2); opacity:0; transition:opacity .2s}
.cx3-sz:hover::after, html.cx3-sizing .cx3-sz::after{opacity:1}
html.cx3-sizing, html.cx3-sizing *{cursor:col-resize !important; user-select:none}
html.cx3-sizing body.cx2 .app{transition:none !important}
html.cx-rail .cx3-sz{display:none}
@media (max-width:959px){ .cx3-sz{display:none} }

/* ===================================================================
   Tempo de uso
   =================================================================== */
.t3-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:14px}
.t3-seg{display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; gap:2px; padding:4px; border-radius:14px; background:var(--g-fill-2, var(--surface-2)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none)}
.t3-seg button{white-space:nowrap; border:0; background:transparent; color:var(--ink-2); font:inherit; font-weight:600; font-size:13px; padding:7px 13px; border-radius:10px; cursor:pointer}
.t3-seg button.on{background:var(--ink); color:var(--bg)}
html.cx-dark .t3-seg button.on{background:var(--lime); color:#0F1F17}
.t3-lock{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-3)}
.t3-tiles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:14px}
@media (max-width:900px){ .t3-tiles{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.t3-tile{display:grid; gap:4px; padding:14px 16px; border-radius:var(--r); min-width:0; position:relative}
.t3-tile small{font-size:12.5px; font-weight:600; color:var(--ink-3)}
.t3-tile b{font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.t3-tile span{font-size:12.5px; color:var(--ink-3)}
.t3-tile::after{content:""; position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:50%; background:var(--sf, var(--idle-f))}
.t3-tab{padding:6px !important; overflow:hidden}
.t3-th, .t3-tr{display:grid; grid-template-columns:minmax(170px, 1.3fr) minmax(140px, 2fr) 74px 74px 64px 70px minmax(110px, 1fr); gap:12px; align-items:center; padding:10px 12px}
.t3-th{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.t3-tr{width:100%; border:0; background:transparent; color:inherit; font:inherit; text-align:left; border-radius:14px; cursor:pointer; border-top:1px solid var(--line)}
.t3-tr:hover, .t3-tr.sel{background:var(--g-fill-3, var(--surface-2))}
.t3-tr .num, .t3-th .num{text-align:right; font-variant-numeric:tabular-nums}
.t3-tr .num{font-weight:600}
.t3-tr .num[data-s="bad"]{color:var(--bad)} .t3-tr .num[data-s="warn"]{color:var(--warn)} .t3-tr .num[data-s="ok"]{color:var(--ok)}
.t3-tr .k-a, .t3-dn .k-a{color:var(--ok)}
.t3-pn{display:flex; align-items:center; gap:10px; min-width:0}
.t3-pn > span:last-child{display:grid; min-width:0}
.t3-pn b{font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.t3-pn small{font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.t3-bar{display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--track); width:100%}
.t3-bar i, .t3-dia i, .t3-lg i{display:block}
[data-k="a"]{--t3:#4C8F5F} [data-k="v"]{--t3:#DDA52A} [data-k="o"]{--t3:#8A9683} [data-k="z"]{--t3:#C9CDBF}
html.cx-dark [data-k="a"]{--t3:#6FCB8A} html.cx-dark [data-k="v"]{--t3:#F0C45A} html.cx-dark [data-k="o"]{--t3:#6F8366} html.cx-dark [data-k="z"]{--t3:#3A4D42}
.t3-bar i{background:var(--t3)}
.t3-lg{display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 4px; font-size:12.5px; color:var(--ink-3)}
.t3-lg span{display:inline-flex; align-items:center; gap:6px}
.t3-lg i{width:12px; height:12px; border-radius:4px; background:var(--t3, transparent)}
.t3-lg i.w{background:transparent; box-shadow:inset 0 -3px 0 var(--ink)}
.t3-lg i.r{background:var(--bad-f)}
.t3-det{margin:4px 6px 14px; padding:16px; border-radius:18px; background:var(--g-fill-3, var(--surface-2)); border:1px solid var(--g-edge, var(--line))}
.t3-dh{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.t3-dh > div{display:grid}
.t3-dh small{color:var(--ink-3); font-size:12.5px}
.t3-dias{display:grid; gap:2px; margin-top:6px}
.t3-dr{display:grid; grid-template-columns:200px minmax(0, 1fr); gap:16px; padding:12px 4px; border-top:1px solid var(--line)}
@media (max-width:760px){ .t3-dr{grid-template-columns:1fr} .t3-th{display:none} .t3-tr{grid-template-columns:1fr 1fr; row-gap:6px} .t3-tr .t3-bw{grid-column:1 / -1; order:2} .t3-tr .num{text-align:left} }
.t3-dl{display:grid; gap:4px; align-content:start; justify-items:start}
.t3-dl small{color:var(--ink-3); font-size:12.5px}
.t3-dm{display:grid; gap:8px; min-width:0}
.t3-dia{display:grid; gap:1px; height:22px; position:relative; border-radius:6px; background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px var(--hr, 4.1667%)); background-color:color-mix(in srgb, var(--track) 45%, transparent)}
.t3-hrs{display:grid; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.t3-hrs span{white-space:nowrap}
.t3-dr-h{padding:4px 4px 0; border-top:0}
.t3-dia i{border-radius:2px; background:var(--t3, transparent); position:relative}
.t3-dia i:not([data-k]), .t3-dia i[data-k=""]{background:transparent}
.t3-dia i.w::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:3px; border-radius:2px; background:var(--ink)}
.t3-dia i.r{background:var(--bad-f); outline:1px solid var(--bad)}
.t3-dn{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2); padding-top:4px}
.t3-como{margin-top:8px}
.t3-load{padding:24px}

/* ===================================================================
   Minha área de trabalho
   =================================================================== */
.ar-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; padding:8px 8px 8px 14px; border-radius:16px; background:var(--g-fill-2, var(--surface-2)); border:1px solid var(--g-edge, var(--line))}
.ar-bar.on{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent)}
.ar-dica{font-size:13px; color:var(--ink-2)}
.ar-ini{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer}
.ar-grid{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:56px; grid-auto-flow:row dense; gap:14px}
.ar-p{position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; border-radius:var(--r); overflow:hidden; transition:box-shadow .2s, transform .2s, opacity .2s}
.ar-h{display:flex; align-items:center; gap:8px; padding:10px 10px 10px 14px; border-bottom:1px solid var(--line); flex:0 0 auto; min-width:0}
.ar-h b{font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ar-ic{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand); flex:0 0 auto}
.ar-grip{display:none; color:var(--ink-3); cursor:grab}
.ar-acts{display:flex; gap:6px; overflow:hidden; max-width:55%; flex:0 1 auto}
.ar-acts .btn{font-size:12px; padding:5px 9px; min-height:0; white-space:nowrap}
.ar-acts > *:nth-child(n+3){display:none}
.ar-hb{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; border:0; background:transparent; color:var(--ink-3); cursor:pointer; flex:0 0 auto}
.ar-hb:hover{background:var(--surface-3); color:var(--ink)}
.ar-x{display:none}
.ar-body{flex:1 1 auto; min-height:0; overflow:auto; padding:14px; overscroll-behavior:contain}
.ar-body > *:first-child{margin-top:0}
.ar-body .pg-head{display:none}
.ar-rs{display:none; position:absolute; right:4px; bottom:4px; width:18px; height:18px; cursor:nwse-resize; border-radius:5px;
  background:linear-gradient(135deg, transparent 50%, var(--ink-3) 50%, var(--ink-3) 58%, transparent 58%, transparent 70%, var(--ink-3) 70%, var(--ink-3) 78%, transparent 78%)}
.ar-grid.edit .ar-grip, .ar-grid.edit .ar-x, .ar-grid.edit .ar-rs{display:inline-grid}
.ar-grid.edit .ar-h{cursor:grab; background:var(--g-fill-3, var(--surface-2))}
.ar-grid.edit .ar-p{outline:1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); outline-offset:-1.5px}
.ar-grid.edit .ar-body{pointer-events:none; opacity:.72; user-select:none}
.ar-p.drg{z-index:20; opacity:.9; box-shadow:0 30px 60px -12px rgba(15,31,23,.4) !important; transition:none; cursor:grabbing}
.ar-p.rsz{z-index:20; transition:none}
.ar-p.rsz::after{content:attr(data-tam); position:absolute; right:28px; bottom:8px; font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; background:var(--ink); color:var(--bg)}
.ar-p.alvo{outline:2.5px solid var(--brand) !important; outline-offset:-2.5px}
.ar-vazio{grid-column:1 / -1; grid-row:span 5}
.ar-cat{display:grid; gap:6px; margin-bottom:12px}
.ar-cat > small{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.ar-catl{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px}
.ar-opt{display:flex; gap:10px; align-items:flex-start; text-align:left; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); color:inherit; font:inherit; cursor:pointer}
.ar-opt:hover{border-color:var(--brand)}
.ar-opt > span:first-child{color:var(--brand); padding-top:2px}
.ar-opt > span:last-child{display:grid; gap:2px}
.ar-opt small{font-size:12px; color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ar-mods{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px}
.ar-mod{display:grid; gap:6px; text-align:left; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--surface-2); color:inherit; font:inherit; cursor:pointer}
.ar-mod:hover{border-color:var(--brand)}
.ar-mod small{font-size:12.5px; color:var(--ink-3)}
.ar-mini{display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:9px; gap:3px; padding:8px; border-radius:10px; background:var(--surface-3); margin-bottom:4px}
.ar-mini i{border-radius:3px; background:color-mix(in srgb, var(--brand) 55%, transparent)}
@media (max-width:900px){
  .ar-grid{grid-template-columns:1fr; grid-auto-rows:auto}
  .ar-p{grid-column:1 / -1 !important; grid-row:auto !important; max-height:70vh}
  .ar-rs{display:none !important}
}

@media (max-width:600px){
  .t3-tile{padding:12px 14px} .t3-tile b{font-size:21px}
  .t3-dr-h{display:none}
}
/* topo no celular: o título não passa por baixo dos botões */
html.cx3 .tb-title{min-width:0; overflow:hidden}
html.cx3 .tb-title b, html.cx3 .tb-title small{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ===================================================================
   Menos botões (cx3-simples)
   =================================================================== */
html.cx3-simples #cxExp, html.cx3-simples .tb-ajuda, html.cx3-simples .cx-pb.snd, html.cx3-simples #side .cx-find, html.cx3-simples .pg-ajuda{display:none !important}
html.cx3-simples #tbSalvo.cx3-ok{display:none !important}
html.cx3-simples .cx-pb{flex:1}
/* ícones decorativos: sem quadradinho colorido */
html.cx3-simples :is(.kpi-ic, .cx-chip, .ph-ic){background:transparent !important; box-shadow:none !important; color:var(--ink-3) !important; border:0 !important}
html.cx3-simples .kpi .kpi-bars{display:none}
html.cx3-simples .pg-head .h1 + .sub{margin-top:2px}
@media (hover:hover) and (pointer:fine){
  /* ações secundárias aparecem ao passar o mouse ou ao navegar pelo teclado */
  html.cx3-simples .gx-row .gx-acts > :not(.primary),
  html.cx3-simples :is(.qb, .est-tile, .vw-col) .icon-btn{opacity:0; transition:opacity .15s}
  html.cx3-simples .gx-row:is(:hover, :focus-within) .gx-acts > *,
  html.cx3-simples :is(.qb, .est-tile, .vw-col, .panel, .ar-p):is(:hover, :focus-within) :is(.icon-btn){opacity:1}
  html.cx3-simples .ap-card .ap-lk{opacity:0; transition:opacity .15s}
  html.cx3-simples .ap-card:is(:hover, :focus-within) .ap-lk{opacity:1}
}

/* ===================================================================
   Aprovação do cliente (equipe)
   =================================================================== */
.ap-wrap{display:grid; grid-template-columns:260px minmax(0, 1fr); gap:18px; align-items:start}
@media (max-width:900px){ .ap-wrap{grid-template-columns:1fr} .ap-side{position:static !important} .ap-clis{display:flex !important; overflow-x:auto; scrollbar-width:none} .ap-cli{flex:0 0 auto; max-width:240px} }
.ap-side{position:sticky; top:96px; display:grid; gap:8px}
.ap-sh{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding-left:6px}
.ap-clis{display:grid; gap:4px; max-height:calc(100vh - 140px); overflow:auto; padding:2px}
.ap-cli{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; border:1px solid transparent; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer}
.ap-cli:hover{background:var(--g-fill-2, var(--surface-2))}
.ap-cli.on{background:var(--g-fill-3, var(--surface)); border-color:var(--g-edge, var(--line)); box-shadow:var(--g-hi, none), 0 4px 14px -8px rgba(15,31,23,.3)}
.ap-av{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:700; flex:0 0 auto}
.ap-cn{display:grid; min-width:0; flex:1}
.ap-cn b{font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ap-cn small{font-size:12px; color:var(--ink-3)}
.ap-badge{min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-grid; place-items:center; font-size:12px; font-weight:700; background:var(--sf, var(--idle-f)); color:var(--ink)}
.ap-badge[data-s="warn"]{background:var(--warn-f)} .ap-badge[data-s="bad"]{background:var(--bad-f)}
.ap-main-col{display:grid; gap:14px; min-width:0}
.ap-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.ap-hl{display:grid; gap:4px}
.ap-hl h2{font-size:22px; font-weight:650; letter-spacing:-.02em; margin:0}
.ap-mes{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2)}
.ap-mes b{font-weight:600; min-width:150px; text-align:center}
.ap-prog{display:grid; gap:8px}
.ap-bar{display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--track)}
.ap-bar i, .ap-leg i{display:block}
.ap-prog [data-k="ok"]{--ap:#4C8F5F} .ap-prog [data-k="esperando"]{--ap:#DDA52A} .ap-prog [data-k="ajuste"]{--ap:#D0503E} .ap-prog [data-k="enviar"]{--ap:#6F8FB8} .ap-prog [data-k="prod"]{--ap:#BFC5B5}
html.cx-dark .ap-prog [data-k="prod"]{--ap:#3A4D42}
.ap-bar i{background:var(--ap)}
.ap-leg{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:var(--ink-3)}
.ap-leg span{display:inline-flex; align-items:center; gap:6px}
.ap-leg i{width:10px; height:10px; border-radius:3px; background:var(--ap)}
.ap-leg b{color:var(--ink); font-weight:650}
.ap-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px}
.ap-card{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--g-fill, var(--surface)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none), var(--g-sh, none); -webkit-backdrop-filter:var(--g-blur, none); backdrop-filter:var(--g-blur, none)}
html.lg-solid .ap-card{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface)}
.ap-card.sel{outline:2px solid var(--brand); outline-offset:-2px}
.ap-top{display:flex; align-items:center; gap:8px; padding:10px 12px 8px}
.ap-ck{display:inline-grid; place-items:center; cursor:pointer}
.ap-ck input{width:17px; height:17px; accent-color:var(--brand); cursor:pointer}
.ap-dt{font-size:12.5px; font-weight:650; color:var(--ink-2)}
.ap-st{font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--idle-f); color:var(--ink-2); white-space:nowrap}
.ap-st[data-s="ok"]{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)} .ap-st[data-s="warn"]{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn)} .ap-st[data-s="bad"]{background:color-mix(in srgb, var(--bad) 13%, transparent); color:var(--bad)}
.ap-main{display:grid; gap:4px; padding:0 12px 10px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer}
.ap-main b{font-size:14px; font-weight:650; line-height:1.3}
.ap-main small{font-size:12px; color:var(--ink-3)}
.ap-th{position:relative; aspect-ratio:4 / 3; border-radius:12px; overflow:hidden; background:var(--surface-3); margin-bottom:6px}
.ap-th img{width:100%; height:100%; object-fit:cover; display:block}
.ap-th.txt{display:grid; place-items:center; padding:16px; background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, var(--surface-3)), var(--surface-3))}
.ap-th.txt p{margin:0; font-size:13px; line-height:1.45; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}
.ap-play{position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.55); color:#fff}
.ap-q{margin:0 12px 10px; padding:8px 10px; border-left:3px solid var(--bad); border-radius:0 10px 10px 0; background:color-mix(in srgb, var(--bad) 9%, transparent); font-size:13px; font-style:italic; color:var(--ink)}
.ap-ft{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 12px; border-top:1px solid var(--line)}
.ap-ft .btn{width:100%; justify-content:center}
.ap-info{font-size:12px; color:var(--ink-3)}
.ap-lk{display:inline-flex; gap:10px; margin-left:auto}
.ap-lk .lnk{font-size:12px; font-weight:600}
.ap-resp{display:grid; gap:8px; padding:12px 14px; margin-bottom:14px; border-radius:16px; background:var(--warn-f); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent)}
.ap-resp > b{display:inline-flex; align-items:center; gap:8px}
.ap-rl{display:flex; align-items:center; gap:10px; font-size:13px}
.ap-como{margin-top:4px}

/* ===================================================================
   Aprovação do cliente (o que o cliente vê)
   =================================================================== */
.ap-resp-cli{display:grid; gap:10px; margin-top:12px}
article.ig .ap-resp-cli{margin:10px 0 0; padding:12px 12px 14px; border-top:1px solid var(--line)}
.ap-rc-t{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
article.ig .ap-ta{min-height:64px; font-size:14.5px; border-radius:12px}
article.ig .ap-bts .btn{min-height:42px}
.ap-ed{display:flex; justify-content:center}
.ap-ed .btn{background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--ink-2); font-size:13px}
.ap-ta{min-height:76px; resize:vertical; font-size:15px}
.ap-onde{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ap-onde small{font-size:12.5px; color:var(--ink-3); margin-right:2px}
.ap-onde .chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.ap-bts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ap-bts .btn{justify-content:center}
.ap-bts .btn:nth-child(3){grid-column:1 / -1}
.ap-bts .btn[disabled]{opacity:.45; cursor:not-allowed}
.ap-todas{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 16px; margin:12px 0; border-radius:16px; background:color-mix(in srgb, var(--ok) 8%, var(--g-fill-3, var(--surface))); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent)}
.ap-todas .grow{display:grid; gap:2px; min-width:200px}
.ap-todas small{font-size:12.5px; color:var(--ink-2)}

/* ===================================================================
   Menu no topo (cx3-top), só no computador
   =================================================================== */
.cx3-nav, .cx3-conta{display:none}
@media (min-width:960px){
  html.cx3-top .side{display:none !important}
  html.cx3-top body.cx2 .app, html.cx3-top .app{grid-template-columns:minmax(0, 1fr) !important}
  html.cx3-top .main{padding-left:0 !important; margin-left:0 !important}
  html.cx3-top .topbar{display:flex !important; align-items:center; gap:10px; margin:12px 12px 0 !important; padding:8px 10px 8px 14px !important}
  html.cx3-top .tb-title{display:none !important}
  html.cx3-top .tb-logo{display:flex !important; flex:0 0 auto; margin-right:4px}
  html.cx3-top .tb-logo img{height:28px; width:auto}
  html.cx3-top .cx3-nav{display:flex; align-items:center; gap:2px; flex:0 1 auto; min-width:0}
  html.cx3-top .cx3-conta{display:block}
  html.cx3-top .tb-search{flex:1 1 180px; max-width:340px; margin-left:auto; min-width:140px}
  html.cx3-top .tb-search kbd{display:none}
  html.cx3-top .tb-search input::placeholder{color:transparent}
  html.cx3-top .tb-search input:placeholder-shown:not(:focus){cursor:pointer}
  html.cx3-top .tb-search label::after{content:"Buscar"; position:absolute; left:40px; top:50%; transform:translateY(-50%); font-size:13.5px; color:var(--ink-3); pointer-events:none}
  html.cx3-top .tb-search label:focus-within::after, html.cx3-top .tb-search label:has(input:not(:placeholder-shown))::after{display:none}
  html.cx3-top .tb-search label{position:relative}
  html.cx3-top .tb-search input:focus::placeholder{color:var(--ink-3)}
  /* o nome do módulo já está no topo: a tela começa direto nas abas */
  html.cx3-top .cx-mh .cx-mt{display:none}
  html.cx3-top .cx-mh{justify-content:flex-start; margin-bottom:6px}
}
@media (min-width:960px) and (max-width:1240px){
  html.cx3-top .cx3-tm{padding:0 9px; font-size:13.5px}
  html.cx3-top .tb-eq{display:none}
}
.cx3-tm{position:relative; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px; border-radius:12px; border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:14px; font-weight:650; cursor:pointer; white-space:nowrap; list-style:none}
.cx3-tm::-webkit-details-marker{display:none}
.cx3-tm:hover{background:var(--g-fill-2, var(--surface-2)); color:var(--ink)}
.cx3-tm[aria-current="page"], .cx3-dd.on > .cx3-tm{background:var(--ink); color:var(--bg)}
html.cx-dark .cx3-tm[aria-current="page"], html.cx-dark .cx3-dd.on > .cx3-tm{background:var(--lime); color:#0F1F17}
.cx3-tb{min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:11px; font-weight:700; display:inline-grid; place-items:center; background:var(--ink-3); color:#fff}
.cx3-tb[data-s="bad"]{background:var(--bad)}
.cx3-chev{display:inline-grid; opacity:.7; transition:transform .15s}
.cx3-dd[open] .cx3-chev{transform:rotate(180deg)}
.cx3-dd{position:relative}
.cx3-dd > summary{list-style:none}
.cx3-dd > summary::-webkit-details-marker{display:none}
.cx3-menu{position:absolute; top:calc(100% + 8px); left:0; z-index:60; min-width:230px; display:grid; gap:2px; padding:6px; border-radius:16px;
  background:var(--g-fill-3, var(--surface)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none), 0 18px 40px -12px rgba(15,31,23,.35);
  -webkit-backdrop-filter:blur(28px) saturate(170%); backdrop-filter:blur(28px) saturate(170%)}
html.cx-light .cx3-menu{background:#F8FAF4 !important} html.cx-dark .cx3-menu{background:#13241B !important}
.cx3-menu.dir{left:auto; right:0}
.cx3-mi{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer}
.cx3-mi:hover, .cx3-mi:focus-visible{background:var(--surface-3)}
.cx3-mi > span:first-child{display:inline-grid; color:var(--ink-3)}
.cx3-mi[aria-current="page"]{background:var(--brand-soft); color:var(--brand)}
.cx3-mi[aria-current="page"] > span:first-child{color:var(--brand)}
.cx3-quem{display:grid; gap:2px; padding:8px 10px 10px; margin-bottom:4px; border-bottom:1px solid var(--line)}
.cx3-quem small{color:var(--ink-3); font-size:12.5px}
.cx3-av{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; cursor:pointer}
.cx3-av .uav{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; background:linear-gradient(135deg, #8E5CF6, #C25CF6); color:#fff; box-shadow:0 0 0 2px var(--g-edge, var(--line))}
.cx3-conta[open] .uav{box-shadow:0 0 0 2px var(--brand)}
@media (min-width:960px){
  html.cx3-top .topbar{position:sticky; z-index:90 !important}
  html.cx3-top #opNovo{display:inline-flex !important}
}

/* ===================================================================
   Card do cliente organizado
   =================================================================== */
.cd-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.cd-acts .cx3-dd > summary.btn{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.cd-acts .cx3-menu .cx3-mi{align-items:flex-start}
.cd-acts .cx3-mi .grow{display:grid; gap:1px}
.cd-acts .cx3-mi small{font-size:12px; font-weight:500; color:var(--ink-3)}
.cd-acts .cx3-mi > span:first-child{padding-top:2px}
.cd-tabs{display:flex !important; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px}
.cd-mais > summary{display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none}
.cd-mais > summary::-webkit-details-marker{display:none}
.cd-mais.on > summary{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cd-mg{display:block; padding:8px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.cx3-mi.on{background:var(--brand-soft); color:var(--brand)}
#dlgCard #cdFoot[hidden]{display:none !important}
.cd-alerta{margin-bottom:12px}
.cd-box{display:grid; gap:10px; padding:14px 16px; margin-bottom:12px; border-radius:16px; background:var(--g-fill, var(--surface)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none)}
.cd-bh{display:flex; align-items:center; gap:10px}
.cd-bh b{font-size:14.5px; font-weight:700}
.cd-bh small{font-size:12.5px; color:var(--ink-3)}
.cd-bts{display:flex; flex-wrap:wrap; gap:8px}
.cd-nums{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:12px}
@media (max-width:560px){ .cd-nums{grid-template-columns:repeat(2, minmax(0, 1fr))} .cd-duo{grid-template-columns:1fr !important} }
.cd-num{display:grid; gap:2px; padding:10px 12px; border-radius:14px; background:var(--g-fill-2, var(--surface-2)); border:1px solid var(--g-edge, var(--line))}
.cd-num b{font-size:18px; font-weight:650; letter-spacing:-.01em}
.cd-num small{font-size:12px; color:var(--ink-3)}
.cd-num[data-s="bad"] b{color:var(--bad)} .cd-num[data-s="warn"] b{color:var(--warn)}
.cd-eq{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
.cd-eqi{display:grid; gap:1px; padding:8px 10px; border-radius:12px; background:var(--surface-3)}
.cd-eqi small{font-size:11.5px; color:var(--ink-3)}
.cd-eqi b{font-size:13.5px; font-weight:650}
.cd-pad{font-size:11px; color:var(--ink-3)}
.cd-falta{margin:0; font-size:12.5px; color:var(--ink-3)}
.cd-duo{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.cd-duo .cd-box{margin-bottom:0}
.cd-pk{display:flex; flex-wrap:wrap; gap:6px}
.cd-pk span{padding:6px 10px; border-radius:10px; background:var(--surface-3); font-size:13px}
.cd-pk b{font-weight:700}
.cd-link{padding:12px; border-radius:14px; background:var(--warn-f); margin:8px 0}

/* ===================================================================
   Gravação: ficha para o cinegrafista e roteiros falados
   =================================================================== */
.gv-ficha, .gv-th{display:grid; gap:12px; padding:16px; margin:12px 0; border-radius:18px; background:var(--g-fill, var(--surface)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none)}
.gv-h{display:flex; align-items:center; gap:10px}
.gv-h b{font-size:15px; font-weight:700}
.gv-cli{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
@media (max-width:720px){ .gv-cli{grid-template-columns:1fr} }
.gv-cli > div{display:grid; gap:2px; align-content:start; padding:10px 12px; border-radius:14px; background:var(--surface-3)}
.gv-cli small, .gv-q > small, .gv-regras > small{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.gv-cli b{font-size:14.5px; font-weight:650}
.gv-cli span{font-size:12.5px; color:var(--ink-2)}
.gv-ps{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.gv-p{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:999px; background:var(--g-fill-3, var(--surface)); font-size:13px; font-weight:600; color:var(--ink) !important}
.gv-p .uav{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; background:var(--brand-soft); color:var(--brand)}
.gv-obs{margin:0; font-size:13.5px; color:var(--ink-2)}
.gv-regras ul{margin:4px 0 0; padding-left:18px; display:grid; gap:2px; font-size:13.5px}
.gv-q{display:grid; gap:6px; margin:0}
.gv-q p{margin:0; white-space:pre-wrap; font-size:14px}
.gv-ths{display:grid; gap:10px}
.gv-t{display:grid; gap:8px; padding:12px 14px; border-radius:14px; background:var(--surface-3)}
.gv-th2{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gv-th2 b{font-size:14px; font-weight:650}
.gv-th2 small{font-size:12px; color:var(--ink-3)}
.gv-tx{margin:0; white-space:pre-wrap; font-size:15px; line-height:1.6; color:var(--ink); max-height:220px; overflow:auto}

.cx3-ti{display:inline-grid; margin-right:-1px}

/* topo mais limpo */
@media (min-width:960px){
  html.cx3-limpo #tbBell{display:none !important}
  html.cx3-limpo:not(.cx3-lider) #tbUsers .tb-eq{display:none !important}
  html.cx3-limpo #opNovo{width:40px; height:40px; min-height:40px; padding:0 !important; border-radius:50% !important; justify-content:center; font-size:0 !important; gap:0 !important}
  html.cx3-limpo #opNovo > span{display:inline-grid; font-size:initial}
  html.cx3-limpo #opNovo svg{width:20px; height:20px}
}

/* topo em ícones: o nome aparece no módulo atual e ao passar o mouse */
@media (min-width:960px){
  html.cx3-top .cx3-nav{gap:4px}
  html.cx3-top .cx3-tm{height:40px; min-width:40px; padding:0 11px; justify-content:center; gap:8px; transition:background .18s, color .18s, padding .18s}
  html.cx3-top .cx3-tm .cx3-ti{display:inline-grid}
  html.cx3-top .cx3-tm .cx3-tl{display:none}
  html.cx3-top .cx3-tm[aria-current="page"] .cx3-tl, html.cx3-top .cx3-dd.on > .cx3-tm .cx3-tl{display:inline}
  html.cx3-top .cx3-tm[aria-current="page"], html.cx3-top .cx3-dd.on > .cx3-tm{padding:0 14px 0 12px}
  html.cx3-top .cx3-tm .cx3-chev{display:none}
  html.cx3-top .cx3-nav > .cx3-tm .cx3-tb, html.cx3-top .cx3-nav > .cx3-dd > .cx3-tm .cx3-tb{position:absolute; top:2px; right:2px; min-width:16px; height:16px; font-size:10px; padding:0 4px; box-shadow:0 0 0 2px var(--g-fill-3, var(--surface))}
  html.cx3-top .cx3-tm[aria-current="page"] .cx3-tb, html.cx3-top .cx3-dd.on > .cx3-tm .cx3-tb{position:static; box-shadow:none}
  /* nome flutuante ao passar o mouse */
  html.cx3-top .cx3-nav > .cx3-tm:not([aria-current="page"])::after, html.cx3-top .cx3-nav > .cx3-dd:not(.on):not([open]) > .cx3-tm::after{content:attr(title); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-4px); padding:5px 9px; border-radius:8px; background:var(--ink); color:var(--bg); font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:95}
  html.cx3-top .cx3-nav > .cx3-tm:not([aria-current="page"]):hover::after, html.cx3-top .cx3-nav > .cx3-tm:not([aria-current="page"]):focus-visible::after,
  html.cx3-top .cx3-nav > .cx3-dd:not(.on):not([open]) > .cx3-tm:hover::after{opacity:1; transform:translateX(-50%) translateY(0)}
  html.cx3-top .tb-search{max-width:420px}
}

/* =====================================================================
   PREMIUM MINIMALISTA (v8.6)
   Cor principal preto ou branco; verde Cactus como cor intermediária;
   detalhes na cor inversa. Degradê branco > verde (claro) e preto > verde (escuro),
   linhas finas, cantos bem arredondados, vidro suave e animações discretas.
   ===================================================================== */
html.cx3.cx-light:not(.zz1):not(.zz2){
  --bg:#F6F7F4; --surface:#FFFFFF; --surface-2:#F4F5F2; --surface-3:#EEF0EB;
  --ink:#0B0C0B; --ink-2:#3A3D39; --ink-3:#71766F;
  --line:rgba(11,12,11,.08); --line-2:rgba(11,12,11,.14);
  --brand:#0B0C0B; --brand-2:#000000; --brand-soft:#E7F3EB; --on-brand:#FFFFFF;
  --green:#2E9B57; --green-2:#58C27E; --green-soft:#E3F2E8;
  --hero-a:#0B0C0B; --hero-b:#16241B; --hero-ink:#F6F7F4;
  --track:#E9EBE6; --grid:#ECEEE9; --axis:#D5D8D1;
  --c1:#0B0C0B; --h-teal:#2E9B57; --h-green:#2E9B57;
  --focus:#2E9B57; --r:24px; --r-sm:16px;
  --g-fill:rgba(255,255,255,.66); --g-fill-2:rgba(255,255,255,.5); --g-fill-3:rgba(255,255,255,.86);
  --g-edge:rgba(11,12,11,.07); --g-hi:inset 0 1px 0 rgba(255,255,255,1);
  --g-sh:0 1px 1px rgba(11,12,11,.03), 0 8px 24px -12px rgba(11,12,11,.12);
  --g-blur:blur(20px) saturate(140%);
}
html.cx3.cx-dark:not(.zz1):not(.zz2){
  --bg:#070807; --surface:#101210; --surface-2:#151815; --surface-3:#1C1F1C;
  --ink:#F4F5F2; --ink-2:#C3C7C0; --ink-3:#8A8F88;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --brand:#F4F5F2; --brand-2:#FFFFFF; --brand-soft:rgba(63,191,111,.14); --on-brand:#070807;
  --green:#3FBF6F; --green-2:#6BD392; --green-soft:rgba(63,191,111,.14);
  --hero-a:#111411; --hero-b:#13291B; --hero-ink:#F4F5F2; --lime:#3FBF6F;
  --track:#1D201D; --grid:#1A1D1A; --axis:#2A2E2A;
  --c1:#F4F5F2; --h-teal:#3FBF6F; --h-green:#3FBF6F;
  --focus:#3FBF6F; --r:24px; --r-sm:16px;
  --g-fill:rgba(22,25,22,.62); --g-fill-2:rgba(255,255,255,.035); --g-fill-3:rgba(28,31,28,.9);
  --g-edge:rgba(255,255,255,.08); --g-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --g-sh:0 1px 1px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.7);
  --g-blur:blur(22px) saturate(130%);
}
html.cx3.cx-light body, html.cx3.cx-dark body{background:var(--bg) !important}
/* fundo: degradê suave para o verde e uma grade de linhas finas que some nas bordas */
html.cx3 body::before{animation:none !important; filter:none !important; inset:0 !important}
html.cx3.cx-light body::before{background:
  radial-gradient(70vmax 50vmax at 100% 0%, rgba(46,155,87,.10), transparent 60%),
  radial-gradient(60vmax 40vmax at 0% 100%, rgba(46,155,87,.06), transparent 60%),
  linear-gradient(180deg, #FFFFFF 0%, #F6F7F4 100%) !important}
html.cx3.cx-dark body::before{background:
  radial-gradient(70vmax 50vmax at 100% 0%, rgba(63,191,111,.12), transparent 60%),
  radial-gradient(60vmax 40vmax at 0% 100%, rgba(63,191,111,.06), transparent 62%),
  linear-gradient(180deg, #0B0C0B 0%, #070807 100%) !important}
html.cx3 body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--cx3-grade) 1px, transparent 1px), linear-gradient(90deg, var(--cx3-grade) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%)}
html.cx3.cx-light{--cx3-grade:rgba(11,12,11,.035)} html.cx3.cx-dark{--cx3-grade:rgba(255,255,255,.035)}

/* tipografia e forma */
html.cx3 body{letter-spacing:-.005em}
html.cx3 :is(h1, h2, h3, .h1, .h2, .ap-hl h2, .cx-mn){letter-spacing:-.025em}
html.cx3 .btn{border-radius:999px !important; font-weight:600}
html.cx3 .btn.primary{background:var(--brand) !important; color:var(--on-brand) !important; border-color:transparent !important; box-shadow:0 6px 18px -8px rgba(11,12,11,.45) !important}
html.cx3.cx-dark .btn.primary{box-shadow:0 6px 20px -8px rgba(255,255,255,.25) !important}
html.cx3 .btn.primary svg{color:inherit}
html.cx3 :is(.inp, select.inp, textarea.inp){border-radius:14px !important}
html.cx3 :is(.chip, .pill, .qd-tab, .cx-tab){border-radius:999px !important}
html.cx3 .cx-tab[aria-selected="true"], html.cx3 .qd-tab[aria-pressed="true"]{background:var(--ink) !important; color:var(--bg) !important; border-color:var(--ink) !important}
html.cx3 .cx-tab[aria-selected="true"] .cx-tb{background:var(--green) !important; color:#fff !important}
/* verde como intermediária: badges de destaque, ícones ativos, progresso */
html.cx3 .ar-ic, html.cx3 .ap-av, html.cx3 .cx3-mi[aria-current="page"], html.cx3 .cx3-mi.on{background:var(--green-soft) !important; color:var(--green) !important}
html.cx3 .cx3-mi[aria-current="page"] > span:first-child{color:var(--green) !important}
html.cx3 .ap-prog [data-k="ok"], html.cx3 .t3-bar [data-k="a"], html.cx3 .t3-lg [data-k="a"], html.cx3 .t3-dia [data-k="a"]{--ap:var(--green); --t3:var(--green)}
html.cx3 .cx3-tm[aria-current="page"], html.cx3 .cx3-dd.on > .cx3-tm{background:var(--ink) !important; color:var(--bg) !important}
html.cx3 .cx3-tm[aria-current="page"] .cx3-tb{background:var(--green) !important}
html.cx3 .cx3-av .uav{background:linear-gradient(135deg, var(--ink), #2E9B57) !important; color:#fff !important}
html.cx3 .tb-logo img, html.cx3 .side-logo img{filter:saturate(1.05)}
/* cartões escuros fixos (próxima ação, destaques) em preto com toque verde */
html.cx3 :is(.next-act, .hero, .md-next, .q-next, [class*="proxima"]){background:linear-gradient(135deg, var(--hero-a), var(--hero-b)) !important}
/* linhas finas no lugar de sombras pesadas */
html.cx3:not(.lg-solid) :is(.panel, .qb, .cx-stat, .cx-card, .gx-card, .tbl-wrap, .kpi, .est-tile, .t3-tile, .ar-p, .ap-card, .cd-box, .gv-ficha, .gv-th){border:1px solid var(--g-edge) !important; box-shadow:var(--g-hi), var(--g-sh) !important}
html.cx3 .topbar{border-radius:22px !important}
html.cx3.cx-light .topbar{background:rgba(255,255,255,.72) !important}
html.cx3.cx-dark .topbar{background:rgba(16,18,16,.72) !important}
html.cx3 .cx-mh .cx-tabs{background:var(--g-fill-2) !important; border:1px solid var(--g-edge) !important}
/* estados (vermelho, amarelo) seguem só como fio fino e texto */
html.cx3 .banner{border-radius:16px !important}

/* ---------- animações (respeitam "menos movimento") ---------- */
@media (prefers-reduced-motion:no-preference){
  html.cx3:not(.lg-calmo) .cx3-entra{animation:cx3-entra .38s cubic-bezier(.2, .8, .2, 1) both}
  html.cx3:not(.lg-calmo) .cx3-entra :is(.cx-stat, .panel, .ap-card, .ar-p, .qb, .gx-card, .t3-tile, .cd-box, .est-tile, .vw-card){animation:cx3-sobe .5s cubic-bezier(.2, .8, .2, 1) both}
  html.cx3:not(.lg-calmo) .cx3-entra :is(.cx-stat, .ap-card, .ar-p, .qb, .gx-card, .t3-tile, .est-tile, .vw-card):nth-child(2){animation-delay:.04s}
  html.cx3:not(.lg-calmo) .cx3-entra :is(.cx-stat, .ap-card, .ar-p, .qb, .gx-card, .t3-tile, .est-tile, .vw-card):nth-child(3){animation-delay:.08s}
  html.cx3:not(.lg-calmo) .cx3-entra :is(.cx-stat, .ap-card, .ar-p, .qb, .gx-card, .t3-tile, .est-tile, .vw-card):nth-child(4){animation-delay:.12s}
  html.cx3:not(.lg-calmo) .cx3-entra :is(.cx-stat, .ap-card, .ar-p, .qb, .gx-card, .t3-tile, .est-tile, .vw-card):nth-child(n+5){animation-delay:.16s}
  html.cx3:not(.lg-calmo) :is(.cx-stat, .ap-card, .gx-card, .vw-card, .est-tile, .cd-num){transition:transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s}
  html.cx3:not(.lg-calmo) :is(.cx-stat, .ap-card, .gx-card, .vw-card, .est-tile):hover{transform:translateY(-2px)}
  html.cx3:not(.lg-calmo) .btn{transition:transform .15s, background .2s, box-shadow .2s}
  html.cx3:not(.lg-calmo) .btn:active{transform:scale(.97)}
  html.cx3:not(.lg-calmo) details[open] > .cx3-menu, html.cx3:not(.lg-calmo) details[open] > .cx-more-l{animation:cx3-menu .18s cubic-bezier(.2, .8, .2, 1) both; transform-origin:top left}
  html.cx3:not(.lg-calmo) details[open] > .cx3-menu.dir{transform-origin:top right}
  html.cx3:not(.lg-calmo) dialog[open]{animation:cx3-dlg .28s cubic-bezier(.2, .8, .2, 1) both}
  html.cx3:not(.lg-calmo) .cx3-tm, html.cx3:not(.lg-calmo) .cx-tab, html.cx3:not(.lg-calmo) .qd-tab{transition:background .25s, color .25s, padding .25s}
}
@keyframes cx3-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes cx3-sobe{from{opacity:0; transform:translateY(10px) scale(.995)} to{opacity:1; transform:none}}
@keyframes cx3-menu{from{opacity:0; transform:translateY(-4px) scale(.98)} to{opacity:1; transform:none}}
@keyframes cx3-dlg{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
html.cx3 .ap-th.txt{background:linear-gradient(160deg, var(--green-soft), var(--surface-3)) !important}

/* ===================================================================
   Topo em três partes e busca em janela
   =================================================================== */
@media (min-width:960px){
  html.cx3-top .topbar{display:grid !important; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:12px}
  html.cx3-top .topbar > :not(.cx3-esq):not(.cx3-meio):not(.cx3-dir){display:none !important}
  .cx3-esq, .cx3-dir{display:flex; align-items:center; gap:8px; min-width:0}
  .cx3-dir{justify-content:flex-end}
  .cx3-meio{display:flex; justify-content:center; min-width:0}
  .cx3-esq .tb-logo{margin-right:2px}
}
@media (max-width:959px){ .cx3-lupa, .cx3-tema{display:none !important} .cx3-esq, .cx3-meio, .cx3-dir{display:contents} }
.cx3-lupa, .cx3-tema{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill-2, var(--surface-2)); color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s, transform .15s}
.cx3-lupa:hover, .cx3-tema:hover{background:var(--surface-3); color:var(--ink)}
.cx3-lupa:active, .cx3-tema:active{transform:scale(.95)}
/* janela da busca */
.cx3-bf{position:fixed; inset:0; z-index:200; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; background:rgba(8,10,8,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.cx3-bf[hidden]{display:none}
.cx3-bp{width:min(640px, 100%); display:grid; gap:0; border-radius:24px; overflow:hidden; background:var(--g-fill-3, var(--surface)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none), 0 30px 80px -20px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%)}
html.cx-light .cx3-bp{background:rgba(255,255,255,.92)} html.cx-dark .cx3-bp{background:rgba(18,20,18,.94)}
.cx3-bp .tb-search{display:block !important; max-width:none !important; margin:0 !important; position:relative}
.cx3-bp .tb-search label{display:flex !important; align-items:center; gap:12px; height:64px; padding:0 20px; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important}
.cx3-bp .tb-search label::after{display:none !important}
.cx3-bp .tb-search input{font-size:18px !important; border:0 !important; outline:0 !important; background:transparent !important; flex:1; color:var(--ink)}
.cx3-bp .tb-search input::placeholder{color:var(--ink-3) !important}
.cx3-bp .tb-search kbd{display:none !important}
.cx3-bp .gs-res{position:static !important; inset:auto !important; width:auto !important; max-height:52vh; overflow:auto; margin:0 !important; padding:6px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important}
.cx3-bp .gs-it{border-radius:14px !important; padding:10px 12px !important}
.cx3-bp .gs-it:hover, .cx3-bp .gs-it:focus-visible{background:var(--surface-3) !important}
.cx3-bdica{display:flex; align-items:center; gap:6px; padding:10px 18px; font-size:12px; color:var(--ink-3); border-top:1px solid var(--line)}
.cx3-bdica kbd{font:inherit; font-size:11px; padding:1px 6px; border-radius:6px; border:1px solid var(--line-2)}
@media (prefers-reduced-motion:no-preference){
  html.cx3:not(.lg-calmo) .cx3-bf:not([hidden]){animation:cx3-fade .2s ease both}
  html.cx3:not(.lg-calmo) .cx3-bf:not([hidden]) .cx3-bp{animation:cx3-desce .3s cubic-bezier(.2, .8, .2, 1) both}
}
@keyframes cx3-fade{from{opacity:0} to{opacity:1}}
@keyframes cx3-desce{from{opacity:0; transform:translateY(-16px) scale(.98)} to{opacity:1; transform:none}}

/* =====================================================================
   v8.7: claro mais esverdeado (branco só nos detalhes); escuro continua preto
   ===================================================================== */
html.cx3.cx-light:not(.zz1):not(.zz2){
  --bg:#E4EEE7; --surface:#F1F7F2; --surface-2:#E9F2EC; --surface-3:#DDEAE1;
  --ink:#0B140E; --ink-2:#2E3C33; --ink-3:#5E7064;
  --line:rgba(11,40,22,.09); --line-2:rgba(11,40,22,.15);
  --brand-soft:#D3E8DA; --green-soft:#D3E8DA; --track:#D6E4DA; --grid:#DAE6DD; --axis:#C3D4C8;
  --g-fill:rgba(241,248,243,.62); --g-fill-2:rgba(236,245,239,.5); --g-fill-3:rgba(244,250,246,.88);
  --g-edge:rgba(11,40,22,.08); --g-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --g-sh:0 1px 1px rgba(11,40,22,.04), 0 10px 26px -14px rgba(11,40,22,.22);
}
html.cx3.cx-light body::before{background:
  radial-gradient(80vmax 60vmax at 100% 0%, rgba(46,155,87,.22), transparent 62%),
  radial-gradient(70vmax 50vmax at 0% 100%, rgba(30,90,55,.16), transparent 62%),
  linear-gradient(180deg, #E8F1EA 0%, #DCE9E0 100%) !important}
html.cx3.cx-light{--cx3-grade:rgba(11,60,30,.05)}
html.cx3.cx-light .topbar{background:rgba(236,245,239,.7) !important}
html.cx3.cx-light .cx3-bp{background:rgba(240,247,242,.95)}
html.cx3.cx-light .cx3-menu{background:#EEF6F0 !important}
html.cx3.cx-light :is(.inp, select.inp, textarea.inp){background:rgba(250,253,251,.85) !important}
.cx3-bp input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}

/* =====================================================================
   v8.8: cores conforme o Cássio pediu
   Escuro: fundo preto; destaques (ativo, botão principal, +, abas) em VERDE;
   branco só nos detalhes finais (texto, ícones pequenos).
   Claro: mais verde no fundo e nos cartões; branco só no brilho e nos campos.
   ===================================================================== */
html.cx3.cx-dark{--cx3-g1:#2FAE62; --cx3-g2:#1E7A45; --cx3-on:#F4F5F2}
html.cx3.cx-light{--cx3-g1:#1F6B3E; --cx3-g2:#0E3B22; --cx3-on:#FFFFFF}
html.cx3.cx-dark:not(.zz1):not(.zz2){--brand:#3FBF6F; --brand-2:#2FAE62; --on-brand:#F4F5F2; --focus:#3FBF6F}
/* destaques em verde (degradê) no escuro e verde floresta no claro */
html.cx3 .cx3-tm[aria-current="page"], html.cx3 .cx3-dd.on > .cx3-tm,
html.cx3 .cx-tab[aria-selected="true"], html.cx3 .qd-tab[aria-pressed="true"],
html.cx3 .btn.primary, html.cx3 #opNovo, html.cx3 .t3-seg button.on, html.cx3 .cd-mais.on > summary,
html.cx3 .ap-onde .chip[aria-pressed="true"], html.cx3 .chip.on{
  background:linear-gradient(135deg, var(--cx3-g1), var(--cx3-g2)) !important; color:var(--cx3-on) !important; border-color:transparent !important}
html.cx3 .btn.primary{box-shadow:0 8px 22px -10px var(--cx3-g1) !important}
html.cx3 .cx3-tm[aria-current="page"] .cx3-tb, html.cx3 .cx-tab[aria-selected="true"] .cx-tb{background:var(--cx3-on) !important; color:var(--cx3-g2) !important}
html.cx3 .cx3-av .uav{background:linear-gradient(135deg, var(--cx3-g1), var(--cx3-g2)) !important}
/* botões secundários no escuro: vidro escuro com fio, nada de branco chapado */
html.cx3.cx-dark .btn:not(.primary):not(.danger){background:rgba(255,255,255,.04) !important; color:var(--ink) !important; border:1px solid rgba(255,255,255,.1) !important}
/* claro mais verde */
html.cx3.cx-light:not(.zz1):not(.zz2){
  --bg:#D9E8DE; --surface:#E6F1EA; --surface-2:#DDEBE2; --surface-3:#D0E2D6;
  --g-fill:rgba(226,240,231,.66); --g-fill-2:rgba(218,234,224,.55); --g-fill-3:rgba(232,244,236,.92);
  --track:#C9DDD0; --line:rgba(14,59,34,.1); --line-2:rgba(14,59,34,.17);
}
html.cx3.cx-light body::before{background:
  radial-gradient(80vmax 60vmax at 100% 0%, rgba(31,107,62,.26), transparent 62%),
  radial-gradient(70vmax 50vmax at 0% 100%, rgba(14,59,34,.2), transparent 62%),
  linear-gradient(180deg, #DDEBE2 0%, #CFE2D5 100%) !important}
html.cx3.cx-light .topbar{background:rgba(222,237,227,.75) !important}
html.cx3.cx-light .cx3-menu{background:#E3EFE7 !important}
html.cx3.cx-light .cx3-bp{background:rgba(228,241,232,.96)}
html.cx3.cx-light :is(.inp, select.inp, textarea.inp){background:rgba(246,251,248,.9) !important}
html.cx3.cx-light .btn:not(.primary):not(.danger), html.cx3.cx-light .cx3-lupa, html.cx3.cx-light .cx3-tema{background:rgba(232,244,236,.8) !important}

/* ---------- carteira: arrastar clientes entre situações ---------- */
.kan-arr{cursor:grab}
.kan-arr.arrastando{opacity:.45; cursor:grabbing}
.vw-col.kan-alvo{outline:2px dashed var(--green, var(--brand)); outline-offset:-4px; background:var(--green-soft, var(--brand-soft)) !important}

/* ---------- marca do espaço do cliente ---------- */
.mc-g{display:grid; grid-template-columns:minmax(0, 240px) minmax(0, 1fr); gap:16px; align-items:start}
@media (max-width:640px){ .mc-g{grid-template-columns:1fr} }
.mc-prev{display:grid; gap:14px; padding:16px; border-radius:18px; border:1px solid var(--line); min-height:150px; align-content:space-between}
.mc-prev.esc{color:#F4F5F2}
.mc-top{display:flex; align-items:center; gap:10px}
.mc-top img, .mc-ini{width:44px; height:44px; border-radius:50%; object-fit:contain; background:#fff; display:grid; place-items:center; font-weight:700; box-shadow:0 0 0 2px var(--pt-cor)}
.mc-ini{background:var(--pt-cor); color:var(--pt-on)}
.mc-top div{display:grid}
.mc-top small{font-size:12px; opacity:.7}
.mc-bt{justify-self:start; padding:8px 18px; border-radius:999px; background:var(--pt-cor); color:var(--pt-on); font-weight:700; font-size:13px}
.mc-f{display:grid; gap:12px}
.mc-l{display:grid; gap:6px}
.mc-l > small{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.mc-l input[type="color"]{width:64px; height:36px; border:1px solid var(--line-2); border-radius:10px; padding:2px; background:transparent; cursor:pointer}
/* o espaço do cliente com a marca dele */
.pt-marca{--brand:var(--pt-cor); background:linear-gradient(170deg, var(--pt-fundo), var(--pt-fundo2)); border-radius:24px; padding:16px}
.pt-marca.pt-esc{color:#F4F5F2; --ink:#F4F5F2; --ink-2:#C9CCC6; --ink-3:#9AA097}
.pt-marca .ig-av{background:var(--pt-cor) !important; color:var(--pt-on) !important}
.pt-marca .ig-av.com-logo{background:#fff !important; padding:0; overflow:hidden}
.pt-marca .ig-av.com-logo img{width:100%; height:100%; object-fit:contain}
.pt-marca .btn.primary, .pt-marca .qd-tab[aria-pressed="true"], .pt-marca .ap-onde .chip[aria-pressed="true"]{background:var(--pt-cor) !important; color:var(--pt-on) !important; border-color:var(--pt-cor) !important}
.pt-marca .pt-num b{color:var(--pt-cor)}
.pt-marca .ap-todas{background:color-mix(in srgb, var(--pt-cor) 12%, transparent) !important; border-color:color-mix(in srgb, var(--pt-cor) 35%, transparent) !important}
body.portal-mode.pt-marca-on{background:linear-gradient(170deg, var(--pt-fundo), var(--pt-fundo2)) fixed !important}
body.portal-mode.pt-marca-on::before, body.portal-mode.pt-marca-on::after{display:none}
html.cx3 .pt-marca .btn.primary, html.cx3 .pt-marca .qd-tab[aria-pressed="true"], html.cx3 .pt-marca .ap-onde .chip[aria-pressed="true"], html.cx3 .pt-marca .chip.on{background:var(--pt-cor) !important; color:var(--pt-on) !important; border-color:var(--pt-cor) !important; box-shadow:0 8px 22px -12px var(--pt-cor) !important}
html.cx3 .pt-marca .qd-tab[aria-pressed="true"] small{background:var(--pt-on) !important; color:var(--pt-cor) !important}
html.cx3 .pt-marca .ig-av{box-shadow:0 0 0 2px var(--pt-cor) !important; border:0 !important; outline:0 !important}
html.cx3 .pt-marca .ig-av::before, html.cx3 .pt-marca .ig-av::after{display:none !important}

/* =====================================================================
   v9: modo dia com outro verde (esmeralda viva no lugar do verde quase preto),
   fundo menta claro e cartões em vidro claro; noite continua igual.
   ===================================================================== */
html.cx3.cx-light:not(.zz1):not(.zz2){
  --bg:#EDF5EF; --surface:#F7FBF8; --surface-2:#F0F7F2; --surface-3:#E4F0E8;
  --ink:#0F241A; --ink-2:#34503F; --ink-3:#678273;
  --line:rgba(16,94,52,.10); --line-2:rgba(16,94,52,.17);
  --brand:#17904F; --brand-2:#0F7A41; --brand-soft:rgba(32,168,94,.12); --on-brand:#FFFFFF;
  --green:#1C9A55; --green-2:#38B873; --green-soft:rgba(32,168,94,.12);
  --hero-a:#22A85E; --hero-b:#0F7442; --hero-ink:#FFFFFF;
  --track:#DCEBE1; --grid:#E1EEE5; --axis:#C8DCCF;
  --c1:#17904F; --h-teal:#1C9A55; --h-green:#1C9A55; --focus:#1C9A55;
  --g-fill:rgba(250,253,251,.74); --g-fill-2:rgba(255,255,255,.58); --g-fill-3:rgba(251,254,252,.95);
  --g-edge:rgba(16,94,52,.09); --g-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --g-sh:0 1px 2px rgba(16,94,52,.05), 0 14px 32px -18px rgba(16,94,52,.30);
}
html.cx3.cx-light{--cx3-g1:#2DB36A; --cx3-g2:#13844A; --cx3-on:#FFFFFF; --cx3-grade:rgba(19,132,74,.045)}
html.cx3.cx-light body::before{background:
  radial-gradient(80vmax 55vmax at 100% -10%, rgba(45,179,106,.20), transparent 60%),
  radial-gradient(60vmax 45vmax at -10% 110%, rgba(19,132,74,.12), transparent 60%),
  linear-gradient(180deg, #F3F9F5 0%, #E6F1EA 100%) !important}
html.cx3.cx-light .topbar{background:rgba(250,253,251,.74) !important; border:1px solid var(--g-edge) !important; box-shadow:var(--g-hi), 0 10px 30px -20px rgba(16,94,52,.35) !important}
html.cx3.cx-light .cx3-menu{background:#F7FBF8 !important}
html.cx3.cx-light .cx3-bp{background:rgba(250,253,251,.97)}
html.cx3.cx-light :is(.inp, select.inp, textarea.inp){background:rgba(255,255,255,.92) !important}
html.cx3.cx-light .btn:not(.primary):not(.danger), html.cx3.cx-light :is(.cx3-lupa, .cx3-tema, .cx3-sino){background:rgba(255,255,255,.72) !important; border:1px solid var(--line) !important; color:var(--ink-2)}
html.cx3.cx-light .btn:not(.primary):not(.danger):hover, html.cx3.cx-light :is(.cx3-lupa, .cx3-tema, .cx3-sino):hover{background:#FFFFFF !important; color:var(--ink) !important}
html.cx3.cx-light .cx-mh .cx-tabs{background:rgba(255,255,255,.6) !important}
html.cx3.cx-light .cx3-tm:not([aria-current="page"]){color:var(--ink-2)}
html.cx3.cx-light .cx3-tm:not([aria-current="page"]):hover{background:rgba(32,168,94,.10); color:var(--brand)}
html.cx3.cx-light .cx-greet{background:linear-gradient(115deg, rgba(45,179,106,.18) 0%, rgba(255,255,255,.62) 58%, rgba(255,255,255,.88) 100%) !important; border:1px solid var(--g-edge) !important}
html.cx3.cx-light .btn.primary{box-shadow:0 8px 20px -10px rgba(19,132,74,.65) !important}
html.cx3.cx-light .banner{background:rgba(255,255,255,.66) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
html.cx3.cx-light .banner[data-s="bad"]{border:1px solid rgba(219,74,61,.35) !important; box-shadow:inset 3px 0 0 var(--bad-f) !important}
html.cx3.cx-light .banner[data-s="warn"]{border:1px solid rgba(214,150,30,.35) !important; box-shadow:inset 3px 0 0 var(--warn-f) !important}
html.cx3.cx-light .q-abas{background:rgba(255,255,255,.6) !important; border-color:var(--g-edge) !important}

/* ---------- reflexo ao passar o mouse nos ícones do topo ---------- */
html.cx3 :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers){position:relative; isolation:isolate}
html.cx3 :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers)::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.6) 46%, rgba(255,255,255,.16) 52%, transparent 62%) no-repeat; background-size:260% 100%; background-position:140% 0; opacity:0}
html.cx3.cx-dark :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers)::before{background-image:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.07) 52%, transparent 62%)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.cx3:not(.lg-calmo) :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers)::before{transition:background-position 0s .45s, opacity .2s .25s}
  html.cx3:not(.lg-calmo) :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers):hover::before{background-position:-40% 0; opacity:1; transition:background-position .75s cubic-bezier(.2, .8, .2, 1), opacity .08s}
  html.cx3:not(.lg-calmo) :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers){transition:transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background .2s, color .2s}
  html.cx3:not(.lg-calmo) :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers):hover{transform:translateY(-1px)}
  html.cx3.cx-light:not(.lg-calmo) :is(.cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, #tbUsers):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px -10px rgba(16,94,52,.45)}
  html.cx3.cx-dark:not(.lg-calmo) :is(.cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, #tbUsers):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.8)}
  html.cx3:not(.lg-calmo) .tb-logo{transition:transform .2s cubic-bezier(.2, .8, .2, 1)}
  html.cx3:not(.lg-calmo) .tb-logo:hover{transform:scale(1.06)}
}
html.cx3 .tb-logo[role="button"]{cursor:pointer; border-radius:10px}
html.cx3 .tb-logo:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

/* ---------- sino de avisos ---------- */
.cx3-sino-w{position:relative; display:inline-flex}
@media (max-width:959px){ .cx3-sino-w{display:none !important} }
.cx3-sino{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill-2, var(--surface-2)); color:var(--ink-2); cursor:pointer}
.cx3-sino:hover, .cx3-sino-w.on .cx3-sino{color:var(--ink)}
.cx3-sino-w.on .cx3-sino{box-shadow:0 0 0 2px var(--green, var(--brand)) !important}
.cx3-sino-n{position:absolute; top:-3px; right:-3px; z-index:3; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:grid; place-items:center; font-size:10.5px; font-weight:800; background:#E5484D; color:#fff; box-shadow:0 0 0 2px var(--bg)}
.cx3-sino-n[hidden]{display:none}
.cx3-sino.toca svg{animation:cx3-toca .9s ease both; transform-origin:50% 10%}
@keyframes cx3-toca{0%{transform:rotate(0)} 15%{transform:rotate(16deg)} 30%{transform:rotate(-14deg)} 45%{transform:rotate(10deg)} 60%{transform:rotate(-7deg)} 75%{transform:rotate(3deg)} 100%{transform:rotate(0)}}
.cx3-np{position:absolute; top:calc(100% + 12px); right:-6px; z-index:130; width:min(400px, calc(100vw - 32px)); max-height:min(560px, 72vh); display:flex; flex-direction:column; border-radius:22px; overflow:hidden;
  background:var(--g-fill-3, var(--surface)); border:1px solid var(--g-edge, var(--line)); box-shadow:var(--g-hi, none), 0 30px 70px -22px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(28px) saturate(150%); backdrop-filter:blur(28px) saturate(150%)}
html.cx-light .cx3-np{background:rgba(251,254,252,.97)} html.cx-dark .cx3-np{background:rgba(18,20,18,.96)}
.cx3-np[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){ html.cx3:not(.lg-calmo) .cx3-np:not([hidden]){animation:cx3-menu .2s cubic-bezier(.2, .8, .2, 1) both; transform-origin:top right} }
.cx3-np-h{display:flex; align-items:center; gap:8px; padding:16px 18px 10px}
.cx3-np-h > b{font-size:16px; letter-spacing:-.02em}
.cx3-np-c{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}
.cx3-np-l{border:0; background:none; padding:4px 6px; border-radius:8px; font:inherit; font-size:12.5px; font-weight:600; color:var(--green, var(--brand)); cursor:pointer}
.cx3-np-l:hover{background:var(--green-soft, var(--brand-soft))}
.cx3-np-tabs{display:flex; gap:4px; padding:0 14px 10px; border-bottom:1px solid var(--line)}
.cx3-np-tabs button{border:0; background:none; padding:6px 12px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; color:var(--ink-3); cursor:pointer}
.cx3-np-tabs button[aria-selected="true"]{background:var(--surface-3); color:var(--ink)}
.cx3-np-lst{overflow:auto; padding:6px; display:grid; gap:2px; align-content:start}
.cx3-np-i{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:start; width:100%; text-align:left; border:0; background:none; padding:10px 12px; border-radius:14px; cursor:pointer; color:var(--ink); font:inherit}
.cx3-np-i:hover, .cx3-np-i:focus-visible{background:var(--surface-3)}
.cx3-np-ic{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--surface-3); color:var(--ink-2)}
.cx3-np-i.novo .cx3-np-ic{background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}
.cx3-np-i[data-n="critico"] .cx3-np-ic{background:color-mix(in srgb, var(--bad-f) 16%, transparent); color:var(--bad-f)}
.cx3-np-i[data-n="atencao"].novo .cx3-np-ic{background:color-mix(in srgb, var(--warn-f, #D6961E) 18%, transparent); color:var(--warn-f, #D6961E)}
.cx3-np-t{display:grid; gap:2px; min-width:0}
.cx3-np-t b{font-size:13.5px; font-weight:600; line-height:1.3}
.cx3-np-i.novo .cx3-np-t b{font-weight:800}
.cx3-np-t small{font-size:12.5px; color:var(--ink-2); line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.cx3-np-t em{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.cx3-np-dot{width:9px; height:9px; border-radius:50%; background:var(--green, var(--brand)); margin-top:6px; box-shadow:0 0 0 3px var(--green-soft, var(--brand-soft))}
.cx3-np-v{display:grid; justify-items:center; gap:6px; padding:34px 16px; text-align:center; color:var(--ink-3)}
.cx3-np-v > span{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}
.cx3-np-v b{color:var(--ink); font-size:14px}
.cx3-np-v small{font-size:12.5px}
.cx3-np-f{display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line)}

/* ---------- Minha área enxuta ---------- */
html.cx3-v9 .ar-ini{display:none !important}
.cx3-tmais{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; margin-bottom:12px; border-radius:16px; border:1px dashed var(--line-2); color:var(--ink-3)}
.cx3-tmais small{font-size:12.5px; flex:1 1 260px}

/* ---------- faixa do ranking ---------- */
.cx3-rf{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:14px 18px; margin:0 0 12px; border-radius:20px; border:1px solid var(--g-edge, var(--line));
  background:linear-gradient(120deg, color-mix(in srgb, var(--green, #2E9B57) 14%, transparent), transparent 60%), var(--g-fill, var(--surface)); box-shadow:var(--g-hi, none), var(--g-sh, none)}
.cx3-rf .rf-med{font-size:30px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.cx3-rf .rf-t{display:grid; gap:3px; min-width:200px; flex:1 1 240px}
.cx3-rf .rf-t b{font-size:15px; letter-spacing:-.01em}
.cx3-rf .rf-t small{font-size:12.5px; color:var(--ink-2)}
.cx3-rf .rf-bar{display:block; height:6px; border-radius:999px; background:var(--track, var(--surface-3)); overflow:hidden; margin-top:4px; max-width:340px}
.cx3-rf .rf-bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--cx3-g2, #1E7A45), var(--cx3-g1, #2FAE62))}
.cx3-rf .rf-m{display:flex; flex-wrap:wrap; gap:6px}
.cx3-rf .rf-m span, .cx3-rf .rf-pi{font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--g-fill-2, var(--surface-2)); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap}
.cx3-rf .rf-pod{display:flex; flex-wrap:wrap; gap:6px}
.cx3-rf .rf-pi b{color:var(--ink)}
.cx3-rf .rf-pi.eu{border-color:var(--green, var(--brand)); background:var(--green-soft, var(--brand-soft))}
.cx3-rf .rf-a{margin-left:auto}
.cx3-rf.vert{flex-direction:column; align-items:flex-start; margin:0; padding:4px 0 0; border:0; background:none; box-shadow:none}
.cx3-rf.vert .rf-t{min-width:0; width:100%}
.cx3-rf.vert .rf-bar{max-width:none}
.cx3-rf.vert .rf-a{margin-left:0}
/* Início: título no lugar das abas */
.cx-mh.cx3-ini .cx-tabs{display:none !important}
.cx3-ini-t{margin:6px 0 2px; font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
html.cx3 .tb-logo.on img{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--green, #2E9B57) 55%, transparent))}
html.cx3.cx-light .ad-alerta{background:rgba(255,255,255,.72) !important; border:1px solid rgba(219,74,61,.28) !important; box-shadow:inset 3px 0 0 var(--bad-f), 0 8px 22px -16px rgba(165,45,35,.35) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
/* ranking em cartão (Início de quem produz) */
.cx3-rf.vert{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px 14px; align-items:center; align-content:start; align-self:start}
.cx3-rf.vert .rf-t{align-content:start}
.cx3-rf.vert :is(.rf-m, .rf-pod, .rf-a){grid-column:1 / -1}
.cx-stat .cx-sv{line-height:1.05}
/* reflexo: faixa de luz que atravessa + brilho de vidro no alto enquanto o mouse está em cima */
html.cx3 :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers)::before{
  background-image:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.65) 46%, rgba(255,255,255,.18) 52%, transparent 62%), linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 58%) !important;
  background-size:260% 100%, 100% 100% !important; background-repeat:no-repeat !important; background-position:140% 0, 0 0}
html.cx3.cx-dark :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers)::before{
  background-image:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.08) 52%, transparent 62%), linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%) !important}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.cx3:not(.lg-calmo) :is(.cx3-tm, .cx3-lupa, .cx3-tema, .cx3-sino, #opNovo, .cx3-av, #tbUsers):hover::before{background-position:-40% 0, 0 0; transition:background-position .95s cubic-bezier(.45, .05, .25, 1), opacity .08s}
}

/* mãozinha para arrastar áreas que rolam para o lado */
@media (hover:hover) and (pointer:fine){
  html.cx3 .cx3-pan{cursor:grab}
  html.cx3 .cx3-pan :is(button, a, input, textarea, select, label, summary, [draggable="true"]){cursor:pointer}
  html.cx3 .cx3-pan :is(input, textarea){cursor:text}
  html.cx3 .cx3-pan [draggable="true"]{cursor:grab}
  html.cx3 .cx3-pan-on, html.cx3.cx3-panning, html.cx3.cx3-panning *{cursor:grabbing !important; user-select:none !important; -webkit-user-select:none !important}
  html.cx3.cx3-panning .cx3-pan-on{scroll-behavior:auto !important}
}

/* =====================================================================
   v9.3 desempenho: esqueleto de carregamento e listas longas
   ===================================================================== */
.cx3-sk{display:grid; gap:14px; padding-top:6px}
.cx3-sk-h{display:grid; gap:10px; margin-bottom:6px}
.cx3-sk-g{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px}
.cx3-sk-g3{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px}
.cx3-sk-c{display:grid; gap:12px; align-content:start; padding:18px; min-height:120px; border-radius:20px; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill, var(--surface))}
.cx3-sk-c.tall{min-height:260px}
.cx3-sk-b, .cx3-sk-txt::before, .cx3-sk-txt::after{display:block; border-radius:999px;
  background:linear-gradient(100deg, var(--surface-3) 20%, color-mix(in srgb, var(--surface-3) 40%, var(--ink-3) 18%) 40%, var(--surface-3) 60%); background-size:240% 100%; animation:cx3-sk 1.4s ease-in-out infinite}
@keyframes cx3-sk{0%{background-position:120% 0} 100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){ .cx3-sk-b, .cx3-sk-txt::before, .cx3-sk-txt::after{animation:none} }
/* "Carregando..." vira duas linhas que brilham; o texto fica para leitor de tela */
.cx3-sk-txt{position:relative; color:transparent !important; min-height:34px; overflow:hidden; user-select:none}
.cx3-sk-txt::before, .cx3-sk-txt::after{content:""; position:absolute; left:0; height:11px}
.cx3-sk-txt::before{top:4px; width:min(62%, 420px)}
.cx3-sk-txt::after{top:22px; width:min(40%, 260px)}
/* listas longas: o navegador só desenha os cards que estão perto da tela */
html.cx3-perf :is(.vw-card, .cx3-np-i, .gs-it){content-visibility:auto; contain-intrinsic-size:auto 84px}
/* logo: mais viva no escuro; no Início do celular sai o título repetido do módulo */
html.cx3.cx-dark .tb-logo img{filter:brightness(1.4) saturate(1.15) drop-shadow(0 0 8px rgba(63,191,111,.35)) !important}
html.cx3.cx-dark .tb-logo.on img{filter:brightness(1.5) saturate(1.2) drop-shadow(0 0 12px rgba(63,191,111,.6)) !important}
.cx-mh.cx3-ini .cx-mt{display:none !important}
@media (max-width:959px){ html.cx3 .tb-logo img{width:38px !important; height:auto !important} }

/* =====================================================================
   v9.4: plataforma mais simples
   ===================================================================== */
/* faixa da esteira dentro do editor da peça: data obrigatória, etapa e prazo */
.cx3-edp{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 14px; margin:0 0 12px; border-radius:16px; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill-2, var(--surface-2))}
.cx3-edp.falta{border-color:color-mix(in srgb, var(--warn-f, #D6961E) 55%, transparent); background:color-mix(in srgb, var(--warn-f, #D6961E) 10%, var(--g-fill-2, var(--surface-2)))}
.cx3-edl{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.cx3-edl b{color:var(--ink); font-weight:650}
.cx3-edd{width:auto; min-width:150px; padding:6px 10px !important; height:auto !important}
.cx3-edw{flex:1 1 100%; font-size:12.5px; color:var(--ink-2)}
.cx3-edw[hidden]{display:none}
.cx3-edi{font-size:13px; color:var(--ink-2)}
.cx3-edx{margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--g-fill-2, var(--surface)); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer}
.cx3-edx:hover{border-color:var(--green, var(--brand))}

/* "Com você hoje" na Visão geral de quem lidera */
.cx3-hoje{display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin:0 0 14px; padding:12px 16px; border-radius:16px; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill, var(--surface)); color:var(--ink-2); font:inherit; font-size:14px; cursor:pointer}
.cx3-hoje b{color:var(--ink)}
.cx3-hoje > span:first-child{color:var(--ok, var(--green))}
.cx3-hoje.tem{border-color:color-mix(in srgb, var(--bad-f) 45%, transparent); box-shadow:inset 3px 0 0 var(--bad-f)}
.cx3-hoje.tem > span:first-child, .cx3-hoje.tem .grow{color:var(--bad-f)}
.cx3-hoje-a{font-size:12.5px; font-weight:650; color:var(--green, var(--brand))}

/* números da agência: neutros. Vermelho fica para o que é seu (sino, Meu trabalho) */
html.cx3 .cx3-tm:not([data-mod="Início"]) .cx3-tb[data-s="bad"], html.cx3 .cx3-mi .cx3-tb[data-s="bad"], html.cx3 details[data-grupo="gestao"] .cx3-tb[data-s="bad"],
html.cx3 .cx-tab:not([data-pid="meu-dia"]) .nbadge[data-s="bad"], html.cx3 #bnavOp button:not([data-mod="Início"]) .nbadge[data-s="bad"]{background:var(--surface-3) !important; color:var(--ink-2) !important; box-shadow:none !important}
html.cx3 .cx3-tm:not([data-mod="Início"]) .cx3-tb, html.cx3 .cx-tab:not([data-pid="meu-dia"]) .nbadge{background:var(--surface-3); color:var(--ink-2)}
/* faixa dos clientes com pouco conteúdo pronto: informação, não alarme */
html.cx3 .ad-alerta{border:1px solid var(--g-edge, var(--line)) !important; background:var(--g-fill, var(--surface)) !important; box-shadow:inset 3px 0 0 var(--warn-f, #D6961E) !important; color:var(--ink-2) !important}
html.cx3 .ad-alerta svg{color:var(--warn-f, #D6961E) !important}
html.cx3 .ad-alerta b{color:var(--ink) !important}
/* Equipe › Ver como */
.cx3-vc{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px}
.cx3-vci{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill-2, var(--surface-2))}
.cx3-vci .grow{display:grid; gap:2px; min-width:0}
.cx3-vci small{color:var(--ink-3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx3-vca{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex:none; background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand)); font-weight:700; font-size:13px}
html.cx3.cx-light .ad-alerta, html.cx3.cx-dark .ad-alerta{border:1px solid var(--g-edge, var(--line)) !important; background:var(--g-fill, var(--surface)) !important; box-shadow:inset 3px 0 0 var(--warn-f, #D6961E) !important}
.cx3-vc{grid-template-columns:repeat(auto-fill, minmax(340px, 1fr))}
.cx3-vci{flex-wrap:wrap}
.cx3-vci .grow{flex:1 1 150px}
.cx3-vci b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* =====================================================================
   v9.5: fotos, Meu ranking e calendário do Meu trabalho
   ===================================================================== */
.cx3-foto{background-size:cover !important; background-position:center !important; color:transparent !important}

/* calendário de 2 semanas */
.cx3-mc{margin:0 0 12px; padding:14px 16px; border-radius:20px; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill, var(--surface)); box-shadow:var(--g-hi, none), var(--g-sh, none)}
.cx3-mch{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.cx3-mch b{font-size:14.5px}
.cx3-mcl{border:0; background:none; font:inherit; font-size:12.5px; font-weight:650; color:var(--green, var(--brand)); cursor:pointer; padding:4px 6px; border-radius:8px}
.cx3-mcg{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px}
.cx3-mcw{text-align:center; font-size:11px; font-weight:700; color:var(--ink-3)}
.cx3-mcd{position:relative; display:grid; place-items:center; aspect-ratio:1 / .82; border-radius:12px; border:1px solid var(--line); background:var(--g-fill-2, var(--surface-2)); color:var(--ink); font:inherit; cursor:pointer; padding:0}
.cx3-mcd:disabled{cursor:default; opacity:.75}
.cx3-mcd.passou{opacity:.4}
.cx3-mcd.hoje{border-color:var(--green, var(--brand)); box-shadow:0 0 0 1px var(--green, var(--brand)) inset}
.cx3-mcn{font-size:14px; font-weight:600}
.cx3-mcc{position:absolute; top:4px; right:5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; display:grid; place-items:center; font-size:10.5px; font-weight:800; background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}
.cx3-mcd[data-s="warn"] .cx3-mcc{background:color-mix(in srgb, var(--warn-f, #D6961E) 22%, transparent); color:var(--warn-f, #B57A10)}
.cx3-mcd[data-s="bad"] .cx3-mcc{background:var(--bad-f); color:#fff}
.cx3-mcd:not(:disabled):hover{border-color:var(--green, var(--brand))}
@media (max-width:520px){ .cx3-mc{padding:12px} .cx3-mcg{gap:4px} .cx3-mcd{border-radius:10px} .cx3-mcn{font-size:13px} }

/* Meu ranking */
.rk-hero{display:grid; grid-template-columns:minmax(220px, 1fr) minmax(300px, 1.3fr); gap:18px; align-items:end; padding:22px 24px 0; margin-bottom:16px; border-radius:26px; overflow:hidden; border:1px solid var(--g-edge, var(--line));
  background:radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--green, #2E9B57) 30%, transparent), transparent 60%), linear-gradient(160deg, var(--hero-a, #1FA25C), var(--hero-b, #0F7442)); color:var(--hero-ink, #fff)}
html.cx-dark .rk-hero{background:radial-gradient(120% 90% at 85% 0%, rgba(63,191,111,.35), transparent 60%), linear-gradient(160deg, #13281C, #070A08)}
.rk-ht{padding-bottom:22px}
.rk-ht small{opacity:.8; font-size:12.5px; font-weight:600; letter-spacing:.02em}
.rk-ht h2{margin:4px 0 6px; font-size:clamp(26px, 3.4vw, 38px); font-weight:600; letter-spacing:-.03em}
.rk-ht p{margin:0; opacity:.9; font-size:14px}
.rk-pod{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:end}
.rk-pc{display:grid; justify-items:center; gap:4px; text-align:center}
.rk-pc b{font-size:14.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-pc small{font-size:12px; opacity:.85}
.rk-md{font-size:28px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.rk-deg{width:100%; margin-top:6px; display:grid; place-items:start center; padding-top:10px; border-radius:16px 16px 0 0; font-size:22px; font-weight:800; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); border-bottom:0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.rk-pc.p1 .rk-deg{height:120px; background:rgba(255,255,255,.26)}
.rk-pc.p2 .rk-deg{height:86px}
.rk-pc.p3 .rk-deg{height:62px}
.rk-pc.eu .rk-av{box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(255,255,255,.35)}
.rk-pc.vazio{visibility:hidden}
.rk-av{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; flex:none; font-weight:700; font-size:14px; color:#fff; background:#5B8F70; background-size:cover; background-position:center; box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.rk-av[data-i="0"]{background-color:#3B8FD9} .rk-av[data-i="1"]{background-color:#2BB5A8} .rk-av[data-i="2"]{background-color:#2E9B57} .rk-av[data-i="3"]{background-color:#E0565B} .rk-av[data-i="4"]{background-color:#C8963E}
.rk-av.g{width:64px; height:64px; font-size:20px}
.rk-pc.p1 .rk-av.g{width:78px; height:78px}
.rk-av.xl{width:72px; height:72px; font-size:24px; box-shadow:0 0 0 3px var(--green, #2E9B57)}
.rk-grid{display:grid; grid-template-columns:minmax(280px, 1fr) minmax(320px, 1.4fr); gap:16px; margin-bottom:16px}
.rk-eu, .rk-gc, .rk-lista{padding:20px; border-radius:22px; border:1px solid var(--g-edge, var(--line)); background:var(--g-fill, var(--surface)); box-shadow:var(--g-hi, none), var(--g-sh, none)}
.rk-eu{display:grid; gap:14px; align-content:start}
.rk-eh{display:flex; align-items:center; gap:16px}
.rk-eh small{color:var(--ink-3); font-size:12.5px}
.rk-pos{display:flex; align-items:baseline; gap:8px}
.rk-pos b{font-size:52px; font-weight:300; letter-spacing:-.04em; line-height:1}
.rk-pos span{font-size:15px; color:var(--ink-2)}
.rk-pts{font-size:13.5px; color:var(--ink-2)}
.rk-frase{margin:0; font-size:15px; font-weight:600}
.rk-alvo small{display:block; font-size:12px; color:var(--ink-3); margin-bottom:6px}
.rk-bar{display:block; height:10px; border-radius:999px; background:var(--track, var(--surface-3)); overflow:hidden}
.rk-bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--cx3-g2, #1E7A45), var(--cx3-g1, #2FAE62))}
.rk-ms{display:flex; flex-wrap:wrap; gap:6px}
.rk-ms span{font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--g-fill-2, var(--surface-2)); color:var(--ink-2)}
.rk-gc{display:grid; gap:4px; align-content:start}
.rk-gc small{color:var(--ink-3); font-size:12.5px}
.rk-graf{margin-top:8px}
.rk-svg{width:100%; height:auto; display:block}
.rk-grid line.rk-grid, .rk-svg .rk-grid{stroke:var(--line); stroke-width:1}
.rk-svg .rk-ax{fill:var(--ink-3); font-size:11px; font-family:inherit}
.rk-svg .rk-area{fill:color-mix(in srgb, var(--green, #2E9B57) 14%, transparent)}
.rk-leg{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; font-size:12.5px; color:var(--ink-2)}
.rk-leg i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.rk-lista{display:grid; gap:4px}
.rk-lt{font-size:15px; margin-bottom:6px}
.rk-li{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px}
.rk-li.eu{background:var(--green-soft, var(--brand-soft))}
.rk-ln{width:30px; text-align:center; font-weight:700; color:var(--ink-2)}
.rk-li .rk-av{width:34px; height:34px; font-size:12px; box-shadow:none}
.rk-li .grow{display:grid; gap:5px; min-width:0}
.rk-li b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-lb{display:block; height:6px; border-radius:999px; background:var(--track, var(--surface-3)); overflow:hidden}
.rk-lb i{display:block; height:100%; border-radius:inherit; background:var(--green, var(--brand))}
.rk-lp{font-weight:800; font-variant-numeric:tabular-nums; min-width:34px; text-align:right}
@media (max-width:760px){
  .rk-hero{grid-template-columns:1fr; padding:18px 14px 0}
  .rk-ht{padding-bottom:4px}
  .rk-grid{grid-template-columns:1fr}
  .rk-av.g{width:52px; height:52px} .rk-pc.p1 .rk-av.g{width:62px; height:62px}
  .rk-pos b{font-size:44px}
}
.cx3-arv{display:grid; justify-items:center; gap:10px; text-align:center; padding:40px 20px; border-radius:24px; border:1px dashed var(--line-2); grid-column:1 / -1}
.cx3-arv-i{display:grid; place-items:center; width:56px; height:56px; border-radius:18px; background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}
.cx3-arv b{font-size:18px}
.cx3-arv p{margin:0; max-width:460px; color:var(--ink-2); font-size:14px}
.cx3-arv .inline-row{justify-content:center; flex-wrap:wrap; gap:8px}
@media (max-width:959px){
  #bnavOp button{white-space:nowrap; font-size:10.5px !important}
  .rk-svg .rk-ax{font-size:20px}
}
/* Meu trabalho: arrastar blocos no "Organizar meu quadro" (mouse e dedo) */
.qb.edit .qb-alca{width:36px; height:36px; border-radius:10px; background:var(--g-fill-2, var(--surface-2)); border:1px solid var(--line); touch-action:none; cursor:grab}
.qb.edit .qb-h{touch-action:none; cursor:grab}
.qb.cx3-qarr{position:relative; z-index:60; opacity:.92; box-shadow:0 24px 50px -18px rgba(0,0,0,.45) !important; transition:none !important}
html.cx3-qmov, html.cx3-qmov *{cursor:grabbing !important; user-select:none !important; -webkit-user-select:none !important}
.qb.cx3-qantes{box-shadow:0 -3px 0 0 var(--green, var(--brand)) !important}
.qb.cx3-qdepois{box-shadow:0 3px 0 0 var(--green, var(--brand)) !important}
@media (max-width:959px){ .qb.edit .qb-ed .btn[data-mv="up"], .qb.edit .qb-ed .btn[data-mv="down"]{font-size:0 !important; padding:0 10px !important} .qb.edit .qb-ed .btn[data-mv] svg{font-size:14px} }

/* =====================================================================
   v9.6: celular menos espremido
   ===================================================================== */
@media (max-width:959px){
  /* o título grande do módulo sai quando já tem as abas (a barra de baixo e as abas mostram onde você está) */
  html.cx3 .cx-mh:has(.cx-tabs) .cx-mt{display:none !important}
  html.cx3 .cx-mh{margin-bottom:6px !important; gap:6px !important}
  html.cx3 .cx3-ini-t{font-size:24px; margin-top:2px}
  html.cx3 .cx-mh .cx-tabs{margin-top:0 !important}
  /* busca ocupa a linha toda; filtros dois por linha */
  html.cx3 .toolbar > label.search{flex:1 1 100% !important}
  html.cx3 .toolbar{gap:8px; margin:10px 0 6px}
  html.cx3 .toolbar select.inp{font-size:13.5px; height:40px}
  /* calendário do mês cabe na tela (7 colunas estreitas) */
  html.cx3 .vw-cal{min-width:0 !important; grid-template-columns:repeat(7, minmax(0, 1fr)) !important; gap:2px !important}
  html.cx3 .vw-cal > *{min-width:0; font-size:11px}
  html.cx3 .vw-cal button, html.cx3 .vw-cal .vw-chip{font-size:10px !important; padding:2px 3px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  /* faixas e cartões */
  html.cx3 .cx3-hoje{flex-wrap:wrap; gap:4px 10px; padding:12px 14px}
  html.cx3 .cx3-hoje .grow{flex:1 1 100%; order:3}
  html.cx3 .cx3-hoje .cx3-hoje-a{margin-left:auto}
  html.cx3 .ad-alerta{font-size:13px; padding:10px 12px}
  html.cx3 .q-atencao{font-size:13px}
  html.cx3 .cx3-vc{grid-template-columns:1fr !important}
  html.cx3 .x5-ml{flex-wrap:wrap; max-width:100%}
  html.cx3 .cx-greet{padding:18px !important}
  html.cx3 .cx-greet h2{font-size:30px !important}
  html.cx3 .cx-grid6{gap:10px !important}
  html.cx3 .cx-stat{padding:14px !important}
  html.cx3 .cx-sv{font-size:30px !important}
  /* nada passa da largura da tela */
  html.cx3 #pages, html.cx3 .page{max-width:100vw; overflow-x:clip}
}
/* "Exige atenção" do Meu trabalho: aviso, não alarme (o vermelho fica no que vence hoje e é seu) */
html.cx3 .q-atencao{background:var(--g-fill, var(--surface)) !important; border:1px solid var(--g-edge, var(--line)) !important; box-shadow:inset 3px 0 0 var(--warn-f, #D6961E) !important; color:var(--ink-2) !important}
html.cx3 .q-atencao svg{color:var(--warn-f, #D6961E) !important}
html.cx3 .q-atencao b{color:var(--ink) !important}
html.cx3 .q-atencao button{color:var(--ink) !important}

/* v9.7: trava e notas no editor da peça */
.cx3-trava{flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:4px; padding-top:10px; border-top:1px solid var(--line)}
.cx3-trava > b{font-size:13px; font-weight:650}
.cx3-trava.falta > b{color:var(--warn-f, #B57A10)}
.cx3-trava.ok > b{color:var(--ok, var(--green))}
.cx3-notas{display:flex; flex-wrap:wrap; gap:6px 16px}
.cx3-st{display:inline-flex; align-items:center; gap:2px}
.cx3-st small{font-size:12px; color:var(--ink-3); margin-right:6px}
.cx3-sti{border:0; background:none; padding:2px 1px; font-size:19px; line-height:1; color:var(--line-2); cursor:pointer}
.cx3-sti.on{color:#E8B53A}
.cx3-sti:disabled{cursor:default}
.cx3-sti:not(:disabled):hover{transform:scale(1.12)}
/* Importar do Notion */
.cx3-imp-eq{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap:8px}
.cx3-imp-row{display:grid; grid-template-columns:120px 1fr; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid var(--line)}
.cx3-imp-row.falta{border-color:var(--warn-f, #D6961E); background:color-mix(in srgb, var(--warn-f, #D6961E) 8%, transparent)}
.cx3-imp-lst{display:grid; gap:4px; margin-top:10px; max-height:560px; overflow:auto}
.cx3-imp-c{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--g-fill-2, var(--surface-2)); cursor:pointer}
.cx3-imp-c .grow{display:grid; gap:2px; min-width:0}
.cx3-imp-c small{color:var(--ink-3); font-size:12px}
.cx3-imp-tag{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface-3); color:var(--ink-2)}
.cx3-imp-resp{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:8px}
.cx3-imp-rp{display:grid; gap:2px; padding:9px 12px; border-radius:12px; border:1px solid var(--line)}
.cx3-imp-rp small{color:var(--ink-3); font-size:12px; line-height:1.4}
.cx3-imp-onde{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.cx3-imp-tag.novo{background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}

/* ===== v9.8: quadros sem encostar (seção 29 do script) ===== */
section.page .vw-tabs + *, section.page .note-box + .gx-vazio, section.page .note-box + .gx-list,
section.page section.cx-card + section.cx-card, section.page .pc-sec + .pc-sec, section.page .como-cat + .pc-sec,
section.page .pc-sec + .como-cat{margin-top:12px}
section.page .chipset + .chipset{margin-top:8px}
section.page .chipset:has(> .chip.on:only-child){display:none}
.vw-tabs > button[aria-selected="true"] svg, .vw-tabs > button[aria-pressed="true"] svg, .vw-tabs > button.on svg{color:inherit !important; stroke:currentColor}
section.dx-c.dx-mini{min-width:0; overflow:hidden}
section.dx-c.dx-mini .dx-mh{flex-wrap:wrap; gap:6px; min-width:0}
section.dx-c.dx-mini .dx-mv{min-width:0; max-width:100%}
section.dx-c.dx-mini .dx-mv svg{max-width:100%; min-width:0}

/* ===== v9.9: link de aprovação e simulação (seção 30 do script) ===== */
.cx3-lk{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; margin-bottom:12px; border-radius:16px; border:1px solid var(--line); background:var(--g-fill-2, var(--surface-2))}
.cx3-lk .grow{display:grid; gap:2px; min-width:min(260px, 100%); flex:1}
.cx3-lk small{color:var(--ink-3); font-size:12.5px; overflow-wrap:anywhere}
.cx3-lk-i{display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--green-soft, var(--brand-soft)); color:var(--green, var(--brand))}
.cx3-lk-b{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.cx3-lk-m{position:relative} .cx3-lk-m > summary{list-style:none; cursor:pointer} .cx3-lk-m > summary::-webkit-details-marker{display:none}
.cx3-sim-on, .cx3-sim-on body{overflow:hidden}
.cx3-sim{position:fixed; inset:0; z-index:900; display:grid; grid-template-rows:auto 1fr; background:#F3F7F4}
html.cx-dark .cx3-sim, html[data-theme="dark"] .cx3-sim{background:#0B0F0D}
.cx3-sim-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--line)}
.cx3-sim-top .grow{display:grid; gap:1px; min-width:0; flex:1}
.cx3-sim-top small{color:var(--ink-3); font-size:12.5px; overflow-wrap:anywhere}
.cx3-sim-badge{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:#F0A93B; color:#1d1405}
.cx3-sim-ck{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.cx3-sim-n{font-size:12.5px; color:var(--ink-3)}
.cx3-sim-body{display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 380px); gap:18px; padding:18px; min-height:0; overflow:hidden}
.cx3-sim-celw{min-height:0; overflow:auto; display:flex; justify-content:center}
.cx3-sim-cel{width:min(440px, 100%); border-radius:28px; border:1px solid var(--line); background:var(--surface, var(--bg)); padding:14px; box-shadow:0 30px 80px rgba(0,0,0,.25); height:max-content}
.cx3-sim-eq{min-height:0; overflow:auto; display:grid; align-content:start; gap:10px}
.cx3-sim-eqh{display:grid; gap:2px} .cx3-sim-eqh small{color:var(--ink-3); font-size:12.5px}
.cx3-sim-v{color:var(--ink-3); font-size:13.5px; padding:14px; border:1px dashed var(--line); border-radius:14px}
.cx3-sim-r{display:grid; gap:4px; padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--g-fill-2, var(--surface-2))}
.cx3-sim-r[data-s="ok"]{border-color:color-mix(in srgb, var(--green, #2FA36B) 45%, var(--line))}
.cx3-sim-r[data-s="bad"]{border-color:color-mix(in srgb, #D6961E 55%, var(--line))}
.cx3-sim-rh{display:flex; justify-content:space-between; align-items:center; gap:8px}
.cx3-sim-tag{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface-3); color:var(--ink-2)}
.cx3-sim-t{font-size:13px; color:var(--ink-2); font-style:italic; margin:0}
.cx3-sim-e{font-size:13px; color:var(--ink-2); margin:0}
@media (max-width: 860px){
  .cx3-sim-body{grid-template-columns:1fr; overflow:auto; padding:12px}
  .cx3-sim-celw, .cx3-sim-eq{overflow:visible}
  .cx3-sim-cel{border-radius:20px; padding:10px}
  .cx3-sim-ck{order:5; width:100%}
}
.ap-cli.on{background:color-mix(in srgb, currentColor 13%, transparent); border-color:color-mix(in srgb, currentColor 22%, transparent)}
.cx3-lk{background:color-mix(in srgb, currentColor 6%, transparent); border-color:color-mix(in srgb, currentColor 14%, transparent); color:inherit}
.cx3-lk small{color:inherit; opacity:.68}
@media (max-width: 860px){
  .cx3-sim-top{gap:8px 10px; padding:10px 12px}
  .cx3-sim-top .grow{order:3; flex:1 1 100%}
  .cx3-sim-n{order:1; flex:1}
  .cx3-sim-top .icon-btn{order:2}
}
/* Escritório 3D no modo dia: os números dos quadrinhos claros ficavam brancos no fundo claro */
html.cx-light .of-tot > div, html.cx-light .of-tot > div *{color:#0F241A}
html.cx-light .of-tot > div small, html.cx-light .of-tot > div span{color:#3D5247}

/* ===== Cactus Operação cx4: telas enxutas, notícias, editor, funis, mapas e prompts ===== */
.x4-vw{position:relative; display:inline-block}
.x4-vws{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; white-space:nowrap}
.x4-vws::-webkit-details-marker{display:none}
.x4-vw[open] .x4-vws{border-color:var(--brand); color:var(--ink)}
.x4-vwl{position:absolute; z-index:40; right:0; top:calc(100% + 6px); min-width:220px; display:flex; flex-direction:column; padding:6px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.x4-vwl button{display:flex; align-items:center; gap:10px; text-align:left; padding:9px 10px; border:0; background:none; border-radius:10px; color:var(--ink); font:inherit; font-size:14px; cursor:pointer}
.x4-vwl button:hover, .x4-vwl button:focus-visible{background:var(--surface-2)}
.x4-vwl svg{color:var(--ink-3)}
.x4-chips{display:flex; flex-wrap:wrap; gap:8px}
.x4-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.x4-chip:hover{border-color:var(--line-2); background:var(--surface-2)}
.x4-chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.x4-mod{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.x4-modt{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.x4-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px}
.x4-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; transition:transform .15s, border-color .15s}
.x4-card:hover{transform:translateY(-2px); border-color:var(--line-2)}
.x4-card b{font-size:15px}
.x4-card small{color:var(--ink-3); font-size:12.5px}
.x4-ci{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--brand-soft); color:var(--brand); margin-bottom:6px}
.x4-big{font-size:28px; font-weight:800; letter-spacing:-.02em; margin-top:8px; font-variant-numeric:tabular-nums}
.x4-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px}
.x4-top .inp{max-width:320px}

/* Notícias (portal do dia) */
.nt-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.nt-ed b{display:block; font-size:20px; letter-spacing:-.01em}
.nt-ed small{color:var(--ink-3)}
.nt-fil{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px}
.nt-seg{display:inline-flex; padding:3px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line)}
.nt-seg button{border:0; background:none; padding:6px 12px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer}
.nt-seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nt-sel{width:auto; max-width:240px}
.nt-hero{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:22px; align-items:start}
.nt-side{display:flex; flex-direction:column; gap:16px}
.nt-it{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); border:1px solid var(--line); transition:transform .15s, border-color .15s}
.nt-it:hover{transform:translateY(-2px); border-color:var(--line-2)}
.nt-it:hover h3{text-decoration:underline; text-underline-offset:3px}
.nt-tx{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px}
.nt-it h3{margin:0; font-size:16px; line-height:1.3}
.nt-it.hero h3{font-size:24px; line-height:1.2; letter-spacing:-.01em}
.nt-it p{margin:0; color:var(--ink-2); font-size:14px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.nt-it small{color:var(--ink-3); font-size:12px}
.nt-tag{align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--nc)}
.nt-capa{position:relative; display:grid; place-items:center; height:120px; background:radial-gradient(120% 140% at 20% 10%, color-mix(in srgb, var(--nc) 55%, #0F1F17), #0F1F17 85%); color:#F2F4EC; overflow:hidden}
.nt-capa.g{height:260px}
.nt-capa::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px)}
.nt-ci{opacity:.92; filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.nt-cl{position:absolute; left:12px; bottom:10px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.85; z-index:1}
.nt-mundo{position:absolute; right:10px; top:10px; display:inline-flex; gap:4px; align-items:center; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(15,31,23,.55); z-index:1}
.nt-side .nt-it{flex-direction:row}
.nt-side .nt-capa{width:132px; min-width:132px; height:auto; min-height:132px; align-self:stretch}
.nt-h{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--line)}
.nt-list{display:flex; flex-direction:column}
.nt-it.row{flex-direction:row; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; padding:12px 0; gap:14px}
.nt-it.row:hover{transform:none}
.nt-it.row .nt-capa{width:150px; min-width:150px; height:92px; border-radius:10px}
.nt-it.row .nt-tx{padding:0}
@media (max-width:760px){
  .nt-hero{grid-template-columns:1fr}
  .nt-capa.g{height:180px}
  .nt-it.hero h3{font-size:20px}
  .nt-it.row .nt-capa, .nt-side .nt-capa{width:96px; min-width:96px; height:80px; min-height:80px}
  .nt-it.row p{display:none}
}

/* Editor de roteiro e peça */
.cx4-ed{max-width:760px; width:min(760px, calc(100vw - 24px)); padding:0}
.ed-wrap{display:flex; flex-direction:column; max-height:min(88vh, 900px)}
.ed-top{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line)}
.ed-kind{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--brand-soft); color:var(--ink)}
.ed-st{color:var(--ink-3)}
.ed-in{padding:16px 18px 18px; overflow:auto; display:flex; flex-direction:column; gap:14px}
.ed-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.ed-cli{width:auto; min-width:200px; max-width:100%}
.ed-fmts{display:flex; flex-wrap:wrap; gap:6px}
.ed-fmts button{padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.ed-fmts button[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.ed-refw{display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.cx4-ed .ed-refw input.inp{border:0 !important; background:none !important; box-shadow:none !important; padding-left:0; outline:none}
.ed-refw:focus-within{border-color:var(--brand)}
.ed-ri{color:var(--ink-3); display:flex}
.ed-abre{display:flex; color:var(--ink-2)}
.ed-tit{font:inherit; font-size:22px; font-weight:800; letter-spacing:-.01em; border:0; border-bottom:2px solid var(--line); background:none; color:var(--ink); padding:6px 0; outline:none; width:100%}
.ed-tit:focus{border-color:var(--brand)}
.ed-bl{display:flex; flex-direction:column; gap:6px}
.ed-bh{display:flex; align-items:center; gap:8px}
.ed-bh b{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.ed-ta{font:inherit; font-size:15px; line-height:1.55; resize:vertical; min-height:120px}
.ed-cm{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:var(--surface-2)}
.ed-cmh{display:flex; gap:8px; align-items:baseline; font-size:13px}
.ed-cmh small{color:var(--ink-3)}
.ed-cm p{margin:0; white-space:pre-wrap; font-size:14px}
.ed-men{color:var(--brand); font-weight:700}
html.cx-light .ed-men{color:#2F6B45}
.ed-cin{position:relative; display:flex; gap:8px; align-items:flex-end}
.ed-ci{min-height:44px; resize:vertical}
.ed-sug{position:absolute; left:0; bottom:calc(100% + 4px); z-index:5; min-width:220px; display:flex; flex-direction:column; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.ed-sug button{text-align:left; border:0; background:none; padding:8px 10px; border-radius:8px; font:inherit; color:var(--ink); cursor:pointer}
.ed-sug button:hover, .ed-sug button[aria-selected="true"]{background:var(--surface-2)}
.ed-foot{display:flex; justify-content:flex-end; gap:8px; padding-top:4px}

/* Funis */
.fn-nome{font-weight:700; font-size:16px}
.fn-ed{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; align-items:start}
.fn-vis{padding:16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.fn-svg svg{width:100%; height:auto; display:block}
.fn-pc{fill:var(--ink)}
.fn-pcs{fill:var(--ink-3)}
.fn-total{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.fn-total b{font-size:30px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fn-total span{color:var(--ink-2)}
.fn-rows{display:flex; flex-direction:column; gap:8px}
.fn-row{display:grid; grid-template-columns:26px 1fr 120px auto auto auto; gap:6px; align-items:center}
.fn-n{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--brand-soft); color:var(--ink); font-size:12px; font-weight:800}
@media (max-width:900px){ .fn-ed{grid-template-columns:1fr} .fn-row{grid-template-columns:24px 1fr 92px auto auto auto} }

/* Mapas mentais */
.mm-tit{font-size:17px}
.mm-bar{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-left:auto}
.mm-wrap{position:relative; height:min(68vh, 720px); min-height:380px; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2); background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:22px 22px; cursor:grab; outline:none; touch-action:none}
.mm-wrap:focus-visible{border-color:var(--brand)}
.mm-wrap.arr{cursor:grabbing}
.mm-stage{position:absolute; left:0; top:0; transform-origin:0 0}
.mm-lines{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.mm-no{position:absolute; height:40px; padding:0 14px; border-radius:12px; border:2px solid var(--mc, var(--brand)); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; box-shadow:0 2px 6px rgba(15,31,23,.08)}
.mm-no.d0{background:#1E3A2E; color:#F1F3E8; border-color:#1E3A2E; font-size:15px; font-weight:800}
.mm-no.d1{background:color-mix(in srgb, var(--mc) 16%, var(--surface))}
.mm-no.d2{border-width:1.5px; font-weight:500}
.mm-no.on{outline:3px solid var(--brand); outline-offset:3px}
html.cx-light .mm-no.on{outline-color:#3E5A3F}
.mm-inp{position:absolute; z-index:3; height:40px; padding:9px 12px; border-radius:12px; border:2px solid var(--brand); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; resize:none; box-shadow:var(--shadow)}
.mm-dica{color:var(--ink-3); font-size:12.5px; margin-top:8px}

/* Prompts */
.pt-top{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.pt-q{max-width:420px}
.pt-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px}
.pt-card{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface)}
.pt-h{display:flex; align-items:center; justify-content:space-between}
.pt-cat{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.pt-fav.on{color:#DDA52A}
.pt-fav.on svg{fill:currentColor}
.pt-t{font-size:15.5px}
.pt-x{margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.45; flex:1}
.pt-f{display:flex; align-items:center; gap:6px}
.pt-f small{color:var(--ink-3)}

/* Concorrentes */
.x4-cc{margin-top:18px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.ed-bh label{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); flex:1}
.ed-cp{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:4px 10px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer}
.ed-cp:hover{color:var(--ink); border-color:var(--line-2)}
.ed-cli-top{min-width:0; width:auto; max-width:220px; padding-top:5px; padding-bottom:5px; font-size:13px}
/* Meta de adiantamento */
.ad-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:14px}
.ad-k{padding:14px 16px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.ad-k b{font-size:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ad-k[data-s="bad"] b{color:var(--bad)}
.ad-k span{color:var(--ink-2); font-size:13px}
.ad-leg{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-bottom:12px; font-size:12.5px; color:var(--ink-2)}
.ad-leg span{font-weight:700}
.ad-leg small{color:var(--ink-3); flex-basis:100%}
.ad-list{display:flex; flex-direction:column; gap:8px}
.ad-row{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(120px,1fr) 64px auto; gap:14px; align-items:center; text-align:left; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sf); color:var(--ink); font:inherit; cursor:pointer}
.ad-row:hover{border-color:var(--line-2); border-left-color:var(--sf)}
.ad-nm{min-width:0}
.ad-nm b{display:block; font-size:15px}
.ad-nm small{display:block; color:var(--ink-3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ad-bar{position:relative; height:10px; border-radius:999px; background:var(--track)}
.ad-f{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--sf)}
.ad-tick{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-3); opacity:.55; border-radius:2px}
.ad-num{text-align:right}
.ad-num b{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.ad-num small{display:block; color:var(--ink-3); font-size:11.5px; margin-top:-4px}
.ad-alerta{display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin-bottom:14px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--bad-f); background:var(--bad-soft); color:var(--ink); font:inherit; font-size:14px; cursor:pointer}
.ad-alerta svg{color:var(--bad)}
.ad-alerta b{color:var(--bad); white-space:nowrap}
@media (max-width:700px){ .ad-row{grid-template-columns:1fr 56px} .ad-bar{grid-column:1/-1; order:3} .ad-row .pill{grid-column:1/-1; order:4; justify-self:start} }

/* Quadro de cada um */
.qp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
.qp-card{display:flex; flex-direction:column; gap:12px; text-align:left; padding:16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; transition:transform .15s, border-color .15s}
.qp-card:hover{transform:translateY(-2px); border-color:var(--line-2)}
.qp-ch{display:flex; gap:10px; align-items:center}
.qp-ch b{display:block; font-size:15px}
.qp-ch small{color:var(--ink-3); font-size:12.5px}
.qp-av{display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:#1E3A2E; color:#F1F3E8; font-weight:800; font-size:14px}
.qp-av.lg{width:46px; height:46px; font-size:16px}
.qp-nums{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px}
.qp-nums span{display:flex; flex-direction:column}
.qp-nums b{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.qp-nums [data-s="bad"] b{color:var(--bad)}
.qp-nums small{font-size:11.5px; color:var(--ink-3); line-height:1.2}
.qp-sp{color:var(--ok-f); display:block}
.qp-nome{display:block; font-size:18px}
.qp-fn{color:var(--ink-3)}
.qp-ks{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:18px}
.qp-k{padding:12px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.qp-k b{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.qp-k[data-s="bad"] b{color:var(--bad)} .qp-k[data-s="warn"] b{color:var(--warn)} .qp-k[data-s="ok"] b{color:var(--ok)}
.qp-k span{font-size:12.5px; color:var(--ink-2)}
.qp-vh{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px}
.qp-cols{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 380px); gap:12px; overflow-x:auto; padding-bottom:8px}
.qp-colw{display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); min-width:0}
.qp-colh{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; padding:2px 4px; text-align:left; border:0; background:none; color:var(--ink); font-family:inherit}
.qp-n{min-width:24px; height:22px; padding:0 7px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:12px; font-weight:800; display:grid; place-items:center}
.qp-col{display:flex; flex-direction:column; gap:8px}
.qp-it{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--sf)}
.qp-itb{text-align:left; border:0; background:none; padding:0; color:var(--ink); font:inherit; cursor:pointer}
.qp-itb b{display:block; font-size:14px; line-height:1.3}
.qp-itb small{color:var(--ink-3); font-size:12.5px}
.qp-it[data-s="bad"] .qp-itb small{color:var(--bad); font-weight:700}
.qp-cli{align-self:flex-start; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); border-radius:999px; padding:3px 10px; font:inherit; font-size:12px; font-weight:700; cursor:pointer}
.qp-cli:hover{color:var(--ink); border-color:var(--line-2)}
.qp-cal{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px}
.qp-dw{font-size:12px; color:var(--ink-3); text-align:center}
.qp-dia{min-height:96px; padding:6px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:4px; min-width:0}
.qp-dia.hoje{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.qp-dia > small{color:var(--ink-3); font-size:11.5px; font-weight:700}
.qp-chip{display:block; text-align:left; border:0; border-left:3px solid var(--sf); background:var(--surface-2); color:var(--ink); border-radius:6px; padding:3px 6px; font:inherit; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
@media (max-width:700px){ .qp-cal{grid-template-columns:repeat(7, minmax(44px,1fr)); overflow-x:auto} .qp-dia{min-height:70px} .qp-chip{font-size:0; padding:5px} }

/* Cidades da gravação */
.gv-cid{margin-top:8px}
.gv-cid .x4-chip{padding:6px 11px; font-size:13px}
/* ===== cx5: formas de ver, dashboards dos sócios ===== */
details.x5-m{position:relative; display:inline-block}
.x5-ms{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; white-space:nowrap}
.x5-ms::-webkit-details-marker{display:none}
details.x5-m[open] .x5-ms{border-color:var(--ink-3); color:var(--ink)}
.x5-ml{position:fixed; z-index:200; width:240px; display:flex; flex-direction:column; padding:6px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.x5-ml button{display:flex; align-items:center; gap:10px; text-align:left; padding:9px 10px; border:0; background:none; border-radius:10px; color:var(--ink); font:inherit; font-size:14px; cursor:pointer}
.x5-ml button:hover, .x5-ml button:focus-visible{background:var(--surface-2)}
.x5-ml svg{color:var(--ink-3)}
.vw-tabs .x5-vatual{display:inline-flex; align-items:center; gap:7px}
.mm-l, .x4-vwl{z-index:200}

/* dashboards */
.x5-minis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .x5-minis{grid-template-columns:repeat(2, minmax(0,1fr))} }
.x5-rl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.x5-rl li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--dx-ink); line-height:1.4}
.x5-rl b{font-weight:700}
.x5-rl small{color:var(--dx-ink3); font-size:13px}
.x5-ri{display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:10px; background:rgba(214,230,104,.12); color:var(--dx-lima)}
.x5-dbox{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.x5-dw{position:relative; display:grid; place-items:center; flex:0 0 auto}
.x5-dc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.x5-dc b{font-size:28px; font-weight:800; color:var(--dx-ink); line-height:1}
.x5-dc small{font-size:11.5px; color:var(--dx-ink3)}
.x5-leg{display:flex; flex-direction:column; gap:6px; flex:1 1 160px; min-width:0}
.x5-li{display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; text-align:left; border:0; background:none; padding:6px 8px; border-radius:10px; color:var(--dx-ink2); font:inherit; font-size:13px}
button.x5-li{cursor:pointer}
button.x5-li:hover{background:rgba(255,255,255,.05); color:var(--dx-ink)}
.x5-li i{width:10px; height:10px; border-radius:3px}
.x5-li b{color:var(--dx-ink); font-variant-numeric:tabular-nums}
.x5-hb{display:flex; flex-direction:column; gap:4px}
.x5-hbr{display:grid; grid-template-columns:minmax(90px, 32%) 1fr auto; gap:12px; align-items:center; padding:6px 8px; border-radius:10px; border:0; background:none; color:var(--dx-ink); font:inherit; text-align:left; width:100%}
button.x5-hbr{cursor:pointer}
button.x5-hbr:hover{background:rgba(255,255,255,.05)}
.x5-hbl{min-width:0}
.x5-hbl b{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.x5-hbl small{display:block; font-size:11.5px; color:var(--dx-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.x5-hbt{position:relative; height:12px; border-radius:999px; background:rgba(199,203,184,.1)}
.x5-hbf{position:absolute; left:0; top:0; bottom:0; border-radius:999px}
.x5-hbm{position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:2px; background:rgba(236,239,226,.45)}
.x5-hbv{font-size:12.5px; font-weight:700; color:var(--dx-ink2); white-space:nowrap; font-variant-numeric:tabular-nums}
.x5-stk{display:flex; flex-direction:column; gap:10px}
.x5-stkr{display:grid; grid-template-columns:90px 1fr 34px; gap:10px; align-items:center; font-size:13px; color:var(--dx-ink2)}
.x5-stkr b{color:var(--dx-ink); text-align:right}
.x5-stkb{display:flex; height:12px; border-radius:999px; overflow:hidden; background:rgba(199,203,184,.08)}
.x5-stkb i.ok{background:var(--dx-lima)}
.x5-stkb i.bad{background:#FF7A6E}
.x5-cols{display:flex; align-items:flex-end; gap:6px; height:150px}
.x5-cols.alto{height:190px}
.x5-col{flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; gap:4px}
.x5-cv{font-size:11px; font-weight:700; color:var(--dx-ink2); min-height:14px}
.x5-cb{flex:1; width:100%; max-width:30px; display:flex; align-items:flex-end}
.x5-cb i{display:block; width:100%; border-radius:6px 6px 2px 2px; background:var(--dx-lima)}
.x5-col small{font-size:10.5px; color:var(--dx-ink3); white-space:nowrap}
.x5-op{margin-top:6px}
.x5-ph{display:flex; gap:12px; align-items:center; color:var(--dx-ink)}
.x5-ph small{display:block; color:var(--dx-ink3); font-size:12px}
.x5-rings{display:flex; gap:18px; justify-content:center; color:var(--dx-lima)}
.x5-sem{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:12px}
.x5-semg{display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line)}
.x5-semg > b{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.x5-semi{display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; text-align:left; border:0; background:none; padding:6px; border-radius:8px; color:var(--ink); font:inherit; font-size:13px; cursor:pointer}
.x5-semi:hover{background:var(--surface-2)}
.x5-semi i{width:10px; height:10px; border-radius:50%; background:var(--sf)}
.x5-semi span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.x5-semi b{font-variant-numeric:tabular-nums; white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis}
.x5-psel{max-width:320px}
/* carteira */
.x5-cfil{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:6px}
.x5-cfil .qd-tabs{margin:0}
.x5-usel{width:auto; min-width:200px}
.x5-cwarn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--warn-f); background:var(--warn-soft); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; margin-left:auto}
.x5-card{display:flex !important; flex-direction:column; gap:10px; align-items:stretch !important; text-align:left}
.x5-ct{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.x5-ct b{font-size:15px; line-height:1.25}
.x5-cu{flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
.x5-cm{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.x5-cmi{display:flex; flex-direction:column}
.x5-cmi small{font-size:11px; color:var(--ink-3)}
.x5-cmi b{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums}
.x5-cmi[data-s="bad"] b{color:var(--bad)} .x5-cmi[data-s="warn"] b{color:var(--warn)} .x5-cmi[data-s="ok"] b{color:var(--ok)}
.x5-cbar{display:block; height:6px; border-radius:999px; background:var(--track); overflow:hidden}
.x5-cbar i{display:block; height:100%; border-radius:999px; background:var(--sf)}
.x5-vazio{font-size:12.5px; color:var(--dx-ink3); text-align:center; padding:20px 0}
/* resultados */
.x5-s6{grid-column:span 6}
@media (max-width:900px){ .x5-s6{grid-column:span 12} }
.x5-pod{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:end; min-height:200px}
.x5-podc{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--dx-ink); text-align:center}
.x5-podc b{font-size:13.5px}
.x5-podc small{font-size:11.5px; color:var(--dx-ink3)}
.x5-podb{width:100%; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg, rgba(214,230,104,.55), rgba(214,230,104,.12)); margin-top:4px}
.x5-podb.p1{background:linear-gradient(180deg, #D6E668, rgba(214,230,104,.25))}
.x5-podb.p3{background:linear-gradient(180deg, rgba(199,203,184,.45), rgba(199,203,184,.08))}
.x5-podn{font-size:12px; font-weight:800; color:var(--dx-ink2)}
.x5-rk{display:flex; flex-direction:column; gap:4px}
.x5-rkr{display:grid; grid-template-columns:36px minmax(120px, 22%) 1fr 44px 54px; gap:12px; align-items:center; padding:8px; border-radius:10px; border:0; background:none; color:var(--dx-ink); font:inherit; text-align:left; cursor:pointer}
.x5-rkr:hover{background:rgba(255,255,255,.05)}
.x5-rkp{font-weight:800; color:var(--dx-ink2); text-align:center}
.x5-rkn b{display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.x5-rkn small{font-size:11.5px; color:var(--dx-ink3)}
.x5-rkb{display:flex; gap:2px; height:14px; border-radius:999px; background:rgba(199,203,184,.08); overflow:hidden}
.x5-rkb i{display:block; height:100%}
.x5-rkb i.neg{background:repeating-linear-gradient(45deg, #FF7A6E 0 4px, rgba(255,122,110,.4) 4px 8px)}
.x5-rkt{font-size:18px; text-align:right; font-variant-numeric:tabular-nums}
.x5-rkd{font-size:12px; font-weight:700; color:var(--dx-ink3)}
.x5-rkd.up{color:#9FE07A} .x5-rkd.down{color:#FF7A6E}
.x5-big{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:110px}
.x5-big b{font-size:48px; font-weight:800; color:var(--dx-ink); line-height:1}
.x5-big[data-s="bad"] b{color:#FF7A6E}
.x5-big small{color:var(--dx-ink3)}
.x5-podc.vazio{visibility:hidden}
@media (max-width:700px){ .x5-rkr{grid-template-columns:30px 1fr 40px; } .x5-rkb{grid-column:1/-1; order:5} .x5-rkd{display:none} }
/* ===== cx6: mapa mental, funis, quadro de cada um, NPS ===== */
/* mapa mental */
.mm6-top .mm6-tit{max-width:380px; font-weight:700; font-size:16px}
.mm6-wrap{position:relative; height:min(72vh, 760px); min-height:420px; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:24px 24px; cursor:grab; outline:none; touch-action:none; user-select:none}
.mm6-wrap.arr{cursor:grabbing}
.mm6-wrap:focus-visible{border-color:var(--ink-3)}
.mm6-stage{position:absolute; left:0; top:0; transform-origin:0 0}
.mm6-lines{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.mm6-no{position:absolute; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:6px 14px; border-radius:12px; color:var(--ink); font-size:14px; font-weight:500; line-height:1.25; cursor:pointer; box-sizing:border-box; overflow-wrap:anywhere}
.mm6-no.d0{background:#1E3A2E; color:#F1F3E8; font-size:17px; font-weight:800; text-align:center; align-items:center; border-radius:16px; box-shadow:0 6px 18px rgba(15,31,23,.25)}
.mm6-no.d1{background:var(--mc); color:#fff; font-weight:700; box-shadow:0 3px 10px rgba(15,31,23,.14)}
.mm6-no.d2{background:transparent; border-bottom:2px solid var(--mc); border-radius:0; padding:4px 6px 5px}
.mm6-no.neg .mm6-t{font-weight:800}
.mm6-no.on{outline:2.5px solid #3B8FD9; outline-offset:3px}
.mm6-no.alvo{outline:2.5px dashed #C8963E; outline-offset:4px}
.mm6-no.arr{opacity:.45}
.mm6-t{white-space:pre-wrap}
.mm6-img{display:block; max-width:100%; max-height:70px; border-radius:8px; object-fit:cover; align-self:center}
.mm6-ics{display:flex; gap:4px; position:absolute; right:6px; top:-10px}
.mm6-ic{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--surface); color:var(--ink-2); border:1px solid var(--line); text-decoration:none}
.mm6-mais{position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); opacity:0; cursor:pointer; transition:opacity .15s}
.mm6-mais.esq{right:auto; left:-12px}
.mm6-no:hover .mm6-mais, .mm6-no.on .mm6-mais{opacity:1}
.mm6-cnt{position:absolute; right:-30px; top:50%; transform:translateY(-50%); min-width:24px; height:20px; padding:0 6px; border-radius:999px; border:0; background:var(--mc, #1E3A2E); color:#fff; font:inherit; font-size:11px; font-weight:800; cursor:pointer}
.mm6-inp{position:absolute; z-index:5; padding:8px 12px; border-radius:12px; border:2px solid #3B8FD9; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; resize:none; box-shadow:var(--shadow); max-width:320px; overflow:hidden}
.mm6-bar{position:absolute; z-index:6; display:flex; align-items:center; gap:4px; padding:5px 6px; border-radius:12px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); cursor:default}
.mm6-bb{display:grid; place-items:center; min-width:30px; height:30px; padding:0 6px; border-radius:8px; border:0; background:none; color:var(--ink-2); font:inherit; font-weight:800; cursor:pointer}
.mm6-bb:hover{background:var(--surface-2); color:var(--ink)}
.mm6-bb.on{background:var(--brand-soft); color:var(--ink)}
.mm6-cor{width:18px; height:18px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-2); cursor:pointer; padding:0}
.mm6-cor.on{box-shadow:0 0 0 2px var(--ink)}
.mm6-sep{width:1px; height:20px; background:var(--line); margin:0 3px}

/* funis */
.fn6-nome{font-weight:800; font-size:17px; max-width:360px}
.fn6-cli{max-width:240px}
.fn6-desc{margin-bottom:14px; max-width:620px}
.fn6-g{display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:start}
@media (max-width:980px){ .fn6-g{grid-template-columns:1fr} }
.fn6-vc{padding:16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.fn6-vis{display:flex; flex-direction:column; gap:4px}
.fn6-row{display:grid; grid-template-columns:1fr 92px; align-items:center; gap:10px}
.fn6-band{height:62px; margin:0 auto; width:100%; display:grid; place-items:center; clip-path:polygon(calc(50% - var(--w1) / 2) 0, calc(50% + var(--w1) / 2) 0, calc(50% + var(--w2) / 2) 100%, calc(50% - var(--w2) / 2) 100%); color:#F2F4EC}
.fn6-band.claro{color:#0F1F17}
.fn6-bt{display:flex; flex-direction:column; align-items:center; gap:0; width:min(240px, 60%)}
.fn6-bn, .fn6-bq{width:100%; text-align:center; background:transparent; border:0; border-bottom:1px dashed transparent; color:inherit; font:inherit; outline:none; padding:1px 4px}
.fn6-bn{font-weight:800; font-size:14.5px}
.fn6-bq{font-size:13px; opacity:.9; -moz-appearance:textfield}
.fn6-bq::-webkit-inner-spin-button{display:none}
.fn6-bn:hover, .fn6-bq:hover, .fn6-bn:focus, .fn6-bq:focus{border-bottom-color:currentColor}
.fn6-conv b{display:block; font-size:15px}
.fn6-conv small{font-size:11.5px; color:var(--ink-3)}
.fn6-tot{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.fn6-tot b{font-size:30px; letter-spacing:-.02em}
.fn6-tot span{color:var(--ink-2)}
.fn6-list{display:flex; flex-direction:column; gap:8px}
.fn6-li{display:grid; grid-template-columns:20px 1fr; gap:8px; align-items:start; padding:10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface)}
.fn6-li.alvo{border-color:#C8963E; box-shadow:0 0 0 2px rgba(200,150,62,.25)}
.fn6-li.arr{opacity:.5}
.fn6-h{color:var(--ink-3); cursor:grab; padding-top:10px}
.fn6-lc{display:flex; flex-direction:column; gap:6px; min-width:0}
.fn6-l1{display:grid; grid-template-columns:26px 1fr 100px auto; gap:6px; align-items:center}
.fn6-l2{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fn6-cores{display:flex; gap:4px}
.fn6-cor{width:18px; height:18px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-2); padding:0; cursor:pointer}
.fn6-cor.on{box-shadow:0 0 0 2px var(--ink)}
.fn6-nota{flex:1; min-width:160px; min-height:36px; padding:6px 10px; font-size:13px}

/* quadro de cada um */
.x6-fil{display:flex; gap:8px}
.x6-mini{width:auto; min-height:36px; padding:6px 10px; font-size:13px}
.qp6-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px}
.qp6-card{display:flex; flex-direction:column; gap:12px; text-align:left; padding:16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; transition:transform .15s, border-color .15s}
.qp6-card:hover{transform:translateY(-2px); border-color:var(--line-2)}
.qp6-viz{display:flex; align-items:center; gap:14px; color:var(--ok-f)}
.qp6-viz .dx-ring{width:74px}
.qp6-viz .dx-ring b{color:var(--ink)}
.qp6-viz .dx-ring small{color:var(--ink-3)}
.qp6-sp{flex:1; display:flex; flex-direction:column; gap:2px}
.qp6-sp svg{width:100%; height:36px}
.qp6-sp small{font-size:11px; color:var(--ink-3)}
.qp6-tags{display:flex; gap:6px; flex-wrap:wrap}
.qp6-tg{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}
.qp6-tg.bad{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.qp6-tg.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.qp6-dash{margin-bottom:18px}
.qp6-tk .qp-colw{min-height:120px}
.qp6-tk .qp-colw.kan-alvo{outline:2px dashed var(--ink-3); outline-offset:2px}
.qp-it.kan-arr{cursor:grab}
.qp-it.arrastando{opacity:.45}
.qp6-vz{color:var(--ink-3); font-size:12px; text-align:center; padding:14px 0}
.x6-vb{display:inline-flex; align-items:center; gap:6px; padding:3px; border-radius:999px; border:1px solid var(--line); background:var(--surface)}
.x6-vb .x5-vatual{display:inline-flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:6px 12px; background:var(--brand); color:var(--on-brand); font:inherit; font-size:13px; font-weight:700}
.x6-vb .x5-ms{border:0; background:none}

/* feedbacks */
.fb6-list{display:flex; flex-direction:column; gap:10px}
.fb6-c{padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--line); border-left:4px solid var(--sf); background:var(--surface); display:flex; flex-direction:column; gap:8px}
.fb6-h{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.fb6-h small{color:var(--ink-3); font-size:12px}
.fb6-t{margin:0; font-size:15px; line-height:1.45}
.fb6-x{margin:0; font-size:13px; color:var(--ink-2)}
.fb6-img{max-width:260px; max-height:220px; border-radius:10px; border:1px solid var(--line)}
.qp6-viz .dx-ring svg circle:first-child{stroke:var(--track) !important}
.qp6-viz .dx-ring > span{display:flex; flex-direction:column; align-items:center}
.qp6-viz .dx-ring small{font-size:11px}
/* =====================================================================
   Cactus Operação cx7: o visual da Visão dos sócios em todas as telas.
   O conteúdo de cada tela fica num painel escuro (o mesmo dos dashboards):
   fundo verde muito escuro, cartões arredondados com brilho sutil,
   texto claro e destaque em verde-limão. Topo, abas e janelas não mudam.
   ===================================================================== */
#pages [id^="body-"]:not(:empty):not(:has(> .dx:first-child)){
  --bg:#0B1711; --surface:#12241B; --surface-2:#173026; --surface-3:#1E3A2E;
  --ink:#ECEFE2; --ink-2:#C7CBB8; --ink-3:#8F9C88;
  --line:rgba(199,203,184,.11); --line-2:rgba(199,203,184,.2);
  --brand:#D6E668; --brand-2:#B9CB4F; --brand-soft:rgba(214,230,104,.12); --on-brand:#0F1F17;
  --hero-a:#1E3A2E; --hero-b:#3E5A3F; --hero-ink:#F1F3E8; --lime:#D6E668;
  --ok:#9FE0AE; --ok-soft:rgba(111,207,142,.14); --ok-f:#6FCF8E; --on-ok-f:#06170E;
  --warn:#F0C45A; --warn-soft:rgba(240,196,90,.14); --warn-f:#E5A92F; --on-warn-f:#2B1D00;
  --bad:#FF9188; --bad-soft:rgba(255,122,110,.14); --bad-f:#FF7A6E; --on-bad-f:#2B0A07;
  --idle:#B3BEA9; --idle-soft:rgba(199,203,184,.1); --idle-f:#7F9178; --on-idle-f:#0F1F17;
  --lg-ok:#9FE0AE; --lg-warn:#F0C45A; --lg-bad:#FF9188;
  --track:rgba(199,203,184,.1); --grid:rgba(199,203,184,.09); --axis:rgba(199,203,184,.2);
  --c1:#D6E668; --c2:#FF9188; --c4:#7FB2E5; --c5:#F0C45A; --c7:#B2A6F0;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --glass-tint:rgba(18,36,27,.85); --glass-tint-strong:rgba(18,36,27,.95); --glass-hi:rgba(255,255,255,.06); --glass-edge:rgba(199,203,184,.1); --glass-edge-2:rgba(199,203,184,.06);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --focus:#D6E668; --r:20px; --r-sm:14px;
  --dx-c:#12241B; --dx-ln:rgba(199,203,184,.09); --dx-ink:#ECEFE2; --dx-ink2:#C7CBB8; --dx-ink3:#8F9C88; --dx-lima:#D6E668;
  color:var(--ink); color-scheme:dark;
  position:relative; border-radius:28px; padding:20px; border:1px solid rgba(199,203,184,.08); min-height:220px;
  background:radial-gradient(900px 420px at 8% -12%, rgba(214,230,104,.08), transparent 60%), radial-gradient(800px 500px at 110% 0%, rgba(107,127,103,.18), transparent 60%), #0B1711;
  box-shadow:0 30px 80px rgba(15,31,23,.22);
}
@media (max-width:700px){ #pages [id^="body-"]:not(:empty):not(:has(> .dx:first-child)){ padding:14px; border-radius:22px } }
/* painéis que já são escuros por dentro não ganham moldura dupla */
#pages [id^="body-"] .dx.x5-op{background:transparent; border:0; box-shadow:none; padding:0; border-radius:0}

/* cartões: o mesmo cartão dos dashboards */
#pages [id^="body-"] :is(.panel, .gx-card, .tile, .kpi, .stat, .x4-card, .qp6-card, .qp-colw, .pt-card, .fb6-c, .ad-k, .fn6-vc, .fn6-li, .vw-card, .vw-col, .est-tile, .x5-semg, .nt-it:not(.row), .gx-vazio, .mm-wrap, .mm6-wrap, .fn-vis, .tbl-wrap, .cal-grid, .cal-side, .board .bcol, .bcard, .hm-wrap, .q-prox, .x4-cc, .ad-row){
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%), #12241B !important;
  border:1px solid rgba(199,203,184,.09) !important; border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; color:var(--ink);
}
#pages [id^="body-"] :is(.gx-row, .qp-it, .todo-item, .ag-item, .mrow, .so li, .mh-i, .ind-r){
  background:rgba(255,255,255,.025) !important; border-color:rgba(199,203,184,.09) !important; border-radius:14px; box-shadow:none !important; color:var(--ink);
}
#pages [id^="body-"] :is(.vw-card, .gx-card, .x4-card, .qp6-card, .pt-card, .gx-row, .qp-it, .ad-row):hover{border-color:rgba(214,230,104,.28) !important}
#pages [id^="body-"] .gx-vazio{border-style:dashed !important}
#pages [id^="body-"] .mm6-wrap, #pages [id^="body-"] .mm-wrap{background-image:radial-gradient(rgba(199,203,184,.12) 1px, transparent 1px) !important; background-size:24px 24px !important; background-color:#0E1D16 !important}
#pages [id^="body-"] .mm6-no.d0{background:#D6E668; color:#0F1F17}
#pages [id^="body-"] .qp-av{background:#D6E668; color:#0F1F17}

/* campos e botões dentro do painel */
#pages [id^="body-"] :is(.inp, select.inp, textarea.inp, input[type="search"].inp){background:rgba(255,255,255,.04) !important; border-color:rgba(199,203,184,.18) !important; color:var(--ink) !important}
#pages [id^="body-"] .inp::placeholder{color:var(--ink-3)}
#pages [id^="body-"] select.inp option{background:#12241B; color:#ECEFE2}
#pages [id^="body-"] .btn:not(.primary):not(.danger){background:rgba(255,255,255,.04) !important; border-color:rgba(199,203,184,.16) !important; color:var(--ink) !important}
#pages [id^="body-"] .btn.primary{background:#D6E668 !important; border-color:#D6E668 !important; color:#0F1F17 !important}
#pages [id^="body-"] .icon-btn{background:rgba(255,255,255,.04); border-color:rgba(199,203,184,.16); color:var(--ink-2)}
#pages [id^="body-"] :is(.chip, .x4-chip, .qd-tab, .x5-ms, .x4-vws, .ed-cp, .qp-cli, .x6-vb){background:rgba(255,255,255,.04) !important; border-color:rgba(199,203,184,.14) !important; color:var(--ink-2) !important}
#pages [id^="body-"] :is(.chip.on, .x4-chip[aria-pressed="true"], .qd-tab[aria-pressed="true"], .vw-tabs > button[aria-selected="true"], .x5-vatual, .seg button[aria-pressed="true"], .nt-seg button[aria-pressed="true"]){background:#D6E668 !important; border-color:#D6E668 !important; color:#0F1F17 !important}
#pages [id^="body-"] .x6-vb .x5-vatual{background:#D6E668 !important; color:#0F1F17 !important}
#pages [id^="body-"] :is(.vw-tabs, .qd-tabs, .seg, .nt-seg){background:rgba(255,255,255,.03) !important; border-color:rgba(199,203,184,.1) !important}
#pages [id^="body-"] table th{background:rgba(255,255,255,.03) !important; color:var(--ink-3)}
#pages [id^="body-"] table td{border-color:rgba(199,203,184,.08) !important}
#pages [id^="body-"] .banner{background:rgba(255,255,255,.04); border-color:var(--sf, rgba(199,203,184,.2))}
#pages [id^="body-"] .hint, #pages [id^="body-"] .sub-line{color:var(--ink-3)}
#pages [id^="body-"] .x5-cwarn{background:rgba(240,196,90,.14); color:#F0C45A; border-color:rgba(240,196,90,.4)}
/* títulos de seção no tom dos dashboards */
#pages [id^="body-"] :is(.mais-h, .x4-modt, .nt-h){color:var(--ink-3)}
#pages [id^="body-"] :is(h2, h3, b, strong){color:inherit}
/* cartões de notícia e funil mantêm as cores próprias */
#pages [id^="body-"] .nt-it.row{background:transparent !important; border:0 !important; border-bottom:1px solid rgba(199,203,184,.08) !important; border-radius:0}
#pages [id^="body-"] .fn6-band{box-shadow:none}
/* o vidro claro do tema (camada do Cássio) vira o vidro escuro dos dashboards dentro do painel */
#pages [id^="body-"]:not(:empty):not(:has(> .dx:first-child)){--g-fill:rgba(18,36,27,.92); --g-edge:rgba(199,203,184,.09); --g-hi:inset 0 1px 0 rgba(255,255,255,.04); --g-sh:0 0 0 transparent; --g-blur:none}
#pages [id^="body-"] :is(.cx-stat, .cx-card, .qb, .t3-tile, .ar-p, .ap-card, .cd-box, .gv-ficha, .gv-th, .cx-ini .panel){
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%), #12241B !important; border:1px solid rgba(199,203,184,.09) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; color:var(--ink); -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
#pages [id^="body-"] :is(.cx-stat, .cx-card, .qb, .gx-card, .est-tile, .kpi)[data-s="bad"]{box-shadow:inset 0 3px 0 -1px #FF7A6E !important}
#pages [id^="body-"] :is(.cx-stat, .cx-card, .qb, .gx-card, .est-tile, .kpi)[data-s="warn"]{box-shadow:inset 0 3px 0 -1px #F0C45A !important}
#pages [id^="body-"] .cx-greet{background:radial-gradient(600px 220px at 0% 0%, rgba(214,230,104,.16), transparent 65%), linear-gradient(115deg, #1E3A2E, #12241B) !important; border:1px solid rgba(199,203,184,.1) !important; color:#F1F3E8}
#pages [id^="body-"] :is(.banner, .ad-alerta){background:rgba(255,255,255,.04) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; color:var(--ink)}
#pages [id^="body-"] .ad-alerta{border:1px solid rgba(255,122,110,.35) !important; box-shadow:inset 3px 0 0 #FF7A6E !important}
#pages [id^="body-"] :is(.q-abas, .cx-tabs){background:rgba(255,255,255,.03) !important; border-color:rgba(199,203,184,.1) !important}
#pages [id^="body-"] :is(.cx-sl, .cx-sc){color:var(--ink-2)}
#pages [id^="body-"] .cx-sv{color:var(--ink)}
#pages [id^="body-"] :is(.ar-bar, .t3-seg){background:rgba(255,255,255,.04) !important; border-color:rgba(199,203,184,.1) !important; color:var(--ink-2) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
#pages [id^="body-"] .rf-pi{background:rgba(255,255,255,.06) !important; color:var(--ink) !important; border-color:rgba(199,203,184,.14) !important}
#pages [id^="body-"] .icon-btn{background:rgba(255,255,255,.04) !important; border-color:rgba(199,203,184,.16) !important; color:var(--ink-2) !important}
#pages [id^="body-"] .x5-ml{background:#12241B !important; border-color:rgba(199,203,184,.14) !important}
#pages [id^="body-"] .t3-seg button[aria-pressed="true"]{background:#D6E668 !important; color:#0F1F17 !important}
#pages [id^="body-"] .cx3-mcd{background:rgba(255,255,255,.04) !important; border-color:rgba(199,203,184,.12) !important; color:var(--ink) !important}
#pages [id^="body-"] .cx3-mcd.passou{opacity:.6}
#pages [id^="body-"] .cx3-mcd.hoje{border-color:#D6E668 !important; box-shadow:inset 0 0 0 1px #D6E668 !important}
/* ===== cx8: onde publicar e collabs na peça ===== */
.x8-sec{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--surface-2)}
.x8-sec.topo{border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand)}
.x8-h{display:flex; align-items:center; gap:8px}
.x8-h b{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.x8-chips{display:flex; flex-wrap:wrap; gap:8px}
.x8-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer}
.x8-chip small{font-weight:500; color:var(--ink-3); font-size:12px}
.x8-chip:hover{border-color:var(--ink-3)}
.x8-chip.on{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.x8-chip.on small{color:inherit; opacity:.8}
/* ===== cx9: dashboards avançados ===== */
.x9-live{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.1em; padding:2px 7px; border-radius:6px; margin-right:6px; vertical-align:2px; color:#0F1F17; background:#D6E668}
.x9-live.t{background:#4FD1B5} .x9-live.v{background:#6FE7AA}
.x9-hero{gap:12px !important}
.x9-hero .x9-hk, .x9-riskc .x9-hk{display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:800; letter-spacing:.09em}
.x9-hero .x9-hv b, .x9-teal .x9-hv b, .x9-red .x9-hv b{font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1}
.x9-hv{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.x9-hv small{font-size:13px; opacity:.8}
.x9-hero.lima{background:linear-gradient(160deg, #E4F27A, #C6DB4E) !important; color:#0F1F17 !important; border-color:transparent !important}
.x9-hero.lima .dx-live{background:rgba(15,31,23,.12); color:#0F1F17}
.x9-hero.laranja{background:linear-gradient(160deg, #FFD27A, #F0A93B) !important; color:#2A1700 !important; border-color:transparent !important}
.x9-hero.laranja .dx-live{background:rgba(42,23,0,.14); color:#2A1700}
.x9-hero.verde{background:linear-gradient(160deg, #2FD08A, #128A59) !important; color:#03140B !important; border-color:transparent !important}
.x9-hero.verde .dx-live{background:rgba(3,20,11,.15); color:#03140B}
.x9-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.x9-3 > div{display:flex; flex-direction:column; gap:3px}
.x9-3 small{font-size:11px; opacity:.75}
.x9-3 b{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.x9-3.s b{font-size:16px}
.x9-3.box > div{padding:10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(199,203,184,.08)}
.x9-mb{display:block; height:5px; border-radius:999px; background:rgba(15,31,23,.14); overflow:hidden}
.dx-c:not(.x9-hero) .x9-mb{background:rgba(199,203,184,.1)}
.x9-mb i{display:block; height:100%; border-radius:999px; background:#D6E668}
.x9-hspk svg{width:100%; height:42px}
.x9-twin, .x9-arena, .x9-topo{width:100%; height:auto; display:block}
.x9-belt .x9-beltf{fill:rgba(214,230,104,.05); stroke:rgba(214,230,104,.18)}
.x9-belt .x9-beltl{stroke:rgba(214,230,104,.35); stroke-width:1.2; stroke-dasharray:6 6; fill:none}
@media (prefers-reduced-motion:no-preference){ .x9-belt .x9-beltl{animation:x9belt 1.2s linear infinite} }
@keyframes x9belt{to{stroke-dashoffset:-12}}
.x9-st polygon{stroke:#D6E668; stroke-width:1.3}
.x9-st .x9-front{fill:rgba(214,230,104,.07)} .x9-st .x9-side{fill:rgba(214,230,104,.04)} .x9-st .x9-top{fill:rgba(214,230,104,.12)}
.x9-st .x9-hid{stroke:rgba(214,230,104,.25); stroke-dasharray:3 3}
.x9-st.gar polygon{stroke:#F0A93B} .x9-st.gar .x9-front{fill:rgba(240,169,59,.12)} .x9-st.gar .x9-top{fill:rgba(240,169,59,.2)}
.x9-st.vazio polygon{stroke:rgba(199,203,184,.3)}
.x9-st{filter:drop-shadow(0 0 6px rgba(214,230,104,.25))}
.x9-pc{fill:#D6E668} .x9-pc.atr{fill:#FF7A6E}
.x9-pin{stroke:rgba(236,239,226,.4)}
.x9-tag{fill:#0B1711; stroke:rgba(214,230,104,.45)}
.x9-tagt{font:700 10.5px/1 ui-monospace, Menlo, monospace; fill:#ECEFE2; letter-spacing:.04em}
.x9-warn{fill:#F0A93B} .x9-warnt{font:800 9.5px/1 ui-monospace, Menlo, monospace; fill:#2A1700}
.x9-mov{fill:#ECEFE2; opacity:.85}
.x9-twinf{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.x9-twinn{display:flex; align-items:baseline; gap:8px; padding:8px 14px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid rgba(199,203,184,.1)}
.x9-twinn small{font:700 10px/1 ui-monospace, Menlo, monospace; letter-spacing:.08em; color:var(--dx-ink3)}
.x9-twinn b{font-size:26px; font-weight:800; color:var(--dx-ink); margin-right:8px} .x9-twinn b.bad{color:#FF7A6E}
.x9-bars, .x9-wf, .x9-trend, .x9-rib{width:100%; height:auto; display:block}
.x9-bar{fill:url(#x9g); fill:#5B8DEF} .x9-bar.hoje{fill:#9CC0FF}
.x9-bar.ouro{fill:#E8B84A} .x9-bar.rush{fill:#FF5C93}
.x9-bv{font:700 11px/1 'Plus Jakarta Sans', sans-serif; fill:var(--dx-ink2)}
.x9-bx{font:600 10.5px/1 'Plus Jakarta Sans', sans-serif; fill:var(--dx-ink3); letter-spacing:.04em}
.x9-meta{stroke:#D6E668; stroke-width:1.4; stroke-dasharray:5 5}
.x9-metat{font:700 11px/1 'Plus Jakarta Sans', sans-serif; fill:#D6E668}
.x9-cum{fill:none; stroke:rgba(236,239,226,.8); stroke-width:1.6}
.x9-ct{display:flex; flex-direction:column; gap:9px}
.x9-ctr{display:grid; grid-template-columns:46px 1fr 44px; gap:10px; align-items:center}
.x9-ctn{font:700 11px/1 ui-monospace, Menlo, monospace; color:var(--dx-ink3)}
.x9-ctr b{font-size:13px; text-align:right; color:var(--dx-ink)} .x9-ctr b.warn{color:#F0A93B}
.x9-ctt{position:relative; height:10px; border-radius:999px; background:rgba(199,203,184,.08)}
.x9-ctt i{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:#5B8DEF} .x9-ctt i.acima{background:#F0A93B}
.x9-ctt em{position:absolute; top:-4px; bottom:-4px; width:2px; background:#ECEFE2; opacity:.6}
.x9-call{margin:4px 0 0; font-size:12.5px; color:#F0C45A; display:flex; gap:6px; align-items:center; padding:8px 10px; border-radius:10px; background:rgba(240,196,90,.08)} .x9-call.ok{color:#9FE0AE; background:rgba(111,207,142,.08)}
.x9-big{display:flex; align-items:baseline; gap:8px} .x9-big b{font-size:40px; font-weight:800; color:var(--dx-ink)} .x9-big small{color:var(--dx-ink3)}
.x9-stk{display:flex; gap:3px; height:12px; border-radius:999px; overflow:hidden; background:rgba(199,203,184,.08)}
.x9-feed{display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 18px}
@media (max-width:900px){ .x9-feed{grid-template-columns:1fr} }
.x9-fr{display:grid; grid-template-columns:44px 10px auto 1fr auto; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.025); font-size:13px; color:var(--dx-ink2)}
.x9-fr b{color:var(--dx-ink); white-space:nowrap} .x9-fr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .x9-fr small{color:var(--dx-ink3)}
.x9-ft{font:600 11px/1 ui-monospace, Menlo, monospace; color:var(--dx-ink3)}
.x9-fd{width:8px; height:8px; border-radius:50%; background:#D6E668} .x9-fd.warn{background:#F0C45A} .x9-fd.bad{background:#FF7A6E}
/* arena */
.x9-stage{fill:url(#none); fill:#2A1E4A; stroke:rgba(255,92,147,.5)}
.x9-luz{fill:#FFF3C4; filter:drop-shadow(0 0 4px #FFE08A)}
.x9-feixe{fill:rgba(255,236,170,.05)}
.x9-stt{font:800 10px/1 ui-monospace, Menlo, monospace; fill:#FFD9EA; letter-spacing:.3em}
.x9-secbg{fill:rgba(255,255,255,.015); stroke:rgba(199,203,184,.06)}
.x9-sec{cursor:pointer; outline:none} .x9-sec:hover .x9-secbg, .x9-sec:focus .x9-secbg{fill:rgba(232,184,74,.07)}
.x9-sec.sel .x9-secbg{fill:rgba(232,184,74,.1); stroke:rgba(232,184,74,.55)}
.x9-seat{fill:rgba(199,203,184,.16)} .x9-seat.pronto{fill:#E8B84A} .x9-seat.prod{fill:#7E6BB0} .x9-seat.atr{fill:#FF5C93}
.x9-sec.sel .x9-seat.pronto{filter:drop-shadow(0 0 3px rgba(232,184,74,.8))}
.x9-secn{font:700 10px/1 'Plus Jakarta Sans', sans-serif; fill:var(--dx-ink3)}
.x9-col{display:flex; flex-direction:column; gap:14px; min-width:0}
.x9-dots{display:flex; gap:3px} .x9-dots i{flex:1; height:6px; border-radius:2px; background:rgba(42,23,0,.2)} .x9-dots i.on{background:#2A1700}
.x9-k{font-size:10.5px; font-weight:800; letter-spacing:.09em; color:var(--dx-ink3)}
.x9-selh{display:flex; align-items:baseline; justify-content:space-between; gap:8px} .x9-selh b{font-size:18px; color:var(--dx-ink)} .x9-selv{font-size:24px; font-weight:800; color:#E8B84A}
.x9-sub{margin:0; font-size:12.5px; color:var(--dx-ink3)}
.x9-fl{display:flex; flex-direction:column; gap:8px} .x9-flr{display:grid; grid-template-columns:1fr auto; gap:3px 8px; font-size:13px; color:var(--dx-ink2)} .x9-flr small{color:var(--dx-ink3)} .x9-flr .x9-mb{grid-column:1/-1}
.x9-split{display:flex; gap:3px; height:30px; border-radius:10px; overflow:hidden}
.x9-split i{display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; color:#0F1F17; min-width:0; overflow:hidden}
.x9-cl{display:flex; flex-direction:column; gap:6px} .x9-cl > div{display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; font-size:13px; color:var(--dx-ink2)} .x9-cl i{width:10px; height:10px; border-radius:3px} .x9-cl b{color:var(--dx-ink)}
.x9-ribt{font:800 10px/1 'Plus Jakarta Sans', sans-serif; fill:#0F1F17}
/* riscos */
.x9-orb{fill:none; stroke:rgba(79,209,181,.12); stroke-dasharray:3 6}
.x9-sweep{transform-origin:290px 200px}
@media (prefers-reduced-motion:no-preference){ .x9-sweep{animation:x9spin 6s linear infinite} .x9-pulse{animation:x9pulse 1.8s ease-out infinite} }
@keyframes x9spin{to{transform:rotate(360deg)}}
@keyframes x9pulse{0%{r:6; opacity:.9} 100%{r:22; opacity:0}}
.x9-swp{fill:rgba(79,209,181,.07)}
.x9-edge{stroke:rgba(79,209,181,.22); stroke-width:1} .x9-edge.forte{stroke:rgba(79,209,181,.45); stroke-width:1.4} .x9-edge.risco{stroke:rgba(255,107,107,.5)}
.x9-dia{fill:#4FD1B5; filter:drop-shadow(0 0 4px rgba(79,209,181,.7))}
.x9-node.risco .x9-dia{fill:#FF6B6B; filter:drop-shadow(0 0 5px rgba(255,107,107,.9))}
.x9-pulse{fill:none; stroke:#FF6B6B; stroke-width:1.5}
.x9-rtag{fill:rgba(60,14,18,.9); stroke:rgba(255,107,107,.6)} .x9-rtagt{font:800 9px/1 ui-monospace, Menlo, monospace; fill:#FFB3B3}
.x9-hub polygon{fill:rgba(79,209,181,.22); stroke:#4FD1B5; stroke-width:1.5}
.x9-hubc{fill:#4FD1B5; filter:drop-shadow(0 0 8px rgba(79,209,181,.9))}
.x9-glab{fill:rgba(11,23,17,.9); stroke:rgba(79,209,181,.4)} .x9-glabt{font:800 9.5px/1 ui-monospace, Menlo, monospace; fill:#BFF5E8; letter-spacing:.06em}
.x9-riskc{background:linear-gradient(160deg, rgba(240,169,59,.18), rgba(18,36,27,.9) 60%) !important; border-color:rgba(240,169,59,.35) !important}
.x9-nivel{padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.3)}
.x9-rgw{display:grid; grid-template-columns:1fr; gap:6px}
.x9-rg{width:100%; max-width:280px; margin:0 auto; display:block}
.x9-needle{stroke:#ECEFE2; stroke-width:3; stroke-linecap:round} .x9-needlec{fill:#ECEFE2}
.x9-rgv{font:800 34px/1 'Plus Jakarta Sans', sans-serif; fill:#ECEFE2}
.x9-drv{display:flex; flex-direction:column; gap:6px} .x9-nv{font-size:22px; font-weight:800; letter-spacing:.04em} .x9-drv > small{color:var(--dx-ink3); font-size:11.5px}
.x9-drr{display:grid; grid-template-columns:1fr auto; gap:3px 8px; font-size:12.5px; color:var(--dx-ink2)} .x9-drr em{font-style:normal; color:var(--dx-ink3)} .x9-drr .x9-mb{grid-column:1/-1}
.x9-teal{background:linear-gradient(160deg, rgba(79,209,181,.22), rgba(18,36,27,.9) 70%) !important; border-color:rgba(79,209,181,.35) !important}
.x9-red{background:linear-gradient(160deg, rgba(255,107,107,.18), rgba(18,36,27,.9) 70%) !important; border-color:rgba(255,107,107,.3) !important}
.x9-teal .x9-hv b{color:#BFF5E8} .x9-red .x9-hv b{color:#FFC2C2}
.x9-tbl{display:flex; flex-direction:column} .x9-th, .x9-tr{display:grid; grid-template-columns:52px 1.2fr 1.6fr .8fr 92px; gap:10px; align-items:center; padding:8px 4px; font-size:13px}
.x9-th span{font:700 10px/1 ui-monospace, Menlo, monospace; color:var(--dx-ink3); letter-spacing:.08em} .x9-tr{border-top:1px solid rgba(199,203,184,.07); color:var(--dx-ink2)} .x9-tr b{color:var(--dx-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .x9-tr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.x9-act{font:800 9.5px/1 ui-monospace, Menlo, monospace; font-style:normal; padding:4px 6px; border-radius:5px; text-align:center; letter-spacing:.05em}
.x9-act.b{color:#FFB3B3; background:rgba(255,107,107,.14); border:1px solid rgba(255,107,107,.4)} .x9-act.w{color:#F7D58A; background:rgba(240,196,90,.12); border:1px solid rgba(240,196,90,.35)} .x9-act.i{color:#BFF5E8; background:rgba(79,209,181,.1); border:1px solid rgba(79,209,181,.3)}
@media (max-width:700px){ .x9-th, .x9-tr{grid-template-columns:44px 1fr 80px} .x9-th span:nth-child(3), .x9-th span:nth-child(4), .x9-tr > span:nth-child(3), .x9-tr > span:nth-child(4){display:none} }
.x9-tops{display:flex; flex-direction:column; gap:10px} .x9-topr{display:grid; grid-template-columns:minmax(100px, 38%) 1fr 30px; gap:10px; align-items:center; font-size:13px; color:var(--dx-ink2)} .x9-topr b{text-align:right; color:var(--dx-ink)} .x9-topr .x9-mb{height:8px}
.x9-rings{width:190px; height:190px; flex:0 0 auto} .x9-rtrack{fill:none; stroke:rgba(199,203,184,.08); stroke-width:9} .x9-ringv{font:800 34px/1 'Plus Jakarta Sans', sans-serif; fill:#ECEFE2}
.x9-rl{display:flex; flex-direction:column; gap:8px; flex:1; min-width:160px} .x9-rl > div{display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; font-size:13px; color:var(--dx-ink2)} .x9-rl i{width:10px; height:10px; border-radius:50%} .x9-rl b{color:var(--dx-ink)}
.x9-hm{display:grid; grid-template-columns:96px repeat(12, 1fr); gap:4px; align-items:center}
.x9-hml{font-size:12px; color:var(--dx-ink2)}
.x9-hm i{height:26px; border-radius:5px; background:rgba(199,203,184,.06)} .x9-hm i.ok{background:rgba(79,209,181,.7)} .x9-hm i.md{background:rgba(240,196,90,.6)} .x9-hm i.bx{background:rgba(255,107,107,.62)}
/* previsão */
.x9-flowg{display:grid; grid-template-columns:150px 1fr 190px; gap:14px; align-items:center; min-height:260px}
@media (max-width:900px){ .x9-flowg{grid-template-columns:1fr} }
.x9-fls{display:flex; flex-direction:column; gap:14px} .x9-fls > div{display:flex; flex-direction:column} .x9-fls small{font-size:12px; color:var(--dx-ink3)} .x9-fls b{font-size:22px; color:var(--dx-ink)}
.x9-conew{position:relative; height:260px; min-width:0} .x9-cone{position:absolute; inset:0; width:100%; height:100%}
.x9-flr{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.x9-ring{color:#6FE7AA; transform:scale(1.6); margin:24px 0}
.x9-flow{background:radial-gradient(500px 260px at 60% 20%, rgba(47,208,138,.12), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%), #0E2A22 !important}
.x9-cov{font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:8px; background:rgba(3,20,11,.14)}
.x9-mg{width:100%; max-width:320px; margin:0 auto; display:block}
.x9-mgt{fill:none; stroke:rgba(199,203,184,.1); stroke-width:18; stroke-linecap:round}
.x9-mgv{fill:none; stroke:#2FD08A; stroke-width:18; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(47,208,138,.6))}
.x9-mgb{fill:none; stroke:rgba(111,231,170,.45); stroke-width:18; stroke-dasharray:4 4}
.x9-mgd{fill:#ECEFE2}
.x9-mgn{font:800 34px/1 'Plus Jakarta Sans', sans-serif; fill:#ECEFE2}
.x9-wfb.sol{fill:#2FD08A} .x9-wfb.list{fill:url(#x9hat); stroke:#6FE7AA} .x9-wfb.roxo{fill:#8E86F0} .x9-wfb.vaz{fill:rgba(199,203,184,.12); stroke:rgba(199,203,184,.3); stroke-dasharray:3 3}
.x9-qtag{fill:#0B1711; stroke:#D6E668} .x9-qtagt{font:800 10.5px/1 'Plus Jakarta Sans', sans-serif; fill:#D6E668}
.x9-lb{display:flex; flex-direction:column; gap:8px}
.x9-lbr{display:grid; grid-template-columns:18px 32px minmax(90px, 30%) 1fr 48px; gap:10px; align-items:center}
.x9-lbr .qp-av{width:32px; height:32px; font-size:12px; background:#2FD08A; color:#03140B}
.x9-lbp{font-weight:800; color:var(--dx-ink3); text-align:center}
.x9-lbn b{display:block; font-size:13.5px; color:var(--dx-ink)} .x9-lbn small{font-size:11px; color:var(--dx-ink3)}
.x9-lbt{position:relative; height:10px; border-radius:999px; background:rgba(199,203,184,.08)} .x9-lbt i{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, #128A59, #2FD08A)} .x9-lbt em{position:absolute; top:-5px; bottom:-5px; width:2px; background:#ECEFE2; opacity:.55}
.x9-lbv{font-size:14px; text-align:right; color:#F0C45A} .x9-lbv.ok{color:#6FE7AA} .x9-lbv.bad{color:#FF8A80}
.x9-real{fill:none; stroke:#2FD08A; stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.x9-proj{stroke:#2FD08A; stroke-width:2.4; stroke-dasharray:6 6}
.x9-ideal{stroke:rgba(178,166,240,.6); stroke-width:1.6}
.x9-dotv{fill:#2FD08A; stroke:#0B1711; stroke-width:3} .x9-dotp{fill:#0B1711; stroke:#2FD08A; stroke-width:2}
.x9-hero{align-content:start}
.x9-hero .x9-hspk{margin-top:auto} .x9-hero .x9-hspk svg{height:90px}
.x9-hbars{margin-top:auto; display:flex; flex-direction:column; gap:6px} .x9-hbars small{font-size:11px; opacity:.75}
.x9-hero .dx-mbars{height:90px}
.x9-fmr{display:grid; grid-template-columns:1fr auto; gap:3px 8px; font-size:13px; color:var(--dx-ink2)} .x9-fmr small{color:var(--dx-ink3)} .x9-fmr .x9-mb{grid-column:1/-1}
.x9-wf .x9-bx, .x9-trend .x9-bx{font-size:9px}
.x9-wf .x9-bv{font-size:10px}
.x9-metat.p{fill:#6FE7AA}
.x9-secn{font-size:11px; fill:var(--dx-ink2)}
/* ===== cx10: Meu quadro e limpeza ===== */
#pages .pg-head .sub{display:none}
.x10-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px}
.x10-seg{display:inline-flex; padding:3px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(199,203,184,.12)}
.x10-seg button{border:0; background:none; padding:8px 16px; border-radius:999px; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-2); cursor:pointer}
.x10-seg button[aria-pressed="true"]{background:#D6E668; color:#0F1F17}
.x10-clis{display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:1; min-width:0}
.x10-cli{border:1px solid rgba(199,203,184,.14); background:rgba(255,255,255,.03); color:var(--ink-2); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap}
.x10-cli.on{background:rgba(214,230,104,.16); border-color:#D6E668; color:#ECEFE2}
.x10-mais{width:auto !important; min-height:32px !important; padding:4px 10px !important; font-size:12.5px; border-radius:999px !important}
.x10-est{position:relative; border-radius:22px; padding:14px 16px 8px; margin-bottom:16px; background:radial-gradient(700px 200px at 50% 0%, rgba(214,230,104,.09), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.03), transparent), #0E1D16; border:1px solid rgba(199,203,184,.1)}
.x10-est.mini{padding:6px 12px 2px}
.x10-eh{display:flex; align-items:center; justify-content:space-between; gap:10px}
.x10-pills{display:flex; gap:6px; flex-wrap:wrap}
.x10-p{font-size:12px; color:var(--dx-ink3, #8F9C88); padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(199,203,184,.1)}
.x10-p b{color:#ECEFE2; font-size:13px; margin-right:2px}
.x10-p.w b{color:#F0C45A} .x10-p.b b{color:#FF7A6E}
.x10-trilho{width:100%; height:auto; display:block; overflow:visible}
.x10-trk{stroke:rgba(199,203,184,.12); stroke-width:10; stroke-linecap:round; fill:none}
.x10-trkf{stroke:url(#x10g); stroke-width:3; stroke-dasharray:10 8; fill:none}
@media (prefers-reduced-motion:no-preference){ .x10-trkf{animation:x10run 1s linear infinite} .x10-st.atr .x10-halo{animation:x10pulse 2s ease-in-out infinite} }
@keyframes x10run{to{stroke-dashoffset:-18}}
@keyframes x10pulse{50%{opacity:.25}}
.x10-dot{fill:#ECEFE2; filter:drop-shadow(0 0 4px rgba(214,230,104,.9))}
.x10-st{cursor:pointer; outline:none}
.x10-halo{fill:rgba(214,230,104,.08); stroke:rgba(214,230,104,.18)}
.x10-node{fill:#12241B; stroke:#D6E668; stroke-width:2.5; filter:drop-shadow(0 0 10px rgba(214,230,104,.35))}
.x10-st.vazio .x10-node{stroke:rgba(199,203,184,.3); filter:none} .x10-st.vazio .x10-halo{fill:transparent; stroke:transparent}
.x10-st.atr .x10-halo{fill:rgba(255,122,110,.1); stroke:rgba(255,122,110,.3)}
.x10-st.sel .x10-node{fill:#D6E668} .x10-st.sel .x10-n{fill:#0F1F17}
.x10-st:hover .x10-node, .x10-st:focus .x10-node{stroke-width:3.5}
.x10-n{font:800 18px/1 'Plus Jakarta Sans', sans-serif; fill:#ECEFE2}
.x10-l{font:700 12px/1 'Plus Jakarta Sans', sans-serif; fill:#C7CBB8}
.x10-meu{font:600 10.5px/1 'Plus Jakarta Sans', sans-serif; fill:#D6E668}
.x10-ab{fill:#FF7A6E} .x10-abt{font:800 10px/1 'Plus Jakarta Sans', sans-serif; fill:#2B0A07}
.x10-cols{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px}
.x10-cols.uma{grid-auto-columns:minmax(250px, 420px)}
.x10-col{display:flex; flex-direction:column; gap:8px; min-width:0}
.x10-colh{display:flex; justify-content:space-between; align-items:center; padding:2px 4px; font-size:13px; color:var(--ink-2)}
.x10-colh span{font-weight:800; color:var(--ink)}
.x10-colb{display:flex; flex-direction:column; gap:8px}
.x10-card{display:flex; flex-direction:column; gap:6px; text-align:left; padding:12px 13px; border-radius:14px; border:1px solid rgba(199,203,184,.1); background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), #12241B; color:var(--ink); font:inherit; cursor:pointer; transition:transform .15s, border-color .15s; box-shadow:inset 3px 0 0 rgba(199,203,184,.18)}
.x10-card:hover{transform:translateY(-2px); border-color:rgba(214,230,104,.35)}
.x10-card.meu{box-shadow:inset 3px 0 0 #D6E668}
.x10-card.hoje{box-shadow:inset 3px 0 0 #F0C45A}
.x10-card.atr{box-shadow:inset 3px 0 0 #FF7A6E; border-color:rgba(255,122,110,.3)}
.x10-card b{font-size:14px; line-height:1.3}
.x10-cm, .x10-ce{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--ink-3)}
.x10-cc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.x10-pz{font-weight:800; white-space:nowrap; color:var(--ink-2)}
.x10-card.atr .x10-pz{color:#FF7A6E} .x10-card.hoje .x10-pz{color:#F0C45A}
.qp-av.sm{width:22px; height:22px; font-size:9px}
.x10-th{display:flex; align-items:center; gap:10px; margin:6px 0 10px}
.x10-th h3{font-size:15px; margin:0}
.x10-vz{display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px; border-radius:16px; border:1px dashed rgba(199,203,184,.18); color:var(--ink-2); margin-bottom:20px}
.x10-vz span{color:#D6E668} .x10-vz.s{flex-direction:row; justify-content:center}
@media (max-width:700px){ .x10-l{font-size:15px} .x10-n{font-size:22px} .x10-cols{grid-auto-columns:minmax(230px, 85%)} }
.x10-card.fila{opacity:.62; box-shadow:inset 3px 0 0 rgba(199,203,184,.25)}
.x10-fila{font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.x10-maist{border:1px dashed rgba(199,203,184,.2); background:none; color:var(--ink-2); border-radius:12px; padding:8px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
@media (max-width:700px){ .x10-est{overflow-x:auto} .x10-trilho{min-width:640px} .x10-pills{display:none} .x10-clis{flex-wrap:nowrap; overflow-x:auto} }
/* ===== cx11: kanban padrão (visual da Carteira), metas, prioridade máxima, cargos ===== */
.x11-kan{margin:4px 0 18px}
.x11-kan .vw-col{min-height:140px}
.x11-card{gap:9px !important}
.x11-card .x5-ct b{font-size:14px}
.x11-card .x5-cmi b{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.x11-card .x11-sub{font-size:12px; color:var(--ink-3); line-height:1.35; overflow-wrap:anywhere}
.x11-card .x5-cu[data-s="bad"]{background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb, var(--bad-f) 45%, transparent)}
.x11-card.fila{opacity:.62}
.x11-card.meu{box-shadow:inset 3px 0 0 var(--dx-lima, #D6E668)}
.x11-card.kan-arr{cursor:grab}
.x11-card.arrastando{opacity:.45}
.x11-kvz{font-size:12.5px; color:var(--ink-3); text-align:center; padding:12px 4px; border:1px dashed var(--line-2); border-radius:10px}
.x11-mais{align-self:center; background:none; border:0; color:var(--ink-3); font-weight:700; font-size:12.5px; cursor:pointer; padding:4px 8px}
.x11-mais:hover{color:var(--ink)}
.x11-fns button b{margin-left:6px; font-weight:800; opacity:.8}
.x11-n{font-size:12.5px; color:var(--ink-3)}

/* prioridade máxima */
.x11-quente{border-radius:18px; padding:14px 16px; margin:0 0 14px; background:linear-gradient(135deg, color-mix(in srgb, #FF6B5A 22%, transparent), color-mix(in srgb, #FF6B5A 6%, transparent)); border:1px solid color-mix(in srgb, #FF6B5A 55%, transparent)}
.x11-qh{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:10px}
.x11-qh small{color:var(--ink-3); font-size:12.5px}
.x11-qb{font-size:11px; font-weight:800; letter-spacing:.08em; padding:4px 10px; border-radius:999px; background:#FF6B5A; color:#1E0703; animation:x11pulso 1.8s ease-in-out infinite}
@keyframes x11pulso{0%,100%{box-shadow:0 0 0 0 rgba(255,107,90,.55)} 50%{box-shadow:0 0 0 7px rgba(255,107,90,0)}}
@media (prefers-reduced-motion: reduce){ .x11-qb{animation:none} }
.x11-ql{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:8px}
.x11-qi{display:grid; gap:3px; text-align:left; padding:10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer}
.x11-qi.meu{border-color:#FF6B5A}
.x11-qi b{font-size:14px; line-height:1.3}
.x11-qi small{font-size:12px; color:var(--ink-3)}
.x11-qt{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#FF8F84}

/* minha meta */
.x11-meta{display:grid; gap:10px; margin:0 0 14px}
.x11-mm{border-radius:16px; padding:12px 14px; border:1px solid var(--line); background:var(--surface)}
.x11-mmh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.x11-mmh b{font-size:14px}
.x11-mmc{display:flex; flex-wrap:wrap; gap:6px}
.x11-mmi{display:inline-flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--sf) 55%, transparent); background:color-mix(in srgb, var(--sf) 12%, transparent); color:var(--ink); font-size:12.5px; cursor:pointer}
.x11-mmi b{color:var(--s); font-weight:800}
.x11-mmi small{color:var(--ink-3); font-size:11.5px}
.x11-selo{display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; background:color-mix(in srgb, var(--sf) 16%, transparent); color:var(--s); border:1px solid color-mix(in srgb, var(--sf) 45%, transparent)}

/* tela Metas de produção */
.x11-lseg{margin:0 0 12px; flex-wrap:wrap}
.x11-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:10px; margin:0 0 14px}
.x11-kpi{display:grid; gap:2px; text-align:left; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:inset 0 3px 0 var(--sf)}
.x11-kpi small{font-size:12.5px; color:var(--ink-3); font-weight:700}
.x11-kpi b{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--s)}
.x11-kpi span{font-size:12.5px; color:var(--ink-2)}
button.x11-kpi{cursor:pointer}
.x11-tab{display:grid; gap:4px; border-radius:16px; border:1px solid var(--line); background:var(--surface); padding:6px; overflow-x:auto}
.x11-tr{display:grid; grid-template-columns:minmax(150px, 1.3fr) repeat(var(--n, 3), minmax(120px, 1fr)) minmax(170px, 1.4fr); gap:10px; align-items:center; padding:8px 10px; border-radius:10px; min-width:640px}
.x11-tr:not(.x11-th):hover{background:var(--surface-2)}
.x11-th{font-size:12px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.x11-tc{text-align:left; font-weight:800; color:var(--ink); background:none; border:0; padding:0; cursor:pointer}
.x11-td{display:grid; gap:2px; justify-items:start}
.x11-td small{font-size:11.5px; color:var(--ink-3)}
.x11-rec{display:grid; gap:1px; text-align:left; background:none; border:0; padding:0; color:var(--ink); cursor:pointer; min-width:0}
.x11-rec b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.x11-rec small{font-size:11.5px; color:var(--ink-3)}
.x11-ok{color:var(--ink-3)}

/* área da direção */
.x11-av{display:grid; gap:6px; margin:0 0 16px}
.x11-avi{display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.x11-avi > i{width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:0 0 auto}
.x11-avi.novo > i{background:var(--dx-lima, #D6E668)}
.x11-avi .grow{display:grid; gap:1px; min-width:0; flex:1}
.x11-avi b{font-size:13.5px}
.x11-avi small{font-size:12px; color:var(--ink-3)}
.x11-avt{flex:0 0 auto}
.x11-lp{display:grid; gap:3px; border-radius:16px; border:1px solid var(--line); background:var(--surface); padding:6px; margin:0 0 16px; overflow-x:auto}
.x11-lpr{display:grid; grid-template-columns:minmax(200px, 2fr) repeat(4, minmax(70px, 1fr)); gap:8px; align-items:center; padding:7px 10px; border-radius:10px; background:none; border:0; color:var(--ink); text-align:left; min-width:520px}
button.x11-lpr{cursor:pointer}
button.x11-lpr:hover{background:var(--surface-2)}
.x11-lph{font-size:12px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.x11-lpr > b{font-size:16px; font-variant-numeric:tabular-nums}
.x11-lpr > b[data-s="bad"]{color:var(--bad)} .x11-lpr > b[data-s="warn"]{color:var(--warn)} .x11-lpr > b[data-s="ok"]{color:var(--ink-3)}
.x11-lpn{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; min-width:0}
.x11-lpn .qp-av{grid-row:span 2}
.x11-lpn b{font-size:13.5px}
.x11-lpn small{font-size:11.5px; color:var(--ink-3)}

/* cinegrafistas */
.x11-cine{display:grid; gap:16px; max-width:900px}
.x11-ola small{color:var(--ink-3); font-size:13px}
.x11-ola h2{font-size:30px; font-weight:800; letter-spacing:-.02em}
.x11-atalhos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:12px}
.x11-atalho{display:grid; gap:6px; justify-items:start; text-align:left; padding:22px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:transform .15s ease, border-color .15s ease}
.x11-atalho:hover{transform:translateY(-2px); border-color:var(--dx-lima, #D6E668)}
.x11-atalho > span{display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:color-mix(in srgb, var(--dx-lima, #D6E668) 18%, transparent); color:var(--dx-lima, #D6E668)}
.x11-atalho b{font-size:20px; font-weight:800}
.x11-atalho small{font-size:13px; color:var(--ink-3)}
.x11-glist{display:grid; gap:6px}
.x11-glist h3{font-size:15px; margin-bottom:4px}
.x11-grow{display:flex; align-items:center; gap:12px; text-align:left; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.x11-gd{display:grid; justify-items:center; min-width:44px; padding:4px; border-radius:10px; background:var(--surface-2)}
.x11-gd b{font-size:18px; line-height:1}
.x11-gd small{font-size:11px; text-transform:uppercase; color:var(--ink-3)}
.x11-grow .grow{display:grid; gap:1px}
.x11-grow small{font-size:12px; color:var(--ink-3)}
.x11-lk{margin:0 0 12px}

/* Quadro de cada um: colunas com o mesmo visual do kanban */
.qp6 .qp-cols{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 290px); gap:12px; overflow-x:auto; padding:2px 2px 12px; align-items:start}
@media (max-width: 640px){ .qp6 .qp-cols, .x11-kan{grid-auto-columns:minmax(240px, 82vw)} }
.x11-mmx{display:inline-flex; align-items:center; padding:6px 10px; font-size:12.5px; color:var(--ink-3)}
.x11-csel{max-width:280px}
/* ===== cx12: Métricas e Desempenho ===== */
.mt .mt-top{margin-bottom:10px}
.mt-fil{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px}
.mt-sel{width:auto; min-height:38px; padding:6px 10px; font-size:13.5px; max-width:220px}
.mt-tabs{display:flex; gap:4px; overflow-x:auto; padding:4px; margin:0 0 14px; border-radius:14px; background:rgba(199,203,184,.06); border:1px solid rgba(199,203,184,.1); scrollbar-width:thin}
.mt-tabs button{flex:0 0 auto; padding:8px 14px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--ink-2); white-space:nowrap}
.mt-tabs button[aria-selected="true"]{background:#D6E668; color:#1B2414}
.mt-grid > .mt-s3{grid-column:span 3} .mt-grid > .mt-s4{grid-column:span 4} .mt-grid > .mt-s5{grid-column:span 5} .mt-grid > .mt-s6{grid-column:span 6} .mt-grid > .mt-s7{grid-column:span 7} .mt-grid > .mt-s8{grid-column:span 8} .mt-grid > .mt-s12{grid-column:span 12}
@media (max-width:1180px){ .mt-grid > .mt-s4, .mt-grid > .mt-s5, .mt-grid > .mt-s6, .mt-grid > .mt-s7, .mt-grid > .mt-s8{grid-column:span 12} .mt-grid > .mt-s3{grid-column:span 6} }
@media (max-width:640px){ .mt-grid > *{grid-column:span 12 !important} .mt-sel{max-width:100%; flex:1 1 140px} }
.mt-c{min-width:0}
.mt-c.mt-nopad{padding:0; background:none !important; border:0 !important; box-shadow:none !important}
.mt-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap:10px}
.mt-kpis.k6{grid-template-columns:repeat(auto-fit, minmax(min(160px, 100%), 1fr))}
.mt-kpis.k1{grid-template-columns:1fr}
.mt-kpi{display:grid; gap:3px; align-content:start; padding:14px 16px; border-radius:18px; background:rgba(199,203,184,.06); border:1px solid rgba(199,203,184,.12); min-width:0; position:relative; overflow:hidden}
.mt-kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--k, transparent)}
.mt-kpi[data-s="ok"]{--k:#6FCF8E} .mt-kpi[data-s="warn"]{--k:#F0C45A} .mt-kpi[data-s="bad"]{--k:#FF7A6E}
.mt-kpi small{font-size:12.5px; font-weight:700; color:var(--ink-3)}
.mt-kv{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.mt-kv b{font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.mt-kpi[data-s="bad"] .mt-kv b{color:#FF8F84} .mt-kpi[data-s="warn"] .mt-kv b{color:#F0C45A}
.mt-kpi > span{font-size:12px; color:var(--ink-3)}
.mt-kpi .dx-spark{width:100%; height:34px; margin-top:4px}
.mt-lima{background:#D6E668 !important; color:#1B2414 !important; border-color:#D6E668 !important}
.mt-efi{display:grid; justify-items:center; text-align:center; gap:4px}
.mt-efi small{font-weight:800; font-size:13px; opacity:.75}
.mt-efi b{font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1}
.mt-efi span{font-size:12.5px; opacity:.8}
.mt-arco{width:100%; max-width:230px; height:auto}
.mt-gw{display:grid; justify-items:center; text-align:center; gap:2px}
.mt-gw b{font-size:34px; font-weight:800; letter-spacing:-.03em; margin-top:-26px}
.mt-gw small{font-size:12.5px; color:var(--ink-3)}
.mt-gw .dx-gauge{width:100%; max-width:240px}
.mt-gw .dx-gauge + b{margin-top:-34px}
.mt-tudo{color:var(--ink-3); font-size:13.5px; padding:6px 2px}
.mt-at{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap:8px}
.mt-ati{display:flex; gap:10px; align-items:flex-start; text-align:left; padding:10px 12px; border-radius:14px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12); color:var(--ink)}
button.mt-ati{cursor:pointer} button.mt-ati:hover{border-color:rgba(214,230,104,.4)}
.mt-ati > i{flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:6px; background:var(--c, #C7CBB8)}
.mt-ati[data-s="bad"] > i{--c:#FF7A6E} .mt-ati[data-s="warn"] > i{--c:#F0C45A}
.mt-ati span{display:grid; gap:2px} .mt-ati b{font-size:13.5px} .mt-ati small{font-size:12px; color:var(--ink-3)}
/* tabela de pessoas */
.mt-tab{display:grid; gap:3px; overflow-x:auto; padding:2px}
.mt-tr{display:grid; grid-template-columns:minmax(190px, 2fr) 96px repeat(7, minmax(70px, 1fr)); gap:8px; align-items:center; padding:8px 10px; border-radius:12px; text-align:left; color:var(--ink); min-width:860px; background:none; border:1px solid transparent}
button.mt-tr{cursor:pointer} button.mt-tr:hover{background:rgba(199,203,184,.06)}
.mt-tr[data-s="bad"]:not(.mt-th){background:rgba(255,122,110,.10); border-color:rgba(255,122,110,.35)}
.mt-tr[data-s="warn"]:not(.mt-th){background:rgba(240,196,90,.05)}
.mt-th{font-size:11.5px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.mt-tr > b{font-size:15px; font-variant-numeric:tabular-nums}
.mt-tr > b[data-s="bad"]{color:#FF8F84} .mt-tr > b[data-s="warn"]{color:#F0C45A} .mt-tr > b[data-s="ok"]{color:#6FCF8E}
.mt-pn{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; min-width:0}
.mt-pn .qp-av{grid-row:span 2} .mt-pn b{font-size:13.5px} .mt-pn small{font-size:11.5px; color:var(--ink-3)}
.mt-nv{display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; background:rgba(199,203,184,.1); color:var(--ink-2)}
.mt-nv[data-s="bad"]{background:#FF7A6E; color:#2B0A07} .mt-nv[data-s="warn"]{background:rgba(240,196,90,.2); color:#F0C45A} .mt-nv[data-s="ok"]{background:rgba(111,207,142,.16); color:#6FCF8E}
.mt-nv.big{font-size:14px; padding:6px 14px}
.mt-te{grid-template-columns:minmax(180px, 2fr) 80px repeat(3, minmax(130px, 1fr)) 110px; min-width:760px}
.mt-legn{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:12px; color:var(--ink-3)}
.mt-legn span{display:inline-flex; align-items:center; gap:6px}
.mt-legn i{width:10px; height:10px; border-radius:50%; background:#C7CBB8}
.mt-legn [data-s="bad"] i{background:#FF7A6E} .mt-legn [data-s="warn"] i{background:#F0C45A} .mt-legn [data-s="ok"] i{background:#6FCF8E}
.mt-legn b{color:var(--ink-2)}
/* individual */
.mt-ih{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:18px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12)}
.mt-ih .grow{display:grid; gap:1px; flex:1; min-width:160px} .mt-ih .grow b{font-size:18px} .mt-ih .grow small{color:var(--ink-3); font-size:12.5px}
.mt-por{font-size:12.5px; color:var(--ink-3); flex-basis:100%}
.mt-proj{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap:10px}
.mt-heat{display:flex; gap:3px; overflow-x:auto; padding-bottom:4px}
.mt-hd, .mt-hc{display:grid; grid-template-rows:repeat(7, 16px); gap:3px}
.mt-hd small{font-size:10px; color:var(--ink-3); line-height:16px}
.mt-hc i{width:16px; height:16px; border-radius:4px; display:block}
.mt-hc i.fora{background:transparent}
.mt-hist{display:grid; gap:4px}
.mt-hi{display:grid; grid-template-columns:10px 110px minmax(0, 1fr) auto; gap:10px; align-items:center; text-align:left; padding:8px 10px; border-radius:10px; color:var(--ink); background:none; border:0; cursor:pointer}
.mt-hi:hover{background:rgba(199,203,184,.06)}
.mt-hi > i{width:8px; height:8px; border-radius:50%; background:#6FCF8E}
.mt-hi[data-s="bad"] > i{background:#FF7A6E} .mt-hi[data-s="warn"] > i{background:#F0C45A}
.mt-hi small{font-size:12px; color:var(--ink-3)} .mt-hi b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mt-hi span{font-size:12px; color:var(--ink-3); text-align:right}
@media (max-width:640px){ .mt-hi{grid-template-columns:10px 1fr} .mt-hi small, .mt-hi span{grid-column:2; text-align:left} }
/* qualidade, prazos, gargalos, capacidade */
.mt-funil{display:grid; gap:10px}
.mt-fr{display:grid; grid-template-columns:150px 1fr auto; gap:10px; align-items:center; font-size:13px}
.mt-fb{height:14px; border-radius:999px; background:rgba(199,203,184,.08); overflow:hidden} .mt-fb i{display:block; height:100%; border-radius:999px}
.mt-fr b{font-size:13px; white-space:nowrap}
.mt-hm{display:grid; grid-template-columns:110px repeat(var(--c), minmax(60px, 1fr)); gap:3px; overflow-x:auto; font-size:12px}
.mt-hm small{font-size:11px; color:var(--ink-3); line-height:1.2; padding:2px}
.mt-hm b{font-size:12.5px; align-self:center}
.mt-hm i{display:grid; place-items:center; min-height:30px; border-radius:6px; font-style:normal; font-weight:800}
.mt-garg{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap:8px}
.mt-gi{display:grid; gap:2px; padding:12px; border-radius:14px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12)}
.mt-gi.on{border-color:#F0C45A; box-shadow:0 0 0 1px #F0C45A inset}
.mt-gi[data-s="bad"] b{color:#FF8F84}
.mt-gi small{font-size:12px; color:var(--ink-3); font-weight:700} .mt-gi b{font-size:26px; font-weight:800} .mt-gi span{font-size:11.5px; color:var(--ink-3)}
.mt-gbig{display:grid; gap:4px} .mt-gbig b{font-size:26px; color:#F0C45A} .mt-gbig span{color:var(--ink-2); font-size:13.5px}
.mt-cd{display:grid; gap:10px}
.mt-cdr{display:grid; grid-template-columns:100px 1fr; gap:4px 10px; align-items:center}
.mt-cdr span{grid-column:2; font-size:12px; color:var(--ink-3)}
.mt-cdr[data-s="bad"] span{color:#FF8F84}
.mt-cdb{display:grid; gap:3px}
.mt-cdb i, .mt-leg i.d, .mt-leg i.c{display:block; height:8px; border-radius:999px}
.mt-cdb i.d, .mt-leg i.d{background:#FF7A6E} .mt-cdb i.c, .mt-leg i.c{background:#6FCF8E}
.mt-leg{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12px; color:var(--ink-3)}
.mt-leg span{display:inline-flex; align-items:center; gap:6px}
.mt-leg i{display:inline-block; width:12px; height:4px; border-radius:2px}
.mt-sim{display:flex; flex-wrap:wrap; gap:14px 24px; margin:0 0 10px}
.mt-sim label{display:grid; gap:4px; min-width:220px; flex:1; font-size:13px; color:var(--ink-2)}
.mt-sim input[type=range]{accent-color:#D6E668}
.mt-disp{max-height:300px}
.mt-ptl{font-size:11px; fill:var(--ink-2)}
/* estoque */
.mt-est{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap:8px}
.mt-ec{display:grid; justify-items:center; gap:0; padding:10px 8px; border-radius:16px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12); color:var(--ink); cursor:pointer; text-align:center}
.mt-ec.on{border-color:#D6E668}
.mt-ec .mt-arco{max-width:120px; margin-bottom:-18px}
.mt-ec b{font-size:20px; font-weight:800} .mt-ec[data-s="bad"] b{color:#FF8F84} .mt-ec[data-s="ok"] b{color:#6FCF8E}
.mt-ec small{font-size:11.5px; color:var(--ink-3); line-height:1.25}
.mt-cs{display:grid; gap:10px}
.mt-csl{display:grid; gap:4px; justify-items:start; padding:10px 12px; border-radius:14px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12)}
.mt-csl small{font-size:12px; color:var(--ink-3)}
/* evolução e relatórios */
.mt-curvas{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap:8px}
.mt-cv{display:grid; gap:4px; text-align:left; padding:10px 12px; border-radius:14px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12); color:var(--ink); cursor:pointer}
.mt-cv .dx-spark{width:100%; height:34px}
.mt-cv span{font-size:12px; color:var(--ink-3)} .mt-cv span[data-s="bad"]{color:#FF8F84} .mt-cv span[data-s="warn"]{color:#F0C45A} .mt-cv span[data-s="ok"]{color:#6FCF8E}
.mt-pre{white-space:pre-wrap; font:13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding:14px; border-radius:14px; background:rgba(0,0,0,.25); border:1px solid rgba(199,203,184,.12); max-height:420px; overflow:auto; margin:0 0 10px}
.mt-bts{display:flex; flex-wrap:wrap; gap:8px}
.mt-def{margin:0; padding-left:18px; display:grid; gap:6px; font-size:13px; color:var(--ink-2)}

/* ===== cx12: Meu quadro em blocos ===== */
.x12-bl{margin:0 0 6px}
.x12-bl.org{border:1px dashed rgba(199,203,184,.3); border-radius:18px; padding:10px 12px; margin:0 0 12px}
.x12-bl.off{opacity:.55}
.x12-blh{display:flex; align-items:center; gap:6px; margin:0 0 8px}
.x12-blh b{font-size:14px}
.x12-up svg{transform:rotate(180deg)}
.x12-orgh{font-size:13px; color:var(--ink-3); margin:0 0 10px}
.x12-vt button{display:inline-flex; align-items:center; gap:6px}
.x12-metas{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:10px; margin:0 0 16px}
.x12-meta{display:grid; gap:10px; text-align:left; padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; box-shadow:inset 0 3px 0 var(--sf)}
.x12-mh{display:grid; gap:1px}
.x12-mh small{font-size:12.5px; font-weight:700; color:var(--ink-3)}
.x12-mh b{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--s)}
.x12-mh span{font-size:12.5px; color:var(--ink-2)}
.x12-mn, .x12-vid{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.x12-mn span, .x12-vid span{display:grid; gap:0; padding:8px; border-radius:12px; background:var(--surface-2)}
.x12-mn b, .x12-vid b{font-size:18px; font-weight:800}
.x12-mn small, .x12-vid small{font-size:11px; color:var(--ink-3); line-height:1.25}
.x12-sp{font-size:12px; color:var(--warn)}
.x12-dk{margin:0 0 16px}
.mt-efi > div{display:grid; justify-items:center; gap:2px}
.mt-lima{display:grid; align-content:center}
.mt-kpis.k6{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width:640px){ .mt-kpis.k6{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.x12-meta{align-content:start}
/* ===== cx13: esteira nova, roteiros, métricas avançadas e econômica ===== */
.x13-tri{width:100%; height:auto; display:block; overflow:visible}
.x13-lin{stroke:rgba(214,230,104,.18); stroke-width:6; fill:none; stroke-linecap:round}
.x13-linf{stroke:rgba(214,230,104,.55); stroke-width:2; fill:none}
.x13-ok{stroke:#D6E668; stroke-width:2.4; fill:none}
.x13-ret{stroke:#D6E668; stroke-width:2.4; fill:none; stroke-linejoin:round}
.x13-pill{fill:rgba(214,230,104,.12); stroke:#D6E668; stroke-width:1.2}
.x13-pt{fill:#D6E668; font-size:12px; font-weight:700}
.x13-rt{fill:var(--ink-2); font-size:12.5px; font-weight:600}
.x13-n{fill:var(--ink); font-size:24px; font-weight:800}
.x13-l{fill:var(--ink); font-size:17px; font-weight:800}
.x13-s{fill:var(--ink-3); font-size:13px}
.x13-st.aj .x10-node{stroke:#F0C45A}
.x10-est .x13-tri{margin-top:6px}
@media (max-width:760px){ .x10-est:has(.x13-tri){overflow-x:auto} .x13-tri{min-width:820px} }
.x13-cw{display:grid; gap:6px}
.x13-ac{display:flex; flex-wrap:wrap; gap:6px}
.x13-ac.mini .btn{min-height:30px; padding:0 10px; font-size:12.5px}
.x13-acbig{padding:12px 14px; margin:0 0 12px; border-radius:16px; border:1px solid rgba(214,230,104,.35); background:rgba(214,230,104,.06)}
.x13-plan .x13-g{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:10px 14px}
.x13-plan .x13-g small{display:block; font-size:12px; color:var(--ink-3); font-weight:700; margin-bottom:4px}
.x13-sel{min-height:38px; padding:6px 10px; font-size:14px}
.x13-falta{color:var(--warn); font-size:12.5px; font-weight:700}
.x13-okp{color:var(--ok); font-size:12.5px; font-weight:700; display:inline-flex; gap:4px; align-items:center}
/* roteiros */
.x13-abas{margin:0 0 10px; flex-wrap:wrap}
.x13-abas button{display:inline-flex; align-items:center; gap:6px}
.x13-fil{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.x13-mesa{display:grid; gap:3px; overflow-x:auto; border-radius:16px; border:1px solid var(--line); background:var(--surface); padding:6px}
.x13-mr{display:grid; grid-template-columns:34px minmax(130px, 1fr) minmax(200px, 1.6fr) 44px 70px minmax(110px, 1fr) minmax(110px, 1fr) 100px minmax(110px, .9fr) 170px 150px; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; min-width:1240px; font-size:13px}
.x13-mr[data-s="ok"]:not(.x13-mh){background:rgba(111,207,142,.08)} .x13-mr[data-s="warn"]:not(.x13-mh){background:rgba(240,196,90,.08)} .x13-mr[data-s="bad"]:not(.x13-mh){background:rgba(255,122,110,.08)}
.x13-mh{font-size:11.5px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.x13-num{font-size:15px; color:var(--ink-3)}
.x13-mc{display:grid} .x13-mc small{font-size:11.5px; color:var(--ink-3)}
.x13-mt{display:grid; text-align:left; background:none; border:0; padding:0; color:var(--ink); cursor:pointer} .x13-mt b{font-size:13.5px} .x13-mt small{font-size:11.5px; color:var(--ink-3)}
.x13-mt:hover b{text-decoration:underline}
.x13-urg{color:#FF8F84 !important; font-weight:800}
.x13-nd{color:var(--ink-3)}
.x13-st{min-height:34px; font-size:13px}
.x13-st[data-s="ok"]{border-color:var(--ok-f)} .x13-st[data-s="warn"]{border-color:var(--warn-f)} .x13-st[data-s="bad"]{border-color:var(--bad-f)}
.x13-obs.tem{border-color:#D6E668; color:#D6E668}
.x13-rot{white-space:pre-wrap; font-size:16px; line-height:1.6; padding:14px; border-radius:14px; background:var(--surface-2); max-height:55vh; overflow:auto}
.x13-obsl{display:grid; gap:6px; padding:12px; border-radius:12px; border:1px solid var(--line)} .x13-obsl small{color:var(--ink-3)}
.x13-docs{border-radius:16px; border:1px solid var(--line); background:var(--surface); padding:12px 14px; margin:0 0 12px}
.x13-dh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; flex-wrap:wrap}
.x13-dl{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:8px}
.x13-di{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line)}
.x13-di[data-s="ok"]{border-color:color-mix(in srgb, var(--ok-f) 50%, var(--line))} .x13-di[data-s="ok"] > span:first-child{color:var(--ok)}
.x13-di .grow{display:grid; gap:1px; flex:1; min-width:0} .x13-di b{font-size:13px} .x13-di small{font-size:11.5px; color:var(--ink-3)}
.x13-lemb{font-size:13px; color:var(--ink-2); margin:0 0 12px; padding:10px 12px; border-radius:12px; border:1px dashed var(--line-2)}
/* lote de roteiros */
.x13-lote{position:fixed; inset:0; z-index:900; display:grid; grid-template-rows:auto 1fr; background:var(--bg)}
html.cx-dark .x13-lote{background:#0B0F0D}
.x13-lt{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--line)}
.x13-lt > b{font-size:18px; margin-right:6px}
.x13-lt .inp{width:auto; min-width:180px; max-width:260px}
.x13-lb{overflow:auto; padding:18px; display:grid; align-content:start; gap:14px; justify-items:center}
.x13-lcs{display:grid; gap:14px; width:min(980px, 100%)}
.x13-cc{display:grid; gap:10px; padding:16px; border-radius:20px; border:1px solid var(--line); background:var(--surface)}
.x13-ch{display:flex; align-items:center; gap:8px} .x13-ch b{font-size:15px}
.x13-leg{display:grid; gap:6px}
.x13-g3{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:10px}
.x13-cls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; border-radius:12px; background:var(--surface-2)}
.x13-cls small{font-size:12px; color:var(--ink-3); font-weight:700; width:100%}
.x13-cls .inp{width:auto; min-width:150px; flex:1 1 150px}
.x13-cls .fld{flex:1 1 180px} .x13-cls .fld > span{display:none}
.x13-cont{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; color:var(--ink-3)}
.x13-ck[data-s="ok"]{color:var(--ok); font-weight:700}
.x13-mais{width:min(980px, 100%)}
/* métricas avançadas */
.mt-flow{width:100%; height:auto}
.mt-fl{fill:var(--ink-2); font-size:12px; font-weight:700}
.mt-fn{fill:var(--ink-3); font-size:11px}
.mt-dn{fill:var(--ink); font-size:15px; font-weight:800}
.mt-big{font-size:40px; font-weight:800; letter-spacing:-.03em; margin:4px 0 8px}
.mt-portas{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap:10px}
.mt-porta{display:grid; justify-items:center; gap:6px; text-align:center; padding:14px; border-radius:16px; background:rgba(199,203,184,.05); border:1px solid rgba(199,203,184,.12)}
.mt-porta small{font-weight:800; font-size:13px; color:var(--ink-2)} .mt-porta span{font-size:12px; color:var(--ink-3)}
.mt-porta[data-s="ok"] .dx-ring{color:#6FCF8E} .mt-porta[data-s="warn"] .dx-ring{color:#F0C45A} .mt-porta[data-s="bad"] .dx-ring{color:#FF7A6E} .mt-porta[data-s="idle"] .dx-ring{color:#C7CBB8}
.mt-dom{display:grid; gap:8px} .mt-dom > b{font-size:16px}
.mt-dom dl{margin:0; display:grid; gap:6px} .mt-dom dl div{display:grid; grid-template-columns:110px 1fr; gap:8px; font-size:13px} .mt-dom dt{color:var(--ink-3)} .mt-dom dd{margin:0}
.mt-hi.on{background:rgba(214,230,104,.08)}
.mt-pc{grid-template-columns:minmax(160px, 2fr) repeat(4, minmax(70px, 1fr)); min-width:520px}
.mt-cw{grid-template-columns:minmax(120px, 1.4fr) minmax(110px, 1fr) repeat(4, minmax(70px, 1fr)); min-width:600px}
.mt-rg{grid-template-columns:minmax(180px, 2fr) repeat(3, minmax(110px, 1fr)); min-width:620px}
/* econômica */
.fin-priv{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(214,230,104,.12); color:#D6E668}
.fin-aviso{font-size:13px; padding:10px 14px; border-radius:12px; margin:0 0 12px; border:1px solid rgba(127,178,229,.4); background:rgba(127,178,229,.08); color:var(--ink-2)}
.fin-aviso.w{border-color:rgba(240,196,90,.4); background:rgba(240,196,90,.08)}
.fin-rk{grid-template-columns:minmax(130px, 1.4fr) minmax(90px, 1fr) minmax(100px, 1fr) 70px minmax(90px, 1fr) minmax(100px, 1fr) minmax(130px, 1.2fr) 70px; min-width:900px}
.fin-th{background:none; border:0; padding:0; text-align:left; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer}
.fin-th.on{color:#D6E668}
.fin-hd{display:grid; gap:1px; padding:0 10px; border-left:1px solid rgba(199,203,184,.14)} .fin-hd small{font-size:11.5px; color:var(--ink-3)} .fin-hd b{font-size:15px}
.fin-fm{grid-template-columns:minmax(150px, 2fr) repeat(4, minmax(80px, 1fr)); min-width:560px}
.fin-cl .mt-ec small + small{font-size:11px; opacity:.85}
.fin-sim label{min-width:200px}
.fin-sm{grid-template-columns:minmax(200px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr); min-width:460px}
.fin-sm.z{background:rgba(199,203,184,.04)}
.fin-simv{color:#D6E668}
.fin-cd{grid-template-columns:minmax(150px, 2fr) repeat(4, minmax(90px, 1fr)); min-width:600px}
.fin-pt{grid-template-columns:minmax(140px, 1.4fr) minmax(170px, 1.6fr) 90px 110px; min-width:520px}
.fin-mt{grid-template-columns:minmax(130px, 1fr) 90px minmax(220px, 2.4fr) 110px; min-width:560px}
.fin-mt small{font-size:11.5px; color:var(--ink-3)}
.fin-cx{grid-template-columns:1fr auto; display:grid; align-items:center}