/* Dyn360 · visual v0.2 do protótipo aprovado aplicado às telas reais.
   Carrega por último: só acrescenta e ajusta; os tokens (cores, fontes, espaços) continuam os de app.css. */

/* ---------- marca: DynamoTech + Dyn360, sempre juntos ---------- */
.brand.v02{display:flex;align-items:center;gap:10px;padding:4px 6px 0}
.brand.v02{min-width:0}
.brand.v02 .lg-dt{height:22px;width:auto;max-width:42%;object-fit:contain;object-position:left}
.brand.v02 .x{width:1px;height:22px;background:var(--rail-line);flex:none}
.brand.v02 .lg-d360{height:24px;width:auto;max-width:52%;object-fit:contain;object-position:left}
.brand-sub{display:block;margin:-8px 0 0 6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#34B2E3}

/* ---------- menu: grupos recolhíveis; produto com ícone na cor dele ---------- */
.ngrp{display:grid;gap:2px;margin-top:6px}
.ngrp-h{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:10px;background:none;color:var(--rail-muted);
  font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:left}
.ngrp-h:hover{background:rgba(255,255,255,.04);color:var(--rail-fg)}
.ngrp-h:focus-visible{outline:2px solid #34B2E3;outline-offset:1px}
.ngrp-h .gi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--gc);
  background:color-mix(in srgb,var(--gc) 16%,transparent);border:1px solid color-mix(in srgb,var(--gc) 30%,transparent);transition:transform .3s}
.ngrp-h .gi svg{width:16px;height:16px}
.ngrp-h .gt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ngrp.prod .ngrp-h{color:var(--rail-fg);font:700 13px var(--f-display);letter-spacing:0;text-transform:none}
.ngrp.prod .ngrp-h .gt b{color:var(--gc);font-weight:800}
.ngrp.prod{background:linear-gradient(160deg,color-mix(in srgb,var(--gc) 9%,transparent),transparent 70%);border:1px solid color-mix(in srgb,var(--gc) 18%,transparent);border-radius:12px;padding:4px}
.ngrp-h .gch{width:14px;height:14px;transition:transform .2s;opacity:.7}
.ngrp-h[aria-expanded="true"] .gch{transform:rotate(90deg)}
.ngrp-h:hover .gi{transform:rotate(-6deg) scale(1.06)}
.ngrp-b{display:grid;gap:1px;padding-left:6px}
.ngrp.prod .nav a[aria-current="page"],.ngrp.prod a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent)}
.nav-breve{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;font-size:12.5px;color:var(--rail-muted);border:1px dashed var(--rail-line);margin:2px 0}
.nav-breve svg{opacity:.6}
.nav-vazio{font-size:12.5px;color:var(--rail-muted);padding:8px 10px;margin:0}
.nav .grp{display:none}

/* ---------- padrão único: rótulo de KPI em uma linha, nome completo no title ---------- */
.kf-l{min-height:0;align-items:center}
.kf-l>span,.kf-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-l i{margin-top:0}

/* ---------- ícones vivos: o traço se desenha ao abrir e de novo ao passar o mouse ---------- */
@keyframes d3Desenha{from{stroke-dasharray:90;stroke-dashoffset:90}to{stroke-dasharray:90;stroke-dashoffset:0}}
@keyframes d3Desenha2{from{stroke-dasharray:90;stroke-dashoffset:90}to{stroke-dasharray:90;stroke-dashoffset:0}}
.pl-ic svg.i,.pf-ic svg.i,.est-ic svg.i,.note>svg.i,.ngrp-h .gi svg.i{animation:d3Desenha 1.1s cubic-bezier(.4,0,.2,1) both}
.nav a:hover svg.i,.btn:hover svg.i,.ibtn:hover svg.i{animation:d3Desenha2 .6s cubic-bezier(.4,0,.2,1) both}
.pl-ic,.pf-ic,.est-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px -10px currentColor}

/* ---------- colunas com volume: face em degradê, lateral e topo, crescendo ao abrir ---------- */
@keyframes d3Sobe{from{transform:scaleY(0)}}
.gb-st{position:relative;transform-origin:50% 100%;animation:d3Sobe .8s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 4px 6px rgba(0,0,0,.28))}
.gb-st i{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 62%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 82%,#000))}
.gb-st::after{content:"";position:absolute;top:0;bottom:0;right:-3px;width:3px;background:rgba(0,0,0,.32);transform:skewY(-45deg);transform-origin:0 0;pointer-events:none}
.gb-st::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:rgba(255,255,255,.22);transform:skewX(-45deg);transform-origin:0 100%;pointer-events:none}
.gb-c.zero .gb-st::before,.gb-c.zero .gb-st::after{display:none}

@media (prefers-reduced-motion:reduce){
  .pl-ic svg.i,.pf-ic svg.i,.est-ic svg.i,.note>svg.i,.ngrp-h .gi svg.i,.nav a:hover svg.i,.btn:hover svg.i,.ibtn:hover svg.i,.gb-st{animation:none!important}
}

/* ---------- segunda passada: Início consolidado, vitrine, mini indicadores, dispositivos, agentes ---------- */
.nav-solo{display:grid;gap:1px;margin:4px 0 2px}
/* ícone de dispositivo */
.dv{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--dc);
  background:linear-gradient(150deg,color-mix(in srgb,var(--dc) 24%,transparent),color-mix(in srgb,var(--dc) 6%,transparent) 70%);border:1px solid color-mix(in srgb,var(--dc) 32%,transparent)}
