@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
}

body{
    font-family: 'Roboto', sans-serif;
    background-color: rgba(12, 12, 12);
     color: white;
}


/* ///////////////////////////////////// scroll bar /////////////////////////// /*/

/* Personaliza la barra de desplazamiento para todo el documento */
::-webkit-scrollbar {
    width: 2px; /* o el grosor que prefieras */
}

/* Personaliza el riel de la barra de desplazamiento */
::-webkit-scrollbar-track {
    background: #000; /* color de fondo del riel */
}

/* Personaliza el aspecto del control deslizante de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
    background: linear-gradient(white, black); /* gradiente para el control deslizante */
}

/* Personaliza el aspecto del control deslizante al pasar el mouse */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(black, white); /* gradiente para el hover */
}
.flashes.error {
    color: red;
  }
  
  .flashes.warning {
    color: orange;
  }
  
  .flashes.info {
    color: blue;
  }
  
  .flashes.success {
    color: green;
  }
.lista_seguidores {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }
  
  .lista_seguidores li {
   
    text-align: center;
  }


/* ////////////////////////////////////// DESDE ACA APARA ABAJO VAN LOS ITEM EXPORTADOS DESDE LA LANDING */ 


/* registro y login */



.container-form{
    
    max-width: 900px;
    height: 700px;
    display: flex;
    transition: all 0.3s ease-in;
    margin: 15vh auto;
    background-color: rgba(17, 17, 17 , 0.7);
    border-radius: 20px;
}

.informacion{
    width: 60%;
    display: flex;
    align-items: center;
    text-align: center;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    opacity: 0.9;
}

.info-childs{
    width: 100%;
    padding: 0 20px;
    margin-top: -20px;
}
.info-childs h2{
    font-size: 2.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px;
}
.info-childs p{
    margin: 15px 0px;
    font-size: 14px;
    margin-top: 22px;
}

.info-childs input{
    background-color: transparent;
    outline: none;
    border: solid 2px black;
    border-radius: 20px;
    padding:10px 20px;
    margin-top: 60px;
    color: white;
    cursor: pointer;
    transition: background-color .1s ease;
}

.info-childs input:hover {

    background-color: white;
    text-transform: uppercase;
    color: black;
}

/* parte de la derecha crear cuenta */
.form-information {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    text-align: center;
    background-color: rgba(17, 17, 17 , 0.7);
}

.form-information-childs{
    padding: 0 30px;
}

.form-information-childs h2{
    font-size: 2.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.form-information-childs p{
    color: black;
    font-weight: 800;
}

.icons{
    margin: 15px 0px;
    display: none;
}

.icons img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    margin: 0 10px;
}

.form{
    margin: 30px 0 0 0;
    margin-top: 5vh;
}

.form label {
    background-color: white;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 20px;
    padding: 0 10px;
}

#genero{
    color: black;
}
.form label input{
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    border-radius: 20px;
    color: black;
    text-decoration: none;
}

.form input[type="submit"]{
    background-color: black;
    color: white;
    border-radius: 20px;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;
    text-decoration: none;
    text-transform: uppercase;
}
#pais{
    padding: 10px;
}
.form input[type="submit"]:hover{
    background-color: rgb(255, 255, 255);
    color: black;
}


.hide{
    position: absolute;
    top: 7%;
    left: 25%;
    transform: translateY(-150%);
    transition: transform 0.8s ease-out;
      
      

}


/* CSS DE LA LANDING * INCLUSION DE BARRA DE NAVEGACION */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}





/* barra de navegacion y encabezado */

header{ 
    width: 100%;
    height: 90px;  
    z-index: 000;
    margin-left: 0px;
    position: absolute;
    margin: auto ;
    background-color: rgba(17, 17, 17 , 0.7);
   
}

header nav {
    margin-top: 0px;
    height: 90px;
    display: flex;
    justify-content: space-around;
    background-color: rgb(17, 17, 17);
    border-bottom: 1px solid #3565AE;
}

.icono{
    display: none;
}

.enlaces {
    display: flex;
    height: 100%; 
    width: 100%;
    align-items:center;
    justify-content: center;
    color: white;
}


.enlaces a {
    margin: 10px;
    background-color: transparent;
    color: white;
    padding: 15px;
    border-radius: 30px;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgb(30, 30, 31); /* Añadir borde para mejor visibilidad */
    transition: color 0.3s ease-in-out; /* Transición suave para el color */
}


