.text-umss-blue { color: #003366; }
.bg-umss-blue { background-color: #003366; }
.border-umss-blue { border-color: #003366; }
.focus\\:ring-umss-blue:focus { --tw-ring-color: #003366; }
.hover\\:bg-umss-dark-blue:hover { background-color: #002244; }

.bg-umss-green { background-color: #006633; }
.hover\\:bg-umss-dark-green:hover { background-color: #004d26; }

.bg-umss-light { background-color: #f8f9fa; }

.text-umss-gray { color: #555555; }

#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  border: 2px dashed #00336640;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  overflow: hidden;
}

#qrcode canvas {
  width: 300px !important;
  height: 300px !important;
  image-rendering: pixelated;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 51, 102, 0.15);
}

#qrcode:empty::before {
  content: "El código QR aparecerá aquí";
  color: #00336680;
  font-style: italic;
  text-align: center;
  width: 100%;
}

.loading {
  width: 48px;
  height: 48px;
  border: 5px solid #e6f2ff;
  border-top: 5px solid #003366;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}