/*  SISTEMA MÉDICO  */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*  VARIABLES   */

:root{
    --azul:#0D6EFD;
    --azulOscuro:#0A4FC5;
    --celeste:#3DB8FF;
    --blanco:#FFFFFF;
    --gris:#F4F8FC;
    --grisClaro:#EEF4FB;
    --texto:#214364;
    --textoClaro:#6F8398;
    --sombra:
        0 20px 45px rgba(0,0,0,.10);
    --radio:28px
}

/*  RESET   */

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

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    width:100%;
    height:100vh;
    background:var(--gris);
    overflow:hidden;
}

/*==================================================
            BARRA SUPERIOR
==================================================*/

.barra-superior{
    width:100%;
    height:54px;
    background:linear-gradient(
        90deg,
        var(--azul),
        var(--azulOscuro)
    );
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 18px;
    color:white;
    box-shadow:
        0 3px 10px rgba(0,0,0,.18);
}

.logo-app{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-mini{
    width:30px;
    height:30px;
    border-radius:8px;
    background:rgba(255,255,255,.18);
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo-mini i{
    font-size:18px;
}

.logo-app span{
    font-size:15px;
    font-weight:500;
    letter-spacing:.3px;
}

/*==================================================
            BOTONES VENTANA
==================================================*/

.botones-ventana{
    display:flex;
}

.botones-ventana button{
    width:44px;
    height:34px;
    border:none;
    background:transparent;
    color:white;
    cursor:pointer;
    transition:.25s;
    font-size:20px;
}

.botones-ventana button:hover{
    background:rgba(255,255,255,.15);
}

.botones-ventana .cerrar:hover{
    background:#E81123;
}

/*      CONTENEDOR PRINCIPAL        */

.contenedor{
    width:100%;
    height:calc(100vh - 54px);
    display:flex;
}

/*==================================================
            PANEL IZQUIERDO
==================================================*/

.lado-izquierdo{
    width:42%;
    min-width:560px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background-image:url("../img/fondo.jpg");
    background-size:cover;
    background-position:center;
}

.overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(55,182,255,.78),
            rgba(9,79,214,.92)
        );
}

/*==================================================
        CONTENIDO PANEL IZQUIERDO
==================================================*/

.contenido{
    width:78%;
    max-width:560px;
    position:relative;
    z-index:5;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
}

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

.logo-principal{
    margin-bottom:24px;
}

.circulo{
    width:145px;
    height:145px;
    border-radius:50%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:
        0 18px 40px rgba(0,0,0,.18);
}

.circulo i{
    color:var(--azul);
    font-size:82px;
}

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

.contenido h1{
    font-size:clamp(2.8rem,3vw,3.8rem);
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}

.contenido h2{
    margin-top:10px;
    font-size:clamp(1.5rem,2vw,2rem);
    font-weight:500;
}

.linea{
    width:65px;
    height:4px;
    background:#58D5FF;
    border-radius:30px;
    margin:34px 0 52px;
}

/*  INFORMACION */

.informacion{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:34px;
}

/*==================================================
            TARJETAS INFORMATIVAS
==================================================*/

.item{
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:10px 0;
    transition:.35s ease;
}

.item:hover{
    transform:translateX(8px);
}

.item .icono{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}

.item .icono i{
    color:white;
    font-size:30px;
}

.item div:last-child{
    flex:1;
}

.item h3{
    font-size:1.45rem;
    font-weight:600;
    color:white;
    margin-bottom:6px;
}

.item p{
    font-size:1rem;
    line-height:1.6;
    color:rgba(255,255,255,.92);
}

/*==================================================
            PANEL DERECHO
==================================================*/

.lado-derecho{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#F7FAFF;
    overflow:hidden;
}

/*==================================================
        EFECTO DE FONDO DERECHO
==================================================*/

.lado-derecho::before{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    border-radius:50%;
    background:
        radial-gradient(
            rgba(13,110,253,.12),
            transparent 72%
        );
    top:-230px;
    right:-220px;
}

.lado-derecho::after{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    background:
        radial-gradient(
            rgba(61,184,255,.10),
            transparent 72%
        );
    bottom:-180px;
    left:-150px;
}

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

.login{
    position:relative;
    z-index:5;
    width:min(470px,90%);
    background:white;
    border-radius:30px;
    padding:55px 42px 35px;
    box-shadow:
        0 25px 60px rgba(0,0,0,.08);
    transition:.35s;
}

.login:hover{
    transform:translateY(-4px);
}

/*==================================================
            ICONO USUARIO
==================================================*/

.icono-usuario{
    display:flex;
    justify-content:center;
    margin-top:-110px;
    margin-bottom:20px;
}

.circulo-user{
    width:120px;
    height:120px;
    border-radius:50%;
    background:
        linear-gradient(
            135deg,
            #35B6FF,
            #0D6EFD
        );
    border:8px solid white;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:
        0 18px 40px rgba(13,110,253,.28);
}

