/* Capa educativa agregada después de la auditoría de redes.
   Mantiene la estética clara de DIFTEL/Telemática y suma precisión sin recargar la interfaz. */

.net-mini-stack {
  grid-column: 1 / -1;
  grid-row: 6;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin: 0 18px;
}

.net-truth-card,
.net-selected-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 90, 167, 0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 253, 0.94));
  box-shadow: 0 10px 24px rgba(0, 43, 82, 0.055);
}

.net-truth-card strong,
.net-selected-card strong {
  display: block;
  color: #003b71;
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 5px;
}

.net-truth-card p,
.net-selected-card p {
  margin: 0;
  color: #587285;
  font-size: 10.5px;
  line-height: 1.45;
}

.net-selected-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.net-selected-grid span {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(28, 126, 172, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #335166;
  font: 700 8.5px/1.3 'JetBrains Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.net-selected-grid span b { color: #003b71; }

.net-route-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.net-route-steps span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e8f5fb;
  border: 1px solid rgba(20, 125, 173, 0.16);
  color: #0f6f9f;
  font: 900 8.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.device-card .device-mac,
.node .node-mac,
.live-device-mac {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 166, 214, 0.09);
  border: 1px solid rgba(0, 166, 214, 0.14);
  color: #456d82 !important;
  font: 800 7.5px/1.2 'JetBrains Mono', monospace !important;
  letter-spacing: .02em;
  white-space: nowrap;
}

.event.educational {
  border-color: rgba(0, 166, 214, 0.22) !important;
  background: linear-gradient(135deg, #ffffff, #f3fbff) !important;
}

.event.educational > span {
  background: #e8f5fb !important;
  color: #0f6f9f !important;
}

.inspector-extra-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.inspector-extra-row label {
  display: block;
  color: #49677c;
  font-size: 9px;
  font-weight: 800;
}

.inspector-extra-row input {
  width: 100%;
  margin-top: 5px;
  padding: 8px 9px;
  border: 1px solid rgba(46,89,121,.18);
  border-radius: 10px;
  background: #f7fbfd;
  color: #2e536a;
  font: 800 9px/1.2 'JetBrains Mono', monospace;
  box-sizing: border-box;
}

.cable-help-note {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fffaf0;
  border: 1px solid rgba(255, 199, 44, 0.28);
  color: #745b18;
  font-size: 9.2px;
  line-height: 1.4;
}

.cable-help-note b { color: #5c4510; }

/* Ajustes de stand: menos técnico, más visual */
.protocol-help,
.compact-note,
.device-panel-live .live-device-mac,
.node .node-mac,
.device-panel-live .live-device-meta em:nth-child(2) {
  display: none !important;
}

.device-panel-live {
  display: flex;
  flex-direction: column;
}

.device-panel-live .live-topology-panel {
  flex: 1 1 auto;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.device-panel-live .live-device-list {
  flex: 1 1 auto;
  max-height: 690px;
  min-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
}

.device-panel-live .live-device-list::-webkit-scrollbar,
.event-panel .event-list::-webkit-scrollbar { width: 8px; }

.device-panel-live .live-device-list::-webkit-scrollbar-thumb,
.event-panel .event-list::-webkit-scrollbar-thumb {
  background: rgba(28, 126, 172, .35);
  border-radius: 999px;
}

.device-panel-live .live-device-card {
  padding: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.device-panel-live .live-device-type {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.device-panel-live .live-device-main strong { font-size: 10.5px; }
.device-panel-live .live-device-main small { font-size: 9px; }
.device-panel-live .live-device-meta { margin-left: 46px; }

.event-panel {
  display: flex;
  flex-direction: column;
}

.event-panel .event-list {
  flex: 1 1 auto;
  min-height: 520px;
  max-height: none;
  overflow: auto;
  padding-right: 2px;
}

.net-mini-stack.simple-net-guide {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
  margin-top: 12px;
}

.simple-net-guide .net-truth-card,
.simple-net-guide .net-selected-card {
  background: #ffffff;
  border: 1px solid rgba(28, 126, 172, .16);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 59, 113, .055);
}

.simple-net-guide .net-route-steps span {
  background: #eef8fd;
  color: #0a628c;
  border: 1px solid rgba(28, 126, 172, .16);
}

.sim-telemetry div:nth-child(4) { display: none; }

.sim-telemetry {
  grid-template-columns: 1.25fr .75fr .9fr 1fr !important;
}

.packet.returning,
.topology-ping-packet.returning {
  background: #ffd23f !important;
  color: #003b71 !important;
  box-shadow: 0 0 0 8px rgba(255, 210, 63, .18), 0 16px 32px rgba(0, 59, 113, .22) !important;
}

.links line.route-return,
.extra-link.route-return {
  stroke: #ffd23f !important;
  stroke-width: 5 !important;
  opacity: 1 !important;
}

.node.hop-return {
  box-shadow: 0 0 0 9px rgba(255, 210, 63, .20) !important;
  outline: 2px solid rgba(255, 210, 63, .78) !important;
}

.inspector-extra-row.simple-extra-row { grid-template-columns: 1.4fr 1fr; }

@media (min-width: 980px) {
  .sim-shell {
    grid-template-columns: clamp(215px, 18vw, 265px) minmax(520px, 1fr) clamp(175px, 13vw, 215px) !important;
    align-items: stretch !important;
  }

  .device-panel,
  .event-panel { min-height: 850px; }
}

@media (min-width: 1280px) {
  .sim-shell {
    grid-template-columns: 270px minmax(680px, 1fr) 230px !important;
  }

  .device-panel,
  .event-panel { min-height: 880px; }
  .event-panel .event-list { min-height: 600px; }
}

@media (max-width: 1050px) {
  .net-mini-stack,
  .net-mini-stack.simple-net-guide { grid-template-columns: 1fr; }
}

@media (max-width: 979px) {
  .device-panel-live .live-topology-panel { min-height: 0; }

  .device-panel-live .live-device-list,
  .event-panel .event-list {
    max-height: 360px;
    min-height: 0;
  }

  .sim-telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 700px) {
  .net-mini-stack { margin: 0 10px; }
  .net-selected-grid { grid-template-columns: 1fr; }
}