/* ============================================================
 * theme.css — TEMA de la guía de LA RECTA (capa LIBRE).
 * SOLO estilos del tema (prefijo lr-): leyenda de color, visuales del
 * concepto (distancia, punto medio, escalón, signos, paralelas,
 * perpendiculares) y la recta interactiva (3 modos). 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) ===== */
.lr-legend, .lr-visual, .lr-wg {
  --lr-recta: #283891;   /* la recta (navy) */
  --lr-m: #C75D08;       /* pendiente m (naranja) */
  --lr-p: #1C7A3A;       /* puntos / ordenada b (verde) */
  --lr-ink: #181B22;
  --lr-mut: #4b5563;
  --lr-line: #e7e2da;
  --lr-cream: #FFF3E7;
}

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

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

/* mini-rectas de signo (sube / baja / horizontal) */
.lr-mini-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  width: 100%; max-width: 380px;
}
.lr-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 100px; min-width: 96px; }
.lr-mini-svg { width: 100%; }
.lr-mini-svg .lr-svg { max-width: 120px; }
.lr-mini-lbl {
  font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--lr-ink); text-align: center;
}

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

/* ===== Escenario (SVG) ===== */
.lr-stage { display: flex; justify-content: center; margin-bottom: 12px; }
.lr-graf-svg {
  width: 100%; max-width: 320px; height: auto; display: block;
  border: 2px solid var(--lr-line); border-radius: 14px; background: #fff;
}

/* ===== Lectura viva (KaTeX en HTML) ===== */
.lr-read { text-align: center; margin: 4px 0; }
.lr-fx { overflow-x: auto; }
.lr-fx .katex-display { margin: .3em 0; }
.lr-fx .katex { font-size: 1.4em; }

/* ===== Las 3 formas (modo formas) ===== */
.lr-forms { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.lr-form {
  border: 2px solid var(--lr-line); border-radius: 12px; background: #fcfbf9;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.lr-form-tag {
  font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--lr-recta);
}
.lr-form-tag small { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--lr-mut); }
.lr-form .lr-fx { text-align: center; }
.lr-form .lr-fx .katex { font-size: 1.25em; }

/* ===== Estado (frase) ===== */
.lr-status {
  font-size: 15px; line-height: 1.45; color: var(--lr-mut);
  text-align: center; margin: 6px 0 14px; padding: 8px 12px;
  border: 2px solid var(--lr-line); border-radius: 12px; background: #fcfbf9;
}
.lr-status strong { color: var(--lr-ink); }
.lr-status.par { border-color: var(--lr-recta); background: rgba(40,56,145,.07); }
.lr-status.perp { border-color: var(--lr-m); background: rgba(199,93,8,.08); }
.lr-status.warn { border-color: #B45309; background: rgba(180,83,9,.07); }

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

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

/* ===== Responsive a 360px ===== */
@media (max-width: 380px) {
  .lr-wg { padding: 14px 11px; }
  .lr-ctrl-row { gap: 8px; }
  .lr-actions .lr-btn { flex: 1 1 auto; }
  .lr-fx .katex { font-size: 1.25em; }
}

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

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