/* ============================================================
 * theme.css — TEMA de la guía de fracciones (capa LIBRE).
 * Estilos ESPECÍFICOS del tema: leyenda de color, dibujos del
 * concepto (barra/pizza) y widgets interactivos (lab, equivalencia,
 * calculadora). Clases con prefijo `fr-` (propias de esta guía).
 *
 * El andamiaje (hero, escalón, check, práctica, faq…) vive en la
 * capa compartida `assets/guia-components.css` con clases `guia-*`
 * y NO se redefine aquí. Las variables `--guia-*` vienen de ahí.
 * ============================================================ */

/* ===== Leyenda de color (numerador/denominador) ===== */
.fr-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 600; }
.fr-legend .it { display: flex; gap: 8px; align-items: center; }
.fr-legend .it b { font-weight: 800; }
.fr-legend .sw { width: 17px; height: 17px; border-radius: 4px; flex: 0 0 auto; }
.fr-legend .sw.num { background: var(--guia-orange); border: 2px solid var(--guia-navy); }
.fr-legend .sw.den { background: #fff; border: 2px solid var(--guia-navy); }

/* ===== Dibujo estático de fracción (barra / pizza) ===== */
.fr-visual { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0; }
.fr-visual .vcap { font-size: 15px; font-weight: 700; color: var(--guia-muted); }
.fr-vbar { display: flex; width: 100%; max-width: 360px; height: 46px; border: 2px solid var(--guia-navy); border-radius: 9px; overflow: hidden; }
.fr-vb-cell { flex: 1 1 0; border-right: 2px solid var(--guia-navy); background: #fff; transition: background .15s; }
.fr-vb-cell:last-child { border-right: none; }
.fr-vb-cell.on { background: var(--guia-orange); }
.fr-vpie { width: 124px; height: 124px; display: block; }
.fr-vbars { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.fr-vbars .fr-vbar { max-width: 168px; }
.fr-two { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; }
.fr-twoitem { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fr-vbar--sm { width: 200px; max-width: 100%; }
.fr-twolabel { font-size: 15px; font-weight: 700; color: var(--guia-muted); }

/* ===== Laboratorio de fracción (interactivo) ===== */
.fr-lab { display: grid; gap: 14px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); }
.fr-lab-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-lab-flag { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--guia-orange); border: 2px solid var(--guia-ink); border-radius: 999px; padding: 3px 11px; }
.fr-lab-inst { font-size: 15px; font-weight: 700; color: var(--guia-deep); }
.fr-lab-stage { display: flex; justify-content: center; min-height: 64px; border-radius: 12px; }
.fr-lab-stage.tap-hint { animation: frTapHint 1.3s ease-in-out 2; }
@keyframes frTapHint { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 130, 31, 0); } 50% { box-shadow: 0 0 0 5px rgba(245, 130, 31, .28); } }
.fr-lab-stage .fr-pie { width: 158px; height: 158px; display: block; }
.fr-vbar.lab { height: 60px; max-width: 420px; }
.fr-vbar.lab button.fr-vb-cell { -webkit-appearance: none; appearance: none; padding: 0; margin: 0; font: inherit; }
.fr-vb-cell.click { cursor: pointer; }
.fr-vb-cell.click:not(.on) { background: #fff7ef; }
.fr-vb-cell.click:active { transform: scale(.96); }
.fr-vb-cell.click:hover { background: #ffe3c7; }
.fr-vb-cell.click.on:hover { background: var(--guia-deep); }
.fr-slice { cursor: pointer; transition: fill .12s, opacity .12s; }
.fr-slice:hover { opacity: .82; }
.fr-lab-read { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.fr-lab-read .big { font-size: 30px; }
.fr-lab-read .cap { font-size: 17px; font-weight: 600; }
.fr-lab-ctrl { display: grid; gap: 12px; justify-items: center; }
.fr-lab-cuts { display: grid; gap: 6px; justify-items: center; }
.fr-lab-cuts .cap2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--guia-deep); }
.fr-chips { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.fr-chip { font: inherit; font-weight: 800; font-size: 17px; min-width: 42px; padding: 8px 13px; border: 2px solid var(--guia-ink); border-radius: 10px; background: #fff; color: var(--guia-ink); cursor: pointer; transition: background .12s, transform .1s; }
.fr-chip:hover { background: #fff7ef; transform: translateY(-1px); }
.fr-chip.sel { background: var(--guia-orange); color: #fff; }
.fr-lab-shape { display: flex; gap: 8px; }
.fr-lab-shape .fr-chip { font-size: 15px; font-weight: 700; min-width: 0; }
.fr-lab-hint { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--guia-muted); }

/* ===== Manipulativo de equivalencia (tira de fracciones) ===== */
.fr-equiv { display: grid; gap: 14px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); }
.fr-equiv-bars { display: grid; gap: 10px; }
.fr-equiv-row { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fr-vbar--eq { width: 100%; max-width: 340px; }
.fr-equiv-ctrl { display: grid; gap: 12px; justify-items: center; }

/* ===== Calculadora de fracciones (sin teclado) ===== */
.fr-calc { display: grid; gap: 10px; }
.fr-calc-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.fr-calc-frac { display: grid; gap: 4px; justify-items: center; }
.fr-calc-frac .cap2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--guia-deep); }
.fr-calc-step { display: flex; align-items: center; gap: 6px; }
.fr-calc-val { min-width: 30px; text-align: center; font-size: 20px; font-weight: 800; }
.fr-calc-line { width: 58px; height: 3px; background: var(--guia-ink); border-radius: 2px; }
.fr-calc-ops { display: flex; flex-direction: column; gap: 6px; }
.fr-calc-ops .fr-chip { min-width: 42px; }
.fr-calc-eq { font-size: 26px; font-weight: 800; }
.fr-calc-result { min-width: 80px; text-align: center; }
.fr-calc-result .big { font-size: 26px; }
.fr-calc-result .cap { font-size: 15px; color: var(--guia-muted); }
@media (max-width: 560px) { .fr-calc-ops { flex-direction: row; flex-wrap: wrap; justify-content: center; } }

/* ===== Impresión: oculta los widgets interactivos del tema ===== */
@media print {
  .fr-lab, .fr-equiv { display: none !important; }
}