/* ============================================================
 * theme.css — TEMA de la guía de ENERGÍA CINÉTICA Y POTENCIAL (capa LIBRE).
 * SOLO estilos del tema (prefijo nrg-): leyenda de color, escenas SVG y
 * widgets por toque (colina ⭐, expv2, referencia, clasificador,
 * comparador, tiene-energia). 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.
 * Regla CSS+KaTeX: ningún selector descendiente `span` en cajas con math.
 * ============================================================ */

/* ===== Paleta del tema (eco de las variables de marca) ===== */
.nrg-visual, .nrg-wg, .nrg-legend {
  --nrg-kin: #C75D08;     /* cinética / incógnita */
  --nrg-pot: #283891;     /* potencial */
  --nrg-mec: #1C7A3A;     /* mecánica / total */
  --nrg-heat: #6b7280;    /* calor (fricción) */
  --nrg-ink: #181B22;
  --nrg-mut: #4b5563;
  --nrg-line: #e7e2da;
  --nrg-rose: #d6336c;
  --nrg-rose-deep: #a01243;
}

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

/* ===== Visuales estáticos ===== */
.nrg-visual { margin: 14px 0; text-align: center; }
.nrg-svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.nrg-cap { display: block; margin: 8px auto 0; max-width: 420px; font-size: 15px; color: var(--nrg-mut); line-height: 1.45; }

/* ===== Andamiaje común de widgets ===== */
.nrg-wg {
  margin: 16px 0; padding: 16px 14px;
  border: 2px solid var(--nrg-ink); border-radius: 16px; background: #fff;
  box-shadow: 4px 4px 0 var(--nrg-ink);
}
.nrg-wg-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 12px; }
.nrg-flag {
  font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; background: var(--nrg-kin); border-radius: 999px; padding: 3px 11px; flex: 0 0 auto;
}
.nrg-wg-inst { font-size: 15px; color: var(--nrg-mut); line-height: 1.4; }

.nrg-btn {
  font: inherit; font-weight: 800; font-size: 17px; min-height: 44px; padding: 10px 18px;
  border: 2px solid var(--nrg-ink); border-radius: 12px; background: #fff; color: var(--nrg-ink);
  cursor: pointer; box-shadow: 3px 3px 0 var(--nrg-ink); transition: transform .1s, box-shadow .1s;
}
.nrg-btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--nrg-ink); }
.nrg-btn:active:not(:disabled) { transform: none; box-shadow: 1px 1px 0 var(--nrg-ink); }
.nrg-btn.on { background: var(--nrg-pot); color: #fff; }
.nrg-btn.mini { font-size: 15px; padding: 8px 14px; box-shadow: none; }
.nrg-btn.mini:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--nrg-kin); }
.nrg-btn.mini.on { background: var(--nrg-pot); color: #fff; border-color: var(--nrg-pot); }

.nrg-vbtns, .nrg-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }

/* chips de clasificación */
.nrg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.nrg-chips.center { justify-content: center; }
.nrg-chip {
  font: inherit; font-weight: 700; font-size: 16px; min-height: 44px; padding: 10px 14px;
  border: 2px solid var(--nrg-line); border-radius: 10px; background: #fff; color: var(--nrg-ink);
  cursor: pointer; text-align: left; transition: transform .1s, border-color .1s;
}
.nrg-chip:hover:not(:disabled) { border-color: var(--nrg-kin); transform: translateY(-1px); }
.nrg-chip.on { border-color: var(--nrg-mec); background: #e6f5ec; color: var(--nrg-mec); }
.nrg-chip.off { border-color: var(--nrg-rose); background: #fdecf1; color: var(--nrg-rose-deep); }
.nrg-chip:disabled { cursor: default; }

/* feedback común */
.nrg-why { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--nrg-mec); display: none; min-height: 0; }
.nrg-why.show { display: block; }
.nrg-why.bad { color: var(--nrg-rose-deep); }
.nrg-read { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: var(--nrg-ink); }
.nrg-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.nrg-count { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nrg-mut); }

/* ===== Widget ① colina ===== */
.nrg-colina-row, .nrg-expv2-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.nrg-colina-stage, .nrg-expv2-stage, .nrg-ref-stage, .nrg-te-stage { flex: 1 1 230px; min-width: 0; }
.nrg-colina-stage svg, .nrg-expv2-stage svg, .nrg-ref-stage svg, .nrg-te-stage svg { width: 100%; height: auto; display: block; }

