/* ============================================================
   MONCHIS · css/controles.css
   Estilos de la libreria de controles (canvas + teclado + stubs)
   y de la pantalla de demostracion. Movil primero, >=48px tactil.
   ============================================================ */

/* ---------------- CANVAS ---------------- */
.lienzo {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: crosshair;
}

/* contenedor con alto fijo para que el ResizeObserver tenga medida */
.lienzo-caja {
  width: 100%;
  height: 46vh;
  min-height: 240px;
  position: relative;
}

/* Paleta de colores: 6 en una sola fila, cuadrados y tocables */
.paleta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  border-radius: var(--radio-sm);
  border: 2px solid var(--borde);
  cursor: pointer;
  transition: transform var(--t-rapida), border-color var(--t-rapida);
  position: relative;
}
.swatch:active { transform: scale(0.94); }
.swatch.activo {
  border-color: var(--texto);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--acento);
}

/* Grosores */
.grosores { display: flex; gap: 10px; }
.grosor-btn {
  flex: 1;
  min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); cursor: pointer;
}
.grosor-btn:active { transform: scale(0.97); }
.grosor-btn.activo { border-color: var(--acento); background: var(--acento-tenue); }
.grosor-pelota { background: var(--texto); border-radius: 50%; }

/* ---------------- TECLADO PROPIO ---------------- */
.teclado {
  display: flex; flex-direction: column; gap: 10px;
  user-select: none; touch-action: manipulation;
}
.teclado.desactivado { opacity: 0.5; pointer-events: none; }

.teclado-pantalla {
  min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.06em;
  color: var(--texto);
}

/* Pad numerico 3 columnas */
.teclado-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tecla {
  min-height: 60px;
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--texto);
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio); cursor: pointer;
  touch-action: manipulation; user-select: none;
  transition: transform var(--t-rapida), background var(--t-rapida);
}
.tecla:active { transform: scale(0.95); background: var(--surface-2); }
.tecla-accion { background: var(--surface-2); }
.tecla-enviar { background: var(--acento); color: #fff; border-color: var(--acento); }

/* Letras dadas (anagramas) */
.teclado-banco {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  min-height: 60px;
}
.ficha {
  width: 56px; height: 64px;
  font-size: var(--fs-xl); font-weight: 800;
  color: var(--texto);
  background: var(--surface); border: 2px solid var(--borde);
  border-radius: var(--radio); cursor: pointer;
  touch-action: manipulation; user-select: none;
  transition: transform var(--t-rapida), opacity var(--t-rapida);
}
.ficha:active { transform: translateY(2px) scale(0.96); }
.ficha.usada { opacity: 0.28; pointer-events: none; transform: scale(0.9); }
.teclado-barra-letras { display: flex; gap: 10px; }
.teclado-barra-letras .tecla { flex: 1; }

/* ---------------- STUBS FUTUROS ---------------- */
.control-stub {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  text-align: center;
}
.control-stub.desactivado { opacity: 0.5; }
.stub-etq { font-size: var(--fs-sm); }
.stub-anillo {
  width: 110px; height: 110px; border-radius: 50%;
  border: 2px dashed var(--borde);
  display: flex; align-items: center; justify-content: center;
}
.stub-perilla {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--borde);
}

/* ---------------- DEMO ---------------- */
.demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-tab {
  flex: 1 1 auto; min-height: 44px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); color: var(--texto-mut);
  cursor: pointer; font-weight: 600; font-size: var(--fs-sm);
}
.demo-tab.activa { color: var(--texto); border-color: var(--acento); background: var(--acento-tenue); }
.demo-panel { display: none; flex-direction: column; gap: var(--gap); }
.demo-panel.activa { display: flex; }
.demo-eco {
  font-family: ui-monospace, monospace; font-size: var(--fs-sm);
  color: var(--acento-2); min-height: 1.4em; word-break: break-all;
}
.medidor {
  height: 14px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; border: 1px solid var(--borde);
}
.medidor-relleno { height: 100%; width: 0%; background: var(--acento); transition: width 80ms linear; }