/**
 * Photo Sphere Studio 3D - Universal Orbital Engine
 * components.css: Floating Action Bars (FAB), Modals, Lightbox HD & Toast Notifications
 */

/* Floating Quick Action Bar (FAB) */
#quick-action-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

#quick-action-bar button:active {
  transform: scale(0.92);
}

/* Lightbox Modal HD */
#lightbox-modal {
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

#lightbox-modal .glass-panel {
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 240, 255, 0.15);
}

/* Photos Gallery Drawer/Modal */
#photos-modal {
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

#modal-thumbnails-grid img {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

#modal-thumbnails-grid img:hover {
  transform: scale(1.04);
  border-color: var(--brand-cyan);
}

/* Floating Clean View Exit Pill */
#btn-exit-clean-mode button {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(13, 17, 29, 0.88);
}

/* Toast Notifications */
#toast-notify {
  pointer-events: none;
  transform: translate(-50%, 0);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#toast-notify.opacity-0 {
  transform: translate(-50%, -12px);
}

/* Campo numérico editable junto a los deslizadores */
.num-field { display: inline-flex; align-items: center; gap: 2px; }
.num-field-input {
  width: 4.2rem; padding: 1px 4px; text-align: right;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 11px;
  color: #00f0ff; background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.num-field-input:focus { border-color: #22d3ee; }
.num-field-input::-webkit-outer-spin-button,
.num-field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-field-btn {
  width: 20px; height: 20px; line-height: 1; font-size: 8px; color: #94a3b8;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px; cursor: pointer; touch-action: manipulation; user-select: none;
}
.num-field-btn:hover, .num-field-btn:active { color: #fff; background: rgba(34, 211, 238, 0.25); }
.num-field-unit { min-width: 0.9rem; font-size: 10px; color: #94a3b8; font-family: ui-monospace, monospace; }

/* Selector de esferas: sin caja vacía cuando está plegado */
#sphere-picker:has(#picker-body.hidden) { display: none; }
#create-menu { top: 3.5rem; }