/* Laboratorio virtual. Usa los tokens de estilo.css, así funciona en tema claro y oscuro. */
:root { --lab-piso: light-dark(#f4ead8, #2b2620); --lab-borde: light-dark(#c9bda8, #5a5146); --lab-caja: light-dark(#fff, #221e1a); --lab-bien: light-dark(#1d6b3a, #6ad08d); --lab-mal: light-dark(#a8321f, #ff8f7a); --lab-info: light-dark(#1b5c94, #7cc0f5); }
#laboratorio { display: grid; gap: 16px; }
#laboratorio[aria-busy] { cursor: progress; }
.lab-consigna { font-size: 1.05rem; margin: 0; max-width: 70ch; }
.lab-nota { margin: 0; }
.lab-aviso { position: sticky; bottom: 12px; z-index: 5; margin: 14px 0; padding: 12px 14px; box-shadow: 0 6px 18px rgb(0 0 0 / .22); border-radius: 10px; border: 2px solid currentColor; background: var(--lab-caja); font-weight: 600; }
.lab-aviso.bien { color: var(--lab-bien); }
.lab-aviso.error { color: var(--lab-mal); }
.lab-aviso.info { color: var(--lab-info); }
.lab-sub { margin: 4px 0 -6px; }
.lab-pasos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; counter-reset: p; }
.lab-pasos li { counter-increment: p; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--lab-borde); font-size: .88rem; }
.lab-pasos li::before { content: counter(p) ". "; }
.lab-pasos .hecho { background: var(--lab-bien); border-color: var(--lab-bien); color: var(--lab-caja); }
.lab-pasos .activo { border-color: var(--tinta); font-weight: 800; }
.lab-mesa { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; padding: 14px; border: 2px solid var(--lab-borde); border-radius: 14px; background: var(--lab-piso); }
.lab-mesa figure { margin: 0; flex: 0 1 190px; }
.lab-mesa figcaption { font-size: .88rem; margin-top: 6px; }
.lab-ficha { width: 100%; height: auto; display: block; }
.lab-ordenar { flex: 1 1 280px; }
.lab-ordenar h3 { margin: 0 0 8px; }
.lab-hilos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.lab-hilos li { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; background: var(--lab-caja); }
.lab-hilo-n { flex: 1; min-width: 0; }
.lab-muestra { width: 34px; height: 16px; flex: none; border-radius: 8px; border: 1px solid #23303a; background: var(--c); }
.lab-muestra.rayada { background: repeating-linear-gradient(90deg, #fafaf5 0 7px, var(--c) 7px 12px); }
.lab-mover { min-width: 44px; min-height: 44px; font-size: 1.15rem; font-weight: 800; border: 2px solid var(--lab-borde); border-radius: 8px; background: var(--lab-piso); color: var(--tinta); cursor: pointer; }
.lab-mover:disabled { opacity: .35; cursor: default; }
.lab-eleccion, .lab-opciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lab-eleccion p { flex-basis: 100%; margin: 0; }
.lab-bandeja { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.lab-herr { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; min-height: 96px; border: 2px solid var(--lab-borde); border-radius: 12px; background: var(--lab-caja); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }
.lab-herr:hover { border-color: var(--tinta); }
.lab-probador { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: #1b2a22; color: #eaf7ee; }
.lab-probador b { flex-basis: 100%; }
.lab-probador span { display: grid; justify-items: center; gap: 2px; min-width: 32px; }
.lab-probador i { width: 16px; height: 16px; border-radius: 50%; background: #39d96d; box-shadow: 0 0 8px #39d96d; }
.lab-probador .mal i { background: #ff5b45; box-shadow: 0 0 8px #ff5b45; }
.lab-luces { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #1c2125; color: #e8edf0; font-size: .9rem; }
.lab-luz { display: inline-flex; align-items: center; gap: 6px; }
.lab-luz i { width: 12px; height: 12px; border-radius: 50%; background: #4a5157; }
.lab-luz.prendida i { background: #39d96d; box-shadow: 0 0 7px #39d96d; }
.lab-router { display: flex; gap: 8px; overflow-x: auto; padding: 14px; border-radius: 12px; background: #2a2f34; }
.lab-puerto { flex: 1 0 62px; display: grid; justify-items: center; gap: 3px; min-height: 86px; padding: 8px 4px; border: 2px solid #6b747c; border-radius: 8px; background: #3a4147; color: #fff; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.lab-puerto i { width: 34px; height: 26px; border: 2px solid #b8c0c7; border-radius: 3px; background: #15191c; }
.lab-puerto.wan i { border-color: #5cb7ff; }
.lab-puerto.energia i { width: 24px; height: 24px; border-radius: 50%; }
.lab-puerto.uso i { background: #39d96d; }
.lab-puerto.internet i { background: #5cb7ff; }
.lab-puerto.pc i { background: #ffc21f; }
.lab-puerto small { font-weight: 500; }
.lab-pantalla, .lab-panel { padding: 14px; border: 2px solid var(--lab-borde); border-radius: 12px; background: var(--lab-caja); }
.lab-pantalla p { margin-top: 0; }
.lab-panel { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.lab-ticket { grid-column: 1 / -1; padding: 12px; border-radius: 8px; background: var(--lab-piso); }
.lab-ticket p { margin: 4px 0 0; overflow-wrap: anywhere; }
.lab-form h3 { margin: 0 0 8px; }
.lab-form .campo { margin-bottom: 10px; }
.lab-form label { display: block; position: static; width: auto; height: auto; clip: auto; font-weight: 600; margin-bottom: 3px; }
.lab-form input, .lab-form select { width: 100%; min-height: 44px; }
.lab-canales { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; height: 74px; align-items: end; margin-bottom: 10px; }
.lab-canales span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.lab-canales i { display: block; width: 100%; height: calc(var(--n) * 8px + 1px); background: var(--lab-info); border-radius: 3px 3px 0 0; }
.lab-canales small { font-size: .72rem; }
.lab-control { list-style: none; margin: 0; padding: 12px; border: 2px solid var(--lab-borde); border-radius: 12px; display: grid; gap: 5px; }
.lab-control li { display: flex; gap: 8px; }
.lab-control .ok { color: var(--lab-bien); }
.lab-control .mal { color: var(--lab-mal); font-weight: 600; }
.lab-llamado { padding: 14px; border-left: 6px solid var(--tinta); background: var(--lab-piso); border-radius: 8px; }
.lab-llamado p { margin: 5px 0 0; font-size: 1.08rem; }
.lab-consola { padding: 12px; min-height: 92px; max-height: 280px; overflow: auto; border-radius: 10px; background: #12181d; color: #d8f4df; font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .92rem; }
.lab-consola p { margin: 0 0 3px; overflow-wrap: anywhere; }
.lab-consola .cmd { margin-top: 10px; color: #ffd76a; }
.lab-consola .cmd:first-child { margin-top: 0; }
.lab-plano-marco { overflow-x: auto; }
.lab-deslizar { margin: 0; display: none; }
.lab-plano { width: 100%; min-width: 620px; height: auto; display: block; }
.lab-plano .lab-amb { paint-order: stroke; stroke: var(--lab-piso); stroke-width: 5px; }
.lab-celda { scroll-margin-bottom: 100px; }
@media (max-width: 660px) { .lab-deslizar { display: block; } }
.lab-celda { cursor: pointer; }
.lab-celda:hover, .lab-celda:focus { fill: rgba(47, 180, 240, .3); outline: none; }
.lab-fin { padding: 18px; border-radius: 12px; border: 3px solid currentColor; background: var(--lab-caja); }
.lab-fin.ok { color: var(--lab-bien); }
.lab-fin.mal { color: var(--lab-mal); }
.lab-fin h3 { margin-top: 0; }
.lab-fin p { color: var(--tinta); }
.lab-reinicio { margin: 0; }
.lab-reinicio .quieto { min-height: 44px; padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; text-decoration: underline; cursor: pointer; }

/* Multímetro virtual compartido */
.lab-mm { padding: 14px; border: 2px solid var(--lab-borde); border-radius: 14px; background: var(--lab-piso); }
.lab-mm h3 { margin: 0 0 10px; }
.lab-mm-fila { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.lab-mm-svg { width: 200px; height: auto; flex: none; }
.lab-mm-mando { flex: 1 1 260px; display: grid; gap: 8px; }
.lab-mm-tit { margin: 6px 0 0; font-weight: 700; }
.lab-mm-selector { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-mm-pos { min-width: 48px; min-height: 44px; padding: 0 10px; border: 2px solid var(--lab-borde); border-radius: 8px; background: var(--lab-caja); color: var(--tinta); font: inherit; font-weight: 800; cursor: pointer; }
.lab-mm-pos.activo { background: #F2B632; border-color: var(--tinta); color: #1B2A12; }
.lab-mm-punta { text-align: left; min-height: 44px; padding: 0 12px; border: 2px solid var(--lab-borde); border-left-width: 10px; border-radius: 8px; background: var(--lab-caja); color: var(--tinta); font: inherit; cursor: pointer; }
.lab-mm-punta.roja { border-left-color: #D9362B; }
.lab-mm-punta.negra { border-left-color: #111; }
.lab-mm-punta.activo { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta); }
.lab-mm-nota { margin: 10px 0 0; font-weight: 600; }
.lab-punto { cursor: pointer; }
.lab-punto:hover, .lab-punto:focus { outline: none; stroke: var(--tinta); stroke-width: 3; }