/* ============================================================
 * theme.css — TEMA de la guía de despejes (capa LIBRE).
 * Estilos de los widgets propios (prefijo dsp-): balanza, paso y
 * despejador, leyenda y reaseguro del hero. Andamiaje en
 * assets/guia-components.css; usar variables --guia-* (no hardcodear hex).
 * ============================================================ */

/* ===== Reaseguro de longitud en el hero ===== */
.guia-reassure { font-size: 15px; line-height: 1.5; color: var(--guia-muted); margin: 2px 0 0; }

/* ===== Lead de cualquier widget ===== */
.dsp-wg-lead { font-size: 16px; line-height: 1.5; color: var(--guia-deep); font-weight: 600; margin: 0 0 12px; }

/* ===== Leyenda de color ===== */
.dsp-legend { display: flex; gap: 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; }
.dsp-legend .it { display: flex; gap: 8px; align-items: center; }
.dsp-legend .it b { font-weight: 800; }
.dsp-legend .sw { width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto; }
.dsp-legend .sw.obj { background: var(--guia-orange); border: 2px solid var(--guia-deep); }
.dsp-legend .sw.op { background: var(--guia-navy); border: 2px solid var(--guia-navy); }
.dsp-legend .sw.cx { background: repeating-linear-gradient(135deg, #fff, #fff 3px, var(--guia-muted) 3px, var(--guia-muted) 4px); border: 2px solid var(--guia-muted); }

/* ===== Tarjeta base de widget (balanza / paso / despejador) ===== */
.dsp-bz, .dsp-paso, .dsp-dpj {
  display: grid; gap: 12px; padding: 16px;
  border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream);
  margin: 2px 0;
}

/* ===== Balanza ===== */
.dsp-bz-stage { text-align: center; }
.dsp-bz-svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.dsp-bz-base { stroke: var(--guia-ink); stroke-width: 4; stroke-linecap: round; }
.dsp-bz-fulcrum { fill: var(--guia-ink); }
.dsp-bz-beam { transition: transform .35s ease; transform-origin: 160px 74px; }
.dsp-bz-bar { fill: var(--guia-ink); }
.dsp-bz-strap { stroke: var(--guia-ink); stroke-width: 2; }
.dsp-bz-pan { fill: #fff; stroke: var(--guia-ink); stroke-width: 2.5; stroke-linejoin: round; }
.dsp-bz-chip { fill: var(--guia-orange); stroke: var(--guia-deep); stroke-width: 1.5; cursor: pointer; }
.is-balanced .dsp-bz-chip { fill: var(--guia-green); stroke: var(--guia-green-deep); }
.dsp-bz-controls { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.dsp-bz-side { display: grid; gap: 6px; justify-items: center; }
.dsp-bz-cap { font-size: 15px; font-weight: 700; color: var(--guia-ink); }
.dsp-bz-row { display: flex; gap: 8px; }
.dsp-bz-btn { font: inherit; font-weight: 800; font-size: 15px; padding: 8px 14px; border: 2px solid var(--guia-ink); border-radius: 10px; background: #fff; color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s; }
.dsp-bz-btn.add { background: var(--guia-orange); color: #fff; }
.dsp-bz-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
.dsp-bz-btn:active:not(:disabled) { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.dsp-bz-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.dsp-bz-status { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--guia-deep); text-align: center; margin: 0; min-height: 1.5em; }
.is-balanced .dsp-bz-status { color: var(--guia-green-deep); }

/* ===== Clave de color dentro de los widgets de paso ===== */
.dsp-key { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0; font-size: 13px; font-weight: 700; }
.dsp-key .kk { display: inline-flex; align-items: center; gap: 6px; }
.dsp-key .kk::before { content: ""; width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.dsp-key .kk.obj { color: var(--guia-deep); } .dsp-key .kk.obj::before { background: var(--guia-orange); border: 1.5px solid var(--guia-deep); }
.dsp-key .kk.op { color: var(--guia-navy); } .dsp-key .kk.op::before { background: var(--guia-navy); }
.dsp-key .kk.cx { color: var(--guia-muted); } .dsp-key .kk.cx::before { background: repeating-linear-gradient(135deg, #fff, #fff 3px, var(--guia-muted) 3px, var(--guia-muted) 4px); border: 1.5px solid var(--guia-muted); }

/* ===== Paso / despejador: fórmula viva + panel de pasos ===== */
.dsp-eq, .dsp-formula {
  font-size: 22px; text-align: center; background: #fff;
  border: 2px solid var(--guia-line); border-radius: 12px; padding: 14px 12px; overflow-x: auto;
}
.dsp-formula { border-color: var(--guia-ink); }
.dsp-flash { animation: dsp-pop .45s ease; }
@keyframes dsp-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.dsp-panel { display: grid; gap: 10px; }
.dsp-prompt { font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--guia-ink); margin: 0; }
.dsp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-fb { font-size: 16px; line-height: 1.45; margin: 0; min-height: 1.2em; }
.dsp-fb.ok { color: var(--guia-green-deep); font-weight: 700; }
.dsp-fb.miss { color: #a01243; font-weight: 700; }
.dsp-done { font-size: 18px; font-weight: 800; color: var(--guia-green-deep); text-align: center; background: #e6f5ec; border: 2px solid var(--guia-green); border-radius: 12px; padding: 14px; margin: 0; }
.dsp-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dsp-trace li { font-size: 17px; text-align: center; color: var(--guia-muted); background: #fff; border: 1.5px solid var(--guia-line); border-radius: 8px; padding: 7px 10px; overflow-x: auto; }
.dsp-trace li.op { background: #f6f8fc; border: 1.5px dashed #c5cde6; }
.dsp-trace li.res { color: var(--guia-ink); font-weight: 600; }

/* ===== Despejador: selección de fórmula y letra ===== */
.dsp-step-lbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--guia-deep); margin: 2px 0 0; }
.dsp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dsp-chip { font: inherit; font-weight: 700; font-size: 17px; padding: 10px 16px; 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; }
.dsp-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); border-color: var(--guia-orange); }
.dsp-chip:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--guia-ink); }
.dsp-chip.wide { display: grid; gap: 4px; justify-items: start; text-align: left; min-width: 220px; flex: 1 1 220px; }
.dsp-chip-name { font-size: 15px; font-weight: 800; color: var(--guia-deep); }
.dsp-chip-fx { font-size: 18px; }
.dsp-back { justify-self: start; font: inherit; font-weight: 700; font-size: 15px; padding: 6px 12px; border: 2px solid var(--guia-ink); border-radius: 999px; background: #fff; color: var(--guia-ink); cursor: pointer; }
.dsp-back:hover { background: var(--guia-cream); }

/* ===== Viaje (prototipo): el término cruza el = ===== */
.dsp-viaje { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); }
.vj-stage { position: relative; min-height: 66px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--guia-line); border-radius: 12px; padding: 14px 16px; overflow: hidden; }
.vj-eq { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 12px; width: 100%; font-size: 24px; }
.vj-l { justify-self: end; display: flex; align-items: center; gap: 8px; }
.vj-r { justify-self: start; display: flex; align-items: center; gap: 8px; }
.vj-tok { display: inline-block; transition: opacity .25s ease; }
.vj-tok.vj-pop { animation: dsp-pop .5s ease; }
.vj-tok.vj-aim { animation: vj-aim .5s ease; }           /* anticipación: pulso antes de moverse */
@keyframes vj-aim { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.2); } }
.vj-tok.vj-lift { opacity: 0; }                          /* despega desvaneciéndose */
.vj-tok.vj-land { animation: vj-land .5s cubic-bezier(.2, 1.5, .45, 1); }  /* aterriza con asentamiento */
@keyframes vj-land { 0% { transform: translateY(-7px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
.vj-r { transition: opacity .26s ease; }
.vj-r.vj-fade { opacity: 0; }                            /* el resultado se funde antes de mostrar el número */
.vj-fly { position: absolute; font-size: 24px; z-index: 3; pointer-events: none; will-change: transform; }
.vj-fly > span { white-space: nowrap; transition: opacity .34s ease; }
.vj-fly .vj-fly-a { position: relative; }                /* el término original (define el tamaño) */
.vj-fly .vj-fly-b { position: absolute; left: 0; top: 0; opacity: 0; }  /* su versión con signo cambiado */
.vj-fly.signflip .vj-fly-a { opacity: 0; }               /* crossfade del signo en pleno vuelo */
.vj-fly.signflip .vj-fly-b { opacity: 1; }
.vj-fly.go { animation: vj-arc 1.02s cubic-bezier(.34, .03, .28, 1) forwards; }
@keyframes vj-arc {
  0% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(var(--dxm, 40px), -26px) scale(1.06); }
  100% { transform: translate(var(--dx, 80px), 0) scale(1); }
}
.dsp-replay { justify-self: center; font: inherit; font-weight: 700; font-size: 15px; padding: 8px 16px; border: 2px solid var(--guia-ink); border-radius: 999px; background: #fff; color: var(--guia-ink); cursor: pointer; box-shadow: 2px 2px 0 var(--guia-ink); transition: transform .1s, box-shadow .1s; }
.dsp-replay:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--guia-ink); }
@media (prefers-reduced-motion: reduce) { .vj-fly.go { animation: none; } .vj-tok.vj-aim, .vj-tok.vj-land { animation: none; } }

/* ===== Desglose: micro-pasos con un toque (resalta lo que cambia) ===== */
.dsp-desg { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--guia-ink); border-radius: 14px; background: var(--guia-cream); }
.dg-cap { font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--guia-ink); margin: 0; min-height: 3em; }
.dg-cap b { color: var(--guia-deep); font-weight: 800; }
.dg-stage { min-height: 64px; }
.vj-tok.dg-hi { animation: dg-pulse .6s ease; }
.vj-tok.dg-dim { opacity: .38; transition: opacity .35s ease; }
@keyframes dg-pulse { 0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } }
.vj-tok.dg-cancel { position: relative; animation: dg-cancel-fade .62s ease forwards; }
.vj-tok.dg-cancel::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2.5px; background: #a01243; transform: scaleX(0); transform-origin: left center; animation: dg-strike .3s ease .08s forwards; }
@keyframes dg-strike { to { transform: scaleX(1); } }
@keyframes dg-cancel-fade { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { opacity: .18; transform: scale(.82); } }
.dg-in { animation: dg-fadein .42s ease; }
@keyframes dg-fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* La fila botón+contador+botón era el min-content más ancho de la guía: a 360px
   forzaba el track de main y ensanchaba toda la página. En estrecho envuelve:
   botones arriba, contador en su propia línea. */
.dg-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.dg-count { font-size: 15px; font-weight: 700; color: var(--guia-muted); min-width: 52px; text-align: center; }
@media (max-width: 540px) { .dg-count { order: 3; width: 100%; } }
.dg-nav.primary { background: var(--guia-orange); color: #fff; }
.dg-nav:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

/* ===== Enlace al Dojo (espacio aparte de práctica) ===== */
.dsp-dojo-link { margin: 16px 0 0; text-align: center; }

/* ===== Impresión: oculta los interactivos ===== */
@media print {
  .dsp-bz, .dsp-dpj, .dsp-viaje, .dsp-desg, .dsp-dojo-link { display: none !important; }
}