:root{--rb-empty:rgba(148,163,184,.20)}

.rebuild-shell{max-width:830px;margin:auto;padding-bottom:34px}.rebuild-head{text-align:center}.rebuild-head h2{margin:5px 0}.rebuild-head p{color:var(--muted);font-weight:700}.rebuild-status{display:flex;justify-content:center;gap:12px;margin:14px 0}.rebuild-status span{background:var(--surface2);border:1px solid var(--line);padding:9px 15px;border-radius:999px;font-weight:800}.rb-reference{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;transition:max-height .35s,opacity .35s;margin:12px 0}.rb-reference.hidden{max-height:0;min-height:0;opacity:0;margin:0}.rb-reference canvas{width:min(100%,590px);height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25))}.rb-reference img{display:none}.rb-reference small,.rb-guide{color:var(--muted)}.rb-board{margin:15px auto 9px;width:min(100%,680px);border:2px solid var(--line);border-radius:16px;overflow:hidden;background:repeating-conic-gradient(#d9e2ec 0 25%,#cbd5e1 0 50%) 50%/14px 14px;box-shadow:var(--shadow)}.rb-board svg{display:block;width:100%;height:auto}.rb-board [data-region]{stroke:var(--line);stroke-width:.75;cursor:pointer;transition:filter .15s}.rb-board [data-region]:hover,.rb-board [data-region]:focus{filter:brightness(1.12);outline:none}.rb-slot{fill:rgba(251,191,36,.13);stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 2;cursor:pointer}.rb-slot.filled{opacity:0}.rb-piece-on-board{pointer-events:none}.rb-guide{text-align:center;min-height:24px;font-weight:700}.rb-palette,.rb-pieces{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin:12px auto;max-width:680px}.rb-palette>b,.rb-pieces>b{width:100%;font-size:.7rem;letter-spacing:.12em;color:var(--subtle)}.rb-color{width:44px;height:44px;border:3px solid transparent;border-radius:50%;padding:4px;background:var(--surface2)}.rb-color i{display:block;width:100%;height:100%;border-radius:50%;background:var(--swatch);border:1px solid #64748b}.rb-color.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,191,36,.25)}.rb-piece{display:flex;align-items:center;gap:9px;padding:7px 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font-weight:800}.rb-piece span{width:34px;height:34px;border-radius:7px;background-size:300% 100%;background-position:center;background-repeat:no-repeat;background-color:#fff}.rb-piece.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,191,36,.22)}.rb-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.rb-actions button{min-height:50px;border:0;border-radius:13px;color:#fff;background:var(--surface2);font-weight:900}.rb-actions #rb-check,.rb-actions #rb-next{grid-column:1/-1;background:linear-gradient(135deg,var(--success),#059669)}.rb-result{display:none;margin-top:12px;padding:14px;border-radius:15px;text-align:center;flex-direction:column;gap:4px}.rb-result:not(:empty){display:flex}.rb-result.success{background:#064e3b;color:#d1fae5;border:1px solid #10b981}.rb-result.error{background:#4c0519;color:#ffe4e6;border:1px solid #fb7185}
@media(max-width:600px){.rebuild-shell{padding:0 1px}.rb-reference{min-height:150px}.rb-actions{grid-template-columns:1fr}.rebuild-status{gap:7px}.rebuild-status span{font-size:.78rem;padding:8px 10px}}

/* El modo clásico conserva siempre una cuadrícula real de 180 casillas cuadradas. */
#modo-pintar .pv3-board{display:grid!important;grid-template-columns:repeat(18,minmax(0,1fr))!important;grid-template-rows:repeat(10,minmax(0,1fr))!important;width:100%!important;aspect-ratio:18 / 10!important;overflow:hidden!important}
#modo-pintar .pv3-cell{width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;aspect-ratio:1 / 1!important}

/* PINTURA-V2: selector aislado; no afecta el lienzo ni las herramientas. */
#modo-pintar .paint-selector-rv3{width:min(1120px,calc(100% - 32px));max-width:none;margin:0 auto;padding:12px 0 20px;}
#modo-pintar .paint-selector-head{text-align:center;margin:0 auto 20px;}
#modo-pintar .paint-selector-head .eyebrow{color:#64e7ff;font-size:.76rem;font-weight:900;letter-spacing:.2em;margin:4px 0 8px;}
#modo-pintar .paint-selector-head h2{margin:0;color:#f4f8ff;font-size:clamp(1.7rem,3vw,2.5rem);text-shadow:0 0 28px #24c8ff55;}
#modo-pintar .paint-selector-head>p:last-child{margin:7px 0 0;color:#bfd1e8;font-size:1rem;}
#modo-pintar .paint-selector-rv3 .paint-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;}
#modo-pintar .paint-selector-rv3 .paint-mode{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:390px;padding:0;border:1px solid #75dfff55;border-radius:24px;color:#fff;text-align:left;display:flex;flex-direction:column;gap:0;box-shadow:0 18px 48px #02081788,inset 0 1px #ffffff25;transition:border-color .25s,box-shadow .25s,filter .25s;}
#modo-pintar .paint-selector-rv3 .paint-mode:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;background:radial-gradient(ellipse at 50% 42%,#45dfff24,transparent 56%),linear-gradient(145deg,#102d49,#071323 74%);}
#modo-pintar .paint-selector-rv3 .paint-mode.grid{border-color:#ff8bc34d;}
#modo-pintar .paint-selector-rv3 .paint-mode.grid:before{background:radial-gradient(ellipse at 50% 42%,#ff62bc25,transparent 56%),linear-gradient(145deg,#351a3b,#101329 74%);}
#modo-pintar .paint-selector-rv3 .paint-mode:hover,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible{border-color:#69edff;box-shadow:0 0 0 1px #69edff66,0 20px 60px #08bde955,inset 0 1px #ffffff3a;filter:brightness(1.12);outline:none;}
#modo-pintar .paint-selector-rv3 .paint-mode.grid:hover,#modo-pintar .paint-selector-rv3 .paint-mode.grid:focus-visible{border-color:#ff9bd2;box-shadow:0 0 0 1px #ff9bd266,0 20px 60px #eb3da955,inset 0 1px #ffffff3a;}
#modo-pintar .paint-scene{position:relative;display:block!important;width:100%;height:230px;flex:0 0 230px;overflow:hidden;background:radial-gradient(ellipse at 50% 72%,#1b8bb244,transparent 54%);}
#modo-pintar .grid-scene{background:radial-gradient(ellipse at 50% 72%,#c8327944,transparent 55%);}
#modo-pintar .free-canvas{position:absolute;left:50%;top:48%;width:min(49%,270px);aspect-ratio:1.5;transform:translate(-50%,-50%) rotate(-4deg);border:8px solid #c8a779;border-radius:9px;background:#e8dcc7;box-shadow:0 14px 30px #0008,0 0 0 2px #ffe6b333;display:grid;place-items:center;}
#modo-pintar .free-canvas:before{content:"";position:absolute;inset:7px;background:linear-gradient(145deg,#fff7e6,#b9c5c6);box-shadow:inset 0 0 18px #25354b44;}
#modo-pintar .free-canvas img{position:relative;width:80%;height:auto;object-fit:contain;filter:drop-shadow(0 7px 8px #1118);animation:paint-flag-wave 3.8s ease-in-out infinite;}
#modo-pintar .paint-stroke{position:absolute;z-index:2;left:20%;bottom:21%;width:62%;height:5px;border-radius:50%;background:linear-gradient(90deg,transparent,#ffca58,#ff6b91,#79eaff,transparent);filter:blur(1px);transform:rotate(-13deg);animation:paint-stroke-glide 3.1s ease-in-out infinite;}
#modo-pintar .paint-glint{position:absolute;z-index:3;left:64%;top:21%;width:12px;height:12px;border-radius:50%;background:#f7fcff;box-shadow:0 0 18px 6px #69eaff;animation:paint-glint 2.7s ease-in-out infinite;}
#modo-pintar .paint-palette{position:absolute;left:14%;bottom:17px;width:116px;height:46px;border-radius:60% 45% 54% 45%;transform:rotate(-12deg);background:linear-gradient(145deg,#eed3a6,#a77d4c);box-shadow:0 9px 18px #0008,inset 0 2px #fff9;display:flex!important;align-items:center;justify-content:center;gap:8px;padding:0 12px;}
#modo-pintar .paint-palette i,#modo-pintar .grid-palette i{display:block!important;width:14px;height:14px;border-radius:50%;padding:0;background:#25d9ff;box-shadow:inset 0 2px 3px #fff9,0 0 10px currentColor;}
#modo-pintar .paint-palette i:nth-child(2){background:#fa5481}.paint-palette i:nth-child(3){background:#ffd34f}.paint-palette i:nth-child(4){background:#8e75ff}.paint-palette i:nth-child(5){background:#53e4a5}
#modo-pintar .paint-brush{position:absolute;right:16%;top:22px;width:13px;height:132px;border-radius:8px 8px 4px 4px;background:linear-gradient(90deg,#7b4725,#e3b373 45%,#87512e);box-shadow:3px 8px 12px #0007;transform:rotate(37deg);transform-origin:50% 90%;animation:brush-paint 3.5s ease-in-out infinite;}
#modo-pintar .paint-brush:before{content:"";position:absolute;top:-23px;left:1px;width:11px;height:29px;background:linear-gradient(90deg,#b9d8df,#fff,#7f99a5);clip-path:polygon(35% 0,100% 75%,72% 100%,0 76%);}
#modo-pintar .paint-spark,#modo-pintar .grid-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#8cf5ff;box-shadow:0 0 15px 5px #40dcff88;animation:spark-drift 3.5s ease-in-out infinite;}
#modo-pintar .spark-a{left:29%;top:22%}.spark-b{right:28%;bottom:22%;animation-delay:-1.5s}
#modo-pintar .grid-board{position:absolute;left:50%;top:49%;width:min(53%,300px);aspect-ratio:1.5;transform:translate(-50%,-50%) rotate(3deg);overflow:hidden;border:8px solid #b89a75;border-radius:8px;background:#12294c;box-shadow:0 14px 30px #0009,0 0 28px #fe74ca30;}
#modo-pintar .grid-board img{display:block;width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 0 7px #fff4);}
#modo-pintar .grid-lines{position:absolute;inset:0;background-image:linear-gradient(#eaf8ff55 1px,transparent 1px),linear-gradient(90deg,#eaf8ff55 1px,transparent 1px);background-size:10% 10%;}
#modo-pintar .grid-board .tile{position:absolute;width:10%;height:10%;background:#ffca4c;opacity:.92;box-shadow:0 0 12px #ffd85f;animation:tile-fill 4.8s steps(1,end) infinite;}
#modo-pintar .tile-one{left:20%;top:20%}.tile-two{left:30%;top:30%;animation-delay:-1.6s!important}.tile-three{left:50%;top:40%;animation-delay:-3.1s!important}
#modo-pintar .grid-sweep{position:absolute;left:-15%;top:0;width:16%;height:100%;background:linear-gradient(90deg,transparent,#b9faff88,transparent);filter:blur(3px);animation:grid-sweep 3.8s ease-in-out infinite;}
#modo-pintar .grid-palette{position:absolute;right:14%;bottom:19px;display:flex!important;gap:8px;padding:10px 12px;border:1px solid #fff3;border-radius:999px;background:#0a183ad9;box-shadow:0 8px 20px #0007;}
#modo-pintar .grid-palette i{width:13px;height:13px;background:#e73455}.grid-palette i:nth-child(2){background:#fff}.grid-palette i:nth-child(3){background:#1684dd}.grid-palette i:nth-child(4){background:#f5d34e}
#modo-pintar .grid-spark{right:22%;top:25%;background:#ffb5db;box-shadow:0 0 17px 6px #ff4dbb99;}
#modo-pintar .paint-copy{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:2px 26px 23px;}
#modo-pintar .paint-copy b{font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:.045em;text-shadow:0 2px 14px #0006;}
#modo-pintar .rebuild .paint-copy b{color:#8df1ff}.grid .paint-copy b{color:#ffaddb}
#modo-pintar .paint-copy small{font-size:clamp(.9rem,1.2vw,1rem);line-height:1.4;color:#dbeafe;}
#modo-pintar .paint-copy em{display:flex;justify-content:space-between;width:100%;margin-top:5px;padding-top:12px;border-top:1px solid #ffffff24;color:#8eeaff;font-size:.72rem;font-style:normal;font-weight:900;letter-spacing:.14em;}
#modo-pintar .grid .paint-copy em{color:#ffafd9}#modo-pintar .paint-copy em span{font-size:1rem;transition:transform .2s}#modo-pintar .paint-mode:hover .paint-copy em span{transform:translate(3px,-3px)}
@keyframes paint-flag-wave{0%,100%{transform:perspective(500px) rotateY(-7deg) skewY(-1deg)}50%{transform:perspective(500px) rotateY(8deg) skewY(1deg)}}
@keyframes paint-stroke-glide{0%,100%{transform:translateX(-8%) rotate(-13deg);opacity:.55}50%{transform:translateX(9%) rotate(-8deg);opacity:1}}
@keyframes paint-glint{0%,100%{transform:scale(.65);opacity:.55}50%{transform:scale(1.15);opacity:1}}
@keyframes brush-paint{0%,100%{transform:rotate(37deg) translateY(0)}50%{transform:rotate(24deg) translateY(8px)}}
@keyframes spark-drift{0%,100%{transform:translate(0,0) scale(.7);opacity:.45}50%{transform:translate(9px,-13px) scale(1.3);opacity:1}}
@keyframes tile-fill{0%,18%,100%{opacity:.12;background:#4de8ff}28%,62%{opacity:1;background:#ffd65c}72%{opacity:.4;background:#fe7abf}}
@keyframes grid-sweep{0%,20%{left:-18%;opacity:0}35%,72%{opacity:.9}100%{left:110%;opacity:0}}

#modo-pintar:not(.active) .paint-selector-rv3 .paint-scene *,#modo-pintar:not(.active) .paint-selector-rv3 .paint-scene{animation-play-state:paused!important}

@media(max-width:700px){#modo-pintar .paint-selector-head{margin-bottom:12px}#modo-pintar .paint-selector-rv3 .paint-mode-grid{gap:12px}#modo-pintar .paint-selector-rv3 .paint-mode{min-height:320px}#modo-pintar .paint-scene{height:180px;flex-basis:180px}#modo-pintar .paint-copy{padding:0 16px 17px}}
@media(orientation:landscape) and (max-height:450px){#modo-pintar .paint-selector-rv3{width:calc(100% - 28px);padding:0 0 8px}#modo-pintar .paint-selector-head{margin:0 auto 8px}#modo-pintar .paint-selector-head .eyebrow{font-size:.58rem;margin:0 0 3px}#modo-pintar .paint-selector-head h2{font-size:1.35rem}#modo-pintar .paint-selector-head>p:last-child{font-size:.72rem;margin-top:2px}#modo-pintar .paint-selector-rv3 .paint-mode-grid{gap:12px}#modo-pintar .paint-selector-rv3 .paint-mode{min-height:0;height:calc(100dvh - 124px);max-height:310px;border-radius:16px}#modo-pintar .paint-scene{height:58%;flex-basis:58%;min-height:112px}#modo-pintar .free-canvas{width:min(45%,220px)}#modo-pintar .grid-board{width:min(48%,230px)}#modo-pintar .paint-copy{gap:5px;padding:0 15px 12px}#modo-pintar .paint-copy b{font-size:clamp(.88rem,2vw,1.15rem)}#modo-pintar .paint-copy small{font-size:clamp(.65rem,1.5vw,.78rem)}#modo-pintar .paint-copy em{font-size:.57rem;padding-top:7px}}
@media(max-width:600px) and (orientation:landscape){#modo-pintar .paint-selector-rv3 .paint-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) and (orientation:portrait){#modo-pintar .paint-selector-rv3 .paint-mode-grid{grid-template-columns:1fr}#modo-pintar .paint-selector-rv3 .paint-mode{min-height:300px}}
@media(prefers-reduced-motion:reduce){#modo-pintar .paint-selector-rv3:not([data-paint-motion="normal"]) *{animation:none!important;transition:none!important}}
#modo-pintar .paint-selector-rv3[data-paint-motion="reduced"] *{animation:none!important;transition:none!important}
/* Cada entrada de hover reinicia una reacción breve; el panel permanece inmóvil. */
/* PINTURA-V2C: el estado hover/focus mantiene animaciones infinitas, sin ciclos JS. */
#modo-pintar .paint-selector-rv3 .paint-mode:hover .paint-scene *,
#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .paint-scene *{animation-iteration-count:infinite!important;animation-play-state:running!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .free-canvas img,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .free-canvas img{animation-duration:1.7s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .paint-stroke,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .paint-stroke{animation-duration:.8s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .paint-glint,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .paint-glint{animation-duration:1.2s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .paint-brush,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .paint-brush{animation-duration:1.4s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .paint-spark,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .paint-spark{animation-duration:1.35s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .grid-board .tile,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .grid-board .tile{animation-duration:.95s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .grid-sweep,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .grid-sweep{animation-duration:1.55s!important;}
#modo-pintar .paint-selector-rv3 .paint-mode:hover .grid-spark,#modo-pintar .paint-selector-rv3 .paint-mode:focus-visible .grid-spark{animation-duration:1.2s!important;}
/* El modo reducido prevalece también si una tarjeta conserva el hover o el foco. */
#modo-pintar .paint-selector-rv3[data-paint-motion="reduced"] .paint-mode:hover .paint-scene *,
#modo-pintar .paint-selector-rv3[data-paint-motion="reduced"] .paint-mode:focus-visible .paint-scene *{animation:none!important;animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){#modo-pintar .paint-selector-rv3:not([data-paint-motion="normal"]) .paint-mode:hover .paint-scene *,#modo-pintar .paint-selector-rv3:not([data-paint-motion="normal"]) .paint-mode:focus-visible .paint-scene *{animation:none!important;animation-play-state:paused!important;}}

/* El ajuste explícito Normal prevalece sobre prefers-reduced-motion del sistema. */
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .paint-scene *{animation-iteration-count:infinite!important;animation-play-state:running!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .free-canvas img{animation-duration:3.8s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .paint-stroke{animation-duration:3.1s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .paint-glint{animation-duration:2.7s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .paint-brush{animation-duration:3.5s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .paint-spark{animation-duration:3.5s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .grid-board .tile{animation-duration:4.8s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .grid-sweep{animation-duration:3.8s!important;}
#modo-pintar .paint-selector-rv3[data-paint-motion="normal"] .grid-spark{animation-duration:3.5s!important;}