/* Estilo general del calendario */
.calendar {
  background-color: #ffffff; /* Fondo blanco */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
  font-family: 'Roboto', sans-serif; /* Fuente moderna */
}

/* Títulos dentro del calendario */
.calendar h5 {
  margin-bottom: 15px; /* Margen inferior */
  color: #007bff; /* Color azul */
}

/* Estilo de los días */
.day {
  background-color: #f8f9fa; /* Fondo gris claro */
  border: 1px solid #ddd; /* Borde gris */
  border-radius: 5px; /* Bordes redondeados */
  padding: 15px; /* Espaciado interno */
  text-align: center; /* Centrar texto */
  cursor: pointer; /* Cambia cursor a puntero */
  transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Transiciones suaves */
}

/* Efecto al pasar el mouse sobre los días */
.day:hover {
  background-color: #007bff; /* Azul al pasar el mouse */
  color: white; /* Texto blanco al pasar el mouse */
  transform: scale(1.05); /* Agrandar ligeramente al pasar el mouse */
}

/* Estilo para el día seleccionado */
.selected {
  background-color: #0056b3; /* Azul más oscuro para la fecha seleccionada */
  color: white; /* Texto blanco */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para el día seleccionado */
}

/* Estilo de los slots de tiempo */
.slot {
  padding: 12px;
  margin: 5px 0;
  border-radius: 5px; /* Bordes redondeados */
  background-color: #e9ecef; /* Fondo gris claro para los slots */
  transition: background-color 0.3s, transform 0.2s; /* Transición suave */
}

/* Efecto al pasar el mouse sobre los slots */
.slot:hover {
  background-color: #000000; /* Fondo negro al pasar el mouse */
  color: white; /* Texto blanco al pasar el mouse */
  transform: scale(1.05); /* Agrandar ligeramente al pasar el mouse */
}
.selected-day {
  background-color: #0056b3; /* Color azul para el día seleccionado */
  color: white; /* Texto blanco */
  border: 2px solid #007bff; /* Borde azul más claro */
}