.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 8px;
}

button {
  padding: 8px 12px;
  cursor: pointer;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 4px;
  font-weight: bold;
}

button:hover {
  background: #0056b3;
}

/* El cuadro de texto que aparece al acercarse o por defecto */
.annotation {
  background-color: #ffffff;
  position: absolute;
  transform: translate(
    25px,
    -50%
  ); /* Desplaza el texto a la derecha del punto */
  border-radius: 5px;
  padding: 10px;
  width: 150px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  pointer-events: none; /* Para que no interfiera con el mouse */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Ocultar etiquetas cuando el punto queda detrás del modelo */
.view-button:not([data-visible]) {
  opacity: 0.3;
  pointer-events: none;
}

model-viewer {
  width: 100%;
  height: 600px; /* O usa '80vh' para que ocupe el 80% de la altura de la pantalla */
  background-color: #f0f0f0; /* Color de fondo mientras carga */
  --poster-color: transparent; /* Evita bordes extraños al cargar */
}

.side-panel {
  position: fixed;
  top: 20px;
  right: -350px; /* Escondido por defecto */
  width: 300px;
  height: auto;
  background: rgba(15, 23, 42, 0.9); /* Azul oscuro tipo cockpit */
  color: white;
  padding: 20px;
  border-radius: 15px 0 0 15px;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
  transition: right 0.4s ease;
  z-index: 100;
  font-family: "Inter", sans-serif;
}

.side-panel.active {
  right: 0; /* Aparece en pantalla */
}

.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 15px 0;
}

.spec-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  border-radius: 5px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  float: right;
  cursor: pointer;
}

/* Animación de vibración de alta frecuencia */
@keyframes vibrate {
    0% { transform: translate(0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0); }
}

.engine-vibration {
    animation: vibrate 0.1s infinite;
}

.engine-running-smooth {
    /* Una vibración casi imperceptible cuando ya está encendido */
    animation: vibrate 0.5s infinite opacity 0.8;
}

/* Estilo para el botón de encendido */
.start-engine-btn {
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.progress-bg { background: #334155; height: 10px; border-radius: 5px; margin-top: 5px; }
.progress-fill { background: #3b82f6; height: 100%; width: 0%; border-radius: 5px; transition: width 0.1s; }