@import url("./fuentes.css");


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Wix Madefor Display", sans-serif;
}


html{
    scroll-behavior: smooth;
    min-height:100%;
    background-color:#55b9df;
}


body{
    min-height: 100vh;
    min-height: 100dvh;

    position: relative;

    isolation: isolate;

    background:transparent;
}


@supports (-webkit-touch-callout:none){
    html,
    body{
        min-height:100vh;
        min-height:100lvh;
        background-color:#55b9df;
    }

}


body::before{
    content: "";

    position: fixed;

    inset: 0;

    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 22%,
        #dff4fb 52%,
        #9bdcf3 78%,
        #55b9df 100%
    );

    pointer-events: none;

    z-index: -1;
}


a{
    text-decoration: none;
}


/* =========================
   LOGIN
========================= */

.login{
    min-height: 100vh;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 140px 30px 80px;

    overflow: hidden;
}


/* =========================
   LOGO
========================= */

.login-logo{
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 145px;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;
}


.login-logo::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 180px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.88) 35%,
        rgba(255,255,255,0.45) 65%,
        rgba(255,255,255,0) 100%
    );

    backdrop-filter: blur(13px);

    -webkit-backdrop-filter: blur(13px);

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 48%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 48%,
        transparent 100%
    );

    z-index: -1;
}


.login-logo img{
    width: 120px;
    height: auto;

    display: block;

    position: relative;

    z-index: 2;
}


/* =========================
   CONTENEDOR
========================= */

.login-contenedor{
    width: 100%;

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 2;
}


.login-formulario{
    width: 440px;

    max-width: 100%;

    padding: 48px 50px 42px;

    background: rgba(255,255,255,0.68);

    border: 1px solid rgba(255,255,255,0.70);

    border-radius: 42px;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 15px 45px rgba(48,150,185,0.08);
}


/* =========================
   TITULOS
========================= */

.login-formulario h1{
    text-align: center;

    font-size: 30px;

    font-weight: 500;

    color: #111111;

    line-height: 1.1;
}


.login-subtitulo{
    text-align: center;

    margin-top: 9px;

    margin-bottom: 32px;

    font-size: 12px;

    color: rgba(0,0,0,0.55);
}


/* =========================
   MENSAJES
========================= */

.mensaje-exito,
.mensaje-error{
    padding: 11px 14px;

    margin-bottom: 18px;

    border-radius: 15px;

    text-align: center;

    font-size: 11px;
}


.mensaje-exito{
    background: rgba(91,196,130,0.13);

    color: #267445;

    border: 1px solid rgba(91,196,130,0.20);
}


.mensaje-error{
    background: rgba(255,90,90,0.10);

    color: #a83333;

    border: 1px solid rgba(255,90,90,0.18);
}


/* =========================
   CAMPOS
========================= */

.campo{
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 20px;
}


.campo label{
    font-size: 11px;

    font-weight: 600;

    color: #222222;

    padding-left: 5px;
}


