/* Ocultar div de impresion */
.calendar h5 {
  display: none;
}
.print-legend{
  display: none;
}

.header-calendar-view {
  padding: 60px;
  display: flex;
  align-items: center;
  margin-top: -20px;
}

.header-calendar-view label {
  font-size: 1.5em;
}

.header-calendar-view button {
  font-size: 20px;
  margin-left: 10px;
}

.calendar {
  display: flex; /* Usar flexbox */
  margin-top: -80px;
  height: 100px;
  margin-left: 10px;
}

.month {
  margin-right: 10px; /* Espacio entre los meses */
  display: flex;
  flex-direction: column;
  width: calc(100% / 12 - 5px); /* Ancho igual para los meses */
  margin-top: 10px;
}

.month h6 {
  font-weight: bold;
  text-align: center;
}

.days {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinear los dias al inicio (arriba)*/
  line-height: 1.2;
}

.day {
  align-items: flex-start;
  text-align: left;
  border: 1px solid #ddd;
  width: 100%;
  max-height: 20px;
  cursor: pointer;
}

.day:hover,
.day:focus {
  color: #2486dc;
  background-color: #f0f0f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.day.empty {
  visibility: hidden; /* Ocultar los días vacíos */
  border: none; /* Quitar los bordes de los días vacíos */
}

/* Estilos para eventos */
.event {
  display: inline-block;
  padding: 1px;
  width: 15px;
  height: 13px;
  margin-left: 10px;
  margin-top: 2px;
  cursor: pointer;
}
.event:hover,
.event:focus {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.impi {
  background-color: #00a2ff; /* Color para IMPI */
}
.impi:hover,
.impi:focus {
  background-color: #2a7daa; /* Color para IMPI */
}
.tribunal {
  background-color: #05ef53; /* Color para Tribunal */
}
.tribunal:hover,
.tribunal:focus {
  background-color: #038114; /* Color para IMPI */
}
.nolaboral {
  background-color: #ff0000; /* Color para No Laboral */
}
.nolaboral:hover,
.nolaboral:focus {
  background-color: #8b0000; /* Color para IMPI */
}

.calendar-legend {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  margin-right: 5px;
}
.legend-item {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  color: white;
  font-weight: bold;
}

/* Estilo para el botón de imprimir calendario */
.btn-print-calendar {
  background-color: #2486dc;
  color: white; /* Texto blanco */
  padding: 10px 20px; /* Espaciado interno */
  font-size: 1em; /* Tamaño de fuente */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar el cursor a pointer cuando se pase por encima */
  margin-top: 20px; /* margen superior para separar del contenido */
}

/* Efecto hover para el botón */
.btn-print-calendar:hover {
  background-color: #195991; /* Cambia a un tono más oscuro cuando pasas el mouse */
}

/* Efecto activo (cuando se hace clic en el botón) */
.btn-print-calendar:active {
  background-color: #195991;
  transform: scale(0.98);
}

/* sombra botón  */
.btn-print-calendar {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilos para impresión */
@media print {
  /* Mostrar el anio en la impresión */
  .calendar h5 {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
  }
  /* Ocultar barra y el botón de imprimir */
  .header-calendar-view,
  .btn-print-calendar,
  nav {
    display: none;
  }

  .calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: -80px;
  }
  /* Cada mes ocupará el 16.66% del ancho para que haya 6 meses por fila */
  .month {
    width: calc(100% / 6 - 10px); /* Ajustar para 6 meses por fila con margen */
    height: auto;
    page-break-inside: avoid; /* Evitar que se dividan los meses entre páginas */
    margin-bottom: 20px;
  }

  .month h4 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 5px;
  }

  .day {
    font-size: 12px;
    line-height: 1;
  }
  /* Mostrar leyenda para impresión */
  .print-legend {
    display: block;
    margin-top: 20px;
    position: fixed; /* Fijar la posición */
    bottom: -1mm; /* Ajustar la distancia del pie de página */
    left: 0;
    right: 0;
    text-align: center; /* Centrar la leyenda */
  }
  .print-legend .impi {
    background-color: #00a2ff !important; /* Color para IMPI */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    color: white; /* Texto blanco */
    font-weight: bold;
  }

  .print-legend .tribunal {
    background-color: #05ef53 !important; /* Color para Tribunal */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    color: white; /* Texto blanco */
    font-weight: bold;
 
  }

  .print-legend .nolaboral {
    background-color: #ff0000 !important; /* Color para No Laboral */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    color: white; /* Texto blanco */
    font-weight: bold;
  }
  /* Estilos para eventos */
  .event {
    display: inline-block;
    padding: 1px;
    width: 15px;
    height: 13px;
    margin-left: 10px;
    margin-top: 2px;
  }
  .impi {
    background-color: #00a2ff !important; /* Color para IMPI */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .tribunal {
    background-color: #05ef53 !important; /* Color para Tribunal */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .nolaboral {
    background-color: #ff0000 !important; /* Color para No Laboral */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page {
    margin: 10mm;
  }
  body {
    font-size: 10pt;
    margin: 0;
    padding: 0;
    width: 100%;
  }
}