body {
    font-family: Arial, sans-serif;
    background: #f0f2f5;
    padding: 5px;
}

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

/* CONTENEDOR CALENDARIO */
.cards-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 2px;
}

/* COLUMNA POR DÍA */
.day-column {
    background: #e9ecef;
    border-radius: 12px;
    padding: 15px;
    min-height: 300px;
}

/* TÍTULO DEL DÍA */
.day-title {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #ccc;
    padding-bottom: 8px;
}

/* TARJETA */
.card {
    background: white;
    padding: 20px;
    padding-top: 28px; /* espacio para el dot */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 12px;
    transition: 0.3s;
    margin-bottom: 15px;
    position: relative; /* necesario para flotante */
}

.card:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* CONTENIDO TARJETA */
.card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.card-item {
    margin-bottom: 6px;
    font-size: 16px;
}

.label {
    font-weight: bold;
    color: #555;
}

/* ========================= */
/* 🔵 DOT DE ESTADO */
/* ========================= */

.status-dot {
    position: absolute;
    top: 10px;
    right: 10px; /* 🔧 esquina superior derecha */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 0 2px white; /* aro blanco */
}

/* COLORES POR ESTADO */
.status-completed {
    background-color: #f1c40f; /* Amarillo */
}

.status-pending {
    background-color: #3498db; /* Azul */
}

.status-picking {
    background-color: #e74c3c; /* Rojo */
}

.status-confirmed {
    background-color: #2ecc71; /* Verde */
}

.status-file {
    background-color: #9b59b6; /* Lila */
}
/* Animación parpadeo */
@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* Clase para dot parpadeante */
.status-blink {
    animation: blink 3s infinite;
}

#time {
    font-family: Arial, sans-serif;
    font-size: 20px;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
}