@font-face {
    font-family: 'Poppins-md';
    src: url('fonts/Poppins/Poppins-Medium.ttf');
}
:root {
    --text-color: #575758;
    --first-background-color: #fff;
    --second-background-color: #f5f5f5;
    --border-color: #eee;
    --first-color: #5193fc;
    --second-color: #4189e633;
    --color-logo: #1872fa;
}

*{
    font-family: 'Poppins-md', 'FontAwesome';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-color);
    transition: background .1s;
}
*::selection{
    background: #00000015;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px; 
}
*::-webkit-scrollbar-track {
    background: var(--second-background-color); 
}
*::-webkit-scrollbar-thumb {
    background: #dfdfdf00;
    border-radius: 10px;
    border: 1px solid var(--second-background-color); 
}
*:hover::-webkit-scrollbar-thumb{
    background: #dfdfdf;
}
body{
    background: var(--second-background-color);
    overflow: hidden;
}
a{
    text-decoration: none;
}
ul,ol{
    list-style: none;
}
#notificacion{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
#notificacion span{
    color: #fff;
    text-align: center;
    max-width: 500px;
    min-width: 150px;
    background: #000000bb;
    border-radius: 5px; 
    box-shadow: 0 5px 10px #00000020;
    transition: .2s;
    padding: 10px;
    font-size: 14px;
    margin: 3px 0;
    position: relative;
    opacity: 0;
    animation: desvanecer 2.5s 1;
}
@keyframes desvanecer{
    0%{
        top: 20px;
    }
    5%{
        top: 0;
        opacity: 1;

    }
    95%{
        top: 0;
        opacity: 1;
    }
    100%{
        opacity: 0;
        top: -20px;
    }
}

.navMovil { 
    display: none;
}

.contenedorSpanAviso{
    position: relative;
}
.spanAviso{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000bb;
    color: #fff;
    font-size: 10px;
    padding: 2px 3px;
    border-radius: 3px;
    display: none;
}
.contenedorSpanAviso:hover .spanAviso{
    display: block;
}

header{
    padding: 0 30px;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--first-background-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.logo{
    display: flex;
    align-items: center;
}
.logo svg{
    height: 30px;
}
.parte1{
    fill: var(--color-logo);
}
.parte2{
    fill: var(--first-color);
}
.logo h1{
    font-size: 20px;
    margin-left: 5px;
    color: var(--text-color);
    font-weight: 300;
}
.logo h1 span{
    color: var(--first-color);
}

.opcionesGenerales{
    display: flex;
    align-items: center;
}

.agregar, .configuracion{
    position: relative;
    margin: 0 5px;
    cursor: pointer;
}
#agregar{
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px 10px;
    background: var(--first-color);
    transition: .2s;
}
#agregar span{
    color:#fff;
    margin: 0 5px;
    font-size: 16px;
    pointer-events: none;
}
#agregar:hover{
    transform: scale(1.05) translateX(-5px);
}
#agregarOpciones, #configuracionOpciones{
    width: 170px;
    box-shadow: 0 5px 10px #00000020;
    position: absolute;
    top: 120%;
    right: 0;
    background: var(--first-background-color);
    padding: 5px 0;
    border-radius: 5px;
    display: none;
    border: 1px solid var(--border-color);
}
#agregarOpciones button, #configuracionOpciones button{
    background: none;
    outline: none;
    border: none;
    width: 100%;
    text-align: start;  
    padding: 5px 10px;
    font-size: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
#agregarOpciones button span{
    padding: 1px 5px;
    font-size: 10px;
    border-radius: 3px;
    opacity: 0;
    background: var(--first-background-color);
}
#agregarOpciones button:hover, #configuracionOpciones button:hover{
    background: var(--second-background-color);
}
#agregarOpciones button:hover span{
    opacity: 1;
}
#configuracion{
    cursor: pointer;
    position: relative;
    border-radius: 50%;
}
#configuracion i{
    font-size: 18px;
    -webkit-text-stroke: 1.5px var(--text-color);
    color: transparent;
    pointer-events: none;
    height: 35px;   
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--second-background-color);
    border-radius: 50%;
}
#configuracion i:hover{
    background: #e0e0e0;
}

