/* ============================================================
 * theme.css — TEMA de la guia de PROGRESIONES ARITMETICAS (capa LIBRE).
 * SOLO estilos del tema (prefijo pa-). NO redefine clases guia-*.
 * Pisos: lectura >=17px · apoyo >=15px · etiq MAYUSC >=13px · piso duro 13px.
 * Tap >= 44px. Sin overflow a 360px. Light-mode fijo.
 * ============================================================ */

/* ===== Variables de paleta del tema ===== */
.pa-ver, .pa-mc, .pa-ct, .pa-cs, .pa-tl {
  --pa-seq:  #2A4FA8;   /* color terminos de la sucesion */
  --pa-diff: #1C7A3A;   /* color diferencia d / resultado */
  --pa-form: #C75D08;   /* color formula / lo buscado */
  --pa-ink:  #181B22;
  --pa-mut:  #4b5563;
  --pa-line: #e7e2da;
  --pa-bg:   #fcfbf9;
}

/* ===== Andamiaje comun de widgets ===== */
.pa-ver, .pa-mc, .pa-ct, .pa-cs {
  margin: 16px 0; padding: 16px 14px;
  border: 2px solid var(--pa-ink, #181B22);
  border-radius: 16px; background: #fff;
  box-shadow: 4px 4px 0 var(--pa-ink, #181B22);
}
.pa-wg-lead {
  margin: 0 0 12px; font-size: 17px; line-height: 1.45;
  color: var(--pa-ink, #181B22);
}

/* ===== Boton generico del tema ===== */
.pa-btn {
  font: inherit; font-weight: 800; font-size: 17px; min-height: 44px; padding: 10px 18px;
  border: 2px solid var(--pa-ink, #181B22); border-radius: 12px;
  background: var(--pa-seq, #2A4FA8); color: #fff;
  cursor: pointer; box-shadow: 3px 3px 0 var(--pa-ink, #181B22);
  transition: transform .1s, box-shadow .1s;
}
.pa-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--pa-ink, #181B22); }
.pa-btn:active { transform: none; box-shadow: 1px 1px 0 var(--pa-ink, #181B22); }
.pa-btn.ghost { background: #fff; color: var(--pa-ink, #181B22); box-shadow: none; }
.pa-btn.ghost:hover { border-color: var(--pa-seq, #2A4FA8); transform: none; box-shadow: none; }
.pa-btn.small { font-size: 15px; min-height: 40px; padding: 8px 14px; }

/* ===== Chips tactiles (a1, d) ===== */
.pa-chip {
  font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 9px 14px;
  border: 2px solid var(--pa-seq, #2A4FA8); border-radius: 999px;
  background: #fff; color: var(--pa-seq, #2A4FA8);
  cursor: pointer; transition: transform .1s, background .1s, color .1s;
}
.pa-chip:hover { transform: translateY(-2px); }
.pa-chip.on {
  background: var(--pa-seq, #2A4FA8); color: #fff;
  box-shadow: 2px 2px 0 var(--pa-ink, #181B22);
}

/* ===== Opcion SI/NO ===== */
.pa-opt {
  font: inherit; font-weight: 700; font-size: 17px; min-height: 48px; padding: 10px 16px;
  border: 2px solid var(--pa-ink, #181B22); border-radius: 12px;
  background: #fff; color: var(--pa-ink, #181B22);
  cursor: pointer; box-shadow: 3px 3px 0 var(--pa-ink, #181B22);
  transition: transform .1s, background .1s, border-color .1s;
}
.pa-opt:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--pa-ink, #181B22); }
.pa-opt.right { border-color: var(--pa-diff, #1C7A3A); background: #e6f5ec; color: var(--pa-diff, #1C7A3A); box-shadow: 3px 3px 0 var(--pa-diff, #1C7A3A); }
.pa-opt.wrong { border-color: #d6336c; background: #fdecf1; color: #a01243; box-shadow: 3px 3px 0 #d6336c; }
.pa-opt:disabled { cursor: default; }

/* ================================================================
 * ① VERIFICADOR
 * ============================================================== */
.pa-ver-prog {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pa-mut, #4b5563);
}
.pa-ver-nums {
  font-size: 22px; font-weight: 800; letter-spacing: .04em; text-align: center;
  padding: 12px; margin: 0 0 10px;
  border: 2px solid var(--pa-line, #e7e2da); border-radius: 12px;
  background: var(--pa-bg, #fcfbf9); color: var(--pa-seq, #2A4FA8);
  overflow-x: auto;
}
.pa-ver-q { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--pa-seq, #2A4FA8); }
.pa-ver-opts { display: flex; flex-direction: column; gap: 8px; }
.pa-ver-fb {
  margin: 10px 0 0; font-size: 15px; line-height: 1.45; display: none;
}
.pa-ver-fb.show { display: block; }
.pa-ver-fb.ok   { color: var(--pa-diff, #1C7A3A); }
.pa-ver-fb.miss { color: #a01243; }
.pa-ver-done    { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--pa-ink, #181B22); }

/* ================================================================
 * ② MINI-CONSTRUCTOR
 * ============================================================== */
.pa-mc-chips, .pa-ct-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.pa-mc-hint { margin: 0; font-size: 15px; color: var(--pa-mut, #4b5563); font-style: italic; }
.pa-mc-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px;
  padding: 10px 12px; background: var(--pa-bg, #fcfbf9);
  border: 2px solid var(--pa-line, #e7e2da); border-radius: 12px;
}
.pa-mc-term {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 36px;
}
.pa-mc-n { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--pa-mut, #4b5563); text-transform: uppercase; }
.pa-mc-v { font-size: 20px; font-weight: 800; color: var(--pa-seq, #2A4FA8); }
.pa-mc-tipo {
  margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--pa-ink, #181B22);
}
.pa-d-val { color: var(--pa-diff, #1C7A3A); font-weight: 800; }

/* ================================================================
 * ③ CONSTRUCTOR-TERMINO y ④ CONSTRUCTOR-SUMA (estructura compartida)
 * ============================================================== */
.pa-ct-row {
  margin-bottom: 10px;
}
.pa-ct-label {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pa-mut, #4b5563); margin-bottom: 6px;
}
.pa-ct-terms {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
  padding: 10px 12px; background: var(--pa-bg, #fcfbf9);
  border: 2px solid var(--pa-line, #e7e2da); border-radius: 12px;
}
.pa-ct-term {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 36px;
}
.pa-ct-term.highlight .pa-mc-v {
  color: var(--pa-form, #C75D08);
}
.pa-ct-formula, .pa-cs-formula {
  padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.6;
  border: 2px solid var(--pa-line, #e7e2da); background: #fff;
}
.pa-ct-flabel { font-weight: 800; color: var(--pa-ink, #181B22); margin-right: 4px; }
.pa-ct-fcalc { color: var(--pa-mut, #4b5563); }

/* Herramienta libre */
.pa-tl { margin: 0; padding: 0; border: none; box-shadow: none; }
.pa-tl-display { margin-top: 10px; }
.pa-tl-results {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
}
.pa-tl-res-item {
  flex: 1 1 200px; padding: 10px 14px;
  border: 2px solid var(--pa-line, #e7e2da); border-radius: 12px; background: #fff;
  font-size: 15px; line-height: 1.7;
}
.pa-tl-rlabel { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pa-mut, #4b5563); }
.pa-tl-formula { font-size: 13px; color: var(--pa-mut, #4b5563); }

/* ===== 360px: sin overflow horizontal ===== */
@media (max-width: 380px) {
  .pa-mc-v      { font-size: 17px; }
  .pa-ver-nums  { font-size: 18px; }
  .pa-chip      { font-size: 14px; padding: 8px 11px; }
  .pa-opt       { font-size: 16px; }
}

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

/* ===== Impresion ===== */
@media print {
  .pa-ver, .pa-mc, .pa-ct, .pa-cs { display: none !important; }
}