/* Aula Viva · bloque 5 (Topologías). Clases con prefijo b5- */
.b5-lab, .b5-sn, .b5-df { min-width: 0; }
.b5-sm { padding: 3px 12px; font-size: 14px; }
.b5-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.b5-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.b5-lbl { margin-right: 2px; }

/* barra de equipos */
.b5-pal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.b5-add { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: var(--surface); border-radius: 12px; padding: 5px 12px 5px 6px; text-align: left; }
.b5-add:hover:not(:disabled) { border-color: var(--accent); }
.b5-add:disabled { opacity: .45; cursor: not-allowed; }
.b5-addpic { width: 54px; flex: none; }
.b5-addtx { display: flex; flex-direction: column; line-height: 1.15; }
.b5-addtx small { color: var(--muted); font-size: 12.5px; }

.b5-help { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface2); border-left: 5px solid var(--accent); min-height: 42px; font-weight: 600; font-size: 15.5px; }
.b5-help.ok { border-left-color: var(--ok); }
.b5-help.bad { border-left-color: var(--bad); background: var(--bad-bg); }

/* lienzo */
.b5-canvas { position: relative; margin-top: 12px; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background-color: var(--surface2); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 18px 18px; min-height: 220px; }
.b5-canvas[data-mode="sim"] { border-color: var(--c1); }
.b5-cab, .b5-ovl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.b5-cab { z-index: 1; pointer-events: none; }
.b5-ovl { z-index: 4; pointer-events: none; }
.b5-cab .b5-hit { pointer-events: stroke; cursor: pointer; }
.b5-tray { position: absolute; left: 14px; z-index: 2; font: 600 13px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.b5-flow { animation: b5flow .9s linear infinite; }
@keyframes b5flow { to { stroke-dashoffset: -14.5; } }
.b5-cb.cut path:not(.b5-hit) { opacity: .9; }
.b5-cb.down path:not(.b5-hit) { opacity: .6; }
.b5-cutmark.b5-spark circle { animation: b5pop .5s ease-out; transform-origin: center; }
.b5-rays { animation: b5rays .7s ease-out forwards; }
@keyframes b5pop { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes b5rays { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }

/* nodos */
.b5-node { position: absolute; z-index: 3; transition: left .35s ease, top .35s ease; }
.b5-card { background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 5px 7px 7px; box-shadow: var(--shadow); text-align: center; }
.b5-nh { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 22px; position: relative; padding-right: 18px; padding-left: 18px; }
.b5-nn { font: 700 13.5px var(--display); line-height: 1.1; }
.b5-role { font: 700 10.5px var(--mono); background: var(--c5); color: var(--navy); border-radius: 5px; padding: 0 5px; }
.b5-x { position: absolute; right: -2px; top: -1px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; padding: 0; }
.b5-x:hover { background: var(--bad-bg); color: var(--bad); }
.b5-pic { margin: 3px auto 2px; width: 100%; }
.b5-ipl { min-height: 20px; display: flex; justify-content: center; }
.b5-ip { border: 0; background: transparent; padding: 0 4px; font-size: 11.5px; color: var(--muted); border-radius: 5px; font-family: var(--mono); }
button.b5-ip { cursor: pointer; text-decoration: underline dotted; }
button.b5-ip:hover { color: var(--accent); }
.b5-l2 { font-family: var(--body); font-style: italic; }
.b5-pill { display: inline-block; margin-top: 3px; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface2); color: var(--muted); line-height: 1.35; }
.b5-pill.ok { background: var(--ok-bg); color: var(--ok); }
.b5-pill.bad { background: var(--bad-bg); color: var(--bad); }
.b5-pwr { margin-top: 5px; }
.b5-pw { border: 2px solid var(--fg); background: var(--surface); border-radius: 99px; padding: 1px 12px; font-weight: 700; font-size: 13px; }
.b5-pw:hover { background: var(--surface2); }
.b5-pw[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.b5-off .b5-pic { filter: grayscale(.9) brightness(.72); }
.b5-off .b5-card { border-style: dashed; }
.b5-lost .b5-card { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-a); }
.b5-okn .b5-card { border-color: var(--ok); }
.b5-alarm .b5-card { animation: b5alarm 1.1s; }
@keyframes b5alarm { 0%, 100% { transform: none; } 12% { transform: translateX(-6px); } 24% { transform: translateX(6px); } 36% { transform: translateX(-4px); } 48% { transform: translateX(4px); } 60% { transform: none; background: var(--bad-bg); } }
.b5-recover .b5-card { animation: b5rec 1.1s; }
@keyframes b5rec { 0% { background: var(--ok-bg); } 100% { background: var(--surface); } }
.b5-ping .b5-card { animation: b5ping .9s var(--d, 0ms) both; }
@keyframes b5ping { 0% { box-shadow: 0 0 0 0 var(--ok-a); } 40% { box-shadow: 0 0 0 9px var(--ok-a); } 100% { box-shadow: var(--shadow); } }

/* puertos: botones reales sobre el borde del equipo */
.b5-port { position: absolute; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 50%; border: 2px solid #0e1215; background: #1d2328; color: #fff; font: 700 12px var(--mono); display: grid; place-items: center; z-index: 5; cursor: pointer; }
.b5-port span { pointer-events: none; }
.b5-port::after { content: ''; position: absolute; left: -9px; right: -9px; top: -9px; bottom: -9px; border-radius: 50%; }
.b5-t-switch .b5-nh { padding-top: 16px; }
.b5-port.b5-s-left { left: -13px; top: 50%; margin-top: -13px; }
.b5-port.b5-s-right { right: -13px; top: 50%; margin-top: -13px; }
.b5-port.b5-s-top { top: -13px; margin-left: -13px; }
.b5-node:not(.b5-t-switch) .b5-port.b5-s-top { left: 50%; }
.b5-port.b5-s-bottom { bottom: -13px; margin-left: -13px; }
.b5-port.used { background: var(--ok); border-color: #14532b; }
.b5-port.blk { background: #B3261E; border-color: #7d1912; }
.b5-port:hover { box-shadow: 0 0 0 4px var(--accent-a); }
.b5-port.sel { background: var(--c3); color: var(--navy); border-color: var(--navy); animation: b5sel 1s infinite; }
@keyframes b5sel { 50% { box-shadow: 0 0 0 7px var(--c1-a); } }
.b5-shake { animation: shake .4s; }
.b5-port:focus-visible, .b5-add:focus-visible, .b5-pw:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* información */
.b5-ipbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 12px; border: 1.5px dashed var(--line); border-radius: 12px; }
.b5-ipbox[hidden] { display: none; }
.b5-ipbox input, .b5-sn input[type="text"] { border: 2px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 8px; padding: 4px 8px; font: 600 15px var(--mono); width: 10.5em; max-width: 100%; }
.b5-ipbox input:focus, .b5-sn input[type="text"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-a); }
.b5-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.b5-info, .b5-cables { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); min-width: 0; }
.b5-cables h3, .b5-rh, .b5-retos h3, .b5-ringp h3 { font-size: 17px; margin-bottom: 6px; }
.b5-rh { margin-top: 10px; }
.b5-chip { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--c5); color: var(--navy); font-size: 14.5px; }
.b5-k-linea, .b5-k-punto { background: var(--c2); } .b5-k-estrella { background: var(--c3); } .b5-k-arbol { background: var(--c4); } .b5-k-anillo { background: var(--c1); } .b5-k-mixta { background: var(--c6); }
.b5-why { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }
.b5-warn { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); border-left: 5px solid var(--c3); font-size: 15px; }
.b5-sum { font-weight: 600; margin: 4px 0; } .b5-sum.ok { color: var(--ok); } .b5-sum.bad { color: var(--bad); }
.b5-res { margin: 4px 0 0; padding-left: 1.1em; font-size: 15px; }
.b5-res li { margin-bottom: 3px; }
.b5-cl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.b5-cl li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 5px 8px; border: 1.5px solid var(--line); border-radius: 9px; font-size: 14.5px; }
.b5-cl li.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a); }
.b5-cl li.cut { background: var(--bad-bg); }
.b5-cl-t { min-width: 0; } .b5-st { color: var(--muted); }
.b5-cl .btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* retos */
.b5-retos { margin-top: 16px; border-top: 2px solid var(--line); padding-top: 12px; }
.b5-rts { display: flex; flex-wrap: wrap; gap: 8px; }
.b5-rt { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: var(--surface); border-radius: 12px; padding: 5px 12px 5px 6px; text-align: left; font-size: 14.5px; font-weight: 600; max-width: 100%; }
.b5-rt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a); }
.b5-rt.ok .b5-rn { background: var(--ok); color: #fff; }
.b5-rn { font: 700 13px var(--mono); width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; flex: none; }
.b5-rbody { margin-top: 10px; }
.b5-rbody h4 { font-size: 17px; margin-bottom: 6px; }
.b5-opts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.b5-op { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.b5-op input { margin-top: 4px; accent-color: var(--accent); }
.b5-op:hover { border-color: var(--accent); }
.b5-sw { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; cursor: pointer; }
.b5-sw input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; }

/* anillo */
.b5-ringp { margin-top: 14px; border-top: 2px solid var(--line); padding-top: 12px; }
.b5-steps { margin: 0 0 8px; padding-left: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 6px; }
.b5-steps li { counter-increment: s; display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.b5-steps li::before { content: counter(s); font: 700 13px var(--mono); width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; flex: none; margin-top: 1px; }
.b5-steps li.done::before { content: "✓"; background: var(--ok); color: #fff; }
.b5-steps li.done { color: var(--muted); }
.b5-mrpst { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface2); font-size: 15px; }

/* subred */
.b5-sn-hosts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.b5-sn-h, .b5-sn-mid { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.b5-sn-h h4 { font-size: 15.5px; }
.b5-sn-pic { width: min(150px, 80%); margin-inline: auto; }
.b5-sn label { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.b5-sn label input { width: 100%; }
.b5-sn-mid { border-style: dashed; align-items: stretch; }
.b5-sn-mid .b5-sw { font-size: 14.5px; margin: 0; color: var(--fg); flex-direction: row; font-weight: 600; }
.b5-sn-router { display: flex; flex-direction: column; gap: 8px; }
.b5-sn-router svg { width: 110px; margin-inline: auto; }
.b5-sn-rf { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
.b5-sn-rf b { grid-column: 1 / -1; font-size: 13.5px; }
.b5-sn-wire { width: 100%; height: 30px; }
.b5-sn-calc { margin-top: 14px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.b5-sn-ch { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.b5-sn-ch h3 { font-size: 17px; }
.b5-sn-r { display: grid; grid-template-columns: 15em auto 1fr; gap: 4px 10px; align-items: center; padding: 3px 0; font-size: 14.5px; }
.b5-sn-l { font-weight: 600; }
.b5-sn-d { font-size: 13.5px; color: var(--muted); }
.b5-bits { font: 600 14.5px var(--mono); letter-spacing: .02em; white-space: nowrap; }
.b5-bits i { font-style: normal; color: var(--muted); padding: 0 1px; }
.b5-bits .n { background: var(--c2); color: var(--navy); padding: 1px 0; }
.b5-bits .h { background: var(--c6); color: var(--navy); padding: 1px 0; }
.b5-sn-sep { height: 1px; background: var(--line); margin: 6px 0; }
.b5-sn-cmp { font-weight: 700; margin: 6px 0 0; } .b5-sn-cmp.ok { color: var(--ok); } .b5-sn-cmp.bad { color: var(--bad); }
.b5-sn-legend { margin: 8px 0 0; }
.b5-sn-v { margin-top: 14px; border: 2px solid var(--fg); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.b5-sn-big { font: 700 24px var(--display); } .b5-sn-big.ok { color: var(--ok); } .b5-sn-big.bad { color: var(--bad); }
.b5-sn-why { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; }
.b5-sn-why li { padding: 7px 10px; border-radius: 10px; border-left: 5px solid var(--line); background: var(--surface2); }
.b5-sn-why li.ok { border-left-color: var(--ok); } .b5-sn-why li.bad { border-left-color: var(--bad); }

/* diferencias offline/online */
.b5-df-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.b5-df-col { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.b5-df-col h4 { font-size: 15.5px; margin-bottom: 8px; } .b5-df-col h4 small { color: var(--muted); font-weight: 400; }
.b5-df-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.b5-dr { width: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 2px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 8px; text-align: left; }
.b5-dr:hover { border-color: var(--accent); }
.b5-dr.mk { border-color: var(--c1); background: var(--bad-bg); box-shadow: 0 0 0 3px var(--c1-a); }
.b5-dr-n { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; line-height: 1.15; }
.b5-dr-n span:last-child { display: flex; flex-direction: column; }
.b5-dr-n small { color: var(--muted); font-size: 12px; }
.b5-mini { width: 46px; flex: none; display: block; }
.b5-dr-w { color: var(--muted); font-weight: 700; }
.b5-dr-m { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.b5-dr.mk .b5-dr-m { color: var(--bad); }
.b5-df-why { margin: 10px 0 0; padding-left: 1.1em; font-size: 15.5px; }
.b5-df-why li { margin-bottom: 6px; }

/* tarjetas de estado en la pantalla 5.3 */
.b5-ic { display: inline-flex; align-items: center; gap: 8px; }
.b5-ic svg { width: 26px; height: 26px; flex: none; }
.b5-ic small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.b5-sq { display: inline-block; width: 18px; height: 18px; border-radius: 3px; border: 2px solid #0e1215; vertical-align: -3px; }
.b5-sq.g { background: #2FA84F; } .b5-sq.y { background: #F2B705; }
.b5-topo-fig { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.b5-topo-fig > div { flex: 1 1 210px; max-width: 280px; text-align: center; font-size: 14px; color: var(--muted); }
.b5-topo-fig svg { width: 100%; height: auto; display: block; }

/* figura de las tres formas (pantalla 5.1) */
.b5-tp { width: 100%; height: auto; display: block; }
.b5-tp .n { stroke: var(--fg); stroke-width: 1.4; }
.b5-tp .cpu { fill: var(--c2); } .b5-tp .sw { fill: var(--c4); } .b5-tp .io { fill: var(--surface); }
.b5-tp .cb { stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; }
.b5-tp text { font: 700 12px var(--body); fill: var(--fg); }
.b5-tp text.p { fill: var(--navy); }
.b5-tp text.ti { font: 700 16px var(--display); }

/* calentamiento "llena el puerto partner" (pantalla 5.5) */
.b5-pl { min-width: 0; }
.b5-pl-fig { overflow-x: auto; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px; }
.b5-pl-svg { display: block; width: 100%; min-width: 480px; height: auto; }
.b5-pl-box { fill: var(--surface2); stroke: var(--fg); stroke-width: 1.6; }
.b5-pl-port { fill: var(--surface); stroke: var(--fg); stroke-width: 1.4; }
.b5-pl-nm { font: 700 15px var(--display); fill: var(--fg); }
.b5-pl-pn { font: 700 11px var(--mono); fill: var(--fg); }
.b5-pl-cab { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.b5-pl-c0 { stroke: var(--c2); } .b5-pl-c1 { stroke: var(--c4); } .b5-pl-c2 { stroke: var(--c3); }
.b5-pl-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.b5-pl-row { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 15em) 1fr; gap: 6px 10px; align-items: center; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); }
.b5-pl-row.ok { border-color: var(--ok); background: var(--ok-bg); }
.b5-pl-row.bad { border-color: var(--bad); background: var(--bad-bg); }
.b5-pl-q { font-weight: 700; }
.b5-pl-row select { font: inherit; padding: 5px 8px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); min-width: 0; width: 100%; }
.b5-pl-fb { font-size: 14.5px; }
@media (max-width: 760px) { .b5-pl-row { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  .b5-cols { grid-template-columns: 1fr; }
  .b5-sn-hosts { grid-template-columns: 1fr; }
  .b5-df-cols { grid-template-columns: 1fr; }
  .b5-sn-r { grid-template-columns: 1fr; gap: 1px; padding: 5px 0; }
  .b5-bits { font-size: 12.5px; }
  .b5-sn-d { font-size: 13px; }
}
@media (max-width: 520px) {
  .b5-nn { font-size: 12.5px; }
  .b5-pill { font-size: 11.5px; padding: 1px 6px; }
  .b5-add { padding-right: 8px; }
  .b5-addpic { width: 44px; }
  .b5-rtt { font-size: 13.5px; }
  .b5-bits { font-size: 11px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) { .b5-node { transition: none; } .b5-flow { animation: none; } }