*{transition: all 0.2s ease;}
/* iframe */
body{position: fixed;}
iframe{width: 100%;height: 100%;z-index: 1;}
/* Componetes generales */
.menu, .head, .body{position: absolute;}
.menu{
    width: 80px;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px 20px;
    box-shadow: var(--sombra);
    background: var(--fondo_1);
    z-index: 3;
}
.head{
    width: calc(100% - 80px);
    height: 60px;
    top: 0;
    right: 0;
    box-shadow: var(--sombra);
    background: var(--rosa_1);
    z-index: 2;
}
.body{
    width: calc(100% - 80px);
    height: calc(100% - 60px);
    bottom: 0;
    right: 0;
    z-index: 1;
}
/* Estilos del menu */
.menu_logo, .menu_text{float: left;margin-bottom: 20px;}
.menu_logo{width: 40px;height: 40px;}
.menu_text{width: 0;height: 40px;line-height: 40px;font-size: 24px;color: var(--texto_1);font-weight: 600;overflow: hidden;text-overflow: ellipsis;}
/* Estilo para las opciones */
.nota{float: left;width: 100%;line-height: normal;color: var(--texto_2);text-align: justify;font-size: 14px;margin-top: 10px;}
.icon_abso{position: absolute;top: 3px;right: 3px;}
.icon_abso.fa-circle{font-size: 7px;}
.icon_abso.fa-xmark {font-size: 10px;}
.icon_abso.fa-check {font-size: 8px;}
.opci_1:hover, .opci_1.acti{background: var(--rosa_1);color: var(--blanco_1);font-weight: 700;}
.opci_2:hover .opci_icon, .opci_2.acti .opci_icon{background: var(--rosa_1);color: var(--blanco_1);}
.opci_1{height: 40px;margin-top: 10px;border-radius: 5px;}
.opci_2{height: 30px;margin-top:  5px;}
.opci_3{height: 40px;margin-bottom: 10px;border-radius: 5px;background: var(--inputs);border: var(--border);}
.opci_1, .opci_2, .opci_3{
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto_1);
    cursor: pointer;
    transition: all 0s ease;
    overflow: hidden;
}
.opci_icon, .opci_text, .opci_line, .opci_text div, .opci_text i{overflow: hidden;text-overflow: ellipsis;transition: all 0s ease !important;text-wrap: nowrap;position: relative;}
.opci_icon, .opci_text{display: flex;align-items: center;}
.opci_icon{justify-content: center;}
.opci_text{justify-content: left;font-size: 14px;}
.opci_1 .opci_icon{width: 40px;font-size: 18px;}
.opci_1 .opci_text{width: calc(100% - 40px);}
.opci_2 .opci_line{width: 10px;height:  4px;margin: 13px 0;background: var(--fondo_opcion);}
.opci_2 .opci_icon{width: 20px;height: 20px;margin:  5px 0;border-radius: 100%;}
.opci_2 .opci_text{width: calc(100% - 40px);margin-left: 10px;}
.opci_3 .opci_icon{width: 40px;font-size: 20px;height: 100%;}
.opci_3 .opci_text{width: calc(100% - 40px);height: 100%;padding: 0 5px;border-left: var(--border);}
.opci_3 .opci_text div{text-align: left;width: 100%;line-height: normal;height: 18px;}
.opci_3 .opci_text i{font-size: 10px;}
.subo_1{
    float: left;
    width: calc(100% - 20px);
    height: 0px;
    margin-left: 18px;
    border-left: 4px solid var(--fondo_opcion);
    overflow: hidden;
}
/* Estilo para el perfil del usuario */
.user{
    float: right;
    width: calc(100% - 70px);
    height: 50px;
    margin: 5px 10px;
}
.user_name, .user_tipo{float: left;text-align: right;color: var(--blanco_1);width: 100%;font-weight: 600;}
.user_name{font-size: 16px;overflow: hidden;display: block;text-wrap: wrap;height: 25px;line-height: 25px;}
.user_tipo{font-size: 10px;margin-top: 2px;height: 20px;line-height: 20px;}
.user_tipo span{background: var(--blanco_1);padding: 2px 5px;border-radius: 3px;color: var(--negro_2);}
/* botones */
.menu_acti, .head_btns{color: var(--blanco_1);background: var(--rosa_1);border: 2px solid var(--blanco_1);}
.menu_acti{width: 28px;height: 28px;line-height: 14px;position: absolute;border-radius: 100%;font-size: 16px;right: -14px;top: 15px;transform: rotate(-0deg);}
.head_btns{width: 38px;height: 38px;margin: 10px 0 0 10px;float: left;border-radius: 5px;display: none;}
/* Estilos activos */
.menu.acti{width: 300px;}
.head.acti{width: calc(100% - 300px);}
.body.acti{width: calc(100% - 300px);}
.menu.acti > .menu_text{width: calc(100% - 60px);}
.menu.acti > .menu_acti{transform: rotate(-180deg);}
.menu.acti > .subo_1.acti{height: auto;}
/* Estilo para el modulo de tema */
.tema{
    left: 0;
    right: 0;
    bottom: 20px;
    max-width: 100px;
    width: calc(100% - 40px);
    height: 40px;
    border-radius: 20px;
    margin: auto;
    cursor: pointer;
    position: absolute;
    background: var(--tema_1);
    border: 1px solid rgba(0,0,0,0.2);
}
.tema_bola{
    left: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 100%;
    text-align: center;
    position: absolute;
    margin: 3px;
    background: var(--tema_2);
    color: var(--tema_3);
}
/* Estilo para los filtros */
.filtro{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 70px;
    right: 0;
    margin: auto;
    background: var(--rosa_1);
    color: var(--blanco_1);
    z-index: 99;
    box-shadow: var(--sombra);
}
/* Responsive */
@media screen and (max-width: 800px){
    .head_btns{display: block;}
    .body.acti, .body, .head.acti, .head{width: 100%;}
    .menu.acti{width: 100%;padding: 10px 20px;}
    .menu{width: 0;padding: 10px 0;overflow: hidden;}
    .menu > .menu_acti{right: 20px;}
}
@media screen and (max-width: 400px){
    .menu_text{font-size: 20px;}
    .opci_text{font-size: 12px;}
}