@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
:root {
    --color-black: #0D0000;
    --color-blue: #4588C4;
    --color-gray: #7B7B7B;
    --color-gray-2: #707070;
    --color-green: #058E1F;
    --color-white: #fff;
}

html,
body {
    font-family: 'Montserrat', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container-login {
    background: linear-gradient(rgba(66, 138, 245, 0.5), rgba(129, 176, 245, 0.5)), url('/assets/images/fondo-login.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    height: 100%;
    position: relative;
    opacity: 0.86;
}

.container-login .card-login {
    background-color: var(--color-white);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 11px;
    height: 504px;
    margin: auto;
    max-height: 80%;
    padding: 16px 12px;
    width: 365px;
    max-width: 365px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.container-login .container-logos{
    backdrop-filter: blur(4px);
    background: rgb(255 255 255 / 71%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgb(0 0 0 / 30%);
    border-radius: 16px;
    position: fixed;
    right: 0px;
    top: 0;
    opacity: 0.78;
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
    width: 16%;
    max-width: 380px
}

.container-login .container-logos img{
    aspect-ratio: 16 / 9;
    object-fit: contain;
    max-width: 100%;
    height: auto;
    min-width: 160px;
}

.card-login .logo-login{
    border-radius: 1rem;
    height: 89px;
    margin: 1.5rem auto 1.5rem;
    max-height: 70px;
    max-width: 181px;
}


.card-login .title-login{
    text-align: center;
    font: normal normal 600 24px/36px 'Montserrat';
    letter-spacing: 0px;
    color: #7B7B7B;
}

.card-login .form-login{
    margin: 3rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-login .form-login input{
    border: 1px solid #707070;
    border-radius: 5px;
    height: 40px;
    padding: 0 1rem;
    outline: none;
}
.card-login .form-login input::placeholder{
    text-align: left;
    font: normal normal medium 12px/20px 'Montserrat';
    color: #6D6D6D;
}
.card-login .form-login input:hover{
    border: 1px solid var(--color-blue);
}

.card-login .form-login input[type=submit]{
    background: var(--color-blue);
    border: unset;
    border-radius: 5px;
    box-shadow: 0px 3px 6px #00000029;
    color: var(--color-white);
    cursor: pointer;
    height: 40px;
    margin: 1rem auto;
    width: -webkit-fill-available;
    min-width: 50px;
    max-width: 218px;
}
.card-login .form-login input[type=submit]:hover{
    box-shadow: 1px 2px 6px #00000057;
    transition: .3s ease-in-out all;
}

.alternate-login{
    font-size: 14px;
    font-weight: 500;
    padding: 0 22px;
    text-align: center;
}

.alternate-login a{
    color: var(--color-green);
    font: normal normal medium 14px/20px 'Montserrat';
    letter-spacing: 0px;
    text-align: center;
    text-decoration: underline;
}
.alternate-login p{
    margin: 0;
}

.tooltip {
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: #fffffffc;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 9PX;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: -35px;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: #a89f9ffc transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.88;
  border: 1px solid var(--color-blue);
    color: #000000;
}

.tooltip .tooltiptext .titletooltip{
    font: normal normal 700 16px/20px 'Montserrat';
    color: #000000;
}

.tooltip .tooltiptext ol{
    padding-inline-start: 33px;
    padding-inline-end: 12px;
    color: #000000;
}

.tooltip .tooltiptext ol li{
    font: normal normal normal 14px/20px 'Montserrat';
    text-align: justify;
}

.tooltip .tooltiptext ol li span{
    font-weight: 700;
}

@media (max-width: 905px){

    .container-login{
        justify-content: flex-end;
        flex-direction: column-reverse;
        gap: 2%;
    }

    .container-login .container-logos{
        border-radius: 0 0 52% 52%;
        height: 15%;
        opacity: 0.78;
        width: 90%;
        position: static;
        display: flex;
        justify-content: center;
        min-height: 65px;
    }
    .container-login .container-logos img{
        margin-left: 0;
        width: auto;
        height: 94%;
    }
    .container-login .container-logos div {
        height: 0;
    }

    .container-login .card-login {
        height: 75%;
        max-height: 100%;
        width: 85%;
        margin: 0 auto;
    }
}

@media (max-height: 550px){
    .container-login .card-login{
        min-height: 443px;
        justify-content: center;
    }

    .card-login .form-login {
        margin: 0 1rem;
        gap: 8px;
    }

    .card-login .form-login input[type=submit] {
        margin: 0.8rem auto;
    }

    .card-login .form-login input{
        height: 30px
    }
}

@media (max-width: 600px){
    .tooltip .tooltiptext{
        width: 100%;
        left: 42px;
    }
}

@media (max-width: 300px){
    .alternate-login {
        font-size: 0.8rem;
    }
}