/* RESPONSIVE */


/********  XL  *******/
@media screen and (min-width:1600px) {
    /*#ventanaBio {
        width: 650px;
        width: 640px;
    }
    #cuerpoBio {
        width: 580px;
    }
    #textoBio {
        width: 100%;
        margin: 20px auto;
        overflow-y: scroll;
        padding-left: 10px;
        padding-right: 10px;
    }
    .cajaBio {
        margin: 0 auto;
        margin-top: 10px;
    }
    #accionesBio {
        width: 100%;
        height: 50px;
        margin-top: 0px;
    }
    #imgFotoTitularBio {
        left: 50px;
        top: 200px;  
        border-radius: 60px;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    #cuerpoVentanaBio {
         height: auto;
    margin-top:0px;
    }
    #imgFotoPortadaBio {
        height: 300px;
    }
    #cuerpoBio {
        position: relative;
        margin: 0 auto;
    }
    #accionesBio img {
        float: right;
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }
    #imgEditarFotoBio:hover {
        width: 53px;
    }
    #imgAniadirFotoBio:hover {
        width: 53px;
    }
    #imgCompartirFotoBio:hover {
        width: 46px;
    }
*/
    #ventanaBio {
        width: 640px;
        min-height:600px;
    }

    #cuerpoBio {
        width: 580px;
        position: relative;
        margin: 0 auto;
        margin-top: 30px;
    }

    #textoBio {
        width: 100%;
        margin: 20px auto;
        overflow-y: scroll;
        padding-left: 10px;
        padding-right: 10px;
    }

    .cajaBio {
        margin: 0 auto;
        margin-top: 10px;
    }

    #imgFotoTitularBio {
        left: 50px;
        top: 200px;
        border-radius: 60px;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }

    #cuerpoVentanaBio {
        height: auto;
        margin-top: 0px;
    }

    #imgFotoPortadaBio {
        height: 300px;
    }

    #accionesBio {
        top: 58px;
        position: absolute;
        margin-top: -20px;
        right: 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 32px;
    }

        #accionesBio .accionBio {
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
            padding: 0;
            z-index: 20;
        }

            #accionesBio .accionBio:hover .textoAccionBio {
                color: #f024bb;
            }

        #accionesBio .iconoBio {
            width: 32px;
            height: 32px;
            margin-right: 5px;
            vertical-align: middle;
            display: inline-block;
        }

        #accionesBio .textoAccionBio {
            font-size: 16px;
            vertical-align: middle;
            margin: 0;
            padding: 0;
            line-height: 32px;
            display: inline-block;
        }




}


/********  L  *******/
@media screen and (min-width:950px)and (max-width:1600px) {

    #ventanaBio {
        width: 650px;
        min-height: 600px;
    }
    #cuerpoBio {
        width: 580px;
        position: relative;
        margin: 0 auto;
        margin-top: 30px;
    }
    #textoBio {
        width: 100%;
        margin: 20px auto;
        overflow-y: scroll;
        padding-left:10px;
        padding-right:10px;
    }
    .cajaBio {
        margin: 0 auto;
        margin-top: 10px;
    }
    #imgFotoTitularBio {
        left: 50px;
        top: 200px;
        border-radius: 60px;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    #cuerpoVentanaBio {
        height: auto;
        margin-top: 0px;
    }
    #imgFotoPortadaBio {
        height: 300px;
    }
    #accionesBio {
        top: 58px;
        position: absolute;
        margin-top: -20px;
        right: 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 32px;
    }
    #accionesBio .accionBio {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        padding: 0;
        z-index: 20;
    }
    #accionesBio .accionBio:hover .textoAccionBio {
        color: #f024bb;
    }
    #accionesBio .iconoBio {
        width: 32px;
        height: 32px;
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block;
    }

    #accionesBio .textoAccionBio {
        font-size: 16px;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        line-height: 32px;
        display: inline-block;
    }

}

