/* Diseñador de la trasera de la bola de Navidad (bola.js y bola3d.js). */

/* Lona con forma de círculo: sin el papel blanco de la tira. */
.fmd-lienzo--bola {
  height: min(60vh, 560px); background: transparent; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)); touch-action: none; cursor: default;
}
.fmd-lienzo--bola.is-arrastrando { cursor: grabbing; }
@media (max-width: 900px) { .fmd-lienzo--bola { height: auto; width: min(100%, 460px); } }

/* Nieve suave cayendo detrás de la lona. */
.fmd-vista__papel--bola { overflow: hidden; min-height: 280px; }
.fmd-vista__papel--bola::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90px 80px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 150px 20px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 200px 120px, #fff 50%, transparent 51%);
  background-size: 240px 160px;
  animation: fmd-nieve 14s linear infinite;
}
@keyframes fmd-nieve { to { background-position: 0 160px; } }
@media (prefers-reduced-motion: reduce) { .fmd-vista__papel--bola::before { animation: none; } }

/* Interruptor Diseño / 3D. */
.fmd-seg--bola-modo { justify-content: center; }
.fmd-seg--bola-modo button { min-width: 130px; }

/* Vista 3D. */
.fmd-bola3d { position: relative; width: 100%; }
.fmd-bola3d__marco { width: 100%; border-radius: 14px; overflow: hidden; background: #1b1d33; }
.fmd-bola3d__lienzo { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.fmd-bola3d__lienzo:active { cursor: grabbing; }
.fmd-bola3d__barra { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 12px; }
.fmd-bola3d__grupo { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fmd-bola3d__barra .fmd-btn--linea { background: rgba(255, 255, 255, .92); }
.fmd-bola3d__barra [aria-pressed="true"] { background: var(--fmd-tinta); color: #fff; box-shadow: none; }
.fmd-bola3d__cargando { margin: 0; padding: 120px 16px; text-align: center; color: rgba(255, 255, 255, .85); }

.fmd-plantillas--bola .fmd-plantilla { width: 84px; }
.fmd-plantillas--bola .fmd-plantilla canvas { width: 72px; box-shadow: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }