/* ============================================================
 * theme.css — TEMA de la guía de FUNCIÓN LINEAL (capa LIBRE).
 * SOLO estilos del tema (prefijo fl-): leyenda de color, visuales del
 * concepto (máquina, plano, recta, escalón, paralelas, graficar, leer) y el
 * widget graficador. 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 del tema (eco de las variables de marca) ===== */
.fl-legend, .fl-visual, .fl-wg {
  --fl-recta: #283891;   /* la recta / la función (navy) */
  --fl-m: #C75D08;       /* pendiente m (naranja) */
  --fl-b: #1C7A3A;       /* ordenada b (verde) */
  --fl-ink: #181B22;
  --fl-mut: #4b5563;
  --fl-line: #e7e2da;
  --fl-cream: #FFF3E7;
}

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

/* ===== Visuales estáticos ===== */
.fl-visual {
  margin: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fl-svg {
  width: 100%; max-width: 340px; height: auto; display: block;
  border: 2px solid var(--fl-line); border-radius: 14px; background: #fff;
}
.fl-svg.fl-maquina { max-width: 360px; }
.fl-cap {
  font-size: 15px; color: var(--fl-mut); text-align: center; line-height: 1.4; max-width: 380px;
}

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

/* ===== Graficador ===== */
.fl-graf-stage { display: flex; justify-content: center; margin-bottom: 12px; }
.fl-graf-svg {
  width: 100%; max-width: 320px; height: auto; display: block;
  border: 2px solid var(--fl-line); border-radius: 14px; background: #fff;
}
.fl-graf-read { text-align: center; margin: 4px 0; }
.fl-graf-fx { overflow-x: auto; }
.fl-graf-fx .katex-display { margin: .3em 0; }
.fl-graf-fx .katex { font-size: 1.5em; }

.fl-graf-status {
  font-size: 15px; line-height: 1.45; color: var(--fl-mut);
  text-align: center; margin: 4px 0 14px; padding: 8px 12px;
  border: 2px solid var(--fl-line); border-radius: 12px; background: #fcfbf9;
}
.fl-graf-status strong { color: var(--fl-ink); }
.fl-graf-status.prop {
  border-color: var(--fl-b); background: rgba(28,122,58,.07);
}

/* ===== Controles m / b ===== */
.fl-graf-ctrls { display: flex; flex-direction: column; gap: 12px; }
.fl-ctrl { display: flex; flex-direction: column; gap: 6px; }
.fl-ctrl-name {
  font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.fl-ctrl-row { display: flex; align-items: center; gap: 10px; }
.fl-step {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 2px solid var(--fl-ink); border-radius: 12px; background: #fff;
  font-size: 22px; font-weight: 800; line-height: 1; color: var(--fl-ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .08s ease, background .12s ease;
}
.fl-step:hover { background: var(--fl-cream); }
.fl-step:active { transform: translateY(1px); }
.fl-step:disabled { opacity: .35; cursor: default; }
.fl-range {
  flex: 1 1 auto; min-width: 0; height: 44px; cursor: pointer; accent-color: var(--fl-recta);
}
.fl-ctrl[data-ctrl="m"] .fl-range { accent-color: var(--fl-m); }
.fl-ctrl[data-ctrl="b"] .fl-range { accent-color: var(--fl-b); }
.fl-ctrl-val {
  flex: 0 0 auto; min-width: 38px; text-align: center;
  font-size: 19px; font-weight: 800;
}
.fl-ctrl.locked { opacity: .6; }
.fl-ctrl.locked .fl-range { cursor: default; }

/* ===== Botones de acción del widget ===== */
.fl-graf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px;
  border: 2px solid var(--fl-ink); border-radius: 12px; background: var(--fl-ink);
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: transform .08s ease, background .12s ease;
}
.fl-btn:active { transform: translateY(1px); }
.fl-btn.ghost { background: #fff; color: var(--fl-ink); }
.fl-btn.ghost:hover { background: var(--fl-cream); }
.fl-btn.small { font-size: 15px; padding: 6px 14px; }

/* ===== Responsive a 360px ===== */
@media (max-width: 380px) {
  .fl-wg { padding: 14px 11px; }
  .fl-ctrl-row { gap: 8px; }
  .fl-graf-actions .fl-btn { flex: 1 1 auto; }
}

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

/* ===== Impresión: el widget interactivo no aporta en papel ===== */
@media print {
  .fl-wg { display: none !important; }
  .fl-svg, .fl-graf-svg { border-color: #999; }
}