body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 400px;
  margin: 0 auto;
}

.day {
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}

.empty {
  visibility: hidden;
}

.today {
  background-color: lightblue;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.hours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.hour {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.hour:hover {
  background-color: #0056b3;
}

.hour:focus {
  outline: none;
}

 .btn-volver {
      background-color: green;
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
    }
    .btn-volver:hover {
      background-color: darkgreen;
    }

.btn-group {
    margin-top: 10px;
}

.btn-group .btn {
    margin-right: 5px;
}

/* Estilos para los botones de cambio de mes */
.prev-month-btn,
.next-month-btn {
  cursor: pointer;
  font-size: 18px; /* Tamaño de la flecha */
  padding: 10px 20px; /* Ajusta el padding según sea necesario */
  border: none; /* Quita el borde del botón */
  border-radius: 5px; /* Bordes redondeados */
  background-color: #4CAF50; /* Color de fondo del botón */
  color: white; /* Color del texto */
  transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

/* Aumenta el tamaño de la flecha */
.prev-month-btn::before,
.next-month-btn::before {
  content: '\2039'; /* Flecha hacia la izquierda */
  font-size: 24px; /* Tamaño más grande */
  margin-right: 5px; /* Espacio entre la flecha y el texto */
}

.next-month-btn::before {
  content: '\203A'; /* Flecha hacia la derecha */
  margin-left: 5px; /* Espacio entre la flecha y el texto */
}

/* Estilos al pasar el cursor sobre los botones */
.prev-month-btn:hover,
.next-month-btn:hover {
  background-color: #45a049; /* Cambia el color de fondo al pasar el cursor */
}

.custom-checkbox {
    transform: scale(1.5); /* Ajusta el tamaño del checkbox según tus preferencias */
    margin-right: 10px; /* Espacio entre el checkbox y la etiqueta */
}