/* Ajustes puntuales para mantener el diseño original, pero con más interacción */
.status-pill{display:none!important}
.protocol-help{display:none!important}

.workspace-wrap{
  position:relative;
  overflow:visible;
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px 16px;
  align-items:start;
}
.workspace-toolbar{grid-column:1/-1;grid-row:1}
.topology-compact-bar{display:contents}
.workspace{grid-column:1/-1;grid-row:4}
.sim-controls{grid-column:1/-1;grid-row:7}

.message-protocol-note{
  display:block;
  margin-top:10px!important;
  padding:12px 13px;
  border:1px solid rgba(28,126,172,.16);
  border-left:4px solid #1c7eac;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(28,126,172,.08),rgba(255,210,63,.07));
  color:#456174!important;
  font-size:12px!important;
  line-height:1.5!important;
  box-shadow:0 8px 18px rgba(0,36,72,.05);
}
.message-protocol-note strong{color:#003b71}

/* Herramientas partidas: lo esencial arriba del mapa, apoyo abajo del mapa */
.compact-toolbar-title{
  grid-column:1/-1;
  grid-row:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin:4px 18px 0;
  padding:14px 16px;
  border:1px solid rgba(20,70,105,.12);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,250,253,.96));
  box-shadow:0 10px 26px rgba(0,43,82,.055);
}
.compact-toolbar-title strong{display:block;font-size:15px;color:#003b71;letter-spacing:.01em}
.compact-toolbar-title small{display:block;margin-top:3px;font-size:12px;color:#6d8193;line-height:1.35}
.topology-tip{
  flex:0 0 auto;
  max-width:360px;
  padding:8px 12px;
  border-radius:999px;
  background:#e8f5fb;
  color:#0f6f9f;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(20,125,173,.16);
  line-height:1.25;
}
.compact-group{
  min-width:0;
  min-height:0;
  border:1px solid rgba(29,88,126,.13);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  padding:15px;
  box-shadow:0 10px 24px rgba(0,40,80,.045);
}
.compact-title{
  display:block;
  margin-bottom:10px;
  color:#456174;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* Fila superior: acciones esenciales */
.compact-add{
  grid-column:1/span 4;
  grid-row:3;
  margin-left:18px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
}
.compact-link{
  grid-column:5/-1;
  grid-row:3;
  margin-right:18px;
  align-self:stretch;
}
.compact-add,.compact-link{min-height:178px}

/* Fila inferior: mismas dimensiones visuales */
.compact-manage{
  grid-column:1/span 4;
  grid-row:5;
  margin-left:18px;
}
.compact-ping{
  grid-column:5/span 4;
  grid-row:5;
}
.compact-selected{
  grid-column:9/-1;
  grid-row:5;
  margin-right:18px;
}
.compact-manage,.compact-ping,.compact-selected{
  min-height:158px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
}
.compact-note{
  grid-column:1/-1;
  grid-row:6;
  margin:0 18px 0;
}

.compact-device-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(39px,1fr);
  gap:10px;
  align-content:stretch;
}
.compact-device-grid button,
.compact-action,
.topology-compact-bar select,
.floating-inspector input{
  box-sizing:border-box;
  border:1px solid rgba(46,89,121,.18);
  border-radius:13px;
  background:#fff;
  color:#0c263a;
  font:inherit;
  outline:none;
}
.compact-device-grid button{
  min-height:39px;
  width:100%;
  padding:9px 8px;
  cursor:pointer;
  font-size:11.2px;
  line-height:1.12;
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  letter-spacing:-.01em;
  border-color:rgba(28,126,172,.22);
  background:linear-gradient(180deg,#ffffff,#f7fbfe);
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s background;
}
.compact-device-grid button:nth-last-child(1):nth-child(odd){grid-column:1/-1}
.compact-device-grid button:hover,
.compact-action:hover{
  transform:translateY(-1px);
  border-color:#1c7eac;
  box-shadow:0 10px 22px rgba(0,59,113,.1);
}
.compact-device-grid button:hover{background:#edf8fe}

.inline-controls{display:flex;align-items:center;gap:10px;min-width:0}
.inline-controls + .inline-controls{margin-top:10px}
.topology-compact-bar select{
  min-width:0;
  width:100%;
  height:40px;
  padding:0 12px;
  font-size:12px;
  font-weight:800;
}
.link-controls:first-of-type{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.compact-link .second-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(118px,150px)}
.ping-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.ping-controls #extraPing{grid-column:1/-1;margin-top:8px}
.manage-controls{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.manage-controls #editCable{grid-column:1/-1}
.arrow-mini{color:#1c7eac;font-weight:900;font-size:14px;line-height:1;text-align:center}
.compact-action{
  width:100%;
  height:40px;
  padding:0 10px;
  cursor:pointer;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  transition:.18s transform,.18s border-color,.18s box-shadow,.18s background;
}
.compact-action.primary{background:#147dad;color:#fff;border-color:#147dad}
.compact-action.primary:hover{background:#0b6f9f}
.compact-action.subtle{background:#f4f9fc;color:#0a4164}
.compact-action.danger{background:#fff5f5;color:#b42318;border-color:rgba(180,35,24,.24)}
.compact-action.danger:hover{background:#ffe8e8;border-color:rgba(180,35,24,.38)}
.compact-action.active{background:#003b71;color:#fff;border-color:#003b71}
.map-connect{margin-top:10px;height:34px;font-size:10.5px}
.compact-manage select#existingLink{margin-bottom:10px}

.compact-feedback,
.compact-ping-feedback{
  display:block;
  margin-top:10px;
  min-height:18px;
  color:#70879b;
  font-size:10.5px;
  line-height:1.38;
}
.compact-manage .compact-feedback,
.compact-ping .compact-ping-feedback{margin-top:auto;padding-top:10px}
.compact-feedback.ok,.compact-ping-feedback.ok{color:#157347;font-weight:800}
.compact-feedback.bad,.compact-ping-feedback.bad{color:#b42318;font-weight:800}
.compact-selected strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#003b71;
  font-size:14px;
  margin-bottom:5px;
}
.compact-selected small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#60788e;
  font-size:10.5px;
  margin-bottom:12px;
}
.selected-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:auto}
.compact-note{
  padding:11px 14px;
  border:1px solid rgba(28,126,172,.13);
  border-left:4px solid #1c7eac;
  border-radius:15px;
  background:rgba(28,126,172,.055);
  color:#48657a;
  font-size:11px;
  line-height:1.35;
}
.compact-note strong{color:#003b71}

/* Inspector flotante para editar IP sin ocupar espacio fijo */
.floating-inspector{
  position:absolute;
  left:22px;
  right:22px;
  bottom:96px;
  z-index:20;
  padding:16px;
  border:1px solid rgba(0,59,113,.15);
  border-radius:20px;
  background:rgba(250,253,255,.98);
  box-shadow:0 20px 55px rgba(0,35,70,.18);
  backdrop-filter:blur(12px);
}
.floating-inspector.hidden{display:none}
.inspector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mini-kicker{display:block;color:#5b738a;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.inspector-head h3{margin:2px 0 0;color:#003b71;font-size:15px}
#closeInspector{width:31px;height:31px;border:0;border-radius:50%;background:#e8f4fb;color:#0a6c99;cursor:pointer;font-size:20px;line-height:1}
.inspector-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:10px}
.inspector-grid label{display:block;color:#496579;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.floating-inspector input{width:100%;height:38px;margin-top:6px;padding:0 11px;font-size:12px;font-weight:700}
.inspector-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.extra-feedback{font-size:11px;line-height:1.35;color:#5d7285}
.extra-feedback.ok{color:#157347;font-weight:750}
.extra-feedback.bad{color:#b42318;font-weight:750}

/* Conexiones y paquete */
.extra-link{stroke:#0f7fb1!important;stroke-width:3!important;stroke-dasharray:8 8;opacity:.62}
.extra-link.utp-cruzado{stroke:#006fbf!important;stroke-dasharray:14 5 3 5}
.extra-link.wifi{stroke:#8a55d7!important;stroke-dasharray:2 9}
.extra-link.fibra{stroke:#e83e8c!important;stroke-dasharray:14 6}
.extra-link.serial{stroke:#e6a400!important;stroke-dasharray:4 4}
.extra-link.active{stroke-width:5!important;opacity:1;animation:dashMove 1s linear infinite}
@keyframes dashMove{to{stroke-dashoffset:-28}}
.node.extra-node{z-index:4}
.node.extra-node::after{content:'doble clic para editar';position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;white-space:nowrap;font-size:8px;color:#7b90a3;opacity:0;transition:.15s}
.node.extra-node:hover::after{opacity:1}
.node.extra-selected{outline:2px solid rgba(20,125,173,.5);box-shadow:0 0 0 8px rgba(20,125,173,.1)}
.node.connect-pick{outline:3px solid #ffd23f!important;box-shadow:0 0 0 8px rgba(255,210,63,.18)}
.topology-ping-packet{position:absolute;left:12%;top:23%;width:38px;height:24px;transform:translate(-50%,-50%);display:none;align-items:center;justify-content:center;border-radius:999px;background:#ed1c24;color:white;font-size:9px;font-weight:900;letter-spacing:.03em;z-index:30;box-shadow:0 0 0 8px rgba(237,28,36,.16),0 12px 28px rgba(237,28,36,.28);pointer-events:none}
.topology-ping-packet.active{display:flex}

@media(max-width:1260px){
  .compact-add{grid-column:1/span 5;grid-row:3}
  .compact-link{grid-column:6/-1;grid-row:3}
  .compact-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compact-manage{grid-column:1/span 4;grid-row:5}
  .compact-ping{grid-column:5/span 4;grid-row:5}
  .compact-selected{grid-column:9/-1;grid-row:5}
}
@media(max-width:980px){
  .workspace-wrap{grid-template-columns:1fr;gap:12px}
  .workspace-toolbar,.compact-toolbar-title,.compact-add,.compact-link,.workspace,.compact-manage,.compact-ping,.compact-selected,.compact-note,.sim-controls{grid-column:1;grid-row:auto;margin-left:10px;margin-right:10px}
  .topology-tip{display:inline-block;margin-top:8px;max-width:100%}
  .compact-toolbar-title{display:block}
  .compact-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .link-controls:first-of-type,.compact-link .second-line,.ping-controls,.manage-controls{grid-template-columns:1fr}
  .ping-controls #extraPing{margin-top:0}
  .arrow-mini{display:none}
  .inspector-grid{grid-template-columns:1fr 1fr}
  .floating-inspector{bottom:72px;left:10px;right:10px}
}
@media(max-width:560px){
  .selected-actions{grid-template-columns:1fr}
  .inspector-grid{grid-template-columns:1fr}
  .inspector-actions{align-items:flex-start;flex-direction:column}
}