* {margin: 0; padding: 0;}

/* estilos para el menu en columna */
.menublog {
    padding: 0 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

.menublog__list {
    list-style: none;
}

.menublog__link {
    color: gray;
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;

    display: flex;
    align-items: center;
    gap: 10px;

    position: relative;
    border-left: 8px solid #23517B;
    background-color: #f5f5f5;
    transition: 0.4s;
}

.menublog__link:hover {color: red; background-color: rgba(0,0,0,0.10); border-left: 8px solid #2196f3;}

.menublog__list:has( :checked ){
    --rows: 1fr;
    --rotate: rotate(180deg);

    --bg: lightgray;
}

.menublog__check {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin-left: -10px;
    font-weight: 600;
}

.menublog__arrow {
    margin-left: auto;
    transform: var(--rotate, 0);
    transition: 0.2s transform;
}

.menublog__cont {
    display: grid;
    grid-template-rows: var(--rows, 0fr);
    transition: .3s grid-template-rows;
}

.menublog__sub {
    overflow: hidden;
}

.menublog__li {
    width: 90%;
    list-style: none;
    margin-left: auto;  
}
.menublog__li .ele-menu {
    padding: 5px 0;
    box-sizing: border-box;
    display: block;
    color: #555;
    text-decoration: none; 
    transition: 0.3s;
    margin: 5px 0;
}

/* ele-menu {display: block;} */

.active { border-left: 5px solid red; background-color: rgba(0,0,0,0.05); }