.calendario{

    width:100%;
    margin:0px auto;
    background:white;
    border:1px solid #ddd;

}

.cabecera{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;

}

.mes{

    font-size:42px;
    font-weight:bold;
    color:var(--colorTercero);

}

button{

    width:45px;
    height:45px;

    border:none;

    background: var(--colorSecundario);

    color:white;

    font-size:22px;

    cursor:pointer;

    margin-right:5px;

}

button:hover{

    opacity: 0.8;

}

.diasSemana{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    background:white;

    border-top:1px solid #ddd;

    border-bottom:1px solid #ddd;

}

.diasSemana div{

    text-align:center;

    padding:12px;

    font-weight:bold;

    color:var(--colorTercero);

}

.dias{

    display:grid;

    grid-template-columns:repeat(7,1fr);

}

.dia{

    height:170px;

    border-right:1px solid #e6e6e6;

    border-bottom:1px solid #e6e6e6;

    padding:8px;

    position:relative;
    text-align: left !important;

}


.numero{

    position:absolute;

    right:8px;

    top:5px;

    color:#7b0000;

    font-size:22px;

}

.otroMes .numero{

    color:#d5b8b8;

}

.evento{

    margin-top:35px;

    background:var(--colorTercero);

    color:white;

    padding:5px;

    border-radius:5px;

    margin-bottom:5px;

    font-size:13px;

}

.evento a{

    color:white;

    text-decoration:none;

}

.evento:hover{

    opacity: 0.8;

}