:root {
  --color-principal:#4172b4;
  --color-secundario:#41b545;
  --color-exit:#f1931a;
}

#logoEmpresa{padding:10px;}

#cajacookies {background-color:#ffffff8a;color:black;padding:10px 5px 0 5px;position:fixed;top:5px;width:100%;}
#cajacookies button {color: white;background-color:#006e9f;padding:10px 40px;border:none;cursor:pointer;border-radius:5px;margin:10px 15px -5px 15px;}
#cajacookies p {text-align:justify;font-size:0.8em;padding-top:2px;}

.password-container {position: relative;display: inline-block;width:100%;}
.password-container input[type="password"], .password-container input[type="text"] {padding-right: 30px;}
.toggle-password {position: absolute;right: 35px;top: 50%;transform: translateY(-50%);cursor: pointer;background: none;border: none;color:lightgray;font-size: 20px;}

.enlace{color:var(--color-principal);text-decoration:none;}
.enlace:hover{color:orange;text-decoration:none;}

input[type=button], input[type=submit], input[type=reset] {background-color:var(--color-principal);border:none;color:white;padding:15px 80px;text-align:center;text-decoration:none;display:inline-block;text-transform: uppercase;font-size: 13px;box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;margin: 5px 20px 20px 20px;transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover{background-color:var(--color-exit);}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {transform: scale(0.95);transform: scale(0.95);-o-transform: scale(0.95);-ms-transform: scale(0.95);transform: scale(0.95);}
input[type=text], input[type=password]{background-color:#f6f6f6;border:none;color:#0d0d0d;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:5px;width:85%;border:2px solid #f6f6f6;transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;border-radius:5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}
input[type=text]:focus{background-color:#fff;border-bottom:2px solid var(--color-principal);}
input[type=text]:placeholder{color:#cccccc;}

#formContent{border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;background:#fff;padding:30px;width:90%;max-width:450px;position:relative;padding:0px;box-shadow:0 30px 60px 0 rgba(0,0,0,0.3);box-shadow:0 30px 60px 0 rgba(0,0,0,0.3);text-align:center;}

.fadeIn{opacity:0;animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;animation-fill-mode:forwards;animation-fill-mode:forwards;animation-fill-mode:forwards;animation-duration:1s;animation-duration:1s;animation-duration:1s;}
.fadeIn.first{animation-delay:0.4s;animation-delay:0.4s;animation-delay:0.4s;}
.fadeIn.second{animation-delay:0.6s;animation-delay:0.6s;animation-delay:0.6s;}
.fadeIn.third{animation-delay:0.8s;animation-delay:0.8s;animation-delay:0.8s;}
.fadeIn.fourth{animation-delay:1s;animation-delay:1s;animation-delay:1s;}
.fadeInDown{animation-name:fadeInDown;animation-name:fadeInDown;animation-duration:1s;animation-duration:1s;animation-fill-mode:both;animation-fill-mode:both;}

.underlineHover:after{display: block;left: 0;bottom: -10px;width: 0;height: 2px;background-color:var(--color-principal);content:"";transition: width 0.2s;}
.underlineHover:hover{color:#0d0d0d;}
.underlineHover:hover:after {width:100%;}
	
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh; /* Cambié min-height a height */
    padding: 20px;
}
*:focus{outline: none;}

#icon {padding:10px 10px 10px 10px;}

@keyframes fadeInDown {
    0% {
            opacity: 0;
            transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    100% {
            opacity: 1;
            transform: none;
            transform: none;
        }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}