:root {
    --color-marron-claro:#D9A689;
    --color-marron-oscuro: #59230F;
    --color-blanco: #f0f0f0;
}

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

html {
    font-size: 62.5%; /* 1rem será igual a 10px (62.5% de 16px) */
    background-color: var(--color-blanco);
}

.headerUser, .footerUser{
    width: 100%;
    height: 10vh;
    /* position: fixed; */
    background-color: var(--color-marron-claro);
}

.headerUser_p, .footerUser_p {
    font-size: 1.6rem;
}

.headerUser_p {
    width: 30%;
}

.headerUser .headerUser_p--descripcion {
    text-align: end;
}

.headerUser {
    position: static;
    display: flex;
    align-items: center;
    justify-content:space-around;
    border-bottom: 2px solid var(--color-marron-oscuro);
}

.headerUser .navUser {
    width: 100%;
    height: 100%;
}

.headerUser .headerUser_input {
    width: 30%;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 2px solid var(--color-marron-oscuro);
    outline: none
}

.mainUser {
    width: 100%;
    height: calc(100vh - 20vh);  
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-blanco);
}

.mainUser .listUsers {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:flex-start;
    background-color: var(--color-blanco);
    border-right: 2px solid var(--color-marron-oscuro);
    overflow-y: scroll;
    scrollbar-color: var(--color-marron-oscuro) var(--color-blanco); /*Estilos para la barra de desplazamiento de Firefox */
}

/* Estilos para la barra de desplazamiento de Edge */
@supports (-ms-ime-align: auto) {
    .mainUser .listUsers {
        scrollbar-width: thin;
        scrollbar-color: var(--color-marron-oscuro) var(--color-blanco);
    }
}

/* Estilos para la barra de desplazamiento de WebKit */
.mainUser .listUsers::-webkit-scrollbar-thumb { /* Color de la barra de desplazamiento */
    background-color: var(--color-marron-oscuro); 
}

.mainUser .listUsers::-webkit-scrollbar-track {/* Color de fondo de la barra de desplazamiento */
    background-color: var(--color-blanco); 
}

.mainUser .listUsers .listUsers_card {
    width: 90%;
    padding: 1rem;
    margin: 0.5rem 1rem;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-marron-oscuro);
    border-radius: 1rem;
}

.mainUser .listUsers .listUsers_card.selected {
    background-color: var(--color-marron-claro);
    border: 3px solid var(--color-marron-oscuro);
}

.mainUser .listUsers .listUsers_card.selected .cardUser_img {
    border: 3px solid var(--color-marron-oscuro);
}

.mainUser .listUsers .listUsers_card:hover {
    background-color: var(--color-marron-claro);
    cursor: pointer;
}

.mainUser .listUsers .listUsers_card .cardUser_img {
    border-radius: 50px;
    border: 1px solid var(--color-marron-oscuro);
    margin: 0 1rem;
}

.mainUser .listUsers .listUsers_card .cardUser_nombre {
    font-size: 1.6rem;
}

.mainUser .listUsers .listUsers_card .cardUser_p {
    font-size: 1.3rem;
}

.mainUser .CardUser {
    width: 75%;
    height: 100%;
    padding: 3rem;
    /* position: relative; */
    /* background-color: var(--color-marron-oscuro); */
}

.mainUser .CardUser .CardUser_card {
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-marron-oscuro);
    border-radius: 1rem;
    display: flex;
    position: relative;
    /* background-color: var(--color-blanco); */
}

.mainUser .CardUser .CardUser_card .card_iconos_icono,
.mainUser .CardUser .CardUser_card .card_iconos_icono--modal {
    margin: 1rem;
    color: var(--color-marron-claro)
}

.mainUser .CardUser .CardUser_card .card_iconos_icono {
    font-size: 7rem;
}

.mainUser .CardUser .CardUser_card .open-modal {
    width: 5rem;
    height: 4rem;
    margin: 1.5rem;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
}

.mainUser .CardUser .CardUser_card .open-modal .card_iconos_icono--modal {
    font-size: 4rem;
}

.mainUser .CardUser .CardUser_card .card_iconos_icono:hover,
.mainUser .CardUser .CardUser_card .card_iconos_icono--modal:hover {
    color: var(--color-marron-oscuro);
    cursor: pointer;
}

.mainUser .CardUser .CardUser_card .card_iconos_icono.selected {
    color: var(--color-marron-oscuro);
}

.mainUser .CardUser .CardUser_card .card_img {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mainUser .CardUser .CardUser_card .card_img_foto {
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--color-marron-oscuro);
    margin: 1rem;
}

.mainUser .CardUser .CardUser_card .card_informacion {
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: top;
}

.mainUser .CardUser .CardUser_card .card_informacion .card_iconos {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 25%;
    align-items: top;
}

.mainUser .CardUser .CardUser_card .card_informacion .card_datos {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mainUser .CardUser .CardUser_card .card_informacion .card_datos .card_datos_p {
    font-size: 3rem;
}

.footerUser{
    border-top: 2px solid var(--color-marron-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 
colors {
    #032F40;
    #04ADBF;
    #04BFBF;
    #var(--color-fondo);
    #59230F 
} */