/* ============================================================
 * theme.css — TEMA de la guía de TEOREMA DE TALES (capa LIBRE, prefijo tal-).
 * SOLO estilos del tema: leyenda de color, visuales del concepto (talesSVG)
 * y widgets por toque (haz-proporcional, resolver-proporcion, medidor-sombra).
 * 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) ===== */
.tal-visual, .tal-wg, .tal-legend {
  --tal-ink: #181B22;     /* transversales / tinta */
  --tal-navy: #283891;    /* haz de paralelas / conocido */
  --tal-x: #C75D08;       /* incógnita */
  --tal-green: #1C7A3A;   /* resultado / razones iguales */
  --tal-sun: #C98A00;     /* rayos del sol */
  --tal-mut: #4b5563;     /* gris de apoyo */
  --tal-line: #e7e2da;    /* líneas suaves */
  --tal-cream: #FFF3E7;   /* crema para realces */
  --tal-bad: #A01243;     /* no se cumple */
}

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

/* ===== Visuales estáticos (talesSVG) ===== */
.tal-visual { margin: 14px 0; }
.tal-svg {
  width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto;
  background: #fff; border: 2px solid var(--tal-line); border-radius: 14px; padding: 6px;
}
.tal-vlabel {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--tal-mut); text-align: center;
}
.tal-cap { margin: 8px auto 0; max-width: 460px; font-size: 15px; color: var(--tal-mut); text-align: center; line-height: 1.45; }

/* proporción estática: la fórmula bajo el haz */
.tal-prop-fx { margin: 8px 0 0; overflow-x: auto; }
.tal-prop-fx .katex-display { margin: .3em 0; }

/* pair: dos escenas lado a lado */
.tal-pair-grid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tal-pair-cell {
  flex: 1 1 150px; max-width: 220px; min-width: 140px;
  border: 2px solid var(--tal-line); border-radius: 14px; padding: 8px; background: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.tal-pair-cell.ok { border-color: var(--tal-green); }
.tal-pair-cell.no { border-color: var(--tal-bad); }
.tal-pair-cell .tal-svg { border: none; padding: 0; max-width: 100%; }
.tal-pair-tag {
  font-size: 13px; font-weight: 800; letter-spacing: .02em; margin-bottom: 6px;
  text-align: center; line-height: 1.25;
}
.tal-pair-cell.ok .tal-pair-tag { color: var(--tal-green); }
.tal-pair-cell.no .tal-pair-tag { color: var(--tal-bad); }

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

.tal-btn {
  font: inherit; font-weight: 800; font-size: 17px; min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--tal-ink); border-radius: 12px; background: var(--tal-navy); color: #fff;
  cursor: pointer; box-shadow: 3px 3px 0 var(--tal-ink); transition: transform .1s, box-shadow .1s;
}
.tal-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tal-ink); }
.tal-btn:active { transform: none; box-shadow: 1px 1px 0 var(--tal-ink); }
.tal-btn.small { font-size: 15px; min-height: 40px; padding: 8px 16px; margin-left: 10px; }
.tal-btn.ghost { background: #fff; color: var(--tal-ink); box-shadow: none; }
.tal-btn.ghost:hover { border-color: var(--tal-x); transform: none; box-shadow: none; }

/* botón − / + de los widgets que mueven cosas */
.tal-step {
  width: 48px; height: 48px; font-size: 26px; font-weight: 800; line-height: 1;
  border: 2px solid var(--tal-ink); border-radius: 12px; background: var(--tal-navy); color: #fff;
  cursor: pointer; box-shadow: 3px 3px 0 var(--tal-ink); transition: transform .1s, box-shadow .1s;
}
.tal-step:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tal-ink); }
.tal-step:active:not(:disabled) { transform: none; box-shadow: 1px 1px 0 var(--tal-ink); }
.tal-step:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* opción genérica por toque (pasos del resolver) */
.tal-opt {
  font: inherit; font-weight: 700; font-size: 16px; min-height: 44px; padding: 10px 14px;
  border: 2px solid var(--tal-line); border-radius: 10px; background: #fff; color: var(--tal-ink);
  cursor: pointer; text-align: left; transition: transform .1s, border-color .1s;
}
.tal-opt:hover { border-color: var(--tal-x); transform: translateY(-1px); }
.tal-opt.right { border-color: var(--tal-green); background: #e6f5ec; color: var(--tal-green); }
.tal-opt.wrong { border-color: #d6336c; background: #fdecf1; color: var(--tal-bad); }
.tal-opt:disabled { cursor: default; opacity: 1; }

/* ===== Widget ① — haz-proporcional ===== */
.tal-hazw-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tal-preset {
  font: inherit; font-weight: 700; font-size: 14px; min-height: 40px; padding: 8px 12px;
  border: 2px solid var(--tal-line); border-radius: 999px; background: #fff; color: var(--tal-mut);
  cursor: pointer; transition: border-color .1s, color .1s, background .1s;
}
.tal-preset:hover { border-color: var(--tal-x); }
.tal-preset.on { border-color: var(--tal-navy); color: var(--tal-navy); background: #f4f6fc; }
.tal-hazw-stage { display: flex; justify-content: center; }
.tal-hazw-stage .tal-svg { max-width: 340px; }
.tal-hazw-ctrl { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
.tal-hazw-cap { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--tal-mut); }
.tal-hazw-row { display: flex; align-items: center; gap: 14px; }
.tal-hazw-val { min-width: 56px; text-align: center; font-size: 22px; font-weight: 800; color: var(--tal-navy); }
.tal-hazw-read { margin-top: 6px; }
.tal-hazw-lead { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--tal-ink); text-align: center; }
.tal-ratios { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.tal-ratio {
  font-size: 16px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  border: 2px solid var(--tal-line); background: #fff; color: var(--tal-ink);
}
.tal-ratio.ok { border-color: var(--tal-green); background: #e6f5ec; color: var(--tal-green); }
.tal-ratio .rl { font-weight: 800; }
.tal-ratio .rn { color: var(--tal-mut); }
.tal-ratio.ok .rn { color: var(--tal-green); }
.tal-ratio-eq { font-size: 18px; font-weight: 800; color: var(--tal-mut); }
.tal-hazw-note { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--tal-mut); text-align: center; }
.tal-hazw-note strong { color: var(--tal-ink); }

/* ===== Widget ② — resolver-proporcion ===== */
.tal-resolver-prog { margin: 0 0 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--tal-mut); }
.tal-resolver-ctx { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--tal-ink); padding: 10px 12px; border: 2px solid var(--tal-line); border-radius: 12px; background: #fcfbf9; }
.tal-resolver-fx { margin: 4px 0 12px; }
.tal-resolver-eq { overflow-x: auto; text-align: center; }
.tal-resolver-eq .katex-display { margin: .3em 0; }
.tal-step-lbl { margin: 0 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--tal-x); }
.tal-step-opts { display: flex; flex-direction: column; gap: 8px; }
.tal-step-fb { margin: 10px 0 0; font-size: 15px; line-height: 1.45; display: none; }
.tal-step-fb.show { display: block; }
.tal-step-fb.ok { color: var(--tal-green); }
.tal-step-fb.miss { color: var(--tal-bad); }
.tal-resolver-result { margin: 8px 0 0; font-size: 17px; color: var(--tal-ink); }
.tal-resolver-result .tal-x { color: var(--tal-green); }
.tal-resolver-done { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--tal-ink); }

