/* condomínio: selos e lista UTP */
.badge-condo{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:6px;vertical-align:middle;margin-left:4px}
.badge-fibra{background:#EAF8F1;color:var(--verde)}
.badge-utp{background:#E6F4FC;color:var(--azul-esc)}
.num-utp{font-size:22px;font-weight:800;color:var(--azul-esc)}
.utp-list .utp-thead{display:grid;grid-template-columns:140px 1fr 78px;gap:14px;padding:9px 16px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);border-bottom:1px solid var(--linha)}
.utp-row{display:grid!important;grid-template-columns:140px 1fr 78px;gap:14px;align-items:center;padding:11px 16px}
.utp-row .utp-uni{font-weight:700;color:var(--tinta)}
.utp-row .c-ed{display:flex;gap:6px;justify-content:flex-end}
.utp-row .c-ed button{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;border:1px solid var(--linha);color:var(--suave);background:#fff}
.utp-row .c-ed button:hover{border-color:var(--azul);color:var(--azul-esc)}
.utp-row .c-ed button.del:hover{border-color:var(--coral);color:var(--coral)}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinta);font-weight:600;cursor:pointer;margin-top:4px}
.chk input{width:17px;height:17px;accent-color:var(--azul-esc)}

.empty{padding:50px 20px;text-align:center;color:var(--suave);grid-column:1/-1}
.empty svg{opacity:.35;margin-bottom:12px}
.empty p{font-size:14px;margin-bottom:14px}

