/* Duditopia · Puzles en acuarela + lápiz (duditopia_src/ninos/puzles/dudi.css; solo duditopia.com).
   Va después de /ninos/puzles/puzles.css; /dt/ninos.css (barra compacta, fondo acuarela, k-card/k-btn) va la última.
   No cambia el HTML de los tipos: restila sus clases (.pz-*, .nn-*, .dz-*, .tb-*, .sd-*, .lb-*, .sq-*, .tg-*) con
   «body.k» delante para ganar a los estilos que cada tipo inyecta al cargar (PZ.css). */
.c-coral { --c: #e3866b; --c-l: #f6ddd2; --c-d: #a5462f; }
.c-blue { --c: #4f78b0; --c-l: #dfe7ef; --c-d: #2e4f7e; }
.c-mint { --c: #5d8a62; --c-l: #dfe8d6; --c-d: #2f4a3a; }
.c-yellow { --c: #f2b84b; --c-l: #f8ebc8; --c-d: #6b5a2e; }
.c-lila { --c: #8a74b8; --c-l: #ebe4f3; --c-d: #5b4a86; }
.c-sky { --c: #7fb3cf; --c-l: #e2eef4; --c-d: #2e5f78; }
.c-green { --c: #6f9a55; --c-l: #e2ebd6; --c-d: #3c5a2c; }
body.k { overflow-x: hidden; }
body.k .pz-wrap svg { shape-rendering: geometricPrecision; }
body.k #pzBack[hidden] { display: none; }
body.k svg[data-lz="s"], body.k .tg-pc svg, body.k .tg-board svg { overflow: visible; }
body.k svg[data-lz="h"] { overflow: hidden !important; }
body.k { --pz-papel: #f8f4ea; --pz-aro: 0 0 0 1.5px rgba(31,43,37,.62) inset, 2px 2.5px 0 -.4px rgba(31,43,37,.3);
  --pz-marco-s: url(/ninos/super/lapiz/ui/marco-s.webp) 40 48 48 40/20px 24px 24px 20px/0 4px 4px 0 stretch; }

/* piezas de papel con marco a lápiz (como los botones de Mi Súper) */
body.k .pz-type, body.k .pz-lv, body.k .pz-band, body.k .pz-tool, body.k .pz-lhead-sum, body.k .nn-mode, body.k .sd-p, body.k .sq-opt,
body.k .dz-num, body.k .tg-rot {
  border: 0; box-shadow: none; border-radius: 6px; background-color: var(--pz-papel); border-image: var(--pz-marco-s); }
body.k .pz-type:hover, body.k .pz-lv:not(.lock):hover { box-shadow: none; transform: translateY(-2px) rotate(-.4deg); }
body.k .pz-type:active, body.k .pz-lv:not(.lock):active, body.k .pz-band:active, body.k .pz-tool:active:not([disabled]), body.k .nn-mode:active,
body.k .sd-p:active, body.k .sq-opt:active, body.k .dz-num:active {
  transform: translateY(2px); box-shadow: none; border-image-source: url(/ninos/super/lapiz/ui/marco-n.webp); border-image-slice: 40; border-image-width: 20px; border-image-outset: 0; }

/* ---------- portada del centro de puzles ---------- */
body.k .pz-hero { background: var(--pz-papel) url(/dt/grano.webp); overflow: visible; }
body.k .pz-hero::before { display: none; }
body.k .pz-hero h2, body.k .pz-h2, body.k .pz-lhead h2, body.k .pz-cel h2 { font-weight: 650; letter-spacing: -.02em; }
body.k .pz-hero h2 span { color: var(--pink-d); background: url(/assets/marcador-amarillo.webp) center 72%/100% .5em no-repeat; padding: 0 .08em; }
body.k .pz-hero-dudi { width: 156px; bottom: -6px; }
body.k .pz-hero-pz { width: 138px; transform: rotate(7deg); }
body.k .pz-band { padding: 8px 16px 9px; }
body.k .pz-band b { font-weight: 650; }
body.k .pz-band:hover { background-color: #fff8e6; }
body.k .pz-band[aria-checked="true"].b0 { background-color: #f2b84b; }
body.k .pz-band[aria-checked="true"].b1 { background-color: #bcd3ad; }
body.k .pz-band[aria-checked="true"].b2 { background-color: #d3c6e6; }
body.k .pz-cont { border: 0; background: var(--pz-papel); box-shadow: var(--pz-aro); font-weight: 700; }
body.k .pz-cont:hover { background: #fff8e6; }
body.k .pz-cont:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px rgba(31,43,37,.62) inset; }
body.k .pz-cont svg { width: 38px; height: 38px; }
body.k .pz-type { overflow: visible; }
body.k .pz-type-art { border-bottom: 0; margin: 6px 6px 0; border-radius: 4px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(255,251,238,.9), rgba(255,251,238,0) 70%), var(--c-l); }
body.k .pz-type-art::before { opacity: .5; background-image: url(/dt/grano.webp), radial-gradient(ellipse 120% 70% at 50% 115%, var(--c) 0 30%, transparent 60%);
  background-size: auto, 100% 100%; mix-blend-mode: multiply; }
body.k .pz-type-art svg { width: 124px; height: 124px; }
body.k .pz-type-body > b { font-weight: 650; }
body.k .pz-bar { border: 0; background: #ece4d2; box-shadow: 0 0 0 1.4px rgba(31,43,37,.5) inset; height: 14px; }
body.k .pz-bar i { border: 0; border-radius: 99px; background: repeating-linear-gradient(-55deg, rgba(255,255,255,.25) 0 3px, rgba(255,255,255,0) 3px 7px), var(--c);
  box-shadow: 0 0 0 1.3px rgba(31,43,37,.35) inset; }
body.k .pz-foot { color: var(--soft); }

/* ---------- mapa de niveles ---------- */
body.k .pz-lhead { background: var(--pz-papel) url(/dt/grano.webp); }
body.k .pz-lhead-art, body.k .pz-info-art { border: 0; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; overflow: visible;
  background: radial-gradient(circle at 50% 50%, rgba(255,251,238,.95) 0 30%, var(--c-l) 62%, rgba(255,255,255,0) 72%); }
body.k .pz-lhead-art svg { width: 104px; height: 104px; }
body.k .pz-lhead-sum b { font-weight: 650; }
body.k .pz-levels { gap: 18px; }
body.k .pz-lv b { font-weight: 650; }
body.k .pz-lv.done { background-color: var(--c-l); }
body.k .pz-lv.next { background-color: #f2b84b; animation: pz-late 1.6s ease-in-out infinite; }
body.k .pz-lv.lock { background-color: rgba(236,230,216,.8); color: #8c8576; border-image: var(--pz-marco-s); box-shadow: none; opacity: .85; }
body.k .pz-lv-st svg { width: 27px; height: 27px; }
body.k .pz-lv-lock svg { width: 38px; height: 38px; }
@keyframes pz-late { 50% { transform: translateY(-3px) rotate(-1deg); } }

/* ---------- pantalla de juego ---------- */
body.k .pz-info { background-image: url(/dt/grano.webp); }
body.k .pz-info-art svg { width: 54px; height: 54px; }
body.k .pz-say { color: var(--c-d); font-weight: 700; }
body.k .pz-tool { font-weight: 700; }
body.k .pz-tool.t-hint { background-color: #ebe4f3; }
body.k .pz-tool:hover:not([disabled]) { background-color: #fff8e6; }
@media (max-width: 899px) { body.k .pz-tools { background: linear-gradient(rgba(243,237,224,0), #f3ede0 30%); } }
/* tableros: papel + aro de lápiz en vez de tinta y sombra de bloque */
body.k .sd-grid, body.k .sq-row, body.k .lb-board, body.k .dz-board, body.k .tb-grid, body.k .nn-wrap, body.k .dz-thumb, body.k .lb-chip {
  border-color: rgba(31,43,37,.72); border-width: 2.5px; box-shadow: 3px 4px 0 -1px rgba(31,43,37,.2); }
body.k .lb-board:focus-visible, body.k .dz-board:focus-visible { box-shadow: 0 0 0 4px rgba(79,120,176,.55); }

/* pixel-arte escondido */
body.k .nn-wrap { background: var(--pz-papel) url(/dt/grano.webp); border-radius: 10px; }
body.k .nn-board { border: 2px solid #4a574f; background: #fffdf6; }
body.k .nn-c { border-color: #e2d9c5; }
body.k .nn-c.bR { border-right-color: #9a9078; } body.k .nn-c.bB { border-bottom-color: #9a9078; }
body.k .nn-c.f { background: #3f4d6b; box-shadow: inset 2px 2px 0 rgba(255,255,255,.14), inset -2px -2px 0 rgba(0,0,0,.18); }
body.k .nn-c.x::before, body.k .nn-c.x::after { background: #c46a55; }
body.k .nn-cc .nn-cl:nth-child(odd), body.k .nn-rc .nn-cl:nth-child(odd) { background: rgba(236,228,210,.6); }
body.k .nn-cl { font-weight: 650; }
body.k .nn-cl.ok { color: #b2a991; }
body.k .nn-cl.cur { background: #f8ebc8 !important; }
body.k .nn-mode { font-weight: 700; }
body.k .nn-mode i { border: 0; box-shadow: 0 0 0 1.5px rgba(31,43,37,.55) inset; border-radius: 6px; color: #a5462f; }
body.k .nn-mode.paint i { background: #3f4d6b; box-shadow: none; }
body.k .nn-mode[aria-pressed="true"] { background-color: #f2b84b; }
body.k .nn.done .nn-wrap { background: var(--pz-papel) url(/dt/grano.webp); }
body.k .nn-lz { position: absolute; inset: 0; z-index: 3; background: #f8f4ea url(/dt/grano.webp); pointer-events: none; opacity: 0; animation: nn-lz .9s ease-out forwards; }
body.k .nn-lz svg { display: block; width: 100%; height: 100%; }
body.k .nn.done .nn-board { background: transparent; border-color: transparent; }
@keyframes nn-lz { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* puzle deslizante */
body.k .dz-board { background: #6b5a44; box-shadow: inset 0 0 0 3px #8a7558, 3px 4px 0 -1px rgba(31,43,37,.2); border-radius: 10px; }
body.k .dz-t i { image-rendering: auto; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset -2px -2px 0 rgba(31,43,37,.18); }
body.k .dz-full { image-rendering: auto; }
body.k .dz-t b { border: 0; box-shadow: 0 0 0 1.4px rgba(31,43,37,.55) inset; font-weight: 650; }
body.k .dz-thumb { border-radius: 8px; background: var(--pz-papel); }
body.k .dz-cap b { font-weight: 650; }
body.k .dz-num { font-weight: 700; }
body.k .dz-num[aria-pressed="true"] { background-color: #f2b84b; }

/* tuberías del jardín: césped y piezas a lápiz */
body.k .tb-grid { background: #9ccb7c url(/ninos/puzles/lapiz/tex-cesped@2x.webp) 0 0/calc(200% / var(--n)) calc(200% / var(--n)); image-rendering: auto; border-radius: 10px; }
body.k .tb-c .lz-moja { opacity: 0; transition: opacity .3s; }
body.k .tb-c.wet .lz-moja { opacity: 1; }
body.k .tb-c:not(.empty):not(.src):hover { background: rgba(255,251,238,.25); }
body.k .tb-c:focus-visible { outline-color: #f2b84b; }
body.k .tb-c.pz-hint { box-shadow: inset 0 0 0 4px #8a74b8; }

/* sudoku de dibujos */
body.k .sd-grid { border-radius: 10px; background: #fffdf6; }
body.k .sd-c { background: #fffdf6; border-color: #e2d9c5; }
body.k .sd-c.bR { border-right: 2.5px solid #5d6a62; } body.k .sd-c.bB { border-bottom: 2.5px solid #5d6a62; }
body.k .sd-c.given { background: #f1ead9; }
body.k .sd-c.peer { background: #edf2f4; } body.k .sd-c.given.peer { background: #e4e9e6; }
body.k .sd-c.same { background: #f8ebc8; }
body.k .sd-c.sel { background: #f2c25c; box-shadow: inset 0 0 0 2.5px #2f4a3a; }
body.k .sd-c.bad { background: #f6d6cc; } body.k .sd-c.bad.sel { background: #efb9a8; } body.k .sd-c.bad b { color: #a5462f; }
body.k .sd-c b, body.k .sd-p b { font-weight: 650; color: var(--blue-d); }
body.k .sd-c.given b, body.k .sd-p b { color: var(--ink); }
body.k .sd-c.hinted::after { border-color: #8a74b8; }
body.k .sd-p:hover { background-color: #fff8e6; }
body.k .sd-p.er { background-color: #f6ddd2; }
@keyframes sd-wave { 50% { background: #dfe8d6; transform: scale(.92); } }

/* laberinto */
body.k .lb-board { background: #5c9a52; border-radius: 10px; }
body.k .lb-chip { border-radius: 99px; background: var(--pz-papel); font-weight: 650; }
body.k .lb-chip.ok { background: #dfe8d6; }
body.k .lb-trail circle { fill: #fffdf6; stroke: #8a74b8; }
body.k .lb-me > span { filter: drop-shadow(0 2px 0 rgba(31,43,37,.25)); }

/* secuencias */
body.k .sq-row { border-radius: 10px; background: var(--pz-papel) url(/dt/grano.webp); }
body.k .sq-it { border: 0; background: #fffdf6; box-shadow: 0 0 0 1.3px rgba(31,43,37,.35) inset; border-radius: 10px; }
body.k .sq-it .dots i { background: #e3866b; border: 0; box-shadow: 0 0 0 1.4px rgba(122,50,32,.7) inset; }
body.k .sq-gap { background: #fffdf6; border: 2.5px dashed #8a74b8; box-shadow: none; }
body.k .sq-gap.sel { background: #ebe4f3; border-style: solid; }
body.k .sq-gap.full { border-color: rgba(31,43,37,.55); }
body.k .sq-gap.good { background: #dfe8d6; border-color: #2f4a3a; }
body.k .sq-gap .q { color: #8a74b8; font-weight: 650; }
body.k .sq-dots i { border: 0; border-radius: 50%; background: #ece4d2; box-shadow: 0 0 0 1.4px rgba(31,43,37,.5) inset; }
body.k .sq-dots i.on { background: #f2b84b; } body.k .sq-dots i.ok { background: #5d8a62; }
body.k .sq-opt:hover { background-color: #fff8e6; }
body.k .sq-q { font-weight: 650; }

/* tangram */
body.k .tg-tray { border: 2px dashed #b8ab90; background: rgba(248,244,234,.6); border-radius: 12px; }
body.k .tg-pc { filter: drop-shadow(2px 3px 0 rgba(31,43,37,.22)); }
body.k .tg-pc.on, body.k .tg.done .tg-pc { filter: none; }
body.k .tg-pc svg { overflow: visible; }
body.k .tg-rot { font-weight: 700; }

/* ---------- celebración ---------- */
body.k .pz-ov { background: rgba(31,43,37,.5); }
body.k .pz-cel { background-image: url(/dt/grano.webp); }
body.k .pz-cel-pic > * { border: 0; border-radius: 8px; background: radial-gradient(circle at 50% 48%, #fffdf6 0 55%, #f3ead6 100%); box-shadow: 0 0 0 1.5px rgba(31,43,37,.5), 3px 4px 0 -1px rgba(31,43,37,.2); overflow: visible; padding: 8px; }
body.k .pz-cel-chars { gap: 0; }
body.k .pz-cel-dudi { height: 120px; }
body.k .pz-cel-ava { margin-left: -6px; }
body.k .pz-cel-prize span { border: 0; background: #f8ebc8; box-shadow: var(--pz-aro); font-weight: 650; }
body.k .pz-cel-btns .k-btn.ghost { background: var(--pz-papel); color: var(--ink); }
body.k .pz-confeti i { border: 0; border-radius: 2px 5px 3px 6px; opacity: .85; }
@media (max-width: 760px) {
  body.k .pz-hero-dudi { width: 112px; }
  body.k .pz-type-art svg { width: 88px; height: 88px; }
  body.k .pz-lhead-art svg { width: 70px; height: 70px; }
  body.k .pz-cel-dudi { height: 92px; }
}
@media (max-width: 400px) { body.k .pz-type-art { border-right: 0; margin: 6px 0 6px 6px; } }
@media (prefers-reduced-motion: reduce) { body.k .pz-lv.next, body.k .nn-lz { animation: none !important; opacity: 1; } }