.cont_leyenda_colores{
    margin-bottom: 0;
}

.list_leyenda_colores{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.list_leyenda_colores span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
}
.list_leyenda_colores span.circle{
    height: 15px;
    width: 15px;
    display: inline-block;
    border-radius: 50%;
    margin-top: -1.5px;
}

.list_leyenda_colores span.circle.marked-nacional {
    background: #bf0d0d;
}
.list_leyenda_colores span.circle.marked-islas-canarias {
    background: #d4af37;;
}
.list_leyenda_colores span.circle.marked-insular {
    background: #7c3f98;
}
.list_leyenda_colores span.circle.marked-local {
    background: #AEDFF7;
}

.list_leyenda_colores span.circle.marked-inicio {
    background: #6e8b7b;
}
.list_leyenda_colores span.circle.marked-fin {
    background: #b08c72;
}
.list_leyenda_colores span.circle.marked-vacaciones {
    background: #7083a1;
}

/* Estilos generales para el calendario */
.calendar {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Estilos para las filas del calendario */
.calendar tr {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

/* Estilos para los encabezados de los días de la semana */
.calendar-day-head {
    background-color: #fff;
    color: #000;
    padding: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
}

/* Estilos generales para los días del calendario */
.calendar-day {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    justify-self: center;
}

/* Estilos para días con números */
.calendar-day:not(.calendar-day-np) {
    background-color: #eee;
}

/* Estilos para días marcados específicos */
.calendar-day.marked-nacional {
    background-color: #bf0d0d;
    font-weight: bold;
    color:#fff;
}


.calendar-day.marked-islas-canarias, .calendar-day.marked-andalucia, .calendar-day.marked-aragon, .calendar-day.marked-asturias,
.calendar-day.marked-islas-baleares, .calendar-day.marked-cantabria, .calendar-day.marked-castilla-la-mancha,
.calendar-day.marked-castilla-leon, .calendar-day.marked-cataluna, .calendar-day.marked-extremadura,
.calendar-day.marked-galicia, .calendar-day.marked-madrid, .calendar-day.marked-murcia, .calendar-day.marked-navarra,
.calendar-day.marked-pais-vasco, .calendar-day.marked-la-rioja, .calendar-day.marked-valencia,
.calendar-day.marked-ceuta, .calendar-day.marked-melilla, .calendar-day.marked-islas-canarias.marked-inicio,
.calendar-day.marked-islas-canarias.marked-fin {
    background-color: #d4af37;
    font-weight: bold;
    color:#fff;
}

.calendar-day.marked-gran-canaria, .calendar-day.marked-tenerife, .calendar-day.marked-la-gomera,
.calendar-day.marked-la-palma, .calendar-day.marked-el-hierro, .calendar-day.marked-fuerteventura,
.calendar-day.marked-lanzarote, .calendar-day.marked-la-graciosa {
    background-color: #7c3f98;
    font-weight: bold;
    color:#fff;
}

.calendar-day[class*="marked-"]:not(.calendar-day-np):not(.marked-nacional):not(.marked-inicio):not(.marked-vacaciones):not(.marked-fin):not(.marked-melilla):not(.marked-ceuta):not(.marked-valencia):not(.marked-la-rioja):not(.marked-pais-vasco):not(.marked-navarra):not(.marked-murcia):not(.marked-madrid):not(.marked-galicia):not(.marked-extremadura):not(.marked-cataluna):not(.marked-castilla-leon):not(.marked-castilla-la-mancha):not(.marked-cantabria):not(.marked-islas-baleares):not(.marked-asturias):not(.marked-aragon):not(.marked-andalucia):not(.marked-islas-canarias):not(.marked-gran-canaria):not(.marked-lanzarote):not(.marked-fuerteventura):not(.marked-el-hierro):not(.marked-la-graciosa):not(.marked-la-palma):not(.marked-la-gomera):not(.marked-tenerife):not(.marked-hoy) {
    background-color: #aedff7;
    font-weight: bold;
}

.calendar-day.marked-inicio{
    background-color: #6e8b7b;
    color: #fff;
    font-weight: bold;
}

.calendar-day.marked-fin{
    background-color: #b08c72;
    font-weight: bold;
    color: #fff;
}

.calendar-day.marked-vacaciones{
    background-color: #7083a1;
    font-weight: bold;
    color: #fff;
}

.calendar-day.marked-hoy{
    font-weight: bold;
}





/* Estilos generales para el contenedor de cada mes */
.month-container {
    display: inline-block;
    vertical-align: top;
    padding-right: 15px; /* Corregido de margin-padding */
    padding-left: 15px;
    margin-top: 20px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-bottom: 0px;
    width: 50%;
}

.cont_compartir, .cont_compartir_mobile{
    margin-bottom: 20px;
}

.cont_compartir_mobile{
    display: none;
}

/* Suponiendo que conoces el ancho máximo de una fila y el ancho de cada .month-container,
   puedes calcular cuántos .month-container caben en una fila. Por ejemplo, si caben 4, 
   entonces querrás quitar el borde del 4to, 8vo, 12vo, etc. 
   Esto se puede hacer con un selector CSS como este: */

/* Media query para pantallas grandes (por ejemplo, pantallas de escritorio) */
@media (min-width: 1200px) {
  /* Elimina el borde derecho del 4to, 8vo, 12vo .month-container, etc. */
  .month-container:nth-of-type(2n) {
      border-right: none;
    max-width: 50%;
  }

}

/* Media query para pantallas medianas (por ejemplo, tabletas) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Elimina el borde derecho del 4to, 8vo, 12vo .month-container, etc. */
  .month-container:nth-of-type(1n) {
      border-right: none;
  }

}

/* Media query para pantallas pequeñas (por ejemplo, móviles) */
@media (max-width: 767px) {
  /* Elimina el borde derecho del 4to, 8vo, 12vo .month-container, etc. */
  .month-container:nth-of-type(1n) {
      border-right: none;
  }
  .month-container {
    width: 100%;
  }

  .cont_compartir{
    display: none;
  }

  .cont_compartir_mobile{
    display: flex;
  }

}

.legend {
    margin-top: 5px;
 width: 100%;
 max-width: 100%;

}

.legend span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.legend-container {
   /* display: flex;
    flex-wrap: wrap; */
    margin-top: 20px;

       max-width: 100%; /* Limita el ancho máximo del contenedor de la leyenda */
    overflow: hidden; /* Oculta cualquier desbordamiento horizontal */
    word-wrap: break-word; /* Asegura que las palabras largas se rompan para ajustarse al contenedor */


}

/* Estilos para cada elemento de la leyenda */
.legend-item {
  align-items: center; /* Alinea los elementos verticalmente en el centro (útil si decides cambiar a display flex) */
  margin-right: 15px; /* Margen a la derecha */
  margin-bottom: 10px; /* Margen en la parte inferior */
  padding-top: 20px; /* Relleno superior */
  padding-bottom: 10px; /* Relleno inferior */
  border-top: 2px dotted #ccc; /* Línea superior de puntos discontinuos */
  display: grid;
 /* grid-template-columns: 50px auto; /* 50px para la columna fija y auto para la columna flexible */
grid-template-columns: 50px 1fr; /* 50px para la columna fija y 1fr para la flexible */
    max-width: 100%; /* Asegura que el contenedor no exceda el ancho de su contenedor padre */
    width: 100%; /* Establece el ancho a 100% del contenedor padre */
    box-sizing: border-box; 
      white-space: normal; 

}

.legend-item-fixed {
    /* Estilos para la columna fija */
    font-weight: bold;
  
}

.legend-item-flexible {
    /* Estilos para la columna flexible */
    text-align: left; /* Alineación del texto */

}

.legend-color {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
}

/* Estilos para el nombre del mes */
.month {
    font-weight: bold;
    font-size: 1.3em;
    text-align: center; /* Centra el texto del mes */
    margin-bottom: 10px; /* Espaciado debajo del nombre del mes */
    padding-top: 20px;
}


.ficha-div-share{
    text-align: end;
}

.calendar-row-lunar p{
    text-align: center;
}

.calendar-row-lunar td .cont-moon{
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    position: relative;
    border: 0;
}

.calendar-row-lunar td .cont-moon .moon{
    background-image: url(https://servicios.canarias7.es/media/imgs/calendarios/fondo-moon.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    width: 30px;
    position: absolute;
    border-radius: 50%;
}
.calendar-row-lunar td .cont-moon .cubre-moon{
    position: absolute;
    background-color: #000000B3;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.calendar-row-lunar td .cont-moon.llena .cubre-moon{
    display: none;
}

.calendar-row-lunar td .cont-moon.nueva .cubre-moon{
    height: 28px;
    width: 28px;
    top: 1px;
    left: 1px;
    z-index: 1;
}
.calendar-row-lunar td .cont-moon.nueva .moon{
    z-index: 0;
}

.calendar-row-lunar td .cont-moon.cuarto-creciente .moon{
    z-index: 1;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    left: 50%;
}
.calendar-row-lunar td .cont-moon.cuarto-creciente .cubre-moon{
    z-index: 0;
}

.calendar-row-lunar td .cont-moon.cuarto-menguante .moon{
    z-index: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    right: 50%;
}
.calendar-row-lunar td .cont-moon.cuarto-menguante .cubre-moon{
    z-index: 0;
}

.calendar-row-lunar td .cont-moon.creciente .moon, .calendar-row-lunar td .cont-moon.gibosa-creciente .cubre-moon,
.calendar-row-lunar td .cont-moon.menguante .moon, .calendar-row-lunar td .cont-moon.gibosa-menguante .cubre-moon{
    z-index: 0;
}
.calendar-row-lunar td .cont-moon.creciente .cubre-moon, .calendar-row-lunar td .cont-moon.gibosa-creciente .moon,
.calendar-row-lunar td .cont-moon.menguante .cubre-moon, .calendar-row-lunar td .cont-moon.gibosa-menguante .moon{
    z-index: 1;
}