.detail-screen{display:none;max-width:1340px;margin:0 auto;padding:22px}
.detail-screen.show{display:block}
.dback{display:inline-flex;align-items:center;gap:7px;color:var(--azul-esc);font-weight:700;font-size:13.5px;margin-bottom:16px}
.dback:hover{text-decoration:underline}
.dhead{background:linear-gradient(120deg,var(--azul-esc),var(--tinta));border-radius:var(--r);padding:22px 24px;color:#fff;margin-bottom:20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.dhead .tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#BFE6FA;font-weight:700}
.dhead h2{font-size:26px;font-weight:800;margin-top:3px}
.dhead .loc{font-size:13px;color:#D7EAF7;margin-top:5px;display:flex;align-items:center;gap:6px}
.dhead .dobs{font-size:12.5px;color:#CFE6F6;margin-top:7px;display:flex;align-items:flex-start;gap:7px;max-width:560px;line-height:1.4;background:rgba(255,255,255,.08);padding:7px 11px;border-radius:8px}
.dhead .dobs svg{flex:none;margin-top:1px}
/* painel da PON (quem divide o SLOT/PON desta caixa) */
.dhead .dpon{margin-top:8px;max-width:620px;display:flex;flex-direction:column;gap:8px}
.dpon-bloco{background:rgba(255,255,255,.08);border-left:3px solid #9FC6E4;border-radius:8px;padding:8px 11px}
.dpon.lotada .dpon-bloco,.dpon.semsaldo .dpon-bloco{border-left-color:#C9A6E0;background:rgba(201,166,224,.16)}
.dpon-lin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#EAF4FB}
.dpon-lin b{color:#fff;font-weight:800}
.dpon-num{color:#CFE6F6}
.dpon-tag{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:99px;letter-spacing:.02em}
.dpon-tag.lotada{background:#E9D8F5;color:#4E2570}
.dpon-tag.ok{background:rgba(255,255,255,.16);color:#EAF4FB}
.dpon-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden;margin:6px 0 2px}
.dpon-bar>i{display:block;height:100%;border-radius:6px;background:#7FD8AE}
.dpon.lotada .dpon-bar>i,.dpon.semsaldo .dpon-bar>i{background:#C9A6E0}
.dpon-obs{font-size:11.5px;color:#EDD9FF;margin-top:4px}
.dpon-obs b{color:#fff}
.dpon-ctos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:#CFE6F6}
.dpon-ctos button{font-size:11.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border-radius:99px;padding:3px 10px}
.dpon-ctos button:hover{background:rgba(255,255,255,.28)}
.dupwarn.pon{color:#4E2570;background:#E9D8F5}
/* mapa das CTOs da mesma PON (rodapé da tela de detalhe) */
.dmapa-box{background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden;margin-top:16px}
.dmapa-hd{padding:13px 18px;border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dmapa-hd h3{font-size:14.5px;color:var(--tinta);display:flex;align-items:center;gap:8px}
.dmapa-sub{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--suave)}
.dmapa-sub span{background:var(--papel);border-radius:99px;padding:3px 10px}
.dmapa-sub span.lot{background:var(--roxo-bg);color:var(--roxo)}
.dmapa-sub b{color:var(--tinta)}
.dmapa-leg{margin-left:auto}
.dmapa-leg i.atual{background:#fff;border:3px solid #FFD166;box-sizing:border-box;width:12px;height:12px}
.dmapa{height:420px;width:100%;background:#E8EEF5}
.dmapa-hint{padding:9px 18px;border-top:1px solid var(--linha);font-size:11.5px}
/* nesta tela os nomes das CTOs ficam sempre visíveis (são poucas) */
.cto-lbl-pon{opacity:1!important}
@media(max-width:820px){ .dmapa{height:300px} .dmapa-leg{margin-left:0} }
.dhead .ring{width:96px;height:96px;position:relative;flex:none;margin-left:auto}
.dhead .ring svg{transform:rotate(-90deg)}
.dhead .ring .c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.dhead .ring .c .b{font-size:26px;font-weight:800} .dhead .ring .c .s{font-size:10px;color:#BFE6FA}
.dhead .acts{display:flex;gap:9px;flex-wrap:wrap;width:100%;margin-top:4px}
.btn{padding:9px 14px;border-radius:9px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.btn-w{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-w:hover{background:rgba(255,255,255,.26)}
.btn-azul{background:var(--azul-esc);color:#fff} .btn-azul:hover{background:#063f78}
.btn-coral{background:var(--coral);color:#fff} .btn-coral:hover{background:#d83a4c}
.btn-ghost{background:#fff;color:var(--texto);border:1.5px solid var(--linha)} .btn-ghost:hover{border-color:var(--azul)}

.splitter{background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:16px;overflow:hidden}
.splitter .sh{padding:14px 18px;background:var(--papel);border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.splitter .sh .ic{width:30px;height:30px;border-radius:8px;background:#E3F4FC;color:var(--azul-esc);display:grid;place-items:center;flex:none}
.splitter .sh .ti{font-size:14.5px;font-weight:800;color:var(--tinta)}
.splitter .sh .me{font-size:12px;color:var(--suave)}
.splitter .sh .sp{flex:1}
.splitter .sh .mini{font-size:11.5px;padding:4px 10px;border-radius:99px;font-weight:700}
.splitter .sh button.del{font-size:12px;color:var(--suave);padding:7px;border-radius:7px}
.splitter .sh button.del:hover{background:#fff;color:var(--coral)}
.ports{padding:0}
.ports .thead{display:grid;grid-template-columns:44px minmax(130px,1.5fr) minmax(92px,1fr) 50px 50px minmax(64px,1fr) 66px 66px 82px 128px;gap:9px;
  padding:9px 16px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--suave);
  background:#FBFCFE;border-bottom:1px solid var(--linha)}
.ports .thead .ar{text-align:center}
.port{display:grid;grid-template-columns:44px minmax(130px,1.5fr) minmax(92px,1fr) 50px 50px minmax(64px,1fr) 66px 66px 82px 128px;gap:9px;
  align-items:center;padding:9px 16px;transition:.12s;font-size:13px}
.port:hover{background:var(--papel)}
.port + .port{border-top:1px solid #F2F5F9}
.port .pn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;margin:0 auto}
.port.livre .pn{background:var(--verde-bg);color:var(--verde)}
.port.ocup .pn{background:#E9EEF4;color:var(--tinta-2)}
.port .c-cli{font-weight:700;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.port .c-cli.vazio{color:var(--verde);font-weight:700}
.port .c-onu{color:var(--texto);font-family:ui-monospace,monospace;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
/* cliente/ONU sempre em CAIXA ALTA na exibição (dados novos já salvam maiúsculo) */
.uni-lista .c-cli{text-transform:uppercase}
.pv-cli-nome{text-transform:uppercase}
.port .c-onu.em{color:var(--suave)}
.port .c-sp{text-align:center;color:var(--texto);font-weight:600;font-variant-numeric:tabular-nums}
.port .c-sp.em{color:#C2CEDB;font-weight:400}
/* OBS. / HISTÓRICO: célula clicável — texto da observação + contador de registros da porta */
.port .c-obs{display:flex;align-items:center;gap:6px;min-width:0;cursor:pointer;border-radius:8px;padding:3px 6px;margin:-3px -6px;transition:.12s}
.port .c-obs:hover{background:#fff;box-shadow:0 0 0 1.5px var(--azul)}
.port .c-obs .txt{flex:1;min-width:0;color:var(--suave);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.port .c-obs.has .txt{color:var(--amber)}
.port .c-obs .cnt{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--azul-esc);background:#E3F4FC;padding:2px 7px;border-radius:99px;line-height:1.3}
.port .c-obs .cnt.zero{color:#9AAABB;background:#EEF2F7}
/* modal de histórico da porta */
.hp-box .mh h3{display:flex;align-items:center;gap:10px}
.hp-num{width:32px;height:32px;border-radius:9px;background:#E9EEF4;color:var(--tinta-2);display:grid;place-items:center;font-size:14px;font-weight:800}
.hp-sub{font-size:12px;color:var(--suave);margin-top:3px}
.hp-estado{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;margin-bottom:14px}
.hp-estado>div{background:#F7FAFD;border:1px solid #E6EDF4;border-radius:10px;padding:9px 12px;min-width:0}
.hp-estado .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--suave)}
.hp-estado .v{font-size:13px;font-weight:700;color:var(--tinta);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.hp-estado .v.ok{color:var(--verde)} .hp-estado .v.mono{font-family:ui-monospace,monospace;font-size:12px}
.hp-obs{display:flex;align-items:flex-start;gap:10px;background:var(--amber-bg);border:1px solid #F0DDB0;border-radius:10px;padding:10px 13px;margin-bottom:14px;font-size:13px;color:#8A5A00}
.hp-obs.vazia{background:var(--papel);border-color:var(--linha);color:var(--suave)}
.hp-obs svg{flex:none;margin-top:1px} .hp-obs>div{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.hp-obs b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#B07400;margin-bottom:2px} .hp-obs.vazia b{color:var(--suave)}
.hp-obs .hp-ed{flex:none;font-size:12px;font-weight:700;color:var(--azul-esc);white-space:nowrap;padding:2px 6px;border-radius:6px} .hp-obs .hp-ed:hover{background:#fff}
.hp-nova{display:flex;gap:8px;margin-bottom:14px}
.hp-nova input{flex:1;border:1.5px solid var(--linha);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--tinta);min-width:0}
.hp-nova input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,175,233,.13)}
.hp-nova button{background:var(--azul-esc);color:#fff;font-weight:700;font-size:12.5px;padding:0 14px;border-radius:9px;white-space:nowrap}
.hp-nova button:hover{background:#063f78} .hp-nova button:disabled{opacity:.6}
.hp-filtros{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.hp-filtros .chip{font-size:11.5px;padding:4px 11px}
.hp-filtros .tot{margin-left:auto;font-size:12px;color:var(--suave);font-weight:600}
.hp-lista{border:1px solid var(--linha);border-radius:10px;max-height:46vh;overflow-y:auto}
.hp-ev{display:grid;grid-template-columns:30px 1fr auto;gap:10px;padding:9px 12px;align-items:start;font-size:12.5px}
.hp-ev + .hp-ev{border-top:1px solid #F2F5F9}
.hp-ev .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:900}
.hp-ev .ic.add{background:var(--verde-bg);color:var(--verde)} .hp-ev .ic.rem{background:var(--vermelho-bg);color:var(--vermelho)}
.hp-ev .ic.tr{background:#E3F4FC;color:var(--azul-esc)} .hp-ev .ic.mv{background:#EEEAFB;color:#6C4FD8}
.hp-ev .ic.ed{background:var(--amber-bg);color:var(--amber)} .hp-ev .ic.nt,.hp-ev .ic.un{background:#EEF2F7;color:#5B6B7B}
.hp-ev .t{color:var(--tinta);font-weight:700} .hp-ev .d{color:var(--texto);margin-top:1px;word-break:break-word;white-space:pre-wrap}
.hp-ev .meta{text-align:right;color:var(--suave);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.hp-ev .meta b{display:block;color:var(--tinta-2);font-weight:700}
.hp-mais{display:block;width:100%;padding:9px 12px;text-align:center;font-size:12px;color:var(--azul-esc);font-weight:700;background:#FBFCFE;border-top:1px solid var(--linha)}
.hp-mais:hover{background:#F1F6FB}
.hp-vazio{padding:22px 14px;text-align:center;color:var(--suave);font-size:12.5px;line-height:1.5}
.hp-foot{align-items:center} .hp-foot .hint{flex:1;margin:0;min-width:200px}
@media(max-width:600px){ .hp-estado{grid-template-columns:1fr} .hp-foot .hint{display:none} }
/* ===== colunas de SINAL (Último / Atual / Alarme) ===== */
.port .c-sig{text-align:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.port .c-sig.em{color:#C2CEDB;font-weight:400}
.sig-pill{display:inline-block;min-width:54px;padding:3px 6px;border-radius:7px;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.sig-bom{background:#EAF8F1;color:var(--verde)}
.sig-med{background:var(--amber-bg);color:var(--amber)}
.sig-ruim{background:var(--vermelho-bg);color:var(--vermelho)}
.sig-loading{display:inline-block;width:50px;height:13px;border-radius:6px;background:linear-gradient(90deg,#EEF2F7 25%,#E3E9F0 50%,#EEF2F7 75%);background-size:200% 100%;animation:sigshim 1.1s linear infinite}
@keyframes sigshim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.alm-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap}
.alm-pill .dot{width:7px;height:7px;border-radius:50%;flex:none}
.alm-online{background:#EAF8F1;color:var(--verde)} .alm-online .dot{background:var(--verde)}
.alm-dying{background:var(--amber-bg);color:#8A5A00} .alm-dying .dot{background:var(--amber)}
.alm-loss{background:var(--vermelho-bg);color:var(--vermelho)} .alm-loss .dot{background:var(--vermelho)}
.alm-off{background:#E9EEF4;color:var(--suave)} .alm-off .dot{background:#B5C0CD}
.btn-sinal{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#fff;background:var(--azul-esc);
  padding:8px 14px;border-radius:9px;white-space:nowrap;transition:.15s;border:none;cursor:pointer}
.btn-sinal:hover{background:#013a6e}
.btn-sinal:disabled{opacity:.6;cursor:default}
.btn-sinal svg{flex:none}
.sig-ts{font-size:10px;color:var(--suave);font-weight:500;display:block;margin-top:1px}
.spin{animation:spin360 .8s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.port .c-ed{display:flex;gap:4px;justify-content:flex-end;align-items:center}
.port .c-ed button{width:28px;height:28px;border-radius:8px;color:var(--suave);display:grid;place-items:center;border:none;background:none;cursor:pointer}
.port .c-ed button:hover{background:#fff;color:var(--azul-esc);box-shadow:var(--sombra)}
/* histórico de sinal */
.hist-agora{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.hist-agora-item{background:#F7FAFD;border:1px solid #E6EDF4;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.hist-agora-item small{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--suave);min-width:60px}
.hist-agora-item .ts{margin-left:auto;font-size:11.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.hist-periodo{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.hist-periodo .chip{font-size:11.5px;padding:4px 11px}
#histChart{margin:2px 0 12px}
#histChart svg{display:block;width:100%;height:auto}
.histlist{max-height:250px;overflow:auto;border:1px solid var(--linha);border-radius:var(--r-sm)}
.histlist .hrow{display:grid;grid-template-columns:1fr 84px 112px;gap:8px;align-items:center;padding:7px 12px;font-size:12.5px}
.histlist .hrow + .hrow{border-top:1px solid #F2F5F9}
.histlist .hrow .hd{color:var(--suave);font-variant-numeric:tabular-nums}
.histhint{color:var(--suave);font-size:12px;padding:10px 2px}
.port .c-ed button.bsig:hover{color:var(--verde)}
.port .c-ed button:disabled{opacity:.3;cursor:default;background:none!important;box-shadow:none!important;color:var(--suave)!important}
.port .c-ed button.bsig .spin{animation:spin360 .8s linear infinite}
.port.dup{background:#FDECEE;box-shadow:inset 3px 0 0 var(--vermelho)}
.port.dup:hover{background:#FBE3E6}
.port.dup .pn{background:var(--vermelho-bg)!important;color:var(--vermelho)!important;position:relative}
.port.dup .pn::after{content:"!";position:absolute;top:-5px;right:-5px;width:15px;height:15px;background:var(--vermelho);color:#fff;border-radius:50%;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.dupwarn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--vermelho);background:var(--vermelho-bg);padding:4px 10px;border-radius:99px;white-space:nowrap}
.dupwarn.padrao{color:var(--amber);background:var(--amber-bg)}
.splitter .sh button.sp-act.ajustar{color:#8A5A00;background:var(--amber-bg)}
/* modal ajustar portas do splitter */
.aj-list{display:flex;flex-direction:column;gap:5px;max-height:320px;overflow-y:auto;border:1px solid var(--linha);border-radius:10px;padding:8px}
.aj-row{display:grid;grid-template-columns:22px 40px 1fr auto;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--tinta)}
.aj-row:hover{background:#F6F9FC}
.aj-row.marcada{background:#FDECEE}
.aj-row .pn{width:34px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:#E9EEF4;color:var(--tinta-2)}
.aj-row.livre .pn{background:var(--verde-bg);color:var(--verde)}
.aj-row .cli{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aj-row .cli small{display:block;font-size:11px;color:var(--suave)}
.aj-row .cli.vazio{color:var(--suave);font-style:italic}
.aj-row .tg{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px;white-space:nowrap}
.aj-row .tg.sob{background:var(--amber-bg);color:#8A5A00}
.aj-row .tg.rep{background:var(--vermelho-bg);color:var(--vermelho)}
.aj-row .tg.ocu{background:#E9EEF4;color:var(--tinta-2)}
.aj-resumo{margin-top:12px;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:700;background:#EEF1F4;color:var(--tinta-2)}
.aj-resumo.ok{background:var(--verde-bg);color:var(--verde)}
.aj-resumo.warn{background:var(--amber-bg);color:#8A5A00}
.aj-resumo.err{background:var(--vermelho-bg);color:var(--vermelho)}
.dupbanner{display:flex;align-items:flex-start;gap:9px;background:var(--vermelho-bg);color:var(--vermelho);border:1px solid #F5C2C7;border-radius:10px;padding:11px 13px;margin-bottom:16px;font-size:13px;font-weight:600;line-height:1.4}
.dupbanner svg{flex:none;margin-top:1px}
.implocsum{display:flex;flex-direction:column;gap:8px}
.implocsum > div{padding:10px 13px;border-radius:9px;font-size:13px;font-weight:600}
.implocsum .ok{background:#EAF8F1;color:var(--verde)}
.implocsum .warn{background:var(--amber-bg);color:var(--amber)}
/* porta livre = linha verde */
.port.free-row{background:#EAF8F1;box-shadow:inset 3px 0 0 var(--verde)}
.port.free-row:hover{background:#DEF3E8}
/* ONU repetida em clientes diferentes */
.c-onu.onudup{color:var(--vermelho)!important;font-weight:700;display:inline-flex;align-items:center;gap:4px}
/* porta destacada pela busca */
.port.hit{background:#FFF7DA!important;box-shadow:inset 3px 0 0 var(--amber);animation:hitpulse 1s ease 2}
@keyframes hitpulse{0%,100%{background:#FFF7DA}50%{background:#FDEDB0}}
/* botão converter splitter em CTO */
.splitter .sh button.sp-act{font-size:11px;font-weight:700;color:var(--azul-esc);background:#E3F4FC;padding:5px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.splitter .sh button.sp-act:hover{background:#cdebf9}

/* ===== painel de progresso fixo na borda direita (sinal de 1 CTO, de todas, varredura do servidor) ===== */
.prog-dock{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1450;width:340px;max-width:calc(100vw - 20px);background:#fff;border:1px solid var(--linha);border-right:none;border-radius:16px 0 0 16px;box-shadow:-12px 0 40px rgba(11,32,52,.28);padding:14px 14px 12px 16px;animation:pd-in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pd-in{from{opacity:0;transform:translate(24px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.prog-dock.min{width:auto;padding:10px 12px 10px 14px} .prog-dock.min .pd-txt,.prog-dock.min .pd-bar,.prog-dock.min .pd-kpis,.prog-dock.min .pd-btns [data-act=parar],.prog-dock.min .pd-btns [data-act=fechar]{display:none}
.pd-top{display:flex;align-items:center;gap:12px}
.pd-ring{--p:0;width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--azul) calc(var(--p)*1%),#E4ECF5 0);position:relative}
.pd-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.pd-ring span{position:relative;font-size:12px;font-weight:800;color:var(--tinta)}
.pd-ring.done{background:conic-gradient(var(--verde) 100%,var(--verde) 0)} .pd-ring.cancel{background:conic-gradient(var(--amber) calc(var(--p)*1%),#E4ECF5 0)}
.pd-ring.indet{background:conic-gradient(var(--azul) 30%,#E4ECF5 0);animation:pd-spin 1.1s linear infinite} .pd-ring.indet span{animation:pd-unspin 1.1s linear infinite}
@keyframes pd-spin{to{transform:rotate(360deg)}} @keyframes pd-unspin{to{transform:rotate(-360deg)}}
.pd-txt{flex:1;min-width:0} .pd-txt b{display:block;font-size:13.5px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-txt small{display:block;font-size:11.5px;color:var(--suave);margin-top:2px}
.pd-txt .pd-atual{color:var(--azul-esc);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-btns{display:flex;flex-direction:column;gap:4px;flex:none}
.pd-btns button{border:1px solid var(--linha);background:#fff;color:var(--suave);font-weight:700;font-size:13px;width:28px;height:26px;border-radius:7px;cursor:pointer;line-height:1}
.pd-btns button.parar{width:auto;padding:0 9px;color:var(--vermelho);font-size:11.5px}
.pd-bar{height:8px;border-radius:6px;background:#E4ECF5;overflow:hidden;margin:12px 0 10px}
.pd-bar>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--azul-esc),var(--azul));transition:width .35s ease}
.pd-bar.done>span{background:linear-gradient(90deg,var(--verde),#36D399)}
.pd-bar.indet>span{width:35%;animation:pd-slide 1.2s ease-in-out infinite} @keyframes pd-slide{0%{margin-left:-35%}100%{margin-left:100%}}
.pd-kpis{display:flex;flex-wrap:wrap;gap:6px}
.pd-kpis span{font-size:11px;font-weight:600;color:var(--suave);background:var(--papel);border-radius:99px;padding:3px 9px} .pd-kpis b{color:var(--tinta)}
.pd-kpis .ok b{color:var(--verde)} .pd-kpis .ruim b{color:var(--vermelho)} .pd-kpis .off b{color:#5A6B7E} .pd-kpis .falha{background:var(--vermelho-bg);color:var(--vermelho)}
@media(max-width:600px){ .prog-dock{top:auto;bottom:10px;transform:none;right:8px;left:8px;width:auto;border-radius:14px;border-right:1px solid var(--linha)} }

/* ===== arrastar e soltar no detalhe (modules/arrastar.js) — só admin (#splittersWrap.arr-on) ===== */
.arr-on .port[data-sp],.arr-on .utp-row{cursor:grab;position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.arr-on .splitter > .sh{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.arr-on .splitter > .sh button,.arr-on .port button{cursor:pointer}
/* pontinhos de "pegar" à esquerda da linha, aparecem no hover */
.arr-on .port[data-sp]::before,.arr-on .utp-row::before{content:"";position:absolute;left:5px;top:50%;width:7px;height:16px;transform:translateY(-50%);
  background-image:radial-gradient(circle,#B5C0CD 1.1px,transparent 1.4px);background-size:3.5px 4px;opacity:0;transition:opacity .15s}
.arr-on .port[data-sp]:hover::before,.arr-on .utp-row:hover::before{opacity:1}
.arr-on .splitter > .sh .ic{cursor:grab}
/* overlay transparente: dá o cursor "grabbing" na tela toda sem regra em "*" (que travava o começo do arrasto) */
.arr-overlay{position:fixed;inset:0;z-index:2999;cursor:grabbing;background:transparent}
body.arr-arrastando{-webkit-user-select:none;user-select:none}
.arr-origem{opacity:.32;outline:2px dashed var(--azul);outline-offset:-2px}
.port.arr-alvo{background:#E3F4FC!important;box-shadow:inset 0 0 0 2px var(--azul)!important}
.utp-row.arr-alvo{background:#F3F8FC!important}
.utp-row.arr-alvo-antes{box-shadow:inset 0 3px 0 var(--azul)!important}
.utp-row.arr-alvo-depois{box-shadow:inset 0 -3px 0 var(--azul)!important}
.splitter.arr-alvo{outline:2px solid transparent}
.splitter.arr-alvo-antes{box-shadow:0 -4px 0 0 var(--azul),var(--sombra)}
.splitter.arr-alvo-depois{box-shadow:0 4px 0 0 var(--azul),var(--sombra)}
/* fantasma: posicionado por transform (camada própria no compositor) e sem transição herdada de .port */
.arr-ghost{position:fixed;left:0;top:0;z-index:3000;pointer-events:none;opacity:.94;background:#fff;border-radius:10px;margin:0;
  box-shadow:0 16px 44px rgba(11,32,52,.30),0 0 0 1px var(--linha);will-change:transform;transition:none!important;contain:layout paint}
.arr-ghost.port{border-top:none}
.arr-ghost.splitter{overflow:hidden}
.arr-ghost .sh{border-bottom:1px solid var(--linha)}
.arr-ghost-me{padding:9px 18px;font-size:12px;color:var(--suave);background:#fff}
.arr-dica{position:fixed;left:0;top:0;z-index:3001;pointer-events:none;background:var(--tinta);color:#fff;font-size:12px;font-weight:700;
  padding:6px 11px;border-radius:8px;white-space:nowrap;box-shadow:var(--sombra);max-width:70vw;overflow:hidden;text-overflow:ellipsis;will-change:transform}
.arr-dica.livre{background:var(--verde)} .arr-dica.troca{background:var(--azul-esc)} .arr-dica.nao{background:#6B7A8C}
/* linhas que acabaram de trocar de lugar piscam depois do redesenho */
.port.arr-trocada,.splitter.arr-trocada{animation:arrTroca .9s ease-out}
@keyframes arrTroca{0%{background:#DDF0FB;box-shadow:inset 3px 0 0 var(--azul)}100%{background:transparent;box-shadow:none}}
.splitter.arr-trocada{animation:arrTrocaBox .9s ease-out}
@keyframes arrTrocaBox{0%{box-shadow:0 0 0 3px var(--azul),var(--sombra)}100%{box-shadow:var(--sombra)}}
@media(max-width:760px){ .arr-on .port[data-sp]::before,.arr-on .utp-row::before{opacity:.6} }