.timer-container {
    background-color: #f8f9fa; /* Gris muy clarito */
    border: 1px solid #dee2e6;
    border-left: 5px solid #0056b3; /* Una barra azul lateral para dar énfasis */
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #495057;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.timer-digits {
    font-weight: bold;
    font-variant-numeric: tabular-nums; /* Evita que los números "bailen" al cambiar */
    color: #0056b3;
    font-size: 1.1em;
}

/* Clase extra para cuando quede poco tiempo (menos de 2 min) */
.timer-warning {
    border-left-color: #dc3545;
    color: #dc3545;
}
.timer-warning .timer-digits {
    color: #dc3545;
}