/* Mi Súper · capa «lápiz de colores» para la interfaz (va DESPUÉS del <style> de index.html; no cambia el HTML).
   Marcos dibujados a lápiz (border-image, generados por tools/lapiz/ui.py) en vez de borde de tinta recto + sombra de bloque.
   Texto, tamaños y contrastes no cambian. */
body.k, body { background-image: url("/ninos/super/lapiz/ui/papel.webp"); background-size: 128px 128px; }

/* botones, píldoras, tarjetas pequeñas, chips: marco pequeño con sombra rayada */
body.k .pill, body.k .tb, body.k .k-btn, body.k .k-round, body.k .mini, body.k .cerrar, body.k #zoom button, body.k .card,
body.k .cromo, body.k .tabs button, body.k .chips button, body.k .tiendas button, body.k .prodlist button, body.k .coop-tec button,
body.k .coop-num span, body.k #guia button, body.k .pz, body.k .mis, body.k .pzr, body.k .rapido, body.k #info, body.k #aviso,
body.k .aviso-obras, body.k #editBar, body.k .cuentas3 > div, body.k .k-card, body.k #guia {
  border-color: transparent; box-shadow: none;
  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 .coop-reac button { border-color: var(--ink); box-shadow: 2px 2px 0 rgba(58, 45, 76, .35); }
/* hojas y menús grandes: marco grande */
body.k .sheet, body.k .ovcard, body.k #menu .k-card, body.k #resumen .k-card, body.k #pausa .k-card {
  border-color: transparent; box-shadow: none;
  border-image: url("/ninos/super/lapiz/ui/marco.webp") 52 64 64 52 / 26px 32px 32px 26px / 0 6px 6px 0 stretch;
}
/* pulsado / activo: marco sin sombra */
body.k .tb:active:not([disabled]), body.k .k-btn:active, body.k .mini:active:not([disabled]), body.k .cerrar:active, body.k #zoom button:active,
body.k .card.tap:active, body.k .tiendas button:active, body.k .chips button:active, body.k .coop-tec button:active {
  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;
}
body.k .tb.glow, body.k .tb[class*="glow"] { box-shadow: 0 0 0 6px rgba(255, 207, 74, .75); }
/* separadores: línea de lápiz */
.sheet .pie { border-top: 0; background: url("/ninos/super/lapiz/ui/linea.webp") repeat-x left top / 160px 6px; }
/* barras de progreso con borde suave */
.pill .bar, .stock .bar, .mis .bar { border-color: #5a4a7a; }
/* dibujos a lápiz en el DOM (iconos, criaturas del álbum) */
svg image { image-rendering: auto; }
.cromo .pic svg.lzcr.sil { filter: brightness(0) invert(.72) sepia(.3) hue-rotate(210deg); opacity: .85; }