/* Semáforo dots UX improvements: tamaño, foco, transiciones, accessible tooltip */
.semaforo-icon {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    margin-right: 6px;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
}
.semaforo-icon:focus {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(33,85,145,0.12);
    border-radius: 50%;
}
.semaforo-icon:hover {
    transform: scale(1.08);
    filter: brightness(1.05);
}
@media (max-width: 575.98px) {
    .semaforo-icon {
        font-size: 1.25rem;
        margin-right: 8px;
    }
}
.semaforo-verde { color: #28a745 !important; }
.semaforo-amarillo { color: #ffc107 !important; }
.semaforo-rojo { color: #dc3545 !important; }
.input-group-text .semaforo-icon { padding: 6px; border-radius: 6px; }