/* ============================================================
 * theme.css — TEMA de la guía LEY DE OHM (capa LIBRE).
 * SOLO estilos del tema (prefijo ohm-): leyenda, visuales de magnitud
 * y los 5 widgets (etiquetas, circuito vivo ⭐, triángulo, comparador,
 * multímetro). NO redefine clases `guia-*` (capa bloqueada).
 * Pisos de letra: lectura ≥17px · apoyo ≥15px · etiquetas MAYÚSCULAS ≥13px.
 * Tap targets ≥44px. Sin overflow horizontal a 360px. Light-mode fijo.
 * ============================================================ */

/* ===== Paleta del tema (eco de content.js/theme.js) ===== */
.ohm-legend, .ohm-visual, .ohm-wg {
  --ohm-v: var(--guia-deep);     /* voltaje  #C75D08 */
  --ohm-i: #1E7A3D;              /* corriente (mismo verde AA que el KaTeX del contenido) */
  --ohm-r: var(--guia-navy);     /* resistencia #283891 */
  --ohm-ink: var(--guia-ink);
  --ohm-mut: var(--guia-muted);
  --ohm-line: var(--guia-line);
  --ohm-cream: var(--guia-cream);
}

/* ===== Leyenda de color ===== */
.ohm-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin: 4px 0 18px; padding: 12px 14px;
  border: 2px solid var(--ohm-ink); border-radius: 14px; background: #fff;
}
.ohm-legend .it { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ohm-mut); }
.ohm-legend .it b { font-size: 17px; }
.ohm-legend .sw { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ohm-ink); flex: 0 0 auto; }
.ohm-legend .sw.v { background: var(--ohm-v); }
.ohm-legend .it:nth-child(1) b { color: var(--ohm-v); }
.ohm-legend .sw.i { background: var(--ohm-i); }
.ohm-legend .it:nth-child(2) b { color: var(--ohm-i); }
.ohm-legend .sw.r { background: var(--ohm-r); }
.ohm-legend .it:nth-child(3) b { color: var(--ohm-r); }

