:root {
            --background-light: #F8F9FA; /* Blanco muy claro para el fondo */
            --card-background-white: #FFFFFF; /* Blanco puro para la tarjeta de login */
            --dark-blue-text: #212529; /* Azul oscuro casi negro para texto principal */
            --light-blue-text: #6C757D; /* Gris azulado para texto secundario */
            --primary-blue: #0A3D62; /* Azul oscuro principal (casi marino) */
            --accent-green: #28A745; /* Verde esmeralda para acentos y éxito */
            --accent-green-hover: #218838;
            --input-border-light: #CED4DA; /* Borde suave para inputs */
            --input-focus-border: #80BDFF; /* Borde azul claro al enfocar */
            --shadow-color: rgba(0, 0, 0, 0.1); /* Sombra suave */
            --error-color: #DC3545; /* Rojo para errores */
        }

        body {
            font-family: 'Open Sans', sans-serif; /* Fuente principal para texto de UI */
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: var(--background-light);
            color: var(--dark-blue-text);
            overflow: hidden;
            position: relative;
        }

        .login-wrapper {
            background-color: var(--card-background-white);
            padding: 50px 60px;
            border-radius: 12px;
            box-shadow: 0 10px 25px var(--shadow-color);
            width: 100%;
            max-width: 480px;
            text-align: center;
            border: 1px solid #E9ECEF; /* Borde muy sutil */
            animation: fadeInScale 0.7s ease-out forwards;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .logo-section {
            margin-bottom: 35px;
        }

        .logo-section h1 {
            font-family: 'Merriweather', serif; /* Fuente serif para el logo/título */
            font-size: 2.8em;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .logo-section p {
            font-size: 1.05em;
            color: var(--light-blue-text);
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.95em;
            color: var(--dark-blue-text);
            font-weight: 600;
        }

        .form-group input {
            width: 100%;
            padding: 13px 18px;
            border: 1px solid var(--input-border-light);
            border-radius: 8px;
            background-color: var(--card-background-white); /* Fondo blanco */
            color: var(--dark-blue-text);
            font-size: 1em;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-group input:focus {
            border-color: var(--input-focus-border);
            outline: none;
            box-shadow: 0 0 0 3px rgba(128, 189, 255, 0.25);
        }

        .form-group input::placeholder {
            color: var(--light-blue-text);
            opacity: 0.8;
        }

        .btn-submit {
            width: 100%;
            padding: 15px 0;
            background-color: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-top: 15px;
        }

        .btn-submit:hover {
            background-color: var(--accent-green); /* El botón cambia a verde al pasar el ratón */
            transform: translateY(-2px);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        .links-section {
            margin-top: 25px;
            font-size: 0.9em;
        }

        .links-section a {
            color: var(--primary-blue);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 600;
            margin: 0 10px;
        }

        .links-section a:hover {
            color: var(--accent-green);
            text-decoration: underline;
        }

        .error-message {
            color: var(--error-color);
            font-size: 0.85em;
            margin-top: -10px;
            margin-bottom: 20px;
            text-align: left;
            font-weight: 500;
        }

        .footer-info {
            margin-top: 40px;
            font-size: 0.8em;
            color: var(--light-blue-text);
            line-height: 1.5;
        }