main{
    display: flex;
    position: relative;
    overflow-x: hidden;
}

aside{
    min-width: 300px;
    max-width: 300px;
    height: calc(100vh - 70px);
    padding: 30px;
    background: var(--first-background-color);
    position: sticky;
    top: 0;
}
aside:nth-child(1){
    border-right: 1px solid var(--border-color);
}
aside:nth-child(3){
    border-left: 1px solid var(--border-color);
}

#calendario{
    transition: transform .3s;
}
#calendarioIcon {
    display: none;
}
.calendarioOculto{
    transform: translateX(100%); 
    position: absolute; 
    right:0; 
}
.calendarioVisible{
    transform: translateX(0);
}
.calendario{
    background: var(--first-background-color);
    height: auto;
    padding: 0 10px 15px;
}
.calendarioHeader{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #eee;
}
.calendarioHeader button{
    padding: 3px 10px;
    cursor: pointer;
    border-radius: 5px;
    background: none;
    border: none;
    outline: none;
}
.calendarioHeader button i{
    pointer-events: none;
}
.calendarioHeader button:hover{
    background: var(--second-background-color);
}
.calendarioHeader div{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    padding: 6px 0 3px;
    position: relative;
}
.calendarioHeader h4{
    min-width: 95px;
    font-weight: 300;
    line-height: 14px;
    text-align: center;
    text-transform: capitalize;
    pointer-events: none;
}
.calendarioHeader div span{
    font-size: 12px;
    color: #7e7e7e;
    pointer-events: none;
}
.calendarioHeader #volverHoy{
    position: absolute;
    top: -30px;
    padding: 3px 5px;
    background: var(--first-background-color);
    color: var(--text-color);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-size: 15px;
    cursor: pointer;
    transform: translateY(20px);
    transition: .2s;
    opacity: 0;
}
.calendarioHeader div:hover #volverHoy{
    opacity: 1;
    transform: translateY(0);
}
#volverHoy:hover{
    background: var(--second-background-color);
}

