/* ============================================================
 * theme.css — TEMA de la guía de POTENCIAS Y RAÍCES (capa LIBRE).
 * SOLO estilos del tema (prefijo pr-): leyenda de color, visuales del
 * concepto (anatomía, cuadrícula, escalones, inversa, radical, escalera)
 * y widgets por toque (constructor, semáforo). 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 semántica del tema ===== */
.pr-visual, .pr-wg, .pr-legend {
  --pr-x: #C75D08;       /* exponente / lo que manda */
  --pr-navy: #283891;    /* base / dato */
  --pr-green: #1C7A3A;   /* resultado */
  --pr-ink: #181B22;
  --pr-mut: #4b5563;
  --pr-line: #e7e2da;
  --pr-cream: #FFF3E7;
  --pr-bad: #a01243;
  --pr-badbg: #fdecf1;
  --pr-okbg: #e6f5ec;
}
.pr-navy { color: #283891; }
.pr-orange { color: #C75D08; }
.pr-green { color: #1C7A3A; }

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

/* ===== Base de visuales (panel plano, NO botón: sin sombra sticker) ===== */
.pr-visual {
  margin: 14px 0; padding: 14px 12px;
  border: 2px solid var(--pr-line); border-radius: 14px; background: #fff;
}

/* ===== Visual: anatomía de la potencia ===== */
.pr-anat { text-align: center; }
.pr-anat-stage { line-height: 1; margin: 4px 0 10px; }
.pr-anat-base { font-size: 56px; font-weight: 800; color: var(--pr-navy); }
.pr-anat-exp { font-size: 30px; font-weight: 800; color: var(--pr-x); }
.pr-anat-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pr-tag {
  font-size: 15px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  border: 2px solid var(--pr-line); background: #fcfbf9; color: var(--pr-mut);
}
.pr-tag.navy { border-color: var(--pr-navy); color: var(--pr-navy); }
.pr-tag.orange { border-color: var(--pr-x); color: var(--pr-x); }
.pr-tag.green { border-color: var(--pr-green); color: var(--pr-green); }

/* ===== Visual: cuadrícula n×n ===== */
.pr-grid-wrap { text-align: center; }
.pr-grid {
  display: grid; gap: 4px; width: min(180px, 60vw); margin: 0 auto 10px;
}
.pr-cell {
  aspect-ratio: 1; border-radius: 4px;
  background: var(--pr-navy); opacity: .18;
  border: 1.5px solid var(--pr-navy);
}
.pr-grid-cap { margin: 0; font-size: 17px; color: var(--pr-ink); }
.pr-grid-cap sup { font-weight: 800; }

/* ===== Visual: escalones de potencias ===== */
.pr-esc { max-width: 340px; margin-left: auto; margin-right: auto; }
.pr-esc-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pr-mut); text-align: center;
}
.pr-esc-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px; border-radius: 8px; position: relative;
}
.pr-esc-row.zero { background: var(--pr-cream); outline: 2px solid var(--pr-x); }
.pr-esc-row.neg { background: #f4f6fc; }
.pr-esc-pow { min-width: 56px; font-size: 20px; }
.pr-esc-pow b { font-weight: 800; }
.pr-esc-pow sup { font-weight: 800; font-size: 14px; }
.pr-esc-eq { color: var(--pr-mut); font-weight: 700; }
.pr-esc-val { font-size: 20px; font-weight: 800; color: var(--pr-green); }
.pr-esc-div {
  margin-left: auto; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--pr-x);
}

/* ===== Visual: inversa (potencia ↔ raíz) ===== */
.pr-inv { text-align: center; }
.pr-inv-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 6px 0;
}
.pr-inv-num {
  font-size: 26px; font-weight: 800; min-width: 52px; padding: 4px 10px;
  border: 2px solid var(--pr-ink); border-radius: 10px; background: #fff;
}
.pr-inv-num.navy { color: var(--pr-navy); }
.pr-inv-num.green { color: var(--pr-green); }
.pr-inv-arrow { font-size: 15px; font-weight: 700; color: var(--pr-mut); }
.pr-inv-arrow.orange { color: var(--pr-x); }
.pr-inv-cap { margin: 8px 0 0; font-size: 15px; color: var(--pr-mut); }

/* ===== Visual: partes del radical ===== */
.pr-rad { text-align: center; }
.pr-rad-stage { line-height: 1; margin: 2px 0 12px; }
.pr-rad-idx { font-size: 22px; font-weight: 800; color: var(--pr-x); margin-right: -4px; }
.pr-rad-sign { font-size: 52px; font-weight: 700; color: var(--pr-ink); }
.pr-rad-rad { font-size: 40px; font-weight: 800; color: var(--pr-navy); }
.pr-rad-eq { font-size: 32px; color: var(--pr-mut); margin: 0 8px; }
.pr-rad-res { font-size: 40px; font-weight: 800; color: var(--pr-green); }

