/* public/infantil/microreto-render.css */
/* CSS compartido de las plantillas de microretos (SSOT, extraído de microretos.html). */
/* Requiere variables de tema del host: --line --shadow --display --ink --ink-soft */
/* --warm-1 --warm-2 --joy --joy-bg --oops --oops-bg --paper-2 --paper-3 --c-cog --c-cog-bg --c-math --c-math-bg */
/* ═════════════ EXERCISE CARD ═════════════ */
.exercise{background:#fff;border-radius:32px;padding:1.6rem 1.3rem 1.8rem;border:4px solid var(--line);box-shadow:var(--shadow);animation:fadeup .35s cubic-bezier(.3,.7,.3,1) backwards}
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.ex-prompt{font-family:var(--display);font-size:1.4rem;text-align:center;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:1.3rem;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.ex-prompt .listen-btn{width:42px;height:42px;border-radius:50%;background:var(--pipo-bg);border:2px solid var(--pipo);font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--pipo);cursor:pointer;box-shadow:0 3px 0 #be1a72}
.ex-prompt .listen-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #be1a72}
.ex-prompt .listen-btn.playing{animation:pulse 1s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ex-context{font-size:.9rem;color:var(--ink-soft);text-align:center;margin-bottom:1rem;font-weight:600;font-style:italic}

/* Visual scenes (count_tap, etc.) */
.ex-scene{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.6rem;padding:1.4rem;background:var(--paper-2);border-radius:24px;margin-bottom:1.3rem;min-height:110px}
.scene-item{font-size:3rem;line-height:1;cursor:pointer;transition:transform .15s,filter .15s;animation:popin .35s cubic-bezier(.4,0,.4,1.6) backwards;-webkit-user-select:none;user-select:none}
.scene-item:nth-child(1){animation-delay:0s}
.scene-item:nth-child(2){animation-delay:.06s}
.scene-item:nth-child(3){animation-delay:.12s}
.scene-item:nth-child(4){animation-delay:.18s}
.scene-item:nth-child(5){animation-delay:.24s}
.scene-item:nth-child(6){animation-delay:.30s}
.scene-item:nth-child(7){animation-delay:.36s}
.scene-item:nth-child(8){animation-delay:.42s}
@keyframes popin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.scene-item.tapped{transform:scale(.85);filter:drop-shadow(0 0 8px var(--joy)) saturate(1.3)}
.scene-counter{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:1rem;font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--ink)}
.scene-counter .num{display:inline-block;min-width:50px;padding:.3rem .8rem;background:var(--joy-bg);border-radius:14px;border:2px solid var(--joy);color:var(--joy);text-align:center}

/* Tap options grid */
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.opts.cols-3{grid-template-columns:repeat(3,1fr)}
.opts.cols-4{grid-template-columns:repeat(2,1fr)}
.opt{padding:1.2rem .8rem;background:#fff;border:3px solid var(--line);border-radius:20px;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--ink);box-shadow:0 5px 0 var(--line);transition:transform .12s,box-shadow .12s,background .15s;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:80px}
.opt .icon{font-size:2rem;line-height:1}
.opt .label{font-size:1rem;line-height:1.1}
.opt:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.opt:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--line)}
.opt.selected{background:#fef3c7;border-color:var(--warm-1);box-shadow:0 5px 0 var(--warm-2)}
.opt.correct{background:var(--joy-bg);border-color:var(--joy);box-shadow:0 5px 0 #16a34a;animation:correctpulse .4s ease}
.opt.wrong{background:var(--oops-bg);border-color:var(--oops);box-shadow:0 5px 0 #b91c1c;animation:wrongshake .4s ease}
.opt[disabled]{cursor:default}
@keyframes correctpulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes wrongshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* drag_match — pares left↔right (tap-to-pair) */
.match-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:.4rem;align-items:center;margin-bottom:1rem}
.match-col{display:flex;flex-direction:column;gap:.5rem}
.match-col .label-h{font-family:var(--display);font-size:.8rem;color:var(--ink-soft);text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
.match-cell{padding:.8rem;background:#fff;border:3px solid var(--line);border-radius:16px;font-family:var(--display);font-weight:700;color:var(--ink);box-shadow:0 4px 0 var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:1rem;text-align:center;min-height:60px}
.match-cell.selected{background:var(--paper-3);border-color:var(--warm-1);box-shadow:0 4px 0 var(--warm-2)}
.match-cell.paired{background:var(--joy-bg);border-color:var(--joy);box-shadow:0 4px 0 #16a34a;cursor:default}
.match-cell.paired::after{content:attr(data-pair-num);position:absolute;font-size:.7rem;background:var(--joy);color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:-3rem;margin-top:-2.5rem;font-weight:700}
.match-cell{position:relative}
.match-arrow{font-size:1.4rem;color:var(--ink-soft);font-weight:700;text-align:center}

/* drag_to_bin — items + bins (tap-to-assign) */
.bin-items{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:1rem;background:var(--paper-2);border-radius:20px;margin-bottom:1rem;min-height:80px}
.bin-item{padding:.7rem 1rem;background:#fff;border:3px solid var(--line);border-radius:16px;font-family:var(--display);font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--line);display:inline-flex;align-items:center;gap:.4rem;font-size:1rem;transition:transform .12s,box-shadow .12s}
.bin-item:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
.bin-item.selected{background:var(--paper-3);border-color:var(--warm-1);box-shadow:0 4px 0 var(--warm-2);transform:scale(1.06)}
.bin-item.assigned{opacity:.55;cursor:default;transform:scale(.92)}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.7rem;margin-bottom:1rem}
.bin{background:#fff;border:3px dashed var(--line-2);border-radius:20px;padding:.8rem;min-height:120px;display:flex;flex-direction:column;cursor:pointer;transition:background .15s,border-color .15s}
.bin.target{background:var(--paper-3);border-color:var(--warm-1);border-style:solid}
.bin .bin-label{font-family:var(--display);font-weight:700;font-size:.9rem;text-align:center;margin-bottom:.4rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.bin .bin-content{flex:1;display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;align-items:center}
.bin .bin-content .chip{padding:.3rem .6rem;background:var(--paper-2);border:2px solid var(--line);border-radius:12px;font-size:.85rem;font-weight:700;display:inline-flex;align-items:center;gap:.2rem}
.bin .bin-content .chip .icon{font-size:1.1rem}

/* drag_sequence — list with up/down */
.seq-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.seq-item{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;background:#fff;border:3px solid var(--line);border-radius:16px;font-family:var(--display);font-size:1rem;font-weight:700;box-shadow:0 4px 0 var(--line)}
.seq-item .pos{font-size:.85rem;color:var(--ink-soft);font-weight:700;width:1.2em}
.seq-item .icon{font-size:1.6rem;line-height:1}
.seq-item .text{flex:1;min-width:0}
.seq-item .ud{display:flex;flex-direction:column;gap:.15rem}
.seq-item .ud button{width:32px;height:28px;border-radius:8px;background:var(--paper-2);border:2px solid var(--line);font-size:.7rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.seq-item .ud button:disabled{opacity:.3;cursor:default}

/* swipe_sort — left/right buttons */
.sort-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.sort-row{display:grid;grid-template-columns:48px 1fr 48px;gap:.4rem;align-items:center;padding:.7rem;background:#fff;border:3px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line)}
.sort-row.assigned{opacity:.65}
.sort-row.assigned-left{border-color:var(--c-cog);box-shadow:0 4px 0 #0277b8}
.sort-row.assigned-right{border-color:var(--c-math);box-shadow:0 4px 0 #c2410c}
.sort-row .item{font-family:var(--display);font-weight:700;display:flex;align-items:center;gap:.4rem;font-size:1rem}
.sort-row .item .icon{font-size:1.5rem;line-height:1}
.sort-row .arr{width:48px;height:48px;border-radius:14px;background:var(--paper-2);border:2px solid var(--line);font-size:1.3rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.sort-row .arr.left{color:var(--c-cog);background:var(--c-cog-bg);border-color:var(--c-cog)}
.sort-row .arr.right{color:var(--c-math);background:var(--c-math-bg);border-color:var(--c-math)}
.sort-row .arr.active{background:var(--joy-bg);border-color:var(--joy);color:var(--joy)}
.sort-labels{display:grid;grid-template-columns:48px 1fr 48px;gap:.4rem;font-family:var(--display);font-weight:700;font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;text-align:center}

/* drag_compose — slots + parts */
.compose-target{font-family:var(--display);font-size:1.5rem;text-align:center;margin-bottom:.8rem;color:var(--ink-soft);font-weight:700}
.compose-target .target{display:inline-block;background:var(--paper-2);padding:.3rem .9rem;border-radius:14px;border:2px solid var(--warm-1);color:var(--warm-2);font-size:1.6rem}
.compose-slots{display:flex;justify-content:center;gap:.5rem;padding:1rem;background:var(--paper-2);border-radius:20px;margin-bottom:1rem;min-height:80px;align-items:center;flex-wrap:wrap}
.compose-slot{min-width:64px;height:64px;background:#fff;border:3px dashed var(--line-2);border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--ink-soft);padding:.3rem .6rem}
.compose-slot.filled{background:var(--joy-bg);border-style:solid;border-color:var(--joy);color:var(--ink);cursor:pointer}
.compose-plus{font-size:1.4rem;color:var(--ink-soft);font-weight:700;align-self:center}
.compose-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.5rem;margin-bottom:1rem}
.compose-part{padding:1rem .5rem;background:#fff;border:3px solid var(--line);border-radius:16px;font-family:var(--display);font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--line);text-align:center}
.compose-part:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
.compose-part.used{opacity:.4;cursor:default}

/* tap_pattern — sequence with gap */
.pattern-row{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;padding:1.2rem;background:var(--paper-2);border-radius:20px;margin-bottom:1.2rem}
.pattern-cell{width:62px;height:62px;background:#fff;border:3px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;font-weight:700;box-shadow:0 3px 0 var(--line);position:relative}
.pattern-cell .icon{font-size:1.8rem;line-height:1}
.pattern-cell.gap{background:var(--paper-3);border-style:dashed;border-color:var(--warm-1);color:var(--warm-2)}
.pattern-cell.filled{background:var(--joy-bg);border-color:var(--joy)}
.pattern-arrow{color:var(--ink-soft);font-size:1.2rem;font-weight:700}

/* ═════════════ FOOTER (Comprobar / Saltar) ═════════════ */
.ex-foot{display:flex;justify-content:center;gap:.6rem;margin-top:.5rem}
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;background:var(--c-action,var(--ink));color:#fff;border-radius:99px;font-family:var(--display);font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb, var(--c-action,var(--ink)) 70%, black);transition:transform .12s,box-shadow .12s;letter-spacing:.01em}
.big-btn:hover{transform:translateY(-1px);box-shadow:0 6px 0 color-mix(in srgb, var(--c-action,var(--ink)) 70%, black)}
.big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb, var(--c-action,var(--ink)) 70%, black)}
.big-btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:0 5px 0 color-mix(in srgb, var(--c-action,var(--ink)) 70%, black)}
.skip-btn{padding:1rem 1.4rem;background:#fff;color:var(--ink-soft);border:2px solid var(--line);border-radius:99px;font-family:var(--display);font-weight:700;font-size:.95rem;box-shadow:0 4px 0 var(--line);cursor:pointer}
.skip-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}