/* ===== v5: Salón de Fracciones, inventario y extras ===== */
.title-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.duty-feature{background:linear-gradient(140deg,#e8f7f0,#fff0f5)}
.subject{border:0;text-align:left;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.subject-go{margin-top:auto;padding-top:8px;font-size:11px;font-weight:900;color:#806cba}
.toy-photo{position:relative}
.toy-flag{position:absolute;left:6px;top:6px;background:#fff3d6;color:#8a6420;border-radius:99px;padding:4px 8px;font-size:9px;font-weight:900}
.toy-story{font-family:Georgia,serif;font-style:italic;font-size:11px!important;margin-top:8px!important;color:#7a6d86!important}
.photo-btns{display:flex;gap:8px;flex-wrap:wrap}.photo-btn{display:inline-flex;align-items:center;border:1px solid #e8e0ed;cursor:pointer}
label textarea{border:1px solid #e8e0ed;border-radius:11px;padding:11px;font:inherit;font-weight:400;font-size:13px;color:var(--ink);resize:vertical}
.review-toy{display:flex;gap:14px;align-items:center;background:#faf7fd;border-radius:16px;padding:12px}
.review-toy img,.review-ph{width:96px;height:96px;object-fit:cover;border-radius:14px;flex-shrink:0;background:#fff;display:grid;place-items:center;font-size:40px}
.review-toy h3{margin:0 0 6px}.review-toy p{margin:3px 0;font-size:12px;color:var(--muted)}
.review-actions{display:grid;gap:8px}
#reviewContent .question{font-size:16px;font-weight:800;margin:14px 0 8px}
#reviewContent .answer,.frac-opt{background:#f5f1fa;border:2px solid transparent;padding:12px;border-radius:12px;text-align:left;color:var(--ink);font-size:14px}
.review-done{text-align:center;padding:10px}.review-done span{font-size:50px}.review-done h3{margin:8px 0}

/* Hero y tarjetas del salón */
.frac-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(110deg,#fff5d9,#ffedf3 60%,#f0ebff);border-radius:26px;padding:22px 24px}
.frac-hero h2{font-size:clamp(26px,4vw,36px);margin:6px 0;color:#574a76}.frac-hero p{color:var(--muted);line-height:1.55;font-size:13px;max-width:560px;margin:0}
.frac-hero-art svg{width:110px;height:110px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.frac-hero-art svg{animation:none}}
.duty-card{display:flex;align-items:center;gap:15px;background:#fff;border:2px solid #d9efe2;border-radius:20px;padding:16px;margin-top:16px}
.duty-card h3{margin:4px 0}.duty-card p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}.duty-card>div:nth-child(2){flex:1}
.duty-ico{width:62px;height:62px;border-radius:18px;background:#e8f7f0;display:grid;place-items:center;font-size:32px;flex-shrink:0}
.salon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.salon{border:0;border-radius:19px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:5px;color:var(--ink);min-height:170px;transition:transform .15s}
.salon:active{transform:scale(.97)}
.salon-ico{font-size:32px}.salon b{font-size:15px}.salon small{font-size:11px;color:#6f687b}
.locked-salon{filter:grayscale(.8);opacity:.6}
.seal-dots{display:flex;gap:4px;margin-top:auto}.seal-dots i{width:14px;height:14px;border-radius:50%;background:#ffffffb0;border:2px solid #fff}.seal-dots i.on{background:#f2b94a}
.salon-state{font-size:10px;font-weight:900;color:#806cba}
.garden{display:flex;flex-wrap:wrap;gap:6px;background:linear-gradient(#fff 0 55%,#e6f2df 55%);border:1px solid var(--line);border-radius:18px;padding:16px;min-height:80px;align-items:flex-end}
.flower{font-size:30px;animation:grow .5s ease-out both}.empty-flower{opacity:.45}
@keyframes grow{from{transform:scale(.2) translateY(10px);opacity:0}}
.garden-msg{width:100%;margin:6px 0 0}
.parent-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:22px 0}
.parent-panel summary{font-weight:900;cursor:pointer;font-size:13px}
.pstats{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}.pstats th,.pstats td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}.pstats th{font-size:10px;color:var(--muted);letter-spacing:.5px}
.pct{border-radius:99px;padding:3px 8px;font-weight:900;font-size:11px}.pct.good{background:#e3f5e8;color:#2f7a48}.pct.mid{background:#fff3d6;color:#8a6420}.pct.low{background:#ffe6e6;color:#a33b3b}

/* Diálogo de juego */
.frac-dialog{width:min(620px,calc(100% - 16px));max-height:calc(100% - 16px)}
.frac-shell{padding:20px;display:grid;gap:12px}
.frac-dots{display:flex;gap:6px}.frac-dots i{flex:1;height:8px;border-radius:99px;background:#eee8f3}.frac-dots i.now{background:#cfc4ec}.frac-dots i.ok{background:#7cc796}.frac-dots i.half{background:#f2c66d}.frac-dots i.miss{background:#f0a3a3}
.frac-q{font-size:17px;line-height:1.6;font-weight:700;margin:4px 0}
.duty-tag{display:inline-block;background:#e8f7f0;color:#3e7a55;border-radius:99px;padding:4px 10px;font-size:11px;font-weight:900}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 3px;font-weight:900;color:#5d4d88}
.fr>span:first-child{border-bottom:2.5px solid currentColor;padding:0 3px 1px}.fr>span:last-child{padding:1px 3px 0}
.fr.big{font-size:30px}
.frac-visual{display:flex;justify-content:center;align-items:center;margin:6px 0}.frac-visual.col{flex-direction:column;gap:6px;align-items:stretch}
.pie .part{fill:#fffaf2;stroke:#e9b765;stroke-width:1.2;transition:fill .15s}.pie .rim{fill:none;stroke:#e9b765;stroke-width:2.5}
.pie.interactive .part{cursor:pointer}.pie.interactive .part:hover{fill:#fff0e0}
.bar-wrap{width:100%;display:grid;gap:3px}.bar-label{font-size:11px;font-weight:900;color:var(--muted)}
.bar{width:100%;height:46px}.bar .part{fill:#fbf8ff;stroke:#a99ad0;stroke-width:.6;vector-effect:non-scaling-stroke}.bar .rim{fill:none;stroke:#8a78c0;stroke-width:2;vector-effect:non-scaling-stroke}.bar.interactive .part{cursor:pointer}
.hint-visual{display:grid;gap:6px;margin:8px 0}
.frac-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.frac-opt{text-align:center;font-size:18px;min-height:56px}
.frac-opt.selected{border-color:#806cba;background:#eee9ff}.frac-opt.right{border-color:#5fb27c;background:#e6f6eb}.frac-opt.wrong{border-color:#e18c8c;background:#fdeeee}
.frac-count{text-align:center;font-weight:800;color:var(--muted);font-size:13px;margin:2px 0}
.tokens{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.frac-visual .token{pointer-events:none}
.token{position:relative;width:64px;height:64px;border-radius:16px;background:#fff;border:3px solid #ece5f3;display:grid;place-items:center;font-size:32px;overflow:visible;padding:0}
.tokens.big .token{width:76px;height:76px}
.token img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.token em{position:absolute;right:-8px;top:-8px;font-style:normal;font-size:20px;background:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;box-shadow:0 2px 6px #0002}
.token.marked{border-color:#f2c66d}
.token.chosen{border-color:#806cba;background:#eee9ff;transform:translateY(-4px);box-shadow:0 6px 12px #806cba40}
.token.chosen::after{content:"✓";position:absolute;left:-7px;top:-7px;background:#806cba;color:#fff;border-radius:50%;width:24px;height:24px;font-size:14px;display:grid;place-items:center;font-weight:900}
.numline{padding:46px 22px 30px}
.track{position:relative;height:40px}
.track-line{position:absolute;left:0;right:0;top:18px;height:6px;border-radius:99px;background:linear-gradient(90deg,#c9e9d6,#f6d7a7)}
.tick{position:absolute;top:6px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#fff;border:3px solid #a99ad0;padding:0}
.tick span{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:900;white-space:nowrap;color:var(--ink)}
.tick.picked{background:#806cba;border-color:#806cba}
.runner{position:absolute;top:-38px;transform:translateX(-50%);font-size:30px;transition:left .5s ease}.runner.start{opacity:.55}
.stepper{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0}
.step{width:56px;height:56px;border-radius:50%;background:#806cba;color:#fff;font-size:28px;font-weight:900;box-shadow:0 5px 12px #806cba40}
.step:active{transform:scale(.92)}
.frac-feedback{border-radius:14px;padding:13px;font-size:14px;line-height:1.55}
.frac-feedback.ok{background:#e6f6eb;color:#2e6a43}.frac-feedback.hint{background:#fff4e2;color:#7d5a1f}.frac-feedback.miss{background:#f6f0ff;color:#54467a}.frac-feedback.info{background:#eef3fb;color:#40597d}
.star-pop{display:inline-block;background:#fff;border-radius:99px;padding:2px 9px;font-weight:900;color:#8a6b24;animation:pop .4s ease-out}
.seal-pop{margin-top:8px;background:#fff;border-radius:12px;padding:10px;font-weight:700;animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.dot-groups{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.dot-group{display:flex;flex-wrap:wrap;gap:3px;max-width:70px;padding:6px;border:2px dashed #d4c8e6;border-radius:10px}.dot-group.on{background:#eee9ff;border-style:solid;border-color:#806cba}
.dot-group i{width:10px;height:10px;border-radius:50%;background:#b8a9dc}.dot-group.on i{background:#806cba}
.round-end{text-align:center;padding:10px}.round-end>span{font-size:60px;display:block;animation:pop .5s ease-out}.round-end h3{font-size:22px;margin:6px 0}.round-end p{font-size:14px;color:var(--ink)}
@media(max-width:760px){.salon-grid{grid-template-columns:repeat(2,1fr);gap:9px}.salon{min-height:160px;padding:13px}.frac-hero-art svg{width:72px;height:72px}.frac-hero{padding:17px}.duty-card{flex-wrap:wrap}.duty-card .btn{width:100%}.title-actions{width:100%}.section-title:has(.title-actions){flex-wrap:wrap}}
@media(max-width:430px){.frac-shell{padding:15px}.frac-q{font-size:15px}.token{width:56px;height:56px;font-size:27px}.tokens.big .token{width:62px;height:62px}.numline{padding:46px 14px 30px}.tick{width:26px;height:26px;margin-left:-13px}.pstats{font-size:11px}}
.opt-name{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:4px}