.calendar td {
  background: #F5F7FA;
  color: #434A54;
  transition: all 0.25s;
}
.calendar td:hover {
  background: #E6E9ED;
}
.calendar .today {
  background-color: #DA4453;
  color: #FFF;
}
.calendar .today:hover {
  background-color: #ED5565;
}

.card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.12) !important;
}
.card-header {
  transition: opacity 0.2s ease;
}
.progress {
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar {
  transition: width 0.6s ease;
}
#attendance, #devices {
  transition: opacity 0.3s ease;
}
.badge {
  transition: all 0.2s ease;
}
.table td, .table th {
  vertical-align: middle;
}
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card-body:empty::after {
  content: "Cargando...";
  display: block;
  text-align: center;
  color: #999;
  padding: 1rem;
}