/* Aprendi2 (viene de Colorines) — pizarra mágica (dibujo libre). */

/* La distribución, la cabecera, las herramientas y la barra de colores son las de todas las pantallas de
   dibujo (AP.ui.header / toolbar / workspace / palette, en core.css): acá sólo lo propio de la pizarra. */
.screen--pizarra .btn.disabled { opacity: 0.35; }
.screen--pizarra .pz-tool .icon { width: 74%; height: 74%; }
.screen--pizarra .cl-cur { fill: var(--pz-color, #ff3b30); } /* el balde (ícono de colorear) con el color actual */
/* Insignia del sello elegido: proporcional al botón (en el celular los botones se achican). */
.screen--pizarra .pz-stamp-badge {
  position: absolute;
  right: -10%;
  bottom: -10%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.screen--pizarra .pz-stamp-badge canvas { width: 100% !important; height: 100% !important; }
.screen--pizarra .pz-stamp-badge .stamp-emo { width: 84% !important; height: 84% !important; }

/* Pizarra */
.screen--pizarra .pz-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.screen--pizarra .pz-board {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s;   /* fondo, bordes y marco: .work-board (core.css), igual que colorear */
  cursor: crosshair;
}
.screen--pizarra .pz-board--chalk {
  box-shadow: 0 0 0 7px #c68a4e, 0 0 0 10px #8d5a33, 0 10px 26px rgba(43, 34, 64, 0.25);
}
.screen--pizarra .pz-board canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.screen--pizarra .pz-board canvas[hidden] { display: none; }
.screen--pizarra .pz-board.pz-shake { animation: pz-shake 0.45s ease; }
@keyframes pz-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}

/* Barrita de "borrar todo" (como el deslizador de la pizarra mágica de juguete) */
.screen--pizarra .pz-wiper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 44px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-60px);
  will-change: transform;
}
.screen--pizarra .pz-board.pz-wiping .pz-wiper { opacity: 1; }
.screen--pizarra .pz-wiper-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  bottom: 6px;
  border-radius: 14px;
  background: linear-gradient(90deg, #ffb000 0%, #ffd23f 30%, #fff3b0 45%, #ffd23f 60%, #ff9f1c 100%);
  box-shadow: 0 0 0 3px var(--ink), 6px 0 14px rgba(43, 34, 64, 0.28);
}
.screen--pizarra .pz-wiper-bar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 70px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
}
.screen--pizarra .pz-wiper-knob {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9aa0 0%, #ff5a5f 45%, #d93a45 100%);
  box-shadow: 0 0 0 3px var(--ink), 0 4px 8px rgba(43, 34, 64, 0.3);
}

/* Grosor: un botón con el puntito del grosor actual; al tocarlo se despliegan los 4 (AP.ui.dropdown). */
.screen--pizarra .pz-sizebtn .pz-dot { --d: var(--p, 38%); }

