/* =====================================================================
   Protótipo do Portal · Cargas e Relatório (tabela vira cartões no estreito)
   ===================================================================== */

.o-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.o-chip.entrada[aria-pressed="true"] { background: var(--o-entrada); border-color: var(--o-entrada); }
.o-chip.rota[aria-pressed="true"] { background: var(--o-rota); border-color: var(--o-rota); }
.o-chip.transito[aria-pressed="true"] { background: var(--o-transito); border-color: var(--o-transito); }
.o-chip.concluido[aria-pressed="true"] { background: var(--o-concluido); border-color: var(--o-concluido); }
.o-chip.avaria[aria-pressed="true"] { background: var(--p-vermelho); border-color: var(--p-vermelho); }
.o-busca { display: block; margin-bottom: .8rem; }

.o-tabela tbody tr { cursor: pointer; animation: o-linha .35s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--atraso, 0ms); }
@keyframes o-linha { from { opacity: 0; transform: translateY(6px); } }
.o-ordenar { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.o-ordenar:hover { color: var(--p-preto); }
th[aria-sort="ascending"] .o-ordenar, th[aria-sort="descending"] .o-ordenar { color: var(--p-vermelho); }
.o-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--p-preto); cursor: pointer; }
.o-tabela tr:hover .o-link { color: var(--p-vermelho); text-decoration: underline; text-underline-offset: 2px; }
.o-tabela td .p-icone { width: 13px; height: 13px; vertical-align: -2px; color: var(--p-cinza); }
.o-mini-etapas { display: inline-flex; align-items: center; gap: 3px; }
.o-mini-etapas i { width: 9px; height: 9px; border-radius: 50%; background: var(--p-borda-forte); }
.o-mini-etapas i + i { position: relative; margin-left: 8px; }
.o-mini-etapas i + i::before { content: ""; position: absolute; right: 100%; top: 4px; width: 8px; height: 1px; background: var(--p-borda-forte); }
.o-mini-etapas i.feita { background: var(--o-entrada); }
.o-mini-etapas.rota i.feita { background: var(--o-rota); }
.o-mini-etapas.transito i.feita { background: var(--o-transito); }
.o-mini-etapas.concluido i.feita { background: var(--o-concluido); }
.o-vazio-ilustrado { display: grid; justify-items: center; gap: .3rem; }
.o-vazio-ilustrado .p-icone { width: 32px; height: 32px; color: var(--p-cinza-claro); }

@container (max-width: 760px) {
    .o-tabela thead, .o-tabela-relatorio thead { display: none; }
    .o-tabela, .o-tabela tbody, .o-tabela tr, .o-tabela td,
    .o-tabela-relatorio, .o-tabela-relatorio tbody, .o-tabela-relatorio tr, .o-tabela-relatorio td { display: block; }
    .o-tabela tr, .o-tabela-relatorio tbody tr { position: relative; padding: .6rem .8rem; border-bottom: 1px solid var(--p-borda); }
    .o-tabela td, .o-tabela-relatorio td, .o-tabela td.num, .o-tabela-relatorio td.num { border: 0; padding: .1rem 0; text-align: left; }
    .o-tabela td[data-rotulo="Volumes"], .o-tabela td[data-rotulo="Entrada"], .o-tabela td[data-rotulo="Saída"],
    .o-tabela td[data-rotulo="Entrega"], .o-tabela td[data-rotulo="Anexos"], .o-tabela td[data-rotulo="Etapa"] {
        display: inline-block; margin-right: .8rem; color: var(--p-cinza); font-size: .72rem;
    }
    .o-tabela td[data-rotulo="Entrada"]::before, .o-tabela td[data-rotulo="Saída"]::before, .o-tabela td[data-rotulo="Entrega"]::before {
        content: attr(data-rotulo) " "; font-weight: 600;
    }
    .o-tabela td[data-rotulo="Status"] { position: absolute; right: .8rem; top: .6rem; }
    .o-tabela-relatorio td::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--p-cinza); font-size: .7rem; }
    .o-tabela-relatorio tfoot { display: block; }
    .o-tabela-relatorio tfoot tr, .o-tabela-relatorio tfoot td { display: block; }
}