html, body 
        { 
            font-family: 'Roboto', sans-serif; /* Aplicar Roboto a todo el cuerpo del documento */
            /*background: #f7f7f7;*/
            background: transparent;
            height: 100%; /* Asegura que la altura del body es del 100% del viewport */
            margin: 0; /* Elimina márgenes por defecto */
            display: flex;
            flex-direction: column; /* Permite ordenar los elementos en columna */
            
            user-select: none; /* Deshabilitar la selección de texto para todo el cuerpo */
        }
        
        input[type="text"], input[type="password"] 
        {
            user-select: text; /* Habilitar la selección de texto para los campos de entrada */
        }
        
        .wrapper 
        { 
            width: 350px; 
            padding: 20px; 
            /*background: white;*/
            border-radius: 20px; 
            box-shadow: 0 0 20px rgba(0,0,0,0.1); 
            margin: auto; /* Centrado en pantalla */
            
            background: linear-gradient(145deg, #ffffff, #e6e6e6); /* Fondo 3D suave */
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), -10px -10px 20px rgba(255, 255, 255, 0.5); /* Sombras 3D */
            
        }
        
        .form-group label 
        { /* Estilos para los labels */
            text-align: left; /* Alinea el texto a la izquierda */
            display: block; /* Hace que el label sea de bloque */
        }
        
        input[type="text"], input[type="password"], input[type="submit"]
        {
            width: 100%; /* Hace que el ancho de los inputs sea del 100% */
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px; /* Espacio entre los elementos */
        }
        
        input[type="submit"] 
        {
            cursor: pointer; /* Cursor en forma de mano al pasar sobre el botón */
        }
        
        a.recover-link 
        {
            display: block;
            color: #007bff; /* Color inicial del enlace */
            font-size: 16px; /* Tamaño del texto */
            text-decoration: none; /* Eliminar subrayado */
            transition: color 0.3s; /* Transición suave del color */
            margin-top: 10px; /* Margen superior */
            text-align: center; /* Centrado del texto del enlace */
        }
        
        a.recover-link:hover
        {
            color: #0056b3; /* Color al pasar el mouse */
        }
        
        .footer
        { /* Estilo para el pie de página */
            text-align: center; /* Texto centrado */
            line-height: 50px; /* Altura de línea para centrar verticalmente el texto */
            height: 50px; /* Altura fija del footer */
            width: 100%; /* Ancho completo */
            position: fixed; /* Fijo en la pantalla */
            bottom: 0; /* Colocado en la parte inferior de la ventana */
            left: 0; /* Alineado a la izquierda */
            background-color: #f1f1f1; /* Color de fondo */
            border-top: 1px solid #ccc; /* Línea en la parte superior del footer */
        }
        
        .logo 
        { /* Estilo para el logo */
            display: block;
            margin: 0 auto 20px; /* Centrado y con margen inferior */
            width: 100px; /* Ancho fijo */
            height: auto; /* Altura automática */
        }