/* ============================================================
   semaforo-badge.css
   Usage: Macro semáforo indicator (0/5 to 5/5 dots)
   5 dots horizontally, filled according to active criteria
   ============================================================ */

.semaforo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.semaforo__dots {
    display: inline-flex;
    gap: var(--space-1);
}

.semaforo__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--separator);
    transition: background-color var(--duration-base) var(--ease-smooth);
}

/* Dot states — filled according to semáforo criteria */
.semaforo__dot--active-success {
    background: var(--success);
}

.semaforo__dot--active-warning {
    background: var(--warning);
}

.semaforo__dot--active-danger {
    background: var(--danger);
}

.semaforo__label {
    font-size: var(--text-footnote);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-normal);
}

/*
Usage example — semáforo 2/5 cauteloso:

<div class="semaforo">
    <span class="semaforo__dots">
        <span class="semaforo__dot semaforo__dot--active-warning"></span>
        <span class="semaforo__dot semaforo__dot--active-warning"></span>
        <span class="semaforo__dot"></span>
        <span class="semaforo__dot"></span>
        <span class="semaforo__dot"></span>
    </span>
    <span class="semaforo__label">2 / 5 cauteloso</span>
</div>

Dot color rules:
- 0-1 active dots  → --active-danger  (defensive/alerta)
- 2-3 active dots  → --active-warning (cauteloso/normal bajo)
- 4-5 active dots  → --active-success (normal/agresivo)
*/