body{background-color:#292929;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}h1{text-align:center}.login-contenido{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:95vh;padding:10px}.login-contenido-recuadro{width:100%;max-width:500px;border:1px solid white;background:linear-gradient(to top,#505050b6,#000);border-radius:40px}.login-contenido .informacion{padding:35px 38px}.login-contenido .informacion h1{text-align:center;color:#fff;margin-bottom:20px}form{padding-top:20px;padding-bottom:20px}.field{width:100%}.field label{display:block;margin-bottom:5px;color:#fff}.field input{display:block;border:solid 2px white;border-radius:3px;height:38px;width:98%;background-color:#000;color:#fff}.field input:hover{color:#ff0}.login-contenido .informacion .field input:focus{border:1px solid white}.login-contenido .informacion .boton{padding:15px 0;text-align:center;color:#fff}.login-contenido .informacion .boton button{padding:10px 20px;border:1px solid white;border-radius:5px;background-color:#000;color:#fff;width:100%}.login-contenido .informacion .boton button:focus{outline:none;border-color:#fff}.login-contenido .informacion .boton button:hover{background-color:#fff;color:#000;cursor:pointer;animation:pulse 1s infinite;box-shadow:0 0 20px gray;border-radius:10px}.login-contenido .informacion .boton button:active{background-color:#fff;color:#fff}.login-contenido .informacion .boton button:disabled{background-color:#ccc;color:#666;border-color:#ccc;cursor:not-allowed}.login-contenido .informacion img{display:block;margin:0 auto;width:300px;height:150px}.form-field{display:flex;flex-direction:row;width:100%;align-items:center}.icon-field{padding:0 10px;border-radius:10px;width:10%;color:#fff;background-color:#000;display:flex;justify-content:center;align-items:center;height:50px}a{color:#fff}a:hover{color:red}.form-group{position:relative;width:78%;height:50px}.form-control{width:100%;padding:15px;font-size:16px;border:1px solid #ccc;background-color:#000;transition:border-color .3s ease;color:#fff;border-radius:10px}.form-label{position:absolute;left:15px;top:15px;font-size:16px;color:#777;pointer-events:none;transition:.3s ease all}.form-control:focus~.form-label,.form-control:not(:placeholder-shown)~.form-label{top:-10px;left:10px;font-size:12px;color:#fff;background-color:#000;padding:0 5px}.background-load{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:block;justify-content:center;align-items:center;z-index:1000}.loader{width:106px;height:56px;display:block;margin:45vh auto;background-image:radial-gradient(circle 14px,transparent 0);background-size:48px 15px,15px 35px,15px 35px,25px 15px,28px 28px;background-position:25px 5px,58px 20px,25px 17px,2px 37px,76px 0px;background-repeat:no-repeat;position:relative;transform:rotate(-45deg);box-sizing:border-box}.loader:after,.loader:before{content:"";position:absolute;width:100px;height:100px;border:12px solid black;border-radius:50%;box-shadow:red 0 0 5px 1px;left:-0px;top:-0px;background-repeat:no-repeat;background-image:linear-gradient(white 64px,transparent 0),linear-gradient(white 100px,transparent 0),radial-gradient(circle 6px,white 100%,transparent 0);background-size:100px 1px,1px 100px,100px 100px;background-position:center center;box-sizing:border-box;animation:rotation .4s linear infinite}.loader:before{left:0;top:0}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{display:none;width:40px;height:40px;margin:50px auto;border:4px solid #f3f3f3;border-top:4px solid green;border-radius:50%;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.alert{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000;color:red;padding:24px;border-radius:8px;box-shadow:0 4px 16px #3c40434d;border:1px solid #dadce0;width:320px;text-align:center;font-family:Arial,sans-serif;z-index:9999;display:none;animation:fadeIn .3s ease-out}.alert button{background-color:#292929;color:#fff;border:none;border-radius:4px;padding:8px 16px;margin-top:16px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.alert button:hover{background-color:#fff;color:#000}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-55%)}to{opacity:1;transform:translate(-50%,-50%)}}.alert.show{display:block}@media (max-width: 500px){.form-control{width:95%}}@media (max-width: 768px){.login-contenido .informacion img{width:320px;height:100px}}@media (max-width: 400px){.login-contenido .informacion img{width:260px;height:100px}}