/* Pintar: la hoja de pintar ES la página del libro. Llena toda la página (alto, ancho y orillas), sin que se vea
   otro fondo debajo. Los colores y las herramientas flotan FIJOS sobre la hoja. Al pasar la hoja, el próximo dibujo.
   Los niños no leen, escuchan: nada de etiquetas ni botones con texto. */

/* el contenido de pintar llena TODA la página del libro (cubre el papel crema, llega hasta el marco) */
.pag:has(.pin){padding:0!important}
.contenido:has(.pin){position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none!important;margin:0!important}
.flujo:has(.pin){position:absolute!important;inset:0!important;padding:0!important;display:block!important}
.pag:has(.pin) .numero{display:none!important}        /* el niño no lee el número; ya está arriba en la barra */

.pin{position:absolute!important;inset:0!important;display:block;margin:0}

/* la hoja: papel blanco que llena toda la página, con la misma forma de página del libro */
.pin-caja{position:absolute;inset:0;background:#fff;border-radius:4px 14px 14px 4px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
/* el lienzo llena la hoja: el dibujo va centrado y grande dentro, y el color llena hasta las orillas */
.pin-lienzo{position:absolute;inset:0}
.pin-lienzo canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.pin-linea{pointer-events:none}
.pin-nums{position:absolute;inset:0;pointer-events:none}
.pin-nums span{position:absolute;transform:translate(-50%,-50%);font-family:var(--ui,'Fredoka',sans-serif);font-weight:700;font-size:28px;line-height:1;color:#1f2a44;background:rgba(255,255,255,.88);border:3px solid #1f2a44;border-radius:999px;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.pin-nums span.hecha{opacity:.22;border-style:dashed}

/* colores: franja flotante fija ABAJO, sobre la hoja, bien centrada (no se pierden en las orillas) */
.pin-pal{position:absolute;bottom:8px;left:7px;right:7px;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:7px 8px;background:rgba(255,255,255,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:16px;box-shadow:0 2px 10px rgba(31,42,68,.16)}
.pin-col{width:30px;height:30px;border-radius:50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 0 0 2px #e3e6ef,0 2px 0 rgba(0,0,0,.12);cursor:pointer;transition:transform .12s;padding:0;flex:0 0 auto}
.pin-col.sel{transform:scale(1.16);box-shadow:0 0 0 4px #1f2a44,0 2px 0 rgba(0,0,0,.12)}
.pin-col b{font-family:var(--ui,'Fredoka',sans-serif);font-size:18px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 4px rgba(0,0,0,.35)}

/* herramientas: dos iconos flotantes discretos arriba a la derecha (goma y deshacer) */
.pin-herr{position:absolute;top:8px;right:8px;z-index:5;display:flex;flex-direction:column;gap:8px}
.pin-tool{display:flex;align-items:center;justify-content:center;font-size:19px;width:38px;height:38px;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:2.5px solid #e3e6ef;border-radius:50%;box-shadow:0 2px 8px rgba(31,42,68,.14);cursor:pointer;padding:0}
.pin-tool span{display:none}        /* el texto "Goma"/"Atrás" se oculta: los niños no leen */
.pin-tool.sel{border-color:#1f2a44;background:#fff4e6}
.pin-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b3302c;font-weight:700}

/* La profe: foto del render 3D nuevo en el botón de la guía (reemplaza el dibujo viejo). */
.guia-foto{width:1.45em;height:1.45em;object-fit:cover;object-position:center 12%;border-radius:50%;display:block}
.buho.guia-svg{display:flex;align-items:center;justify-content:center;line-height:0}