/* ===== Visual: escalera de la jerarquía ===== */
.pr-lad-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pr-mut); text-align: center;
}
.pr-lad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-lad-rung {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 2px solid var(--pr-line); border-radius: 12px;
  background: #fcfbf9;
}
.pr-lad-rung.lvl1 { border-color: var(--pr-ink); background: #fff; }
.pr-lad-rung.lvl2 { border-color: var(--pr-x); background: var(--pr-cream); }
.pr-lad-rung.lvl3 { border-color: var(--pr-navy); background: #f4f6fc; }
.pr-lad-n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #fff; background: var(--pr-ink);
}
.pr-lad-rung.lvl2 .pr-lad-n { background: var(--pr-x); }
.pr-lad-rung.lvl3 .pr-lad-n { background: var(--pr-navy); }
.pr-lad-rung.lvl4 .pr-lad-n { background: var(--pr-mut); }
.pr-lad-txt { display: flex; flex-direction: column; gap: 2px; }
.pr-lad-txt b { font-size: 17px; color: var(--pr-ink); }
.pr-lad-txt small { font-size: 15px; color: var(--pr-mut); }

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

.pr-btn {
  font: inherit; font-weight: 800; font-size: 17px; min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--pr-ink); border-radius: 12px; background: var(--pr-navy); color: #fff;
  cursor: pointer; box-shadow: 3px 3px 0 var(--pr-ink); transition: transform .1s, box-shadow .1s;
}
.pr-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pr-ink); }
.pr-btn:active { transform: none; box-shadow: 1px 1px 0 var(--pr-ink); }
.pr-btn.small { font-size: 15px; min-height: 44px; padding: 8px 16px; }
.pr-btn.ghost { background: #fff; color: var(--pr-ink); box-shadow: none; }
.pr-btn.ghost:hover { border-color: var(--pr-x); transform: none; box-shadow: none; }

/* opción genérica por toque */
.pr-opt {
  font: inherit; font-weight: 700; font-size: 17px; min-height: 44px; padding: 10px 14px;
  border: 2px solid var(--pr-line); border-radius: 10px; background: #fff; color: var(--pr-ink);
  cursor: pointer; text-align: center; transition: transform .1s, border-color .1s;
}
.pr-opt:hover { border-color: var(--pr-x); transform: translateY(-1px); }
.pr-opt.right { border-color: var(--pr-green); background: var(--pr-okbg); color: var(--pr-green); }
.pr-opt.wrong { border-color: #d6336c; background: var(--pr-badbg); color: var(--pr-bad); }
.pr-opt:disabled { cursor: default; opacity: 1; }

/* ===== Widget: constructor de potencias ===== */
.pr-con-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pr-con-lbl {
  flex: 0 0 auto; min-width: 92px; font-size: 13px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
}
.pr-con-lbl.navy { color: var(--pr-navy); }
.pr-con-lbl.orange { color: var(--pr-x); }
.pr-con-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chip {
  font: inherit; font-weight: 800; font-size: 17px; min-width: 44px; min-height: 44px;
  padding: 6px 10px; border-radius: 10px; cursor: pointer; background: #fff;
  border: 2px solid var(--pr-line); color: var(--pr-ink);
  transition: transform .1s, border-color .1s;
}
.pr-chip:hover { transform: translateY(-1px); }
.pr-chip.base:hover { border-color: var(--pr-navy); }
.pr-chip.exp:hover { border-color: var(--pr-x); }
.pr-chip.base.on { border-color: var(--pr-navy); background: #f4f6fc; color: var(--pr-navy); }
.pr-chip.exp.on { border-color: var(--pr-x); background: var(--pr-cream); color: var(--pr-x); }
.pr-con-stage {
  border: 2px solid var(--pr-line); border-radius: 12px; background: #fcfbf9;
  padding: 14px 12px; text-align: center;
}
.pr-con-pow { margin: 0 0 8px; line-height: 1; }
.pr-con-b { font-size: 46px; font-weight: 800; color: var(--pr-navy); }
.pr-con-e { font-size: 26px; font-weight: 800; color: var(--pr-x); }
.pr-con-expand {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin: 6px 0 8px; min-height: 44px;
}
.pr-con-f {
  font-size: 20px; font-weight: 800; color: var(--pr-navy);
  border: 2px solid var(--pr-navy); border-radius: 10px; background: #fff;
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px;
}
.pr-con-x { font-size: 18px; font-weight: 800; color: var(--pr-mut); }
.pr-con-empty { font-size: 17px; font-weight: 700; color: var(--pr-mut); font-style: italic; }
.pr-con-result { margin: 0 0 6px; font-size: 22px; color: var(--pr-ink); }
.pr-con-val { font-size: 30px; font-weight: 800; color: var(--pr-green); }
.pr-con-note { margin: 0; font-size: 15px; color: var(--pr-mut); line-height: 1.45; }
.pr-con-note b { color: var(--pr-ink); }

/* ===== Widget: semáforo de jerarquía ===== */
.pr-sem-prog {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pr-mut);
}
.pr-sem-chain { display: grid; gap: 6px; margin-bottom: 12px; }
.pr-sem-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border: 2px solid var(--pr-line); border-radius: 10px; background: #fcfbf9;
}
.pr-sem-line.now { border-color: var(--pr-navy); background: #f4f6fc; }
.pr-sem-arr { font-weight: 800; color: var(--pr-mut); }
.pr-sem-expr { font-size: 20px; font-weight: 800; color: var(--pr-ink); }
.pr-sem-line.now .pr-sem-expr { color: var(--pr-navy); }
.pr-sem-hecho { font-size: 15px; font-weight: 700; color: var(--pr-green); }
.pr-sem-q { margin: 0 0 8px; font-size: 17px; color: var(--pr-ink); }
.pr-sem-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-sem-opts .pr-opt { flex: 1 1 120px; }
.pr-sem-fb { margin: 10px 0 0; font-size: 15px; line-height: 1.5; display: none; }
.pr-sem-fb.show { display: block; }
.pr-sem-fb.ok { color: var(--pr-green); font-weight: 700; }
.pr-sem-fb.miss { color: var(--pr-bad); }
.pr-sem-final { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.pr-sem-res { font-size: 20px; color: var(--pr-ink); }
.pr-sem-res b { color: var(--pr-green); font-size: 24px; }
.pr-sem-moral { font-size: 15px; color: var(--pr-mut); font-style: italic; }
.pr-sem-done { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--pr-ink); }

/* ===== Widget: racionalizador paso a paso ===== */
.pr-rac-prog {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pr-mut);
}
.pr-rac-start {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px;
  padding: 10px 14px; border: 2px solid var(--pr-navy); border-radius: 12px; background: #f4f6fc;
}
.pr-rac-lbl {
  font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.pr-rac-lbl.navy { color: var(--pr-navy); }
.pr-rac-frac { font-size: 22px; color: var(--pr-ink); }
.pr-rac-chain { display: grid; gap: 6px; margin-bottom: 12px; }
.pr-rac-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 8px 12px; border: 2px solid var(--pr-line); border-radius: 10px; background: #fcfbf9;
}
.pr-rac-line.now { border-color: var(--pr-navy); background: #f4f6fc; }
.pr-rac-tag {
  font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--pr-mut); flex: 1 1 100%;
}
.pr-rac-tag.orange { color: var(--pr-x); }
.pr-rac-tag.green { color: var(--pr-green); }
.pr-rac-math { font-size: 20px; color: var(--pr-ink); }
.pr-rac-q { margin: 0 0 8px; font-size: 17px; line-height: 1.45; color: var(--pr-ink); }
.pr-rac-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-rac-opts .pr-opt { flex: 1 1 140px; }
.pr-rac-optm { font-size: 18px; }
.pr-rac-fb { margin: 10px 0 0; font-size: 15px; line-height: 1.5; display: none; }
.pr-rac-fb.show { display: block; }
.pr-rac-fb.ok { color: var(--pr-green); font-weight: 700; }
.pr-rac-fb.miss { color: var(--pr-bad); }
.pr-rac-final { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.pr-rac-res { font-size: 20px; color: var(--pr-ink); }
.pr-rac-res b { color: var(--pr-green); }
.pr-rac-moral { font-size: 15px; color: var(--pr-mut); font-style: italic; flex: 1 1 100%; }
.pr-rac-done { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--pr-ink); }

/* ===== 360px: sin overflow horizontal ===== */
@media (max-width: 380px) {
  .pr-anat-base { font-size: 44px; }
  .pr-con-b { font-size: 38px; }
  .pr-con-lbl { min-width: 100%; }
  .pr-sem-opts .pr-opt { flex-basis: 100%; }
  .pr-esc-div { font-size: 13px; }
  .pr-inv-num { font-size: 22px; }
  .pr-rad-sign { font-size: 44px; }
  .pr-rad-rad, .pr-rad-res { font-size: 32px; }
  .pr-rac-opts .pr-opt { flex-basis: 100%; }
  .pr-rac-frac, .pr-rac-math { font-size: 18px; }
}

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

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