/* componentes/pills.css — Pills de etapa, tags e mini-etapas (Entrada, Em rota, Trânsito, Concluído). */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.entrada { background: var(--ambar-claro); color: var(--ambar); border-color: var(--ambar-borda); }
.pill.rota { background: var(--azul-claro); color: var(--azul); border-color: var(--azul-borda); }
.pill.rota::before { animation: pisca 1.6s ease-in-out infinite; }
.pill.transito { background: var(--roxo-claro); color: var(--roxo); border-color: var(--roxo-borda); }
.pill.transito::before { animation: pisca 1.6s ease-in-out infinite; }
.pill.concluido { background: var(--verde-claro); color: var(--verde-escuro); border-color: var(--verde-borda); }
@keyframes pisca { 50% { opacity: .35; } }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.tag.avaria { background: var(--vermelho); color: #fff; }
.tag.arquivos { background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); }
.mini-etapas { display: inline-flex; align-items: center; gap: 0; }
.mini-etapas i { width: 9px; height: 9px; border-radius: 50%; background: var(--borda-forte); position: relative; }
.mini-etapas i + i { margin-left: 14px; }
.mini-etapas i + i::before { content: ""; position: absolute; right: 9px; top: 3.5px; width: 14px; height: 2px; background: var(--borda-forte); }
.mini-etapas i.ok { background: var(--verde-escuro); } .mini-etapas i.ok + i::before, .mini-etapas i.ok + i.ok::before { background: var(--verde-escuro); }
.mini-etapas i.atual.rota { background: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); } .mini-etapas i.atual.transito { background: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-claro); } .mini-etapas i.atual.entrada { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-claro); }
.mini-etapas.redespacho i:nth-child(2):not(.ok):not(.atual) { background: #fff; box-shadow: inset 0 0 0 2px var(--roxo); }