/* ===== Widget ③ — medidor-sombra ===== */
.tal-sombraw-stage { display: flex; justify-content: center; }
.tal-sombraw-stage .tal-svg { max-width: 360px; }
.tal-sombraw-ctrl { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
.tal-sombraw-cap { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--tal-mut); }
.tal-sombraw-row { display: flex; align-items: center; gap: 14px; }
.tal-sombraw-val { min-width: 64px; text-align: center; font-size: 17px; font-weight: 800; color: var(--tal-sun); }
.tal-sombraw-read { margin-top: 6px; }
.tal-sombraw-data { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
.tal-chip {
  font-size: 15px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  border: 2px solid var(--tal-line); background: #fff; color: var(--tal-ink);
}
.tal-chip.navy { color: var(--tal-navy); border-color: var(--tal-navy); }
.tal-chip.mut { color: var(--tal-mut); }
.tal-sombraw-fx { overflow-x: auto; text-align: center; margin: 4px 0; }
.tal-sombraw-fx .katex-display { margin: .3em 0; }
.tal-sombraw-note { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--tal-mut); text-align: center; }
.tal-sombraw-note strong { color: var(--tal-ink); }

/* ===== Animaciones suaves de los SVG vivos ===== */
.tal-hazw-stage .tal-svg line, .tal-sombraw-stage .tal-svg line { transition: none; }

/* ===== 380px: sin overflow horizontal ===== */
@media (max-width: 380px) {
  .tal-pair-cell { flex-basis: 100%; max-width: 100%; }
  .tal-btn.small { margin-left: 0; margin-top: 8px; display: inline-block; }
  .tal-ratio { font-size: 15px; }
  .tal-preset { flex: 1 1 100%; }
}

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

/* ===== Impresión: oculta lo interactivo (apoyo, no contenido SEO) ===== */
@media print {
  .tal-wg { display: none !important; }
}