/* cake-viewer.css — contenedor del configurador 3D. Pensado para vivir
   dentro de una tarjeta "glass" del sitio, con fondo transparente para que
   se integre con el diseño (no pone su propio color de fondo). */

.cake-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 560px;
  margin: 0 auto;
  touch-action: none; /* deja que 1 dedo orbite sin hacer scroll de la página */
  -webkit-user-select: none;
  user-select: none;
}

.cake-viewer-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
  outline: none;
}
.cake-viewer-canvas:active {
  cursor: grabbing;
}

/* Estado de carga (mientras Three.js y el entorno PBR terminan de montarse) */
.cake-viewer__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft, #8C7268);
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cake-viewer__loading[hidden] {
  display: none;
}
.cake-viewer__loading::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: cake-viewer-spin 0.8s linear infinite;
}
@keyframes cake-viewer-spin {
  to { transform: rotate(360deg); }
}

/* Aviso si el navegador no soporta WebGL/ES modules — cake-viewer-demo.html
   y la futura integración lo muestran dentro de este contenedor. */
.cake-viewer__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 12.5px;
  color: var(--ink-soft, #8C7268);
}

/* En móvil el visor acompaña, no manda: más bajo y apaisado para que las
   opciones del asistente queden a la vista. El visor reencuadra la tarta
   solo según la proporción (ver _frame en cake-viewer.js). */
@media (max-width: 560px) {
  .cake-viewer {
    aspect-ratio: 16 / 11;
    max-width: 340px;
  }
}