.enlaces a:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(25, 118, 210, 0.2) 0%, rgba(25, 118, 210, 0.2) 50%, rgba(7, 7, 7, 0.6) 100%);
    transform: translateY(-100%);
    transition: transform 0.1ms ease-in-out;
}


.enlaces a:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(53, 101, 174) 0%, rgba(2, 2, 2, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%);
    transform: translateY(100%);
    transition: transform 0.1s ease-in-out;
}


.enlaces a:hover::before,
.enlaces a:hover::after {
    animation: wave 1.5s infinite linear;
}

@keyframes wave {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}


.menu{
    background-color: #000000;
    height: 100%;
}
nav .logo{
    height: 100%;;
    margin-left: 100px;
    margin-top: 2px;
}

nav .logo img {
    object-fit: cover;
    width: 90px;
    height: 90px;
}

/* FIN DE LA BARRA DE NAVEGACION EN PC */





/* /////////////////////////////////////// HASTA ACA LOS INCLUDE EXTERNOS DESDE /*/




:root{
    --color-barra-lateral:rgb(10, 10, 10);
    --color-texto:rgb(255, 255, 255);
    --color-texto-menu:rgb(255, 255, 255);
    --color-boton:rgb(53, 101, 174);
    --color-boton-texto:rgb(255,255,255);
    --color-menu-hover:rgb(238,238,238);
    --color-menu-hover-texto:rgb(0,0,0);
    --color-switch-base:rgb(201,202,206);
    --color-switch-circulo:rgb(241,241,241);
    --color-scroll:rgb(192,192,192);
    --color-scroll-hover:rgb(134,134,134);
}



.dark-mode{
    --color-barra-lateral:rgb(44,45,49);
    --color-texto:rgb(255,255,255);
    --color-texto-menu:rgb(110,110,117);
    --color-boton:rgb(255,255,255);
    --color-boton-texto:rgb(0,0,0);
    --color-menu-hover:rgb(0,0,0);
    --color-menu-hover-texto:rgb(238,238,238);
    --color-switch-base:rgb(53, 101, 174);
    --color-switch-circulo:rgb(255,255,255);
    --color-scroll:rgb(68,69,74);
    --color-scroll-hover:rgb(85,85,85);
}


/* estilos dashboard usuario priv */






/* //////////////////// menu dashboard */

.menu-dashboard{
    position: fixed;
    width: 50px;
    height: 50px;
    font-size: 30px;
    display: none;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    background-color: var(--color-boton);
    color: var(--color-boton-texto);
    right: 15px;
    top: 15px;
    z-index: 100;
    
}






/* ////////////////////////// barra lateral /*/

.barra-lateral{
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0px;
    width: 250px;
    height: 100%;
    padding: 20px 15px;
    background-color: var(--color-barra-lateral);
    transition: width 0.5s ease,background-color 0.3s ease,left 0.5s ease;
    overflow: hidden;
    z-index: 50;
    border-right: 1px solid #3565AE;
}

.barra-lateral .nombre-pagina{
    width: 100%;
    height: 45px;
    color: var(--color-texto);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}

.mini-barra-lateral{
    width: 80px;
}


.barra-lateral  span {
    width: 160px;
    white-space: nowrap;
    font-size: 18px;
    opacity: 1;
    transition: opacity 0.5s ease,width 0.5s ease; 
    text-align: left;
}


.barra-lateral  span.oculto{
    opacity: 0;
    width: 0;
}



.barra-lateral .nombre-pagina i{
    color: white;
    min-width: 50px;
    font-size: 30px;
    cursor: pointer;


}

.barra-lateral .nombre-pagina span{
    margin-left: 5px;
    font-size: 20px;
    margin-top: 5px;
}

.barra-lateral .botton{
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background-color:var(--color-boton);
    color: var(--color-boton-texto);
}

.barra-lateral .botton i {
    min-width: 50px;
    font-size: 25px;
}

/* * * * ** ** MENU NAVEGACION */ 