.screen--pizarra .pz-size .pz-dot,
.screen--pizarra .pz-sizebtn .pz-dot {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--pz-dot, #ff3b30);
  box-shadow: 0 0 0 2px rgba(43, 34, 64, 0.55);
  pointer-events: none;
}
.screen--pizarra[data-tool='goma'] .pz-size .pz-dot,
.screen--pizarra[data-tool='goma'] .pz-sizebtn .pz-dot { box-shadow: 0 0 0 2px var(--ink); background: #fff; outline: 2px dashed rgba(43, 34, 64, 0.35); outline-offset: 2px; }
.screen--pizarra .pz-bgbtn .icon { width: 72%; height: 72%; }

.screen--pizarra .pz-palette--off { opacity: 0.45; transition: opacity 0.2s; }

/* Celulares (AP.ui.PHONE) */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 520px) {
  .screen--pizarra .pz-board--chalk { box-shadow: 0 0 0 5px #c68a4e, 0 0 0 7px #8d5a33, 0 6px 16px rgba(43, 34, 64, 0.25); }
}

/* ---------- Selectores (sellos y fondo) — se abren en un modal fuera de la pantalla ---------- */
.modal-back.pz-modal .modal-body { padding: 18px 18px 22px; }
.pz-pick-head { display: flex; justify-content: center; height: 56px; margin: 0 56px 10px; }
.pz-pick-head .icon { width: 56px; height: 56px; }
.pz-pick-grid { display: grid; gap: 12px; justify-content: center; }
.pz-pick-grid--stamps { grid-template-columns: repeat(8, 92px); }
.pz-pick-grid--bg { grid-template-columns: repeat(5, 132px); }
.pz-pick {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff8ea;
  box-shadow: 0 0 0 2px rgba(43, 34, 64, 0.12), 0 3px 0 rgba(43, 34, 64, 0.12);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s;
}
.pz-pick:active { transform: scale(0.93); }
.pz-pick.active { box-shadow: 0 0 0 4px var(--ink), 0 4px 10px rgba(43, 34, 64, 0.2); background: #fff1c9; }
.pz-pick--bg { width: 132px; height: 96px; border-radius: 18px; background: #fff; }
.pz-pick--bg canvas { border-radius: 12px; box-shadow: 0 0 0 2px rgba(43, 34, 64, 0.2); }
/* Tablet vertical: un poco más chicos para que entren 8 sellos y 5 fondos por fila. */
@media (max-width: 800px) {
  .pz-pick-grid { gap: 10px; }
  .pz-pick-grid--stamps { grid-template-columns: repeat(8, 78px); }
  .pz-pick { width: 78px; height: 78px; }
  .pz-pick canvas { width: 68px !important; height: 68px !important; }
  .pz-pick-grid--bg { grid-template-columns: repeat(5, 116px); }
  .pz-pick--bg { width: 116px; height: 86px; }
  .pz-pick--bg canvas { width: 104px !important; height: 73px !important; }
}
@media (max-width: 600px), (max-height: 520px) {
  .pz-pick-grid { gap: 8px; }
  .pz-pick-grid--stamps { grid-template-columns: repeat(8, 76px); }
  .pz-pick { width: 76px; height: 76px; border-radius: 18px; }
  .pz-pick canvas { width: 64px !important; height: 64px !important; }
  .pz-pick-grid--bg { grid-template-columns: repeat(5, 94px); }
  .pz-pick--bg { width: 94px; height: 72px; border-radius: 16px; }
  .pz-pick--bg canvas { width: 82px !important; height: 58px !important; border-radius: 10px; }
  .pz-pick-head { height: 44px; margin-bottom: 6px; }
  .pz-pick-head .icon { width: 44px; height: 44px; }
}

/* Celular vertical: sellos de a 4 y fondos de a 2 (5 filas parejas). */
@media (max-width: 600px) {
  .pz-pick-grid--stamps { grid-template-columns: repeat(4, 76px); }
  .pz-pick-grid--bg { grid-template-columns: repeat(2, 132px); }
  .pz-pick--bg { width: 132px; height: 92px; }
  .pz-pick--bg canvas { width: 118px !important; height: 80px !important; }
}
@media (max-width: 380px) {
  .pz-pick-grid--stamps { grid-template-columns: repeat(4, 68px); }
  .pz-pick { width: 68px; height: 68px; }
  .pz-pick canvas { width: 58px !important; height: 58px !important; }
  .pz-pick--bg { width: 124px; height: 88px; }
  .pz-pick--bg canvas { width: 112px !important; height: 76px !important; }
  .pz-pick-grid--bg { grid-template-columns: repeat(2, 124px); }
}

@media (prefers-reduced-motion: reduce) {
  .screen--pizarra .pz-board.pz-shake { animation: none; }
}

/* Selector cerrándose (se desvanece 200 ms): no atrapa el toque siguiente sobre la pizarra. */
.modal-back.pz-modal:not(.in) { pointer-events: none; }

/* ---------- Sellos: pestañas (los nuestros y los emojis por categoría) fijas arriba; la grilla con su scroll ---------- */
.pz-modal--stamps .modal { width: min(94vw, 880px); height: min(calc(var(--app-h) - 32px), 760px); }
.pz-modal--stamps .modal-body { display: flex; flex-direction: column; overflow: hidden; }
.pz-pick-box--stamps { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pz-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin: 0 52px 10px 0; /* a la derecha va la X de cerrar */
  padding: 2px 2px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid rgba(43, 34, 64, 0.08);
}
.pz-tabs::-webkit-scrollbar { display: none; }
.pz-tab {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease;
}
.pz-tab:active { transform: scale(0.92); }
.pz-tab.active { background: #fff1c9; box-shadow: inset 0 0 0 3px var(--ink); }
.pz-tab img, .pz-tab canvas { width: 40px !important; height: 40px !important; pointer-events: none; }
.pz-pick-page { flex: 1; min-height: 0; padding: 4px 2px 8px; }
.pz-pick-grid--emo { grid-template-columns: repeat(auto-fill, 66px); gap: 4px; }
.pz-pick.pz-pick--emo { position: relative; width: 66px; height: 66px; border-radius: 16px; background: transparent; box-shadow: none; }
.pz-pick--emo img { width: 48px; height: 48px; pointer-events: none; }
.pz-pick.pz-pick--emo.active { background: #fff1c9; box-shadow: 0 0 0 3px var(--ink); }
/* Tiene tonos de piel: triangulito en la esquina (como en el teclado del celular). Se eligen manteniendo apretado. */
.pz-pick--tones::after {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 7px;
  border: 4px solid transparent;
  border-right-color: rgba(43, 34, 64, 0.4);
  border-bottom-color: rgba(43, 34, 64, 0.4);
  pointer-events: none;
}
.pz-tones {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(43, 34, 64, 0.12), 0 12px 28px rgba(43, 34, 64, 0.28);
  animation: pz-tones-in 0.16s ease-out;
}
@keyframes pz-tones-in { from { opacity: 0; transform: translateY(6px) scale(0.92); } to { opacity: 1; transform: none; } }
.pz-tone {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.pz-tone img { width: 46px; height: 46px; pointer-events: none; }
.pz-tone:active { transform: scale(0.9); }
.pz-tone.active { background: #fff1c9; }
@media (max-width: 600px), (max-height: 520px) {
  .modal-back.pz-modal--stamps .modal-body { padding: 14px 12px 14px; }
  .pz-tab { width: 50px; height: 50px; border-radius: 15px; }
  .pz-tab img, .pz-tab canvas { width: 34px !important; height: 34px !important; }
  .pz-pick-grid--emo { grid-template-columns: repeat(auto-fill, 56px); }
  .pz-pick.pz-pick--emo { width: 56px; height: 56px; }
  .pz-pick--emo img { width: 42px; height: 42px; }
  .pz-tone { width: 48px; height: 48px; }
  .pz-tone img { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .pz-tones { animation: none; } }