/* =============================================================================
   public/css/viewer-settings-popup.css — Panel de ajustes del visor 3D
   F2R Engineering

   Usa exclusivamente tokens del design system (`--surface-*`, `--text-*`,
   `--border-*`, `--accent-*`). Funciona en modo oscuro y claro sin overrides.
   ============================================================================= */

/* ── BOTÓN DE CAPTURA (cámara, justo a la izquierda del engranaje) ───────── */
/* Comparte estilo con .vws-trigger para uniformidad visual. Se posiciona
   con un offset adicional para no solapar la rueda dentada. */
.viewer-shot-btn {
  position: absolute;
  top: var(--space-3);
  right: calc(var(--space-3) + 44px);   /* 36px botón + 8px separación */
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-base);
  background: var(--surface-overlay);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}
.viewer-shot-btn:hover {
  background: var(--surface-elevated);
  border-color: var(--accent);
  color: var(--accent);
}
.viewer-shot-btn:active { transform: scale(0.94); }
.viewer-shot-btn[hidden] { display: none; }
.viewer-shot-btn svg { width: 18px; height: 18px; }

/* ── BOTÓN FLOTANTE (engranaje en esquina superior derecha del visor) ─────── */
.vws-trigger {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-base);
  background: var(--surface-overlay);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}
.vws-trigger:hover {
  background: var(--surface-elevated);
  border-color: var(--accent);
  color: var(--accent);
}
.vws-trigger:active {
  transform: scale(0.94);
}
.vws-trigger.is-open {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.vws-trigger svg {
  width: 18px;
  height: 18px;
}

/* ── PANEL FLOTANTE (debajo del botón) ────────────────────────────────────── */
.vws-panel {
  position: absolute;
  top: calc(var(--space-3) + 36px + var(--space-2));
  right: var(--space-3);
  z-index: 21;
  width: 280px;
  background: var(--surface-raised);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vws-pop-in 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.vws-panel[hidden] { display: none; }

@keyframes vws-pop-in {
  from { transform: translateY(-6px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.vws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-base);
}
.vws-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
}
.vws-reset-btn {
  background: transparent;
  border: 1px solid var(--border-base);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
}
.vws-reset-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── BODY (lista de controles) ────────────────────────────────────────────── */
.vws-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.vws-group-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.vws-group-title:first-child { margin-top: 0; }

.vws-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vws-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.vws-row-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.vws-row-value {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.vws-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.vws-row select {
  width: 100%;
  padding: 6px 8px;
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.vws-row select:focus {
  outline: none;
  border-color: var(--accent);
}