/** {
    box-sizing: border-box;
    margin: 0;
    padding: 0;*/
    /* font-family: Montserrat; */
    /* font-family: -apple-system; */
    /*font-family: system-ui;
}

:root {
    --background-primary: #fff;
    --background-secundary: #EBEEF3;
}

html {
    background-color: #333;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {*/
    /*z-index: 100;*/
    /*background-color: #2c5367;
    height: 60px;*/
    /*position: fixed;*/
    /*width: 100%;*/
    /*top: 0;*/
    /*left: 0;*/
    /*display: flex;
    justify-content: center;
}

.tablausuario {
    position: absolute;
    top: 0px;
    width: 15%;
    height: 60px;
    left: 0px;
}

.Usuariologo {
    top: 5px;
    height: 30px;
    display: block;
    margin: 0 auto;
    position: absolute;
    right: 43%;
}

.usuariolbl {
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    width: 100%;
    height: 14px;
    color: white;
    left: 0px;
    bottom: 4px;
    position: absolute;
}
.OtroTitle {
    padding: 0px;
    width: 100%;
    height: 100%;
}
.navl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

.navl-link {
    color: white;
    text-decoration: none;
}

.logo {
    height: 90%;*/
    /* width: 25%; */
    /*margin: 0 auto;
}

.tablasalir {
    position: absolute;
    top: 0px;
    width: 15%;
    height: 60px;
    right: 0px;
}*/

.Main {
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--background-secundary);
    gap: 0.9rem 0;
    display: flex;
    flex-direction: column;
}

.Main__Section__Card {
    background-color: var(--background-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.8rem;
}

.Main__Article__Card {
    width: 100%;
    height: 100%;
    background-color: var(--background-primary);
    padding: 0.35rem 1rem 0.5rem;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Carrousel {
    height: 100%;
    width: 100%;
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    overflow-x: auto;
}

.Carrousel__Card {
    /*    height: 100%; */
    /*background-color: red;*/
    width: 150px;
    display: grid;
    grid-template-rows: 140px 10px;
    justify-content: center;
    margin: auto;
    /*box-shadow: 0px 0px 1px 1px #000;*/
    /*transition: transform 1.5s ease-in-out;*/
}
/*
.Carrousel__Card:hover{
    transform:scale(1);
}*/

.Carrousel__Card__IMG {
    cursor: pointer;
    /*border-radius:0.8rem;*/
    transform: scale(.95);
    transition: transform 0.15s ease-in-out;
    height: 100%;
    margin: auto;
}

    .Carrousel__Card__IMG:hover {
        transform: scale(1);
    }

.Carrousel__Card__Text {
    margin: auto;
    color: var(--text-300);
    font-size: Large;
    font-weight: bold;
    text-align: center;
}

.Card__Header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 0.25rem 0;
    color: var(--text-300);
    border-bottom: 1px solid var(--color-secondary-1);
}

.Card__Header__Title {
    padding: 0 0 0 1rem;
}

.Footer {
    width: 100%;
    background-color: var(--background-secundary);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: end;
    gap: 0 1rem;
}
/*botones */
.Button_General {
    /*height: 45px;*/
    border: none;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    font-weight: 500;
    /*transition: all 500ms ease;*/
    /*display: inline-block;*/
    width: 10rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.Button__secundary {
    outline: solid 3px rgb(150 150 150 / 1);
    background-color: #F6F6F6;
    color: rgb(120 120 120 / 1);
}
/*.Button__secundary:hover {*/
/*background-color: #F3F3F4;*/
/*background-color: #ECECEC;*/
/*background-color: #CACACA;
    }*/
.Button__Primary {
    background: #2c5367;
    color: #f2f2f2;
}

    .Button__Primary:hover {
        background: rgba(0, 0, 0, 0);
        color: #2c5367;
        box-shadow: inset 0 0 0 3px #3a7999;
    }