Configurar Horario
/* Verde - Día Disponible */
.indicador.disponible {
background: linear-gradient(145deg, #33d17a, #2a9d5c);
color: #33d17a;
box-shadow:
0 0 20px rgba(51, 209, 122, 0.6),
0 4px 15px rgba(51, 209, 122, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
animation: pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseGreen {
0%, 100% {
box-shadow: 0 0 20px rgba(51, 209, 122, 0.6), 0 4px 15px rgba(51, 209, 122, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 35px rgba(51, 209, 122, 0.9), 0 6px 20px rgba(51, 209, 122, 0.6);
transform: scale(1.05);
}
}
/* Rojo - Día Cerrado */
.indicador.cerrado {
background: linear-gradient(145deg, #ff3b3f, #c92a2a);
color: #ff3b3f;
box-shadow:
0 0 20px rgba(255, 59, 63, 0.6),
0 4px 15px rgba(255, 59, 63, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
animation: pulseRed 2s ease-in-out infinite;
animation-delay: 0.5s;
}
@keyframes pulseRed {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 59, 63, 0.6), 0 4px 15px rgba(255, 59, 63, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 35px rgba(255, 59, 63, 0.9), 0 6px 20px rgba(255, 59, 63, 0.6);
transform: scale(1.05);
}
}