/* ============================================================
 * theme.css — TEMA de la guía de FRACCIONES ALGEBRAICAS (capa LIBRE).
 * Estilos de los widgets propios (prefijo fa-): tachon, simplificador y
 * paso, más la leyenda y el visual de anatomía. El andamiaje vive en
 * assets/guia-components.css; aquí solo variables --guia-* (sin hex de
 * marca hardcodeado).
 * Regla CSS+KaTeX: nada de estilos de píldora sobre `span` descendiente.
 * ============================================================ */

/* ===== Reaseguro del hero ===== */
.guia-reassure { font-size: 15px; line-height: 1.5; color: var(--guia-muted); margin: 2px 0 0; }

/* ===== Onboarding de prerrequisitos (hero) ===== */
.fa-prereq { margin: 18px 0 0; background: var(--guia-cream); border: 2px solid var(--guia-navy); border-radius: 14px; padding: 14px 16px; display: grid; gap: 9px; }
.fa-prereq-tag { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-navy); margin: 0; }
.fa-prereq-lead { font-size: 17px; line-height: 1.5; color: var(--guia-ink); margin: 0; }
.fa-prereq-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fa-prereq-links a { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 10px; padding: 10px 12px; font-size: 17px; line-height: 1.45; color: var(--guia-ink); box-shadow: 2px 2px 0 var(--guia-line); transition: transform .1s, box-shadow .1s, border-color .1s; }
.fa-prereq-links a:hover, .fa-prereq-links a:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-navy); border-color: var(--guia-navy); }
.fa-prereq-links a strong { color: var(--guia-deep); }
.fa-prereq-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--guia-navy); color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; }
.fa-prereq-foot { font-size: 15px; line-height: 1.45; color: var(--guia-muted); margin: 0; }

/* ===== Recordatorio inline de prerrequisito (intro de módulo) ===== */
.fa-inline-prereq { display: inline-block; margin-top: 6px; font-size: 16px; }
.fa-inline-prereq a { font-weight: 700; color: var(--guia-deep); }