/* ===== Visual estático de magnitud ===== */
.ohm-visual { margin: 14px 0; border: 2px solid var(--ohm-line); border-radius: 14px; background: #fff; padding: 10px 10px 8px; }
.ohm-visual svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.ohm-visual .vcap { display: block; text-align: center; font-size: 15px; color: var(--ohm-mut); padding: 6px 4px 4px; }
.ohm-visual .vcap, .ohm-cmp .read { line-height: 1.45; }

/* puntitos de corriente con vida (decorativo; sin JS) */
@keyframes ohm-drift { from { transform: translateX(0); } to { transform: translateX(26px); } }
.ohm-flowdot { animation: ohm-drift 1.6s linear infinite; }
.ohm-flowdot.d1 { animation-delay: -.3s; } .ohm-flowdot.d2 { animation-delay: -.6s; }
.ohm-flowdot.d3 { animation-delay: -.9s; } .ohm-flowdot.d4 { animation-delay: -1.2s; }
@media (prefers-reduced-motion: reduce) { .ohm-flowdot { animation: none; } }

/* ===== Marco común de widget ===== */
.ohm-wg { margin: 16px 0; border: 2.5px solid var(--ohm-ink); border-radius: 16px; background: #fff; padding: 14px 12px; }
.ohm-wg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.ohm-flag {
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--ohm-cream); border: 2px solid var(--ohm-ink); border-radius: 999px; padding: 4px 10px;
}
.ohm-inst { font-size: 15px; color: var(--ohm-mut); line-height: 1.45; flex: 1 1 220px; }
.ohm-wg svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.ohm-tap { cursor: pointer; }
.ohm-tap.on > rect:first-of-type, .ohm-etq .ohm-tap.on rect { stroke: var(--guia-orange); stroke-width: 3.5px; }

/* chips/botones del tema (tap ≥44px) */
.ohm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ohm-chip {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ohm-ink);
  background: #fff; border: 2px solid var(--ohm-ink); border-radius: 12px;
  padding: 10px 12px; min-height: 44px; cursor: pointer;
}
.ohm-chip.mini { font-size: 15px; padding: 8px 12px; }
.ohm-chip:hover { background: var(--ohm-cream); }
.ohm-chip.on { background: var(--ohm-cream); box-shadow: 3px 3px 0 var(--ohm-ink); }
.ohm-chip.done { background: #E8F5EC; border-color: var(--ohm-i); color: var(--ohm-i); }
.ohm-chip.done::after { content: " ✓"; }
.ohm-chip.ghost { border-color: var(--ohm-line); color: var(--ohm-mut); }
.ohm-chip.warn { border-color: var(--ohm-v); color: var(--ohm-v); }
.ohm-chip.right { background: #E8F5EC; border-color: var(--ohm-i); color: var(--ohm-i); }
.ohm-chip.wrong { background: #FBEAEA; border-color: #B3261E; color: #B3261E; }

/* ===== ① etiquetas ===== */
.ohm-etq svg { max-width: 380px; }
.ohm-etq-info { margin-top: 10px; border: 2px solid var(--ohm-line); border-radius: 12px; background: #fcfbf9; padding: 10px 12px; }
.ohm-etq-info .lbl { display: block; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ohm-mut); margin-bottom: 4px; }
.ohm-etq-info p { margin: 0; font-size: 17px; line-height: 1.5; }

/* ===== ② circuito vivo ⭐ ===== */
.ohm-cv-modes { display: flex; gap: 8px; margin-bottom: 10px; }
.ohm-mode {
  font: inherit; font-size: 15px; font-weight: 800; color: var(--ohm-mut);
  background: #fff; border: 2px solid var(--ohm-line); border-radius: 999px;
  padding: 9px 16px; min-height: 44px; cursor: pointer;
}
.ohm-mode.on { color: var(--ohm-ink); border-color: var(--ohm-ink); background: var(--ohm-cream); box-shadow: 3px 3px 0 var(--ohm-ink); }
.ohm-cv-stage svg { max-width: 400px; }
.ohm-cv-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 8px 0 4px; }
.ohm-cv-i { font-size: 22px; font-weight: 800; color: var(--ohm-i); }
.ohm-cv-i b { font-size: 30px; font-variant-numeric: tabular-nums; }
.ohm-cv-word { font-size: 15px; color: var(--ohm-mut); }
.ohm-cv-warn { margin: 6px 0; font-size: 15px; font-weight: 700; color: var(--ohm-v); background: #FDF1E5; border: 2px solid var(--ohm-v); border-radius: 10px; padding: 8px 10px; line-height: 1.4; }

.ohm-sliders { display: grid; gap: 10px; margin-top: 8px; }
.ohm-slider { display: block; border: 2px solid var(--ohm-line); border-radius: 12px; padding: 10px 12px; background: #fcfbf9; }
.ohm-slider .t { display: block; font-size: 15px; font-weight: 700; color: var(--ohm-mut); margin-bottom: 6px; }
.ohm-slider .t b { font-size: 19px; font-variant-numeric: tabular-nums; }
.ohm-slider.v .t b { color: var(--ohm-v); }
.ohm-slider.r .t b { color: var(--ohm-r); }
.ohm-slider.locked { opacity: .55; }
.ohm-slider.locked .t::after { content: " 🔒 congelado por el reto"; font-weight: 600; font-size: 13px; }

.ohm-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
.ohm-slider input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: var(--ohm-line); border: 1px solid #d8d2c8; }
.ohm-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px;
  border-radius: 50%; background: #fff; border: 3px solid var(--ohm-ink); box-shadow: 2px 2px 0 var(--ohm-ink); cursor: pointer;
}
.ohm-slider.v input[type="range"]::-webkit-slider-thumb { border-color: var(--ohm-v); box-shadow: 2px 2px 0 var(--ohm-v); }
.ohm-slider.r input[type="range"]::-webkit-slider-thumb { border-color: var(--ohm-r); box-shadow: 2px 2px 0 var(--ohm-r); }
.ohm-slider input[type="range"]::-moz-range-track { height: 10px; border-radius: 6px; background: var(--ohm-line); border: 1px solid #d8d2c8; }
.ohm-slider input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--ohm-ink); cursor: pointer; }
.ohm-slider.v input[type="range"]::-moz-range-thumb { border-color: var(--ohm-v); }
.ohm-slider.r input[type="range"]::-moz-range-thumb { border-color: var(--ohm-r); }

.ohm-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ohm-presets[hidden] { display: none; }
.ohm-presets .plbl { font-size: 15px; font-weight: 700; color: var(--ohm-mut); }

.ohm-retos { margin-top: 14px; border-top: 2px dashed var(--ohm-line); padding-top: 12px; }
.ohm-retos .rlbl { display: block; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ohm-mut); margin-bottom: 8px; }
.ohm-reto-msg { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ohm-mut); }
.ohm-reto-msg.ok { color: var(--ohm-i); font-weight: 700; }

