:root {
    --altura_cabecera: 5rem;
    --anchura_menuLateral: 20rem;
    --altura_OpcionMenu: 3.5rem;
    --altura_SubOpcionMenu: 2rem;
    --altura_OpcionMenuInfoWeb: var(--altura_OpcionMenu);
    --ancho_MenuUsuarioCabecera: 22.5rem;
    --padding_MenuUsuarioCabecera: 5px;
}

.div_Master {
    display: grid;
    grid-template:
        "Cabecera" var(--altura_cabecera)
        "CuerpoPagina" calc(100vh - var(--altura_cabecera)) /
        100%;
    width: 100%;
    height: 100vh;
}

/*    .div_Master.MenuActivo {
        grid-template:
            "Cabecera       Cabecera" var(--altura_cabecera)
            "MenuLateral    CuerpoPagina" calc(100vh - var(--altura_cabecera)) /
            var(--anchura_menuLateral) calc(100% - var(--anchura_menuLateral));
    }*/

/*#region Cabecera*/

.div_Cabecera {
    grid-area: Cabecera;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template:
        "iconoMenu Titulo  LogoPrincipal iconoUsuario" 100% /
        60px auto min-content 60px;
    background-color: var(--color_fondo_1);
    /*-webkit-box-shadow: 0px 3px 36px 5px #d4d4d4;
    -moz-box-shadow: 0px 3px 36px 5px #d4d4d4;
    box-shadow: 0px 3px 36px 5px #d4d4d4;*/
    border-bottom: 1px solid var(--color-naranja);
}

    .div_Cabecera .div_LogoPrincipal {
        grid-area: LogoPrincipal;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .div_Cabecera .div_LogoPrincipal .LogoPrincipal {
            height: 100%;
        }

    .div_Cabecera .div_iconoMenu {
        grid-area: iconoMenu;
    }

    .div_Cabecera .div_TituloHeader {
        grid-area: Titulo;
        display: flex;
        align-items: center;
    }
        .div_Cabecera .div_TituloHeader > .TituloHeader {
            font-size: 25px;
            color: var(--color-naranja);
        }

    .div_Cabecera .div_iconoUsuario {
        grid-area: iconoUsuario;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .div_Cabecera .div_iconoUsuario .iconoUsuario {
            padding: 15px;
        }

            .div_Cabecera .div_iconoUsuario .iconoUsuario:hover {
                color: var(--color-naranja);
                filter: drop-shadow(1px 1px 5px white);
                transform: scale(1.1);
                cursor: pointer;
            }

    /*Menu usuario de cabecera*/
    .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera {
        overflow-y: auto;
        position: absolute;
        z-index: 100;
        right: 1px;
        top: var(--altura_cabecera);
        width: var(--ancho_MenuUsuarioCabecera);
        list-style: none;
        max-height: 80vh;
        max-height: calc(100vh - 7rem);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        padding: var(--padding_MenuUsuarioCabecera);
        background: var(--color_fondo_2);
        color: var(--cp-color-4);
        border-radius: var(--border-radius_1);
        box-shadow: 0 2rem 4rem gray;
        border: 1px solid gray;
        transform: scale(.9);
        transform-origin: top right;
        transition: all .2s ease-in-out,visibility 0s linear .2s;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2.5rem;
        cursor: default;
    }

        .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_UserMenuCabecera {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

            .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_UserMenuCabecera > .img_UsuarioMenuCabecera {
                border-radius: 10%;
                border: 1px solid gray;
                height: 150px;
                max-width: 100%;
            }


            .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_UserMenuCabecera > .labelMenuUser {
                width: calc(var(--ancho_MenuUsuarioCabecera) - (var(--padding_MenuUsuarioCabecera) * 3));
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                padding: 0px;
                margin: 0px;
            }

        .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_OpcionesMenuCabecera {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            cursor: default;
        }

            .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_OpcionesMenuCabecera > .opcion_menu {
                width: 100%;
                height: 35px;
                display: flex;
                flex-direction: row;
                align-content: center;
                align-items: center;
                justify-content: flex-start;
                gap: 12px;
                border-radius: var(--border-radius_2);
                border: 1px solid gray;
                padding-left: 22px;
                color: var(--color_gris_2);
                cursor: pointer;
                background-color: white;
            }

                .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_OpcionesMenuCabecera > .opcion_menu > .icono_opc_menu {
                    color: inherit;
                    cursor: inherit;
                    font-size: var(--fuenteSize_SubMenu);
                }

                .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera > .div_OpcionesMenuCabecera > .opcion_menu > .lbl_opc_menu {
                    color: black;
                    cursor: inherit;
                    font-size: var(--fuenteSize_SubMenu);
                }

        .div_Cabecera > .div_iconoUsuario > .menuUsuarioCabecera.MenuActivo {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            transition-delay: 0s,0s;
            background-color: var(--color_fondo_1);
        }

#opcMenuCabecera_Idioma {
    padding: 0;
}

#Select_Idioma {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    padding-left: 22px;
    padding-right: 22px;
}


/*#endregion Cabecera*/

/*#region Cuerpo Pagina */
.div_CuerpoPagina {
    grid-area: CuerpoPagina;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template:
        "tituloPagina" 30px
        "ContenidoPagina" auto /
        100%;
}

.div_titulo_Pagina {
    grid-area: tituloPagina;
    display: flex;
    justify-content: start;
    align-items: center;
    width: auto;
    height: 100%;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    padding-left: 15px;
    padding-right: 15px;
}

.h1_tituloPagina {
    font-size: var(--fuenteSize_Titulo);
}

.div_Contenido_Pagina {
    grid-area: ContenidoPagina;
    width: 100%;
    height: 100%;
}

/*Clase para poner filtro debajo de la cabecera*/
.div_Filtros_Botonera {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0.4rem;
}

    .div_Filtros_Botonera > .div_filtro {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        max-width: 100%;
    }

    .div_Filtros_Botonera > .div_Botonera {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        max-width: 100%;
        gap: 1rem;
    }

/*#endregion Cuerpo Pagina*/



/*Movil*/
@media (max-width: 425px) {
    :root {
        --anchura_menuLateral: 100%;
    }
    html{
        font-size:6px;
    }

    /*Cambio en orden de el grid para que el icono del menu a la izquierda (creo que es mas estandar)*/
    .div_Cabecera {
        grid-area: Cabecera;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template:
            "iconoMenu LogoPrincipal  espacio LogoSegundario iconoUsuario" 100% /
            minmax(min-content,5rem) minmax(min-content,var(--anchura_menuLateral)) auto minmax(min-content,var(--anchura_menuLateral)) minmax(min-content,5rem);
        background-color: var(--color_fondo_1);
    }

    /*Oculta la pagina cuando abro el menu lateral para que ocupe el 100%  el menu del movil*/
    .div_Master.MenuActivo > .div_CuerpoPagina {
        display: none;
    }
}

/*Tablet*/
@media (min-width: 425px) and (max-width: 768px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 12px;
    }
}