/* ==========================================
   1. RESET Y CONFIGURACIÓN GLOBAL
   ========================================== */
*, ::before, ::after {
  box-sizing: border-box;
}

:root {
  --bg-main: #0D0B14;
  --card-dark: #161221;
  --fuchsia-neon: #E025CE;
  --turquoise-neon: #00F2FE;
  --text-light: #F4F4F6;
}

body {
  background-color: var(--bg-main);
  color: var(--text-light);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  margin: 0;
  padding: 0;
}

/* ==========================================
   2. EFECTOS DE BRILLO NEÓN (GLOWS)
   ========================================== */
.glow-card-fuchsia {
  box-shadow: 0 0 25px rgba(224, 37, 206, 0.2);
}

.glow-fuchsia-sm {
  box-shadow: 0 0 12px rgba(224, 37, 206, 0.4);
}

.glow-button {
  box-shadow: 0 0 15px rgba(224, 37, 206, 0.5);
}

.glow-button:hover {
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.7);
}

/* ==========================================
   3. ESTILOS COMPARTIDOS Y CAMPOS DE FORMULARIO
   ========================================== */
a, button, input {
  transition: all 0.2s ease-in-out;
}

.campo input:focus {
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}

.qr-container {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.qr-container:hover {
  transform: scale(1.02);
}

.btn-copiar {
  cursor: pointer;
  user-select: none;
}

.btn-copiar:active {
  transform: scale(0.95);
}