/* Layout: sidebar escura fixa (mesma árvore de menus) + barra superior + conteúdo em cartões.
   Cor: azul petróleo do novo login como cor de marca, laranja do logótipo só no detalhe "app".
   Tipo: Bricolage Grotesque nos títulos e números, Figtree no resto. */
:root{
  --bg:#f1f4f8; --surface:#ffffff; --surface-2:#f6f8fb; --line:#e0e6ee; --line-2:#edf1f6;
  --ink:#192531; --muted:#63768a; --faint:#8a9aab;
  --brand:#0f619f; --brand-ink:#ffffff; --brand-tint:#e4f0fa; --brand-text:#0c5388;
  --accent:#e8803a;
  --side:#13202c; --side-ink:#a9b8c8; --side-strong:#ffffff; --side-active:rgba(110,180,235,.16); --side-line:rgba(255,255,255,.07);
  --ok:#17875a; --ok-tint:#e0f4ea; --warn:#a96a0c; --warn-tint:#fbefd6; --bad:#bf3b34; --bad-tint:#fbe5e3;
  --maint:#c2185b; --maint-tint:#fbe4ee; --batt:#6040b5; --batt-tint:#ece6fa; --off:#b07a00;
  --b1:#ffe4b8; --b2:#c9e4bf; --b3:#f7bcbc; --b4:#dad4d9; --b5:#f0dbd2; --b6:#c9d4f3; --b7:#b6e4dc; --bt:#2a2f36;
  --today:#e4f0fa; --weekend:#f6f8fb;
  --shadow:0 1px 2px rgba(20,35,50,.05),0 8px 24px rgba(20,35,50,.06);
  --pop:0 12px 40px rgba(10,25,40,.22);
  --f-body:"Figtree","Segoe UI",Arial,sans-serif; --f-head:"Bricolage Grotesque","Figtree","Segoe UI",Arial,sans-serif;
  --r:14px; --r-s:9px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c141c; --surface:#142029; --surface-2:#192630; --line:#243442; --line-2:#1c2b37;
  --ink:#e5ecf3; --muted:#8fa2b5; --faint:#6b7f92;
  --brand:#4fa3e3; --brand-ink:#06223a; --brand-tint:#14304a; --brand-text:#8cc6f2;
  --side:#0a1118; --side-ink:#93a5b7; --side-active:rgba(110,180,235,.14); --side-line:rgba(255,255,255,.06);
  --ok:#4cc58d; --ok-tint:#10382a; --warn:#e3a94a; --warn-tint:#3a2c10; --bad:#ee7b74; --bad-tint:#3d1a18;
  --maint:#f06fa6; --maint-tint:#3b1627; --batt:#a58ae6; --batt-tint:#271f45; --off:#e3a94a;
  --b1:#6d5424; --b2:#3d6a37; --b3:#7d3a3a; --b4:#4b4650; --b5:#6a4a3b; --b6:#37508f; --b7:#2c6a60; --bt:#f1f4f7;
  --today:#14304a; --weekend:#111c25;
  --shadow:0 1px 2px rgba(0,0,0,.3); --pop:0 12px 40px rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c141c; --surface:#142029; --surface-2:#192630; --line:#243442; --line-2:#1c2b37;
  --ink:#e5ecf3; --muted:#8fa2b5; --faint:#6b7f92;
  --brand:#4fa3e3; --brand-ink:#06223a; --brand-tint:#14304a; --brand-text:#8cc6f2;
  --side:#0a1118; --side-ink:#93a5b7; --side-active:rgba(110,180,235,.14); --side-line:rgba(255,255,255,.06);
  --ok:#4cc58d; --ok-tint:#10382a; --warn:#e3a94a; --warn-tint:#3a2c10; --bad:#ee7b74; --bad-tint:#3d1a18;
  --maint:#f06fa6; --maint-tint:#3b1627; --batt:#a58ae6; --batt-tint:#271f45; --off:#e3a94a;
  --b1:#6d5424; --b2:#3d6a37; --b3:#7d3a3a; --b4:#4b4650; --b5:#6a4a3b; --b6:#37508f; --b7:#2c6a60; --bt:#f1f4f7;
  --today:#14304a; --weekend:#111c25;
  --shadow:0 1px 2px rgba(0,0,0,.3); --pop:0 12px 40px rgba(0,0,0,.55); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.fill{fill:currentColor;stroke:none}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
#root{min-height:100%}
.shell{display:flex;min-height:100vh}
.side{width:256px;flex:none;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;transition:transform .2s,width .2s;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:22px 22px 20px;color:var(--side-strong);font:700 21px/1 var(--f-head);letter-spacing:-.4px}
.brand .tile{width:36px;height:36px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center}
.brand .tile .ic{width:21px;height:21px}
.brand sup{font:600 11px var(--f-body);color:var(--accent);margin-left:2px;letter-spacing:0;position:relative;top:-9px}
.nav{padding:4px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav .grp{font:600 11.5px var(--f-body);color:#6f8195;padding:18px 12px 6px}
.nav a,.nav button.nl{display:flex;align-items:center;gap:12px;width:100%;padding:0 12px;height:40px;border-radius:9px;color:var(--side-ink);background:none;border:0;text-align:left;font-weight:500}
.nav a:hover,.nav button.nl:hover{background:var(--side-line);color:var(--side-strong)}
.nav a.on{background:var(--side-active);color:var(--side-strong)}
.nav a.on .ic{color:#7fc0f0}
.nav .chev{margin-left:auto;width:15px;height:15px;transition:transform .15s;opacity:.7}
.nav .open>button .chev{transform:rotate(90deg)}
.sub{display:none;flex-direction:column;gap:1px;padding:2px 0 4px 20px;margin-left:21px;border-left:1px solid var(--side-line)}
.open>.sub{display:flex}
.sub a{height:36px;font-size:13.5px}
.side-foot{padding:16px 22px 22px;font:700 15px var(--f-head);color:var(--side-strong);border-top:1px solid var(--side-line);display:flex;align-items:center;gap:8px}
.side-foot small{font:500 11.5px var(--f-body);color:#6f8195;margin-left:auto}
.main{margin-left:256px;flex:1;min-width:0;display:flex;flex-direction:column;transition:margin .2s}
.mini .side{width:76px}.mini .main{margin-left:76px}
.mini .brand span.t,.mini .nav .lbl,.mini .nav .chev,.mini .nav .grp,.mini .side-foot,.mini .sub{display:none!important}
.mini .brand{padding-inline:20px}.mini .nav a,.mini .nav button.nl{justify-content:center;padding:0}
.top{position:sticky;top:0;z-index:30;height:64px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 28px}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:none;display:grid;place-items:center;color:var(--muted)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.search{position:relative;flex:0 1 380px}
.search .ic{position:absolute;left:13px;top:11px;color:var(--faint);width:17px;height:17px}
.search input{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:0 14px 0 40px}
.search input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.results{position:absolute;top:46px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--pop);padding:6px;display:none;z-index:50}
.results.on{display:block}
.results a{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px}
.results a:hover{background:var(--surface-2)}
.results small{color:var(--muted)}
.top .sp{flex:1}
.welcome{color:var(--muted);white-space:nowrap}
.dd{position:relative}
.dd .menu{position:absolute;right:0;top:44px;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--pop);padding:6px;display:none;z-index:60}
.dd.on .menu{display:block}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;border:0;background:none;text-align:left}
.menu a:hover,.menu button:hover{background:var(--surface-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.menu .tick{margin-left:auto;color:var(--brand)}
.flag{width:22px;height:16px;border-radius:3px;display:inline-grid;place-items:center;font:700 9px var(--f-body);background:var(--brand-tint);color:var(--brand-text)}
.page{padding:26px 28px 8px;flex:1}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.head h1{font:700 28px/1.1 var(--f-head);letter-spacing:-.6px;text-wrap:balance}
.crumb{color:var(--muted);font-size:13px;margin-top:6px}
.foot{padding:18px 28px 28px;color:var(--faint);font-size:12.5px}
.foot a{color:var(--muted)}

/* ---------- components ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.card>.ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;flex-wrap:wrap}
.card>.ch h3{font:600 15px var(--f-body)}
.card>.cb{padding:16px 20px 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);font-weight:600;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--brand-text);border-color:var(--line)}
.btn.ghost:hover{background:var(--brand-tint);border-color:var(--brand)}
.btn.plain{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.plain:hover{background:var(--surface-2)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line)}
.btn.danger:hover{background:var(--bad-tint);border-color:var(--bad)}
.btn.sm{height:32px;padding:0 11px;font-size:13px;border-radius:8px}
.btn .ic{width:16px;height:16px}
.btn.icon{width:32px;padding:0}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill.ok{background:var(--ok-tint);color:var(--ok)}.pill.warn{background:var(--warn-tint);color:var(--warn)}.pill.bad{background:var(--bad-tint);color:var(--bad)}
.pill.info{background:var(--brand-tint);color:var(--brand-text)}.pill.maint{background:var(--maint-tint);color:var(--maint)}.pill.batt{background:var(--batt-tint);color:var(--batt)}
.pill .ic{width:13px;height:13px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1280px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.g2{grid-template-columns:minmax(0,1fr)}}
.mt{margin-top:18px}

/* tables */
.tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px}
.tools .l,.tools .r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.field{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 12px;min-width:0}
.field:focus{outline:none;border-color:var(--brand)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font:inherit;font-variant-numeric:tabular-nums}
th{font-weight:600;font-size:12.5px;color:var(--muted);text-align:left;padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle;white-space:nowrap}
tbody tr:hover td{background:var(--surface-2)}
td.act,th.act{text-align:right;white-space:nowrap}
td .sub2{display:block;color:var(--muted);font-size:12.5px}
.who{display:flex;align-items:center;gap:11px;font-weight:600}
.av{width:32px;height:32px;border-radius:50%;background:var(--brand-tint);color:var(--brand-text);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.pager{display:flex;gap:6px}
.pager button{min-width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.pager button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.path{display:flex;align-items:center;gap:6px;color:var(--muted)}
.path .ic{width:13px;height:13px}
.path b{color:var(--ink);font-weight:600}
.tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{height:46px;padding:0 14px;border:0;background:none;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--brand-text);border-bottom-color:var(--brand)}

/* dashboard */
.kpi .cb{display:flex;flex-direction:column;gap:12px;min-height:122px}
.kpi .big{font:700 40px/1 var(--f-head);letter-spacing:-1.2px}
.kpi .big small{font:500 15px var(--f-body);color:var(--muted);letter-spacing:0;margin-left:6px}
.bar{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.mnav{display:flex;align-items:center;gap:2px}
.mnav .iconbtn{width:28px;height:28px}
.mnav .iconbtn .ic{width:15px;height:15px}
.mnav span{font-weight:600;font-size:13px;min-width:62px;text-align:center}
.rfid{display:flex;gap:8px}
.rfid .field{flex:1;min-width:0}
.dev{display:flex;flex-direction:column;gap:9px}
.dev .stack{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px}
.dev .stack i{display:block;height:100%}
.dev .row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.dev .row b{margin-left:auto;font-variant-numeric:tabular-nums}
.dev .row .ic{width:16px;height:16px}
.chart{display:flex;gap:10px;height:250px;padding-top:6px}
.yax{display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:11.5px;padding-bottom:22px;text-align:right;min-width:32px}
.plot{flex:1;position:relative;min-width:0;overflow-x:auto}
.plot-in{position:relative;height:100%;min-width:100%}
.gl{position:absolute;left:0;right:0;border-top:1px solid var(--line-2)}
.bars{position:absolute;inset:0 0 22px 0;display:flex;align-items:flex-end;gap:5px}
.col{flex:1;min-width:14px;height:100%;display:flex;align-items:flex-end;position:relative;background:none;border:0;padding:0}
.col .b{width:100%;border-radius:7px 7px 3px 3px;transition:filter .12s}
.col:hover .b,.col:focus-visible .b{filter:brightness(.88);outline:none}
.col .x{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap}
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--pop);padding:8px 11px;font-size:12.5px;display:none;white-space:nowrap}
.legend{display:flex;justify-content:center;align-items:center;gap:10px;color:var(--muted);font-size:12px;padding-top:10px}
.legend i{display:block;width:140px;height:7px;border-radius:9px;background:linear-gradient(90deg,#2d9763,#dcb834 50%,#e87e36 75%,#cc393f)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{height:30px;padding:0 12px;border:0;background:var(--surface);font-size:13px;font-weight:600;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--brand-tint);color:var(--brand-text)}
.cnt{margin-left:8px}

/* calendar */
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.cal-bar .l{display:flex;align-items:center;gap:10px}
.cal-bar h3{font:600 17px var(--f-head);min-width:150px}
.leg{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;align-items:center}
.leg i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.cal{overflow-x:auto}
.cal-in{min-width:1040px}
.crow{display:grid;grid-template-columns:var(--nmw,190px) 1fr;border-bottom:1px solid var(--line-2)}
.crow>.nm{padding:0 16px;display:flex;align-items:center;gap:8px;height:52px;font-weight:600;background:var(--surface);position:sticky;left:0;z-index:3;border-right:1px solid var(--line)}
.crow>.nm small{font-weight:500;color:var(--muted)}
.crow.gh>.nm{height:34px;background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.crow.gh>.dz{background:var(--surface-2)}
.crow.hd>.nm{height:56px;color:var(--muted);font-size:12.5px}
.dz{position:relative;display:flex;height:52px}
.crow.gh .dz{height:34px}
.crow.hd .dz{height:56px}
.dc{flex:1;min-width:0;border-left:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted);cursor:pointer}
.dc.we{background:var(--weekend)}.dc.td{background:var(--today)}
.crow.hd .dc{cursor:default;line-height:1.25}
.crow.hd .dc b{font:700 16px var(--f-head);color:var(--ink)}
.crow.hd .dc.td b{color:var(--brand-text)}
.crow:not(.hd):not(.gh) .dc:hover{background:var(--brand-tint)}
.bk{position:absolute;top:7px;height:38px;z-index:2;border:0;color:var(--bt);text-align:left;padding:0 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
.bk small{font-weight:500;opacity:.75}
.bk:hover{filter:brightness(.95)}
.bk .ic{width:14px;height:14px;opacity:.7}
.c1{background:var(--b1)}.c2{background:var(--b2)}.c3{background:var(--b3)}.c4{background:var(--b4)}.c5{background:var(--b5)}.c6{background:var(--b6)}.c7{background:var(--b7)}

/* trees */
.tree{padding:6px 20px 20px}
.node{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--surface)}
.node>.nh{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-radius:12px}
.node>.nh:hover{background:var(--surface-2)}
.node>.nh .tg{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.node.open>.nh .tg{transform:rotate(90deg)}
.node .ico{width:34px;height:34px;border-radius:9px;background:var(--brand-tint);color:var(--brand-text);display:grid;place-items:center;flex:none}
.node .meta{color:var(--muted);font-size:12.5px}
.node .nh .sp{flex:1;min-width:0}
.node .nh b{font-weight:600}
.node>.kids{display:none;padding:0 14px 12px 40px}
.node.open>.kids{display:block}
.node .node{margin-top:8px;background:var(--surface-2)}
.leaf{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;margin-top:6px;background:var(--surface-2);flex-wrap:wrap}
.node .node .leaf{background:var(--surface)}
.leaf .sp{flex:1;min-width:140px}

/* forms */
.form{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}
.fg{display:flex;flex-direction:column;gap:6px;grid-column:span 12}
.fg.s3{grid-column:span 3}.fg.s4{grid-column:span 4}.fg.s6{grid-column:span 6}.fg.s8{grid-column:span 8}.fg.s9{grid-column:span 9}
@media (max-width:760px){.fg.s3,.fg.s4,.fg.s6,.fg.s8,.fg.s9{grid-column:span 12}}
.fg label{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.fg label i{color:var(--bad);font-style:normal;margin-right:3px}
.fg .field,.fg select.field,.fg textarea.field{height:40px;width:100%}
.fg textarea.field{height:auto;padding:10px 12px;resize:vertical}
.logo-box{width:170px;height:170px;border:1px dashed var(--line);border-radius:14px;display:grid;place-items:center;background:var(--surface-2);position:relative;flex:none}
.logo-box .brand{color:var(--ink);padding:0;font-size:17px;gap:8px}
.logo-box .brand .tile{width:30px;height:30px}
.logo-box .lb{position:absolute;bottom:8px;display:flex;gap:6px}
.cfg{display:flex;gap:28px;flex-wrap:wrap}
.cfg>.form{flex:1;min-width:280px}
.vars{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:6px}
.vars code{background:var(--brand-tint);color:var(--brand-text);padding:1px 7px;border-radius:6px;font:600 12.5px var(--f-body)}
.rte{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rte .tb{display:flex;gap:4px;padding:6px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.rte .tb span{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-weight:700}
.rte .bd{padding:14px;min-height:150px;line-height:1.6}

/* modal */
.ov{position:fixed;inset:0;background:rgba(8,18,28,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.md{background:var(--surface);border-radius:16px;width:100%;max-width:720px;box-shadow:var(--pop);border:1px solid var(--line)}
.md.sm{max-width:520px}
.md>.mh{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.md>.mh h3{font:600 17px var(--f-head);flex:1}
.md>.mb{padding:20px 22px}
.md>.mf{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 16px 16px}
.md>.mf .push{margin-right:auto}
.colors{display:flex;gap:8px;flex-wrap:wrap}
.colors button{flex:none;width:28px;height:28px;min-width:28px;aspect-ratio:1;border-radius:50%;border:2px solid transparent;padding:0}
.colors button.on{border-color:var(--ink)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.doors{grid-template-columns:1fr}}
.dl{border:1px solid var(--line);border-radius:10px;min-height:96px;padding:8px;display:flex;flex-direction:column;gap:5px;background:var(--surface-2)}
.dl h4{font-size:12.5px;color:var(--muted);padding:2px 4px 4px;font-weight:600}
.dl button{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 10px}
.dl button:hover{border-color:var(--brand)}
.dl button .ic{width:15px;height:15px;color:var(--muted)}
.pinrow{display:flex;gap:8px}

/* login + guest */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.story{background:var(--side);color:#cfdbe7;padding:44px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.story .brand{padding:0;color:#fff}
.story h1{font:700 52px/1.02 var(--f-head);letter-spacing:-2px;color:#fff;margin:14px 0 18px}
.story p{font-size:17px;color:#a9bbcc;max-width:34ch}
.story .eyebrow{font-weight:600;color:var(--accent);font-size:13px}
.story small{color:#6f8195}
.door{position:absolute;right:-30px;bottom:-20px;width:300px;height:420px;border-radius:150px 150px 0 0;background:linear-gradient(160deg,#1d3a52,#0f619f);opacity:.55}
.door::after{content:"";position:absolute;right:46px;top:210px;width:16px;height:16px;border-radius:50%;background:#ffd6b0}
.formside{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:var(--bg)}
.lform{width:100%;max-width:400px;display:grid;gap:16px}
.lform h2{font:700 30px var(--f-head);letter-spacing:-.8px}
.lform .fg .field{height:44px}
.lform .btn{height:46px}
.row2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.row2 label{display:flex;align-items:center;gap:8px}
.link{color:var(--brand-text);font-weight:600}
.guest{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.gcard{width:100%;max-width:400px;text-align:center;display:grid;gap:18px;padding:36px 30px}
.gcard .brand{justify-content:center;color:var(--ink);padding:0}
.pin{height:56px!important;text-align:center;font:700 26px var(--f-head)!important;letter-spacing:8px}
@media (max-width:900px){.login{grid-template-columns:1fr}.story{display:none}}

/* mockup switcher (fora do produto) */
.mk{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90}
.mk>button{height:40px;padding:0 16px;border-radius:99px;border:0;background:var(--ink);color:var(--bg);font-weight:600;box-shadow:var(--pop);display:flex;align-items:center;gap:8px}
.mk .pn{position:absolute;right:0;bottom:50px;width:260px;max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--pop);padding:8px;display:none}
.mk.on .pn{display:block}
.mk .pn h4{font-size:12px;color:var(--muted);padding:8px 10px 4px;font-weight:600}
.menu .tick,.mk .tick{margin-left:auto;color:var(--brand-text)}
.mk .pn a,.mk .pn button{display:flex;width:100%;padding:8px 10px;border-radius:8px;border:0;background:none;text-align:left;align-items:center;gap:8px}
.mk .pn a:hover,.mk .pn button:hover{background:var(--surface-2)}
.mk .pn a.on{background:var(--brand-tint);color:var(--brand-text);font-weight:600}
.okov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(8,18,28,.45);padding:16px;animation:okfade .18s ease-out}
.okbox{background:var(--surface);color:var(--ink);border-radius:18px;box-shadow:var(--pop);padding:28px 32px 24px;max-width:360px;width:100%;text-align:center;animation:okpop .35s cubic-bezier(.2,1.3,.4,1)}
.okbox p{margin:14px 0 0;font-weight:600;font-size:16px;line-height:1.4}
.okchk{width:84px;height:84px;display:block;margin:0 auto}
.okchk circle{fill:none;stroke:var(--ok);stroke-width:4;stroke-dasharray:166;stroke-dashoffset:166;stroke-linecap:round;transform-origin:center;animation:okdraw .55s .05s ease-out forwards}
.okchk path{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:okdraw .35s .5s ease-out forwards}
.okchk .fillc{fill:var(--ok);stroke:none;opacity:0;animation:okfill .3s .45s ease-out forwards}
@keyframes okdraw{to{stroke-dashoffset:0}}
@keyframes okfill{to{opacity:.14}}
@keyframes okfade{from{opacity:0}}
@keyframes okpop{from{transform:scale(.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.okchk circle,.okchk path{animation:none;stroke-dashoffset:0}.okchk .fillc{animation:none;opacity:.14}.okbox,.okov{animation:none}}
.cmsg{margin:0;line-height:1.5}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:200;font-weight:600;box-shadow:var(--pop)}



.ig{display:flex;align-items:stretch;min-width:0}
.ig .ad{display:inline-flex;align-items:center;gap:4px;padding:0 11px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap;font-size:13px}
.ig .ad:first-child{border-radius:9px 0 0 9px;border-right:0}
.ig .field{flex:1;border-radius:0;min-width:0}
.ig .ad+.field:last-child,.ig .field:last-child{border-radius:0 9px 9px 0}
.ig .ad+.field:not(:last-child){border-radius:0}
.ig .ad:not(:first-child){border-left:0;border-right:0}
.ig .field+.ad{border-left:0}
.ig .ad:first-child+.field:last-child{border-radius:0 9px 9px 0}
.fold{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;font-weight:600;color:var(--ink);width:max-content}
.fold .tg{width:15px;height:15px;transition:transform .15s}
.fold.open .tg{transform:rotate(90deg)}
.foldb{padding-top:10px}
.chk{display:flex;gap:10px;flex-wrap:wrap}
.ck{display:inline-flex!important;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-weight:500!important}
.msg{background:var(--bad-tint);color:var(--bad);border-radius:9px;padding:10px 12px;font-weight:600}
.dd.up .menu{top:auto;bottom:44px;min-width:260px}
.md>.mf .dd{position:relative}

/* tabelas em cartões nos dispositivos móveis */
@media (max-width:720px){
  .tw{overflow:visible}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.rt tr{padding:12px 16px;border-top:1px solid var(--line)}
  table.rt tbody tr:first-child{border-top:1px solid var(--line)}
  table.rt tbody tr:hover td{background:none}
  table.rt td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 0;border:0;white-space:normal;text-align:right;min-width:0}
  table.rt td::before{content:attr(data-label);color:var(--muted);font-size:12.5px;font-weight:600;text-align:left;flex:none}
  table.rt td:first-child{padding:2px 0 8px;font-size:15px;justify-content:flex-start;text-align:left}
  table.rt td:first-child::before{display:none}
  table.rt td.act{justify-content:flex-end;padding-top:10px;margin-top:6px;border-top:1px dashed var(--line)}
  table.rt td.act::before{display:none}
  table.rt td.act>div{flex-wrap:wrap;justify-content:flex-end}
  table.rt td .path{justify-content:flex-end;flex-wrap:wrap}
  .tools{padding:14px 16px}.tools .l,.tools .r{width:100%}.tools .l .field[data-q]{flex:1;min-width:0!important}
  .tools .r .btn{flex:1}
  .tfoot{padding:12px 16px}
  .card>.ch{padding:14px 16px 0}
}

.crow.hd .dc span{font-size:11px}
.bk{cursor:grab;touch-action:pan-x pan-y}
.bk.drag{cursor:grabbing;z-index:20;opacity:.92;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));pointer-events:none}
.ph{position:absolute;top:7px;height:38px;border:2px dashed var(--brand);background:var(--brand-tint);border-radius:6px;z-index:1;pointer-events:none;opacity:.9}
.ph.bad{border-color:var(--bad);background:var(--bad-tint)}
.calhint{padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.crow:not(.hd):not(.gh) .dc{cursor:crosshair}
.cal-in{user-select:none}

.rz{position:absolute;top:0;bottom:0;width:14px;cursor:ew-resize;z-index:3;opacity:0;color:var(--bt)}
.rz.l{left:6px}.rz.r{right:6px}
.rz::after{content:"";position:absolute;top:11px;bottom:11px;left:6px;width:2px;border-radius:2px;background:currentColor;opacity:.55}
.bk:hover .rz,.bk:focus-visible .rz{opacity:1}

.calhint .ht{display:none}
@media (pointer:coarse){.calhint .hf{display:none}.calhint .ht{display:inline}.rz{opacity:.9;width:24px}.rz.l{left:4px}.rz.r{right:4px}.rz::after{left:11px}}
.rz{touch-action:none}
@media (max-width:720px){
  .cal-bar{padding:12px 16px}.cal-bar .l{width:100%;justify-content:space-between}.cal-bar h3{min-width:0;font-size:15px;flex:1;text-align:center}
  .seg{width:100%}.seg button{flex:1;padding:0 4px;font-size:12.5px}
  .calhint{padding:8px 16px;gap:4px 12px;font-size:12px}
  .crow>.nm{padding:0 8px;font-size:12.5px;gap:6px}.crow>.nm .ic{display:none}.crow.gh>.nm{font-size:11.5px}
  .crow.hd>.nm{height:52px}.crow.hd .dc b{font-size:14px}.crow.hd .dc{font-size:11px}.crow.hd .dc span{display:none}
  .bk{font-size:12px;padding:0 12px;height:36px;top:8px}.bk small{display:none}.ph{top:8px;height:36px}
}

@media (pointer:coarse){.bk{padding:0 26px}}
@media (max-width:720px){.edge{top:auto!important}#edge-open{bottom:calc(120px + env(safe-area-inset-bottom,0px))}#edge-alert{bottom:calc(68px + env(safe-area-inset-bottom,0px))}.edge .tab{height:40px;width:40px}}

/* notificações */
#tab-a>.cb,#tab-b>.cb{padding:20px}
@media (max-width:720px){#tab-a>.cb,#tab-b>.cb{padding:16px}}
.tplgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:1000px){.tplgrid{grid-template-columns:minmax(0,1fr)}}
.vbtn{border:0;background:var(--brand-tint);color:var(--brand-text);padding:2px 8px;border-radius:6px;font:600 12.5px var(--f-body);cursor:pointer}
.vbtn:hover{filter:brightness(.95)}
.pvh{font-weight:600;font-size:13px;color:var(--muted);margin-bottom:10px}
.pv{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px;min-height:200px}
.mail{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;line-height:1.6;overflow-wrap:anywhere}
.mail .ms{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.bubble{max-width:90%;padding:10px 14px;border-radius:14px 14px 14px 4px;line-height:1.5;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line)}
.bubble.wa{background:var(--ok-tint);border-color:transparent}
.bubble.sms{background:var(--brand-tint);border-color:transparent;border-radius:14px 14px 4px 14px;margin-left:auto}
.nlist{display:grid;gap:14px;max-width:860px}
.nitem{border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:grid;gap:14px;background:var(--surface)}
.nhd{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.nhd h3{font:600 15px var(--f-body)}
.nhd p{color:var(--muted);margin-top:2px;max-width:60ch}
.nbody{padding-top:4px;border-top:1px solid var(--line-2)}
.nbody:not([hidden]){padding-top:14px}
.sw{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .15s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.sw input:checked+i{background:var(--brand)}
.sw input:checked+i::after{transform:translateX(18px)}
.sw input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}
/* painéis laterais: abertura remota e alertas */
.edge{position:fixed;right:0;z-index:45;display:flex;align-items:flex-start;width:calc(44px + 340px);max-width:100vw;transform:translateX(340px);transition:transform .22s}
.edge.show{transform:none}
.edge:not(.show) .pnl{box-shadow:none;visibility:hidden}
.edge .tab{width:44px;height:44px;flex:none;border:0;border-radius:12px 0 0 12px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;position:relative;box-shadow:var(--pop)}
.edge.alert .tab{background:var(--bad);color:#fff}
.edge .tab b{position:absolute;top:3px;right:5px;font:700 10px var(--f-body)}
.edge .pnl{width:340px;background:var(--surface);border:1px solid var(--line);border-right:0;border-radius:0 0 0 14px;box-shadow:var(--pop);max-height:70vh;overflow:auto}
.edge .pnl .ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;background:var(--surface-2);position:sticky;top:0;z-index:2}
.edge .pnl .pb{padding:12px 14px;display:grid;gap:8px}
.edge .node{margin-top:0}
.edge .leaf{margin-top:6px;padding:8px 10px}
.edge .leaf .sp{min-width:100px}
.edge .kids{padding:0 10px 10px}
.al{border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:10px;padding:10px 12px;display:grid;gap:4px;background:var(--bad-tint)}
.al .t{display:flex;align-items:center;gap:8px;font-weight:600}
.al .m{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
@media (max-width:420px){.edge{width:calc(44px + 300px);transform:translateX(300px)}.edge .pnl{width:300px}}
@media (max-width:1000px){
  .side{transform:translateX(-100%);width:268px!important}
  .nav-open .side{transform:none;box-shadow:var(--pop)}
  .main,.mini .main{margin-left:0}
  .mini .brand span.t,.mini .nav .lbl,.mini .nav .chev,.mini .nav .grp,.mini .side-foot{display:revert!important}
  .mini .nav a,.mini .nav button.nl{justify-content:flex-start;padding:0 12px}
  .welcome{display:none}
  .top{padding:0 16px}.page{padding:20px 16px 8px}.foot{padding:16px}
}
@media (max-width:640px){.g4{grid-template-columns:minmax(0,1fr)}.head h1{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

:root{--f-body:Inter,"Segoe UI",Arial,sans-serif;--f-head:var(--f-body)}