/* ===== Visual factor vs término (M2) ===== */
.fa-ft { display: grid; gap: 10px; }
.fa-ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fa-ft-col { display: grid; gap: 8px; justify-items: center; font: inherit; text-align: center; background: #fff; border: 2px solid var(--guia-line); border-radius: 12px; padding: 12px 10px; cursor: pointer; box-shadow: 2px 2px 0 var(--guia-line); transition: transform .1s, box-shadow .1s, border-color .1s; }
.fa-ft-col:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.fa-ft-col.active { border-color: var(--guia-navy); box-shadow: 3px 3px 0 var(--guia-navy); }
.fa-ft-col svg { width: 100%; height: auto; max-width: 200px; }
.fa-ft-cap { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--guia-deep); }
.fa-ft-box { fill: #fff3e8; stroke: var(--guia-deep); stroke-width: 2.5; }
.fa-ft-piece { fill: #eef0fb; stroke: var(--guia-navy); stroke-width: 2.5; }
.fa-ft-t { fill: var(--guia-ink); font-size: 26px; font-weight: 800; font-family: inherit; }
.fa-ft-mul { fill: var(--guia-deep); font-size: 11px; font-weight: 700; font-family: inherit; }
.fa-ft-plus { fill: var(--guia-muted); font-size: 22px; font-weight: 800; font-family: inherit; }
.fa-ft-verdict { font-size: 15px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.fa-ft-verdict.good { color: var(--guia-green-deep); background: #e6f5ec; }
.fa-ft-verdict.bad { color: #a01243; background: #fdecf2; }
.fa-ft-say { font-size: 16px; line-height: 1.5; color: var(--guia-ink); margin: 0; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 10px; padding: 10px 12px; }

/* ===== Visual pedazos del mismo tamaño (M5) ===== */
.fa-pz { display: grid; gap: 10px; }
.fa-pz svg { width: 100%; height: auto; max-width: 340px; justify-self: center; }
.fa-pz-p { fill: var(--guia-orange); stroke: var(--guia-deep); stroke-width: 2; }
.fa-pz-p.sum { opacity: 0; transition: opacity .35s ease; }
.fa-pz.joined .fa-pz-p.sum { opacity: 1; }
.fa-pz-op { fill: var(--guia-ink); font-size: 22px; font-weight: 800; font-family: inherit; }
.fa-pz-lbl { fill: var(--guia-deep); font-size: 12px; font-weight: 700; font-family: inherit; }
.fa-pz-lbl.sum { opacity: 0; transition: opacity .35s ease; }
.fa-pz-lbl.sum.show { opacity: 1; }
.fa-pz-size { fill: var(--guia-muted); font-size: 11px; font-weight: 700; font-family: inherit; }
.fa-pz-foot { display: grid; gap: 8px; }
.fa-pz-btn { justify-self: start; font: inherit; font-weight: 700; font-size: 15px; padding: 8px 16px; border: 2px solid var(--guia-ink); border-radius: 999px; background: var(--guia-orange); color: #fff; cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s; }
.fa-pz-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.fa-pz-btn:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.fa-pz-btn.done { background: #fff; color: var(--guia-ink); }
.fa-pz-say { font-size: 16px; line-height: 1.5; color: var(--guia-ink); margin: 0; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 10px; padding: 10px 12px; }

/* ===== Leyenda de color ===== */
.fa-legend { display: flex; gap: 16px 18px; 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; }
.fa-legend .it { display: flex; gap: 8px; align-items: center; }
.fa-legend .it > b { font-weight: 800; }
.fa-legend .sw { width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto; }
.fa-legend .sw.obj { background: var(--guia-orange); border: 2px solid var(--guia-deep); }
.fa-legend .sw.op { background: var(--guia-navy); border: 2px solid var(--guia-navy); }
.fa-legend .sw.cx { background: repeating-linear-gradient(135deg, #fff, #fff 3px, var(--guia-muted) 3px, var(--guia-muted) 4px); border: 2px solid var(--guia-muted); }

/* ===== Visual: anatomía de la fracción ===== */
.fa-visual { background: #fff; border: 1.5px solid var(--guia-line); border-radius: 12px; padding: 14px; }
.fa-anat { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fa-anat-fx { font-size: 22px; padding: 4px 10px; }
.fa-anat-tags { display: grid; gap: 8px; }
.fa-anat-tag { font-size: 15px; line-height: 1.45; }
.fa-anat-tag > b { font-weight: 800; }
.fa-anat-tag.up > b { color: var(--guia-navy); }
.fa-anat-tag.dn > b { color: var(--guia-deep); }

/* ===== Tarjeta base de widget ===== */
.fa-wg { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); margin: 2px 0; }
.fa-wg-top { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.fa-flag { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--guia-navy); border-radius: 999px; padding: 4px 12px; flex: 0 0 auto; }
.fa-wg-inst { font-size: 15px; line-height: 1.5; color: var(--guia-deep); font-weight: 600; flex: 1 1 220px; }
.fa-wg-lead { font-size: 16px; line-height: 1.5; color: var(--guia-deep); font-weight: 600; margin: 0; }
.fa-prog { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-muted); margin: 0; }
.fa-prompt { font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--guia-ink); margin: 0; }
.fa-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-done { font-size: 18px; line-height: 1.45; font-weight: 800; color: var(--guia-green-deep); text-align: center; background: #e6f5ec; border: 2px solid var(--guia-green); border-radius: 12px; padding: 14px; margin: 0; }

/* ===== Feedback de widget (callout, no texto suelto) ===== */
.fa-fb { display: none; border-radius: 12px; border: 2px solid var(--guia-line); background: #fff; padding: 12px 14px; }
.fa-fb.show { display: grid; gap: 8px; }
.fa-fb.ok { border-color: var(--guia-green); background: #f2faf5; }
.fa-fb.miss { border-color: var(--guia-orange); background: #fff7f0; }
.fa-why { font-size: 17px; line-height: 1.5; margin: 0; color: var(--guia-ink); font-weight: 600; }
.fa-prueba { font-size: 17px; line-height: 1.5; margin: 0; color: var(--guia-ink); background: var(--guia-cream); border: 1.5px dashed var(--guia-muted); border-radius: 10px; padding: 9px 12px; }
.fa-prueba > .lbl { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-deep); margin-bottom: 3px; }
.fa-fb-line { font-size: 17px; line-height: 1.5; margin: 0; min-height: 1.3em; font-weight: 700; }
.fa-fb-line.ok { color: var(--guia-green-deep); }
.fa-fb-line.miss { color: #a01243; }

/* ===== tachon ===== */
.fa-tc-card { display: grid; gap: 12px; }
.fa-tc-fx { font-size: 24px; text-align: center; background: #fff; border: 2px solid var(--guia-line); border-radius: 12px; padding: 14px 12px; overflow-x: auto; }

/* ===== paso (stepper) ===== */
.fa-eq { font-size: 22px; text-align: center; background: #fff; border: 2px solid var(--guia-line); border-radius: 12px; padding: 14px 12px; overflow-x: auto; }
.fa-eq.fa-result { border-color: var(--guia-green); background: #f2faf5; }
.fa-flash { animation: fa-pop .45s ease; }
@keyframes fa-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.fa-panel { display: grid; gap: 10px; }
.fa-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fa-trace > li { font-size: 17px; text-align: center; color: var(--guia-muted); background: #fff; border: 1.5px solid var(--guia-line); border-radius: 8px; padding: 7px 10px; overflow-x: auto; }
.fa-replay { justify-self: center; font: inherit; font-weight: 700; font-size: 15px; padding: 8px 16px; border: 2px solid var(--guia-ink); border-radius: 999px; background: #fff; color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s; }
.fa-replay.primary { background: var(--guia-orange); color: #fff; }
.fa-replay:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.fa-replay:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }

/* ===== simplificador ===== */
.fa-simp-body { display: grid; gap: 12px; }
.fa-step-lbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-deep); margin: 2px 0 0; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fa-chip { font: inherit; font-weight: 700; font-size: 17px; padding: 10px 16px; border: 2px solid var(--guia-ink); border-radius: 12px; background: #fff; color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s; }
.fa-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); border-color: var(--guia-orange); }
.fa-chip:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.fa-chip.wide { display: grid; gap: 4px; justify-items: start; text-align: left; min-width: 180px; flex: 1 1 180px; }
.fa-chip-name { font-size: 15px; font-weight: 800; color: var(--guia-deep); }
.fa-chip-fx { font-size: 18px; }
.fa-back { justify-self: start; font: inherit; font-weight: 700; font-size: 15px; padding: 6px 12px; border: 2px solid var(--guia-ink); border-radius: 999px; background: #fff; color: var(--guia-ink); cursor: pointer; }
.fa-back:hover { background: var(--guia-cream); }

/* La fracción tocable: filas de factores con barra al centro */
.fa-frac { display: grid; gap: 8px; justify-items: center; padding: 10px 6px; }
.fa-frac-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.fa-frac-bar { width: min(220px, 80%); height: 3px; border-radius: 2px; background: var(--guia-ink); }
.fa-dot { font-weight: 800; color: var(--guia-muted); }
.fa-tok { font: inherit; font-size: 19px; padding: 8px 12px; min-height: 44px; border: 2px solid var(--guia-navy); border-radius: 10px; background: #fff; color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-navy); transition: transform .1s, box-shadow .1s; }
.fa-tok:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-navy); border-color: var(--guia-orange); }
.fa-tok.cancelled { position: relative; color: var(--guia-muted); border-color: var(--guia-muted); border-style: dashed; box-shadow: none; cursor: default; background: repeating-linear-gradient(135deg, #fff, #fff 5px, #f0eee9 5px, #f0eee9 7px); }
.fa-tok.cancelled::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; border-radius: 2px; background: var(--guia-muted); transform: rotate(-8deg); }

@media (max-width: 540px) {
  .fa-anat { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fa-tc-fx, .fa-eq { font-size: 20px; }
  .fa-ft-cols { grid-template-columns: 1fr; }
}

@media print {
  .fa-wg { display: none !important; }
}