.calendarioDiasSemana{
    padding: 10px 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.calendarioDiasSemana span{
    font-size: 14px;
    text-align: center;
    font-weight: 300;
    color: #bbb;
}
.calendarioDiasSemana .diaActual{
    color: var(--text-color);
}

.calendarioDiasNumero{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.calendarioDiasNumero .divDia{
    text-align: center;
    border-radius: 3px;
    font-size: 15px;
    cursor: pointer;
    animation: spanCalendario .8s 1;
    position: relative;
}
@keyframes spanCalendario {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.calendarioDiasNumero .divDia.diaActual{
    background: var(--second-color);
    color: var(--first-color);
}
.calendarioDiasNumero .divDia .contenedorEventosDias{
    position: absolute;
    bottom: -1px;
    height: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.calendarioDiasNumero .divDia .contenedorEventosDias span{
    border-radius: 50%;
    height: 5px;
    width: 10px;
    margin: 0 1px;
    overflow: hidden;
    pointer-events: none;
    transform: scaleX(.5) translateX(50%);
    transition: transform .2s;
    position: relative;
    right: 2px;
    pointer-events: none;
}
.calendarioDiasNumero .divDia:hover .contenedorEventosDias span h4{
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    line-height: 16px;
    padding-top: 2px;
    margin-bottom: 3px;
    pointer-events: none;
}
.calendarioDiasNumero div.diaActual:hover{
    background: var(--second-color)
}
.calendarioDiasNumero .divDia:hover{
    background: var(--second-background-color);
}
.calendarioDiasNumero .divDia:hover .contenedorEventosDias span{
    border-radius: 5px;
    color: #f5f5f5;
    width: 250px;
    height: auto;
    overflow: visible;
    position: absolute;
    top: -18px;
    right: 0;
    z-index: 1000;
    padding: 5px 10px;
    text-align: start;
    font-size: 12px;
    box-shadow: 0 5px 10px #00000020;
    transform: scaleX(1) translateX(0);
}

nav{
    margin-bottom: 30px;
}
nav ul li a{
    padding: 5px 10px;
    text-transform: uppercase;
    font-size: 15px;
    margin: 3px 0;
    border-radius: 5px;
    display: block;
}
nav ul li a i{
    margin-right: 10px;
    font-size: 17px;
    width: 20px;
}
nav ul li a:hover{
    background: var(--second-background-color);
}
.seccionActual{
    border-radius: 5px;
    background: var(--second-color);
    color: var(--first-color);
}
.seccionActual i{
    color: var(--first-color);
}
.seccionActual:hover{
    background: var(--second-color);
}

.contenedorSeccionLateral{
    margin-bottom: 15px;
    position: relative;
}
.contenedorSeccionLateral h3{
    font-weight: 300;
    font-size: 15px;
    margin-bottom: 10px; 
    background: var(--first-background-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contenedorSeccionLateral h3 #nuevaCategoria{
    font-size: 10px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 5px;
    display: none;
    cursor: pointer;
}

#formNuevaCategoria{
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    background: var(--first-background-color);
    border-radius: 5px;
    transition: .3s;  
    border: none;
    z-index: 1000;
}
#nombreCategoria{
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    outline: none;
    padding: 5px 10px;
    background: var(--first-background-color);
    color: var(--text-color);
}
#cantidadCaracteres{
    position: absolute;
    right: 15px;
    top: 20px;
    font-size: 9px;
    opacity: 0;
}
.coloresCategoria{
    margin-top: 10px;
    display: flex;
    align-items: center;
}
#coloresPorDefecto{
    display: flex;
    align-items: center;
}
#coloresPorDefecto button{
    border: none;
    outline: none;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    margin: 0 3px;
    cursor: pointer;
}
.contenedorColorPersonalizado{
    position: relative;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: 0 3px;
    border: 1px solid #aaa;
}
.contenedorColorPersonalizado i{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;    
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--second-background-color);
}
#colorPersonalizado{
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
#coloresPorDefecto button:active{
    transform: scale(.95);
    box-shadow: 0 5px 10px #00000020;
}
.contenedorColorElegido{
    position: relative;
    width: 25px;
    height: 25px;
    margin-left: 15px;
}
.contenedorColorElegido span{
    width: 74px;
    text-align: center;
}
#colorElegido{
    pointer-events: none;
    width: 100%;
    height: 100%;
    outline: none;
    background: transparent;
    border: none;
}

.divBtnCategorias{
    display: flex;
    justify-content: end;
}
.divBtnCategorias button{
    padding: 3px 5px;
    background: transparent;
    border: none;
    border-radius: 5px;
    outline: none;
    font-size: 12px;
    cursor: pointer;
    margin: 15px 3px 0;
}
#crearCategoria{
    background: var(--second-background-color);
}
.divBtnCategorias button:hover{
    background: var(--second-background-color);
}
.contenedorSeccionLateral h3 #nuevaCategoria:hover{
    background: var(--second-background-color);
}
#formNuevaCategoria.formNuevaCategoriaSeleccionado{
    width: 100%; 
    padding: 10px;
    box-shadow: 0 5px 10px #00000020;
    border: 1px solid var(--border-color);
    height: 128px;
}

.contenedorSeccionLateral:hover h3 #nuevaCategoria{
    display: block;
}
#contenedorCategoriasLaterales{
    overflow: auto;
    max-height: 150px;
}
#contenedorCategoriasLaterales span{
    font-size: 12px;
    opacity: .9;
    padding: 0 10px 10px;
    display: block;
    text-align: center;
}
#contenedorCategoriasLaterales button{
    border-radius: 5px;
    border: 2px dashed var(--border-color);
    background: transparent;
    padding: 5px 0;
    font-size: 12px;
    cursor: pointer;
    width: 90%;
    margin: 0 5% 15px;
}
#contenedorCategoriasLaterales button:hover{
    box-shadow: 0 5px 10px #00000015;
}

