#loader {
  position: fixed;
  inset: 0;
  background: #1b1b1b;
  color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  transition: opacity 0.5s ease;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-panel {
  background: #2c2c2c;
  border: 3px solid #555;
  border-radius: 10px;
  padding: 30px 40px;
  text-align: center;
  box-shadow: 0 0 20px #000000aa;
}

.loader-header img {
  width: 60px;
  margin-bottom: 10px;
  animation: pulse 2s infinite;
}

.loader-title {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
  color: #ddd;
  letter-spacing: 1px;
}

.loader-body {
  margin-top: 20px;
}

.gear-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.gear {
  border-radius: 50%;
  border: 6px solid #aaa;
  border-top: 6px solid transparent;
  animation: spin 1.2s linear infinite;
}

.gear-large {
  width: 50px;
  height: 50px;
}

.gear-small {
  width: 30px;
  height: 30px;
  animation-duration: 1.8s;
}

.indicator-panel {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
}

.indicator {
  text-align: center;
}

.light {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #444;
  box-shadow: 0 0 5px #000;
}

.red {
  animation: blinkRed 2s infinite;
}

.yellow {
  animation: blinkYellow 2.2s infinite;
}

.green {
  animation: blinkGreen 1.8s infinite;
}

.label {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-top: 5px;
}

.status-text {
  margin-top: 15px;
  font-size: 14px;
  color: #bbb;
  font-family: monospace;
}

/* Animaciones */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes blinkRed {
  0%,
  100% {
    background: #300;
  }
  50% {
    background: #f00;
  }
}

@keyframes blinkYellow {
  0%,
  100% {
    background: #444200;
  }
  50% {
    background: #ffc107;
  }
}

@keyframes blinkGreen {
  0%,
  100% {
    background: #013301;
  }
  50% {
    background: #28a745;
  }
}