/* ---------- 7. Panel de detalle ----------
   Render "panel" (281×823) de fondo, overline, render de la entidad, nombre grande
   (Heading/Panel), tipo en muted, bloques (formulario, conexiones, herencia), productos y
   el botón "Eliminar …" al pie. el JS (js/) muestra u oculta cada bloque (display). */
#right{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;padding:1.25rem 1.25rem 1.25rem 1.3125rem;
  background:var(--pn-img-panel) 0 0 / 100% 100% no-repeat;color:var(--pn-color-white);scrollbar-width:none;}
#right::-webkit-scrollbar{display:none;}
#right h2{margin:0;color:var(--pn-color-muted);font:400 0.75rem/1.125rem var(--font-sans);letter-spacing:2px;text-transform:uppercase;}
#rightTitle{padding-bottom:0.75rem;border-bottom:1px solid var(--pn-color-border);}
#navEmpty{color:var(--pn-color-muted);font:400 1rem/1.5rem var(--font-sans);}
#navContent{display:none;}
.detail-asset{display:none;width:15.3125rem;max-width:100%;height:10.1875rem;margin:-0.25rem auto 0.25rem;background:center / contain no-repeat;}
.detail-asset--sede{display:block;background-image:url("../../assets/ui/renders-sm/sede.webp");}
.detail-asset--matriz{display:block;background-image:url("../../assets/ui/renders-sm/matriz.webp");}
.detail-asset--nube{display:block;background-image:url("../../assets/ui/renders-sm/nube.webp");}
.detail-asset--epicentro{display:block;background-image:url("../../assets/ui/renders-sm/epicentro.webp");}
#navSedeLabel{color:var(--pn-color-white);font:700 2rem/2.5rem var(--font-sans);letter-spacing:-.6px;overflow-wrap:anywhere;}
#navSedeLabel.is-multi{font:500 1.5rem/2rem var(--font-sans);letter-spacing:-.25px;}
#navSedeSub{margin:2px 0 0.75rem;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
#matrizHint{display:none;margin:0 0 0.75rem;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}

/* Bloques Sede / Matriz / Nube / Datacenter / Conexiones / Herencia: columna con separador */
.editBox{display:none;flex-direction:column;padding:0 0 1rem;margin-bottom:1rem;border-bottom:1px solid var(--pn-color-border);}
#sedeEditBox{gap:2px;}
#datacenterEditBox{gap:0.5rem;}
#datacenterEditBox .hint{margin:0;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
#right .field{margin:0 0 1rem;}
#right .field:last-child{margin-bottom:0;}
#right .editBox > label{display:block;margin:0;}
#right .empRow input[type="number"]{width:4.75rem;padding:0 0.625rem;}
#right .empRow input[type="number"]:focus{padding:0 0.5625rem;}
#right .toggleHint{margin:0;}

/* Concentrador (solo lectura): total grande en cian, desglose canal por canal y nota */
.concentradorTotal{color:var(--pn-color-cyan);font:700 2rem/2.5rem var(--font-sans);letter-spacing:-.6px;}
.concentradorEmpty{color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
.concentradorList{display:flex;flex-direction:column;gap:0.25rem;}
.concentradorRow{display:flex;align-items:center;gap:0.5rem;color:var(--pn-color-white);font:400 0.8125rem/1.25rem var(--font-sans);}
.concentradorOrigen{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.concentradorMbps{flex:none;color:var(--pn-color-cyan);}
.concentradorBackupTag{flex:none;padding:0 0.375rem;border:1px solid var(--pn-color-border);border-radius:var(--pn-layout-pill);
  color:var(--pn-color-muted);font:400 0.6875rem/1rem var(--font-sans);}
.concentradorHint{color:var(--pn-color-subtle);font:400 0.75rem/1.125rem var(--font-sans);}

/* Conexiones y Herencia: título como overline */
#connectionsBox, #herenciaBox{gap:0.75rem;}
#connectionsBox > label, #herenciaBox > label{color:var(--pn-color-muted);font:400 0.75rem/1.125rem var(--font-sans);letter-spacing:2px;text-transform:uppercase;}
#connectionsBox .connEmpty, #herenciaBox .herenciaEmpty{color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
#connectionsBox .connList{display:flex;flex-direction:column;gap:1rem;}
.connRow{display:grid;grid-template-columns:1.875rem minmax(0,1fr);column-gap:1rem;row-gap:0.5rem;cursor:pointer;}
.connIcon{width:1.875rem;height:1.875rem;}
.connBody{display:flex;flex-direction:column;min-width:0;}
.connName{color:var(--pn-color-white);font:400 1rem/1.5rem var(--font-sans);overflow-wrap:anywhere;}
.connRow:hover .connName{color:var(--pn-color-cyan);}
.connTipo{color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
.connValor{color:var(--pn-color-cyan);font:500 0.8125rem/1.25rem var(--font-sans);overflow-wrap:anywhere;}
.connSdwan{color:var(--pn-color-mint);font:400 0.8125rem/1.25rem var(--font-sans);}
.connActions{grid-column:2;justify-self:end;display:flex;gap:0.5rem;}
.connArrow svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.connItem.open .connArrow{border:2px solid var(--pn-color-focus);color:var(--pn-color-cyan);}

#herenciaBox .herenciaGroup{color:var(--pn-color-subtle);font:400 0.75rem/1.125rem var(--font-sans);}
#herenciaBox .herenciaList{display:flex;flex-direction:column;gap:0.5rem;}
#herenciaBox .herenciaRow{display:flex;align-items:center;gap:0.75rem;min-height:3rem;cursor:pointer;
  color:var(--pn-color-white);font:400 1rem/1.5rem var(--font-sans);}
#herenciaBox .herenciaRow:hover .herenciaName{color:var(--pn-color-cyan);}
#herenciaBox .herenciaCheck{flex:none;width:1.25rem;height:1.25rem;accent-color:var(--pn-color-cyan);cursor:pointer;}
#herenciaBox .herenciaIcon{flex:none;width:1.875rem;height:1.875rem;}
#herenciaBox .herenciaName{flex:1;min-width:0;overflow-wrap:anywhere;}
#herenciaBox .herenciaRemove{font-size:1.25rem;}

/* Productos de la entidad */
#instanceSection{display:none;}
#instanceSection h2{margin-bottom:0.75rem;}
#instanceList{display:flex;flex-direction:column;gap:0.5rem;}
.inst-row{display:flex;align-items:center;gap:1rem;cursor:pointer;}
.inst-icon{flex:none;width:1.875rem;height:1.875rem;}
.inst-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.inst-name{color:var(--pn-color-white);font:400 1rem/1.5rem var(--font-sans);overflow-wrap:anywhere;}
.inst-row:hover .inst-name{color:var(--pn-color-cyan);}
.inst-vertical{color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}

/* Botón "Eliminar …" al pie del panel (Button danger, alto 44 dentro del detalle) */
#navActions{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.25rem;}
#navActions:empty{display:none;}
#navActions .btn{width:100%;height:2.75rem;}