.barra-lateral .navegacion{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.barra-lateral .navegacion::-webkit-scrollbar{
    width: 5px;
}

.barra-lateral .navegacion::-webkit-scrollbar-thumb{
    background-color: var(--color-scroll);
    border-radius: 5px;
}

.barra-lateral .navegacion::-webkit-scrollbar-thumb:hover{
    background-color: var(--color-scroll-hover);
}

.barra-lateral .navegacion li {
    list-style: none;
    display: flex;
    margin-bottom: 5px;
   
}

.barra-lateral .navegacion li a {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 10px;
    color: var(--color-texto-menu);
    
}

.barra-lateral .navegacion a:hover{
    background-color: var(--color-menu-hover);
    color: var(--color-menu-hover-texto);
}


.barra-lateral .navegacion i {
    min-width: 50px;
    font-size: 20px;
    margin-left: 10px;
}


/*  ///////// lineaaa /*/ 

.barra-lateral .linea {
    margin-top: 15pxs;
    width: 100%;
    height: 1px;
    background-color: #3565AE;
}


/* ////////// modo oscuro menu */

.barra-lateral .modo-oscuro{
    width: 100%;
    margin-bottom: 80px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}

.barra-lateral .modo-oscuro .info{
    width: 150px;
    height: 45px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: white;
}

.barra-lateral .modo-oscuro i{
    width: 50px;
    font-size: 20px;
    margin-left: 5px;
}


/* ///// switch menu ///*/

.barra-lateral .modo-oscuro .switch{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 45px;
    cursor: pointer;
}

.barra-lateral .modo-oscuro .base {
    position: relative;
    display: flex;
    align-items: center;
    width: 35px;
    height: 20px;
    background-color: var(--color-switch-base);
    border-radius: 50px;
}

.barra-lateral .modo-oscuro .circulo{
    position: absolute;
    width: 18px;
    height: 90%;
    background-color: var(--color-switch-circulo);
    border-radius: 50%;
    left: 2px;
    transition: left 0.5s ease;
}

.barra-lateral .modo-oscuro .circulo.prendido{
    left: 15px;
}


/* //////// usuario nav bar /*/

.barra-lateral .usuario{
    width: 100%;
    display: flex;
}


.barra-lateral .usuario img {
    width: 50px;
    min-width: 50px;
    border-radius: 10px;
}

.barra-lateral .usuario .info-usuario{
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: space-between;
    color: var(--color-texto);
    overflow: hidden;
}

.barra-lateral .usuario .nombre-email{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}

.barra-lateral .usuario .nombre{
    font-size: 15px;
    font-weight: 600;
}

.barra-lateral .usuario .email{
    font-size: 13px;
}

.barra-lateral .usuario i{
    font-size: 20px;
}









/* SE CREA TODO ADENTRO DEL MAIN.*/
main{
    margin-left: 250px;
    padding: 10px;
}

main.min-main{
    margin-left: 80px;
    transition: margin-left 0.5s ease;
}


/* ////// CONTENIDO PAGINA FORM ETC */ 

.formularios{
    margin-top: 10vh;
    background-color: rgb(35, 41, 41);
    height: 100%;
    width: 100%;
}

 /* caja grande */
.formularios .formulario-1{
    background-color: rgb(85, 30, 30);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    flex-direction: column;
    width: 90%;
    height: 700px;
    margin: auto auto;
    position: relative;
}


.formularios .formulario-1 .texto{
    padding: 10px;
    background-color: rgb(22, 22, 22);
    width: 100%;
   
}




.formularios .formulario-1 img{
    padding: 0px;
    height: 100%;
    width: 100%;

}

/* caja mediana */


.formularios .formulario-2{
    margin-top: 10vh;
    background-color: tomato;
    display: grid;
    gap: 10px 0px;
    grid-template-columns: repeat(2,1fr);
    flex-direction: column;
    width: 100%;
    height: 700px;
    border: 2px solid white;
    

}


.formularios .formulario-2 .texto2{
    padding: 10px;
    background-color: brown;
    width: 100%;
    border: 2px solid rgb(107, 18, 148);

}



.formularios .formulario-2 img{
    padding: 10px;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 102, 255);
    border: 2px solid rgb(128, 0, 43);

}




/* ///////////////////////////////// EDICION PERFIL DASHBOARD  /////////////////////////////////////// */


.formulario-perfil{
    background-color: rgb(12, 12, 12);
}
.formulario-perfil .formulario-1-perfil{
    background-color: rgb(12, 12, 12);
    display: grid;
    grid-template-columns: repeat(1,1fr);
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: auto auto;
    position: relative;
}

