/* ============================================================
 * theme.css — TEMA de la guía de ECUACIONES DE SEGUNDO GRADO (capa LIBRE).
 * Estilos de los visuales (eq2-forma, eq2-parabola) y los widgets propios
 * (eq2-resolvedor ⭐, eq2-discriminador, eq2-parabolaLab), la leyenda y la
 * clave de color. Andamiaje en assets/guia-components.css; usar variables
 * --guia-* (no hardcodear hex salvo dentro de los SVG, que no leen vars).
 * Pisos de letra: lectura ≥17px · apoyo ≥15px · etiquetas ≥13px. Tap ≥44px.
 * ============================================================ */

/* ===== Leyenda de color ===== */
.eq2-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; color: var(--guia-ink); }
.eq2-legend .it { display: flex; gap: 8px; align-items: center; }
.eq2-legend .it b { font-weight: 800; }
.eq2-legend .sw { width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto; }
.eq2-legend .sw.a { background: var(--guia-orange); border: 2px solid var(--guia-deep); }
.eq2-legend .sw.b { background: var(--guia-navy); border: 2px solid var(--guia-navy); }
.eq2-legend .sw.c { background: var(--guia-green); border: 2px solid var(--guia-green-deep); }
.eq2-legend .sw.r { background: var(--guia-green-deep); border: 2px solid var(--guia-green-deep); }

/* ===== Visual: forma ax²+bx+c=0 ===== */
.eq2-visual { display: grid; gap: 10px; justify-items: center; }
.eq2-forma { background: #fcfbf9; border: 1.5px solid var(--guia-line); border-radius: 14px; padding: 14px 16px; }
.eq2-forma-eq { font-size: clamp(20px, 3vw, 26px); text-align: center; overflow-x: auto; max-width: 100%; }
.eq2-forma-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.eq2-tag { font-size: 14px; font-weight: 800; padding: 4px 11px; border-radius: 999px; border: 2px solid; background: #fff; }
.eq2-tag.a { color: var(--guia-deep); border-color: var(--guia-deep); }
.eq2-tag.b { color: var(--guia-navy); border-color: var(--guia-navy); }
.eq2-tag.c { color: var(--guia-green-deep); border-color: var(--guia-green-deep); }

/* ===== Visual: parábola ===== */
.eq2-parabola { background: #fff; border: 1.5px solid var(--guia-line); border-radius: 14px; padding: 12px; width: 100%; }
.eq2-parabola-svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.eq2-parabola-cap { font-size: 15px; font-weight: 800; color: var(--guia-deep); text-align: center; margin: 4px 0 0; }
.eq2-parabola-note { font-size: 15px; line-height: 1.5; color: var(--guia-muted); text-align: center; margin: 0; max-width: 52ch; }
.eq2-dot { color: var(--guia-green-deep); font-weight: 800; }

/* ===== Tarjeta base de widget ===== */
.eq2-wg { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); margin: 2px 0; }
.eq2-wg-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.eq2-flag { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--guia-deep); border-radius: 999px; padding: 4px 11px; flex: 0 0 auto; }
.eq2-wg-inst { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--guia-deep); }

/* ===== Progreso de widget ===== */
.eq2-resolv-prog, .eq2-disc-prog { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-muted); margin: 0; }