.categoriaLateral, .feriados{
    width: calc(100% - 20px);
    margin: 3px 0;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    position: relative;
}
.categoriaLateral h4, .feriados h4{
    font-weight: 300;
    font-size: 14px;
}
.categoriaLateral i, .feriados i{
    margin-right: 10px;
    font-size: 12px;
}
.eliminarCategoria{
    position: absolute;
    right: 0;
    opacity: 0;
    cursor: pointer;
}
.categoriaLateral:hover{
    background: var(--second-background-color);
}
.categoriaLateral:hover .eliminarCategoria{
    opacity: 1;
}

#bodyApp{
    width: 100%;
    margin: 30px;
    position: relative;
    overflow: hidden auto;
    display: flex;
    scroll-snap-type: x mandatory;
}

.seccionApp{
    scroll-snap-align: center;
    flex: none;
    width: 100%;
}

#contenedorNotas{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    flex: none;
    width: 100%;
}
.nota{
    background: var(--first-background-color);
    border-radius: 5px;
    width: 250px;
    max-height: 343px;
    min-height: 55px;
    padding: 15px;
    position: relative;
    margin: 0 10px 20px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.nota h2{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    max-width: calc(100% - 25px);
    font-weight: 300;
    margin-bottom: 3px;
    display: block;
    pointer-events: none;
}
.nota p{
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 14;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: calc(100% - 25px);
    pointer-events: none;
    word-wrap: break-word;
}
.nota a{
    color: #1872fa;
    pointer-events: all;
}
.notaFantasma{
    border: 2px dashed #ddd;
    background: transparent;
}
.notaFantasma h2, .notaFantasma p{
    opacity: .5;
}
.notaSeleccionada{
    transform: scale(.98);
}
.notaClon{
    background: var(--first-background-color);
    border: 1px solid var(--border-color);
    transform: scale(1.065);
    opacity: 1 !important;
    box-shadow: 0 5px 10px #00000020;
}

.eliminar{
    position: absolute;
    top: 15px;
    right: 10px;
    display: none;
    justify-content: center;
    align-items: center;
    height: 25px;
    width: 25px;
    border-radius: 50%;  
    pointer-events: all;
}
.eliminar i{
    font-size: 11px;
    color: var(--text-color);    
    pointer-events: none
}
.eliminar span{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000bb;
    color: #fff;
    font-size: 10px;
    padding: 2px 3px;
    border-radius: 3px;
    display: none;
}
.eliminar:hover{
    background: var(--second-background-color);
}
.eliminar:hover span{
    display: block;
}
.nota:hover, .evento:hover{
    box-shadow: 0 5px 10px #00000020;
}
.nota:hover .eliminar, .evento:hover .eliminar{
    display: flex;
}
.notaFantasma:hover .eliminar{
    display: none;
}
.notaFantasma:hover{
    box-shadow: none;
}

.fecha{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 2px solid var(--border-color);
    font-weight: 300;
    margin: 0 10px 10px;
}
.fecha i{
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 14px;
}

#contenedorEventos{
    display: flex;
    flex-wrap: wrap;
}
.evento{
    width: auto;
    min-width: 270px;
    max-width: 350px;
    max-height: 140px;
    background: var(--first-background-color);
    padding: 15px;
    border-radius: 5px;
    position: relative;
    border: 1px solid var(--border-color);
    cursor: pointer;
    margin: 10px;
}
.evento h2{
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 300;
    max-width: calc(100% - 25px);
    margin-bottom: 3px;
    pointer-events: none;
}
.evento p{
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
    min-height: 20px;
    word-wrap: break-word;
    pointer-events: none;
}
.evento p a{
    color: #1872fa;
    pointer-events: all;
}
.evento .indicadorTipoEvento{
    color: #fff;
    padding: 1px 10px;
    border-radius: 10px;
    font-weight: 300;
    font-size: 13px;
    pointer-events: none;
}
.evento .horaEvento{
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    color: #aaa;
    pointer-events: none;
}
.horaEvento i{
    font-size: 12px;
    color: #aaa;
    margin-left: 3px;
}