.formularios .formulario-1-perfil .texto{
    padding: 10px;
    background-color: rgb(12, 12, 12);
    width: 100%;
    border-bottom: 1px solid gray;
 
}


.texto h1{
   text-align: center;
   font-size: 25px;
   text-transform: uppercase;
   color: white;
}
.texto h1 span{
    color: gray;
    margin-left: 5px;
}

.texto h3 {
    margin-top: 20px;
    margin-left: 30px;
    color: gray;
    text-decoration: none;
    font-size: 18px;
}

.texto h3 span {
    color: white;
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 20px;
}

.arroba{
    font-style: italic;
    color: gray;
}

.arroba:hover{
    font-style: italic;
    color: rgb(255, 255, 255);
}

.texto h3 .info-span-2{
    color: gray;
    text-align: center;
    text-transform: uppercase;
}
.texto2{
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    width: 50%;
    margin: auto;
}


/* ///////////////////////////////// edicion fotos de la parte de perfil del dashboard ////////////////////// */




.formularios .formulario-1 .imagen-perfil-usser{

    height: 300px;
    width: 400px;
    object-fit: cover;
    position: absolute;
    top: 80px;
    right: 80px;
    border-radius: 80px;
    box-shadow: 0px 1px 1px 1px #3565AE;


}


.imagen-portada-usser{
    border-radius: 50%;
}


/* /////////////////////////////// MODIFICACION PERFIL PARTE PERFIL //////////////////////////////////// /*/
.contenedor-modificar-perfil {
    margin-top: 5vh;
}

.contenedor-modificar-perfil a {
    text-decoration: none;
    color: white;
}






.contenedor-modificar-perfil h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    font-size: 20px;
}

.contenedor-modificar-perfil h2:hover {
    text-decoration: none;
    color: grey;
}



.contenedor-modificar-perfil h2 .mas-menos-perfil {
    color:#3565AE;
    margin-left: 10px;
    font-size: 24px;
}

/* Contenedor principal */
.contenedor-modificar-perfil .modificar-perfil-contenedor {
    background-color: rgba(12, 12, 12);
    width: 100%;
    margin: auto;
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

/* Estilo para cada grupo de formulario */
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Etiquetas de los campos */
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group label {
    color: grey;
    font-size: 18px;
    width: 100%;
    text-align: center;
}

/* Estilo para inputs, selects y textareas */
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group input,
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group select,
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group textarea {
    background-color: #494848;
    color: white;
    border: 1px solid #3565AE;
    border-radius: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    max-width: 300px;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    text-align: center;
    /* Añadimos sombra y ajustamos el box-shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Efecto hover */
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group input:hover,
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group select:hover,
.contenedor-modificar-perfil .modificar-perfil-contenedor .form-group textarea:hover {
    background-color: #3a3a3a;
    border-color: #2c4e8c;
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aumentamos la sombra al hacer hover */
}


/* ///////////////////////////////////// formulario 2 perfil usuario /////////////////////////////////////////// /*/



.formularios .formulario-2-perfil{
    margin-top: 20vh;
    background-color: rgb(12, 12, 12);
    display: grid;
    gap: 10px 0px;
    grid-template-columns: repeat(2,1fr);
    flex-direction: column;
    width: 100%;
    height: 700px;
    border: none;
    

}


.formularios .formulario-2-perfil .texto2{
    padding: 10px;
    background-color: brown;
    width: 100%;
    border: 2px solid rgb(107, 18, 148);

}



.formularios .formulario-2-perfil img{
    padding: 10px;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 102, 255);
    border: 2px solid rgb(128, 0, 43);

}



















































































/* /////////////////////////////////// RESPONSIVE DE TODO /*/




@media (max-height: 660px){
    .barra-lateral .nombre-pagina{
        margin-bottom: 5px;
    }

    .barra-lateral .modo-oscuro{
        margin-bottom: 3px;
    }
}


@media (max-width:600px){
    .barra-lateral{
        position: fixed;
        left: -250px;
    }

    .max-barra-lateral{
        left: 0;
    }

    .menu-dashboard{
        display: flex;
    }


    .menu-dashboard i:nth-child(2){
        display: none;
    }

    main {
        margin-left: 0;
    }

    main.min-main{
        margin-left: 0;
    }
}