.dv svg.i{width:16px;height:16px;animation:d3Desenha 1.1s cubic-bezier(.4,0,.2,1) both}
.dvm{display:inline-flex;vertical-align:-3px;margin-right:6px}.dvm svg.i{animation:d3Desenha 1s both}
/* mini indicadores */
.mks{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mk{position:relative;display:grid;gap:3px;align-content:start;padding:10px 12px 10px 15px;background:color-mix(in srgb,var(--panel-2) 45%,var(--panel));min-width:0}
.mk::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--c,var(--line-2))}
.mk-l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--strong);line-height:1.1}.mk-v small{font-size:12px;color:var(--dim);margin-left:1px}
.mk-t{font:600 10.5px/1.7 var(--f-mono);font-style:normal;letter-spacing:.02em;color:var(--c);padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,transparent);white-space:nowrap}
.mk-b{display:block;height:4px;border-radius:4px;background:var(--line);overflow:hidden}.mk-b i{display:block;height:100%;border-radius:4px;transform-origin:left;animation:d3Barra 1s .2s cubic-bezier(.2,.7,.2,1) both}
.mk-c{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes d3Barra{from{transform:scaleX(0)}}
/* topo: boas-vindas + vitrine */
.d3-top{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.d3-top.com-spot{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.d3-welcome{position:relative;overflow:hidden;border-radius:var(--r-lg);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 28px;align-items:center;padding:20px 26px;color:#fff;
  background:linear-gradient(118deg,#0B2238 0%,#0E4466 52%,#157AA6 100%);border:1px solid rgba(52,178,227,.35)}
.d3-welcome .eyebrow{color:#9FE0F7}.d3-welcome h1{color:#fff;font-size:28px;margin:4px 0 0}.d3-welcome p{color:#D6E9F3;margin:4px 0 0;max-width:64ch}
.d3-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.d3-stats span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;font-size:12.5px;color:#E6F3FA}
.d3-stats b{font-family:var(--f-display);font-weight:800;color:#fff;margin-right:5px}
.d3-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.d3-acts .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.d3-w-lg{width:110px;height:110px;filter:drop-shadow(0 0 24px rgba(52,178,227,.45))}
.d3-spot{display:grid;border-radius:var(--r-lg)}
.d3-sp{grid-area:1/1;display:grid;align-content:start;gap:10px;padding:18px 20px;color:#fff;border-radius:var(--r-lg);visibility:hidden;opacity:0;transition:opacity .5s,visibility .5s;position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--pc) 46%,transparent),transparent 60%),linear-gradient(160deg,#101826,#0A0F18);
  border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);box-shadow:0 24px 60px -28px color-mix(in srgb,var(--pc) 70%,transparent)}
.d3-sp.on{visibility:visible;opacity:1}
.d3-sp-e{display:inline-flex;align-items:center;gap:6px;justify-self:start;font:700 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--pc) 30%,rgba(255,255,255,.06));border:1px solid color-mix(in srgb,var(--pc) 55%,transparent)}
.d3-sp-n{font:800 18px var(--f-display);color:#fff}.d3-sp-n em{font-style:normal;color:var(--pc)}
.d3-sp h3{margin:0;font:700 18px/1.25 var(--f-display);color:#fff;max-width:24ch}
.d3-sp ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.d3-sp li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#D9E6EF}.d3-sp li svg{color:var(--pc);flex:none;margin-top:2px}
.d3-sp-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn.d3-cta{background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 55%,#000));color:#fff;border:0;font-weight:700}
.d3-dots{display:flex;gap:6px;margin-left:auto}.d3-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.28);cursor:pointer;transition:width .3s}
.d3-dots button[aria-pressed="true"]{width:22px;background:#fff}
/* cartões de produto */
.d3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:stretch;margin-top:16px}
.d3-pc{display:grid;gap:12px;align-content:start;position:relative;overflow:hidden;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--pc,#34B2E3) 13%,transparent),transparent 70%),var(--panel)}
.d3-pc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--pc,#34B2E3) 30%,var(--pc,#34B2E3) 70%,transparent)}
.d3-pc.breve{border-style:dashed}
.d3-pc-h{display:flex;align-items:center;gap:8px}.d3-pc-h>b,.d3-prod{margin-right:auto;font:800 15px var(--f-display);color:var(--strong)}.d3-prod em{font-style:normal;color:var(--pc)}
.d3-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:end}
.d3-hero>div:first-child{display:grid;gap:3px}.d3-n{font:800 32px/1.05 var(--f-display);color:var(--strong);letter-spacing:-.03em}
.d3-hero-g .gb{--h:90px!important}
.d3-list{display:grid;gap:4px}.d3-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 4px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.d3-li:first-child{border-top:0}.d3-li>div{display:grid;min-width:0}.d3-li b,.d3-li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.d3-li span{font-size:12px;color:var(--dim)}
.d3-li:hover{background:color-mix(in srgb,var(--panel-2) 60%,transparent);border-radius:8px}
/* agentes de IA */
.d3-fluxo{display:flex;align-items:stretch;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 0 4px}
.d3-fi{flex:1;min-width:118px;display:grid;gap:6px;justify-items:start;padding:12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 50%,var(--panel))}
.d3-fi b{font-size:13.5px;color:var(--strong)}.d3-fi>span:last-child{font-size:12px;color:var(--dim);line-height:1.35}
.d3-seta{flex:none;width:14px;align-self:center;height:2px;background:linear-gradient(90deg,var(--line-2),#34B2E3)}
.d3-ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.d3-agc{display:grid;gap:8px;align-content:start;padding:14px;border-radius:14px;border:1px solid var(--line);position:relative;
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 70%),var(--panel)}
.d3-agc::before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;background:var(--ac);opacity:.8}
.d3-agh{display:flex;gap:8px;align-items:center}.d3-agh b{margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d3-agc p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}.d3-agm{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:1180px){.d3-top.com-spot{grid-template-columns:1fr}}
@media (max-width:720px){.d3-welcome{grid-template-columns:1fr;padding:18px 16px}.d3-w-lg{display:none}.d3-welcome h1{font-size:24px}.d3-hero{grid-template-columns:1fr}
  .mk{padding:8px 8px 8px 12px}.mk-v{font-size:18px}.d3-fluxo{flex-direction:column}.d3-seta{width:2px;height:12px;margin-left:20px}}
@media (prefers-reduced-motion:reduce){.dv svg.i,.dvm svg.i,.mk-b i{animation:none!important}.d3-sp{transition:none}}

/* Vínculos e Divergências */
.d3-vp{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;color:var(--strong)}
.d3-vp .i{color:var(--vc)}
.d3-vt td,.d3-vt th{vertical-align:middle}
.d3-vg+.d3-vg .d3-vgh th{border-top:10px solid transparent}
.d3-vgh th{background:color-mix(in srgb,var(--accent) 7%,transparent);text-align:left;font-weight:500;padding:9px 12px}
.d3-vgh th.r{text-align:right}
.d3-vn{max-width:420px}
.d3-vn span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--strong)}
.d3-vn small{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d3-vq{display:block;font-size:11px;margin-top:3px}
.d3-va{white-space:nowrap}
.d3-va .btn+.btn{margin-left:6px}
.d3-dvs{display:grid;gap:10px}
.d3-dv{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:12px}
.d3-dv.crit{border-left-color:var(--crit)}
.d3-dv.mute{border-left-color:var(--line-2);opacity:.75}
.d3-dv .split{display:flex;justify-content:space-between;align-items:center;gap:10px}
.d3-dv .split b{display:inline-flex;align-items:center;gap:8px;min-width:0}
.d3-map{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.d3-map>div{display:grid;gap:3px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--strong) 4%,transparent);min-width:0}
.d3-map small{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.d3-map span{overflow-wrap:anywhere}
.d3-map i{font-style:normal;font-size:18px;color:var(--dim)}
@media (max-width:720px){.d3-map{grid-template-columns:1fr}.d3-map i{display:none}.d3-va .btn+.btn{margin:6px 0 0}}
.d3-pd summary{cursor:pointer;color:var(--accent);font-size:12.5px}
.d3-pd>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;max-width:520px}
.d3-falta{border-color:color-mix(in srgb,var(--warn) 60%,transparent);color:var(--warn)}
.d3-fila td{vertical-align:middle}
.d3-erro{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12.5px}
.tl-i.aguardando .tl-d{background:#F2683F}

/* Dyn360 Infra */
.d3-col{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.d3-nota{font-size:12.5px;margin-top:10px}
.d3-at>span{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d3-max{max-height:420px;overflow:auto}
.hive-wrap{display:grid;gap:14px}
.hive-grp .hg{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hive-grp .hg span{color:var(--dim);font-size:12px;font-family:var(--f-mono)}
.hive{display:flex;flex-wrap:wrap;gap:3px 2px;padding-left:2px}
.hx-c{width:20px;height:23px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--ok);opacity:.88;cursor:default;transition:transform .15s}
.hx-c:nth-child(even){margin-top:6px}
.hx-c:hover{transform:scale(1.25);opacity:1}
.hx-c.warn{background:var(--warn)}.hx-c.high{background:#F2683F}.hx-c.crit{background:var(--crit);animation:blink 2.4s infinite}.hx-c.idle{background:var(--line-2)}
@media (prefers-reduced-motion:reduce){.hx-c.crit{animation:none}}

/* Dyn360 Backup & Restore */
.d3-seg{display:grid;gap:6px;margin-top:12px;padding:12px;border:1px dashed var(--accent);border-radius:12px}
.d3-seg code{font-size:15px;letter-spacing:.04em;word-break:break-all;color:var(--strong)}
.d3-fv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;align-items:end}
.d3-fv .field.w{grid-column:span 2}
.d3-cmd{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.d3-ev{display:grid;gap:4px;max-height:360px;overflow:auto;font-size:12.5px}
.d3-log{max-height:360px;overflow:auto;font-size:11.5px;line-height:1.5;background:color-mix(in srgb,var(--strong) 4%,transparent);padding:10px;border-radius:10px;white-space:pre-wrap}
tr.sel td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sel-sm{height:30px;font-size:12.5px}
@media (max-width:720px){.d3-fv .field.w{grid-column:auto}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-top:8px}
.kv dt{color:var(--dim)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.d3-agora{margin-bottom:6px}
#bkQ{width:200px}
.d3-mig{font-size:13px;margin:6px 0 8px}
.d3-dest{display:grid;gap:8px;margin:10px 0}
.d3-op{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.d3-op small{display:block}

/* ---------- Carteira: matriz Clientes × módulos (célula cheia = contratado, tracejada = oportunidade) ---------- */
.mx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.mx-bar .seg{max-width:100%;overflow-x:auto;scrollbar-width:none} .mx-bar .seg button{white-space:nowrap}
.mx-bar .seg button .ct{font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-left:4px}
.mx-bar .seg button[aria-pressed="true"] .ct{color:inherit}
.mx-ord{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);white-space:nowrap} .mx-ord .sel{width:auto;padding-top:6px;padding-bottom:6px;font-size:12.5px}
.mx{display:grid;container:mx/inline-size}
.mx-r{display:grid;grid-template-columns:minmax(230px,1.5fr) repeat(4,minmax(128px,1fr)) minmax(118px,.75fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.mx-h{border-top:0;padding:0 0 8px;font:600 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.mx-h span{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-h span svg{color:var(--pc)} .mx-h .r{justify-content:flex-end}
.mx-n{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.mx-n div{display:grid;gap:3px;min-width:0}
.mx-n b{font-family:var(--f-display);font-size:14.5px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-n div>span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .mx-tags .pill{font-size:10.5px;padding:2px 8px}
.mx-op{font:600 10.5px var(--f-mono);color:var(--accent)}
.mx-n:hover b{color:var(--accent)}
.mx-c{display:flex;align-items:center;gap:10px;min-width:0;height:58px;padding:0 12px;border-radius:var(--r-md);text-decoration:none;color:inherit;transition:background .15s,border-color .15s}
.mx-i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.mx-i svg{width:18px;height:18px}
.mx-t{display:grid;gap:2px;min-width:0} .mx-t b,.mx-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-t small{font-size:11px;color:var(--dim)}
.mx-c.on{background:color-mix(in srgb,var(--pc) 8%,var(--panel-2));border:1px solid color-mix(in srgb,var(--pc) 26%,transparent)}
.mx-c.on .mx-i{color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,transparent)}
.mx-c.on .mx-t b{font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--strong)} .mx-c.on .mx-t b small{font-size:12px;color:var(--dim)}
.mx-c.on .mx-t b.mx-st{display:flex;align-items:center;gap:6px;font:600 12.5px var(--f-body)}
.mx-c.on .mx-t b.mx-st::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.mx-c.on.ok .mx-t b.mx-st{color:var(--ok)} .mx-c.on.warn .mx-t b.mx-st{color:var(--warn)} .mx-c.on.crit .mx-t b.mx-st{color:var(--crit)} .mx-c.on.mute .mx-t b.mx-st{color:var(--dim)}
.mx-c.on.warn{box-shadow:inset 3px 0 0 var(--warn)} .mx-c.on.crit{box-shadow:inset 3px 0 0 var(--crit)}
.mx-c.on:hover{border-color:color-mix(in srgb,var(--pc) 55%,transparent)}
.mx-c.off{border:1px dashed var(--line-2);background:transparent}
.mx-c.off .mx-i{color:var(--dim);background:var(--panel-2)}
.mx-c.off .mx-t b{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.mx-c.off:hover{border-color:var(--accent-line);background:var(--accent-soft)} .mx-c.off:hover .mx-t b,.mx-c.off:hover .mx-i{color:var(--accent)}
.mx-v{display:grid;justify-items:end;gap:3px;text-align:right}
.mx-v b{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--strong);white-space:nowrap} .mx-v>span{font-size:11px;color:var(--dim)}
.mx-pl{font-size:10.5px;padding:2px 8px;text-decoration:none;margin-top:2px}
.mx-a{display:flex;gap:6px;justify-content:flex-end}
.mx-vz{padding:12px 0}
.mx-c.on .mx-t small.mx-d{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600}
.mx-c.on .mx-t small.mx-d::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
.mx-c.on.ok small.mx-d{color:var(--ok)} .mx-c.on.warn small.mx-d{color:var(--warn)} .mx-c.on.crit small.mx-d{color:var(--crit)} .mx-c.on.mute small.mx-d{color:var(--dim)}
.mx-c.on .mx-t b small{font-family:var(--f-body);font-weight:500}
/* pela largura do painel, não da janela (o menu lateral e o zoom mudam o espaço): abaixo de ~1180px cada cliente vira duas
   linhas (cliente, receita e ações em cima; os 4 módulos embaixo, com folga); abaixo de ~640px, cartão com os módulos em 2×2 */
@container mx (max-width:1180px){
  .mx-r{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:8px;padding:12px 0}
  .mx-h{padding-bottom:6px} .mx-h span:first-child,.mx-h span:nth-last-child(-n+2){display:none}
  .mx-n{grid-column:1/3} .mx-v{grid-column:3/4;grid-row:1;grid-auto-flow:column;align-items:center;justify-content:end;gap:4px 10px}
  .mx-v>span{display:none} .mx-a{grid-column:4/5;grid-row:1}
  .mx-c{grid-row:2}
}
@container mx (max-width:640px){
  .mx-h{display:none}
  .mx-r{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 0}
  .mx-n{grid-column:1/-1} .mx-v{grid-column:1/2;grid-row:auto;grid-auto-flow:row;justify-items:start;justify-content:start;text-align:left} .mx-v>span{display:inline}
  .mx-a{grid-column:2/3;grid-row:auto;justify-content:flex-end;align-self:end}
  .mx-c{grid-row:auto;height:52px;padding:0 8px;gap:8px} .mx-i{width:28px;height:28px} .mx-i svg{width:16px;height:16px}
}

/* ---------- Carteira: vitrine de oportunidades (cartões compactos, rolagem lateral) ---------- */
.ops{display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.op{scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px;border-radius:var(--r-md);text-decoration:none;color:inherit;
  background:color-mix(in srgb,var(--pc) 7%,var(--panel-2));border:1px solid color-mix(in srgb,var(--pc) 24%,transparent);border-top:3px solid var(--pc);transition:border-color .15s,transform .15s}
.op:hover{border-color:color-mix(in srgb,var(--pc) 55%,transparent);transform:translateY(-1px)}
.op-h{display:flex;align-items:center;gap:8px;min-width:0} .op-h b{font:700 13px var(--f-display);color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,transparent)}
.op-c{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-n{display:flex;align-items:baseline;gap:6px} .op-n b{font:800 26px/1.1 var(--f-display);color:var(--strong);letter-spacing:-.01em} .op-n small{font-size:12px;color:var(--dim)}
.op p{margin:0;font-size:12px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:52px}
.op-f{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto} .op-f .pill{font-size:10.5px;padding:2px 8px}
.op-a{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
#pnOps .acts{gap:6px}
@media (max-width:720px){.ops{grid-auto-columns:78%}}

/* campo de data fora do intervalo do contrato (min/max): borda na cor crítica antes de salvar */
input[type="date"].in:invalid{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}

/* ---------- marca do cliente: logo no fundo branco (logo colorido some no modo NOC), sigla quando não há logo ---------- */
.tlg.com-logo,.lg.com-logo{background:#fff;padding:4px;border:1px solid var(--line);overflow:hidden}
.tlg.xl.com-logo{padding:6px}
.com-logo img{width:100%;height:100%;object-fit:contain;display:block}
.cl-pag{margin-top:14px}

/* ---------- vitrine: abas por produto, selos, cartão tratado e gaveta de tratar ---------- */
.ops-abas{margin-bottom:12px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ops-abas button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ops-abas button svg{color:var(--pc,currentColor)}
.ops-abas button .ct{font-family:var(--f-mono);font-size:11px;color:var(--dim)} .ops-abas button[aria-pressed="true"] .ct{color:inherit}
.op-s{display:flex;flex-wrap:wrap;gap:4px} .op-s .pill{font-size:10.5px;padding:2px 8px}
.op-f .btn.sm{padding:4px 10px;font-size:12px}
.op.tratada{--pc:var(--line-2);background:var(--panel-2)} .op.tratada .op-i{color:var(--muted)}
.op.tratada p{min-height:0}
.op-gv{display:grid;gap:14px} .op-gv p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.op-gv .seg{flex-wrap:wrap}

/* Infra: leitura do NOC (Dyn360 AI) no topo das telas do Infra e no cartão da Início. Texto simples; a cor vem da criticidade */
.inf-lt{display:grid;gap:6px}.inf-lt .d3-lt-l li{font-size:13.5px}
.inf-lt-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inf-lt-h .eyebrow{color:var(--accent)}.inf-lt-q{font-size:12px;color:var(--dim)}.inf-lt-h .btn{margin-left:auto}
.d3-lt{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 45%,var(--panel))}
.d3-lt .mk-l{color:var(--accent)}.d3-lt p{margin:0;font-size:13px;line-height:1.5;color:var(--fg)}
.d3-lt-l{list-style:none;margin:2px 0 0;padding:0;display:grid}
.d3-lt-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;padding:7px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--fg)}
.d3-lt-l li:first-child{border-top:0;padding-top:2px}
.d3-lt-l li svg{color:var(--c);margin-top:1px}

/* ---------- Início: panorama do ambiente (Dyn360 AI) no topo; o banner é sempre escuro, então as cores ficam fixas ---------- */
.d3-pano{display:grid;gap:8px;margin-top:6px;max-width:860px}
.d3-pano-e{display:flex;align-items:center;gap:6px;font:600 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#9FE0F7}
.d3-welcome .d3-pano>p{color:#fff;font-size:15px;line-height:1.5;margin:0;max-width:74ch}
.d3-pano small{font-size:11px;color:rgba(230,243,250,.62)}

/* Infra: "Por camada" da Disponibilidade como página de status (modelo D): linhas soltas no painel, sem cartão nem fundo em bloco */
.inf-st{display:grid;gap:2px}
.inf-st-l,.inf-st-r{display:grid;grid-template-columns:190px minmax(0,1fr) 78px;gap:16px;align-items:center}
.inf-st-l{padding:7px 0;cursor:pointer;border-radius:8px}.inf-st-l:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inf-st-l[aria-pressed="true"] .d3-at b{color:var(--accent)}.inf-st-l>b{text-align:right}
.inf-st-l>.d3-at{min-width:0;overflow:hidden}.inf-st-l>.d3-at>span{max-width:100%}.inf-st-l>.d3-at b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.inf-st-d{display:flex;gap:3px;height:28px}.inf-st-d i{flex:1;border-radius:3px;min-width:0}.inf-st-d i:hover{outline:2px solid var(--fg);opacity:1!important}
.inf-st-r{margin-top:4px;font:600 10.5px var(--f-mono);color:var(--dim);letter-spacing:.06em}.inf-st-r>span:nth-child(2){display:flex;justify-content:space-between}.inf-st-r>span:last-child{text-align:right}
@media (max-width:720px){.inf-st-l,.inf-st-r{grid-template-columns:96px minmax(0,1fr) 58px;gap:8px}.inf-st-d{gap:2px;height:22px}.inf-st-d i{border-radius:2px}.inf-st-r{font-size:9.5px}}
/* Infra: a tabela "Por camada" de Ativos, com a faixa de quadradinhos (um por equipamento) e a linha que filtra a lista */
.inf-camt tr[data-cam]{cursor:pointer}.inf-camt tr[aria-pressed="true"] td{background:var(--accent-soft)}.inf-camt td .pill{margin:1px 0;white-space:nowrap}
.inf-fx{display:flex;flex-wrap:wrap;gap:3px;max-width:100%}.inf-fx i{width:10px;height:10px;border-radius:3px;background:var(--ok);opacity:.9}
.inf-fx i.warn{background:var(--warn)}.inf-fx i.high{background:#F2683F}.inf-fx i.crit{background:var(--crit)}.inf-fx i.idle{background:var(--line-2)}.inf-fx i:hover{outline:2px solid var(--fg);opacity:1}
.inf-ip{display:block;font-size:11px;margin:2px 0 0 26px}
/* Infra: Documentação do ambiente (lista com a topologia viva, documento aberto e editor) */
.doc-topo{overflow-x:auto;padding-bottom:6px}.doc-topo svg{display:block;max-width:none;margin:0 auto}.doc-no{cursor:pointer;outline:none}.doc-no:hover rect,.doc-no:focus-visible rect{stroke:var(--accent);stroke-opacity:1}
.doc-leg{display:flex;gap:12px;font-size:12px;color:var(--dim);align-items:center}.doc-leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.doc-no-det{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.doc-no-det>.btn{margin-left:auto}.doc-no-docs{display:flex;flex-wrap:wrap;gap:6px}
.doc-md{display:grid;gap:10px;font-size:14px;line-height:1.6;color:var(--fg);max-width:90ch}.doc-md h2{font-size:17px;margin:6px 0 0}
.doc-md h3{font:600 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:8px 0 -4px}.doc-md p{margin:0}
.doc-md ol,.doc-md ul{margin:0;padding-left:22px;display:grid;gap:6px}.doc-md code{font-family:var(--f-mono);font-size:12.5px;padding:1px 5px;border-radius:5px;background:var(--panel-2)}
.doc-nota{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 45%,var(--panel));font-size:13px;line-height:1.5}
.doc-nota svg{color:var(--warn);margin-top:2px}
.doc-anxs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.doc-anx{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);font:500 12px var(--f-mono);color:var(--fg)}
.doc-anx{text-decoration:none}.doc-anx small{color:var(--dim)}.doc-form .pn{align-content:start}.doc-form .busca{max-width:none;flex:none}.pg-h .eyebrow a{color:inherit}.doc-anx:hover{border-color:var(--line-2)}.doc-lado{display:grid;gap:16px;align-content:start}
.doc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.doc-campos .c-tit{grid-column:1/-1}.doc-campos label,.doc-ed label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.doc-ed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}.doc-ed textarea{min-height:360px;resize:vertical;font-size:12.5px;line-height:1.55}
.doc-ed #docPrev{margin-top:5px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:10px;min-height:360px;max-height:520px;overflow:auto}
.doc-ats{display:grid;gap:2px;max-height:520px;overflow:auto;margin-top:10px}.doc-at{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:center;padding:5px 6px;border-radius:7px;font-size:13px;cursor:pointer}
.doc-at:hover{background:var(--panel-2)}.doc-at span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-drop{display:grid;justify-items:center;gap:6px;padding:34px 20px;border:1.5px dashed var(--line-2);border-radius:14px;text-align:center;cursor:pointer;color:var(--muted)}
.doc-drop svg{width:28px;height:28px;color:var(--accent)}.doc-drop b{color:var(--strong);font-size:15px}.doc-drop span{font-size:12.5px}
.doc-drop.sobre{border-color:var(--accent);background:var(--accent-soft)}.doc-drop.ocupado{opacity:.6;pointer-events:none}
.doc-imp-st{display:flex;align-items:center;gap:8px;margin:0;color:var(--fg)}.doc-imp-st svg{color:var(--accent);animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.doc-passos li{font-size:13px}.doc-rz ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}.doc-rz-anx{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px}
@media (max-width:900px){.doc-ed,.doc-campos{grid-template-columns:1fr}.doc-no-det>.btn{margin-left:0}}
/* Infra: rede (VLANs e portas). Porta em uso cheia na cor da VLAN; livre só com o contorno; trunk listrado */
.rd-sws{display:grid;gap:16px}.rd-sw{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}.rd-sw:last-child{border-bottom:0;padding-bottom:0}
.rd-sw-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.rd-sw-h .mono{font-size:12px}.rd-sw-u{margin-left:auto;font-size:12.5px;color:var(--muted)}.rd-sw-u b{color:var(--strong)}
.rd-face{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--panel-2) 60%,var(--panel));border:1px solid var(--line)}
.rd-bl,.rd-up{display:grid;gap:3px}.rd-up{padding-left:14px;border-left:1px dashed var(--line-2)}
.rd-l{display:flex;gap:3px}.rd-n{display:flex;gap:3px}.rd-n b{width:20px;text-align:center;font:600 9px var(--f-mono);color:var(--dim)}
.rd-p{width:20px;height:20px;border-radius:4px;border:2px solid var(--c);box-sizing:border-box;cursor:default;transition:opacity .15s}
.rd-p.livre{border-color:color-mix(in srgb,var(--c) 70%,transparent)}.rd-p.apag{opacity:.12}.rd-p:hover{outline:2px solid var(--fg)}
.rd-chip{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:8px;vertical-align:middle}.rd-vt tr[aria-pressed="true"] td{background:var(--accent-soft)}
.rd-tag{display:inline-block;min-width:26px;text-align:center;font:600 11px var(--f-mono);padding:1px 6px;border-radius:5px;margin-right:4px;color:var(--strong);background:color-mix(in srgb,var(--c) 30%,transparent);border:1px solid var(--c)}
.rd-p.ed{cursor:pointer}.rd-ed:empty{display:none}
.rd-form{display:flex;flex-wrap:wrap;align-items:end;gap:10px 12px;padding:12px;border-radius:10px;border:1px solid var(--accent-line);background:var(--accent-soft)}
.rd-form>b{align-self:center;color:var(--strong)}.rd-form label{display:grid;gap:4px;font-size:12px;color:var(--muted)}.rd-form .rd-desc{flex:1 1 280px}
.rd-tg{display:flex;flex-wrap:wrap;gap:8px;align-self:center}.rd-tg label{display:flex;gap:4px;align-items:center;font:600 12px var(--f-mono);color:var(--fg)}
.rd-vl-ed td{padding:5px 6px}.rd-vl-ed .in{width:100%}
.rd-tag.tg{border-style:dashed;background:transparent}

/* Infra: topologia em board (ícone por tecnologia, ligações com porta, VMs no host, arrastável) */
.tp-wrap{display:grid;gap:10px;background:var(--panel)}.tp-wrap:fullscreen{padding:18px;overflow:auto}
.tp-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}.tp-cams,.tp-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tp-acts .ico{padding:6px 8px}
.tp-vp{overflow:auto;border:1px solid var(--line);border-radius:12px;background:radial-gradient(circle,var(--line) 1px,transparent 1.2px) 0 0/18px 18px,var(--panel-2);min-height:280px;max-height:720px}
.tp-wrap:fullscreen .tp-vp{max-height:none;height:calc(100vh - 150px)}
.tp-zoom{position:relative}
.tp-board{position:relative}.tp-svg{position:absolute;inset:0;overflow:visible;pointer-events:none}.tp-svg .tp-l{pointer-events:stroke}
.tp-col{position:absolute;left:12px;width:92px;display:flex;align-items:center;font:600 9.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-right:1px solid var(--line);padding-right:8px;box-sizing:border-box}
.tp-pt{font:500 9.5px var(--f-mono);fill:var(--muted)}.tp-con{fill:var(--dim)}.tp-lr text{font:600 10px var(--f-mono)}
.tp-no{position:absolute;box-sizing:border-box;border-radius:11px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 1px 0 rgba(0,0,0,.18);cursor:pointer;outline:none;
  transition:border-color .15s,box-shadow .15s}
.tp-no:hover,.tp-no:focus-visible{border-color:var(--accent)}.tp-no.tp-sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tp-no.s-crit{border-color:color-mix(in srgb,var(--crit) 70%,transparent)}.tp-no.s-warn{border-color:color-mix(in srgb,var(--warn) 65%,transparent)}
.tp-no.grupo{border-style:dashed}
.tp-cab{display:flex;align-items:center;gap:9px;padding:7px 10px;min-height:46px;box-sizing:border-box;position:relative}
.tp-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#34B2E3;background:color-mix(in srgb,#34B2E3 13%,transparent)}
.tp-no.t-firewall .tp-i,.tp-no.t-roteador .tp-i,.tp-no.t-vpn .tp-i{color:#C2185B;background:color-mix(in srgb,#8C103D 18%,transparent)}
.tp-no.t-switch .tp-i,.tp-no.t-wifi .tp-i{color:#4FA3CC;background:color-mix(in srgb,#157AA6 20%,transparent)}
.tp-no.t-camera .tp-i,.tp-no.t-dvr .tp-i,.tp-no.t-nobreak .tp-i,.tp-no.t-sensor .tp-i,.tp-no.t-impressora .tp-i,.tp-no.t-estacao .tp-i,.tp-no.t-outro .tp-i{color:var(--muted);background:var(--panel-2)}
.tp-tx{display:grid;min-width:0;flex:1;line-height:1.25}.tp-tx b{font:700 12.5px var(--f-display);color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-tx small{font:500 10.5px var(--f-mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-st{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--dim)}
.s-ok>.tp-cab .tp-st,.tp-st.s-ok{background:var(--ok)}.s-warn>.tp-cab .tp-st,.tp-st.s-warn{background:var(--warn)}.s-crit>.tp-cab .tp-st,.tp-st.s-crit{background:var(--crit)}
.tp-mud{position:absolute;top:-8px;right:8px;font:700 9px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:var(--warn);color:#111}
.tp-mud.novo{background:var(--ok)}.tp-mud.removido{background:var(--crit);color:#fff}
.tp-vms{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 9px 9px}
.tp-vm{display:flex;align-items:center;gap:6px;min-width:0;height:25px;padding:0 7px;border-radius:7px;border:1px dashed var(--line-2);background:var(--panel-2);font:600 10.5px var(--f-mono);color:var(--fg)}
.tp-vm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.tp-vm i{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.tp-vm.s-ok i{background:var(--ok)}.tp-vm.s-warn i{background:var(--warn)}.tp-vm.s-crit i{background:var(--crit)}
.tp-vm em{font-style:normal;color:#34B2E3;font-weight:700}.tp-vm em.ruim{color:var(--warn)}
.tp-vp.editando .tp-no{cursor:grab;touch-action:none}.tp-vp.editando .tp-no:active{cursor:grabbing;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tp-vp.editando{outline:2px dashed var(--accent-line);outline-offset:-2px}
.tp-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;font-size:12.5px;align-items:start}
@media (max-width:900px){.tp-side{grid-template-columns:1fr}}
.tp-det.vazio{display:flex;gap:8px;align-items:center;padding:12px;min-height:44px}
.tp-det{border:1px solid var(--line);border-radius:12px;padding:4px 10px 10px;display:grid;gap:8px}.tp-det .tp-cab{padding:6px 0}
.tp-dl{list-style:none;margin:0;padding:0;display:grid;gap:5px}.tp-dl li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;font-size:12px}
.tp-dl li span{font:500 10.5px var(--f-mono)}.tp-dl li em{grid-column:1/-1;font-style:normal;font-size:11px;color:var(--dim)}
.tp-det-a{display:flex;flex-wrap:wrap;gap:6px}
.tp-mudas{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px}.tp-mh{display:grid;gap:2px}.tp-mh .dim{font-size:11px}
.tp-mudas ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:300px;overflow:auto}
.tp-mudas li{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:start;line-height:1.35;cursor:default}.tp-mudas li[data-ir]{cursor:pointer}.tp-mudas li[data-ir]:hover span{color:var(--accent)}
.tp-mudas li i{font:700 12px var(--f-mono);text-align:center;border-radius:5px;font-style:normal}
.tp-mudas li.ok i{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}.tp-mudas li.crit i{color:var(--crit);background:color-mix(in srgb,var(--crit) 15%,transparent)}
.tp-mudas li.warn i{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.tp-prox{display:flex;gap:6px;align-items:center;font-size:11px;margin:0}.tp-fontes{font-size:11px}
.tp-rodape{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:center}
.tp-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--dim);align-items:center}.tp-leg>span{display:inline-flex;gap:6px;align-items:center}
.tp-board.estatico .tp-no{cursor:default;box-shadow:none}
.tp-vm.desl{opacity:.55;text-decoration:line-through;text-decoration-color:var(--dim)}
.tp-atras{display:flex;gap:6px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:9px;font-size:12px;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.tp-cob{font:500 11px var(--f-mono);color:var(--muted)}
.tp-ath{font-size:12px;margin-top:4px}

/* Infra: topologia de cliente de borda (lojas) e a leitura do Dyn360 AI */
.tp-ia{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.45;color:var(--fg)}.tp-ia b{font-family:var(--f-display);margin-right:4px;color:#34B2E3}.tp-ia svg{flex:none;margin-top:2px;color:#34B2E3}
.tp-vp.borda{min-height:200px}
.tp-lojas-w{display:grid;gap:8px}.tp-lojas-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px}
.tp-lojas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.tp-loja{border:1px solid var(--line-2);border-radius:11px;background:var(--panel);padding:8px 10px;display:grid;gap:6px;cursor:pointer;outline:none;align-content:start}
.tp-loja:hover,.tp-loja:focus-visible{border-color:var(--accent)}.tp-loja.s-crit{border-color:color-mix(in srgb,var(--crit) 70%,transparent)}.tp-loja.s-warn{border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.tp-lh{display:flex;align-items:center;gap:7px;min-width:0}.tp-lh b{font:700 13px var(--f-display);color:var(--strong)}.tp-lh .dim{margin-left:auto;font-size:11px;display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.tp-ll{list-style:none;margin:0;padding:0;display:grid;gap:3px}.tp-ll li{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;font-size:12px}.tp-ll li .mono{font-size:10.5px}
.tp-tun{display:flex;flex-wrap:wrap;gap:4px}.tp-tn{font:600 10.5px var(--f-mono);padding:1px 7px;border-radius:999px;border:1px solid var(--line-2)}
.tp-tn.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.tp-tn.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 50%,transparent);background:color-mix(in srgb,var(--crit) 10%,transparent)}
.tp-dl li .tp-tun{grid-column:1/-1}
.tp-mais summary{cursor:pointer;font-size:12px;color:var(--accent);margin:2px 0 4px}.tp-mais ul{margin-top:4px}
.tp-board .tp-loja{box-sizing:border-box;overflow:hidden}.tp-loja.tp-sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tp-vpns{list-style:none;margin:0;padding:0 9px 9px;display:grid;gap:4px}
.tp-vpns li{display:grid;grid-template-columns:6px minmax(0,1fr) auto;gap:6px;align-items:center;height:20px;padding:0 7px;border-radius:7px;border:1px dashed color-mix(in srgb,#8C103D 45%,var(--line-2));background:var(--panel-2);font:600 10.5px var(--f-mono)}
.tp-vpns li i{width:6px;height:6px;border-radius:50%;background:var(--dim)}.tp-vpns li.s-ok i{background:var(--ok)}.tp-vpns li.s-crit i{background:var(--crit)}.tp-vpns li.s-warn i{background:var(--warn)}
.tp-vpns li b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}.tp-vpns li small{font-size:9.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}

/* Infra: equipamentos fora do ar por dia (parados agora, barras por equipamento, detalhe do dia) */
.fora-pa,.fora-det{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);margin-bottom:12px}
.fora-pa-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px}.fora-pa-h b{font-family:var(--f-display);color:var(--strong)}
.fora-pa-l{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.6fr);gap:6px 12px;align-items:center;font-size:12.5px;padding:4px 0;border-top:1px solid var(--line)}
.fora-pa-l .d3-at b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fora-acao{display:flex;gap:4px;align-items:center;color:var(--fg);font-size:12px}.fora-acao svg{flex:none;color:var(--accent)}
@media (max-width:900px){.fora-pa-l{grid-template-columns:1fr auto}.fora-acao{grid-column:1/-1}}
.fora-ok{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ok);margin-bottom:10px}
.fora-c{cursor:pointer;outline:none}.fora-c.on .gb-st,.fora-c:focus-visible .gb-st{outline:2px solid var(--accent);outline-offset:1px}
.fora-g .gb-st i{border-radius:2px}
.fora-leg{flex-wrap:wrap}.fora-leg .fora-sep{width:1px;height:12px;background:var(--line);padding:0}
.fora-det{margin:12px 0 0}.fora-det-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 14px}
.fora-det-i{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:12px;padding:3px 0}
.fora-det-i i{width:10px;height:10px;border-radius:3px}.fora-det-i b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fora-det-i .mono{font-size:11px}
.inf-dica{border-bottom:1px dotted var(--dim);cursor:help}
.fora-c{position:relative}.fora-ds{position:absolute;left:50%;transform:translateX(-50%);font-size:9px;line-height:1;color:#8C103D;z-index:1}
.fora-ds-l{color:#8C103D;font-size:10px;margin-right:4px}
.fora-tab{display:grid;gap:2px}.fora-tab-l{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}.fora-tab-l:first-child{border-top:0}
.fora-tab-l>i{width:10px;height:10px;border-radius:3px;-webkit-print-color-adjust:exact;print-color-adjust:exact}.fora-tab-n{display:grid;min-width:0}.fora-tab-n b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fora-tab-n small{font-size:11px;color:var(--dim)}.fora-tab-l>.num{font-size:13px}
.fora-g .gb-st i,.fora-det-i i{-webkit-print-color-adjust:exact;print-color-adjust:exact}