/* Estilos globales */
 
 body {
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
     background: linear-gradient(135deg, #111, #0d0d0d);
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     overflow: hidden;
     transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
 }
 /* Fondo dinámico */
 
 .background-gradient {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -2;
     background: linear-gradient(135deg, #0d0d0d 0%, #111111 50%, #82cc0e 100%);
     animation: gradientShift 10s ease infinite;
 }
 
 @keyframes gradientShift {
     0%,
     100% {
         background-position: 0 0;
     }
     50% {
         background-position: 100% 100%;
     }
 }
 /* Contenedor de partículas */
 
 .particles {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 /* Efecto de parallax */
 
 .parallax {
     position: absolute;
     width: 100px;
     height: 100px;
     background-color: #82cc0e;
     border-radius: 50%;
     opacity: 0.3;
     animation: float 5s ease-in-out infinite;
 }
 
 @keyframes float {
     0%,
     100% {
         transform: translateY(0);
     }
     50% {
         transform: translateY(-20px);
     }
 }
 
 .parallax:nth-child(odd) {
     animation-duration: 6s;
     background-color: rgba(130, 204, 14, 0.7);
 }
 /* Contenedor del formulario */
 
 .login-container {
     position: relative;
     width: 100%;
     max-width: 400px;
     background: rgba(255, 255, 255, 0.1);
     padding: 40px;
     border-radius: 15px;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 50px rgba(130, 204, 14, 0.7);
     animation: popIn 1.5s ease-out forwards;
     opacity: 0;
 }
 
 @keyframes popIn {
     0% {
         opacity: 0;
         transform: translateY(-50px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 h1 {
     font-family: 'Orbitron', sans-serif;
     font-size: 36px;
     color: #82cc0e;
     text-align: center;
     text-shadow: 0 0 10px rgba(130, 204, 14, 0.8);
 }
 /* Estilos de los campos */
 
 label {
     font-size: 14px;
     color: #82cc0e;
     display: block;
     margin-bottom: 10px;
 }
 
 input[type="text"],
 input[type="password"] {
     width: 93%;
     padding: 12px;
     margin-bottom: 20px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 8px;
     background-color: rgba(255, 255, 255, 0.1);
     color: white;
     transition: all 0.3s;
 }
 
 input[type="text"]:focus,
 input[type="password"]:focus {
     border-color: #82cc0e;
     box-shadow: 0 0 15px rgba(130, 204, 14, 0.7);
     transform: scale(1.05);
 }
 /* Botón de envío */
 
 button {
     width: 100%;
     padding: 12px;
     background: #82cc0e;
     border: none;
     border-radius: 8px;
     color: white;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s;
 }
 
 button:hover {
     background-color: #68b10c;
     transform: scale(1.05);
 }
 /* Barra de progreso */
 
 .progress-container {
     width: 100%;
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 5px;
     margin-top: 20px;
 }
 
 .progress-bar {
     width: 0;
     height: 10px;
     background-color: #82cc0e;
     border-radius: 5px;
     transition: width 1s ease-in-out;
 }
 /* Interruptor para modo nocturno */
 
 .night-mode {
     position: absolute;
     top: 10px;
     right: 20px;
     cursor: pointer;
     color: #82cc0e;
     font-size: 18px;
 }
 /* Modo oscuro */
 
 .dark-mode {
     background: #111111;
     color: white;
 }
 /* Modo claro */
 
 .light-mode {
     background: #ffffff;
     color: black;
 }
 /* Estilo de la imagen */
 
 .logo {
     width: 160px;
     /* Aumentado el tamaño del logo */
     height: 100px;
     margin: 0 auto 20px;
     display: block;
 }
 /* Estilo para las burbujas con imagen */
 
 .bubble-image {
     background: url('') no-repeat center/cover;
     /* Ruta a tu imagen */
     opacity: 0.2;
     /* Ajusta la opacidad */
 }
 
 .header {
     background-color: #f8f9fa;
     /* Color de fondo claro */
     padding: 15px;
     /* Espaciado interno */
     display: flex;
     /* Flexbox para alinear items */
     justify-content: space-between;
     /* Espacio entre el nombre y el enlace de cerrar sesión */
     align-items: center;
     /* Alinear verticalmente */
     border-bottom: 1px solid #ccc;
     /* Línea inferior */
 }
 
 .header h2 {
     margin: 0;
     /* Sin margen */
 }
 
 .header a {
     text-decoration: none;
     /* Sin subrayado */
     color: #007bff;
     /* Color del enlace */
 }
 
 .header a:hover {
     text-decoration: underline;
     /* Subrayar al pasar el cursor */
 }
 
 .error-message {
     color: white;
     margin-top: 10px;
     font-size: 14px;
 }