.circulo-user i{

    color:white;

    font-size:60px;

}

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

.login h2{

    text-align:center;

    color:#214364;

    font-size:2rem;

    font-weight:600;

}

.decoracion{

    display:flex;

    justify-content:center;

    margin:18px 0 32px;

}

.decoracion span{

    width:70px;

    height:5px;

    border-radius:50px;

    background:#36B7FF;

}

/*==================================================
                FORMULARIO
==================================================*/

.grupo{

    width:100%;

    margin-bottom:22px;

}

.grupo label{

    display:block;

    margin-bottom:10px;

    color:var(--texto);

    font-size:.95rem;

    font-weight:600;

}

/*==================================================
                INPUTS
==================================================*/

.input{

    width:100%;

    height:58px;

    display:flex;

    align-items:center;

    background:#F5F9FD;

    border:2px solid transparent;

    border-radius:14px;

    transition:.30s;

}

.input:hover{

    border-color:#B7DAFF;

}

.input:focus-within{

    border-color:var(--azul);

    background:white;

    box-shadow:

        0 0 0 5px rgba(13,110,253,.10);

}

.input i{

    width:58px;

    text-align:center;

    color:#7B90A7;

    font-size:22px;

}

.input input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    color:var(--texto);

}

.input input::placeholder{

    color:#9CB0C4;

}

/*==================================================
        BOTON VER CONTRASEÑA
==================================================*/

#mostrarPassword{

    width:58px;

    height:58px;

    border:none;

    background:transparent;

    cursor:pointer;

    color:#7B90A7;

    font-size:22px;

    transition:.25s;

}

#mostrarPassword:hover{

    color:var(--azul);

}

/*==================================================
            OPCIONES
==================================================*/

.opciones{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:8px 0 28px;

}

.recordar{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    font-size:.90rem;

    color:var(--textoClaro);

}

.recordar input{

    width:17px;

    height:17px;

    accent-color:var(--azul);

}

.opciones a{

    text-decoration:none;

    color:var(--azul);

    font-size:.90rem;

    font-weight:500;

    transition:.25s;

}

.opciones a:hover{

    color:var(--azulOscuro);

    text-decoration:underline;

}

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

.btn-login{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:

        linear-gradient(

            90deg,

            #3AB7FF,

            var(--azul)

        );

    color:white;

    font-size:17px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.30s;

    box-shadow:

        0 12px 28px rgba(13,110,253,.28);

}

.btn-login:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 35px rgba(13,110,253,.35);

}

.btn-login:active{

    transform:scale(.98);

}

.btn-login i{

    font-size:22px;

}

/*==================================================
            PIE DEL LOGIN
==================================================*/

.seguridad{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:26px;

    color:#7B90A7;

    font-size:.90rem;

}

.seguridad i{

    color:var(--azul);

    font-size:18px;

}

/*==================================================
            TRANSICIONES
==================================================*/

button,
input,
a,
.item,
.icono,
.login{

    transition:.30s ease;

}

/*==================================================
            EFECTOS
==================================================*/

.item:hover .icono{

    transform:scale(1.08);

}

.item:hover h3{

    transform:translateX(2px);

}

.item:hover p{

    opacity:1;

}

.login:hover{

    box-shadow:

        0 30px 70px rgba(0,0,0,.10);

}

/*==================================================
            SCROLL
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--azul);

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:#EEF3FA;

}

/*==================================================
            ANIMACIONES
==================================================*/