/* ===== Ecuación viva (display) ===== */
.eq2-eq { font-size: clamp(20px, 3vw, 26px); text-align: center; background: #fff; border: 2px solid var(--guia-line); border-radius: 12px; padding: 12px; overflow-x: auto; }

/* ===== Selector de método / chips ===== */
.eq2-step-lbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-deep); margin: 2px 0 0; }
.eq2-method { display: flex; flex-wrap: wrap; gap: 10px; }
.eq2-chip { font: inherit; font-weight: 700; font-size: 16px; min-height: 44px; padding: 10px 18px; 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, background .15s; }
.eq2-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); border-color: var(--guia-orange); }
.eq2-chip:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.eq2-chip.on { background: var(--guia-orange); color: #fff; border-color: var(--guia-deep); }
.eq2-method-note { font-size: 15px; line-height: 1.5; color: var(--guia-muted); background: #f6f8fc; border: 1.5px dashed #c5cde6; border-radius: 10px; padding: 9px 12px; margin: 0 0 4px; }

/* ===== Panel de pasos ===== */
.eq2-panel { display: grid; gap: 10px; }
.eq2-prompt { font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--guia-ink); margin: 0; }
.eq2-opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* las opciones usan .guia-opt del andamiaje; aseguramos el tap mínimo */
.eq2-panel .guia-opt, .eq2-method .eq2-chip { min-height: 44px; }
.eq2-fb { font-size: 16px; line-height: 1.45; margin: 0; min-height: 1.2em; }
.eq2-fb.ok { color: var(--guia-green-deep); font-weight: 700; }
.eq2-fb.miss { color: #a01243; font-weight: 700; }

/* ===== Traza de pasos ===== */
.eq2-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eq2-trace li { font-size: 17px; text-align: center; color: var(--guia-ink); background: #fff; border: 1.5px solid var(--guia-line); border-radius: 8px; padding: 8px 10px; overflow-x: auto; }

/* ===== Cierre de widget ===== */
.eq2-done { font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--guia-green-deep); text-align: center; background: #e6f5ec; border: 2px solid var(--guia-green); border-radius: 12px; padding: 14px; margin: 6px 0 0; display: grid; gap: 10px; justify-items: center; }
.eq2-done strong { font-weight: 800; }

/* ===== Botones del tema ===== */
.eq2-btn { font: inherit; font-weight: 800; font-size: 16px; min-height: 44px; padding: 10px 18px; border: 2px solid var(--guia-ink); border-radius: 12px; background: var(--guia-orange); color: #fff; cursor: pointer; box-shadow: 3px 3px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s; }
.eq2-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--guia-ink); }
.eq2-btn:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.eq2-btn.ghost { background: #fff; color: var(--guia-ink); font-weight: 700; box-shadow: 2px 2px 0 var(--guia-ink); }
.eq2-btn.small { font-size: 15px; padding: 9px 16px; box-shadow: 2px 2px 0 var(--guia-ink); }

/* ===== Laboratorio de parábola ===== */
.eq2-lab-stage { background: #fff; border: 2px solid var(--guia-line); border-radius: 12px; padding: 8px; text-align: center; }
.eq2-lab-stage .eq2-parabola-svg { max-width: 360px; }
.eq2-lab-readout { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; font-size: 17px; }
.eq2-lab-disc { font-weight: 700; color: var(--guia-ink); }
.eq2-pill { font-size: 14px; font-weight: 800; padding: 5px 12px; border-radius: 999px; border: 2px solid; }
.eq2-pill.two { color: var(--guia-green-deep); border-color: var(--guia-green-deep); background: #e6f5ec; }
.eq2-pill.one { color: var(--guia-deep); border-color: var(--guia-deep); background: #fdf0e6; }
.eq2-pill.none { color: #a01243; border-color: #a01243; background: #fbe9f0; }
.eq2-lab-warn { font-size: 14px; color: #a01243; font-weight: 700; }
.eq2-lab-ctrls { display: grid; gap: 10px; }
.eq2-lab-ctrl { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto; gap: 10px; align-items: center; }
.eq2-lab-lbl { font-size: 14px; font-weight: 800; }
.eq2-lab-lbl.a { color: var(--guia-deep); }
.eq2-lab-lbl.b { color: var(--guia-navy); }
.eq2-lab-lbl.c { color: var(--guia-green-deep); }
.eq2-lab-range { width: 100%; height: 44px; cursor: pointer; accent-color: var(--guia-orange); }
.eq2-lab-val { font-size: 17px; font-weight: 800; color: var(--guia-ink); min-width: 2.2em; text-align: center; background: #fff; border: 1.5px solid var(--guia-line); border-radius: 8px; padding: 4px 8px; }

/* ===== Responsive del laboratorio en pantallas chicas ===== */
@media (max-width: 460px) {
  .eq2-lab-ctrl { grid-template-columns: 1fr auto; grid-template-areas: "lbl val" "rng rng"; }
  .eq2-lab-lbl { grid-area: lbl; }
  .eq2-lab-val { grid-area: val; }
  .eq2-lab-range { grid-area: rng; }
}

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

/* ===== Impresión: oculta los interactivos ===== */
@media print {
  .eq2-resolvedor, .eq2-disc, .eq2-lab { display: none !important; }
  .eq2-parabola-svg { max-width: 280px; }
}