/* Duditopia · capa «acuarela + lápiz» del kit de peques (GENERADO desde tools/duditopia/plantillas/ninos.css).
   Va DESPUÉS de /ninos/ui.css (y de lapiz.css en Mi Súper); no cambia el HTML ni la lógica.
   - Barra superior = versión compacta de la cabecera de la web: sello Duditopia (inicio), título Bricolage, «yo» con
     monedas/estrellas y sonido en píldoras de papel, línea de lápiz debajo.
   - Fondo: la banda de acuarela de la web sobre papel con grano (sin el cielo pixel).
   - Tarjetas y botones: papel con marco de lápiz (los mismos marcos de Mi Súper, tools/lapiz/ui.py). */
@font-face{font-family:"Bricolage Grotesque";font-weight:600 800;font-display:swap;src:url(/fonts/BricolageGrotesque-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400 800;font-display:swap;src:url(/fonts/DMSans-latin.woff2) format("woff2")}
:root:root:root{
  --ink:#1f2b25;--soft:#3a4a42;--cream:#f3ede0;--line:#e4dccb;--line2:#d9cfb9;
  --pink:#e3866b;--pink-d:#a5462f;--pink-l:#f6ddd2;--yellow:#f2b84b;--yellow-d:#6b5a2e;--yellow-l:#f8ebc8;
  --mint:#5d7a55;--mint-d:#2f4a3a;--mint-l:#dfe8d6;--blue:#4f78b0;--blue-d:#2e4f7e;--blue-l:#dfe7ef;--lilac:#8a74b8;--lilac-d:#5b4a86;--lilac-l:#ebe4f3;
  --round:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--pixel:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;
  --k-shadow:none;
}
html{background:#f3ede0}
body.k,body.k.jugando{background:transparent;color:var(--ink)}
body.k :focus-visible{outline:3px solid var(--mint-d)}

/* fondo: acuarela + papel (oculta el cielo pixel que pinta ui.js) */
.k-sky{background:url(/dt/grano.webp),url(/dt/acuarela-banda.webp) center top/max(100%,1500px) auto no-repeat,#f3ede0!important}
.k-sky>*{display:none!important}
@media (max-width:760px){.k-sky{background:url(/dt/grano.webp),url(/dt/acuarela-banda-m.webp) center top/max(100%,700px) auto no-repeat,#f3ede0!important}}

/* ---------- barra superior compacta ---------- */
body.k .k-bar{gap:12px;padding:10px clamp(12px,3vw,40px) 14px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:0;
  background:rgba(243,237,224,.9) url(/assets/linea.webp) repeat-x left bottom/160px 4px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.k .k-bar h1{flex:1;text-align:left;font:650 26px/1.1 var(--pixel);letter-spacing:-.02em;color:var(--ink);margin-left:4px}
.k-marca{flex:none;display:block;line-height:0;border-radius:8px;text-decoration:none}
.k-marca img{display:block;height:50px;width:auto;filter:drop-shadow(0 0 8px rgba(246,240,226,.9))}
.k-marca .k-marca-s{display:none;width:48px;height:48px}
/* botones redondos y «yo»: píldoras de papel como «Ver el directo» de la portada */
body.k .k-bar .k-round,body.k #hud .k-round,body.k .k-me{border:0;border-image:none;background:rgba(248,244,234,.95);color:var(--ink);
  box-shadow:0 0 0 1.5px rgba(31,43,37,.62) inset,2px 2.5px 0 -.4px rgba(31,43,37,.3)}
body.k .k-bar .k-round{width:52px;height:52px;border-radius:50%}
body.k .k-round svg{width:34px;height:34px}
body.k .k-bar .k-round:hover,body.k .k-me:hover{background:#fff8e6}
body.k .k-bar .k-round:active,body.k .k-me:active{transform:translateY(1px);box-shadow:0 0 0 1.5px rgba(31,43,37,.62) inset}
body.k .k-me{height:52px;padding:0 14px 0 4px}
body.k .k-me-pic{width:44px;height:44px;border:0;background:#dfe8d6;box-shadow:0 0 0 1.5px rgba(31,43,37,.5)}
body.k .k-me-num{font:700 15px/1.25 var(--round)}
body.k .k-me-num svg{width:18px;height:18px}

@media (max-width:640px){
  .k-marca .k-marca-l{display:none}
  .k-marca .k-marca-s{display:block}
}
@media (max-width:480px){
  body.k .k-bar{gap:8px;padding:8px 10px 12px;padding-top:max(8px,env(safe-area-inset-top))}
  body.k .k-bar h1{font-size:21px}
  .k-marca .k-marca-s{width:44px;height:44px}
  body.k .k-bar .k-round{width:46px;height:46px} body.k .k-round svg{width:30px;height:30px}
  body.k .k-me{height:46px} body.k .k-me-pic{width:38px;height:38px}
}

/* ---------- piezas: papel con marco de lápiz ---------- */
body.k .k-card{background:#f8f4ea;border:0;box-shadow:none;border-radius:6px;
  border-image:url(/ninos/super/lapiz/ui/marco.webp) 52 64 64 52/26px 32px 32px 26px/0 6px 6px 0 stretch}
body.k .k-btn{border:0;box-shadow:none;border-radius:6px;font-family:var(--pixel);font-weight:650;letter-spacing:-.01em;
  border-image:url(/ninos/super/lapiz/ui/marco-s.webp) 40 48 48 40/20px 24px 24px 20px/0 4px 4px 0 stretch}
body.k .k-btn:hover{transform:translateY(-1px);box-shadow:none;filter:brightness(1.04)}
body.k .k-btn:active{transform:translateY(2px);border-image-source:url(/ninos/super/lapiz/ui/marco-n.webp);border-image-slice:40;border-image-width:20px;border-image-outset:0}
body.k .k-btn svg{width:30px;height:30px}
body.k .k-btn{background:var(--yellow);color:#2b2410}
body.k .k-btn.alt{background:var(--mint-d);color:#fbf6ea}
body.k .k-btn.pink{background:var(--pink);color:#2a0e05}
body.k .k-btn.blue{background:#f8f4ea;color:var(--ink)}
body.k .k-title{font:650 30px/1.15 var(--pixel);letter-spacing:-.02em}
body.k .k-note{color:var(--soft)}
@media (prefers-reduced-motion:reduce){body.k .k-btn,body.k .k-round{transition:none}}

/* ---------- Mi avatar (clases .av-* de ninos/avatar/index.html) ---------- */
body.k .av-coins{border:0;background:#f8ebc8;font:650 30px/1 var(--pixel);box-shadow:0 0 0 1.5px rgba(31,43,37,.6) inset,2px 2.5px 0 -.4px rgba(31,43,37,.3)}
body.k .av-coins .k-note{color:#4a3d1c!important}
body.k .av-figure{border:0;border-radius:6px;box-shadow:none;background-color:#f8f4ea;
  background-image:radial-gradient(ellipse at 70% 22%,rgba(255,246,222,.9),rgba(255,246,222,0) 45%),linear-gradient(#cfd9d6,#e8e6d8 64%,#c9d6b4 64%,#b4c79c);
  border-image:url(/ninos/super/lapiz/ui/marco.webp) 52 64 64 52/26px 32px 32px 26px/0 6px 6px 0 stretch}
body.k .av-figure #figSvg{border-radius:4px}
body.k .av-bubble{border:0;background:#f8f4ea;font:650 22px/1.1 var(--pixel);box-shadow:0 0 0 1.5px rgba(31,43,37,.6) inset,2px 2.5px 0 -.4px rgba(31,43,37,.3)}
body.k .av-tab,body.k .av-item{border:0;box-shadow:none;border-radius:6px;background:#f8f4ea;font-family:var(--pixel);font-weight:650;
  border-image:url(/ninos/super/lapiz/ui/marco-s.webp) 40 48 48 40/20px 24px 24px 20px/0 4px 4px 0 stretch}
body.k .av-tab svg{width:44px;height:44px}
body.k .av-tab[aria-selected="true"]{background:#f2b84b}
body.k .av-tab:active,body.k .av-item:active{transform:translateY(2px);box-shadow:none}
body.k .av-box h2{font:650 24px/1.1 var(--pixel);letter-spacing:-.01em}
body.k .av-sec+.av-sec{margin-top:20px;padding-top:16px;background:url(/assets/linea.webp) repeat-x left top/160px 4px}
body.k .av-sw{border:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(31,43,37,.55) inset,2px 2.5px 0 -.4px rgba(31,43,37,.3)}
body.k .av-th{border:0;border-radius:10px;background:#f1ece0;font-size:13px;box-shadow:0 0 0 1.4px rgba(31,43,37,.45) inset,2px 2.5px 0 -.4px rgba(31,43,37,.25)}
body.k .av-sw[aria-pressed="true"],body.k .av-th[aria-pressed="true"]{outline:3px solid #2f4a3a;outline-offset:3px}
body.k .av-th[aria-pressed="true"]{background:#f8ebc8}
body.k .av-sw:active,body.k .av-th:active,body.k .av-chip:active{transform:translateY(2px);box-shadow:0 0 0 1.5px rgba(31,43,37,.55) inset}
body.k .av-chip{border:0;background:rgba(248,244,234,.95);box-shadow:0 0 0 1.4px rgba(31,43,37,.55) inset;font-weight:600}
body.k .av-chip[aria-pressed="true"]{background:#2f4a3a;color:#f6f1e4;box-shadow:none}
body.k .av-item svg.cqa-svg{border:0;border-radius:4px;background:#e6ebe2;box-shadow:0 0 0 1px rgba(31,43,37,.15)}
body.k .av-price{border:0;background:#f8ebc8;font-family:var(--pixel);font-weight:650;box-shadow:0 0 0 1.2px rgba(31,43,37,.45) inset}
body.k .av-price svg{width:22px;height:22px}
body.k .av-item.on{background:#dfe8d6;outline:0;box-shadow:none}
body.k .av-item.on::after{border:0;background:#3d5a3a;box-shadow:0 0 0 2px #f8f4ea}
body.k .av-item.poor .av-price{background:#ece6d8;color:#4f5c54}
body.k .av-item.mine .av-price{background:#bcd3ad}
body.k .av-item.lock{background:#eee8f3}
body.k .av-item .need{color:#a5462f}
body.k .av-tag{border:0;background:#f2b84b;font-weight:650;box-shadow:0 0 0 1.2px rgba(31,43,37,.5) inset}
body.k .av-modal{background:rgba(31,43,37,.5)}
body.k .av-modal h3{font:650 28px/1.15 var(--pixel)}
body.k .wz-steps i{border:0;border-radius:50%;background:#ece4d2;box-shadow:0 0 0 1.4px rgba(31,43,37,.5) inset}
body.k .wz-steps i.on{background:#e3866b}