#nadaCreado{
    width: 100%;
    margin: 50px 0;
}
#nadaCreado h4{
    text-align: center;
    color: var(--text-color);
    font-size: 25px;
    font-weight: 300;
}
#nadaCreado p{
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
    color: var(--text-color);
}
.spanCrear{
    background: var(--first-color);
    padding: 3px 10px;
    border-radius: 15px;
    color: #fff;
}
.spanCrear i{
    font-size: 13px;
    color: #fff;
}

.seccionCrearNuevo, .seccionDetalle, .temas{
    position: fixed;
    background: #00000040;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 100;
}
.seccionCrearNuevo:target, .seccionDetalle:target, .temas:target{
    display: flex;
}
.seccionCrearNuevo > a, .seccionDetalle > a, .temas > a{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    cursor: auto;
}
.seccionCrearNuevo > div, .seccionDetalle > div, .temas > div{
    background: var(--first-background-color);
    border-radius: 5px;
    width: 400px;
    padding: 20px;
    box-shadow: 0 5px 10px #00000020;
    animation: abrir .3s 1;
    position: relative;
}
@keyframes abrir {
    0%{
        transform: scale(.8);
    }
    100%{
        transform: scale(1);
    }
}
.seccionCrearNuevo h1, .temas h1{
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.seccionCrearNuevo h1 a, .temas h1 a{
    font-size: 14px;
    position: relative;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.seccionCrearNuevo form input.titulo{
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    border: 1px solid var(--border-color);
    border-bottom: none;
    outline: none;
    color: var(--text-color);
    background: var(--first-background-color);
}
.seccionCrearNuevo form textarea{
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 0 0 5px 5px;
    width: 100%;
    border: 1px solid var(--border-color);
    border-top: none;
    outline: none;
    color: #575758;
    min-width: 100%;
    max-width: 100%;
    min-height: 120px;
    max-height: 200px;
    background: var(--first-background-color);
    color: var(--text-color);
}
.seccionCrearNuevo h1 a:hover, .temas h1 a:hover{
    background: var(--second-background-color);
}
.btnForm{
    display: flex;
    justify-content: end;
}
.btnForm button{
    outline: none;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    margin: 15px 3px 0;
}
.btnForm button:focus{
    box-shadow: 0 0 0 2px #00000020;
}
.btnForm button:nth-child(1){
    color: var(--text-color);
    background: var(--second-background-color);
}
.btnForm button:nth-child(2){
    background: var(--first-color);
    color: #fff;
}

.formCrear h3{
    font-weight: 300;
    font-size: 15px;
    margin: 5px;
}
.contenedorOpcionesASeleccionar{
    margin: 5px 0;
    position: relative;
}
.inputOpcionSeleccionada{
    background: var(--first-background-color);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    width: 150px;
    border-radius: 5px;
    font-size: 14px;
}
.inputOpcionSeleccionada:hover{
    background: var(--second-background-color); 
}
.inputOpcionSeleccionada:hover + .opcionesASeleccionar, .opcionesASeleccionar:hover{
    height: auto;
}
.opcionesASeleccionar{
    width: 150px;
    height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    box-shadow: 0 5px 10px #00000020;
    border-radius: 5px;
    max-height: 150px;
    overflow-y: auto;
    border: none;
}
.opcionesASeleccionar button{
    width: 100%;
    font-size: 14px;
    padding: 4px 10px;
    outline: none;
    border: none;
    background: var(--first-background-color);
    cursor: pointer;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
}
.opcionesASeleccionar button i{
    font-size: 12px;
    margin-right: 3px;
}
.opcionesASeleccionar button:hover{
    background: var(--second-background-color);
}
.fechaHora{
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 10px;
}
.fechaHora input{
    border-radius: 5px;
    border: 1px solid var(--border-color);
    outline: none;
    padding: 5px;
    font-size: 12px;
    background: var(--first-background-color);
}

.recordatorio{
    position: relative;
    display: inline-block;
    border-radius: 50%;
}
.recordatorio i{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    cursor: pointer;
    font-size: 15px;
    /* transition: .3; */
}
.recordatorio span{
    top: -25px;
}
.recordatorio:hover{
    background: var(--second-background-color);
}
@keyframes recordatorio {
    0%{
        transform: rotateZ(-10deg);
    }
    50%{
        transform: rotateZ(10deg);
    }
    100%{
        transform: rotateZ(0deg);
    }
}

.seccionDetalle .cerrarDetalle{
    display: block;
    text-align: end;
    font-size: 14px;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 10px;
}
.seccionDetalle > div{
    width: 500px;
}
#tituloNotaEditar, #tituloEventoEditar{
    width: 100%;
    outline: none;
    border-radius: 5px 5px 0 0 ;
    border: none;
    padding: 5px 0;
    font-size: 18px;
    background: var(--first-background-color);
}   
#descripcionNotaEditar, #descripcionEventoEditar{
    width: 100%;
    max-height: 500px;
    min-height: 60px;
    outline: none;
    border-radius: 0 0 5px 5px ;
    border: none;
    padding: 5px 0;
    font-size: 14px;
    overflow-y: auto;   
}
#descripcionNotaEditar a, #descripcionEventoEditar a{
    color: #1872fa;
    cursor: pointer;
}
.seccionDetalle .cerrarDetalle:hover{
    background: var(--second-background-color);
}