/* ===== ③ triángulo de Ohm ===== */
.ohm-tri svg { max-width: 300px; }
.ohm-tri.compact svg { max-width: 220px; }
.ohm-finger { pointer-events: none; }
.ohm-tri-out { margin-top: 10px; border: 2px solid var(--ohm-line); border-radius: 12px; background: #fcfbf9; padding: 10px 12px; min-height: 56px; }
.ohm-tri-out .hintline { margin: 0; font-size: 15px; color: var(--ohm-mut); }
.ohm-tri-out .fx { text-align: center; font-size: 20px; padding: 4px 0; }
.ohm-tri-out .rule { margin: 6px 0 0; font-size: 17px; line-height: 1.5; }
.ohm-tri-out .ej { margin: 4px 0 0; font-size: 15px; color: var(--ohm-mut); line-height: 1.5; }

/* ===== ④ comparador serie/paralelo (apila en columna ≤540px) ===== */
.ohm-cmp-grid { display: flex; gap: 12px; }
.ohm-cmp-side { flex: 1 1 0; min-width: 0; border: 2px solid var(--ohm-line); border-radius: 12px; padding: 10px; background: #fcfbf9; }
.ohm-cmp-side .stage svg { max-width: 320px; }
.ohm-cmp-side .ctl { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ohm-cmp-side .read { margin: 0; font-size: 15px; color: var(--ohm-mut); }
.ohm-cmp-side .read b { color: var(--ohm-ink); }
@media (max-width: 540px) {
  .ohm-cmp-grid { flex-direction: column; }
}

/* ===== ⑤ multímetro de diagnóstico ===== */
.ohm-mm-body { margin-top: 12px; }
.ohm-mm-exp { margin: 0 0 10px; font-size: 17px; line-height: 1.5; }
.ohm-mm-screen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ohm-mm-screen .lcd {
  flex: 1 1 88px; min-width: 0; border: 2.5px solid var(--ohm-ink); border-radius: 10px;
  background: #1d2330; color: #D9F2E2; padding: 8px 10px; text-align: center;
}
.ohm-mm-screen .lcd i { display: block; font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8fb9a0; }
.ohm-mm-screen .lcd b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.ohm-mm-screen .lcd.calc { background: #fff; color: var(--ohm-r); border-style: dashed; }
.ohm-mm-screen .lcd.calc i { color: var(--ohm-mut); }
.ohm-mm-dx { margin-top: 10px; }
.ohm-mm-dx .lbl { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ohm-ink); }
.ohm-mm-ver { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--ohm-i); font-weight: 600; }
.ohm-mm-ver.miss { color: #B3261E; }

/* ===== Impresión: los interactivos no aportan en papel ===== */
@media print {
  .ohm-wg { display: none !important; }
}