.topology-section{background:#13243a;border:1px solid #35506d;border-radius:16px;padding:20px;margin:0 0 22px}.topology-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.topology-heading h2{margin:4px 0 8px;font-size:clamp(20px,2vw,26px)}.topology-heading button{white-space:nowrap}.topology-content{margin:16px 0;background:#0d1b2e;border:1px solid #29425e;border-radius:14px;min-height:90px;padding:16px}.topology-scroll{overflow:auto;max-height:540px}.topology-tree,.topology-tree ul{list-style:none;padding-left:22px;margin:0;position:relative}.topology-tree>li{padding:0 0 10px}.topology-tree ul{border-left:1px solid #42728b;margin-left:11px;padding-top:9px}.topology-tree ul>li{position:relative;padding:0 0 13px 19px}.topology-tree ul>li:before{content:'';position:absolute;top:23px;left:0;width:18px;border-top:1px solid #42728b}.topology-node{display:inline-block;min-width:225px;max-width:min(420px,70vw);background:#172d46;border:1px solid #426381;border-radius:11px;padding:13px;vertical-align:top}.topology-node-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.topology-node strong{font-size:14px;overflow-wrap:anywhere}.topology-type{color:#74d1f8;font-size:10px;font-weight:800;letter-spacing:.08em}.topology-details{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.topology-details span{font-size:11px;background:#24425e;color:#d0e4f6;padding:4px 7px;border-radius:7px}.topology-node small{display:block;color:#9cb8cf;margin-top:8px}.topology-legend{display:flex;gap:20px;flex-wrap:wrap;color:#93bdd3;font-size:12px}.topology-cycle,.topology-empty{color:#adc4d9;padding:15px}@media(max-width:620px){.topology-section{padding:13px}.topology-heading{flex-direction:column}.topology-tree ul{padding-left:12px}.topology-tree ul>li{padding-left:12px}.topology-tree ul>li:before{width:12px}.topology-node{min-width:175px}}
/* Mapa mental com iconografia e cores conforme referência PRECON */
#docs .topology-section{background:#0c1119;border-color:#273445}
#docs .topology-content{background:#0c1119;border-color:#263440}
#docs .topology-node{padding:8px 11px;min-width:185px;max-width:min(410px,75vw);background:#101820;border:1px solid #283545;border-radius:8px}
#docs .topology-node-line{gap:8px;flex-wrap:nowrap}
#docs .topology-node strong{font-size:13px;line-height:1.3}
#docs .topology-symbol{display:inline-flex;align-items:center;justify-content:center;color:#8a9db6;flex-shrink:0}
#docs .topology-kind-OLT .topology-symbol{color:#368fe7}
#docs .topology-pon-1 .topology-symbol{color:#348eff}
#docs .topology-pon-2 .topology-symbol{color:#37c67e}
#docs .topology-pon-3 .topology-symbol{color:#f26065}
#docs .topology-pon-4 .topology-symbol{color:#f0bf45}
#docs .topology-hint{font-size:11px;color:#a7b4c5;white-space:nowrap}
#docs .topology-details{margin-top:3px;margin-left:25px}
#docs .topology-details:empty{display:none}
#docs .topology-details span{padding:2px 5px;background:#1a2938;font-size:10px}
#docs .topology-tree ul{border-left-color:#344858}
#docs .topology-tree ul>li:before{border-top-color:#344858}
@media(max-width:650px){#docs .topology-hint{white-space:normal}#docs .topology-node{min-width:165px}}

#docs .topology-node[data-element-id]{cursor:pointer;transition:border-color .14s,background .14s}
#docs .topology-node[data-element-id]:hover,#docs .topology-node[data-element-id]:focus-visible{border-color:#4c9bef;background:#15283b;outline:none}
.topology-drill-dialog{width:min(850px,calc(100vw - 24px));max-height:90vh;overflow:auto;background:#0d1827;border:1px solid #3b5a78;border-radius:15px;color:#eef6ff;padding:20px;box-shadow:0 25px 90px #0009}
.topology-drill-dialog::backdrop{background:#030b14cd}
.topology-drill-head{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid #304761;padding-bottom:12px;gap:12px}
.topology-drill-head small{color:#67b5ea;font-size:10px;letter-spacing:.13em}.topology-drill-head h2{font-size:20px;margin:4px 0}
#topology-drill-close{border:0;background:#1a3047;color:#fff;padding:2px 11px;border-radius:7px;font-size:25px;cursor:pointer}
.topology-drill-flow{display:flex;flex-direction:column;align-items:center;padding:14px 0}.topology-drill-flow section{background:#13273d;border:1px solid #30516f;padding:12px;border-radius:10px;width:min(100%,580px)}
.topology-drill-flow h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#8cb3d0;margin:0 0 10px}
.topology-drill-flow button{border:1px solid #426481;background:#1b3851;color:#e9f5ff;padding:10px;border-radius:7px;cursor:pointer;text-align:left;font-size:12px}
.topology-drill-flow button:hover{border-color:#68b1eb}.topology-drill-connector{color:#5b95c4;font-size:23px;line-height:28px}
.topology-drill-core{display:flex;gap:10px;align-items:center}.topology-drill-core span,.topology-drill-children button span{color:#67c9ff;font-size:10px;font-weight:750}.topology-drill-core strong{font-size:16px}
.topology-drill-children{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:6px}.topology-drill-children button small{color:#96acc2}
.topology-drill-subtitle{font-size:15px;margin:8px 0}.topology-drill-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.topology-drill-specs>div{border:1px solid #263f56;border-radius:7px;padding:9px;background:#12243a;min-width:0;overflow-wrap:anywhere}
.topology-drill-specs small{display:block;color:#92acc2;font-size:10px;margin-bottom:5px}.topology-drill-specs strong{font-size:12px}
.topology-drill-pending{font-size:12px;color:#e2b77c}
@media(max-width:560px){.topology-drill-dialog{padding:13px}.topology-drill-specs{grid-template-columns:1fr}}

.topology-splitter-editor,.topology-routed{border:1px solid #304e68;background:#102338;padding:13px;margin-top:13px;border-radius:10px}
.topology-splitter-editor h3,.topology-routed h3{font-size:15px;margin:0 0 6px}.topology-splitter-editor p{font-size:12px;color:#a4bdd0}
.topology-splitter-editor label{font-size:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.topology-splitter-editor select{background:#18334b;color:#eef7ff;border:1px solid #496783;border-radius:6px;padding:8px;min-width:0;max-width:100%}
.topology-port{display:grid;grid-template-columns:80px minmax(125px,1fr) minmax(100px,145px) 105px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #2c4258}
.topology-port strong{font-size:12px}.topology-port button[data-add-splitter]{background:#213c55;border:1px solid #486987;border-radius:6px;color:#c6e8ff;padding:6px;font-size:11px;cursor:pointer}.topology-split-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.topology-split-actions button{background:#24629c;color:white;border:0;border-radius:7px;padding:9px 14px;cursor:pointer}
#topology-port-message{font-size:12px}.topology-routed-output{display:flex;align-items:center;gap:9px;padding:6px;border-bottom:1px solid #253f57;font-size:12px}
.topology-routed-output strong{min-width:55px;color:#78c7fb}.topology-routed-output button{background:#19415a;border:1px solid #406481;color:#fff;border-radius:6px;padding:5px 8px;cursor:pointer}
@media(max-width:580px){.topology-port{grid-template-columns:1fr 1fr}.topology-port strong{grid-column:1/-1}.topology-port select{width:100%}}

.topology-port select[data-client-splitter]{border-color:#3eaa85;background:#17392f}
.topology-port select[data-client-splitter][hidden]{display:none!important}

/* Diagrama visual de distribuição óptica, inspirado nos organogramas de engenharia */
.topology-drill-dialog{width:min(1100px,calc(100vw - 20px));max-height:92vh;background:#0a1320}
.optical-workspace{border:1px solid #2b4964;background:linear-gradient(145deg,#101e30,#0b1523);border-radius:12px;padding:16px;margin-top:14px}
.optical-workspace-title{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#80c9ff;font-size:11px;font-weight:800;letter-spacing:.08em}.optical-workspace-title small{color:#89a7bd;font-weight:400;letter-spacing:normal}
.optical-stage{display:grid;grid-template-columns:minmax(130px,1fr) 32px minmax(155px,1.25fr) 32px minmax(180px,1.6fr);align-items:center;gap:0;margin:22px 0 12px}
.optical-stage small{display:block;font-size:10px;color:#91adc4;margin-bottom:8px}
.optical-source,.optical-device,.optical-outlets{min-width:0;border:1px solid #2e4d66;border-radius:10px;background:#14283d;padding:14px;min-height:96px}
.optical-device{text-align:center;border-color:#3684c1;box-shadow:inset 0 0 24px #1c5a8b30}.optical-device-icon{display:block;color:#58bdff;font-size:21px}
.optical-device .topology-drill-core{justify-content:center;flex-wrap:wrap;gap:5px}
.optical-stage button{color:#d6eeff;border:1px solid #3a6686;border-radius:6px;background:#1b3a53;padding:7px 9px;cursor:pointer;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.optical-link{height:2px;background:#4fa3de;position:relative}.optical-link span{position:absolute;right:0;top:-4px;width:9px;height:9px;transform:rotate(45deg);border-right:2px solid #65c2ff;border-top:2px solid #65c2ff}
.optical-outlets .topology-drill-children{display:flex;flex-direction:column;gap:5px;max-height:175px;overflow:auto}
.optical-live-splitter{margin-top:18px;padding:14px;border:1px solid #315571;background:#0c1b2b;border-radius:10px}
.optical-diagram-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.optical-diagram-head strong{font-size:14px}.optical-diagram-head small{font-size:11px;color:#9bb9d2}
.optical-diagram-layout{display:grid;grid-template-columns:minmax(100px,1fr) minmax(115px,150px) minmax(180px,2fr);align-items:center;gap:0;overflow:auto}
.optical-diagram-input{display:flex;align-items:center;font-size:11px;color:#adcee5;white-space:nowrap}.optical-diagram-input i{flex:1;height:2px;background:#55afe9}
.optical-diagram-chip{text-align:center;padding:17px 6px;border:1px solid #55a4d6;background:linear-gradient(135deg,#19476b,#12283f);border-radius:7px;font-size:10px;font-weight:800;letter-spacing:.07em}
.optical-diagram-chip strong{display:block;font-size:18px;margin-top:5px;color:#9cddff}
.optical-diagram-outputs{display:flex;flex-direction:column;gap:4px}
.optical-diagram-output{display:flex;align-items:center;min-width:0;font-size:11px;color:#d7eaf5}
.optical-diagram-output i{height:2px;width:32px;flex-shrink:0;background:var(--out-color)}
.optical-diagram-port{border:1px solid var(--out-color);color:var(--out-color);padding:5px 8px;border-radius:5px;min-width:55px;text-align:center;white-space:nowrap}
.optical-diagram-target{padding:4px 7px;background:#162d43;border:1px solid #304c65;border-radius:5px;flex:1;overflow-wrap:anywhere}
.optical-diagram-empty{font-size:12px;color:#93b3cb;text-align:center;padding:17px}
@media(max-width:750px){.optical-stage{grid-template-columns:1fr;gap:7px}.optical-link{height:20px;width:2px;margin:auto}.optical-link span{transform:rotate(135deg);right:-4px;top:10px}.optical-diagram-layout{grid-template-columns:70px 100px minmax(150px,1fr);min-width:365px}.optical-live-splitter{overflow:auto}.optical-workspace-title{align-items:start;flex-direction:column}}

/* Formas técnicas representativas no organograma */
.optical-diagram-chip{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;min-width:120px;display:flex;align-items:center;justify-content:center}
.optical-splitter-triangle{position:relative;width:112px;height:104px;clip-path:polygon(0 0,0 100%,100% 50%);background:#57c69c;filter:drop-shadow(0 0 7px #2fcaa550)}
.optical-splitter-triangle:before{content:'';position:absolute;inset:2px;clip-path:polygon(0 0,0 100%,100% 50%);background:#164b43}
.optical-splitter-triangle>span{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:10px;padding-right:25px;font-size:9px;color:#bdf8de;letter-spacing:0}
.optical-splitter-triangle strong{display:block;font-size:17px;color:#fff;white-space:nowrap}
.topology-mini-triangle{display:inline-block;width:15px;height:16px;clip-path:polygon(0 0,0 100%,100% 50%);background:#4bd4a1}
.optical-shape{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 8px}
.optical-shape-olt{width:56px;height:26px;border:2px solid #58a6ed;border-radius:4px;background:repeating-linear-gradient(180deg,#133650,#133650 6px,#5c96c6 7px,#133650 9px)}
.optical-shape-cto{width:37px;height:29px;border:2px solid #73b7f3;border-radius:5px;background:linear-gradient(180deg,#254962 40%,#13314c 40%)}
.optical-shape-pon{width:27px;height:27px;border-left:2px solid #5db5ff;border-bottom:2px solid #5db5ff;transform:rotate(-45deg)}
.optical-shape-emenda{width:25px;height:25px;border:2px solid #e5b45e;border-radius:50%;background:#483a22}
.optical-shape-splitter{width:40px;height:38px;clip-path:polygon(0 0,0 100%,100% 50%);background:#51d1a1}
@media(max-width:750px){.optical-splitter-triangle{width:96px;height:90px}.optical-splitter-triangle strong{font-size:14px}}

.multi-split-editor{margin-top:14px}.multi-split-editor>header,.multi-split-editor>footer,.multi-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.multi-split-editor>header{justify-content:space-between;margin-bottom:13px}.multi-split-editor h3{margin:0;font-size:16px}.multi-split-editor button{padding:8px 12px;background:#153c58;border:1px solid #3b7194;border-radius:7px;color:#e6f4ff;cursor:pointer}.multi-split-editor>footer{margin-top:14px}.multi-split-editor>footer button{background:#24699c}.multi-block{background:#050b12;border:1px solid #28425a;border-radius:12px;margin-bottom:12px;padding:15px}.multi-head{justify-content:space-between}.multi-head select,.multi-port select{background:#102539;color:#fff;border:1px solid #355774;border-radius:7px;padding:8px;max-width:100%}.multi-visual{display:grid;grid-template-columns:minmax(40px,1fr) 150px minmax(200px,2.8fr);align-items:center;margin:18px 0;gap:0;min-height:140px}.multi-input-line{height:4px;background:#58adff}.multi-triangle{width:150px;height:160px;clip-path:polygon(0 50%,100% 0,100% 100%);background:#34d5a0;position:relative;display:flex;align-items:center;justify-content:center}.multi-triangle:before{content:'';position:absolute;inset:3px;clip-path:polygon(0 50%,100% 0,100% 100%);background:#115443}.multi-triangle span{position:relative;z-index:1;margin-left:40px;color:white;font-weight:800;font-size:18px}.multi-routes{display:flex;flex-direction:column;gap:9px}.multi-route{display:grid;grid-template-columns:40px 56px minmax(0,1fr);align-items:center;gap:8px;--line:#75889a}.multi-route.route-continuity{--line:#58adff}.multi-route.route-clients{--line:#40d5a2}.multi-route-path{height:4px;background:var(--line)}.multi-route-port{font-size:15px;color:var(--line);font-weight:700}.multi-route-target{border:2px solid var(--line);background:#152d43;border-radius:11px;min-height:55px;padding:9px 13px;display:flex;flex-direction:column;justify-content:center;gap:3px}.route-clients .multi-route-target{background:#173e36}.multi-route-target strong{font-size:14px;overflow-wrap:anywhere}.multi-route-target small{font-size:11px;color:#b3d0e4}.multi-config{border-top:1px solid #2b465c;padding-top:10px}.multi-config summary{cursor:pointer;color:#8bc9f4;font-size:12px}.multi-port{display:grid;grid-template-columns:60px minmax(140px,1fr) minmax(130px,1fr);gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid #1e3749}.multi-port select[hidden]{display:none!important}.multi-port-name{font-size:12px;color:#88d5ff}@media(max-width:700px){.multi-visual{grid-template-columns:35px 90px minmax(175px,1fr);min-width:320px;overflow:auto}.multi-triangle{height:125px;width:90px}.multi-triangle span{font-size:12px;margin-left:27px}.multi-block{overflow:auto}.multi-route{grid-template-columns:20px 40px minmax(0,1fr);gap:4px}.multi-route-target{padding:6px}.multi-port{grid-template-columns:1fr 1fr}.multi-port-name{grid-column:1/-1}}

.multi-feed{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#112b36;border:1px solid #318a77;border-radius:8px;padding:10px 12px;margin-bottom:12px;color:#8ff0ce;font-size:12px}
.multi-feed select{background:#102b34;color:#dffcf1;border:1px solid #3caa91;border-radius:7px;padding:8px;max-width:100%}
.multi-port-fed{grid-template-columns:60px 1fr;color:#75dfc1}
.multi-port-fed strong{font-size:12px}.route-cascade{--line:#38c9a8}.route-cascade .multi-route-target{background:#154039}
/* NORCOM PRECON | Modelo 1: ramificacoes reais por saida */
#docs .topo-model1{max-height:690px;overflow:auto;padding:12px;background:#08111e}
#docs .topo-model1 .topo-root{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:max-content}
#docs .topo-model1 ul{list-style:none;border-left:1px solid #31536e;margin:0 0 0 15px;padding:4px 0 0 23px}
#docs .topo-model1 li{list-style:none;position:relative;margin:8px 0;min-height:25px}
#docs .topo-model1 li:before{content:'';position:absolute;left:-23px;top:16px;width:20px;border-top:2px solid #428ed0}
#docs .topo-model1 .topology-node{min-width:145px;max-width:300px;padding:9px 12px;background:#11263a;border:1px solid #335676}
#docs .topo-model1 .topology-symbol{font-size:17px;color:#5fb7f4}
#docs .topo-model1 .topology-node strong{font-size:12px}
#docs .topo-model1 .topo-branch{display:flex;align-items:flex-start;gap:9px}
#docs .topo-model1 .topo-port{display:inline-flex;align-items:center;min-width:42px;justify-content:center;padding:6px;border:1px solid #3e6485;background:#172c45;border-radius:6px;font-size:11px;color:#86c5f9;white-space:nowrap}
#docs .topo-model1 .topo-terminal{display:inline-flex;padding:7px 12px;background:#153650;border:1px solid #477393;color:#c6e6fa;border-radius:7px;font-size:11px;white-space:nowrap}
#docs .topo-model1 .topo-clients .topo-port{border-color:#2f9b77;color:#68dbb1}
#docs .topo-model1 .topo-clients .topo-terminal{background:#17483a;border-color:#3dcc9a;color:#b0f2d9}
#docs .topo-model1 .topo-clients:before{border-color:#35c797}
#docs .topo-model1 .topo-cascade:before{border-color:#e6ad62}
#docs .topo-model1 .topo-cascade .topo-port{color:#f1bc72}
#docs .topo-model1 .topo-split{display:flex;align-items:center;gap:10px;padding:7px 11px;background:#102f2c;border:1px solid #37ac8a;border-radius:8px;width:max-content}
#docs .topo-model1 .topo-triangle{display:block;width:29px;height:31px;background:#48dfae;clip-path:polygon(0 50%,100% 0,100% 100%)}
#docs .topo-model1 .topo-split strong{font-size:12px;color:#d6ffef}
#docs .topo-model1 .topo-split small{display:block;color:#8cd0bd;font-size:10px}
#docs .topo-model1 .topo-split-item:before{border-color:#39d4a0}
#docs .topo-model1 .topo-unlinked>small{color:#e8b56a}
@media(max-width:650px){#docs .topo-model1{max-height:560px}#docs .topo-model1 ul{padding-left:16px;margin-left:10px}#docs .topo-model1 li:before{left:-16px;width:14px}}

/* Short local branches instead of full-height vertical trunks */
#docs .topo-model1 .topo-element>ul,#docs .topo-model1 .topo-split-item>ul,#docs .topo-model1 .topo-branch>ul{border-left:0!important}
#docs .topo-model1 li:before{width:18px;left:-21px}
#docs .topo-model1 .topo-clients,#docs .topo-model1 .topo-free{margin:4px 0!important}
#docs .topo-model1 .topo-split-item>ul{padding-top:2px!important}
/* Modelo PRECON: percurso compacto com diagramas locais por CTO */
#docs .route-map{max-height:700px;overflow:auto;padding:12px;background:#081321;border:1px solid #253d55;border-radius:12px}
#docs .route-map-guide{font-size:11px;color:#9bb8ce;margin-bottom:12px}
#docs .route-pon{margin-bottom:14px;border:1px solid #29465d;border-left:3px solid var(--pon-accent);background:#0e1b2a;border-radius:9px;min-width:0}
#docs .route-pon-heading{display:flex;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid #243f58}
#docs .route-pon-heading button{border:0;background:none;color:var(--pon-accent);font-weight:800;cursor:pointer}
#docs .route-pon-heading small{font-size:10px;color:#93b0c5}
#docs .route-track{padding:12px 12px 14px 24px}
#docs .route-segment{border-left:2px solid #3c678a;padding-left:17px;position:relative;margin:0 0 10px}
#docs .route-segment:before{content:'';position:absolute;left:-2px;top:17px;width:17px;border-top:2px solid #3c678a}
#docs .route-row{display:flex;align-items:flex-start;gap:14px;padding:5px 0;min-width:0}
#docs .route-cto{display:flex;align-items:center;gap:8px;background:#17304a;color:#f1f8ff;border:1px solid #426c91;border-radius:8px;min-width:135px;max-width:200px;cursor:pointer;padding:11px 13px;text-align:left;flex-shrink:0;font-size:12px}
#docs .route-cto>span{color:#87c8ff}
#docs .route-splitters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;min-width:0}
#docs .route-split-group{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid #2c665b;background:#102b2c;border-radius:8px;padding:9px 11px}
#docs .route-split-head{display:flex;align-items:center;gap:7px;min-width:82px;flex-wrap:wrap}
#docs .route-triangle{display:inline-block;background:#4ae0ac;clip-path:polygon(0 50%,100% 0,100% 100%);width:25px;height:29px;flex-shrink:0}
#docs .route-split-head strong{color:#ddfff1;font-size:12px}
#docs .route-split-head small{width:100%;color:#e7bd68;font-size:9px}
#docs .route-split-outputs{display:flex;flex-direction:column;gap:5px;max-width:290px}
#docs .route-output{display:flex;gap:6px;align-items:center;min-width:0;--stroke:#61aff5}
#docs .route-output.clients{--stroke:#43d5a3}
#docs .route-output.cascade{--stroke:#eaba65}
#docs .route-output.idle{--stroke:#7d8999}
#docs .route-percent{border:1px solid var(--stroke);color:var(--stroke);border-radius:5px;font-size:11px;padding:5px 7px;min-width:40px;text-align:center}
#docs .route-target{background:#17374c;border:1px solid var(--stroke);border-radius:6px;padding:5px 9px;font-size:11px;color:#e2f2ff;white-space:nowrap}
#docs .route-target small{color:#8baec9;margin-left:8px}
#docs .route-output.clients .route-target{background:#174639}
#docs .route-cascade-content .route-split-group{margin-top:1px}
#docs .route-next{margin:2px 0 0 0;padding-left:4px}
#docs .route-next>.route-segment{margin:4px 0}
#docs .route-orphan{border:1px dashed #b18d59;padding:8px;border-radius:8px}
#docs .route-orphan>small{color:#eac184;font-size:10px;display:block;margin-bottom:6px}
#docs .route-pending{margin-top:12px;padding:12px;border:1px dashed #51627a;border-radius:9px}
#docs .route-pending summary{color:#c6bb95;cursor:pointer}
@media(max-width:650px){#docs .route-row{flex-direction:column;gap:6px}#docs .route-map{max-height:620px;padding:8px}#docs .route-split-group{flex-wrap:wrap}#docs .route-pon-heading{padding:9px}}

/* NORCOM: curvas de conexao das rotas opticas */
#docs .route-track,#docs .route-segment,#docs .route-row,#docs .route-next,#docs .route-splitters,#docs .route-split-group,#docs .route-output{position:relative}
#docs .route-track{border-left:2px solid #355f80;margin-left:12px;padding-left:20px}
#docs .route-segment{border-left:2px solid #315979;padding-left:19px;margin-bottom:10px}
#docs .route-segment:before{content:'';position:absolute;left:-2px;top:16px;width:19px;height:17px;border-left:2px solid #4b96d0;border-bottom:2px solid #4b96d0;border-radius:0 0 0 12px;border-top:0}
#docs .route-row{gap:16px}
#docs .route-cto{position:relative;z-index:1}
#docs .route-splitters{padding-left:17px}
#docs .route-splitters:before{content:'';position:absolute;left:0;top:17px;width:17px;height:16px;border-left:2px solid #38ba92;border-bottom:2px solid #38ba92;border-radius:0 0 0 11px}
#docs .route-split-group{position:relative}
#docs .route-split-outputs{padding-left:14px}
#docs .route-output{--curve:#6f879f;position:relative;margin:4px 0;padding-left:17px}
#docs .route-output.continuity{--curve:#58adff}
#docs .route-output.clients{--curve:#45d7a4}
#docs .route-output.cascade{--curve:#e8bb63}
#docs .route-output:before{content:'';position:absolute;left:0;top:0;width:16px;height:calc(50% + 2px);border-left:2px solid var(--curve);border-bottom:2px solid var(--curve);border-radius:0 0 0 10px}
#docs .route-output:after{content:'';position:absolute;left:16px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--curve)}
#docs .route-next{border-left:2px solid #315979;margin-left:17px;padding-left:16px}
#docs .route-cascade-content{border-left:2px solid #dcad55;margin:5px 0 0 6px;padding-left:11px}
@media(max-width:700px){#docs .route-track{margin-left:5px;padding-left:12px}#docs .route-segment{padding-left:12px}#docs .route-splitters{padding-left:10px}#docs .route-split-outputs{padding-left:10px}}

/* SVG connecting actual card edges */
#docs .route-map{position:relative;isolation:isolate}
#docs .route-map .route-wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
#docs .route-map .route-cto,#docs .route-map .route-target,#docs .route-map .route-percent,#docs .route-map .route-split-head{position:relative;z-index:1}
#docs .route-map .route-row,#docs .route-map .route-pon{position:relative}
#docs .route-map .route-splitters:before,#docs .route-map .route-splitters:after,#docs .route-map .route-output:before,#docs .route-map .route-output:after{display:none!important}

/* Ligações reais sobre painéis, sob cartões interativos */
#docs .route-map .route-wires{z-index:6!important;overflow:visible;pointer-events:none}
#docs .route-map .route-cto,#docs .route-map .route-target,#docs .route-map .route-percent,#docs .route-map .route-split-head{z-index:7!important}
#docs .route-map .route-split-group,#docs .route-map .route-row,#docs .route-map .route-pon{isolation:auto!important}

/* Continuidade de caixa para caixa pelo tronco, sem cruzar paineis */
#docs .route-next{border-left:2px solid #4199e9!important}
#docs .route-next>.route-segment:before{border-color:#58adff!important}
#docs .route-map .route-wires{opacity:.97}

/* v19: eixo de continuidade unico e CTOs alinhadas */
#docs .route-track{position:relative;border-left:0!important;margin-left:0!important;padding:12px 14px 15px 32px!important}
#docs .route-track:before{content:'';position:absolute;left:12px;top:18px;bottom:18px;width:2px;background:#3d8ed2;border:0;border-radius:2px}
#docs .route-next{border:0!important;margin:0!important;padding:0!important;position:static!important}
#docs .route-segment{border:0!important;margin:0 0 9px!important;padding:0!important;position:relative}
#docs .route-segment:before{content:''!important;position:absolute!important;left:-20px!important;top:23px!important;width:20px!important;height:2px!important;border:0!important;border-top:2px solid #4394d4!important;border-radius:0!important;background:transparent!important}
#docs .route-next>.route-segment:first-child:after{display:none!important}
#docs .route-row{min-height:60px;align-items:center!important}
#docs .route-cto{min-width:144px}
#docs .route-splitters{margin-left:8px!important;padding-left:0!important}
#docs .route-splitters:before,#docs .route-splitters:after{display:none!important}
#docs .route-pending .route-segment{margin-left:0}
@media(max-width:700px){#docs .route-track{padding-left:25px!important}#docs .route-track:before{left:10px}#docs .route-segment:before{left:-15px!important;width:15px!important}}

/* v20 compact optical trunk */
#docs .route-segment{margin-bottom:3px!important}
#docs .route-row{min-height:49px!important;padding:2px 0!important}
#docs .route-split-group{padding:7px 9px!important}
#docs .route-track{padding-top:8px!important;padding-bottom:8px!important}
#docs .route-next{margin:0!important}

/* Norcom documentação: toolbar responsive / polished topology */
#docs .noc-route-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:10px 0;padding:12px;border:1px solid #28425c;border-radius:11px;background:#0d1b2c}
#docs .noc-route-toolbar label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#9abbd5}
#docs .noc-route-toolbar input,#docs .noc-route-toolbar select{border:1px solid #365c7c;background:#11273c;color:#eaf5ff;border-radius:7px;padding:9px 10px;font-size:12px;min-height:37px}
#docs .noc-route-toolbar input{min-width:180px}
#docs .noc-route-toolbar button{border:1px solid #355b7b;border-radius:8px;background:#16324c;color:#d5edff;min-height:37px;padding:8px 12px;font-size:12px;cursor:pointer}
#docs .noc-route-toolbar #noc-route-matches{font-size:11px;color:#87d4a9}
#docs .route-pon[hidden]{display:none!important}
#docs .route-cto.noc-found{outline:2px solid #63d3ad;box-shadow:0 0 0 5px #34c49a20;background:#204f55}
#docs .route-map{scrollbar-gutter:stable;overscroll-behavior:contain}
#docs .route-pon{margin-bottom:10px}
#docs .noc-tight .route-track{padding-top:4px!important;padding-bottom:4px!important}
#docs .noc-tight .route-row{min-height:42px!important}
#docs .noc-tight .route-segment{margin-bottom:1px!important}
#docs .noc-tight .route-split-group{padding:5px 7px!important}
#docs .noc-tight .route-cto{padding:7px 9px!important}
#docs .topology-section{min-width:0;overflow:hidden}
@media(max-width:720px){#docs .topology-heading{gap:6px;flex-wrap:wrap}#docs .topology-heading h2{font-size:18px}#docs .topology-heading .muted{font-size:11px}#docs .noc-route-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;padding:9px}#docs .noc-route-toolbar label{min-width:0}#docs .noc-route-toolbar input,#docs .noc-route-toolbar select{width:100%;min-width:0}#docs .noc-route-toolbar #noc-route-matches{grid-column:1/-1}#docs .route-map{max-height:62vh}#docs .route-pon-heading{position:sticky;left:0;width:max-content;min-width:100%;z-index:3;background:#0e1b2a}#docs .route-row{flex-wrap:nowrap!important;min-width:max-content}#docs .route-splitters{flex-wrap:nowrap!important}#docs .route-split-group{flex-shrink:0}.topology-drill-dialog{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important;padding:12px!important}.multi-port{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.multi-port select{min-width:0;width:100%}}

/* v24 - documentation view/edit mode */
.topology-drill-actions{display:flex;align-items:center;gap:10px}
#topology-edit-toggle{border:1px solid #3d806e;border-radius:8px;padding:9px 12px;background:#183f38;color:#a9ead1;cursor:pointer;font-weight:600;white-space:nowrap}
#topology-edit-toggle[aria-pressed="true"]{background:#2c6954;color:#fff}
/* Keep the full optical distribution diagram visible in consultation mode. */
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor{display:block!important}
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor #multi-add,
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor #multi-save,
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor [data-remove],
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor .multi-config,
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor .multi-feed,
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor [data-model],
.topology-drill-dialog:not(.topology-edit-active) .multi-split-editor footer{display:none!important}
@media(max-width:650px){.topology-drill-actions{gap:5px}#topology-edit-toggle{padding:8px;font-size:12px}}