#detalleEvento h3{
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 5px;
}
#categoriaActual{
    font-size: 12px;
    border-radius: 15px;
    position: absolute;
    top: 29px;
    left: 160px;
    padding: 1px 10px 2px;
    color: #fff;
}
.contenedorFechasEditar{
    margin-top: 20px;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contenedorFechasEditar input{
    border-radius: 5px;
    border: 1px solid var(--border-color);
    outline: none;
    padding: 5px;
    font-size: 12px;
    background: var(--first-background-color);
}

#contenedorBtnTemas{
    margin-top: 20px;
    display: flex;
}
#contenedorBtnTemas button{
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    outline: none;
    cursor: pointer;
}
#contenedorBtnTemas div{
    border-radius: 50%;
    height: 45px;
    width: 45px;
    margin: 0 3px;
}
#contenedorBtnTemas div span{
    transform: translate(-50%, 18px);
}
#contenedorBtnTemas button:active{
    transform: scale(.95);
}


@media all and (max-width: 1024px) and (min-width: 768px){

    #bodyApp {
        margin-right: 80px;
    }

    #calendario.calendarioVisible{
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(0); 
    }

    #calendarioIcon {
        position:absolute; 
        left: -70px; 
        top: 20px;
        background: var(--first-background-color);
        box-shadow: 0 5px 10px #00000010;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; 
        cursor: pointer;
    }

    #calendarioIcon:hover {
        box-shadow: 0 10px 20px #00000020;
    }
}

@media all and (max-width: 768px) {
    
    #notificacion{
        bottom: 80px;
        max-width: 90%;
    }
    
    #notificacion span{
        width: 100%;
    }
    
    main{
        height: calc(100vh - 130px);
        overflow: hidden;
        scroll-padding-top: 20px;
    }

    .nota{
        width: 200px;
    }

    .navMovil {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        height: 60px;
        border-top: 1px solid var(--border-color);
        margin: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--first-background-color);
    }

    .navMovil ul {
        display: flex;
    }

    .navMovil ul li{
        margin: 0 5px;
    }

    aside:nth-child(1){
        display: none;
    }

    .calendarioOculto {
        transform: translateX(0);
        transform: translateY(100%);
        min-width: 100%;
    }

    #calendario.calendarioVisible{
        transform: translateY(35%);
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    #calendarioIcon {
        background: var(--first-background-color);
        box-shadow: 0 5px 10px #00000010;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; 
        cursor: pointer;
        transform: translate(0, -240px);
        transition: .3s;
        position: absolute;
        border: 1px solid var(--border-color);
    }
    
    .calendarioVisible #calendarioIcon {
        transform: translate(0, -55px);
    }

    .seccionCrearNuevo > div, .seccionDetalle > div, .temas > div{
        width: 90%;
    }
}