/* Aula Viva · bloque 3 · Direccionamiento. Clases con prefijo b3-. Subred = azul (--c2), estación = naranja (--c3), texto --navy encima. */
.b3-more { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); max-width: 74ch; }
.b3-more summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.b3-more > div { padding: 0 14px 6px; color: var(--muted); }
.b3-bad { color: var(--bad); font-weight: 700; }
.b3-scroll { overflow-x: auto; }
.b3-scroll:focus-visible { outline: 3px solid var(--accent); }

/* celdas de bit (anatomía, laboratorios, ejemplo) */
.b3-b, .b3-bit { font-family: var(--mono); font-weight: 700; color: var(--navy); text-align: center; }
.b3-b.n, .b3-bit.n { background: var(--c2); border-bottom: 3px solid #4f8fc4; }
.b3-b.s, .b3-bit.s { background: var(--c3); border-bottom: 3px dashed #b86f00; }
.b3-bit.off { background: var(--surface2); color: var(--fg); border-bottom: 3px solid var(--line); }
.b3-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--muted); }
.b3-leg i.b3-b { display: inline-block; width: 22px; height: 22px; line-height: 20px; border-radius: 4px; font-style: normal; font-size: 13px; margin-right: 4px; vertical-align: -5px; }

/* 3.5 anatomía */
.b3-anat { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: flex-end; justify-content: center; }
.b3-ao { flex: 1 1 130px; max-width: 190px; text-align: center; }
.b3-ao-n { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.b3-ao-dec { font: 700 34px/1.1 var(--display); margin: 2px 0 6px; }
.b3-ao-bits, .b3-ao-w { display: flex; gap: 2px; }
.b3-ao-bits .b3-b { flex: 1 1 0; min-width: 0; height: 30px; line-height: 27px; border-radius: 4px; }
.b3-ao-w span { flex: 1 1 0; min-width: 0; font: 500 10.5px var(--mono); color: var(--muted); }
.b3-dot { font: 700 34px/1 var(--display); padding-bottom: 36px; }
@media (max-width: 640px) { .b3-dot { display: none; } .b3-ao { flex-basis: 40%; max-width: none; } }

/* 3.7 diagrama SVG de clases */
.b3-svg { display: block; width: 100%; min-width: 620px; height: auto; }
.b3-st-t { font: 700 16px var(--display); fill: var(--fg); }
.b3-st-n { fill: var(--c2); } .b3-st-h { fill: var(--c3); }
.b3-st-lab { font: 700 12px var(--body); fill: var(--navy); }
.b3-st-c.n { fill: var(--c2); } .b3-st-c.h { fill: var(--c3); }
.b3-st-c.lead { stroke: var(--navy); stroke-width: 2.4; }
.b3-st-b { font: 600 14px var(--mono); fill: var(--navy); }
.b3-st-b.lead { font-weight: 800; }
.b3-st-br { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.b3-st-s { font: 600 11px var(--body); fill: var(--muted); }
.b3-st-d { fill: var(--surface2); stroke: var(--line); }
.b3-st-dt { font: 700 14px var(--mono); fill: var(--fg); }

/* 3.4 laboratorio de MAC */
.b3-prog { margin-bottom: 12px; }
.b3-mac { display: flex; align-items: flex-end; margin: 14px 0 6px; }
.b3-mb { flex: 1 1 0; min-width: 0; text-align: center; border-radius: 8px; padding: 6px 2px 4px; background: var(--surface2); border: 1.5px solid var(--line); }
.b3-mb.n { background: var(--c2); border-color: transparent; color: var(--navy); }
.b3-mb.s { background: var(--c3); border-color: transparent; color: var(--navy); }
.b3-mh { display: block; font: 700 clamp(18px, 5vw, 28px)/1.2 var(--mono); }
.b3-mn { display: block; font-size: 11px; color: var(--muted); }
.b3-mb.n .b3-mn, .b3-mb.s .b3-mn { color: var(--navy); }
.b3-gapb { flex: 0 0 22px; align-self: stretch; border: 0; background: transparent; font: 700 24px var(--mono); color: var(--muted); padding: 0; border-radius: 6px; }
.b3-gapb:hover { background: var(--accent-a); color: var(--fg); }
.b3-mg { flex: 0 0 22px; text-align: center; font: 700 24px var(--mono); color: var(--muted); align-self: center; }
.b3-mg.cut { flex-basis: 14px; border-left: 3px solid var(--fg); height: 64px; align-self: center; }
.b3-mlabs { display: flex; gap: 8px; margin-bottom: 8px; }
.b3-mlabs span { flex: 1; text-align: center; font: 600 14px var(--body); padding: 3px 6px; border-radius: 8px; color: var(--navy); }
.b3-mlabs .n { background: var(--c2); } .b3-mlabs .s { background: var(--c3); }
.b3-iow { max-width: 340px; margin: 10px auto 0; }
.b3-io [data-z] { cursor: pointer; }
.b3-io [data-z]:hover rect:first-child, .b3-io [data-z]:hover circle:first-child { stroke: var(--accent); stroke-width: 2; }
.b3-io [data-z]:focus-visible { outline: 3px solid var(--accent); }
.b3-io [data-z].bad rect:first-child { stroke: var(--bad); stroke-width: 3; }
.b3-fb .ok { color: var(--ok); } .b3-fb .bad { color: var(--bad); }

/* 3.6 laboratorio de máscara */
.b3-lab { display: flex; flex-direction: column; gap: 14px; }
.b3-retos { display: flex; flex-wrap: wrap; gap: 8px; }
.b3-retos button { border: 2px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.b3-retos button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.b3-ck { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; opacity: .5; }
.b3-retos button.done .b3-ck { background: var(--ok); border-color: var(--ok); opacity: 1; }
.b3-retos button:not(.done) .b3-ck { display: none; }
.b3-goal { border: 1.5px solid var(--line); border-left: 6px solid var(--c3); border-radius: 12px; padding: 12px 16px; background: var(--surface2); }
.b3-goal-t { font: 700 18px var(--display); }
.b3-goal-d { margin: 4px 0 8px; max-width: 74ch; }
.b3-goal-s { font-weight: 700; min-height: 1.4em; color: var(--muted); }
.b3-goal-s.ok { color: var(--ok); }
.b3-hint-t { margin: 8px 0 0; }
.b3-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .b3-eq { grid-template-columns: 1fr; } }
.b3-dev { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); min-width: 0; }
.b3-dev-h { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.b3-pic { flex: 0 0 120px; width: 120px; }
.b3-dev-n { display: flex; flex-direction: column; min-width: 0; }
.b3-f { margin-top: 8px; }
.b3-fl { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.b3-oct { display: flex; align-items: center; gap: 2px; }
.b3-oi { width: 100%; min-width: 0; flex: 1 1 0; font: 600 18px var(--mono); text-align: center; padding: 5px 2px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); -moz-appearance: textfield; appearance: textfield; }
.b3-oi::-webkit-outer-spin-button, .b3-oi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.b3-oi:disabled { opacity: .55; background: var(--surface2); }
.b3-oi[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); }
.b3-dt { font: 700 20px var(--mono); }
.b3-sl { width: 100%; margin: 8px 0 0; accent-color: var(--accent); }
.b3-link { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.b3-link input { width: 20px; height: 20px; accent-color: var(--accent); }
.b3-warn { min-height: 1.3em; color: var(--bad); font-weight: 600; font-size: 14.5px; }
.b3-warn:empty { display: none; }
.b3-verdict { border-radius: 12px; padding: 12px 16px; border: 2px solid var(--line); background: var(--surface2); border-left-width: 8px; }
.b3-verdict.ok { border-color: var(--ok); background: var(--ok-bg); }
.b3-verdict.err { border-color: var(--bad); background: var(--bad-bg); }
.b3-verdict.warn { border-color: var(--c3); background: var(--warn-bg); }
.b3-vq { display: block; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.b3-bits { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); }
.b3-bits-h { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.b3-bits-h .b3-leg { margin-top: 0; }
.b3-row { margin-top: 12px; }
.b3-rl { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.b3-rg { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.b3-og { flex: 1 1 150px; min-width: 150px; }
.b3-bs { display: flex; gap: 2px; }
.b3-bit { flex: 1 1 0; min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 5px; font-size: 16px; line-height: 34px; position: relative; }
button.b3-bit { cursor: pointer; }
button.b3-bit:disabled { cursor: not-allowed; opacity: .6; }
button.b3-bit:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--fg); }
.b3-bit.ro { cursor: default; }
.b3-bit.z { opacity: .4; }
.b3-bit.x { outline: 2.5px solid var(--bad); outline-offset: -1px; }
.b3-bit.x::after { content: "!"; position: absolute; top: -9px; right: -2px; font: 800 12px var(--mono); color: #fff; background: var(--bad); border-radius: 50%; width: 15px; height: 15px; line-height: 15px; }
.b3-od { text-align: center; font: 600 14px var(--mono); color: var(--muted); }
.b3-row.out .b3-od { color: var(--fg); }
.b3-explain { margin-top: 12px; font-size: 15.5px; display: flex; flex-direction: column; gap: 3px; }
.b3-res td:not(:first-child) { font-family: var(--mono); font-size: 14.5px; }

/* 3.7 laboratorio de clases */
.b3-ipbig { font: 700 clamp(26px, 6vw, 40px)/1.2 var(--mono); }
.b3-tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 8px 0; }
.b3-tbc { display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(34px, 9vw, 46px); }
.b3-tbc .b3-bit { width: 100%; flex: none; height: 44px; line-height: 42px; font-size: 20px; }
.b3-tbc span { font: 500 12px var(--mono); color: var(--muted); }
.b3-tsum { font: 700 22px var(--mono); padding: 0 8px 18px; }
.b3-full td { font-family: var(--mono); text-align: center; font-weight: 700; color: var(--navy); }
.b3-full td.n { background: var(--c2); } .b3-full td.s { background: var(--c3); }
.b3-full th { white-space: nowrap; background: var(--surface2); padding: 8px 12px; text-align: left; }

/* tablas de 3 o más columnas: en pantallas chicas se deslizan en vez de apretar el texto */
@media (max-width: 720px) {
  .b3-wt td, .b3-wt th { min-width: 150px; }
  .b3-wt td:first-child, .b3-wt th:first-child { min-width: 96px; }
}