.cabecera
    width: 210px
    height: 100vh
    position: fixed
    top: 0
    left: 0
    display: flex
    flex-direction: column
    justify-content: flex-start
    z-index: 100
    background-color: $blanco
    @extend %animacion-suave
    border-right: solid 1px rgba(56, 66, 82, 0.54)
    @media (max-width: 840px)
        width: 50px
    .logo-container
        display: block
        padding: 10px 0
        background-color: $negro
        .logo-desktop
            display: inline-block
        .logo-mobile
            display: none
        @media (max-width: 840px)
            .logo-desktop
                display: none
            .logo-mobile
                display: inline-block
    h1
        color: #374151
        font-size: 16px
        font-weight: 700
        margin: 10px auto
        padding: 15px 0
        @media (max-width: 840px)
            display: none
    nav
        @extend %animacion-suave
        ul
            margin: 0
            padding: 0
            li
                position: relative
                // border-left: solid 4px $blanco
                // border-right: solid 4px $blanco
                @extend %animacion-suave
                a
                    display: block
                    color: #374151
                    font-weight: 600
                    font-size: 16px
                    padding: 15px 15px
                    cursor: pointer
                    border-bottom: 1px solid rgba(56, 66, 82, 0.34)
                    i
                        margin-right: 8px
                    @media (max-width: 840px)
                        span
                            display: none
                .submenu
                    position: absolute
                    top: 0
                    left: 110%
                    min-width: 200px
                    opacity: 0
                    visibility: hidden
                    background-color: $blanco
                    border: solid 1px rgba(56, 66, 82, 0.54)
                    border-left: solid 4px $rojo
                    z-index: 120
                    @extend %animacion-suave
                    li
                        a
                            font-weight: 500
                            font-size: 15px
                            padding: 8px 15px
                    &:after
                        content: ""
                        position: absolute
                        top: 22px
                        left: -9px
                        border-right: 5px solid red
                        border-top: 5px solid transparent
                        border-bottom: 5px solid transparent
                &:hover
                    background-color: #f4f5f6
                    // border-left: solid 4px #f4f5f6
                    // border-right: solid 4px #f4f5f6
                    .submenu
                        display: block
                        opacity: 1
                        visibility: visible
                        left: 100%
                &.is-active
                    border-left: solid 4px $rojo
                    border-right: solid 4px $rojo
                    background-color: #f4f5f6
                &:first-child
                    a
                        border-top: 1px solid rgba(56, 66, 82, 0.34)
.topbar
    display: flex
    justify-content: flex-end
    align-items: center
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 69px
    margin: 0
    padding: 15px 45px
    z-index: 99
    background-color: $blanco
    border-bottom: 1px solid rgba(56, 66, 82, 0.34)
    @media (max-width: 840px)
        height: 53px
        padding: 15px
    ul
        margin: 0
        padding: 0
        display: flex
        align-items: center
        li
            margin: 0 10px
            color: #374151
            font-weight: 500
            i
                font-size: 22px
                color: #374151