/* Aula Viva · bloque 1 · Seguridad eléctrica */

/* ---------- laboratorio de la corriente ---------- */
.b1-lab { --b1-body: var(--c2); }
.b1-lab[data-z="1"] { --b1-body: var(--c6); }
.b1-lab[data-z="2"], .b1-lab[data-z="3"] { --b1-body: var(--c3); }
.b1-lab[data-z="4"], .b1-lab[data-z="5"] { --b1-body: var(--c1); }
.b1-lab[data-z="6"] { --b1-body: #9c2a22; }
.b1-top { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 18px 26px; align-items: start; }
.b1-figbox { background: var(--surface2); border-radius: 14px; padding: 10px 10px 8px; }
.b1-fig { width: 100%; height: auto; display: block; max-height: 380px; }
.b1-floor { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.b1-lo { fill: none; stroke: var(--fg); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.b1-lf { fill: none; stroke: var(--b1-body); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.b1-foot { fill: var(--b1-body); stroke: var(--fg); stroke-width: 2.2; }
.b1-torso { fill: var(--b1-body); stroke: var(--fg); stroke-width: 2.4; stroke-linejoin: round; transition: fill .2s; }
.b1-eye { fill: var(--fg); } .b1-mouth { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
.b1-lung { fill: none; stroke: var(--fg); stroke-width: 1.6; opacity: .45; stroke-dasharray: 3 3; }
.b1-lungx { stroke: var(--bad); stroke-width: 3; stroke-linecap: round; display: none; }
.b1-heart { fill: none; stroke: var(--fg); stroke-width: 1.8; opacity: .5; }
.b1-path { fill: none; stroke: #D8352B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 7; animation: b1dash 1s linear infinite; }
@keyframes b1dash { to { stroke-dashoffset: -28; } }
.b1-wire { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; }
.b1-spark { fill: #F2B705; stroke: var(--navy); stroke-width: 1.4; stroke-linejoin: round; }
.b1-hand { fill: var(--fg); } .b1-fist { fill: none; stroke: var(--fg); stroke-width: 3; display: none; }
.b1-tense { stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; display: none; }
.b1-burn { fill: #2b1710; opacity: .85; display: none; }
/* efectos por zona */
.b1-fig[data-z="2"] .b1-fist, .b1-fig[data-z="3"] .b1-fist, .b1-fig[data-z="4"] .b1-fist, .b1-fig[data-z="5"] .b1-fist, .b1-fig[data-z="6"] .b1-fist { display: block; }
.b1-fig[data-z="2"] .b1-tense, .b1-fig[data-z="3"] .b1-tense, .b1-fig[data-z="4"] .b1-tense, .b1-fig[data-z="5"] .b1-tense, .b1-fig[data-z="6"] .b1-tense { display: block; }
.b1-fig[data-z="3"] .b1-lung, .b1-fig[data-z="4"] .b1-lung, .b1-fig[data-z="5"] .b1-lung, .b1-fig[data-z="6"] .b1-lung { stroke: var(--bad); opacity: 1; stroke-dasharray: none; stroke-width: 2.4; }
.b1-fig[data-z="3"] .b1-lungx, .b1-fig[data-z="4"] .b1-lungx { display: block; }
.b1-fig[data-z="4"] .b1-heart { stroke: var(--bad); opacity: 1; stroke-width: 2.4; }
.b1-fig[data-z="5"] .b1-heart { fill: var(--bad); stroke: var(--bad); opacity: 1; animation: b1fib .35s steps(2) infinite; transform-origin: 110px 146px; }
.b1-fig[data-z="6"] .b1-heart { fill: #2b1710; stroke: var(--fg); opacity: 1; }
.b1-fig[data-z="6"] .b1-burn { display: block; }
.b1-fig[data-z="6"] .b1-path { stroke-width: 5; }
.b1-fig[data-z="0"] .b1-path { stroke-width: 1.8; opacity: .7; }
.b1-fig[data-z="1"] .b1-path { stroke-width: 2.4; }
@keyframes b1fib { 50% { transform: scale(1.18); } }
.b1-ecgbox { margin-top: 8px; text-align: center; }
.b1-ecg { width: 100%; height: 44px; display: block; background: var(--surface); border-radius: 8px; border: 1px solid var(--line); }
.b1-ecg path { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; display: none; }
.b1-ecg[data-z="0"] .n, .b1-ecg[data-z="1"] .n, .b1-ecg[data-z="2"] .n, .b1-ecg[data-z="3"] .n { display: block; }
.b1-ecg[data-z="4"] .a { display: block; stroke: #D98300; }
.b1-ecg[data-z="5"] .f { display: block; stroke: var(--bad); }
.b1-ecg[data-z="6"] .z { display: block; stroke: var(--bad); }
.b1-heart-t { margin-top: 4px; }
/* panel */
.b1-read { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.b1-val { font: 700 clamp(34px, 7vw, 52px)/1 var(--display); letter-spacing: -.02em; min-width: 3.6ch; }
.b1-zn { font: 700 20px var(--display); background: var(--b1-body); color: var(--navy); border-radius: 99px; padding: 2px 14px; }
.b1-lab[data-z="6"] .b1-zn { color: #fff; }
.b1-sl { display: block; margin-top: 12px; }
.b1-range { width: 100%; margin: 8px 0 2px; height: 34px; accent-color: var(--accent); }
.b1-bands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.b1-chip { border: 2px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 12px; font: 600 14px var(--mono); }
.b1-chip:hover { border-color: var(--accent); }
.b1-chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.b1-txt { margin-top: 12px; }
.b1-txt p { margin: 0 0 .6em; }
.b1-iec { background: var(--surface2); border-left: 5px solid var(--c2); border-radius: 8px; padding: 8px 12px; }
.b1-gap:empty { display: none; }
.b1-prog { margin-top: 12px; min-height: 1.4em; }
.b1-q { margin-top: 6px; }
.b1-q h3 { font-size: 18px; margin: 14px 0 0; }
@media (max-width: 720px) { .b1-top { grid-template-columns: minmax(0, 1fr); } .b1-fig { max-height: 300px; } .b1-figbox { max-width: 340px; margin-inline: auto; width: 100%; } }

/* ---------- triángulo V-I-R ---------- */
.b1-tri { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px 28px; align-items: center; }
.b1-tri svg { width: 100%; height: auto; display: block; max-width: 260px; margin-inline: auto; }
.b1-tri .f { font: 700 22px var(--mono); margin: 0 0 6px; }
.b1-tri ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 640px) { .b1-tri { grid-template-columns: minmax(0, 1fr); } }

/* ---------- las cinco reglas ---------- */
.b1-rules { display: grid; gap: 10px; }
.b1-rule { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.b1-rule .n { width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: var(--navy); display: grid; place-items: center; font: 700 22px var(--display); }
.b1-rule h3 { font-size: 18px; margin-bottom: 2px; }
.b1-rule p { margin: 0; color: var(--muted); font-size: 15.5px; }
.b1-rule p b { color: var(--fg); }

.b1-mouth2 { fill: var(--fg); display: none; }
.b1-fig[data-z="3"] .b1-mouth2, .b1-fig[data-z="4"] .b1-mouth2, .b1-fig[data-z="5"] .b1-mouth2, .b1-fig[data-z="6"] .b1-mouth2 { display: block; }
.b1-fig[data-z="3"] .b1-mouth, .b1-fig[data-z="4"] .b1-mouth, .b1-fig[data-z="5"] .b1-mouth, .b1-fig[data-z="6"] .b1-mouth { display: none; }

/* Cinco tarjetas: 3 arriba y 2 abajo */
.b1-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.b1-five .cd { grid-column: span 2; }
.b1-five .cd:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1000px) { .b1-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b1-five .cd, .b1-five .cd:nth-child(n+4) { grid-column: auto; } .b1-five .cd:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .b1-five { grid-template-columns: minmax(0, 1fr); } .b1-five .cd:last-child { grid-column: auto; } }

/* Tablas que se apilan en pantallas angostas */
@media (max-width: 560px) {
  .b1-rt, .b1-rt tbody, .b1-rt tr, .b1-rt td { display: block; width: 100%; }
  .b1-rt thead { position: absolute; left: -9999px; }
  .b1-rt tr { padding: 10px 14px; border-top: 1.5px solid var(--line); }
  .b1-rt tr:first-child { border-top: 0; }
  .b1-rt td { border: 0; padding: 3px 0; }
  .b1-rt td::before { content: attr(data-l); display: block; font: 700 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
  .b1-rt td:first-child::before { display: none; }
  .b1-rt td:first-child { font-size: 16.5px; padding-bottom: 5px; }
}
@media (max-width: 560px) { .b1-c2 td::before { display: none; } }