/********  M  *******/
@media screen and (min-width:650px)and (max-width:950px) {

    #ventanaBio {
        width: 100%;
        
    }
    #cuerpoBio {
        width: 580px;
        position: relative;
        margin: 0 auto;
        margin-top: 40px;
    }

    #textoBio {
        width: 100%;
        margin: 20px auto;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:40px;
        font-size:16px;
        overflow-y:scroll;
    }

    .cajaBio {
        margin: 0 auto;
        margin-top: 10px;
    }
    
    #imgFotoTitularBio {
        left: 50px;
        top: 210px;
        border-radius: 60px;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    #cuerpoVentanaBio {
        height: auto;
       
    }
    #imgFotoPortadaBio {
        height: 300px;
    }
    
  /*  #accionesBio img {
        float: right;
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }

    #imgEditarFotoBio:hover {
        width: 53px;
    }

    #imgAniadirFotoBio:hover {
        width: 53px;
    }

    #imgCompartirFotoBio:hover {
        width: 46px;
    }*/
    #accionesBio {
        width: 360px;
        height: 50px;
       
        top: 62px;
        position: absolute;
        margin-top: -20px;
         right: 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 32px;
        /*border: 3px solid red;*/
    }

        #accionesBio .accionBio {
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
            padding: 0;
            z-index: 20;
        }

            #accionesBio .accionBio:hover .textoAccionBio {
                color: #f024bb;
            }

        #accionesBio .iconoBio {
            width: 32px;
            height: 32px;
            margin-right: 5px;
            vertical-align: middle;
            display: inline-block;
        }

        #accionesBio .textoAccionBio {
            font-size: 16px;
            vertical-align: middle;
            margin: 0;
            padding: 0;
            line-height: 32px;
            display: inline-block;
        }

}


/********  S  *******/
@media screen and (min-width:500px)and (max-width:650px) {

    #ventanaBio {
        width: 100%;
        /* border: 1px solid red;*/
    }
    #textoBio {
        width: 100%;
        margin: 20px auto;
        margin-bottom:100px;
    }

    .cajaBio {
        margin: 0 auto;
        margin-top: 10px;
    }
    #accionesBio {
        width: 100%;
        height: 50px;
        margin-top: 0px;
    }
    #imgFotoTitularBio {
        left: 50px;
        top: 188px;
        border-radius: 60px;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    #cuerpoVentanaBio {
        height: auto;
        overflow-y: scroll;
        margin-top: 0px;
        padding-bottom:100px;
        
    }
    #imgFotoPortadaBio {
        height: 300px;
    }
    #cuerpoBio {
        /*border: 1px solid blue;*/
        position: relative;
        margin: 0 auto;
    }

    #accionesBio img {
        float: right;
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }

    #imgEditarFotoBio:hover {
        width: 53px;
    }

    #imgAniadirFotoBio:hover {
        width: 53px;
    }

    #imgCompartirFotoBio:hover {
        width: 46px;
    }

    #accionesBio {
        /*width: 360px;
        height: 50px;*/
        bottom: 5px;
        position: absolute;
        margin-top: -20px;
        /*right: 30px;*/
        display: flex;
        flex-direction: row;
        /*justify-content: flex-start;*/
        justify-content: center;
        align-items: center;
        gap: 32px;
        background-color: #eff8e0;
        height: 60px;
        width: 97%;
        /*  border: 3px solid red;*/
    }

        #accionesBio .accionBio {
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
            padding: 0;
            z-index: 20;
        }

            #accionesBio .accionBio:hover .textoAccionBio {
                color: #f024bb;
            }

        #accionesBio .iconoBio {
            width: 32px;
            height: 32px;
            margin-right: 5px;
            vertical-align: middle;
            display: inline-block;
        }

        #accionesBio .textoAccionBio {
            font-size: 16px;
            vertical-align: middle;
            margin: 0;
            padding: 0;
            line-height: 32px;
            display: inline-block;
        }



}