.nrg-bars { flex: 0 0 auto; display: flex; align-items: flex-end; }
.nrg-bar-set { display: flex; flex-direction: column; gap: 6px; }
.nrg-em-line {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--nrg-mec); border-top: 3px solid var(--nrg-mec); padding-top: 3px; text-align: center;
}
.nrg-bar-pair { display: flex; gap: 12px; justify-content: center; }
.nrg-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nrg-bar-track {
  width: 34px; height: 110px; border: 2px solid var(--nrg-ink); border-radius: 8px;
  background: #faf8f4; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.nrg-bar-fill { width: 100%; transition: height .18s ease-out; border-radius: 5px 5px 0 0; }
.nrg-bar-fill.kin { background: var(--nrg-kin); }
.nrg-bar-fill.pot { background: var(--nrg-pot); }
.nrg-bar-fill.heat { background: var(--nrg-heat); }
.nrg-bar-lbl { font-size: 13px; font-weight: 800; color: var(--nrg-ink); text-align: center; line-height: 1.25; }

.nrg-slider-lbl { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nrg-mut); }
.nrg-slider {
  display: block; width: 100%; margin: 8px 0 4px; accent-color: var(--nrg-kin);
  height: 44px; cursor: pointer; touch-action: pan-y;
}

.nrg-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nrg-ctrl-lbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nrg-heat); }
.nrg-toggle {
  font: inherit; font-weight: 800; font-size: 15px; min-height: 44px; padding: 8px 18px;
  border: 2px solid var(--nrg-ink); border-radius: 999px; background: #fff; color: var(--nrg-ink); cursor: pointer;
}
.nrg-toggle.on { background: var(--nrg-heat); color: #fff; border-color: var(--nrg-heat); }

/* ===== Widget ④/⑥: ítem por clasificar ===== */
.nrg-clas-item { margin: 6px 0 2px; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--nrg-ink); }

/* ===== Widget ⑤ comparador ===== */
.nrg-comp-card {
  margin: 4px 0 8px; padding: 14px; border: 2px dashed var(--nrg-pot); border-radius: 12px;
  background: #f6f7fc; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--nrg-ink); text-align: center;
}
.nrg-comp-card.done { border-style: solid; border-color: var(--nrg-mec); background: #e6f5ec; }
.nrg-comp-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.nrg-comp-table th, .nrg-comp-table td {
  border: 2px solid var(--nrg-line); padding: 8px 10px; font-size: 15px; line-height: 1.4;
  text-align: left; vertical-align: top; color: var(--nrg-ink);
}
.nrg-comp-table thead th { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.nrg-comp-table thead th.kin { color: var(--nrg-kin); }
.nrg-comp-table thead th.pot { color: var(--nrg-pot); }
.nrg-comp-table tbody th { font-weight: 800; background: #faf8f4; width: 32%; }
.nrg-comp-table td { color: var(--nrg-mut); }
.nrg-comp-table td.filled { font-weight: 700; }
.nrg-comp-table td.filled.kin { color: var(--nrg-kin); background: #fdf3ea; }
.nrg-comp-table td.filled.pot { color: var(--nrg-pot); background: #f0f2fa; }

/* ===== 360px: sin overflow horizontal ===== */
@media (max-width: 540px) {
  .nrg-colina-row, .nrg-expv2-row { flex-direction: column; }
  .nrg-bars { align-self: center; }
  .nrg-bar-track { height: 90px; }
}
@media (max-width: 380px) {
  .nrg-chips .nrg-chip { flex: 1 1 100%; text-align: center; }
  .nrg-comp-table th, .nrg-comp-table td { padding: 6px 4px; font-size: 15px; overflow-wrap: break-word; }
  .nrg-comp-table tbody th { width: 27%; }
}

/* ===== Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  .nrg-btn, .nrg-chip { transition: none !important; }
  .nrg-bar-fill { transition: none !important; }
}

/* ===== Impresión: oculta lo interactivo (apoyo, no contenido SEO) ===== */
@media print {
  .nrg-wg { display: none !important; }
}