/* Generado por tools/build-pages.js a partir de app/assets/reactiva-shell-v42.css */
.nav-item.active{color:var(--orange)}
.how-panel.open{display:block}
.play-shell.active{display:block}
.memory-cell.active{background:var(--purple);box-shadow:0 0 0 3px rgba(119,88,232,.16)}
.memory-cell.selected{background:#9ad3b4}
.results.active{display:block}
/* v65 · Dígitos ocultos */
.visual-hidden-example{
  width:100%;
  display:flex;
  justify-content:center;
  padding:8px 0 2px;
}
.visual-hidden-board{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:220px;
  padding:16px 20px;
  border-radius:18px;
  border:1px solid rgba(128,108,255,.28);
  background:rgba(7,7,20,.42);
}
.visual-hidden-row{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:8px;
  color:#fff;
}
.visual-hidden-op{
  color:#806cff;
  font-size:24px;
  font-weight:900;
  text-align:center;
}
.visual-hidden-number{
  display:grid;
  grid-template-columns:repeat(var(--visual-hidden-digits),42px);
  gap:7px;
}
.visual-hidden-number span{
  display:grid;
  place-items:center;
  min-width:42px;
  min-height:46px;
  color:#fff;
  font-size:24px;
  font-weight:950;
}
.visual-hidden-number .is-hole{
  color:#806cff;
  border:2px solid rgba(128,108,255,.8);
  border-radius:9px;
  background:rgba(128,108,255,.12);
}
.visual-hidden-rule{
  width:100%;
  height:2px;
  margin:2px 0 4px;
  background:rgba(138,130,174,.42);
}
.hidden-row.is-partial .hidden-digit-cell.is-hole{
  font-size:30px;
  color:#806cff;
}
.hidden-digit-cell.is-hole{
  border-color:rgba(128,108,255,.74);
  color:#806cff;
  background:rgba(128,108,255,.1);
  box-shadow:0 12px 24px rgba(23,32,51,.08);
  cursor:pointer;
}
.hidden-digit-cell.is-hole.is-active{
  border-color:#ffd336;
  color:#ffd336;
  background:rgba(255,211,54,.1);
  box-shadow:0 0 0 4px rgba(255,211,54,.13);
}
.hidden-digit-cell.is-hole.is-filled{
  color:#24e788;
  border-color:rgba(36,231,136,.72);
  background:rgba(36,231,136,.11);
}
.hidden-digit-cell.is-hole.is-correct{
  color:#16b86f;
  border-color:rgba(36,231,136,.85);
  background:rgba(36,231,136,.14);
  box-shadow:0 0 0 4px rgba(36,231,136,.12);
}
.hidden-digit-cell.is-hole.is-wrong{
  color:#df3f46;
  border-color:rgba(223,63,70,.85);
  background:rgba(223,63,70,.1);
  box-shadow:0 0 0 4px rgba(223,63,70,.1);
}
.hidden-digit-cell.is-hole.is-correct,
.hidden-digit-cell.is-hole.is-wrong{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  gap:1px;
  padding:4px 2px 3px;
}
.hidden-digit-cell.is-hole.is-correct span,
.hidden-digit-cell.is-hole.is-wrong span{
  display:grid;
  place-items:center;
  line-height:1;
}
.hidden-digit-cell.is-hole.is-correct small,
.hidden-digit-cell.is-hole.is-wrong small{
  display:block;
  color:currentColor;
  font-size:11px;
  font-weight:950;
  line-height:1;
}
/* v72 · Patrón de números */
.visual-number-pattern-example{
  width:100%;
  display:grid;
  justify-items:center;
  gap:14px;
}
.visual-number-pattern-label{
  color:#7f5df4;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.visual-number-pattern-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.visual-number-pattern-row span{
  min-width:48px;
  min-height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(232,225,216,.95);
  color:#172033;
  font-size:24px;
  font-weight:950;
  box-shadow:0 10px 22px rgba(23,32,51,.07);
}
.visual-number-pattern-row .is-answer{
  background:#fff7de;
  border-color:rgba(239,200,91,.75);
  color:#6d5200;
  box-shadow:0 0 0 3px rgba(239,200,91,.16);
}
.visual-number-pattern-rule{
  padding:7px 12px;
  border-radius:999px;
  background:#f4eee6;
  color:#707789;
  font-size:13px;
  font-weight:900;
}
/* v73 · Patrón de puntos */
.visual-point-pattern-example{
  width:100%;
  display:grid;
  justify-items:center;
  gap:14px;
}
.visual-point-pattern-label{
  color:#7f5df4;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.visual-point-pattern-grid{
  display:grid;
  grid-template-columns:repeat(var(--point-example-size),42px);
  gap:10px;
}
.visual-point-pattern-grid span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4eee6;
  border:1px solid #e2d8cf;
  color:#fff;
  font-size:16px;
  font-weight:950;
}
.visual-point-pattern-grid span.is-active{
  background:#806cff;
  border-color:#806cff;
  box-shadow:0 0 0 4px rgba(128,108,255,.16),0 12px 24px rgba(128,108,255,.25);
}
/* pattern-transformation visual example */
.ptex-example{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.ptex-grid-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.ptex-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-text-faint,#999);
}
.ptex-grid{
  display:grid;
  grid-template-columns:repeat(var(--ptex-size,3),1fr);
  gap:5px;
}
.ptex-grid span{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--color-bg-subtle,#e8e8ea);
  border:2px solid transparent;
}
.ptex-grid span.ptex-on{
  background:#806cff;
  border-color:#806cff;
  box-shadow:0 0 0 3px rgba(128,108,255,.18);
}
.ptex-arrow{
  font-size:24px;
  color:#806cff;
  margin-top:14px;
}
.point-cell.is-active,
.point-cell.is-visited{
  background:var(--point-color,#806cff);
  box-shadow:0 0 0 5px rgba(128,108,255,.16),0 15px 28px rgba(128,108,255,.25);
}
.point-cell.is-correct{
  background:#3dffaa;
  box-shadow:0 0 0 5px rgba(61,255,170,.2),0 15px 28px rgba(61,255,170,.3);
}
/* v72 · N-Back de Cartas */
.visual-nback-example{
  display:grid;
  gap:18px;
  justify-items:center;
  padding:8px 0;
}
.visual-nback-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.visual-nback-row span{
  width:70px;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(180deg,#fffaf0,#f3eadf);
  border:3px solid color-mix(in srgb,var(--c) 70%,#fff 30%);
  box-shadow:0 12px 22px rgba(26,31,49,.14), inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--c);
  transform:rotate(-4deg);
}
.visual-nback-row span:nth-of-type(2){transform:translateY(-8px) rotate(3deg)}
.visual-nback-row span.active{
  transform:translateY(2px) rotate(7deg) scale(1.08);
  box-shadow:0 0 0 5px rgba(122,99,239,.16),0 16px 28px rgba(26,31,49,.16);
}
.visual-nback-row b{
  font-size:42px;
  line-height:1;
  font-weight:950;
}
.visual-nback-row i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#cfc6bc;
}
.visual-nback-arrow{
  color:#7a63ef;
  border:1px solid rgba(122,99,239,.32);
  background:rgba(122,99,239,.08);
  border-radius:999px;
  padding:7px 15px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media(max-width:560px){.visual-nback-row span{
    width:58px;
    height:76px;
  }
.visual-nback-row b{
    font-size:34px;
  }}
.cross-cell.is-hole{
  border:2px solid rgba(122,99,239,.65);
  background:#f7f4ff;
  color:#7a63ef;
  cursor:pointer;
}
.cross-cell.is-active{
  border-color:#ef7041;
  color:#ef7041;
  box-shadow:0 0 0 5px rgba(239,112,65,.14);
}
.rc-progress span.active{
  background:#7a63ef;
  box-shadow:0 0 0 4px rgba(122,99,239,.14);
}
.visual-response-cross-example{
  position:relative;
  min-height:178px;
  width:min(100%,430px);
  display:grid;
  gap:10px;
  justify-items:center;
  align-content:center;
  overflow:hidden;
}
.visual-response-cross-arc{
  position:absolute;
  inset:8px 20px auto 20px;
  height:70px;
  pointer-events:none;
}
.visual-response-cross-arc span{
  position:absolute;
  width:13px;
  height:13px;
  border-radius:999px;
  background:linear-gradient(180deg,#7a63ef,#2f8ef5);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 16px rgba(47,46,120,.34);
}
.visual-response-cross-arc span:nth-child(1){left:18%;top:46px}
.visual-response-cross-arc span:nth-child(2){left:34%;top:35px}
.visual-response-cross-arc span:nth-child(3){left:50%;top:24px}
.visual-response-cross-arc span:nth-child(4){left:66%;top:13px}
.visual-response-cross-arc i{
  position:absolute;
  right:15%;
  top:6px;
  width:82px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(90deg,#2f8ef5,#7a63ef);
  transform:rotate(-22deg);
  box-shadow:0 10px 18px rgba(47,46,120,.28);
}
.visual-response-cross-arc i::after{
  content:'';
  position:absolute;
  right:-11px;
  top:-11px;
  width:0;
  height:0;
  border-top:19px solid transparent;
  border-bottom:19px solid transparent;
  border-left:28px solid #7a63ef;
}
.visual-response-cross-hands{
  position:relative;
  z-index:1;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:10px;
  padding-top:42px;
}
.visual-response-cross-hands span{
  position:relative;
  width:78px;
  height:74px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:transparent;
  text-indent:-999px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 20px 28px rgba(20,16,55,.18), inset 0 12px 14px rgba(255,255,255,.36);
}
.visual-response-cross-hands::before,
.visual-response-cross-hands::after,
.visual-response-cross-hands span::before{
  text-indent:0;
  display:grid;
  place-items:center;
  font-weight:950;
  text-shadow:0 4px 8px rgba(40,20,20,.18);
}
.visual-response-cross-hands::before{
  content:'3';
  width:86px;
  height:82px;
  border-radius:22px;
  background:linear-gradient(180deg,#7a63ef,#2f8ef5);
  border:2px solid rgba(255,255,255,.86);
  color:#fff;
  font-size:46px;
  box-shadow:0 22px 34px rgba(39,42,130,.24), inset 0 14px 16px rgba(255,255,255,.38);
}
.visual-response-cross-hands span:first-child{
  background:linear-gradient(180deg,#22c7e8,#38efcd);
}
.visual-response-cross-hands span:first-child::before{
  content:'L';
  color:#fff;
  font-size:34px;
}
.visual-response-cross-hands span:nth-child(2){
  background:linear-gradient(180deg,#ff5ca8,#ff8b45);
}
.visual-response-cross-hands span:nth-child(2)::before{
  content:'R';
  color:#fff;
  font-size:34px;
}
.visual-response-cross-hands::after{
  content:'izquierda';
  position:absolute;
  left:50%;
  bottom:-30px;
  transform:translateX(-50%);
  color:#f05aa6;
  font-size:18px;
}
.visual-color-calc-example,
.visual-color-seq-example,
.visual-rule-switch-example,
.visual-symbol-seq-example{
  position:relative;
  width:min(100%,440px);
  min-height:172px;
  margin:0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.visual-color-calc-map{
  position:absolute;
  top:6px;
  display:flex;
  gap:10px;
}
.visual-color-calc-map span{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  font-weight:950;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c),#fff 26%),var(--c));
  box-shadow:0 14px 24px rgba(32,24,80,.18), inset 0 8px 12px rgba(255,255,255,.34);
}
.visual-color-calc-card{
  margin-top:32px;
  min-width:270px;
  min-height:96px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c),#fff 28%),var(--c));
  border:2px solid rgba(255,255,255,.72);
  box-shadow:0 22px 40px rgba(36,26,90,.2), inset 0 16px 18px rgba(255,255,255,.25);
}
.visual-color-calc-card b{
  font-size:46px;
  font-weight:950;
  text-shadow:0 5px 10px rgba(30,20,40,.2);
}
.visual-color-calc-card i,
.visual-color-calc-card em{
  font-style:normal;
  font-size:30px;
  font-weight:950;
}
.visual-seq-glow{
  position:absolute;
  width:320px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(122,99,239,.16),transparent 70%);
  filter:blur(8px);
}
.visual-color-seq-row,
.visual-symbol-seq-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.visual-color-seq-row span,
.visual-symbol-seq-row span{
  width:68px;
  height:68px;
  border-radius:22px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  font-weight:950;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,#7a63ef),#fff 26%),var(--c,#7a63ef));
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 18px 28px rgba(28,22,74,.18), inset 0 12px 14px rgba(255,255,255,.32);
}
.visual-symbol-seq-row span{
  --c:#7a63ef;
  background:linear-gradient(180deg,#8f73ff,#3b82f6);
  font-size:34px;
}
.visual-color-seq-row span.active,
.visual-symbol-seq-row span.active{
  box-shadow:0 0 0 5px rgba(255,216,65,.46),0 20px 30px rgba(28,22,74,.22), inset 0 12px 14px rgba(255,255,255,.32);
}
.visual-color-seq-slots,
.visual-symbol-seq-answer{
  position:absolute;
  bottom:18px;
  display:flex;
  gap:12px;
}
.visual-color-seq-slots i,
.visual-symbol-seq-answer i{
  width:48px;
  height:16px;
  border-radius:999px;
  background:#e7dfd4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.visual-rule-switch-track{
  display:flex;
  align-items:center;
  gap:14px;
}
.visual-rule-switch-track span{
  width:118px;
  min-height:92px;
  border-radius:24px;
  display:grid;
  place-items:center;
  padding:14px 10px;
  color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c),#fff 28%),var(--c));
  border:2px solid rgba(255,255,255,.72);
  box-shadow:0 18px 32px rgba(28,22,74,.18), inset 0 13px 15px rgba(255,255,255,.28);
}
.visual-rule-switch-track span.active{
  transform:translateY(-8px);
  box-shadow:0 0 0 5px rgba(122,99,239,.20),0 22px 36px rgba(28,22,74,.22), inset 0 13px 15px rgba(255,255,255,.28);
}
.visual-rule-switch-track small{
  letter-spacing:.16em;
  font-size:10px;
  font-weight:950;
}
.visual-rule-switch-track b{
  font-size:22px;
  font-weight:950;
}
.visual-rule-switch-cue{
  position:absolute;
  bottom:12px;
  color:#7b8496;
  font-weight:850;
}
@media(max-width:560px){.visual-rule-switch-track span{
    width:96px;
  }}
.visual-cross-example{
  width:100%;
  display:grid;
  justify-items:center;
  gap:12px;
}
.visual-cross-label{
  color:#7f5df4;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.visual-cross-grid{
  display:grid;
  grid-template-columns:repeat(5, 38px);
  gap:6px;
  align-items:center;
  justify-content:center;
}
.visual-cross-grid b,
.visual-cross-grid i,
.visual-cross-grid span{
  min-height:36px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:950;
}
.visual-cross-grid b{
  border-radius:9px;
  border:1px solid rgba(232,225,216,.95);
  background:#fff;
  color:#172033;
}
.visual-cross-grid b.hole{
  border:2px solid #7a63ef;
  background:#f7f4ff;
  color:#2ee694;
}
.visual-cross-grid i{
  color:#687189;
}
.visual-cross-note{
  width:min(100%,360px);
  color:#687189;
  font-size:13px;
  font-weight:850;
  text-align:center;
}
.profile-settings-modal.open{
  display:flex;
}
.daily-checkin-modal.open{
  display:flex;
}
.checkin-face.active{
  border-color:var(--face-color);
  background:color-mix(in srgb, var(--face-color) 26%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--face-color) 22%, transparent);
}
.profile-option.active,
.profile-toggle.active{
  border-color:#7a63ef;
  background:#f7f4ff;
  color:#6b4be8;
  box-shadow:0 0 0 3px rgba(122,99,239,.12);
}
.sharing-mode-card.active{border-color:#7a63ef;background:#f7f4ff;box-shadow:0 0 0 3px rgba(122,99,239,.12)}
.sharing-share-pill.on{background:#fff;color:#7a63ef;border:1.5px solid #7a63ef}
.peer-cmp-card.theirs.active{border-color:#7a63ef;background:#f7f4ff;box-shadow:0 0 0 2px rgba(122,99,239,.15)}
.peer-cmp-pill.on{background:#efeaff;color:#7a63ef}
.peer-pill-btn.on{background:#7a63ef;color:#fff}
.visual-scramble-example{
  display:grid;
  gap:18px;
  justify-items:center;
}
.visual-scramble-label{
  color:#ffd84f;
  font-size:12px;
  font-weight:950;
  letter-spacing:2px;
  text-transform:uppercase;
}
.visual-scramble-row{
  display:flex;
  gap:12px;
}
.visual-puzzle-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.visual-puzzle-row span{
  min-width:48px;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#241f3d;
  border:2px solid #ffd84f;
  color:#ffd84f;
  font-size:15px;
  font-weight:950;
  text-transform:uppercase;
}
.visual-puzzle-row span.active{
  border-color:#2ee694;
  color:#2ee694;
}
.visual-scramble-row span{
  width:48px;
  height:54px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#241f3d;
  border:2px solid #ffd84f;
  color:#ffd84f;
  font-size:28px;
  font-weight:950;
}
.visual-scramble-row span.active{
  border-color:#2ee694;
  color:#2ee694;
}
.visual-scramble-answer{
  color:#fff;
  font-weight:850;
}
/* v69 · Reactiva claro para previews de Dígitos ocultos y Doble Tarea */
.visual-hidden-board,
.visual-dual-panel{
  border:1px solid rgba(232,225,216,.95)!important;
  background:linear-gradient(180deg,#fffdfb,#f6f1ea)!important;
  box-shadow:0 14px 30px rgba(23,32,51,.08)!important;
}
.visual-hidden-board:before,
.visual-dual-label{
  color:#7d8493!important;
}
.visual-dual-sequence span,
.visual-hidden-number span{
  text-shadow:none!important;
}
.visual-dual-sequence i{
  background:#d8d0c8!important;
}
.visual-hidden-rule{
  background:#e2dacf!important;
}
.visual-hidden-number span{
  color:#172033!important;
}
.visual-hidden-number .is-hole{
  color:#806cff!important;
  background:#f4efff!important;
  border-color:rgba(128,108,255,.7)!important;
}
.visual-hidden-row.is-result .visual-hidden-number span,
.visual-dual-count{
  color:#2f8fe8!important;
}
/* v68 · Doble tarea */
.visual-dual-example{
  width:100%;
  display:flex;
  justify-content:center;
}
.visual-dual-panel{
  width:min(100%,360px);
  padding:22px 20px;
  border:1px solid rgba(128,108,255,.34);
  border-radius:18px;
  background:linear-gradient(180deg,#11111f,#090913);
  box-shadow:0 18px 38px rgba(23,32,51,.18);
  text-align:center;
}
.visual-dual-label{
  color:#8f88b8;
  font-size:10px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.visual-dual-sequence{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:14px 0 24px;
}
.visual-dual-sequence span{
  color:#ff8b4d;
  font-size:32px;
  font-weight:950;
  text-shadow:0 0 18px rgba(255,139,77,.45);
}
.visual-dual-sequence i{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#3c3854;
}
.visual-dual-count{
  margin-top:12px;
  color:#4ca3ff;
  font-size:22px;
  font-weight:950;
}
/* v67 · Preview de Dígitos ocultos con estética Reactiva */
.visual-hidden-example{
  padding:10px 0 4px;
}
.visual-hidden-board{
  position:relative;
  min-width:260px;
  padding:22px 24px 24px;
  border-radius:18px;
  border:1px solid rgba(128,108,255,.34);
  background:
    radial-gradient(circle at 18% 18%, rgba(128,108,255,.18), transparent 34%),
    linear-gradient(180deg,#11111f,#090913);
  box-shadow:0 18px 38px rgba(23,32,51,.18);
}
.visual-hidden-board:before{
  content:"Dígitos ocultos";
  align-self:stretch;
  margin:0 0 12px;
  color:#ffd336;
  font-size:10px;
  font-weight:950;
  letter-spacing:.18em;
  text-align:left;
  text-transform:uppercase;
}
.visual-hidden-row{
  grid-template-columns:30px 1fr;
}
.visual-hidden-op{
  color:#806cff;
  font-size:24px;
}
.visual-hidden-number{
  grid-template-columns:repeat(var(--visual-hidden-digits),38px);
  gap:8px;
}
.visual-hidden-number span{
  min-width:38px;
  min-height:42px;
  color:#fff8ea;
  font-size:23px;
  text-shadow:0 2px 0 rgba(239,112,65,.35);
}
.visual-hidden-number .is-hole{
  color:#8f7bff;
  border:2px solid rgba(128,108,255,.95);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(128,108,255,.2),rgba(128,108,255,.08));
  text-shadow:none;
}
.visual-hidden-row.is-result .visual-hidden-number span{
  color:#24e788;
  text-shadow:none;
}
.visual-hidden-rule{
  width:100%;
  max-width:182px;
  height:2px;
  margin:4px 0 6px;
  background:rgba(138,130,174,.58);
}
.advanced-panel.open{
  display:block;
}
.settings-sheet.open{
  display:flex;
}
.ranking-sheet.open{
  display:grid;
}
.config-chip.active{
  background:#231d48;
  color:#a995ff;
  border-color:#6f58e9;
  box-shadow:0 0 0 1px rgba(111,88,233,.24), inset 0 0 0 1px rgba(255,255,255,.03);
}
.info-preview-card{
  margin-top:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:24px 20px;
}
.info-preview-title{
  color:#8d8a98;
  font-size:16px;
  font-weight:850;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.memory-example{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  justify-items:center;
  margin-bottom:18px;
}
.example-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:min(118px,38vw);
  aspect-ratio:1;
  padding:10px;
  border-radius:22px;
  background:#f4f0ea;
  border:1px solid #e6ded4;
}
.example-cell{
  border-radius:50%;
  background:#ded8cf;
}
.example-cell.on{
  background:#7a63ef;
  box-shadow:0 0 0 3px rgba(122,99,239,.16);
}
.example-caption{
  color:#8d8a98;
  font-size:13px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.18em;
  text-align:center;
  margin-bottom:8px;
}
.example-arrow{
  color:#7a63ef;
  font-size:38px;
  font-weight:900;
}
.example-cell.on-rotated{
  background:#3f9b64;
  box-shadow:0 0 0 3px rgba(63,155,100,.18);
}
.rotation-example-arrow{
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
}
.info-preview-text{
  color:var(--muted);
  font-size:21px;
  line-height:1.55;
  text-align:center;
  max-width:560px;
  margin:0 auto;
}
@media(max-width:560px){.memory-example{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }
.example-grid{
    padding:8px;
    gap:5px;
    border-radius:16px;
    width:min(96px,30vw);
  }
.rotation-example-arrow{
    white-space:normal;
    text-align:center;
    max-width:110px;
    font-size:14px;
  }
.info-preview-text{
    font-size:18px;
  }}
/* v69 · Ciudad de Memoria */
.visual-city-example{
  width:100%;
  display:grid;
  place-items:center;
}
.visual-city-grid{
  display:grid;
  grid-template-columns:repeat(3,70px);
  gap:8px;
  padding:18px;
  border-radius:24px;
  background:#f8f4ee;
  border:1px solid rgba(122,99,239,.2);
}
.visual-city-grid span{
  height:70px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(232,225,216,.95);
}
.visual-city-grid span.route{
  border-color:#22c782;
  box-shadow:0 0 0 2px rgba(34,199,130,.14);
}
.visual-city-grid b{
  font-size:26px;
  line-height:1;
}
.visual-city-grid small{
  color:#687189;
  font-size:10px;
  font-weight:900;
}
.city-choice-grid button.active{
  background:#e8fff3;
  border-color:#22c782;
  color:#138f5d;
}
.city-choice-grid button.is-correct{
  background:#e8fff3;
  border-color:#22c782;
  color:#138f5d;
  box-shadow:0 0 0 3px rgba(34,199,130,.12);
}
@media(max-width:620px){.visual-city-grid{
    grid-template-columns:repeat(3,56px);
  }
.visual-city-grid span{
    height:56px;
  }}
.global-toggle.active{
  border-color:rgba(34,199,130,.58);
  background:#effdf6;
}
.global-toggle.active b{
  color:#138f5d;
}
.visual-reverse-word-example{
  width:100%;
  display:grid;
  justify-items:center;
  gap:16px;
  padding:10px 0;
}
.reverse-example-label{
  color:#d6b545;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.reverse-example-word{
  color:#172033;
  font-size:44px;
  font-weight:950;
  letter-spacing:.08em;
}
.reverse-example-answer{
  color:#22c782;
  font-size:28px;
  font-weight:950;
  letter-spacing:.22em;
}
/* v67 · Seguir instrucciones espaciales */
.visual-spatial-example{
  width:100%;
  display:grid;
  place-items:center;
}
.visual-spatial-grid{
  display:grid;
  grid-template-columns:repeat(3,72px);
  gap:8px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(122,99,239,.25);
  background:#f8f4ee;
}
.visual-spatial-grid span{
  height:72px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(232,225,216,.95);
  display:grid;
  place-items:center;
  color:#172033;
}
.visual-spatial-grid b{
  font-size:28px;
}
.visual-spatial-grid small{
  color:#0f9b63;
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.visual-spatial-grid span.active{
  border-color:#22c782;
  box-shadow:0 0 0 2px rgba(34,199,130,.16);
}
@media(max-width:540px){.visual-spatial-grid{
    grid-template-columns:repeat(3,56px);
  }
.visual-spatial-grid span{
    height:56px;
  }}
.switch.active{
  background:#5849d8;
}
.switch.active .switch-knob{
  transform:translateX(36px);
  background:#fff;
}
.calc-vertical .answer-slot.active{
  outline:3px solid rgba(119,88,232,.26);
  background:#f7f4ff;
}
.be-tile{
  width:64px;
  height:64px;
  border-radius:12px;
  background:#faf7f2;
  border:2px solid var(--line,#e8e1d8);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.be-tile svg{ width:100%; height:100%; display:block; }
.be-mirror-line{
  width:2px;
  align-self:stretch;
  margin:0 10px;
  background:repeating-linear-gradient(to bottom, var(--purple,#7758e8) 0 6px, transparent 6px 12px);
}
.be-example{
  display:flex;
  justify-content:center;
  width:100%;
}
.be-example-card{
  display:flex;
  align-items:center;
}
.be-tile-example{ width:60px; height:60px; }
/* Burbuja tipo popover (con su triangulito apuntando a la caja), no una
   etiqueta plana dentro del recuadro -- así se ve como una pista externa
   que puede desaparecer del todo, no como parte fija del propio cuadro. */
.dr-rule-bubble{
  position:relative;
  max-width:80%;
  background:#e4dfd6;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:10px 16px;
  border-radius:14px;
}
.dr-rule-bubble:after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}
.dr-rule-bubble-top:after{
  bottom:-7px;
  border-top:8px solid #e4dfd6;
}
.dr-rule-bubble-bottom:after{
  top:-7px;
  border-bottom:8px solid #e4dfd6;
}
.dr-example{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:240px;
  margin:0 auto;
  padding:6px 0 2px;
}
.dr-example-box{
  width:100%;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.07);
  padding:12px 14px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dr-example-active{
  background:#fff;
  box-shadow:0 8px 20px rgba(239,112,65,.16);
}
.dr-example-stimulus{
  font-size:30px;
  font-weight:850;
  color:var(--orange,#ef7041);
}
.pause-overlay.open{
  display:flex;
}
.pause-how.open{
  display:block;
}
.results-table-wrap.open .accordion-chevron{
  transform:rotate(180deg);
}
.results-table-wrap.open .results-table-scroll{
  display:block;
}
.results-table-wrap.open .accordion-toggle-btn .accordion-chevron{
  transform:rotate(180deg)!important;
}
.results-table-wrap.open .results-table-scroll{
  display:block!important;
}
.filter-toggle-btn.active{background:#7a63ef;color:#fff}
.filter-toggle-btn:not(.active) .filter-badge{background:#7a63ef;color:#fff}
.adv-filter-modal.open{display:flex}
.adv-chip.active{background:#7a63ef;border-color:#7a63ef;color:#fff}
.domain-tab.active{
  background:var(--orange);
  color:#fff;
}
.domain-tab.active b{
  background:rgba(255,255,255,.22);
  color:#fff;
}
.favorite-btn.active{
  background:#fff7d8;
  border-color:rgba(239,200,91,.7);
  color:#efb93f;
}
.nucleus-btn.active{
  background:rgba(124,106,247,.12);
  border-color:rgba(124,106,247,.5);
  color:#7c6af7;
}
.detail-fav-hero.active{
  background:#fff7d8;
  border-color:rgba(239,200,91,.7);
  color:#efb93f;
}
.detail-nuc-hero.active{
  background:rgba(124,106,247,.12);
  border-color:rgba(124,106,247,.5);
  color:#7c6af7;
}
.quick-time-btn.active{
  background:#ff8c00;
  border-color:#ff8c00;
  color:#fff;
}
.app-view.active{
  display:block;
}
.today-state-face.active{
  border-color:var(--face-color);
  background:color-mix(in srgb, var(--face-color) 28%, #fff);
}
.brain-pace-perm-state.on{background:#efeaff;color:#7a63ef}
.brain-tab-panel.active{
  display:block;
}
.card-action-btn.is-active{
  background:#7a63ef;
  color:#fff;
}
.simon-pad.active{
  transform:scale(1.055);
  filter:saturate(1.35) brightness(1.08);
  box-shadow:0 0 0 5px rgba(119,88,232,.16), 0 18px 30px rgba(23,32,51,.12);
}
/* v16 · Ejemplos visuales comunes */
.info-preview-card{
  margin-top:26px!important;
  margin-bottom:30px!important;
}
.info-preview-card + .how-btn{
  margin-top:0!important;
}
.visual-stroop-example,
.visual-calc-example,
.visual-verbal-example,
.visual-simon-example,
.visual-bubble-example{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:8px 0 4px;
}
.visual-bubble-example{
  position:relative;
  min-height:120px;
}
.visual-bubble-example .sc-pill{
  position:relative;
  width:96px;
  height:96px;
  animation:none;
  background-color:#8ee6c9;
}
.visual-bubble-example .sc-pill-label{
  font-size:19px;
}
.visual-stroop-word{
  font-size:54px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.04em;
}
.visual-stroop-arrow{
  color:#7a63ef;
  font-size:34px;
  font-weight:850;
}
.visual-choice-chip{
  border-radius:999px;
  background:#f2eee8;
  color:var(--text);
  font-size:24px;
  font-weight:850;
  padding:14px 26px;
}
.visual-calc-formula{
  width:100%;
  max-width:520px;
  border-radius:24px;
  background:#f7f2eb;
  border:1px solid #e8dfd6;
  color:var(--text);
  font-size:50px;
  line-height:1.05;
  font-weight:850;
  letter-spacing:-.04em;
  text-align:center;
  padding:32px 18px;
  white-space:nowrap;
  overflow:hidden;
}
.visual-calc-keypad{
  display:flex;
  gap:10px;
}
.visual-calc-keypad span{
  width:58px;
  height:58px;
  border-radius:16px;
  background:#11111f;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:850;
}
.visual-verbal-prompt{
  width:100%;
  max-width:560px;
  border-radius:24px;
  background:#f7f2eb;
  border:1px solid #e8dfd6;
  color:var(--text);
  font-size:26px;
  line-height:1.35;
  font-weight:800;
  text-align:center;
  padding:28px 20px;
}
.visual-intruder-example{
  width:100%;
  display:grid;
  gap:12px;
}
.visual-intruder-label{
  color:#7d86a2;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.visual-intruder-list{
  display:grid;
  gap:8px;
}
.visual-intruder-list span{
  display:block;
  border:1px solid rgba(104,113,137,.2);
  border-radius:12px;
  padding:12px 16px;
  color:#172033;
  background:#fbfaf8;
  font-weight:900;
  text-transform:none;
}
.visual-intruder-list span.is-intruder{
  border-color:#ef7041;
  background:rgba(239,112,65,.14);
  color:#ef7041;
}
.visual-cyl-example{
  display:grid;
  gap:18px;
  width:100%;
}
.visual-cyl-label{
  color:#7a63ef;
  font-size:12px;
  font-weight:950;
  letter-spacing:2px;
  text-transform:uppercase;
}
.visual-cyl-letters,
.visual-cyl-numbers{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.visual-cyl-letters span,
.visual-cyl-numbers span{
  min-width:32px;
  min-height:32px;
  border-radius:8px;
  border:1px solid #7a63ef;
  background:#172033;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:950;
}
.visual-cyl-numbers span{
  color:#ffd84f;
  border-color:#ffd84f;
}
.visual-cyl-numbers b{
  color:#ffd84f;
}
.analog-meta{
  margin:0;
  color:#7d86a2;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.intruder-stage{
  width:100%;
  display:grid;
  place-items:center;
  gap:12px;
  text-align:center;
}
.intruder-category{
  font-size:28px;
  line-height:1.2;
  font-weight:900;
  color:#172033;
}
.intruder-category b{
  color:#ef7041;
}
.intruder-stage p{
  margin:0;
  color:#687189;
}
.cyl-number-bank button.is-result{
  color:#0aa777;
  background:#e8fbf2;
  border-color:#2fd48a;
}
.cyl-number-bank button.is-result.is-selected{
  color:#fff;
  background:#0aa777;
  border-color:#0aa777;
}
.cyl-ops button.active{
  color:#fff;
  background:#7a63ef;
}
.visual-choice-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.visual-choice-row span{
  border-radius:999px;
  background:#f2eee8;
  color:var(--muted);
  font-size:18px;
  font-weight:850;
  padding:12px 18px;
}
.visual-choice-row span.selected{
  background:#e5f7ec;
  color:#167647;
}
.visual-simon-pads{
  width:min(100%,260px);
  display:grid;
  gap:12px;
}
.visual-simon-count-4{
  grid-template-columns:repeat(2,1fr);
}
.visual-simon-pads span{
  aspect-ratio:1;
  border-radius:22px;
  background:#ece7dd;
  display:grid;
  place-items:center;
  color:rgba(23,32,51,.38);
  font-size:20px;
  font-weight:850;
}
.visual-simon-pads span.on{
  background:#7a63ef;
  color:#fff;
  box-shadow:0 0 0 4px rgba(122,99,239,.12);
}
.visual-simon-sequence{
  color:var(--muted);
  font-size:18px;
  font-weight:850;
  letter-spacing:.08em;
}
@media(max-width:540px){.info-preview-card{
    margin-top:22px!important;
    margin-bottom:26px!important;
  }
.visual-stroop-word{
    font-size:44px;
  }
.visual-calc-formula{
    font-size:38px;
    padding:28px 12px;
  }
.visual-verbal-prompt{
    font-size:22px;
  }}
.simon-center-number.active{
  transform:scale(1.06);
  background:#7a63ef;
  color:#fff;
}
.info-preview-card{
  margin-bottom:34px!important;
}
.how-panel.open{
  margin-bottom:38px!important;
}
.results-table-wrap.open .accordion-chevron.ui-icon{
  transform:rotate(180deg)!important;
}
.pause-overlay.open{
  display:block!important;
}
.pause-how.open{
  display:block!important;
}
/* v21 · fix funcional menú pausa */
.pause-overlay.open{
  display:block!important;
}
.span-current.active{
  transform:scale(1.045);
  background:#7a63ef;
  color:#fff;
}
.free-current-token.active{
  transform:scale(1.045);
  background:#fff;
  color:var(--free-token);
}
.visual-span-example{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:6px 0 2px;
}
.visual-span-row{
  display:flex;
  gap:8px;
  justify-content:center;
}
.visual-span-row span{
  width:48px;
  height:48px;
  border-radius:16px;
  background:#f7f2eb;
  border:1px solid #e6ded4;
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:850;
}
.visual-span-row.answer span{
  background:#e5f7ec;
  color:#167647;
}
.visual-span-mode{
  color:var(--muted);
  font-size:14px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@media(max-width:540px){.visual-span-row span{
    width:42px;
    height:42px;
    border-radius:14px;
    font-size:21px;
  }}
.visual-cuerpo-assets{width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center;}
.visual-cuerpo-card{width:100%;border-radius:24px;background:linear-gradient(135deg,#f7f2eb,#fff7ec);border:1px solid rgba(232,225,216,.95);box-shadow:0 14px 30px rgba(23,32,51,.08);padding:16px 16px 18px;}
.visual-cuerpo-head{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--text);}
.visual-cuerpo-head span{border:1px solid rgba(23,32,51,.12);background:rgba(255,255,255,.58);border-radius:999px;padding:6px 9px;}
.visual-cuerpo-head span:last-child{color:#7a63ef;border-color:rgba(122,99,239,.34);background:rgba(122,99,239,.08);}
.visual-cuerpo-title{margin:16px 0 10px;text-align:center;color:rgba(111,118,132,.72);font-size:10px;font-weight:900;letter-spacing:.24em;}
.visual-cuerpo-pair{display:flex;justify-content:center;align-items:center;gap:38px;padding:8px 0;}
.visual-cuerpo-pair img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(23,32,51,.13));}
.visual-cuerpo-pair-card img{width:180px;height:auto;border-radius:16px;box-shadow:0 8px 16px rgba(23,32,51,.13);}
.visual-cuerpo-options{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.visual-cuerpo-options img{width:54px;height:54px;object-fit:contain;margin:auto;border-radius:16px;background:#f2eee8;border:1px solid rgba(232,225,216,.95);box-shadow:0 8px 16px rgba(23,32,51,.07);padding:5px;}
/* v48 · Corrección iconos blancos/transparencias */
.rb-stage-assets .rb-object-main,
.rb-options-assets .rb-object-option,
.visual-cuerpo-pair img,
.visual-cuerpo-options img{
  image-rendering:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.simbo-feedback.is-correct{
  color:#138f5d;
}
.visual-simbo-example{
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.visual-simbo-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.visual-simbo-card{
  min-height:150px;
  border-radius:26px;
  border:1px solid rgba(232,225,216,.98);
  background:linear-gradient(145deg,#fff,#f7f2eb);
  box-shadow:0 12px 26px rgba(23,32,51,.06);
  position:relative;
  overflow:hidden;
}
.visual-simbo-card span{
  position:absolute;
  font-size:34px;
  line-height:1;
  filter:drop-shadow(0 2px 4px rgba(23,32,51,.10));
}
.visual-simbo-card span:nth-child(1){left:50%;top:26%;transform:translate(-50%,-50%);}
.visual-simbo-card span:nth-child(2){left:30%;top:68%;transform:translate(-50%,-50%);}
.visual-simbo-card span:nth-child(3){left:70%;top:66%;transform:translate(-50%,-50%);}
.visual-simbo-card .m{
  filter:drop-shadow(0 0 12px rgba(245,188,35,.45));
}
.visual-simbo-answer{
  margin:14px auto 0;
  width:max-content;
  max-width:100%;
  padding:10px 16px;
  border-radius:999px;
  background:#f2eee8;
  color:var(--text);
  font-weight:900;
  font-size:15px;
}
@media(max-width:640px){.visual-simbo-cards{
    gap:10px;
  }
.visual-simbo-card{
    min-height:132px;
    border-radius:22px;
  }
.visual-simbo-card span{
    font-size:30px;
  }}
/* v55 · Portada Memoria de parejas */
.visual-pairs-example{
  width:100%;
  max-width:420px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.visual-pairs-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:center;
  justify-content:center;
}
.visual-pairs-card{
  aspect-ratio:1/1;
  min-height:72px;
  border-radius:22px;
  border:1px solid rgba(232,225,216,.98);
  background:linear-gradient(145deg,#f7f2eb,#fff);
  box-shadow:0 10px 22px rgba(23,32,51,.07);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.visual-pairs-card span{
  display:block;
  font-size:34px;
  line-height:1;
  filter:drop-shadow(0 4px 8px rgba(23,32,51,.12));
}
.visual-pairs-card.match{
  background:linear-gradient(145deg,rgba(70,211,137,.16),#fff);
  box-shadow:0 0 0 3px rgba(70,211,137,.18),0 10px 22px rgba(23,32,51,.06);
}
.visual-pairs-card.back{
  background:linear-gradient(135deg,rgba(122,99,239,.18),rgba(239,112,65,.12)),#f3eee7;
}
.visual-pairs-card.back i{
  width:34%;
  height:34%;
  display:block;
  border-radius:999px;
  background:rgba(122,99,239,.55);
}
.visual-pairs-caption{
  margin:0 auto;
  width:max-content;
  max-width:100%;
  padding:9px 14px;
  border-radius:999px;
  background:#f2eee8;
  color:var(--text);
  font-size:14px;
  font-weight:850;
  text-align:center;
}
@media(max-width:640px){.visual-pairs-grid{
    gap:8px;
  }
.visual-pairs-card{
    min-height:58px;
    border-radius:18px;
  }
.visual-pairs-card span{
    font-size:28px;
  }
.visual-pairs-caption{
    font-size:13px;
  }}
.visual-ticket-example{
  width:100%;
  display:grid;
  place-items:center;
}
.visual-ticket-paper{
  width:min(100%,390px);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(232,225,216,.95);
  box-shadow:0 14px 28px rgba(23,32,51,.08);
  text-align:left;
}
.visual-ticket-head,
.visual-ticket-line,
.visual-ticket-total,
.visual-ticket-paid{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.visual-ticket-head{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding-bottom:8px;
  border-bottom:1px dashed #ded7ce;
}
.visual-ticket-line{
  font-size:16px;
  line-height:1.2;
}
.visual-ticket-line span{
  font-weight:750;
}
.visual-ticket-line strong,
.visual-ticket-total strong,
.visual-ticket-paid strong{
  white-space:nowrap;
  font-weight:900;
}
.visual-ticket-total,
.visual-ticket-paid{
  padding-top:10px;
  border-top:1px dashed #ded7ce;
  font-size:17px;
}
.visual-ticket-paid{
  border-top:0;
  padding-top:2px;
  color:var(--muted);
}
.visual-ticket-question{
  margin-top:4px;
  padding:12px;
  border-radius:16px;
  background:#f5efe7;
  text-align:center;
  font-size:17px;
  font-weight:900;
  color:var(--ok);
}
.chain-dots span.active{
  background:var(--orange);
}
.pyramid-cell.is-active{
  outline:3px solid rgba(127,93,244,.72);
  outline-offset:2px;
  background:#fff8f1;
}
.visual-pyramid-example{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.visual-pyramid-label{
  align-self:flex-start;
  color:#7f5df4;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.visual-pyramid-board{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.visual-pyramid-row{
  display:grid;
  grid-template-columns:repeat(var(--row-size), 48px);
  justify-content:center;
  gap:8px;
}
.visual-pyramid-row span{
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(232,225,216,.95);
  color:var(--text);
  font-size:22px;
  font-weight:950;
}
.visual-pyramid-row span.is-hole{
  background:#fff4ea;
  border-color:rgba(127,93,244,.64);
  color:#22c782;
  box-shadow:0 0 0 2px rgba(127,93,244,.2);
}
.visual-pyramid-note{
  color:var(--muted);
  font-size:13px;
  font-weight:750;
  text-align:center;
}
.visual-sequence-example{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.visual-sequence-label{
  color:var(--muted);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.visual-sequence-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}
.visual-sequence-row span{
  min-width:48px;
  min-height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#fff8e2;
  border:1px solid rgba(239,200,91,.75);
  color:#d9a100;
  font-size:22px;
  font-weight:950;
}
.visual-sequence-row .is-answer{
  background:#f0fff7;
  border-color:rgba(34,199,130,.55);
  color:#17a96c;
}
.visual-wordsearch-example{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.visual-wordsearch-label{
  color:#7f5df4;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.visual-wordsearch-grid{
  display:grid;
  grid-template-columns:repeat(var(--word-example-size), 36px);
  gap:5px;
}
.visual-wordsearch-grid span{
  min-height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff;
  border:1px solid rgba(232,225,216,.95);
  color:var(--text);
  font-size:17px;
  font-weight:950;
}
.visual-wordsearch-grid span.is-active{
  background:#e8fff3;
  border-color:rgba(34,199,130,.7);
  color:#138f5d;
}
.visual-hangman-example{
  width:100%;
  display:grid;
  justify-items:center;
  gap:12px;
}
.visual-hangman-svg{
  width:190px;
  height:auto;
}
.visual-hangman-svg path,
.visual-hangman-svg circle{
  fill:none;
  stroke:#6f58d9;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.visual-hangman-pattern{
  display:flex;
  gap:8px;
  font-size:26px;
  font-weight:950;
}
.visual-hangman-pattern span{
  width:28px;
  min-height:38px;
  display:grid;
  place-items:center;
  border-bottom:3px solid #d8d0c8;
}
.visual-hangman-errors{
  color:#e95d86;
  font-size:13px;
  font-weight:850;
}
.cyl-number-bank button.is-result{
  color:#087448;
  background:#e8fff3;
  border-color:#20c985;
}
.cyl-number-bank button.is-result.is-selected{
  color:#087448;
  background:#d9faea;
  border-color:#0aa777;
  box-shadow:0 0 0 4px rgba(32,201,133,.18),0 10px 20px rgba(23,32,51,.08);
}
.cyl-ops button.active{
  color:#fff;
  background:#7a63ef;
  border-color:#7a63ef;
}
/* Ejemplos visuales con fichas suaves */
.visual-cyl-example-rich{
  gap:14px;
}
.visual-cyl-card{
  display:grid;
  gap:12px;
  border:1px solid rgba(232,223,214,.95);
  background:linear-gradient(180deg,#fffdfa 0%,#f7f2eb 100%);
  border-radius:18px;
  padding:14px;
  box-shadow:0 12px 28px rgba(23,32,51,.06);
}
.visual-cyl-card:last-child{
  border-bottom:1px solid rgba(232,223,214,.95);
  padding-bottom:14px;
}
.visual-cyl-card .visual-cyl-label{
  color:#7d86a2;
  text-align:center;
}
.visual-cyl-letters,
.visual-cyl-numbers{
  justify-content:center;
}
.visual-cyl-letters span,
.visual-cyl-letters i,
.visual-cyl-numbers span{
  width:42px;
  min-width:42px;
  height:46px;
  min-height:46px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#172033;
  background:#fffaf2;
  border:2px solid #e6be45;
  box-shadow:0 8px 18px rgba(23,32,51,.08);
  font-size:21px;
  font-weight:950;
  font-style:normal;
}
.visual-cyl-letters i{
  background:#fbfaf8;
  border:1px solid #e8dfd6;
  box-shadow:none;
}
.visual-cyl-numbers span{
  min-width:48px;
  color:#172033;
}
.visual-cyl-numbers span.is-result{
  color:#087448;
  background:#e8fff3;
  border-color:#20c985;
}
.visual-cyl-result,
.visual-cyl-target,
.visual-cyl-expression{
  width:100%;
  border-radius:14px;
  border:1px solid #e8dfd6;
  background:#fbfaf8;
  padding:10px 12px;
  text-align:center;
}
.visual-cyl-result small,
.visual-cyl-target small{
  display:block;
  margin-bottom:4px;
  color:#7d86a2;
  font-size:10px;
  font-weight:950;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.visual-cyl-result strong,
.visual-cyl-target b,
.visual-cyl-expression strong{
  display:block;
  color:#172033;
  font-weight:950;
}
.visual-cyl-result strong{
  font-size:24px;
}
.visual-cyl-target b{
  color:#f0b82f;
  font-size:34px;
  line-height:1;
}
.visual-cyl-result em,
.visual-cyl-expression em{
  display:block;
  margin-top:4px;
  color:#687189;
  font-style:normal;
  font-size:12px;
  font-weight:850;
}
.visual-cyl-expression strong{
  color:#087448;
}
.visual-scramble-row span{
  background:#fffaf2;
  color:#172033;
  border-color:#e6be45;
  box-shadow:0 10px 20px rgba(23,32,51,.08);
}
.visual-scramble-row span.active{
  background:#e8fff3;
  color:#087448;
  border-color:#20c985;
}
.visual-scramble-answer{
  color:#172033;
}
/* Ruleta de la Fortuna */
.visual-wheel-example{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  justify-content:center;
  width:min(100%,420px);
  margin:0 auto;
}
.visual-wheel-disc{
  width:92px;
  height:92px;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  background:conic-gradient(from -20deg,#7b61f2 0 22%,#38bdf8 22% 43%,#ffd84f 43% 64%,#ff7a45 64% 82%,#16c7a8 82% 100%);
  box-shadow:0 18px 32px rgba(119,88,232,.24);
}
.visual-wheel-disc span{
  position:absolute;
  inset:15px;
  border-radius:50%;
  background:#fffaf2;
}
.visual-wheel-disc b{
  position:relative;
  z-index:1;
  font-size:34px;
  color:#172033;
}
.visual-wheel-panel{
  min-width:0;
}
.visual-wheel-label{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
  font-size:12px;
  color:#7d8297;
  margin-bottom:10px;
}
.visual-wheel-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.visual-wheel-row span,
.visual-wheel-row em{
  width:28px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#fffaf2;
  border:1px solid #e7dccc;
  color:#172033;
  font-size:18px;
  font-weight:900;
  font-style:normal;
}
.visual-wheel-row i{
  width:12px;
  height:34px;
}
.wheel-strip-slot.is-active{
  top:36px;
  width:96px;
  height:66px;
  margin-left:-48px;
  color:#172033;
  background:#ffd84f;
  border:2px solid #f06f43;
  font-size:21px;
  box-shadow:0 16px 32px rgba(240,111,67,.18);
  z-index:2;
}
@media(max-width:640px){.visual-wheel-example{grid-template-columns:1fr}
.visual-wheel-disc{margin:0 auto}}
/* ===== VISUAL EXAMPLE: WORD CARDS ===== */
.visual-wordcards-example{display:flex;flex-direction:column;gap:12px;width:100%}
/* wordCards visual example */
.visual-wordcards-example{display:flex;flex-direction:column;gap:14px;width:100%}
.visual-wordcards-section{display:flex;flex-direction:column;gap:8px}
.visual-wordcards-kicker{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#707789);font-weight:800}
.visual-wordcards-chips,.visual-wordcards-buttons{display:flex;flex-wrap:wrap;gap:7px}
.visual-wordchip{padding:7px 14px;border-radius:10px;font-size:.9rem;font-weight:800}
.visual-wordchip--study{background:#deeeff;border:1px solid #a8cffa;color:#1766c0}
.visual-wordchip--selected{background:#deeeff;border:2px solid #2f8be8;color:#1766c0}
.visual-wordchip--neutral{background:#f4eee6;border:1px solid #e0d8ce;color:#707789}
.wsum-alpha-cell.is-active{background:#ede8ff;border-color:#a88ef8;color:#7755e8}
.wsum-alpha-cell.is-active b{color:#7755e8}
/* wordSum visual example */
.visual-wsum-example{display:flex;flex-direction:column;gap:12px;width:100%}
.visual-wsum-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.visual-wsum-chip{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:10px;background:#ede8ff;border:1px solid #a88ef8;font-size:.95rem;font-weight:900;color:#7755e8;min-width:40px}
.visual-wsum-chip b{font-size:.75rem;color:#7755e8}
.visual-wsum-plus{color:var(--muted,#707789);font-weight:700;font-size:1rem}
.visual-wsum-eq{font-size:1.1rem;font-weight:900;color:var(--text,#172033);padding:0 4px}
.visual-wsum-eq b{color:#7755e8;font-size:1.3rem}
.visual-wsum-table{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.visual-wsum-table span{font-size:.72rem;color:var(--muted,#707789);background:#f4eee6;padding:2px 5px;border-radius:5px;font-weight:700}
.rp-pw-tab.active{background:#fff;color:#172033;box-shadow:0 2px 6px rgba(0,0,0,.08);}
/* ── Visual example: pairedWords ─────────────────────────────────────── */
.visual-pw-example{display:flex;flex-direction:column;gap:10px;width:100%;}
.visual-pw-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#888);font-weight:800;margin-bottom:4px;}
.visual-pw-pairs{display:flex;flex-direction:column;gap:6px;}
.visual-pw-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:10px;padding:7px 12px;}
.visual-pw-a{font-weight:850;color:#60a5fa;font-size:.95rem;}
.visual-pw-b{font-weight:850;color:#a78bfa;font-size:.95rem;}
.visual-pw-dash{color:var(--muted,#888);font-size:.85rem;}
.visual-pw-divider{text-align:center;color:var(--muted,#888);font-size:1.1rem;line-height:1;}
.visual-pw-cue{font-size:1.3rem;font-weight:850;color:#60a5fa;margin-bottom:8px;}
.visual-pw-cue span{color:var(--muted,#888);font-size:1rem;}
.visual-pw-opts{display:flex;flex-wrap:wrap;gap:6px;}
.visual-pw-opt{padding:6px 14px;border-radius:10px;font-size:.88rem;font-weight:700;background:rgba(255,255,255,.07);color:var(--muted,#bbb);}
.visual-pw-opt--ok{background:rgba(52,211,153,.18);color:#34d399;border:1px solid rgba(52,211,153,.35);}
.cal-export-rangebtn.is-active{
  border-color:#7a63ef;
  background:#7a63ef;
  color:#fff;
}
.visual-mosaic-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.visual-mosaic-row pre{
  margin:0;
  min-width:90px;
  padding:8px 12px;
  border-radius:12px;
  background:#241f3d;
  border:2px solid #ffd84f;
  color:#ffd84f;
  font-family:'SFMono-Regular',Consolas,Menlo,monospace;
  font-size:13px;
  font-weight:850;
  line-height:1.4;
  white-space:pre;
}
.visual-mosaic-row pre.active{
  border-color:#2ee694;
  color:#2ee694;
}
.ptrans-mini-cell.on{
  background:#7758e8;
  box-shadow:0 0 0 3px rgba(119,88,232,.16);
}
.profile-role-btn.active{
  background:#7a63ef;
  border-color:#7a63ef;
  color:#fff;
}
.stair-slot.is-filled{border-style:solid;background:#fff;color:var(--text);box-shadow:0 8px 18px rgba(23,32,51,.08)}
/* Ejemplo visual: Escalera numérica */
.visual-stair-example{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.visual-stair-label{color:var(--muted);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.visual-stair-board{display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;min-height:100px}
.visual-stair-step{display:flex;align-items:flex-end;height:100px;flex:1;max-width:90px}
.visual-stair-step span{width:100%;height:var(--vstair-h);min-height:30px;border:2px dashed rgba(47,143,91,.35);border-radius:10px 10px 3px 3px;background:#eef8f1;color:#2f8f5b;font-size:11px;font-weight:850;display:flex;align-items:center;justify-content:center;padding:4px}
.visual-stair-step span.is-filled{border-style:solid;background:#fff;color:var(--text);box-shadow:0 6px 14px rgba(23,32,51,.08)}
.visual-stair-tray{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.visual-stair-tray span{border-radius:10px;background:#f4eee6;color:var(--text);font-size:13px;font-weight:850;padding:8px 10px}
.memory-cell.is-correct{background:var(--ok)!important;box-shadow:0 0 0 3px rgba(63,155,100,.25)!important}
/* Visual example — Contradicción */
.visual-contra-example{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left}
.visual-contra-stmt{display:flex;flex-direction:column;gap:4px}
.visual-contra-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.visual-contra-stmt p{margin:0;font-size:16px;font-weight:650;line-height:1.4;color:var(--text)}
.visual-contra-divider{height:1px;background:var(--line)}
.visual-contra-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.visual-contra-btn{font-size:12px;font-weight:750;padding:7px 12px;border-radius:999px;background:#f0ebe4;color:var(--muted)}
.visual-contra-btn.is-correct{background:var(--purple);color:#fff}
.visual-contra-explain{font-size:12px;color:var(--muted);font-style:italic;border-top:1px solid var(--line);padding-top:8px;margin-top:2px;line-height:1.5}
.domain-tab[data-domain="nuevos"].active{background:var(--orange);color:#fff}
.notif-settings-btn.active{background:#ede9ff;color:#7a63ef}
.weekly-bar.is-filled{
  background:#4caf7d;
}
.tour-overlay.on{opacity:1}
.tour-tooltip-dots span.on{background:var(--purple,#7c3aed)}
.novedades-modal.open{opacity:1}
.novedades-modal.open .novedades-card{transform:scale(1)}
.sc-pill{
  position:absolute;
  width:84px;
  height:84px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 14px rgba(14,122,99,.18), inset 0 0 14px rgba(255,255,255,.5);
  animation:scPillSpawn .3s ease, scPillColor var(--sc-time,9000ms) linear forwards;
}
.sc-pill:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 28%, transparent 62%);
  pointer-events:none;
}
.sc-pill-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.sc-pill-ring circle{
  fill:none;
  stroke:#e04b4b;
  stroke-width:4;
  stroke-dasharray:var(--sc-circ,176);
  stroke-dashoffset:var(--sc-circ,176);
  animation:scPillCountdown var(--sc-time,9000ms) linear forwards;
}
.sc-pill-label{
  position:relative;
  z-index:1;
  font-size:17px;
  font-weight:850;
  color:#17493d;
}
/* Explota como una burbuja: se expande de golpe más allá de su tamaño
   normal mientras se desvanece, en vez de solo encogerse/agrandarse un
   poco -- ver createEngine en calculo-contrarreloj.js (removePill). El
   check/cruz grande centrado en pantalla es un elemento aparte que monta
   el propio JS (showCenterFeedback), no algo dentro de la burbuja.  */
.sc-pill.sc-pill-ok,
.sc-pill.sc-pill-fail{
  animation:scBubblePop .35s ease-out forwards;
}