@keyframes aparecerIzquierda{

    from{

        opacity:0;
        transform:translateX(-70px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes aparecerDerecha{

    from{

        opacity:0;
        transform:translateX(70px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes aparecerArriba{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes aparecerAbajo{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes flotar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
            APLICAR ANIMACIONES
==================================================*/

.contenido{

    animation:aparecerIzquierda .9s ease;

}

.login{

    animation:aparecerDerecha .9s ease;

}

.logo-principal{

    animation:aparecerArriba 1s ease;

}

.informacion{

    animation:aparecerAbajo 1s ease;

}

.circulo{

    animation:flotar 4s ease-in-out infinite;

}

.circulo-user{

    animation:flotar 5s ease-in-out infinite;

}

/*==================================================
            EFECTOS HOVER
==================================================*/

.item{

    cursor:default;

}

.item:hover{

    transform:translateX(12px);

}

.item:hover .icono{

    background:rgba(255,255,255,.28);

    transform:scale(1.08);

}

.item:hover h3{

    letter-spacing:.3px;

}

.item:hover p{

    color:white;

}

.logo-mini{

    transition:.3s;

}

.logo-mini:hover{

    transform:rotate(10deg);

}

.logo-mini:hover i{

    transform:scale(1.1);

}

.botones-ventana button{

    transition:.25s;

}

.botones-ventana button:hover{

    transform:scale(1.05);

}

.login:hover{

    transform:translateY(-4px);

}

.input{

    transition:.30s;

}

.input:hover{

    transform:translateY(-1px);

}

.input:focus-within{

    transform:translateY(-2px);

}

.btn-login{

    overflow:hidden;

    position:relative;

}

.btn-login::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.btn-login:hover::before{

    left:120%;

}

/*  SOMBRAS python app.py*/

.login{
    box-shadow:
        0 30px 65px rgba(0,0,0,.10);
}

.item .icono{
    box-shadow:
        0 12px 28px rgba(0,0,0,.18);
}

.circulo{
    box-shadow:
        0 22px 45px rgba(0,0,0,.18);
}

.circulo-user{
    box-shadow:
        0 18px 40px rgba(13,110,253,.28);
}

/*==================================================
            SELECCION
==================================================*/

::selection{

    background:#0D6EFD;

    color:white;

}

/*==================================================
            AUTOFILL
==================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px white inset;

    -webkit-text-fill-color:#214364;

}

/*==================================================
            FOCUS GENERAL
==================================================*/

button:focus,
input:focus{

    outline:none;

}

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

.login::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(61,184,255,.08);

    top:-30px;

    left:-30px;

}

.login::after{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(13,110,253,.05);

    bottom:-20px;

    right:-20px;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media (max-width:1600px){

    .lado-izquierdo{

        width:40%;

    }

    .login{

        width:460px;

    }

}

@media (max-width:1400px){

    .contenido{

        width:82%;

    }

    .contenido h1{

        font-size:3.2rem;

    }

    .contenido h2{

        font-size:1.8rem;

    }

    .item h3{

        font-size:1.3rem;

    }

}

@media (max-width:1200px){

    .lado-izquierdo{

        width:38%;

        min-width:470px;

    }

    .circulo{

        width:130px;
        height:130px;

    }

    .circulo i{

        font-size:72px;

    }

    .login{

        width:430px;

        padding:50px 35px 30px;

    }

}

@media (max-width:992px){

    body{

        overflow:auto;

    }

    .contenedor{

        flex-direction:column;

    }

    .lado-izquierdo{

        display:none;

    }

    .lado-derecho{

        width:100%;

        min-height:calc(100vh - 54px);

    }

    .login{

        margin:70px auto;

    }

}

@media (max-width:600px){

    .login{

        width:92%;

        padding:45px 25px 30px;

    }

    .icono-usuario{

        margin-top:-95px;

    }

    .circulo-user{

        width:100px;
        height:100px;

    }

    .circulo-user i{

        font-size:48px;

    }

    .login h2{

        font-size:1.7rem;

    }

    .opciones{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .btn-login{

        font-size:16px;

    }

}

@media (max-width:430px){

    .barra-superior{

        padding:0 10px;

    }

    .logo-app span{

        font-size:13px;

    }

    .botones-ventana button{

        width:38px;

    }

}

/*==================================================
            TRANSICIONES
==================================================*/

button,
input,
a,
.item,
.icono,
.logo-mini,
.circulo,
.circulo-user,
.login{

    transition:.30s ease;

}

/*==================================================
            CURSORES
==================================================*/

button{

    cursor:pointer;

}

a{

    cursor:pointer;

}

/*==================================================
            SCROLL
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#EDF4FC;

}

::-webkit-scrollbar-thumb{

    background:#0D6EFD;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0A4FC5;

}

/*==================================================
            SELECCIÓN
==================================================*/

::selection{

    background:#0D6EFD;

    color:white;

}

/*==================================================
            SOMBRAS FINALES
==================================================*/

.login{

    box-shadow:

        0 35px 70px rgba(0,0,0,.10);

}

.item .icono{

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

}

.circulo{

    box-shadow:

        0 25px 50px rgba(0,0,0,.18);

}

/*==================================================
            ACABADOS
==================================================*/

.login{

    backdrop-filter:blur(20px);

}

.item p{

    opacity:.96;

}

.item:hover p{

    opacity:1;

}

.item:hover .icono{

    background:rgba(255,255,255,.25);

}

.input input{

    font-weight:500;

}

.input input::placeholder{

    font-weight:400;

}

.btn-login{

    letter-spacing:.4px;

}

.btn-login span{

    position:relative;

    z-index:2;

}

.btn-login i{

    position:relative;

    z-index:2;

}

.logo-mini i{

    transition:.3s;

}

.logo-mini:hover i{
    transform:rotate(12deg);
}

.decoracion span{
    box-shadow:
        0 0 12px rgba(61,184,255,.35);
}
.linea{
    box-shadow:
        0 0 15px rgba(88,213,255,.35);
}

/* Oculta el ojo que agrega Microsoft Edge */

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
    display:none;
}

input::-ms-reveal{
    display:none;
}

input::-ms-clear{
    display:none;
}