/********  XS  *******/
@media screen and (max-width:500px) {

    #ventanaBio {
        width: 500px;
        /* border: 1px solid red;*/
    }



    #textoBio {
        width: 490px;
        font-size: 140%;
        /*margin-bottom:40px;*/
        /* border: 1px solid red;*/
        /* margin: 20px auto;*/
        padding: 20px;
        /*overflow-y: scroll;*/
       padding-bottom:60px;
        margin-top:10px;
    }


    .cajaBio {
       
       /* margin: 0 auto;
        margin-top: 10px;*/
    }

   /* #accionesBio {
      
        position: fixed; 
        bottom: 10px;
        z-index: 1000; 
        display: flex;
        align-items: center;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        border-top: 1px solid #ddd; 
        justify-content: center;
        background-color: #eff8e0;
        width: 95%;
        height: 70px;
        margin-top: 0px;
        justify-content: center;
        background-color: #eff8e0;
    }*/
    #imgFotoTitularBio {
        left: 50px;
        top: 140px;
        border-radius: 60px;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    #cuerpoVentanaBio {
        height: auto;
        margin-top: 0px;
        overflow-y: scroll;
    }
    #imgFotoPortadaBio {
        height: 250px;
    }
    #cuerpoBio {
        position: relative;
        margin: 0 auto;
    }

   /* #accionesBio img {
        float: right;
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }

    #imgEditarFotoBio:hover {
        width: 53px;
    }

    #imgAniadirFotoBio:hover {
        width: 53px;
    }

    #imgCompartirFotoBio:hover {
        width: 46px;
    }
*/

    #accionesBio {
        /*width: 360px;
        height: 50px;*/
       bottom:5px;
        position: absolute;
        margin-top: -20px;
        /*right: 30px;*/
        display: flex;
        flex-direction: row;
        /*justify-content: flex-start;*/
        justify-content:center;
        align-items: center;
        gap: 32px;
        background-color:#eff8e0;
        height:60px;
        width:97%;
      /*  border: 3px solid red;*/
    }

        #accionesBio .accionBio {
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
            padding: 0;
            z-index: 20;
        }

            #accionesBio .accionBio:hover .textoAccionBio {
                color: #f024bb;
            }

        #accionesBio .iconoBio {
            width: 32px;
            height: 32px;
            margin-right: 5px;
            vertical-align: middle;
            display: inline-block;
        }

        #accionesBio .textoAccionBio {
            font-size: 16px;
            vertical-align: middle;
            margin: 0;
            padding: 0;
            line-height: 32px;
            display: inline-block;
        }



}

/* FIN MEDIA QUERIES*/
/*******************************************************************/



#textoBio {
    position: relative;
    
    text-align: justify;
}


.cajaBio {
    position: relative;
   
}







body {
}

/*#containerVentanaGen {
    width: 552px;
    height: 719px;
}*/


#containerVentanaBio{

    


}
#cuerpoVentanaBio {

   /* height: auto;
    overflow:hidden;
    margin-top:0px;*/

}



#cuerpoBio .loading {
    /* border:1px solid red;*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
    background-color: white;
    text-align: center;
}

    #cuerpoBio .error {
        /* border:1px solid red;*/
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 900;
        background-color: white;
        text-align: center;
        display: none;
    }

#textoErrorBio {
    background-color: #eff8e0;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 100px;
}


#bErrorBio {
    height: 30px;
    float: none;
    position: relative;
    margin: 0 auto;
    padding-top: 5px;
    margin-top: 20px;
}

#imgFotoPortadaBio {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 100;
    /*border: 1px solid red;*/
    width: 100%;
  /*  height: 300px;*/
    object-fit: cover;
    cursor: pointer;
    /*display: none;*/
}


#imgFotoTitularBio {
    object-fit: cover;
    position: absolute;
    z-index: 100;
    border: 6px solid white;

   /* left: 50px;
    top: 250px;  
    border-radius: 60px;
    width: 120px;
    height: 120px;
    cursor: pointer;*/
}





#fotoBio{

    display:none;
    /*border:1px solid red;*/
}

.fotoHide{

    display:none;
}


.fotoBio {
    /*overflow: hidden;
    position: relative;
    float: left;*/
    border: 2px solid #999999;
    background-color: white;
    position: relative;
    /*margin: 0 auto;*/
    z-index: 5;
    cursor: pointer;
    margin-top: 4px;
    margin-left:4px;
    /*width: 184px;
    height: 184px;*/
    float: left;
}

    .fotoBio img {
object-fit:cover;

width:184px;
 height: 184px;

    }



#accionesBio {
   
}


#rolBio, #solicitudBio {
    /*width: 500px;*/
    height: 580px;
    position: relative;
    margin: 0 auto;
    border: 3px solid #eff8e0;
    margin-top: 30px;
}