/* Wizard Flow: identidade da Wizard Networks (ciano #1DE9C6, tinta #0A1417, teal #17323A). Fontes locais. */
@font-face{font-family:"Saira Condensed";font-weight:700;font-display:swap;src:url(fonts/saira-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-weight:800;font-display:swap;src:url(fonts/saira-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#EAF6F3; --painel:#FFFFFF; --painel2:#F3FAF8; --linha:#CFE3DF; --texto:#0A1417; --mudo:#566A6D;
  --acento:#0AA0B4; --acento-vivo:#1DE9C6; --ok:#0E8F6E; --aviso:#B7791F; --crit:#C53030; --foco:#0AA0B4;
  --sombra:0 1px 2px rgba(10,20,23,.06);
  --f-titulo:"Saira Condensed","Arial Narrow",sans-serif; --f-corpo:"IBM Plex Sans",Helvetica,Arial,sans-serif; --f-dado:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme="dark"]{
  --bg:#0A1417; --painel:#0F1E24; --painel2:#132830; --linha:#1E3A44; --texto:#E6F2F0; --mudo:#8FA6A8;
  --acento:#1DE9C6; --acento-vivo:#1DE9C6; --ok:#38D9A9; --aviso:#F2B544; --crit:#FF6B6B; --foco:#1DE9C6; --sombra:none;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--f-corpo);font-size:15px;line-height:1.45}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit;color:inherit}
select,input:not([type=checkbox]){background-color:var(--painel2);color:var(--texto);border:1px solid var(--linha)}
select option{background-color:var(--painel);color:var(--texto)}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

.marca{display:flex;align-items:center;gap:.55rem}
.marca-w{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#0A1417;color:#1DE9C6;font-family:var(--f-titulo);font-weight:800;font-size:20px;border:1px solid #1E3A44}
.marca-nome{font-family:var(--f-titulo);font-weight:700;font-size:1.45rem;letter-spacing:.02em}
.marca-nome b{color:var(--acento);font-weight:800}
.amb{font-family:var(--f-dado);font-size:.68rem;padding:.12rem .4rem;border:1px solid var(--aviso);color:var(--aviso);border-radius:4px;letter-spacing:.08em}

#login{min-height:100vh;display:grid;place-items:center;padding:1rem}
.cartao-login{width:min(380px,100%);background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:1.6rem;display:grid;gap:.9rem;box-shadow:var(--sombra)}
.cartao-login .sub{margin:0 0 .2rem;color:var(--mudo);font-size:.9rem}
.cartao-login label{display:grid;gap:.3rem;font-size:.85rem;color:var(--mudo)}
.cartao-login input{background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.6rem .7rem;color:var(--texto)}
.erro{margin:0;color:var(--crit);font-size:.88rem}
.btn-principal{background:var(--acento-vivo);color:#0A1417;border:0;border-radius:8px;padding:.65rem 1rem;font-weight:600;cursor:pointer}
.btn-principal:hover{filter:brightness(1.07)}

.topo{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;padding:.7rem 1.2rem;background:var(--bg);border-bottom:1px solid var(--linha)}
.topo-centro{display:flex;align-items:center}
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem 1rem;flex:1}
.campo{display:grid;gap:.15rem;font-size:.72rem;color:var(--mudo);text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-dado)}
.campo select{background:var(--painel);border:1px solid var(--linha);border-radius:8px;padding:.42rem .6rem;font-family:var(--f-corpo);font-size:.9rem;text-transform:none;letter-spacing:0;color:var(--texto);min-width:11rem}
.grupo{display:inline-flex;border:1px solid var(--linha);border-radius:8px;overflow:hidden;background:var(--painel)}
.grupo button{background:none;border:0;padding:.42rem .75rem;cursor:pointer;color:var(--mudo);font-size:.86rem}
.grupo button+button{border-left:1px solid var(--linha)}
.grupo button[aria-pressed="true"]{background:var(--acento-vivo);color:#0A1417;font-weight:600}
.acoes{display:flex;align-items:center;gap:.6rem}
.usuario{color:var(--mudo);font-size:.88rem}
.btn-sec,.btn-icone{background:var(--painel);border:1px solid var(--linha);border-radius:8px;padding:.4rem .75rem;cursor:pointer}
.btn-perfil{display:inline-flex;align-items:center;gap:.35rem;font:500 .88rem var(--f-corpo)}
.btn-perfil:hover{border-color:var(--acento)}
.btn-icone{width:36px;height:36px;padding:0;font-size:1.1rem}
.btn-sec:hover,.btn-icone:hover{border-color:var(--acento)}

.barra-tempo-device{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem 1.2rem}
.campo-grupo-filtro{display:grid;gap:.25rem}
.rotulo-campo{font:500 .68rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.tempo-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;background:var(--painel2);padding:.4rem .6rem;border-radius:8px;border:1px solid var(--linha)}
.tempo-custom input[type="datetime-local"]{background:var(--painel);border:1px solid var(--linha);border-radius:6px;padding:.3rem .5rem;color:var(--texto);font:500 .82rem var(--f-dado)}

main{max-width:1500px;margin:0 auto;padding:1rem 1.2rem 2rem;display:grid;gap:1rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:.85rem 1rem;box-shadow:var(--sombra)}
.kpi h3{margin:0;font:500 .72rem var(--f-dado);color:var(--mudo);text-transform:uppercase;letter-spacing:.08em}
.kpi-v{margin:.25rem 0 0;font-family:var(--f-titulo);font-weight:700;font-size:2.1rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-s{margin:.1rem 0 0;color:var(--mudo);font-size:.82rem;min-height:1.2em}
.kpi.alerta .kpi-v{color:var(--aviso)}.kpi.critico .kpi-v{color:var(--crit)}

.painel{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:.9rem 1rem 1rem;box-shadow:var(--sombra);min-width:0}
.painel-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.painel h2{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:1.2rem;letter-spacing:.02em}
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grafico{position:relative;min-height:290px}
.dica{position:absolute;pointer-events:none;z-index:3;background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.3rem .55rem;font:500 .8rem var(--f-dado);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.vazio{margin:.4rem 0 0;color:var(--mudo)}
.u-legend{display:none}
.uplot,.uplot *{font-family:var(--f-dado)}
.u-over{cursor:crosshair}

.tabela{display:grid;gap:.15rem}
.linha{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 3.6rem;gap:.7rem;align-items:center;padding:.32rem .35rem;border-radius:6px}
.linha:hover{background:var(--painel2)}
.linha .chave{font-family:var(--f-dado);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .barra{height:8px;border-radius:4px;background:var(--painel2);overflow:hidden;position:relative}
.linha .barra i{position:absolute;inset:0 auto 0 0;background:var(--acento-vivo);border-radius:4px}
.linha .val{text-align:right;font-family:var(--f-dado);font-size:.82rem;color:var(--mudo);font-variant-numeric:tabular-nums}
.linha.cab{color:var(--mudo);font:500 .68rem var(--f-dado);text-transform:uppercase;letter-spacing:.08em}
.linha.cab:hover{background:none}
.rodape{margin:0;color:var(--mudo);font-size:.8rem}

.filtros-painel{padding:.8rem 1rem}
.form-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem .8rem;align-items:end}
.form-filtros label{display:grid;gap:.2rem;font:500 .68rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.form-filtros input,.form-filtros select{background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.45rem .6rem;font:400 .9rem var(--f-corpo);text-transform:none;letter-spacing:0;color:var(--texto);min-width:0}
.form-filtros input::placeholder{color:var(--mudo);opacity:.7}
.botoes-filtro{display:flex;gap:.5rem}
.botoes-filtro .btn-principal{padding:.45rem 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--painel2);border:1px solid var(--acento);border-radius:999px;padding:.15rem .3rem .15rem .7rem;font:500 .8rem var(--f-dado)}
.chip b{color:var(--mudo);font-weight:500}
.chip button{background:none;border:0;cursor:pointer;color:var(--mudo);font-size:1rem;line-height:1;padding:.1rem .35rem;border-radius:50%}
.chip button:hover{color:var(--crit)}
.dica-filtro{margin:.55rem 0 0;color:var(--mudo);font-size:.78rem}
.badge{display:inline-block;margin-left:.5rem;vertical-align:middle;font:500 .62rem var(--f-dado);text-transform:uppercase;letter-spacing:.08em;color:#0A1417;background:var(--acento-vivo);padding:.12rem .45rem;border-radius:4px}
.linha.clicavel{cursor:pointer}
.linha.clicavel:hover{background:var(--painel2);box-shadow:inset 0 0 0 1px var(--acento)}
.linha.clicavel:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.busca-asn{position:relative}
.sugestoes{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:2px;background:var(--painel);border:1px solid var(--acento);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);max-height:320px;overflow:auto;min-width:280px;text-transform:none;letter-spacing:0}
.sugestoes button{display:block;width:100%;text-align:left;background:none;border:0;padding:.45rem .7rem;cursor:pointer;color:var(--texto);font:400 .85rem var(--f-corpo)}
.sugestoes button:hover,.sugestoes button:focus-visible{background:var(--painel2)}
.sugestoes small{display:block;color:var(--mudo);font:500 .72rem var(--f-dado)}
.sugestoes .vazio{padding:.5rem .7rem;margin:0}
#status-asn.velho{color:var(--aviso)}
.aba{display:grid;gap:1rem}
.aba[hidden]{display:none}
.nav-macros{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--linha);padding-bottom:.5rem;position:relative}
.menu-item{position:relative}
.btn-macro{background:var(--painel);border:1px solid var(--linha);border-radius:8px;padding:.45rem .85rem;cursor:pointer;color:var(--texto);font-family:var(--f-corpo);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.45rem;transition:all .15s ease}
.btn-macro:hover{border-color:var(--acento);background:var(--painel2)}
.btn-macro[data-ativo="true"]{background:var(--acento-vivo);border-color:var(--acento-vivo);color:#0A1417;font-weight:700}
.btn-macro .macro-seta{font-size:.72rem;color:var(--mudo);transition:transform .15s ease}
.btn-macro[data-ativo="true"] .macro-seta{color:#0A1417}
.menu-item:hover .macro-seta,.menu-item.aberto .macro-seta{transform:rotate(180deg)}
.menu-dropdown{display:none;position:absolute;top:calc(100% + 2px);left:0;z-index:50;min-width:230px;background:var(--painel);border:1px solid var(--linha);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:.35rem}
.menu-dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;background:transparent}
:root[data-theme="dark"] .menu-dropdown{background:#0F1E24;border-color:#1E3A44}
.menu-item:hover .menu-dropdown,.menu-item.aberto .menu-dropdown{display:flex;flex-direction:column;gap:.2rem}
.menu-dropdown button{background:none;border:0;border-radius:6px;padding:.5rem .75rem;cursor:pointer;color:var(--mudo);font:500 .88rem var(--f-corpo);text-align:left;display:flex;align-items:center;gap:.5rem;width:100%;white-space:nowrap}
.menu-dropdown button:hover{background:var(--painel2);color:var(--texto)}
.menu-dropdown button[aria-selected="true"]{background:rgba(29,233,198,.12);color:var(--acento-vivo);font-weight:600}
.sub-ico{font-size:.95rem}
.nav-trilha{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-family:var(--f-dado);font-size:.8rem;color:var(--mudo);background:var(--painel2);padding:.3rem .65rem;border-radius:6px;border:1px solid var(--linha)}
.trilha-macro{text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.trilha-sep{opacity:.5}
.trilha-sub{color:var(--acento)}
.form-expl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem .9rem;margin-bottom:.8rem}
.form-expl label{display:grid;gap:.2rem;font:500 .68rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.form-expl select{background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.45rem .6rem;font:400 .9rem var(--f-corpo);text-transform:none;letter-spacing:0;color:var(--texto)}
.expl-corpo{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem;align-items:start}
.expl-corpo.so-tabela{grid-template-columns:1fr}
.tab-expl .linha{grid-template-columns:14px minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) 3.4rem;gap:.55rem}
.tab-expl .linha.cab{font-size:.62rem}
.tab-expl .chave{font-size:.82rem}
.sw{display:inline-block;width:11px;height:11px;border-radius:3px}
.grade-classes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.quadro{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:.8rem .9rem .9rem;min-width:0}
.quadro h3{margin:0 0 .4rem;font:700 1.05rem var(--f-titulo);letter-spacing:.02em}
.quadro .grafico{min-height:190px}
.quadro .tabela{margin-top:.4rem}
/* ---- alarme da visao geral ---- */
.alerta-if{display:flex;align-items:center;gap:.8rem;background:var(--painel);border:1px solid var(--aviso);border-radius:12px;padding:.65rem .9rem}
.alerta-if.forte{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit) inset}
.alerta-icone{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--aviso);color:#0A1417;font:800 1rem var(--f-titulo)}
.alerta-if.forte .alerta-icone{background:var(--crit);color:#fff}
.alerta-corpo{display:grid;gap:.1rem;min-width:0;flex:1}
.alerta-corpo b{font-weight:600}
.alerta-corpo span{color:var(--mudo);font-size:.84rem;overflow-wrap:anywhere}
@media (max-width:640px){.alerta-if{flex-wrap:wrap}}
/* ---- devices, revisao de interfaces e enlaces redundantes ---- */
dialog.larga,dialog.larga:has(.largo){width:min(1100px,96vw)}
dialog.larga{max-height:94vh;overflow-y:auto}
dialog.larga .dlg-form.largo{width:auto}
dialog:has(.largo) .rv-tab{max-height:48vh;overflow:auto;border:1px solid var(--linha);border-radius:8px}
.rv-tab .tab-if select,.rv-tab .tab-if input:not([type=checkbox]){background:var(--painel2);border:1px solid var(--linha);border-radius:6px;padding:.25rem .4rem;color:var(--texto);font:400 .8rem var(--f-corpo);max-width:15rem;width:100%}
.rv-tab .tab-if td small{display:block;max-width:15rem}
.rv-tab .tab-if tr.ignorada td{opacity:.6}
.tab-if tr.ignorada td{opacity:.6}
.rv-lote{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--painel2);border:1px solid var(--linha);border-radius:10px;padding:.5rem .7rem}
.rv-lote input{background:var(--painel);border:1px solid var(--linha);border-radius:6px;padding:.3rem .5rem;color:var(--texto);min-width:13rem}
.gr-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.8rem}
.gr{background:var(--painel2);border:1px solid var(--linha);border-radius:12px;padding:.7rem .9rem;display:grid;gap:.5rem}
.gr.degradado{border-color:var(--crit)}
.gr header{font:700 1.05rem var(--f-titulo);letter-spacing:.02em}
.gr-num{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0}
.gr-num span{display:grid;font:600 .95rem var(--f-dado)}
.gr-num small{color:var(--mudo);font:500 .62rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em}
.gr ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.gr li.inativa{opacity:.55}
.verif{display:grid;gap:.5rem;border:1px solid var(--linha);border-radius:10px;padding:.7rem .8rem;background:var(--painel2)}
.verif-topo{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.verif .prog{position:relative;height:22px;border-radius:6px;background:var(--painel);border:1px solid var(--linha);overflow:hidden}
.verif .prog i{position:absolute;inset:0 auto 0 0;background:var(--acento-vivo);opacity:.35;transition:width 1s linear}
.verif .prog span{position:relative;display:block;text-align:center;font:500 .76rem var(--f-dado);line-height:22px}
.verif .diag{list-style:disc;margin:0;padding-left:1.2rem;display:grid;gap:.25rem;font-size:.86rem}
.verif .diag:empty{display:none}
.verif .diag .mudo{color:var(--mudo);list-style:none;margin-left:-1.2rem;font-size:.78rem}
.rv-vtab{max-height:210px;overflow:auto;border:1px solid var(--linha);border-radius:8px}
/* ---- interfaces e regras ---- */
.mono{font-family:var(--f-dado)}
.acoes-painel{display:flex;gap:.5rem;flex-wrap:wrap}
.sub-h{display:block;font:400 .78rem var(--f-corpo);color:var(--mudo);letter-spacing:0;margin-top:.1rem}
.barra-if{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;margin:.4rem 0 .7rem}
.campo-if{display:grid;gap:.15rem;font:500 .66rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.campo-if select{background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.42rem .6rem;font:400 .88rem var(--f-corpo);text-transform:none;letter-spacing:0;color:var(--texto);min-width:14rem;max-width:22rem}
.tab-if td.dev b{font-weight:600}
.tab-if td .herdada{color:var(--mudo);font-style:italic}
.tab-if td small{color:var(--mudo)}
.peq-check{font-size:.8rem!important;padding-bottom:.45rem}
.peq-check small{color:var(--mudo)}
.tab-if td.dev small{font-size:.7rem}
.tag.device{border-color:var(--acento-vivo);color:var(--acento-vivo)}
.tag.global{color:var(--mudo)}
.barra-if input[type=search]{flex:1;min-width:14rem;max-width:26rem;background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.42rem .65rem;color:var(--texto)}
.rolagem{overflow-x:auto}
.tab-if{width:100%;border-collapse:collapse;font-size:.86rem}
.tab-if th{text-align:left;font:500 .66rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em;color:var(--mudo);padding:.35rem .55rem;border-bottom:1px solid var(--linha);white-space:nowrap}
.tab-if td{padding:.42rem .55rem;border-bottom:1px solid var(--linha);vertical-align:top}
.tab-if tbody tr:hover{background:var(--painel2)}
.tab-if .num{text-align:right;white-space:nowrap}
.tab-if td small{display:block;color:var(--mudo);font:400 .72rem var(--f-corpo)}
.tab-if tr.inativa td{opacity:.55}
.tag{display:inline-block;font:500 .68rem var(--f-dado);padding:.1rem .45rem;border-radius:4px;border:1px solid var(--linha);color:var(--mudo);white-space:nowrap}
.tag.externa{border-color:var(--acento);color:var(--acento)}
.tag.interna{color:var(--texto)}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.tag.crit{border-color:var(--crit);color:var(--crit)}
.tag.aviso{border-color:var(--aviso);color:var(--aviso)}
.tag.manual{background:var(--acento-vivo);border-color:var(--acento-vivo);color:#0A1417}
.tag.regra{border-color:var(--acento);color:var(--texto)}
.erro-txt{color:var(--crit)}
.btn-sec.peq{padding:.22rem .55rem;font-size:.78rem}
.btn-sec.perigo:hover{border-color:var(--crit);color:var(--crit)}
.btn-sec:disabled{opacity:.45;cursor:not-allowed}
.rg-lista{display:grid;gap:.45rem}
.rg{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.7rem;align-items:center;background:var(--painel2);border:1px solid var(--linha);border-radius:10px;padding:.55rem .75rem}
.rg.inativa{opacity:.6}
.rg-n{font:700 1.3rem var(--f-titulo);color:var(--mudo);text-align:center}
.rg-corpo{display:grid;gap:.15rem;min-width:0}
.rg-corpo code{font:500 .8rem var(--f-dado);color:var(--acento);overflow-wrap:anywhere}
.rg-corpo small{color:var(--mudo);font-size:.78rem}
.rg-acoes{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
dialog{background:var(--painel);color:var(--texto);border:1px solid var(--acento);border-radius:14px;padding:0;width:min(560px,94vw);box-shadow:0 18px 60px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(5,10,12,.6)}
.dlg-form{display:grid;gap:.75rem;padding:1.2rem 1.3rem}
.dlg-form.largo{width:min(760px,94vw)}
dialog:has(.largo){width:min(780px,94vw)}
.dlg-form h3{margin:0;font:700 1.35rem var(--f-titulo);letter-spacing:.02em}
.dlg-form label{display:grid;gap:.25rem;font:500 .68rem var(--f-dado);text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.dlg-form input:not([type=checkbox]),.dlg-form select{background:var(--painel2);border:1px solid var(--linha);border-radius:8px;padding:.5rem .65rem;font:400 .92rem var(--f-corpo);text-transform:none;letter-spacing:0;color:var(--texto)}
.dlg-form input.mono{font-family:var(--f-dado)}
.dlg-info{margin:0;color:var(--mudo);font-size:.86rem}
.dlg-duas{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.dlg-botoes{display:flex;gap:.5rem;align-items:center;margin-top:.3rem}
.espaco{flex:1}
.marca-check{display:flex!important;align-items:center;gap:.5rem!important;text-transform:none!important;letter-spacing:0!important;font:400 .9rem var(--f-corpo)!important;color:var(--texto)!important}
.previa{display:grid;gap:.3rem}
.dica-filtro.erro{color:var(--crit)}
.previa .rolagem{max-height:220px;overflow:auto;border:1px solid var(--linha);border-radius:8px}
.previa .rolagem:empty{display:none}
.hm-estado{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.6rem .8rem;border:1px solid var(--linha);border-radius:10px;background:var(--painel2)}
.hm-estado b{font-size:.95rem}
.hm-estado.ativo{border-color:var(--ok)}.hm-estado.excecao{border-color:var(--crit)}.hm-estado.em{border-color:var(--aviso)}
.hm-tab td{vertical-align:top}.hm-tab td small{display:block;color:var(--mudo)}
.hm-tab .hm-nao{white-space:nowrap}
.hm-acao{display:flex;gap:.5rem;align-items:flex-end;padding:.6rem .8rem;border:1px solid var(--acento);border-radius:10px;background:var(--painel2)}
.hm-acao label{flex:1}
.hm-hist summary{cursor:pointer;color:var(--mudo);font-size:.86rem}
.hm-hist ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.2rem;font-size:.82rem;max-height:180px;overflow:auto}
.hm-hist li small{color:var(--mudo)}
.dlg-form input.hm-largo{width:100%}
.tag-role{display:inline-block;padding:.15rem .45rem;border-radius:4px;font:600 .7rem var(--f-dado);text-transform:uppercase;letter-spacing:.05em}
.tag-role.owner{background:#1DE9C6;color:#0A1417}
.tag-role.superadm{background:#38D9A9;color:#0A1417}
.tag-role.adm{background:var(--painel2);border:1px solid var(--acento);color:var(--acento)}
.tag-role.user{background:var(--painel2);border:1px solid var(--linha);color:var(--mudo)}
.btn-acessar{background:var(--acento-vivo);color:#0A1417;border:0;border-radius:6px;padding:.24rem .65rem;font:600 .8rem var(--f-corpo);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.btn-acessar:hover{filter:brightness(1.1)}
.dev-pill{display:inline-block;background:var(--painel2);border:1px solid var(--linha);border-radius:4px;padding:.1rem .35rem;font:500 .75rem var(--f-dado);margin:.1rem .2rem .1rem 0}
.tag-tipo{display:inline-block;padding:.15rem .45rem;border-radius:4px;font:600 .72rem var(--f-dado);text-transform:uppercase;letter-spacing:.05em}
.tag-tipo.tag-cgnat{background:rgba(242,181,68,.15);border:1px solid var(--aviso);color:var(--aviso)}
.tag-tipo.tag-loopback{background:rgba(155,140,255,.15);border:1px solid #9B8CFF;color:#9B8CFF}
.tag-tipo.tag-ip_fixo{background:rgba(56,217,169,.15);border:1px solid var(--ok);color:var(--ok)}
.tag-tipo.tag-infra{background:rgba(77,163,255,.15);border:1px solid #4DA3FF;color:#4DA3FF}
.tag-prot{display:inline-flex;align-items:center;gap:.3rem;font:500 .72rem var(--f-dado);padding:.15rem .45rem;border-radius:4px}
.tag-prot.sim{background:rgba(56,217,169,.12);border:1px solid var(--ok);color:var(--ok)}
.tag-prot.nao{background:var(--painel2);border:1px dashed var(--linha);color:var(--mudo)}
/* Estilos do Motor de Deteccao DDoS & Mitigacao */
@keyframes pulso-ataque {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
.badge-inc { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 6px; font: 700 .72rem var(--f-dado); text-transform: uppercase; letter-spacing: .05em; }
.badge-inc.ativo { background: rgba(255, 77, 77, .15); border: 1px solid var(--crit); color: var(--crit); animation: pulso-ataque 2s infinite; }
.badge-inc.mitigado { background: rgba(29, 233, 198, .15); border: 1px solid var(--acento); color: var(--acento); }
.badge-inc.encerrado { background: var(--painel2); border: 1px solid var(--linha); color: var(--mudo); }
.dot-alerta { width: 8px; height: 8px; border-radius: 50%; background: var(--crit); display: inline-block; }
.dot-mitig { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); display: inline-block; }
.dot-encerr { width: 8px; height: 8px; border-radius: 50%; background: var(--mudo); display: inline-block; }

.vetor-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .45rem; border-radius: 4px; font: 600 .75rem var(--f-dado); }
.vetor-dns_amp { background: rgba(255, 140, 0, .15); border: 1px solid #FF8C00; color: #FFA500; }
.vetor-ntp_amp { background: rgba(255, 215, 0, .15); border: 1px solid #FFD700; color: #FFD700; }
.vetor-udp_amp, .vetor-udp_flood { background: rgba(255, 77, 77, .15); border: 1px solid var(--crit); color: var(--crit); }
.vetor-syn_flood { background: rgba(155, 140, 255, .15); border: 1px solid #9B8CFF; color: #9B8CFF; }
.vetor-icmp_flood { background: rgba(77, 163, 255, .15); border: 1px solid #4DA3FF; color: #4DA3FF; }
.vetor-volumetrico { background: rgba(255, 51, 102, .15); border: 1px solid #FF3366; color: #FF3366; }
.vetor-personalizado { background: rgba(0, 191, 255, .15); border: 1px solid #00BFFF; color: #00BFFF; }
.vetor-spoofing { background: rgba(244, 63, 94, .15); border: 1px solid #f43f5e; color: #fb7185; }
.vetor-copp { background: rgba(168, 85, 247, .15); border: 1px solid #a855f7; color: #c084fc; }
.vetor-outbound { background: rgba(245, 158, 11, .15); border: 1px solid #f59e0b; color: #fbbf24; }
.vetor-carpet { background: rgba(217, 70, 239, .15); border: 1px solid #d946ef; color: #f472b6; }

.tag-dir { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; display: inline-flex; align-items: center; letter-spacing: 0.3px; }
.tag-dir.inbound { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.45); color: #4ade80; }
.tag-dir.outbound { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.45); color: #fbbf24; }

.chip-pol {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--painel2);
  border: 1px solid var(--acento);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font: 500 0.78rem var(--f-dado);
  color: var(--texto);
}
.chip-pol b {
  color: var(--mudo);
  font-weight: 600;
  margin-right: 2px;
}
.chip-pol.padrao {
  border-color: var(--linha);
  color: var(--mudo);
}

.btn-mitigar { background: rgba(29, 233, 198, .15); border: 1px solid var(--acento); color: var(--acento); border-radius: 6px; padding: .25rem .6rem; font: 600 .78rem var(--f-corpo); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.btn-mitigar:hover { background: var(--acento); color: #0A1417; }
.btn-encerrar { background: var(--painel2); border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: .25rem .6rem; font: 500 .78rem var(--f-corpo); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.btn-encerrar:hover { border-color: var(--ok); color: var(--ok); }
.filtro-estado-btn { background: var(--painel2); border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: .3rem .75rem; font: 500 .82rem var(--f-corpo); cursor: pointer; transition: all .15s ease; }
.filtro-estado-btn:hover:not(.ativo) { border-color: var(--acento); color: var(--acento); background: rgba(29, 233, 198, 0.08); }
.filtro-estado-btn.ativo { background: var(--acento); color: #0A1417; border-color: var(--acento); font-weight: 700; }

/* Gestão Avançada de Políticas de Detecção DDoS */
.filtro-pol-btn { background: var(--painel2); border: 1px solid var(--linha); color: var(--texto); border-radius: 6px; padding: .28rem .7rem; font: 500 .8rem var(--f-corpo); cursor: pointer; transition: all .15s ease; }
.filtro-pol-btn:hover:not(.ativo) { border-color: var(--acento); color: var(--acento); }
.filtro-pol-btn.ativo { background: var(--acento); color: #0A1417; border-color: var(--acento); font-weight: 700; }

.grade-editor-pol { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
.card-resumo-regra { background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; padding: 1.25rem; position: sticky; top: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.25); }

/* Campos do Construtor de Políticas (Full-Page Builder) */
.col-form-pol label:not(.marca-check) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 1rem !important;
}

.col-form-pol label:not(.marca-check):last-child {
  margin-bottom: 0 !important;
}

.ed-rotulo {
  display: block;
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.col-form-pol input:not([type=checkbox]),
.col-form-pol select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--painel2) !important;
  color: var(--texto) !important;
  border: 1px solid var(--linha) !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.85rem !important;
  font-family: var(--f-corpo) !important;
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  min-height: 2.75rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.col-form-pol select {
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%231DE9C6' d='M2 1l5 5 5-5 1.5 1.5L7 9 0.5 2.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 11px 8px !important;
  padding-right: 2.4rem !important;
}

.col-form-pol select option {
  background-color: var(--painel) !important;
  color: var(--texto) !important;
  padding: 0.5rem 0.75rem;
}

.col-form-pol input:focus,
.col-form-pol select:focus {
  outline: none !important;
  border-color: var(--acento) !important;
  box-shadow: 0 0 0 2px rgba(29, 233, 198, 0.25) !important;
}

.col-form-pol input.mono {
  font-family: var(--f-dado) !important;
  font-size: 0.95rem !important;
}

.col-form-pol label small {
  display: block;
  font-family: var(--f-corpo);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--mudo);
  line-height: 1.35;
  margin-top: 0.2rem;
}

.col-form-pol .dlg-duas {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem !important;
  width: 100% !important;
  align-items: start !important;
  margin-bottom: 0.95rem !important;
}

.col-form-pol .dlg-duas label {
  margin-bottom: 0 !important;
}

.box-cfg-det {
  background: var(--painel2);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-top: 0.9rem;
}

.box-cfg-det input:not([type=checkbox]),
.box-cfg-det select {
  background-color: var(--painel) !important;
}

.box-cfg-det .dlg-duas {
  margin-bottom: 0.9rem !important;
}

.box-cfg-det .dlg-duas:last-child {
  margin-bottom: 0 !important;
}

.btn-modo-pol { background: var(--painel2); border: 1px solid var(--linha); color: var(--texto); border-radius: 8px; padding: .45rem .85rem; font: 600 .82rem var(--f-corpo); cursor: pointer; transition: all .15s ease; }
.btn-modo-pol:hover { border-color: var(--acento); }
.btn-modo-pol.ativo { background: var(--acento); color: #0A1417; border-color: var(--acento); font-weight: 700; box-shadow: 0 2px 8px rgba(29, 233, 198, 0.25); }

.sev-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.sev-tag.critica { background: rgba(255, 77, 77, .18); color: var(--crit); border: 1px solid rgba(255, 77, 77, .4); }
.sev-tag.alta { background: rgba(255, 140, 0, .18); color: #FFA500; border: 1px solid rgba(255, 140, 0, .4); }
.sev-tag.media { background: rgba(255, 215, 0, .18); color: #FFD700; border: 1px solid rgba(255, 215, 0, .4); }
.sev-tag.baixa { background: rgba(0, 191, 255, .18); color: #00BFFF; border: 1px solid rgba(0, 191, 255, .4); }

.modo-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; font-size: .74rem; font-weight: 600; background: var(--painel2); border: 1px solid var(--linha); }

.card-tpl-item { background: var(--painel2); border: 1px solid var(--linha); border-radius: 8px; padding: .85rem; cursor: pointer; transition: all .2s ease; display: flex; flex-direction: column; justify-content: space-between; }
.card-tpl-item:hover { border-color: var(--acento); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

@media (max-width:960px){.grade-editor-pol { grid-template-columns: 1fr; }}
@media (max-width:640px){.dlg-duas{grid-template-columns:1fr}.rg{grid-template-columns:1.6rem minmax(0,1fr)}.rg-acoes{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:900px){.expl-corpo,.grade-classes{grid-template-columns:1fr}}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.grade{grid-template-columns:1fr}.topo{padding:.6rem .8rem}main{padding:.8rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}