.campo input{
    width: 100%;

    height: 49px;

    padding: 0 17px;

    border: 1px solid rgba(90,170,200,0.25);

    border-radius: 17px;

    outline: none;

    background: rgba(255,255,255,0.72);

    color: #111111;

    font-size: 12px;

    transition:
        border 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.campo input::placeholder{
    color: rgba(0,0,0,0.35);
}


.campo input:focus{
    border-color: rgba(67,174,211,0.65);

    background: rgba(255,255,255,0.92);

    box-shadow:
        0 0 0 3px rgba(82,186,220,0.10);
}


/* =========================
   BOTON
========================= */

.boton-login{
    width: 100%;

    height: 50px;

    margin-top: 4px;

    border: none;

    border-radius: 17px;

    background: #000000;

    color: #ffffff;

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.boton-login:hover{
    background: #222222;

    transform: translateY(-1px);
}


.boton-login:active{
    transform: scale(0.98);
}


/* =========================
   REGISTRO
========================= */

.crear-cuenta{
    text-align: center;

    margin-top: 25px;

    font-size: 11px;

    color: rgba(0,0,0,0.55);
}


.crear-cuenta a{
    color: #111111;

    font-weight: 600;

    border-bottom: 1px solid #111111;

    margin-left: 3px;
}


.crear-cuenta a:hover{
    opacity: 0.55;
}


/* =========================
   FOOTER
========================= */

.login-footer{
    position: absolute;

    bottom: 22px;

    left: 0;
    right: 0;

    text-align: center;
}


.login-footer p{
    font-size: 8px;

    color: rgba(0,0,0,0.38);
}

.registro-legal{
    grid-column: 1 / -1;
    margin: 2px 0 18px;
    padding: 15px;
    border: 1px solid rgba(90,170,200,.20);
    border-radius: 17px;
    background: rgba(255,255,255,.48);
}

.registro-legal p,
.registro-legal-check{
    color: rgba(0,0,0,.60);
    font-size: 9px;
    line-height: 1.55;
}

.registro-legal a{
    color: #111;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.registro-legal-check{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    cursor: pointer;
}

.registro-legal-check input{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
    accent-color: #000;
}

.login-footer a{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* =========================
   IPAD / TABLET
   801px - 1000px
========================= */

@media (min-width: 801px) and (max-width: 1000px){

    .login{
        padding: 135px 30px 80px;
    }


    .login-logo{
        height: 125px;
    }


    .login-logo::before{
        height: 160px;
    }


    .login-logo img{
        width: 140px;
    }


    .login-formulario{
        width: 460px;

        padding: 45px 48px 40px;

        border-radius: 40px;
    }


    .login-formulario h1{
        font-size: 29px;
    }

}


/* =========================
   IPHONE / MOBILE
   800px O MENOS
========================= */

@media (max-width: 800px){

    body::before{
        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            #eaf8fc 24%,
            #a8dff1 70%,
            #5abce0 100%
        );
    }


    .login{
        min-height: 100svh;

        padding: 120px 20px 65px;

        justify-content: center;
    }


    /* LOGO */

    .login-logo{
        height: 105px;
    }


    .login-logo::before{
        height: 145px;
    }


    .login-logo img{
        width: 140px;
    }


    /* FORMULARIO */

    .login-formulario{
        width: 100%;

        max-width: 390px;

        padding: 38px 25px 30px;

        border-radius: 32px;

        background: rgba(255,255,255,0.70);

        backdrop-filter: blur(16px);

        -webkit-backdrop-filter: blur(16px);
    }


    .login-formulario h1{
        font-size: 26px;
    }


    .login-subtitulo{
        font-size: 11px;

        margin-top: 8px;

        margin-bottom: 27px;
    }


    .campo{
        gap: 7px;

        margin-bottom: 17px;
    }


    .campo label{
        font-size: 10px;
    }


    .campo input{
        height: 47px;

        border-radius: 16px;

        font-size: 11px;

        padding: 0 15px;
    }


    .boton-login{
        height: 48px;

        border-radius: 16px;

        font-size: 11px;
    }


    .crear-cuenta{
        font-size: 10px;

        margin-top: 22px;
    }


    .mensaje-exito,
    .mensaje-error{
        font-size: 10px;

        border-radius: 13px;
    }


    .login-footer{
        bottom: 18px;
    }

}


/* =========================
   IPHONE PEQUEÑO
========================= */

@media (max-width: 380px){

    .login{
        padding-left: 15px;

        padding-right: 15px;
    }


    .login-logo img{
        width: 140px;
    }


    .login-formulario{
        padding: 32px 21px 27px;
    }


    .login-formulario h1{
        font-size: 24px;
    }


    .campo input{
        height: 45px;
    }


    .boton-login{
        height: 46px;
    }

}


@media (max-width:800px){
    input,
    textarea,
    select{
        font-size:16px !important;
    }
}


@media (max-width:800px) and (max-height:650px){
    .login{
        justify-content:flex-start;
    }
}


@media (orientation:landscape) and (min-width:480px) and (max-width:1000px) and (max-height:1024px) and (hover:none) and (pointer:coarse){
    .login{min-height:100dvh;justify-content:flex-start;padding:68px 16px 20px;overflow-x:hidden;overflow-y:auto}
    .login-logo{height:64px}
    .login-logo::before{height:82px}
    .login-logo img{width:140px}
    .login-formulario{width:100%;max-width:680px;padding:20px 24px 18px;border-radius:26px}
    .login-formulario h1{font-size:24px}
    .login-subtitulo{margin-top:5px;margin-bottom:16px}
    .login-formulario form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
    .campo{min-width:0;margin-bottom:12px}
    .boton-login{grid-column:1 / -1;height:46px}
    .crear-cuenta{margin-top:14px}
    .login-footer{position:static;margin-top:14px}
}


@supports (-webkit-touch-callout:none){
    body{
        background:transparent;
    }

    body::before{
        display:block;
        bottom:auto;
        height:100vh;
        height:100lvh;
    }
}