@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;1,100;1,400;1,500;1,600;1,700&display=swap');

/* ***************** Estilos Genéricos  ********************* */
:root {
    --FuenteTexto: 'Poppins', sans-serif;
    --purpura: #7140FD;
    --lilablue: #482DFF;
    --lila:#6610f2;
    /* --lila: linear-gradient(332deg, #000000cf, #6610f2 63%); */
    /* --lila:#5B519D; */
    --lila2: #6153c0;
    --lilaClaro: #bcc8ff44;
    --footer: #2e2a4e;
    --morado:#5A519B;
    --gris: #f1f1f1d5;
    --grisOscuro: #8c779186;
    --naranja: #ff8264;
    --rosa: #ef6497;
    --rojo: rgb(247, 47, 47);
    --rojoTransparente:rgba(247, 47, 47, 0.541);
    --azul: #54bacc;
    --verde: #66D0A4;
    --amarillo: #FDD05B;
    --blanco: #FFFFFF;
    --Negro: #000000;
    --transparent: #ffffff15;
    --main-gradient: linear-gradient(90deg, #4048FD 0.04%, #6153c0 28.67%, #7140FD 54.05%, #5A519B 78.11%, #2e2a4e 100.04%);
      /* COLORES ALERTAS - NOTIFICACIONES */
      --alertMax: #fc9999;
      --alertMed:#ffe6a8;
      --alertMin: #a4e9be;

      --messageSent:#d5ffe5;
      --messageReceive:#fff5dc;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--FuenteTexto);
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: var(--FuenteTexto);
    background: linear-gradient(180deg, rgba(188, 200, 255, 1) -74%, rgba(255, 255, 255, 1) 45%, rgba(188, 200, 255, 1) 200%);
    background-attachment: fixed;
    /* overscroll-behavior: none; EVITA EL RECARGAR LA PAGINA AL HACER SCROLL */
}

/* .fondo{
background: var(--Secondary, #AEACFF);
filter: blur(364.5px);
z-index: -99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
position: absolute;
width: 100%;
height: 40%;
bottom: 0;

} */

img{
    max-width: 100%;
    image-orientation: from-image;
}

a{
    text-decoration: none;
    font-size: clamp(16px, 2vw, 18px);
    cursor: pointer;
    color: var(--lila);
}

a:hover {
    color: var(--naranja);
}

ul{
    list-style: none;
}

li{
    list-style: none;
}

h1{
    font-size: clamp(20px, 2vw, 40px);
    font-weight: 400;
}

h2{
    font-size: clamp(17px, 2vw, 30px);
    font-weight: 600;
}

h3{
    font-size: clamp(16px, 2vw, 20px);
}

p{
    font-size: clamp(15px, 2vw, 18px);
}

i{
    padding: 11.11px 11.11px 0 11.11px;
}

input{
    font-size: clamp(15px, 2vw, 18px);
}

.hide{
    display: none;
}

.container {
    margin: 0 auto;
    width: 80%;
}

.block{
    display: block;
}

.flex{
    display: flex;
}

.grid{
    display: grid;
}

.relative{
    position: relative;
}

.absolute{
    position: absolute;
}

.centrarEjeX{
    text-align: center;
}

.txtLeft{
    text-align: left;
}

/* MARGENES */

.mt__20{
    margin-top: 20px;
}


.mt__50{
    margin-top: 50px;
}

.mt__70{
    margin-top: 70px;
}
.mt__100{
    margin-top: 100px;
}

.mb__10{
    margin-bottom: 10px;
}

.mb__20{
    margin-bottom: 20px;
}
.mb__50{
    margin-bottom: 50px;
}

.mb__200{
    margin-bottom: 200px;
}


.max__width{
    max-width: 1800px;
}

/* BOTON PRINCIPAL */

button{
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.btn_default {
    background-color: var(--lila);
    border: solid 1px var(--lila);
    color: var(--blanco);
    border-radius: 33.33px;
    padding: 10px 69px;
    font-size: medium;
    cursor: pointer;
    transition: 0.5s;
}

.btn_default:hover {
    background-color: var(--transparent);
    border: solid var(--Negro) 1px;
    color: var(--Negro);
    transition: 0.5s;
}

.btn_delete {
    background-color: var(--rojo);
    border: solid 1px var(--rojo);
    color: var(--blanco);
    border-radius: 33.33px;
    padding: 10px 69px;
    font-size: medium;
    cursor: pointer;
    transition: 0.5s;
}

.btn_delete:hover {
    background-color: var(--rojoTransparente);
    border: solid var(--rojo) 1px;
    color: var(--Negro);
    transition: 0.5s;
}

/* NAV */

/* .profileUser__nav{

    
} */

header{
    position: sticky;
    top: 0;
    z-index: 999999999999999999999;
    box-shadow: 0px 4px 13px 1px var(--grisOscuro);
}

nav{
    background-color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* position: fixed;
    top: 0; */
    width: 100%;
    z-index: 99999999999999999;
    padding: 0 34px;

    /* LOGOTIPO EN LA BARRA DE NAVEGACION */
    /* background-image: url(/img/logo.webp);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 118px; */

}

.opciones{
    position: absolute !important;
    top: 11vh !important;
    left: 5vw !important;
    margin: 0 auto !important;
    width: 90% !important;
    z-index: 9999 !important;
}

.profileUserNav__photo--circle {
    border-radius: 50%;
    max-width: 64px;
    /* width: 33%; */
    margin-top: 7px;
}

.settings{
    margin-top: 10px;
}

.settings--size{
    font-size: clamp(22px, 2vw, 30px);
}


/* *********************************** USUARIO **************************************** */

.profileUser__photo__nav{
    /* width: 80%; */
    margin: 0 auto;
    max-width: 70%;
    margin-top: 6%;
}

.profileUser__photo__nav--circle{
    border-radius: 50%;
    width: 100px;
   
}

/* FORMULARIOS */
/* ******************************************* LOGIN ********************************************************* */
.login{
    margin-top: 4vh;
}

/* .logo{
    width: 320px;
} */

.login__cabecera{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap:20px; */
}

.login__cabecera__message{
    color: var(--lilablue);
    padding: 1vh 0;
}

.login__registro {
    padding-top: 1%; 
    padding-bottom: 2%;
    text-align: center;
    margin-bottom: 10px;
}
.login__registro--size{
    max-width: 400px;
    margin: 0 auto;
}

.login__registro__campo {
    position: relative;
    padding: 20px 50px 20px 0;
    border-radius: 33.05px;
    border: solid 1px;
    margin: 20px 0;
    background-color: var(--blanco);
}

.login__registro__campo__label{
    position: absolute;
    top: -15px;
    left: 22px; 
    background-color: var(--blanco);
    background: linear-gradient(0deg, rgb(255, 255, 255) 37%, rgba(255, 255, 255, 0.068) 100%);
    padding: 0 8px;
    z-index: 999999999999;
    border-radius: 15px;

    
}

.login__registro__campo__dato {
    position: absolute;
    top: -5px;
    left: 30px;
    border: none;
    z-index: 0;
    width: 80%;
    height: 40px;
    margin: 5px 0;
    background-color: transparent !important;
    outline: none !important;
    /*Quita los bordes al seleccionar el input*/
}

.login__registro__campo__dato--mostrar {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}


.login__registro__campo__remember {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 20px 0;
}

.login__registro__campo__remember__check {
    /* position: relative; */
    /* top: 2px; */
    margin-left: -20px;
    width: 30px;
    height: 15px;
}

.login__forget{
    padding: 2w;

}

/*para cambiar el color del autocompletado en los inputs*/
input:-webkit-autofill {
    -webkit-text-fill-color: var(--lila);
    font-size: clamp(15px, 2vw, 18px);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 40px 0px 0px 1000px var(--blanco) inset;

}




/* ******************************************* FORMAS DECORATIVAS ********************************************************* */

.circle0{
    position: absolute;
    z-index: -99999;
    top: -62vh;
    left: 0px;
    background-color: var(--lilaClaro);
    width: 100%;
    height: 90vh;
    border-radius: 50%;

}

/* ******************************************* CHAT ********************************************************* */
.chat{
    max-width: 970px;
    overflow-y: scroll;
    max-height: 500px;
    background-color: var(--lilaClaro);
    /* padding: 10px; */
    border-radius: 33px 33px 0 0;
    margin-top: 30px;
    transition: 2ms;
}

.chatHidden{
    overflow-y: initial;
    overscroll-behavior: none;
}

.chat2{
    max-width: 970px;
    overflow-y: auto;
    max-height: 500px;
    overscroll-behavior: none;
    /* padding: 10px; */
    border-radius: 33px 33px 0 0;
    margin-top:0px;
    transition: 2ms;
}

.sent{
    display: flex;
    justify-content: end;
}


.sent__message{
    text-align: right;
    background-color: var(--messageSent);
    padding: 10px 25px;
    border-radius: 33px 33px 0;
    min-width: 265px;
    margin: 5px 5px 5px 0px;
    max-width: 800px;
}

.receive{
    display: flex;
    justify-content: start;
}

.receive__message{
    text-align: left;
        background-color: var(--messageReceive);
        padding: 10px 25px;
        border-radius: 33px 33px 33px 0;
        min-width: 265px;
        margin: 5px 0px 5px 5px;
        max-width: 800px;
    }

.txtMin{
    font-size: clamp(8px, 2vw, 15px);
    /* font-weight: 300; */
    color: var(--grisOscuro);
}

.chat__form{
    max-width: 970px;
    max-height: 500px;
}

.chat__form__message__textArea{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    row-gap: 10px;
    position: relative;
}

.chat__form form textarea{
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    min-height: 100px;
    border: none;
    border-top: solid 3px var(--footer);
    padding: 10px 94px 16px 16px;
    background-color: var(--blanco);
    border-radius: 0 0 15px 15px;
    outline: none;
    font-size: clamp(15px, 2vw, 18px);
}

.chat__form form button {
    position: absolute;
    height: 60px;
    width: 64px;
    right: 17px;
    top: 28px;
    background-color: var(--lila);
    color: var(--blanco);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_sent__message{
    color: var(--blanco);
    font-size: clamp(25px, 2vw, 30px);
    padding: 0px !important;
    margin-top: 11px;
}

.sync{
    margin-top: 20px;
    text-align: center;
}

.sync__alineado{
    display: flex;
    justify-content: center;
    align-items: center;
}

.big{
    font-size: xx-large;
}
/* ******************************************* FOOTER / MENU PRINCIPAL ********************************************************* */
/* footer{
    width: 100%;
    background-color: var(--gris);
    border-radius: 45px 45px 0px 0px;
    padding: 2vw 15%;
    margin-top: 25px;
} */


/* footer{
    position: relative;
    bottom: 20px;
    left: 5vw;
    width: 90%;
    background-color: #b6b5b54d !important;
    border-radius: 100px;
    padding: 1% 10%;
    /* margin: 0 auto; 
    } */


    footer{
        position: fixed;
        z-index: 9999999999999;
        bottom: 10px;
        left: 5vw;
        width: 90%;
        background-color: var(--footer);
        border-radius: 100px;
        padding: 1% 10%;
        /* margin: 0 auto; */
    }

    
.menuIcon{
    color: var(--Negro);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: -10px;
}

.menuIcon a i{
    color: var(--blanco);
    font-size: clamp(25px, 2vw, 30px);
}

.menuIcon a i:hover{
    color: var(--naranja);
}

.current{
    color: var(--naranja) !important;
}

/* .footer__login{
    position: fixed;
    bottom: 0px;
} */


/* ++++++++++++++++++++++++++++ DISEÑO RESPONSIVE ++++++++++++++++++++++++++++++++ */
/*Large devices (desktops, 992px and up)*/
@media screen and (max-width: 1200px) 
{
    .circle0{
        overflow: hidden;
        top: -37vh;
        left: 0px;
        background-color: var(--lilaClaro);
        width: 100%;
        height: 60%;
    
    
    }
}

@media screen and (max-height: 1024px) {

}
/* Medium devices (tablets, 768px and up)*/
@media screen and (max-width: 992px) {

}

@media screen and (max-width: 720px) {

}

/* s-Small devices (small phones, 576px and up)*/
@media screen and (max-width: 694px) {

}

@media screen and (max-width: 576px) {
    .container {
        width: 90%;
    }

    .circle0{
        top: -31vh;
        left: 0px;
        background-color: var(--lilaClaro);
        width: 100%;
        height: 60%;
    }
}

@media screen and (max-width: 375px) {
    .circle0{
        top: -35vh;
        left: 0px;
        background-color: var(--lilaClaro);
        width: 100%;
        height: 60%;
    
    
    }
    footer{
        margin-top: 42px;
    }
}