/* ==========================================================================
   Visual compartilhado das telas de Processos (interna e Portal do Cliente).
   Cards KPI, chips de status, badge de status/SLA, ícone de modal e marcas
   de etapa do fluxo — usado por ImpoProcessos.razor e
   Components/Pages/Portal/PortalProcessos.razor (direto ou via os
   componentes compartilhados em Components/Shared/), para as duas telas
   manterem a mesma identidade visual sem duplicar CSS.
   ========================================================================== */

/* ---------- carregamento inicial de página (Components/Shared/PaginaCarregando.razor) ---------- */

.pagina-carregando-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    width: 100%;
}

.loader {
    position: relative;
    width: 164px;
    height: 100px;
    margin: 50px auto;
}

.loader div {
    position: absolute;
    width: 10px;
    height: 30px;
    background-color: var(--cv-brand, #0b4f71);
    border-radius: 5px;
    animation: pagina-carregando-barra 1.5s ease-in-out infinite;
}

.loader .bar1 { left: 0px;   animation-delay: 0s; }
.loader .bar2 { left: 20px;  animation-delay: 0.15s; }
.loader .bar3 { left: 40px;  animation-delay: 0.3s; }
.loader .bar4 { left: 60px;  animation-delay: 0.45s; }
.loader .bar5 { left: 80px;  animation-delay: 0.6s; }
.loader .bar6 { left: 100px; animation-delay: 0.75s; }
.loader .bar7 { left: 120px; animation-delay: 0.9s; }
.loader .bar8 { left: 140px; animation-delay: 1.05s; }
.loader .bar9 { left: 160px; animation-delay: 1.2s; }

@keyframes pagina-carregando-barra {
    0% { height: 30px; transform: translate(0, 0); }
    50% { height: 70px; transform: translate(0, 35px); }
    100% { height: 30px; transform: translate(0, 0); }
}

:root {
    --cv-brand: #0b4f71;
    --cv-brand-deep: #073853;
    --cv-ink: #16232e;
    --cv-surface-alt: #f3f6fa;
    --cv-line: #d8dee6;
    --cv-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
}

/* =========================================
   LINHA DE CARDS (KPIs)
========================================= */

/* Declarado aqui (global, servido direto da wwwroot), não em ImpoProcessos.razor.css: a mesma
   classe é usada pelo Portal do Cliente (PortalProcessos.razor, outro componente) — CSS
   isolado do Blazor carimba um atributo só nos elementos do PRÓPRIO componente, então regras
   isoladas aqui nunca alcançariam o Portal (mesmo bug já corrigido pra .label-filtro/
   .input-filtro/.filtro-dropdown/.filtro-checkbox, ver mais abaixo). */
.kpi-row-wrap {
    container-type: inline-size;
    container-name: kpirow;
    /* Fileira de topo (cards/filtros) nunca encolhe quando o pai é flex-column de altura fixa
       (ImpoProcessos.razor.css .painel-kpis / PortalProcessos.razor.css .portal-processos) —
       só a área de linhas da tabela deve ceder espaço. */
    flex-shrink: 0;
    /* flex-wrap:nowrap de propósito — os três grupos (filtros, cards, ações) somados passam de
       1900px, bem mais que uma tela de notebook. Deixar quebrar tentava reacomodar os cards em
       várias combinações de 2/3 linhas conforme a largura (o pior caso: um card sozinho numa
       3ª linha, ao lado dos ícones de ação, sem nenhuma relação visual com o resto). Uma
       fileira só, que rola na horizontal quando não cabe, é previsível em qualquer largura —
       mesmo padrão já usado na tabela (scroll-topo.js). */
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px; /* respiro pra barra de rolagem não colar nos cards */
}

/* Com os filtros abertos (funil clicado) não são os CARDS que precisam da rede de segurança
   acima — são os campos de busca (Cliente/Agente) que abrem uma lista de sugestão por baixo,
   e overflow-y:hidden cortava essa lista fora da vista. Filtros abertos não têm o problema de
   largura que o overflow-x de cima resolve, então liberar os dois eixos aqui é seguro. */
.kpi-row-wrap:has(.kpi-filtros-abertos) {
    overflow: visible;
}
.kpi-row-principal {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: max-content;
}

.kpi-grupo {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
}

/* Empurra o grupo de posição/modal pro fim da fileira quando sobra espaço (tela larga o
   bastante pra não precisar rolar) — com justify-content:flex-start (não mais space-between,
   que espalharia os filtros do meio pra longe do Total em vez de deixá-los colados nele),
   esse grupo precisa do próprio empurrão pra continuar ancorado à direita. */
.kpi-grupo-direita {
    align-items: flex-end;
    margin-left: auto;
}

.kpi-grupo-titulo {
    font-size: 12px;
    font-weight: 600;
    color: #55606e;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.kpi-grupo-cards {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Vão entre Total e os cards de posição/modal (KpiCardsProcessos.ChildContent) — é onde a
   tela interna encaixa os 4 filtros que sobraram na barra de baixo (texto, cliente, agente,
   atualização). flex:0 (não 1) de propósito: antes esticava pra ocupar todo o vão, o que
   espalhava os 4 campos pela largura toda em vez de ficarem juntos, colados no Total, como o
   resto da fileira pede — "alinhados à esquerda" é o grupo compacto, não cada campo esticado. */
/* align-items:flex-start (não center): o campo Cliente cresce pra baixo quando tem chips
   selecionados (ver .filtro-busca-chips), e com center os campos mais curtos ao lado
   recentralizavam na altura do mais alto — labels saíam desalinhados entre si. Com
   flex-start todos os labels começam na mesma linha, cresça o que crescer. */
.kpi-filtros-embutidos {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 0 0 auto;
}

.kpi-filtro-item {
    position: relative;
    flex: 0 0 auto;
    width: 152px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

    /* Label enxuto em cima (mesma classe .label-filtro da fileira de baixo) + campo embaixo —
       label+campo somados ficam perto da altura dos cards ao lado (~40px), então o campo em
       si é mais baixo que na fileira de baixo (25px lá, ~26px aqui já dá pra caber o label). */
    .kpi-filtro-item .label-filtro {
        margin-bottom: 0;
    }

    .kpi-filtro-item .input-filtro,
    .kpi-filtro-item .filtro-dropdown {
        width: 100%;
        height: 26px;
        max-height: none;
        box-sizing: border-box;
    }

/* Encerrados entrou no grupo de filtros — o label vazio em cima ( ) alinha o checkbox
   com a base dos outros campos, que têm rótulo de verdade ocupando aquela linha. */
/* Duas classes no seletor (não só .kpi-filtro-checkbox) de propósito: precisa vencer
   .kpi-filtro-item de qualquer @container mais abaixo (mesma especificidade de uma classe
   só, ganharia por ordem no arquivo) — "Mostrar Encerrados" não é campo de texto pra
   encolher largura junto dos outros, e encolhido demais o texto quebra e encavalga com a
   linha de baixo. */
.kpi-filtro-item.kpi-filtro-checkbox {
    width: auto;
    justify-content: flex-end;
}

    .kpi-filtro-checkbox .filtro-checkbox {
        height: 26px;
        white-space: nowrap;
    }

/* Estilo base dos campos de filtro (label/input/select/checkbox/busca) — compartilhado entre
   a tela interna e o Portal do Cliente, os dois usam exatamente estas classes. MOVIDO de
   ImpoProcessos.razor.css (CSS isolado): isolamento do Blazor carimba um atributo [b-xxxx]
   só nos elementos do PRÓPRIO componente, então o Portal (outro componente) nunca recebia
   essas regras — os campos apareciam sem estilo (borda/fundo/fonte padrão do navegador). */
.label-filtro {
    font-size: 9px;
    font-weight: 600;
    color: #6b7684;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.input-filtro,
.filtro-dropdown {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 12.5px;
    background: #fbfcfe;
    color: var(--cv-ink);
    max-width: 200px;
    max-height: 25px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.input-filtro {
    width: 160px;
}

    .input-filtro:focus,
    .filtro-dropdown:focus {
        outline: none;
        border-color: var(--cv-brand);
        background: white;
        box-shadow: 0 0 0 3px rgba(11,79,113,0.15);
    }

/* Busca com sugestões (Cliente/Agente) — substitui o <select> de lista fixa, que não
   escala pra centenas de nomes. */
.filtro-busca-wrap {
    position: relative;
}

.filtro-busca-campo {
    position: relative;
}

.filtro-busca-limpar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #8a94a3;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
}

    .filtro-busca-limpar:hover {
        background: #eef2f6;
        color: #b5423a;
    }

.filtro-busca-lista {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 4px;
    min-width: 100%;
    max-width: 260px;
    max-height: 220px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--cv-line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

    .filtro-busca-lista li {
        padding: 6px 8px;
        font-size: 12.5px;
        color: var(--cv-ink);
        border-radius: 5px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .filtro-busca-lista li:hover {
            background: var(--cv-surface-alt, #f3f6fa);
        }

/* Multisseleção de Cliente: sem chips embaixo do campo (tentado antes — sempre acabava
   deslocando algo na fileira de filtros). Em vez disso, quem está marcado aparece só
   dentro da própria lista (✓, fixado no topo) e a contagem some no rótulo "Cliente (N)".
   .filtro-busca-campo precisa de z-index MAIOR que o overlay de clique-fora logo abaixo,
   senão o overlay (position:fixed) pinta por cima do input/lista mesmo vindo depois no
   DOM — elemento sem position fica sempre atrás de um elemento posicionado. */
.filtro-busca-campo {
    z-index: 2;
}

.filtro-busca-overlay-clique {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
}

.filtro-busca-lista-multi li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filtro-busca-check {
    flex: 0 0 14px;
    color: #1a8a5f;
    font-weight: 700;
    font-size: 12px;
}

.filtro-busca-item-selecionado {
    background: var(--cv-surface-alt, #f3f6fa);
    font-weight: 600;
}

.filtro-data-range {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-data {
    width: 135px;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.filtro-checkbox {
    display: flex;
    align-items: center;
    height: 25px;
}

    .filtro-checkbox label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        white-space: nowrap;
    }

    .filtro-checkbox input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--cv-brand);
    }

.kpi-card {
    border: none;
    font-family: 'Segoe UI', sans-serif;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    cursor: pointer;
    text-align: inherit;
    color: inherit;
    outline-offset: 2px;
}

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }

    /* Portal do Cliente: mesmos cards, sem interação por clique (ainda sem tela de filtros
       própria) — mantém a cor/leitura normal, só tira o hover/cursor de "clicável". */
    .kpi-card.kpi-somente-leitura {
        cursor: default;
    }

        .kpi-card.kpi-somente-leitura:hover {
            transform: none;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
        }

.kpi-ativo {
    outline: 2px solid var(--cv-brand-deep);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.kpi-total {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--cv-brand), var(--cv-brand-deep));
    color: white;
    padding: 5px 10px;
    box-shadow: 0 3px 10px rgba(11,79,113,0.3);
    flex: 0 0 auto;
    min-width: 104px;
    max-width: 145px;
}

.kpi-icone {
    font-size: 17px;
}

.kpi-info {
    display: flex;
    flex-direction: column;
}

.kpi-titulo {
    font-size: 9.5px;
    opacity: 0.8;
    white-space: nowrap;
}

.kpi-valor {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

.kpi-percentual {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    opacity: 0.75;
    line-height: 1.15;
}

.kpi-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    color: white;
    flex: 0 0 auto;
    min-width: 88px;
    max-width: 135px;
    cursor: pointer;
    text-align: left;
}

    .kpi-pill .kpi-info {
        gap: 1px;
    }

/* Ícone do pill (posição/alerta) — mesmo papel do .kpi-icone de Total/Modal, só que some em
   telas largas (o rótulo por extenso já identifica o card) e vira o que sobra do card
   quando a tela aperta e o rótulo é a primeira coisa a sair (ver breakpoints mais abaixo). */
.kpi-icone-pill {
    display: none;
    font-size: 15px;
    flex-shrink: 0;
}

.kpi-modal {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    color: white;
    flex: 0 0 auto;
    min-width: 104px;
    max-width: 145px;
}

    .kpi-modal .kpi-icone {
        font-size: 16px;
    }

/* Por responsabilidade — quem está devendo o próximo passo.
   Azul = está com a gente; âmbar = cliente; roxo = terceiros (terminal, Receita, órgão
   anuente); verde = concluído; vermelho = SLA expirado. */
.resp-interno {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.resp-cliente {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.resp-terceiros {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.resp-concluido {
    background: linear-gradient(135deg, #10b981, #059669);
}

.resp-atrasado {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

/* Por Modal */
.modal-maritimo {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

.modal-aereo {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.modal-rodoviario {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Por Posição (StatusEmbarqueVisual — cards do topo do Portal do Cliente) — mesma
   progressão azul → roxo → ciano → índigo → rosa do selo no detalhe do processo
   (pd-posicao-*) e da coluna "Posição" da lista, pra ler o mesmo código de cor nas três
   telas. Sem verde/âmbar/vermelho de propósito: são as cores do canal de parametrização
   (flag-canal-*) — usá-las aqui faria "posição" e "canal" parecerem o mesmo dado numa
   lista que mostra os dois lado a lado. */
.pos-embarque {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.pos-transito {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.pos-atracado {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
}

.pos-desembaraco {
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

/* Entregue: quinta posição, além do desembaraço aduaneiro — a entrega física da carga.
   Rosa fecha a progressão sem repetir nenhuma cor já usada (nem as de canal). */
.pos-entregue {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

/* Card de destaque (não-posição): âmbar, deliberadamente fora tanto da progressão azul→roxo
   →ciano→índigo→rosa das posições quanto do verde/âmbar/vermelho do canal — é uma pendência
   financeira, um terceiro vocabulário de cor não podia pegar emprestado nenhum dos dois. */
.kpi-alerta {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    cursor: default;
}

/* ==========================================================================
   Fileira de KPIs — filtros sempre recolhidos atrás do funil

   Antes os filtros ficavam embutidos na própria fileira, encolhendo em estágios conforme a
   tela apertava — mas mesmo encolhidos competiam por espaço com os cards, e um DEGRAU CHEIO
   de larguras só pra isso (5 breakpoints) ainda esbarrava em telas realistas. Mais simples: o
   funil (ícone) é o único que sempre aparece; clicar troca cards por filtros no lugar deles
   (não os dois ao mesmo tempo), então filtro nunca precisa espremer — quando aparece, tem a
   fileira praticamente inteira pra si.

   O que sobra pra compactar de verdade são só os CARDS (posição/modal/total) — ainda podem
   passar de 1100px sozinhos numa tela estreita, daí os estágios abaixo. Container query
   (não media query): o gatilho é o espaço que ESTA fileira tem, não a largura da janela — o
   menu lateral muda quanto sobra sem mudar a largura da tela. .kpi-row-wrap é quem declara o
   container (ver ImpoProcessos.razor.css) — overflow-x:auto ali é só rede de segurança pra
   telas mais estreitas que o estágio mais compacto aguenta. */

@container kpirow (max-width: 1200px) {
    .kpi-percentual {
        display: none;
    }
}

@container kpirow (max-width: 1100px) {
    .kpi-pill .kpi-titulo,
    .kpi-modal .kpi-titulo,
    .kpi-total .kpi-titulo {
        display: none;
    }

    .kpi-icone-pill {
        display: inline-flex;
    }

    .kpi-pill {
        min-width: 46px;
        max-width: none;
        padding: 6px 8px;
    }

        .kpi-pill .kpi-info {
            align-items: center;
        }

    .kpi-modal {
        min-width: 56px;
        max-width: none;
        padding: 6px 8px;
    }

    .kpi-total {
        min-width: 56px;
        max-width: none;
        padding: 6px 8px;
    }

    .kpi-row-principal {
        gap: 6px;
    }

    .kpi-grupo-cards {
        gap: 4px;
    }
}

/* Funil: sempre visível, sempre o ponto de partida — os filtros não moram mais na fileira
   por padrão, só aparecem quando o usuário pede. Ícone SVG (não emoji): o mesmo desenho em
   qualquer sistema/navegador, sem depender de qual conjunto de emoji está instalado. */
.kpi-funil-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--cv-surface-alt, #f3f6fa);
    color: var(--cv-brand-deep, #073853);
    cursor: pointer;
}

    .kpi-funil-btn svg {
        width: 15px;
        height: 15px;
    }

    .kpi-funil-btn:hover {
        background: var(--cv-line, #d8dee6);
    }

    .kpi-funil-btn-ativo {
        background: var(--cv-brand-deep, #073853);
        color: #ffffff;
    }

/* Filtros escondidos até o funil abrir — aí ocupam o lugar dos cards/ações (que somem
   enquanto isso), então nunca precisam encolher: a fileira quase inteira é só pra eles. */
.kpi-filtros-embutidos {
    display: none;
}

.kpi-filtros-abertos .kpi-filtros-embutidos {
    display: flex;
    flex: 1 1 auto;
}

.kpi-filtros-abertos .kpi-grupo-direita,
.kpi-filtros-abertos .kpi-acoes-embutidas {
    display: none;
}

/* =========================================
   STATUS OPERACIONAL (chips discretos)
========================================= */

.kpi-pendencias-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 4px;
    flex-shrink: 0;
}

.kpi-pendencias-titulo {
    font-size: 11px;
    font-weight: 600;
    color: #8a94a3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    margin-right: 4px;
}

    .kpi-pendencias-titulo em {
        font-style: normal;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        opacity: 0.85;
        margin-left: 3px;
    }

.kpi-pendencias-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
}

.kpi-pendencias-seta {
    font-size: 9px;
    color: #b6bec9;
}

.kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--cv-line);
    background: var(--cv-surface-alt);
    color: #3c4a5c;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.15s ease;
}

    .kpi-chip.kpi-somente-leitura {
        cursor: default;
    }

    .kpi-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cv-brand);
        flex-shrink: 0;
    }

    .kpi-chip:hover {
        background: #e4ecf7;
        border-color: #b9c7d8;
    }

.kpi-chip-ativo {
    background: var(--cv-brand);
    border-color: var(--cv-brand);
    color: white;
}

    .kpi-chip-ativo::before {
        background: white;
    }

    .kpi-chip-ativo .kpi-chip-valor {
        background: rgba(255,255,255,0.25);
        color: white;
    }

.kpi-chip-valor {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 11px;
    color: var(--cv-brand-deep);
    background: rgba(11,79,113,0.12);
    padding: 1px 8px;
    border-radius: 10px;
}

/* =========================================
   ÍCONE DE MODAL (SVG inline, com FCL/LCL na proa)
========================================= */

.modal-icone-wrap {
    position: relative;
    display: inline-flex;
}

.modal-icone-svg {
    display: flex;
    justify-content: center;
    color: var(--cv-brand-deep);
}

/* FCL/LCL do frete marítimo — antes escrito dentro do casco do navio, ilegível no tamanho
   de ícone de tabela. Agora é um selo por cima, canto inferior direito do ícone. */
.modal-selo-fcl-lcl {
    position: absolute;
    right: -6px;
    bottom: -4px;
    background: var(--cv-brand-deep);
    color: #fff;
    font-size: 7.5px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 3.5px;
    border-radius: 4px;
    border: 1.5px solid #fff;
    white-space: nowrap;
}

.modal-rota {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #55606e;
    white-space: nowrap;
    font-family: var(--cv-mono);
}

/* =========================================
   STATUS / SLA BADGE
========================================= */

.status-badge {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Preparação do processo: digitação + as duas rodadas de conferência documental
   (ver StatusPreparacao em ImpoProcessos.razor). */
.prep-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
}

.prep-pendente {
    background: #eef0f3;
    color: #64748b;
}

.prep-conferencia {
    background: #fef3c7;
    color: #b45309;
}

.prep-pospresenca {
    background: #fde3cf;
    color: #b0530f;
}

.prep-concluido {
    background: #d1fae5;
    color: #047857;
}

/* Status de embarque: onde a carga está fisicamente (ver StatusEmbarque em
   ImpoProcessos.razor). Segue o mesmo sistema de cor por fase já usado nos status
   operacionais — azul enquanto a carga se move, ciano quando chega e exige ação,
   violeta no despacho, índigo no fim. */
.embarque-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
}

/* Progressão de cor das quatro posições: azul (parado, aguardando embarque) -> roxo (em
   movimento) -> ciano (chegou, exige ação) -> índigo (fase final). A cor acompanha o
   avanço do processo, então bater o olho na coluna já diz em que ponto a carteira está
   sem ler os rótulos. Verde/âmbar/vermelho ficam fora de propósito — são as cores do
   canal de parametrização (flag-canal-*), que aparece na mesma linha; usar as mesmas
   cores nas duas colunas faria "posição" e "canal" parecerem o mesmo dado. */

.emb-aguardando {
    background: #dbeafe;
    color: #1d4ed8;
}

.emb-transito {
    background: #ede9fe;
    color: #6d28d9;
}

.emb-chegada {
    background: #cffafe;
    color: #0e7490;
}

.emb-desembaraco {
    background: #e0e7ff;
    color: #4338ca;
}

.emb-entregue {
    background: #fce7f3;
    color: #be185d;
}

.status-verde {
    background: #155724;
    color: white;
}

.status-azul {
    background: #d0e7ff;
    color: #004085;
}

.status-amarelo {
    background: #fff3cd;
    color: #856404;
}

.status-cinza {
    background: #e2e3e5;
    color: #6c757d;
}

.status-vermelho {
    background: #ff0000;
    color: white;
}

/* Status por fase do pipeline (degradê ordinal) — 4 matizes, uma por fase, validados quanto
   a acessibilidade (CVD e contraste) com o validador do skill de dataviz. Dentro de cada fase
   os tons vão do mais claro (início) ao mais escuro/saturado (fim) — leitura ordinal. */
.status-p1 { background: color-mix(in oklch, #2a78d6 14%, white); color: #0d366b; }
.status-p2 { background: color-mix(in oklch, #2a78d6 26%, white); color: #0d366b; }
.status-p3 { background: color-mix(in oklch, #2a78d6 38%, white); color: #0d366b; }
.status-p4 { background: color-mix(in oklch, #2a78d6 50%, white); color: #0d366b; }
.status-p5 { background: color-mix(in oklch, #2a78d6 62%, white); color: white; }
.status-p6 { background: color-mix(in oklch, #2a78d6 74%, white); color: white; }
.status-p7 { background: color-mix(in oklch, #2a78d6 86%, white); color: white; }

.status-c1 { background: color-mix(in oklch, #eb6834 16%, white); color: #7a3315; }
.status-c2 { background: color-mix(in oklch, #eb6834 30%, white); color: #7a3315; }
.status-c3 { background: color-mix(in oklch, #eb6834 44%, white); color: #7a3315; }
.status-c4 { background: color-mix(in oklch, #eb6834 58%, white); color: white; }
.status-c5 { background: color-mix(in oklch, #eb6834 72%, white); color: white; }
.status-c6 { background: color-mix(in oklch, #eb6834 86%, white); color: white; }

.status-f1 { background: color-mix(in oklch, #4a3aa7 16%, white); color: #241c52; }
.status-f2 { background: color-mix(in oklch, #4a3aa7 30%, white); color: #241c52; }
.status-f3 { background: color-mix(in oklch, #4a3aa7 44%, white); color: white; }
.status-f4 { background: color-mix(in oklch, #4a3aa7 58%, white); color: white; }
.status-f5 { background: color-mix(in oklch, #4a3aa7 72%, white); color: white; }
.status-f6 { background: color-mix(in oklch, #4a3aa7 86%, white); color: white; }

.status-encerrado { background: #008300; color: white; }

/* =========================================
   CÉLULAS DE MODAL E STATUS/SLA (tabela de processos)
========================================= */

/* Invoice: uma linha por invoice ("número - moeda - valor"), até 3 — a 4ª em diante vira
   "+N" na última linha. Trava em 3 linhas de altura (rola dentro da célula) em vez de
   esticar a linha inteira da tabela. white-space:pre-line respeita os \n entre invoices
   (ver FormatarInvoiceComposto em ExportColunas.cs). Título tem o texto completo pra quem
   passar o mouse. */
.celula-invoice {
    max-height: calc(1.35em * 3);
    line-height: 1.35;
    overflow-y: auto;
    display: block;
    white-space: pre-line;
    word-break: break-word;
}

/* Espelho da barra de rolagem horizontal no topo da tabela (scroll-topo.js) — mesma
   largura rolável do contêiner de baixo, sincronizada nos dois sentidos. Só existe
   conteúdo (o .scroll-topo-barra-interno, com a largura real) pra a barra ter o que
   rolar; a altura é só a barra em si, sem exibir nada por cima da tabela. */
.scroll-topo-barra {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    display: none;
}

.scroll-topo-barra-interno {
    height: 1px;
}

/* Célula pode ficar mais estreita que o texto — em vez de cortar com "...", a linha quebra,
   até no máximo 3 (a 4ª em diante é cortada com "...", pelo line-clamp). Compartilhado entre
   a tela interna e o Portal — usado só nas células de texto simples (colunas extras do
   catálogo, sem markup próprio): os widgets de célula (badges, ícones, linhas empilhadas
   como a coluna Logística) já têm layout interno e o line-clamp, pensado pra um fluxo de
   texto só, bagunçaria eles. Sem isso, o piso de arrasto (column-resize.js) tinha que ser do
   tamanho do texto pra não sumir a informação. */
.celula-texto-quebra {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.celula-modal {
    text-align: center;
    padding: 6px 8px !important;
}

/* Badge da coluna "Aut. Embarque" na tela interna — mesmas 3 cores do ícone de status
   equivalente no Portal (.portal-autorizacao-icone em PortalProcessos.razor.css), só que
   em formato pílula com o texto por extenso: aqui a coluna tem espaço de sobra, lá não. */
.badge-autorizacao-embarque {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Mesmo badge usado como <button> (coluna "Numerário Externo", clicável) — reseta o que o
   navegador aplicaria por padrão a um <button>, sem duplicar as 3 cores acima. */
button.badge-autorizacao-embarque {
    font-family: inherit;
    cursor: pointer;
}

/* Badge menor, pra caber ao lado do nome do exportador (célula agrupada) sem estourar a
   largura da coluna — mesmas cores/estados, só padding/fonte reduzidos. */
.badge-autorizacao-embarque-compacto {
    padding: 2px 7px;
    font-size: 9.5px;
    flex-shrink: 0;
}

/* Exportador + País de origem (2ª linha) à esquerda, badge/botão de Autorização de Embarque
   grudado na direita da célula — mesmo padrão de agrupamento de Despachante+OutraReferência
   (linha em vez de empilhado, porque aqui tem um controle junto). Compartilhado entre a tela
   interna (ImpoProcessos.razor) e o Portal (PortalProcessos.razor). */
/* Coluna "Arquivos" da tela interna — mesmo conceito do 📎 do Portal, só que aqui já mostra
   se HÁ ou não documento (a contagem vem de consultaContagemArquivosEmLote), porque o
   account precisa saber antes de abrir o processo se falta algo. */
.celula-arquivos-interno {
    text-align: center;
}

.icone-arquivos-ok,
.icone-arquivos-aviso {
    display: inline-flex;
    font-size: 14px;
    cursor: default;
}

.icone-arquivos-ok {
    opacity: 0.55;
}

.icone-arquivos-aviso {
    color: #b5423a;
}

/* Até 3 linhas de mercadoria (interno e Portal) — cada uma um pouco mais compacta que o
   texto normal da célula, pra caber as três sem esticar demais a altura da linha. */
.celula-mercadoria-linha {
    font-size: 11.5px;
    line-height: 1.35;
}

    .celula-mercadoria-linha + .celula-mercadoria-linha {
        margin-top: 2px;
    }

.celula-exportador-agrupada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Ícone de ajuda no cabeçalho da coluna Exportador — a Autorização de Embarque deixou de ser
   coluna própria, virou o botão dentro desta célula (ver .celula-exportador-agrupada); o
   título completo já está no title="" do <th>, isto aqui só sinaliza "passe o mouse". */
.th-exportador-ajuda {
    margin-left: 3px;
    opacity: 0.7;
    font-size: 11px;
    cursor: help;
}

.badge-autorizacao-embarque.aut-embarque-pendente {
    background: #f3f6fa;
    border-color: #d8dee6;
    color: #8a94a3;
}

.badge-autorizacao-embarque.aut-embarque-ok {
    background: #e9f7ee;
    border-color: #bfe6cd;
    color: #1e8a4c;
}

.badge-autorizacao-embarque.aut-embarque-alta {
    background: #fdeeea;
    border-color: #f3c8c3;
    color: #c0392b;
}

/* Só usado pelo Numerário Externo — "Solicitado ao cliente" é um 4º estado que os outros
   badges de 3 cores (pendente/ok/alta) não tinham. */
.badge-autorizacao-embarque.aut-embarque-solicitado {
    background: #eaf2fb;
    border-color: #c3d9f3;
    color: #2266b0;
}

/* Etiquetas coloridas no Portal — só leitura (o account é quem cadastra/edita, na tela
   interna), mesmo visual de .etiqueta-tag/.etiquetas-lista lá (CSS isolado, não alcança
   aqui), mas sem cursor de clique. */
.celula-etiquetas .etiquetas-lista {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}

.celula-etiquetas .etiqueta-tag {
    display: inline-block;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Valor informado do numerário externo, abaixo do badge de status — mesma célula, tela
   interna (ImpoProcessos.razor) e Portal (PortalProcessos.razor). */
.numerario-externo-valor {
    margin-top: 3px;
    font-family: var(--cv-mono, "Cascadia Mono", ui-monospace, monospace);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #5b6b78;
    white-space: nowrap;
}

/* Célula da coluna Numerário Externo quando o processo tem despachante próprio (nós) — não
   se aplica, segue o Numerário normal do iData. Mesma célula, tela interna e Portal. */
.numerario-externo-na {
    font-size: 11.5px;
    color: #8a94a3;
}

.th-modal {
    text-align: center !important;
}

/* Coluna "Logística" (ImpoProcessos.razor): modal+rota, posição atual e atualização, uma
   embaixo da outra na mesma célula — a pergunta "como a carga está indo" respondida numa
   olhada só, sem passear entre três colunas separadas. */
.celula-logistica {
    padding: 8px 10px !important;
    vertical-align: middle;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ícone sempre à esquerda — é também o botão de atualização (substitui a antiga terceira
   linha "Atualizar"): roxo pede ação, azul confirma que já foi visto. Mesma cor em qualquer
   modal, porque o sinal é de atendimento, não de transporte. */
.log-icone-atualizar {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

    .log-icone-atualizar svg {
        width: 27px;
        height: 27px;
    }

    .log-icone-atualizar:hover { opacity: 0.78; }

.log-icone-roxo { color: #7C3AED; }
.log-icone-azul { color: #2563EB; }

/* Badge de posição reaproveita as mesmas cores do ícone: roxo/azul não é mais um estado à
   parte, é o mesmo sinal de atendimento (precisa atualizar / já visto) — clicável também,
   igual ao ícone, então tanto faz onde o usuário clique na célula. */
.embarque-badge.log-icone-roxo,
.embarque-badge.log-icone-azul {
    color: white;
    cursor: pointer;
}

.embarque-badge.log-icone-roxo { background: #7C3AED; }
.embarque-badge.log-icone-azul { background: #2563EB; }

.embarque-badge.log-icone-roxo:hover,
.embarque-badge.log-icone-azul:hover { opacity: 0.85; }

.log-texto {
    min-width: 0;
    flex: 1;
}

.log-linha-modal {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Código do modal (LCL/FCL/AÉR/ROD/COR) — mesmo peso visual do rótulo "CÓDIGO | ORIGEM →
   DESTINO" do mockup, sem repetir o ícone (que já foi pro lado esquerdo da célula). */
.log-modal-codigo {
    font-size: 12px;
    font-weight: 700;
    color: var(--cv-brand-deep);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    background: #eef1f6;
    border-radius: 5px;
    padding: 1px 6px;
}

.log-modal-rota {
    font-size: 12.5px;
    font-weight: 600;
    color: #55606e;
    font-family: var(--cv-mono);
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-linha-posicao {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Classificação (Importação/Exportação) abreviada, ao lado do selo de posição atual —
   coluna "Posição Atual" do fluxo de Agenciamento (AgenciamentoProcessosFluxo.razor). */
.log-operacao-abrev {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #7c8a97;
    background: #eef0f4;
    border-radius: 4px;
    padding: 1px 4px;
    flex-shrink: 0;
}

.celula-status-sla {
    white-space: nowrap;
}

/* Linha do SLA: só existe no DOM quando há data — nunca há bolha de cor sem conteúdo. */
.status-sla-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 10.5px;
    color: #6b7684;
}

.sla-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2e7d5b;
}

.sla-dot-expirado {
    background: #b5423a;
}

.sla-data {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
}

.sla-atraso {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #b5423a;
}

/* =========================================
   COLUNAS DE ETAPA (fluxo de 12 etapas)
========================================= */

.th-etapa {
    text-align: center !important;
    padding: 8px 3px !important;
    width: 58px;
    max-width: 58px;
    cursor: help;
    /* Ordenar/filtrar viram overlay absoluto (ver regra abaixo) — sem isto a altura da
       célula variava com o conteúdo deles e esticava a linha do cabeçalho INTEIRA (toda
       tabela usa uma única altura de linha), empurrando o texto das colunas normais pro
       topo com um vão vazio embaixo. Ícone+nome (únicos elementos que sobram no fluxo
       normal) ficam sempre do mesmo tamanho, e a célula acompanha — mesma altura das
       colunas de texto ao lado, alinhada. */
    overflow: visible;
}

.th-etapa-icone {
    display: block;
    font-size: 15px;
    line-height: 1.2;
    transition: transform 0.12s ease;
}

/* Ordenar/filtrar da etapa — fora do fluxo (absolute), escondidos até passar o mouse.
   Ícone+nome sobem (ver .th-etapa:hover abaixo) pra abrir espaço visual pra eles embaixo,
   mas a CÉLULA em si não muda de tamanho — é só o conteúdo se reorganizando por cima do
   mesmo espaço, dentro da largura de 58px de sempre. */
.th-etapa .th-filtro-btn,
.th-etapa .th-sort-btn,
.th-etapa .th-opcoes-btn {
    position: absolute;
    bottom: 3px;
    width: 20px;
    height: 20px;
    margin: 0;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
}

    .th-etapa .th-sort-btn {
        left: 4px;
    }

    .th-etapa .th-filtro-btn {
        right: 4px;
    }

    .th-etapa:hover .th-filtro-btn,
    .th-etapa:hover .th-sort-btn {
        opacity: 1;
        pointer-events: auto;
    }

.th-etapa-nome {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    color: var(--cv-brand, #0b4f71);
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    line-height: 1.25;
    transition: transform 0.12s ease;
}

/* Etapa já ordenada/filtrada continua com o botão sempre visível (herda de .th-sort-btn-
   ativo/.th-filtro-btn-ativo, que zeram opacity:0 globalmente) — só a REGRA DE POSIÇÃO daqui
   precisa reforçar por cima, já que a etapa usa position:absolute em vez do fluxo normal. */
.th-etapa .th-sort-btn-ativo,
.th-etapa .th-filtro-btn-ativo {
    opacity: 1 !important;
    pointer-events: auto;
}

    .th-etapa:hover .th-etapa-icone,
    .th-etapa:hover .th-etapa-nome {
        transform: translateY(-9px);
    }

.celula-etapa {
    text-align: center;
    padding: 6px 8px !important;
}

/* Data compacta (previsão até virar confirmação) só nas etapas ETD/ETA — abaixo do
   selo, fonte mínima, sem crescer a altura da linha na prática. */
.etapa-data-compacta {
    display: block;
    margin-top: 1px;
    font-size: 8.5px;
    line-height: 1.1;
    color: #8a94a3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Legenda da cor do canal na coluna Etapas da lista — mesma ideia da faixa do Processo
   Detalhe (.etapa-strip-canal-legenda), com a cor do próprio flag-canal-* (definido mais
   abaixo neste arquivo — vence .etapa-data-compacta por ordem, mesma especificidade).
   display:block (não inline-block) — precisa continuar quebrando linha abaixo do ícone, como
   .etapa-data-compacta já fazia; inline-block colava do lado do ícone na coluna estreita
   (58px, ver LarguraMinimaEtapa), espremendo tudo numa linha só e "sumindo" o texto. width
   fit-content + margin auto centraliza o fundo colorido só no tamanho do texto. */
.etapa-canal-legenda {
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 3px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ETD/ETA empilham Previsto + Confirmado na mesma célula (2 linhas), em vez de
   4 colunas separadas — 4 colunas ficou confuso demais na prática. */
.etapa-datas-empilhadas {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1px;
    line-height: 1.15;
}

.etapa-data-linha {
    font-size: 8.5px;
    color: #8a94a3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.etapa-data-linha-confirmada {
    color: #1f2937;
    font-weight: 600;
}

.celula-etapa-clicavel {
    cursor: pointer;
}

.celula-etapa-clicavel:hover .etapa-marca {
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
}

/* =========================================
   MARCAS DE ETAPA (fluxo de 12 etapas)
========================================= */

.etapa-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Mesma forma de .etapa-marca, como <button> — usado onde a marca em si é a ação (hoje só
   o estorno da liberação para Digitação). */
.etapa-marca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: none;
    cursor: pointer;
    padding: 0;
}

.etapa-concluida {
    background: #d1fae5;
    color: #047857;
}

.etapa-andamento {
    background: #fef3c7;
    color: #b45309;
}

.etapa-pendente {
    background: #eef0f3;
    color: #9aa4b2;
}

/* Etapa "Vencimento Armazenagem" — informativa, nunca conclui, só muda de cor conforme a
   data se aproxima/vence (mesma paleta de .badge-venc-* em ImpoProcessos.razor.css). */
.etapa-venc-verde {
    background: #d4edda;
    color: #155724;
}

.etapa-venc-amarelo {
    background: #fff3cd;
    color: #856404;
}

.etapa-venc-vermelho {
    background: #f8d7da;
    color: #721c24;
}

.etapa-venc-indefinido {
    background: #eef0f3;
    color: #9aa4b2;
}

/* Etapa em aberto com prazo já vencido (hoje só a Digitação usa, ver ImpoProcessos.razor/
   EtapasProcessoStrip.razor) — vermelho cheio, não o âmbar de "em andamento" comum, pra
   destacar de propósito entre as outras etapas da linha. */
.etapa-atrasada {
    background: #fee2e2;
    color: #b5423a;
    font-weight: 700;
}

.etapa-data-atrasada {
    color: #b5423a;
    font-weight: 700;
}

.etapa-na {
    background: transparent;
    color: #c3ccd8;
}

/* Inspeção MAPA: esporádica, sem gatilho no processo. "Informada" pede ação (agendar),
   por isso âmbar; "Agendada" é azul, já encaminhada. Sem inspeção usa .etapa-na e
   concluída usa .etapa-concluida — o padrão das demais etapas. */
.mapa-informada {
    background: #fef3c7;
    color: #b45309;
}

.mapa-agendada {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Flag da etapa Canal: cor sempre reflete o canal do iData (Verde/Amarelo/Vermelho),
   independente de já ter desembaraçado — o ícone (✓/•/○) dentro é que mostra o
   desembaraço. As duas informações convivem no mesmo selo. */
.flag-canal-verde {
    background: #d1fae5;
    color: #047857;
}

.flag-canal-amarelo {
    background: #fef3c7;
    color: #b45309;
}

.flag-canal-vermelho {
    background: #fee2e2;
    color: #b91c1c;
}

.flag-canal-cinza {
    background: #e2e3e5;
    color: #4b5563;
}

.flag-canal-vazio {
    background: #eef0f3;
    color: #9aa4b2;
}

/* Legenda da cor do canal, no lugar do nome da etapa (mesma linha logo abaixo do ícone), na
   faixa de etapas do Processo Detalhe (EtapasProcessoStrip.razor) — reaproveita o mesmo par
   bg/color do selo do ícone (flag-canal-*), só sobrescrevendo a cor herdada de
   .etapa-strip-nome (var(--pd-brand)). */
.etapa-strip-canal-legenda {
    border-radius: 4px;
    padding: 0 4px;
}

/* =========================================
   ETIQUETAS (estilo categoria do Outlook) — MOVIDO de ImpoProcessos.razor.css (CSS isolado):
   o editor de etiquetas é usado tanto na lista (ImpoProcessos.razor) quanto no Processo
   Detalhe (ProcessoDetalhe.razor), componentes diferentes que isolamento do Blazor nunca
   compartilha — precisa estar aqui pros dois alcançarem.
========================================= */

.etiquetas-lista {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}

.etiqueta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etiqueta-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    flex: none;
    opacity: 0.35;
    filter: grayscale(1);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

    .etiqueta-add-icon:hover {
        opacity: 0.9;
        filter: grayscale(0);
        background: #f3f6fa;
    }

/* O editor de etiqueta é um modal (ver .etiqueta-modal) — dentro da célula ele era
   cortado pelo max-width da coluna e pelo overflow:hidden do redimensionamento. */
.etiqueta-modal {
    width: 360px;
    max-width: 92vw;
}

.etiqueta-visivel-cliente {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 400;
    color: #5b6b78;
    cursor: pointer;
}

    .etiqueta-visivel-cliente input[type="checkbox"] {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }

.btn-etiqueta-excluir {
    margin-right: auto;
    border: 1px solid #f3c8c3;
    background: white;
    color: #b5423a;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-etiqueta-excluir:hover {
        background: #fdf2f1;
    }

.paleta-cores {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.swatch {
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    outline: 1px solid #d7dee6;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.swatch-selecionado {
    outline: 2px solid #1a202c;
}

/* =========================================
   MENU DE COLUNAS (escolha de colunas visíveis por usuário)
========================================= */

.menu-colunas {
    position: relative;
}

.menu-colunas-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    background: white;
    border: 1px solid var(--cv-line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
}

.menu-colunas-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--cv-ink);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

    .menu-colunas-item:hover {
        background: var(--cv-surface-alt);
    }

.menu-colunas-grupo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8a94a3;
    padding: 8px 6px 2px;
    border-top: 1px solid var(--cv-line);
    margin-top: 2px;
}

    .menu-colunas-grupo:first-child {
        border-top: none;
        margin-top: 0;
        padding-top: 2px;
    }

/* =========================================
   TÍTULO DA PÁGINA
========================================= */

.pagina-titulo {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--cv-ink);
    letter-spacing: -0.2px;
}

/* =========================================
   AÇÕES DA TABELA (Colunas / Exportar) — MODAIS

   Modal com overlay fixo, não dropdown ancorado: a versão em menu suspenso dependia de
   position:relative no contêiner e do CSS isolado chegar ao elemento — acabava aparecendo
   depois da tabela inteira.
========================================= */

/* Vão da direita da fileira de cards (KpiCardsProcessos.AcoesContent) — a fileira própria
   que esses botões tinham antes (com texto) virou uma barra branca quase vazia depois que os
   filtros também vieram pra cá; aqui é só ícone, do tamanho dos cards ao lado. */
.kpi-acoes-embutidas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.btn-acao-tabela-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 10px;
    background: #ffffff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .btn-acao-tabela-icone:hover {
        background: var(--cv-surface-alt, #f3f6fa);
        border-color: var(--cv-brand, #0b4f71);
        transform: translateY(-2px);
    }

    .btn-acao-tabela-icone:focus-visible {
        outline: 3px solid #c8862a;
        outline-offset: 1px;
    }

.btn-acao-tabela-icone-primario {
    background: var(--cv-brand, #0b4f71);
    border-color: var(--cv-brand, #0b4f71);
}

    .btn-acao-tabela-icone-primario:hover {
        background: var(--cv-brand-deep, #073853);
        border-color: var(--cv-brand-deep, #073853);
    }

.modal-tabela-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 26, 36, 0.45);
}

.modal-tabela {
    display: flex;
    flex-direction: column;
    width: 620px;
    max-width: 100%;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

.modal-tabela-estreito {
    width: 440px;
}

.modal-tabela-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cv-line, #d8dee6);
}

    .modal-tabela-header h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--cv-ink, #16232e);
    }

.modal-tabela-fechar {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #8a94a3;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

    .modal-tabela-fechar:hover {
        background: var(--cv-surface-alt, #f3f6fa);
        color: var(--cv-ink, #16232e);
    }

.modal-tabela-corpo {
    padding: 16px 20px;
    overflow-y: auto;
}

.modal-tabela-nota {
    margin: 0 0 14px;
    font-size: 11.5px;
    color: #8a94a3;
}

.modal-tabela-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--cv-line, #d8dee6);
    background: var(--cv-surface-alt, #f3f6fa);
}

.modal-tabela-confirmar {
    border: none;
    border-radius: 8px;
    background: var(--cv-brand, #0b4f71);
    color: #ffffff;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .modal-tabela-confirmar:hover {
        background: var(--cv-brand-deep, #073853);
    }

    .modal-tabela-confirmar:disabled {
        opacity: 0.5;
        cursor: default;
    }

/* Visualizações salvas — lista de nomes clicáveis (aplica na hora) + campo pra salvar a
   atual com um nome novo. Mesmo modal-tabela* das Colunas/Exportar ao lado. */
.visualizacoes-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.visualizacoes-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 2px 8px;
    border-radius: 6px;
}

    .visualizacoes-linha:hover {
        background: #f3f6fa;
    }

.visualizacoes-nome {
    background: none;
    border: none;
    text-align: left;
    padding: 6px 0;
    font-size: 13px;
    color: #16232e;
    cursor: pointer;
    flex: 1;
}

    .visualizacoes-nome:hover {
        color: var(--cv-brand, #0b4f71);
        text-decoration: underline;
    }

.visualizacoes-remover {
    background: none;
    border: none;
    color: #9aa6b2;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
}

    .visualizacoes-remover:hover {
        background: #fdeeea;
        color: #c0392b;
    }

.visualizacoes-salvar {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eef0f3;
}

    .visualizacoes-salvar .liberar-modal-input {
        flex: 1;
    }

/* Colunas: grade de caixas, bem mais legível que a lista estreita do dropdown */
.modal-colunas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px 12px;
}

/* Linha = checkbox de visibilidade + as duas ações que antes viviam no ⋮ do cabeçalho
   (Fixar/Ajustar largura) — saíram de lá porque um terceiro ícone não cabia direito na
   coluna estreita de etapa, e aqui cada coluna já tem uma linha própria de sobra. */
.modal-colunas-linha {
    display: flex;
    align-items: center;
    gap: 2px;
}

.modal-colunas-item {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--cv-ink, #16232e);
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
}

    .modal-colunas-item:hover {
        background: var(--cv-surface-alt, #f3f6fa);
    }

.modal-colunas-acao {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #8a94a3;
    cursor: pointer;
}

.modal-colunas-acao:hover {
    background: var(--cv-surface-alt, #f3f6fa);
    color: var(--cv-ink, #16232e);
}

.modal-colunas-grupo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8a94a3;
    padding: 14px 6px 4px;
    border-top: 1px solid var(--cv-line, #d8dee6);
    margin-top: 10px;
}

/* Exportar: cada opção explica o que faz, em vez de só um rótulo */
.modal-opcao {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .modal-opcao:hover {
        border-color: var(--cv-brand, #0b4f71);
        background: var(--cv-surface-alt, #f3f6fa);
    }

    .modal-opcao:focus-visible {
        outline: 3px solid #c8862a;
        outline-offset: 1px;
    }

.modal-opcao-icone {
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
}

.modal-opcao-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.modal-opcao-nome {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cv-ink, #16232e);
}

.modal-opcao-desc {
    font-size: 11.5px;
    color: #6b7684;
    line-height: 1.4;
}

/* Reordenar colunas arrastando o cabeçalho (column-drag.js).
   Sem cursor "grab" fixo de propósito: o cabeçalho já usa o clique pra ordenar, e trocar
   o cursor sugeriria que arrastar é a ação principal. O retorno só aparece durante o arrasto. */
.th-drag-origem {
    opacity: 0.45;
}

.th-drag-alvo {
    box-shadow: inset 3px 0 0 0 #c8862a;
}

/* ==========================================================================
   Arquivos do processo (Components/Shared/ArquivosProcesso.razor)

   Global, não isolado: a mesma lista aparece na tela interna e no Portal do
   Cliente, e o padrão do projeto é manter o visual compartilhado aqui para as
   duas telas não divergirem.
   ========================================================================== */

.arquivos-bloco {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.arquivos-vazio {
    padding: 22px 14px;
    text-align: center;
    color: #6b7785;
    font-size: 0.86rem;
    background: #f7f9fb;
    border: 1px dashed #d8e0e8;
    border-radius: 8px;
}

.arquivos-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7785;
    margin-bottom: 6px;
}

.arquivos-grupo-qtd {
    background: #e8edf2;
    color: #56626f;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.68rem;
    letter-spacing: 0;
}

.arquivo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e3e9ee;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 5px;
    transition: border-color .15s, box-shadow .15s;
}

.arquivo-item:hover {
    border-color: #b9cbdb;
    box-shadow: 0 1px 4px rgba(20, 40, 70, .08);
}

.arquivo-icone {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

/* min-width:0 é o que permite o text-overflow do nome funcionar dentro do flex. */
.arquivo-info {
    flex: 1;
    min-width: 0;
}

.arquivo-nome {
    font-size: 0.83rem;
    color: #22303d;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arquivo-meta {
    font-size: 0.72rem;
    color: #7d8894;
    margin-top: 2px;
}

.arquivo-sep {
    margin: 0 3px;
    color: #c3ccd5;
}

.arquivo-restrito {
    color: #9a6a12;
    background: #fdf3dd;
    border-radius: 4px;
    padding: 0 5px;
    font-weight: 600;
}

.arquivo-acoes {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.arquivo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid #cfdae4;
    color: #37485a;
    background: #f6f9fc;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.arquivo-btn:hover {
    background: #eaf1f8;
    border-color: #9db6cd;
    color: #1d2c3a;
    text-decoration: none;
}

.arquivo-btn-baixar {
    border-color: #0b4f71;
    color: white;
    background: #0b4f71;
}

    .arquivo-btn-baixar:hover {
        background: #073853;
        border-color: #073853;
        color: white;
    }

@media (max-width: 640px) {
    .arquivo-item {
        flex-wrap: wrap;
    }

    .arquivo-acoes {
        width: 100%;
        justify-content: flex-end;
    }
}

/* --------------------------------------------------------------------------
   Modal de documentos no Portal do Cliente

   Overlay com position:fixed, mesmo padrão que resolveu os menus da tela
   interna: não depende de ancestral posicionado nem de atributo de escopo,
   então não fica preso dentro da célula de uma tabela que rola.
   -------------------------------------------------------------------------- */

.th-arquivos,
.celula-arquivos {
    width: 44px;
    text-align: center;
}

.portal-btn-arquivos {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.3;
    opacity: .55;
    transition: opacity .15s, background .15s, border-color .15s;
}

.portal-btn-arquivos:hover {
    opacity: 1;
    background: #eef4fa;
    border-color: #c6d6e5;
}

.portal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 28, 40, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.portal-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(10, 25, 45, .3);
    width: min(560px, 100%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.portal-modal-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #e6ecf2;
}

.portal-modal-eyebrow {
    display: block;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7d8894;
    margin-bottom: 2px;
}

.portal-modal-topo strong {
    font-size: 1rem;
    color: #1d2c3a;
}

.portal-modal-fechar {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: #7d8894;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
}

.portal-modal-fechar:hover {
    background: #f0f4f8;
    color: #22303d;
}

.portal-modal-corpo {
    padding: 16px 18px 18px;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Aviso de agendamento da inspeção MAPA (modal de etapa em ImpoProcessos)
   -------------------------------------------------------------------------- */

/* Marca a procedência do local preenchido: veio do recinto no iData ou é uma
   aproximação (terminal/porto/praça de chegada) que o usuário deve confirmar. */
.mapa-origem-campo {
    display: inline-block;
    margin-left: 7px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #6b7785;
    background: #eef2f6;
    border-radius: 4px;
    padding: 1px 7px;
}

.mapa-envio {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e3e9ee;
}

.mapa-envio-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    color: #22303d;
    text-transform: none;
    letter-spacing: 0;
}

.mapa-envio-toggle input {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #1f6feb;
}

.mapa-envio-corpo {
    margin-top: 12px;
}

.mapa-envio-nota {
    margin: 5px 0 12px;
    font-size: 0.72rem;
    color: #7d8894;
    line-height: 1.45;
}

.mapa-envio-mensagem {
    margin: 10px 0 0;
    font-size: 0.76rem;
    padding: 8px 11px;
    border-radius: 6px;
    line-height: 1.45;
}

.mapa-envio-mensagem.sucesso {
    background: #e9f5ee;
    color: #1d6b45;
}

.mapa-envio-mensagem.erro {
    background: #fdeceb;
    color: #9a2f27;
}



/* ==========================================================================
   Modal de etapa / inspeção MAPA — chassi compartilhado

   GLOBAL, não isolado, e isso é obrigatório: estas regras vestem também o
   Components/Shared/InspecaoMapaModal.razor, que é renderizado tanto pela tela
   de Processos quanto pelo Processo Detalhe. CSS isolado de página não alcança
   a marcação de um componente filho — as regras ficavam com o escopo da página
   e o modal saía sem overlay, sem card e sem estilo de campo nas duas telas.

   Antes de mover para cá elas viviam em ImpoProcessos.razor.css, o que
   funcionava enquanto a marcação do modal estava dentro daquela página. Ao
   extrair o modal para Shared/, pararam de alcançá-lo. Se algum dia outro modal
   nascer aqui, a mesma regra vale: chassi compartilhado mora neste arquivo.
   ========================================================================== */

.etapa-popover-aviso {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.4;
}

.etapa-popover-atalho {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0b4f71;
    text-decoration: none;
    margin: 0 0 8px;
}

    .etapa-popover-atalho:hover {
        text-decoration: underline;
    }

.liberar-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 5vh 16px;
    box-sizing: border-box;
    z-index: 2000;
}

.liberar-modal {
    background: white;
    border-radius: 14px;
    width: 420px;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    font-family: 'Segoe UI', sans-serif;
}

.liberar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
}

.liberar-modal-header-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

    .liberar-modal-header h3 {
        margin: 0;
        font-size: 15px;
        color: #1f2937;
    }

.liberar-modal-fechar {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #8a94a3;
    padding: 4px 8px;
    border-radius: 6px;
}

    .liberar-modal-fechar:hover {
        background: #f3f6fa;
        color: #1f2937;
    }

.liberar-modal-corpo {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mini-painel de opções da coluna (⋮ no cabeçalho) — bem mais estreito que os modais de
   formulário, é só uma lista de duas ações. */
.th-opcoes-painel {
    width: min(300px, 92vw);
    max-width: none;
}

.th-opcoes-corpo {
    gap: 2px;
}

.th-opcoes-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3742;
    text-align: left;
    cursor: pointer;
}

.th-opcoes-item:hover {
    background: #f3f6fa;
}

.th-opcoes-item-nota {
    font-size: 11px;
    font-weight: 400;
    color: #8a94a0;
}

    .liberar-modal-corpo label {
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin-top: 10px;
    }

.liberar-modal-input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.liberar-modal-textarea {
    resize: vertical;
    min-height: 60px;
}

/* Seletor de moeda + valor (Numerário Externo) — nasce em BRL (era a única opção antes desta
   coluna existir), mas o account pode trocar pro despachante que cobra em outra moeda. Abaixo,
   o valor por extenso com separador de milhar (input type=number não formata milhar sozinho,
   então isto é só pra ajudar a conferir o que foi digitado antes de solicitar). */
.valor-com-moeda {
    display: flex;
    align-items: center;
    gap: 6px;
}

.valor-com-moeda-select {
    flex: none;
    width: 72px;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    font-family: inherit;
    color: #16232e;
    background: white;
}

.valor-com-moeda .liberar-modal-input {
    flex: 1;
}

.valor-com-moeda-formatado {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7684;
    font-variant-numeric: tabular-nums;
}

.liberar-modal-nota {
    font-size: 11px;
    color: #8a94a3;
    margin: 4px 0 0;
}

/* Histórico de comentários da etapa (modal de marcação — ver AbrirPopoverEtapa em
   ImpoProcessos.razor). O comentário digitado ia pro log (PainelImpo_ProcessoEtapaEvento,
   consultaHistoricoEtapa) mas nunca voltava pra tela: reabrir pra editar mostrava o campo
   sempre em branco, mesmo com comentários salvos antes. Este card só aparece quando existe
   pelo menos um comentário no histórico dessa etapa. */
.etapa-historico-card {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef0f3;
}

.etapa-historico-titulo {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #55606e;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.etapa-historico-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}

    .etapa-historico-lista li {
        background: #f7f8fa;
        border-radius: 8px;
        padding: 8px 10px;
    }

.etapa-historico-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10.5px;
    color: #8a94a3;
    margin-bottom: 3px;
}

.etapa-historico-texto {
    font-size: 12.5px;
    color: var(--cv-ink, #16232e);
    white-space: pre-wrap;
    word-break: break-word;
}

.liberar-modal-erro {
    margin: 0 20px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #a02c22;
    font-size: 12.5px;
}

.liberar-modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #eef0f3;
    flex-shrink: 0;
}

.liberar-modal-cancelar {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}

    .liberar-modal-cancelar:hover {
        background: #f3f6fa;
    }

.liberar-modal-confirmar {
    border: none;
    /* Cores fixas (não var(--cv-brand)): este modal fica fora da div .layout-processos
       no DOM (é renderizado depois dela, como overlay position:fixed), então não herda
       as custom properties declaradas ali — usar var() aqui deixava o botão sem
       background (texto branco em cima de nada = invisível). */
    background: linear-gradient(135deg, #0b4f71, #073853);
    color: white;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .liberar-modal-confirmar:hover {
        filter: brightness(1.05);
    }

.liberar-modal-confirmar:disabled {
    background: #b7c2cc;
    cursor: not-allowed;
}

    .liberar-modal-confirmar:disabled:hover {
        filter: none;
    }

/* Data de etapa ainda não concluída — itálico.

   Global de propósito: veste tanto .etapa-data-compacta (coluna "Etapas" da
   tabela de Processos) quanto .etapa-strip-data (faixa do Processo Detalhe),
   que têm classes-base diferentes mas precisam da mesma distinção.

   O que ela separa: uma data sob um check concluído é o dia em que o fato
   aconteceu; sob um ícone pendente ou em andamento é previsão ou agendamento —
   ETD/ETA antes da confirmação, o dia marcado da inspeção MAPA, ou uma data que
   o iData já tem enquanto o checklist ainda não fechou (Armazenagem é o caso
   comum). Sem isso as duas se leem igual. */
.etapa-data-prevista {
    font-style: italic;
}

/* ==========================================================================
   Integração — tela de inspeção dos eventos recebidos (/Integracao/Eventos)
   ========================================================================== */

.integracao-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.integracao-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.integracao-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7d8894;
}

.integracao-header h1 {
    margin: 2px 0 0;
    font-size: 1.5rem;
    color: #1d2c3a;
}

.integracao-btn {
    border: 1px solid #cfdae4;
    background: #f6f9fc;
    color: #37485a;
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.integracao-btn:hover:not(:disabled) { background: #eaf1f8; border-color: #9db6cd; }
.integracao-btn:disabled { opacity: .6; cursor: default; }

.integracao-endpoint {
    background: #f7f9fc;
    border: 1px solid #dde5ed;
    border-left: 4px solid #c8862a;
    border-radius: 8px;
    padding: 14px 16px;
}

.integracao-endpoint-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.integracao-metodo {
    background: #1d4e86;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 4px;
}

.integracao-endpoint code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.84rem;
    color: #1d2c3a;
    word-break: break-all;
}

.integracao-nota {
    margin: 9px 0 0;
    font-size: 0.78rem;
    color: #5b6874;
    line-height: 1.55;
}

.integracao-nota code {
    background: #eef3f8;
    border: 1px solid #dde5ed;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.95em;
}

.integracao-vazio {
    padding: 26px 18px;
    text-align: center;
    color: #6b7785;
    font-size: 0.86rem;
    background: #f7f9fb;
    border: 1px dashed #d8e0e8;
    border-radius: 8px;
    line-height: 1.6;
}

.integracao-lista { display: flex; flex-direction: column; gap: 7px; }

.integracao-evento {
    border: 1px solid #e3e9ee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.integracao-evento-topo {
    width: 100%;
    display: grid;
    grid-template-columns: 92px 120px 150px 1fr 24px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.integracao-evento-topo:hover { background: #f6f9fc; }

.integracao-sit {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    text-align: center;
}

.integracao-sit-recebido   { background: #e6f0fb; color: #1c4e86; }
.integracao-sit-processado { background: #e6f4ec; color: #1d6b45; }
.integracao-sit-ignorado   { background: #eef2f6; color: #6b7785; }
.integracao-sit-erro       { background: #fdeceb; color: #9a2f27; }

.integracao-origem { font-size: 0.8rem; font-weight: 600; color: #22303d; }

.integracao-quando {
    font-size: 0.76rem;
    color: #7d8894;
    font-variant-numeric: tabular-nums;
}

.integracao-resumo {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.74rem;
    color: #6b7785;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.integracao-chevron { color: #9aa6b2; font-size: 0.8rem; }

.integracao-evento-corpo {
    padding: 14px 16px 16px;
    border-top: 1px solid #eef2f6;
    background: #fbfcfd;
}

.integracao-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 14px;
}

.integracao-meta dt {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a94a0;
    margin-bottom: 2px;
}

.integracao-meta dd {
    margin: 0;
    font-size: 0.82rem;
    color: #22303d;
    font-variant-numeric: tabular-nums;
}

.integracao-evento-corpo h3 {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7d8894;
    margin: 0 0 6px;
}

.integracao-detalhe {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: #9a2f27;
    background: #fdeceb;
    border-radius: 6px;
    padding: 8px 11px;
}

/* Payload de terceiro: pode vir com linha longuíssima. Rola dentro da própria caixa
   para a página nunca rolar na horizontal. */
.integracao-payload {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #1d2733;
    color: #dfe7ef;
    border-radius: 7px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    white-space: pre;
}

.integracao-payload-secundario { background: #f0f4f8; color: #37485a; max-height: 200px; }

@media (max-width: 760px) {
    .integracao-evento-topo { grid-template-columns: 1fr; gap: 5px; }
    .integracao-resumo { white-space: normal; }
}

/* ==========================================================================
   Coluna Follow-up — só o último registro, na própria linha do processo
   ========================================================================== */

.celula-followup {
    cursor: pointer;
    vertical-align: top;
    padding-top: 6px;
    padding-bottom: 6px;
    max-width: 0;
    min-width: 190px;
}

.celula-followup:hover { background: #f6f9fc; }

.followup-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.followup-data-linha {
    display: flex;
    align-items: center;
    gap: 4px;
}

.followup-icone-calendario {
    flex: 0 0 auto;
    color: #7d8894;
}

.followup-data {
    font-size: 0.72rem;
    font-weight: 700;
    color: #37485a;
    font-variant-numeric: tabular-nums;
}

/* Descrição embaixo da data, não ao lado — quebra em até 2 linhas em vez de cortar com
   reticências: é o texto que mais importa na coluna, cortar cedo obrigaria abrir o modal
   pra ler quase toda vez. */
.followup-texto {
    font-size: 0.74rem;
    color: #3d4a57;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.followup-mais {
    margin-top: 3px;
    font-size: 0.66rem;
    color: #8a94a0;
}

.followup-vazio {
    color: #b9c3cd;
    font-size: 0.8rem;
}

.modal-colunas-item-fixa {
    opacity: .65;
    cursor: default;
}


/* Dica no cabeçalho da coluna Follow-up — explica o que a coluna mostra sem gastar
   linha de texto num cabeçalho que já é estreito. */
.th-dica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-left: 5px;
    border: 1px solid #b9c3cd;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #7d8894;
    cursor: help;
    vertical-align: middle;
}

.th-dica:hover {
    border-color: #7d8894;
    color: #4a5763;
}


/* ==========================================================================
   Ícones de cabeçalho que só aparecem no hover (mesmo método do anexo: ×, funil, ⋮, ↕
   escondidos até passar o mouse na coluna) — cabeçalho fica limpo em repouso, os controles
   aparecem quando fazem sentido: o usuário está olhando pra ESSA coluna. Ordenar agora é
   função só do botão (.th-sort-btn), não do <th> inteiro — o <th> não tem mais @onclick, só
   o ícone é clicável, então não faz mais sentido hover de sobreposição no cabeçalho inteiro.

   Atalho de filtro no cabeçalho da etapa (botão ▾): a fileira de filtros continua tendo o
   select "Etapa em Aberto" de sempre; isto só evita abrir o select pra filtrar por uma etapa
   que já está visível na tabela.
   ========================================================================== */

/* Grupo de ícones (ocultar/filtrar/ordenar) some por padrão e, ao passar o mouse na
   coluna, SOBREPÕE o rótulo em vez de empurrá-lo (posição absoluta, colada na borda
   direita) — antes ficavam sempre à direita do texto, disputando espaço com ele e
   forçando a coluna a ficar larga só pra caber os dois. O degradê cobre o texto por
   baixo dos ícones e desaparece pra esquerda, então o rótulo ainda "espia" embaixo. */
.th-acoes {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    align-items: center;
    gap: 1px;
    padding: 0 4px 0 16px;
    background: linear-gradient(to right, transparent, #f3f6fa 40%, #f3f6fa);
}

    th:hover .th-acoes {
        display: flex;
    }

.th-filtro-btn,
.th-sort-btn,
.th-hide-btn,
.th-opcoes-btn {
    flex: 0 0 auto;
}

/* × oculta a coluna (AlternarColuna) e ⋮ abre o mini-painel de opções — mesmo botão-base do
   filtro/ordenar, só trocando o glifo. */
.th-hide-btn,
.th-opcoes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 3px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
}

.th-hide-btn:hover,
.th-opcoes-btn:hover {
    /* Preto translúcido, não branco — cabeçalho da tela interna e do Portal são os dois
       claros agora (ver .table thead em ImpoProcessos.razor.css); branco sobre claro não
       aparecia (achado ao igualar as duas cores). */
    background: rgba(0, 0, 0, 0.08);
}

.th-filtro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 3px;
    padding: 0;
    border: none;
    background: transparent;
    color: #9aa6b2;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
}

.th-filtro-btn:hover {
    background: #e5e9ee;
    color: #4a5763;
}

/* Filtro ativo fica sempre visível, hover ou não — senão o usuário perde de vista que uma
   etapa está filtrada assim que tira o mouse de cima. O grupo inteiro (.th-acoes) precisa
   aparecer, não só o botão — ele que está com display:none fora do hover. */
.th-filtro-btn-ativo {
    color: #ffffff;
    background: var(--cv-brand-deep, #2a4a7f);
}

th:has(.th-filtro-btn-ativo) .th-acoes,
th:has(.th-sort-btn-ativo) .th-acoes {
    display: flex;
}

.th-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: 3px;
    padding: 0 3px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
}

.th-sort-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Coluna já ordenada: o botão (com a seta ▲/▼ real) fica sempre visível, hover ou não —
   senão o usuário perde de vista qual coluna/direção está em uso assim que tira o mouse.
   (regra que mantém .th-acoes visível pra isto está junto de .th-filtro-btn-ativo acima) */

.th-sort-dica {
    display: inline-block;
    font-size: 13px;
    color: #9aa6b2;
}

    .th-filtro-btn-ativo:hover {
        background: var(--cv-brand-deep, #2a4a7f);
        opacity: 0.85;
    }

/* ==========================================================================
   Puxador de redimensionar coluna

   GLOBAL, e isto é obrigatório: o puxador é injetado por ManipuladorRedimensionar(),
   que devolve um MarkupString. HTML vindo de MarkupString NÃO passa pelo compilador
   Razor, então não recebe o atributo de escopo (b-...) que o CSS isolado exige — a
   regra .col-resize-handle[b-...] de ImpoProcessos.razor.css nunca casava com ele.

   O efeito era invisível no código e fatal no uso: o puxador ficava um <span> inline
   de LARGURA ZERO e sem cursor, medido assim ao vivo. Não havia o que agarrar, e o
   redimensionamento parecia simplesmente não existir. Um teste com eventos sintéticos
   não pega isso, porque dispara direto no elemento sem precisar acertá-lo com o mouse.

   Mesma família do chassi do modal, que também precisou sair do CSS isolado.
   ========================================================================== */

.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
}

    /* Marca fina só aparece ao passar o mouse na coluna (th:hover) — parada, ela lia como
       linha de grade permanente no cabeçalho inteiro. */
    .col-resize-handle::after {
        content: "";
        position: absolute;
        top: 20%;
        bottom: 20%;
        right: 2px;
        width: 2px;
        border-radius: 1px;
        background: transparent;
    }

    th:hover > .col-resize-handle::after {
        background: rgba(0, 0, 0, 0.2);
    }

    .col-resize-handle:hover::after,
    .col-resize-handle:active::after {
        background: #55606e;
    }

    .col-resize-handle:hover,
    .col-resize-handle:active {
        background: rgba(0, 0, 0, 0.08);
    }

/* ==========================================================================
   Atendimento — sinal e agenda de follow-up do account
   ========================================================================== */

.celula-atendimento {
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
}

.celula-atendimento:hover { background: #f6f9fc; }

.atend-sinal {
    font-size: 0.72rem;
    margin-right: 5px;
    vertical-align: middle;
}

.atend-datas {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    line-height: 1.25;
}

.atend-linha {
    font-size: 0.7rem;
    color: #3d4a57;
    font-variant-numeric: tabular-nums;
}

.atend-proxima { color: #7d8894; }

.atend-vazio {
    font-size: 0.72rem;
    color: #9aa6b2;
    font-style: italic;
}

/* Atraso em destaque: é o que faz o account escolher por onde começar o dia. */
.atend-atraso {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #fdeceb;
    color: #9a2f27;
    font-size: 0.64rem;
    font-weight: 700;
    vertical-align: middle;
}

.atend-vencido .atend-linha { color: #9a2f27; }
.atend-nunca   .atend-vazio { color: #9a2f27; font-style: normal; font-weight: 600; }

/* Posição atual no modal de atendimento — mesmo badge da coluna Logística, só que fixo
   (sem cor de sinal/clique): o account precisa ver onde a carga está antes de confirmar
   que já olhou, é isso que o checkbox abaixo materializa. */
.atend-posicao-fixa {
    margin: -4px 0 12px;
}

/* Próxima data no modal — não é mais input, é a data já travada em ProximoDiaUtil, só
   informada aqui pra quem está registrando saber o que vai gravar. */
.atend-proxima-fixa {
    margin: -4px 0 12px;
    font-size: 0.8rem;
    color: #37485a;
}

/* Checkbox obrigatório: sem ele o botão Registrar fica desabilitado (ver SalvarAtendimento,
   que também recusa gravar sem isso — o disabled é só UX, não é a única barreira). */
.atend-confirma-posicao {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 4px;
    font-size: 0.82rem;
    color: #37485a;
    cursor: pointer;
}

    .atend-confirma-posicao input[type="checkbox"] {
        margin-top: 2px;
        flex-shrink: 0;
        cursor: pointer;
    }

/* Flags do follow-up (Pendência cliente/Privado) dentro do modal de Atualização — mesmo
   visual do .obs-item-flag-check (ObservacoesModal.razor.css, isolado só ali), redeclarado
   aqui global porque este modal é compartilhado entre ImpoProcessos.razor e
   ProcessoDetalhe.razor. Some da tela quando a Observação está vazia (sem texto, não vira
   follow-up — ver SalvarAtendimento/SalvarAtendimentoDetalhe). */
.atend-flag-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #55606e;
    cursor: pointer;
    margin-top: 6px;
}

    .atend-flag-check input[type="checkbox"] {
        cursor: pointer;
        accent-color: #0b4f71;
    }

    .atend-proxima-fixa strong {
        font-variant-numeric: tabular-nums;
    }

/* ==========================================================================
   Portal do Cliente — alterar senha
   ========================================================================== */

.portal-cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-sair-secundario {
    background: transparent;
    border: 1px solid #cfdae4;
    color: #37485a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.portal-sair-secundario:hover {
    background: #eef4fa;
    text-decoration: none;
    color: #1d2c3a;
}

.portal-senha {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 20px 60px;
}

.portal-senha-caixa {
    max-width: 420px;
    margin-top: 22px;
    background: #fff;
    border: 1px solid #e3e9ee;
    border-radius: 12px;
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
}

.portal-senha-conta {
    margin: 0 0 16px;
    font-size: 0.8rem;
    color: #6b7785;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f6;
}

.portal-senha-caixa label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7785;
    margin-bottom: 5px;
}

.portal-senha-input {
    border: 1px solid #cfdae4;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.portal-senha-input:focus {
    outline: 2px solid #9db6cd;
    outline-offset: 1px;
    border-color: #9db6cd;
}

.portal-senha-dica {
    margin: -10px 0 14px;
    font-size: 0.72rem;
    color: #8a94a0;
}

.portal-senha-msg {
    margin: 0 0 14px;
    font-size: 0.78rem;
    padding: 8px 11px;
    border-radius: 6px;
    line-height: 1.45;
}

.portal-senha-msg.erro    { background: #fdeceb; color: #9a2f27; }
.portal-senha-msg.sucesso { background: #e9f5ee; color: #1d6b45; }

.portal-senha-aviso {
    margin-top: 22px;
    color: #6b7785;
    font-size: 0.88rem;
}

.portal-senha-botao {
    margin-top: 4px;
    border: none;
    border-radius: 8px;
    background: #1d4e86;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 10px 16px;
    cursor: pointer;
}

.portal-senha-botao:hover:not(:disabled) { filter: brightness(1.08); }
.portal-senha-botao:disabled { opacity: .5; cursor: default; }

/* ==========================================================================
   Portal — detalhe do processo para o cliente

   A paleta é a MESMA do login do portal (acesso-visual.css) e dos e-mails: o
   cliente já viu esse azul e esse âmbar, e inventar uma terceira identidade só
   para esta tela faria o produto parecer costurado de pedaços.

   O âmbar aparece UMA vez — na posição atual da carga. É o único acento; o
   resto é tinta e linha.
   ========================================================================== */

.pd {
    --pd-brand: #0b4f71;
    --pd-brand-deep: #073853;
    --pd-amber: #c8862a;
    --pd-ink: #16232e;
    --pd-ink-suave: #5b6874;
    --pd-surface: #f3f6fa;
    --pd-line: #d8dee6;
    --pd-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

    /* Mesma fonte da tela interna (ProcessoDetalhe.razor.css) — antes esta tela só herdava
       o 'Segoe UI', sans-serif genérico de .portal-processos, sem o system-ui/-apple-system
       do meio da pilha (Segoe UI não existe fora do Windows; sem o fallback, mac/Linux caía
       direto no sans-serif do sistema, uma fonte diferente da que a equipe vê). */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Largura cheia, igual à lista do portal (.portal-processos). Um cliente que sai
       de uma tela larga para uma estreita sente a costura entre duas telas em vez de
       um produto só. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 24px 24px 70px;
    background: #f5f7fb;
    color: var(--pd-ink);
    /* flex:1, não min-height:100% — o pai (.portal-layout, ver PortalLayout.razor) é
       display:flex;flex-direction:column; min-height:100% é percentual e dependia da altura
       do pai já estar resolvida em todo browser/aninhamento, o que falhava (a tela ficava
       mais baixa que a viewport, sobrando fundo cinza embaixo). flex:1 preenche o espaço que
       sobra sempre, sem depender de resolução de porcentagem — mesmo raciocínio de
       .portal-processos (PortalProcessos.razor.css), só que sem overflow:hidden aqui: esta
       tela não precisa de rolagem interna só de uma área, pode rolar inteira normalmente. */
    flex: 1;
}

/* ---------- cabeçalho ---------- */

/* O cabeçalho em si é o PortalCabecalhoMarca (Components/Shared), o mesmo componente da
   lista — degradê na cor do cliente, logo e ações. Aqui só o que entra no slot Acoes:
   o link de voltar (herda .portal-sair, igual às outras telas) e o selo de posição. */
.pd-voltar-btn {
    text-decoration: none;
}

.pd-posicao {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 6px 13px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
}

.pd-posicao-transito { background: #ede9fe; color: #6d28d9; }
.pd-posicao-atracado { background: #cffafe; color: #0e7490; }
.pd-posicao-desembaraco { background: #e0e7ff; color: #4338ca; }
.pd-posicao-entregue { background: #fce7f3; color: #be185d; }

/* Navegação Anterior/Próximo — mesmo conceito da tela interna (ProcessoDetalhe.razor,
   .processo-nav), sem o botão de Atualizar (é ferramenta do account, não do cliente).
   Ordem: a mesma da tabela do Portal (a página atual), sem fixados — o portal não tem
   essa função. Sequência lida de sessionStorage (clipboard.js, lerSequenciaProcessos). */
.pd-nav {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.pd-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-family: inherit;
    transition: background 0.15s ease;
}

    .pd-nav-btn:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .pd-nav-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

.pd-nav-seta {
    font-size: 14px;
    flex-shrink: 0;
}

.pd-nav-preview {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    text-align: left;
}

    .pd-nav-preview strong {
        font-size: 11px;
        font-family: var(--pd-mono);
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pd-nav-preview span {
        font-size: 9.5px;
        color: rgba(255, 255, 255, 0.75);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---------- hero (espinha) + grade ---------- */

/* "Onde está a carga" fica sozinha, largura cheia, acima da grade — mesma hierarquia da
   faixa de rota na tela interna (rota-strip): é a primeira pergunta do cliente, respondida
   antes de qualquer outro dado, não competindo por espaço com um card de texto ao lado. */
.pd-hero {
    margin-bottom: 14px;
}

    .pd-hero h2 {
        margin-bottom: 8px;
    }

/* Layout de duas colunas: rota na lateral esquerda (fixa, mais estreita), o resto — espinha,
   etapas, cards — na coluna principal. Empilha em telas estreitas: sidebar vira só mais um
   bloco no topo, em vez de espremer numa coluna fininha ilegível. */
.pd-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 22px;
    align-items: start;
}

.pd-sidebar { min-width: 0; }

.pd-principal { min-width: 0; }

@media (max-width: 900px) {
    .pd-layout {
        grid-template-columns: 1fr;
    }
}

/* Ícone no cabeçalho dos cards — mesmo padrão da tela interna (.info-card h2 .icon): não é
   itálico (a fonte de emoji ignora font-style, mas <i> semanticamente pede a declaração). */
.pd-bloco h2 .pd-icone,
.pd-icone {
    font-style: normal;
    font-size: 0.85rem;
}

/* Auto-fit em vez de áreas nomeadas fixas: cada <section> só ocupa espaço se existir no
   DOM. Antes, um perfil sem "Etapas" (ou qualquer outro card opcional) deixava um buraco
   no meio da tela — a grade de áreas nomeadas reservava a coluna/linha mesmo vazia, porque
   os tracks são definidos independente do que de fato renderiza. Auto-fit resolve isso na
   raiz: o navegador só cria track pra quem está lá. */
.pd-grade {
    display: grid;
    gap: 22px;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.pd-bloco { min-width: 0; }

/* Altura padronizada — mesmo motivo da tela interna (.grade-4col > .info-card): os cards
   têm quantidades de conteúdo bem diferentes (Follow-up pode ter dezenas de entradas,
   Despacho Aduaneiro às vezes só 2 campos), e sem uma altura comum cada um fica do
   tamanho do próprio conteúdo — a fileira nunca alinha. Quem tem mais conteúdo que cabe
   rola por dentro (overflow-y), em vez de esticar o card ou a fileira inteira. */
.pd-grade > .pd-bloco {
    height: 380px;
    overflow-y: auto;
}

.pd-bloco {
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 20px 22px 22px;
}

.pd-bloco h2 {
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pd-ink-suave);
}

.pd-bloco-nota {
    margin: -8px 0 14px;
    font-size: 0.78rem;
    color: var(--pd-ink-suave);
    line-height: 1.5;
}

/* ---------- espinha das posições (elemento-assinatura), na horizontal ---------- */

/* Lida da esquerda pra direita, mesmo sentido da faixa de rota logo abaixo — os dois
   contam a mesma história em granularidades diferentes (fase × geografia), então leem
   melhor no mesmo sentido em vez de um vertical e outro horizontal. */
.pd-espinha-h {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    overflow-x: auto;
    padding: 2px 2px 0;
}

.pd-ponto-h {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    min-width: 92px;
    flex: 1;
}

.pd-marca-h {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--pd-line);
}

.pd-ponto-h-atingido .pd-marca-h {
    background: var(--pd-brand);
    border-color: var(--pd-brand);
}

/* O único acento âmbar da página: onde a carga está agora. */
.pd-ponto-h-atual .pd-marca-h {
    background: var(--pd-amber);
    border-color: var(--pd-amber);
    box-shadow: 0 0 0 4px rgba(200, 134, 42, 0.18);
}

.pd-ponto-h-corpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pd-ponto-h-nome {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #b6bfc9;
}

.pd-ponto-h-atingido .pd-ponto-h-nome { color: var(--pd-brand-deep); }
.pd-ponto-h-atual .pd-ponto-h-nome { color: var(--pd-amber); }

.pd-ponto-h-data {
    font-size: 0.68rem;
    color: var(--pd-ink-suave);
    font-variant-numeric: tabular-nums;
}

/* Empilhada na sidebar (pd-hero-v): mesma marca+corpo de sempre, só em coluna em vez de
   linha, com o trilho entre marcos na vertical — mesmo mecanismo de .pd-rota-v-com-linha ao
   lado, pros dois cards lerem como a mesma família visual. */
.pd-hero-v .pd-espinha-h {
    flex-direction: column;
    overflow-x: visible;
    gap: 0;
    padding: 2px 0 0;
}

.pd-hero-v .pd-ponto-h {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    gap: 10px;
    padding-bottom: 14px;
}

.pd-hero-v .pd-ponto-h:last-child { padding-bottom: 0; }

.pd-hero-v .pd-marca-h {
    margin-top: 2px;
}

.pd-hero-v .pd-ponto-h-com-linha::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--pd-line);
}

.pd-hero-v .pd-ponto-h-atingido.pd-ponto-h-com-linha::before {
    background: var(--pd-brand);
}

/* Canal só aparece no estágio Desembaraço — mesma cor de sempre (flag-canal-*), só menor,
   do tamanho de um selo dentro da espinha em vez do badge de tabela. */
.pd-canal-chip {
    display: inline-block;
    margin-top: 1px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
}

/* ---------- rota, empilhada na sidebar esquerda (linha do tempo vertical) ---------- */

/* Mesmo branco dos outros cards agora (.pd-bloco já dá isso) — só o sticky é próprio daqui,
   pra rota acompanhar a rolagem da coluna principal ao lado. */
.pd-rota-v-card {
    position: sticky;
    top: 14px;
}

.pd-rota-v {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pd-rota-v-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 0 0 20px;
}

.pd-rota-v-item:last-child { padding-bottom: 0; }

.pd-rota-v-marca {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: var(--pd-surface);
    border: 2px solid var(--pd-line);
}

.pd-rota-v-atingido .pd-rota-v-marca {
    background: var(--pd-brand);
    border-color: var(--pd-brand);
    color: white;
}

/* Trilho conectando pro próximo item — só entre os que têm próximo (:last-child fica sem). */
.pd-rota-v-com-linha::before {
    content: "";
    position: absolute;
    left: 10.5px;
    top: 22px;
    bottom: 0;
    width: 1px;
    background: var(--pd-line);
}

.pd-rota-v-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-top: 2px;
}

.pd-rota-v-rotulo {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pd-ink-suave);
}

.pd-rota-v-info strong { font-size: 13px; color: var(--pd-ink); }

.pd-rota-v-data {
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--pd-ink-suave);
}

.pd-rota-v-prevista { font-style: italic; }
.pd-rota-v-confirmada { color: #1a7a4c; font-weight: 600; }

/* ---------- etapas (faixa horizontal, mesmo visual do EtapasProcessoStrip interno) ---- */

.pd-etapas-strip-card { overflow: hidden; }

/* Grid de 3 linhas (ícone / nome / data), não flexbox: cada linha alinha na mesma altura em
   TODAS as etapas mesmo quando uma etapa tem legenda de 2 linhas (ETD/ETA, Previsto+Confirmado,
   ver .etapa-datas-empilhadas abaixo) e as outras só 1 — o texto mais alto nunca empurra o
   ícone das etapas vizinhas fora do lugar. .pd-etapa-h vira display:contents: só existe para
   estruturar o markup, os filhos (ícone/nome/data) é que viram os itens de fato do grid.
   .etapa-marca e .etapa-datas-empilhadas são compartilhadas com o EtapasProcessoStrip interno
   (por isso ficam aqui, global) — o resto do grid (pd-etapa-h-*) é exclusivo do Portal. */
.pd-etapas-h {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto auto;
    align-items: start;
    row-gap: 4px;
    column-gap: 2px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.pd-etapa-h {
    display: contents;
}

.etapa-marca {
    grid-row: 1;
    justify-self: center;
}

.etapa-datas-empilhadas {
    grid-row: 3;
    justify-self: center;
}

.pd-etapa-h-nome {
    grid-row: 2;
    justify-self: center;
    min-width: 70px;
    text-align: center;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    color: var(--pd-brand);
    line-height: 1.2;
}

.pd-etapa-h-data {
    grid-row: 3;
    justify-self: center;
    font-size: 8px;
    color: #8a94a3;
    font-variant-numeric: tabular-nums;
}

.pd-etapa-h-seta {
    grid-row: 1 / span 3;
    align-self: center;
    color: #c3ccd8;
    font-size: 14px;
    flex-shrink: 0;
}

/* ---------- dados ---------- */

.pd-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 20px;
    margin: 0;
}

.pd-dados dt {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pd-ink-suave);
    margin-bottom: 3px;
}

.pd-dados dd {
    margin: 0;
    font-size: 0.88rem;
    color: var(--pd-ink);
    line-height: 1.4;
}

/* ---------- etapas ---------- */

.pd-etapas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pd-etapa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid #eef2f6;
    font-size: 0.83rem;
}

.pd-etapa:first-child { border-top: none; }

.pd-etapa-icone { flex: 0 0 auto; font-size: 0.95rem; }
.pd-etapa-nome { flex: 1 1 auto; min-width: 0; }

.pd-etapa-estado {
    flex: 0 0 auto;
    font-size: 0.76rem;
    color: var(--pd-ink-suave);
    font-variant-numeric: tabular-nums;
}

.pd-etapa-concluida .pd-etapa-nome { color: var(--pd-ink); }
.pd-etapa-pendente, .pd-etapa-naoaplicavel { color: #97a3ae; }

/* ---------- follow-up: linha do tempo vertical, mais recente primeiro ---------- */
/* (só leitura — ver Suas anotações para o que o cliente escreve) */

.pd-followup-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.pd-followup-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 18px 0;
}

.pd-followup-item:last-child { padding-bottom: 0; }

/* Marca + trilho — mesmo desenho da espinha (marco cheio, linha atrás conectando pro
   próximo item), só que aqui a ORDEM é cronológica reversa: o marco preenchido de cima é
   sempre o mais recente, não "onde a carga está agora". */
.pd-followup-marca {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--pd-brand);
}

.pd-followup-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background: var(--pd-line);
}

.pd-followup-corpo { min-width: 0; }

.pd-followup-topo {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

    .pd-followup-topo strong {
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--pd-brand-deep);
        font-variant-numeric: tabular-nums;
    }

    .pd-followup-topo span {
        font-size: 0.72rem;
        color: #97a3ae;
        white-space: nowrap;
    }

.pd-followup-corpo p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ---------- anotações ---------- */

.pd-anotacao-campo {
    width: 100%;
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.pd-anotacao-campo:focus {
    outline: 2px solid var(--pd-brand);
    outline-offset: 1px;
    border-color: var(--pd-brand);
}

.pd-anotacao-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
}

.pd-contador {
    font-size: 0.7rem;
    color: #97a3ae;
    font-variant-numeric: tabular-nums;
}

.pd-botao {
    border: none;
    border-radius: 8px;
    background: var(--pd-brand);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
}

.pd-botao:hover:not(:disabled) { background: var(--pd-brand-deep); }
.pd-botao:disabled { opacity: .45; cursor: default; }

.pd-anotacoes {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- mercadoria (Portal e tela interna) ---------- */

.pd-input {
    width: 100%;
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.pd-input:focus {
    outline: 2px solid var(--pd-brand);
    outline-offset: 1px;
    border-color: var(--pd-brand);
}

.mercadoria-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .mercadoria-tabela th {
        text-align: left;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #97a3ae;
        padding: 4px 6px;
        border-bottom: 1px solid var(--pd-line);
    }

    .mercadoria-tabela td {
        padding: 6px;
        border-bottom: 1px solid #eef2f6;
        vertical-align: top;
    }

.mercadoria-acoes {
    white-space: nowrap;
    text-align: right;
}

.mercadoria-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.mercadoria-form-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

/* Portal do Cliente não tem CSS isolado (sem .razor.css) — versões globais dessas duas
   classes utilitárias, só pro card de Mercadoria em PortalProcessoDetalhe.razor. */
.link-atalho {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: var(--pd-brand, #0b4f71);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

.botao-fantasma {
    background: none;
    border: 1px solid var(--pd-line, #d8dee6);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    color: inherit;
}

    .botao-fantasma:hover {
        background: #f3f6fa;
    }

/* Configurar Export (Portal) — mesma ideia de ImportacaoExportConfig.razor.css, só que
   encaixado no chassi .portal-senha-caixa (que por padrão é estreito, 420px, pensado pra
   formulário de senha/cor — aqui precisa de mais largura pra grade de checkboxes). */
.portal-export-caixa {
    max-width: 900px;
}

.portal-export-atalhos {
    display: flex;
    gap: 16px;
    margin: 4px 0 16px;
}

.portal-export-secao {
    padding: 14px 0;
    border-top: 1px solid #eef0f3;
}

    .portal-export-secao h2 {
        margin: 0 0 10px;
        font-size: 13px;
        font-weight: 600;
        color: #55606e;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

.portal-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 16px;
}

.portal-export-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

    .portal-export-item input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

.portal-export-acoes {
    margin-top: 18px;
}

/* Mercadoria mora fora da grade principal (ver ProcessoDetalhe.razor e
   PortalProcessoDetalhe.razor) — sem item, é só este botão embaixo dos cards; com item, o
   card ocupa a largura toda abaixo da grade. */
.mercadoria-botao-adicionar {
    margin-top: 4px;
}

.mercadoria-card-largo {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

.pd-anotacao {
    border-left: 2px solid var(--pd-line);
    padding-left: 12px;
}

.pd-anotacao-topo {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.pd-anotacao-autor {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--pd-brand-deep);
}

.pd-anotacao-data {
    font-size: 0.72rem;
    color: #97a3ae;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-anotacao-texto {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ---------- estados ---------- */

.pd-vazio {
    padding: 40px 0;
    text-align: center;
    color: var(--pd-ink-suave);
}

.pd-vazio-suave {
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid #eef2f6;
    font-size: 0.82rem;
    color: #97a3ae;
}

.pd-msg {
    margin: 10px 0 0;
    font-size: 0.78rem;
    padding: 8px 11px;
    border-radius: 6px;
    background: #fdeceb;
    color: #9a2f27;
}

.pd-negado {
    padding: 60px 0;
    text-align: center;
}

.pd-negado h1 {
    font-size: 1.3rem;
    margin: 0 0 8px;
}

.pd-negado p {
    color: var(--pd-ink-suave);
    margin: 0 0 18px;
}

.pd-voltar-link {
    color: var(--pd-brand);
    font-weight: 600;
    font-size: 0.88rem;
}



/* Referência da lista do portal: leva ao detalhe. Sublinhado só no hover para a
   coluna não virar um bloco de links riscados. */
.portal-ref-link {
    color: #0b4f71;
    font-weight: 600;
    text-decoration: none;
}

.portal-ref-link:hover {
    text-decoration: underline;
}

/* Tela inteira, sem rolar a página (PortalLayout.razor): a faixa de simulação (opcional,
   condicional) e .portal-processos dividem a altura, e só a área de linhas da tabela rola —
   mesmo ajuste feito em Importação · Processos (ImpoProcessos.razor.css .layout-processos).
   Sem número mágico de altura fixa pra subtrair aqui, ao contrário da tela interna: a faixa
   de simulação é condicional (só aparece pra admin simulando), então o layout é flex-column
   de altura 100%, e cada filho toma o que precisa — .portal-processos fica com o resto. */
/* .portal-layout-shell é quem toma a tela inteira (PortalLayout.razor) — a faixa de
   simulação (condicional, admin simulando um cliente) e .portal-layout dividem essa altura
   como irmãos flex, então a faixa nunca empurra o conteúdo pra fora da viewport quando
   aparece. */
.portal-layout-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.portal-layout {
    /* auto, não hidden: nem toda página do Portal quer rolar só por dentro — só a tela de
       Processos declara flex:1/min-height:0/overflow:hidden em si mesma (.portal-processos)
       pra rolar só a tabela por dentro. Nas demais (detalhe, solicitações, aparência...) o
       conteúdo pode ser mais alto que a tela, e é aqui que ele rola, no lugar do scroll do
       <body> de antes. display:flex pra esse overflow:hidden de .portal-processos valer —
       senão vira filho comum de um bloco, sem altura definida por flex, e o overflow:hidden
       não tem o que recortar. */
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* ----- Faixa de simulação (admin vendo o Portal como um login de cliente) ----- */

.portal-simulacao-faixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #93470f;
    color: #fff;
    padding: 10px 20px;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    flex-shrink: 0;
}

    .portal-simulacao-faixa strong {
        font-weight: 700;
    }

    .portal-simulacao-faixa form {
        flex-shrink: 0;
    }

    .portal-simulacao-faixa button {
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        background: #fff;
        color: #93470f;
        border: none;
        border-radius: 6px;
        padding: 6px 14px;
        cursor: pointer;
        white-space: nowrap;
    }

    .portal-simulacao-faixa button:hover {
        background: #f7ece1;
    }

/* =========================================================================
   IMPORTAÇÃO — SOLICITAÇÃO PENDENTE NA LISTA DE PROCESSOS
   Linha destacada no topo da tabela de /Importacao/Processos pra solicitação
   ainda sem Processoid vinculado — não é um <Processos> de verdade (o iData
   não tem registro dela ainda), então não entra no switch por coluna: é uma
   única <td colspan> por cima da tabela. Clique abre o mesmo form de sempre
   em /Importacao/Solicitacoes/{Id} (SolicitacoesProcesso.razor), só o ponto
   de entrada mudou.
========================================================================= */
.linha-solicitacao-pendente {
    cursor: pointer;
    background: #fff8e6;
}

    .linha-solicitacao-pendente:hover {
        background: #fef0c7;
    }

    .linha-solicitacao-pendente td {
        padding: 9px 12px;
        border-bottom: 1px solid #f3dfa0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.selo-solicitacao-pendente {
    display: inline-block;
    background: #c8862a;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    padding: 2px 7px;
    margin-right: 10px;
}

.solicitacao-pendente-cliente {
    font-weight: 600;
    color: #16232e;
    margin-right: 10px;
}

.solicitacao-pendente-detalhe {
    color: #55606e;
    font-size: 12.5px;
    margin-right: 10px;
}

.solicitacao-pendente-status {
    color: #8a94a3;
    font-size: 12px;
    margin-right: 10px;
}

.solicitacao-pendente-aviso {
    color: #a8710f;
    font-size: 11.5px;
    font-style: italic;
}

/* =========================================================================
   PORTAL — SOLICITAÇÃO DE ABERTURA DE PROCESSO
   Global (e não em .razor.css por página) de propósito: PortalSolicitacoes,
   PortalSolicitacaoNova e PortalSolicitacaoDetalhe compartilham este vocabulário
   visual ("ps-"), e CSS isolado do Blazor não atravessa arquivo — duplicar em três
   .razor.css é o erro que o CLAUDE.md pede pra evitar quando telas compartilham
   apresentação.
========================================================================= */

/* Largura cheia por padrão (mesmo raciocínio de .portal-processos) — a LISTA é dado tabular,
   quer a tela toda. Nova/Detalhe (formulário e leitura em prosa) usam o modificador estreito
   logo abaixo, porque texto largo demais fica difícil de acompanhar. */
.portal-solicitacoes {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 16px 32px;
    font-family: 'Segoe UI', sans-serif;
}

.portal-solicitacoes-estreito {
    max-width: 900px;
    margin: 0 auto;
}

.ps-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.ps-intro {
    color: #5b6b78;
    font-size: 13.5px;
    margin: 0;
    max-width: 52ch;
}

.ps-nova-btn {
    background: var(--cv-brand, #0b4f71);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
    padding: 9px 16px;
    white-space: nowrap;
}

    .ps-nova-btn:hover {
        background: var(--cv-brand-deep, #073853);
    }

.ps-vazio {
    color: #8a94a3;
    font-size: 13.5px;
    padding: 20px 0;
}

/* ----- Selos de status (lista + detalhe) ----- */

.ps-selo {
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 11px;
    display: inline-block;
}

.ps-st-nova { background: #e1edf3; color: #0b4f71; }
.ps-st-analise { background: #fdf1da; color: #8a5a12; }
.ps-st-aguardando { background: #fdf1da; color: #8a5a12; }
.ps-st-aberto { background: #e2efe9; color: #17654a; }
.ps-st-recusada { background: #f7ece1; color: #93470f; }
.ps-st-cancelada { background: #eef1f4; color: #6b838e; }

/* ----- Filtros (lista) ----- */

.ps-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ps-chip {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--cv-line, #d8dee6);
    background: #fff;
    color: #5b6b78;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
}

    .ps-chip:hover {
        border-color: var(--cv-brand, #0b4f71);
    }

    .ps-chip.ativo {
        background: var(--cv-brand, #0b4f71);
        border-color: var(--cv-brand, #0b4f71);
        color: #fff;
    }

.ps-busca {
    margin-bottom: 14px;
}

    .ps-busca input {
        width: 100%;
        max-width: 320px;
        font-family: inherit;
        font-size: 13px;
        border: 1px solid var(--cv-line, #d8dee6);
        border-radius: 8px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

/* ----- Lista (tabela) ----- */

.ps-tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 10px;
    background: #fff;
}

.ps-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ps-tabela th {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #8a94a3;
        padding: 10px 14px;
        border-bottom: 1px solid var(--cv-line, #d8dee6);
        white-space: nowrap;
    }

    .ps-tabela td {
        padding: 10px 14px;
        border-bottom: 1px solid #eef1f4;
        white-space: nowrap;
    }

    .ps-tabela tbody tr {
        cursor: pointer;
    }

        .ps-tabela tbody tr:hover {
            background: #f7f9fb;
        }

        .ps-tabela tbody tr:last-child td {
            border-bottom: none;
        }

.ps-tabela-num {
    font-family: "Cascadia Mono", ui-monospace, monospace;
    color: #8a94a3;
}

/* ----- Formulário (nova) ----- */

.ps-form-caixa {
    background: #fff;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.ps-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

    .ps-campo label {
        font-size: 12px;
        font-weight: 600;
        color: #5b6b78;
    }

    .ps-campo input, .ps-campo select, .ps-campo textarea {
        font-family: inherit;
        font-size: 13.5px;
        padding: 8px 10px;
        border: 1px solid var(--cv-line, #d8dee6);
        border-radius: 6px;
        color: var(--cv-ink, #16232e);
    }

    .ps-campo textarea {
        resize: vertical;
    }

.ps-linha-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .ps-linha-2 {
        grid-template-columns: 1fr;
    }
}

.ps-nota {
    font-size: 12px;
    color: #8a94a3;
    margin: 0 0 10px;
}

.ps-arquivos-lista {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ps-arquivos-lista li {
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* Um card por tipo de documento (PortalSolicitacaoNova.razor) — arrastar o arquivo pro card
   certo substitui o combo "tipo" + input avulso de antes. O <InputFile> cobre o card inteiro
   (ps-doc-input, opacity:0) porque todo input[type=file] já aceita drop do SO nativamente,
   sem JS interop; ps-doc-dropzone-ativa só troca a borda durante o arraste (dragenter/leave
   em Blazor, sem ler o DataTransfer). */
.ps-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.ps-doc-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 10px;
    padding: 10px;
}

.ps-doc-card-topo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ps-doc-icone {
    font-size: 16px;
    line-height: 1;
}

.ps-doc-titulo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cv-ink, #16232e);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-doc-contagem {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--cv-brand, #0b4f71);
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.ps-doc-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 64px;
    border: 1.5px dashed var(--cv-line, #d8dee6);
    border-radius: 8px;
    background: #f8fafc;
    transition: border-color 0.15s, background 0.15s;
}

    .ps-doc-dropzone:hover {
        border-color: var(--cv-brand, #0b4f71);
    }

.ps-doc-dropzone-ativa {
    border-color: var(--cv-brand, #0b4f71);
    background: #eaf1f8;
}

.ps-doc-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

    .ps-doc-input:disabled {
        cursor: default;
    }

.ps-doc-dropzone-texto {
    font-size: 11.5px;
    color: #8a94a3;
    padding: 0 6px;
    pointer-events: none;
}

.ps-doc-arquivos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .ps-doc-arquivos li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        background: #f3f6fa;
        border-radius: 5px;
        padding: 3px 6px;
    }

.ps-doc-arquivo-nome {
    color: var(--cv-ink, #16232e);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-doc-arquivo-tam {
    color: #8a94a3;
    white-space: nowrap;
}

.ps-doc-arquivo-remover {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    color: #93470f;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
}

.ps-anexo-tipo {
    font-size: 11px;
    font-weight: 600;
    background: #e1edf3;
    color: #073853;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

.ps-anexo-tam {
    font-size: 11.5px;
    color: #8a94a3;
    white-space: nowrap;
}

.ps-arquivo-nome {
    font-family: inherit;
    font-size: 13px;
    color: var(--cv-brand, #0b4f71);
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-aviso-inline {
    font-size: 12.5px;
    color: #93470f;
    background: #f7ece1;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 0 8px;
}

.ps-acoes {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.ps-btn-secundario {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #073853;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
}

    .ps-btn-secundario:hover:not(:disabled) {
        border-color: var(--cv-brand, #0b4f71);
    }

    .ps-btn-secundario:disabled {
        opacity: .6;
        cursor: default;
    }

/* ----- Detalhe ----- */

.ps-detalhe-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ps-detalhe-data {
    font-size: 12.5px;
    color: #8a94a3;
}

.ps-processo-aviso {
    background: #e2efe9;
    color: #17654a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin: 0 0 16px;
}

.ps-bloco-titulo {
    margin: 0 0 12px;
    font-size: 14px;
    color: #073853;
}

.ps-bloco-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .ps-bloco-cabecalho .ps-bloco-titulo {
        margin: 0 0 12px;
    }

.ps-contagem {
    font-family: "Cascadia Mono", ui-monospace, monospace;
    font-size: 11px;
    background: #eef1f4;
    color: #5b6b78;
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 6px;
}

.ps-subtitulo {
    margin: 14px 0 4px;
    font-size: 12px;
    color: #8a94a3;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ps-dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    margin: 0;
}

    .ps-dados > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ps-dados dt {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #8a94a3;
    }

    .ps-dados dd {
        margin: 0;
        font-size: 13.5px;
        color: var(--cv-ink, #16232e);
    }

.ps-texto-longo {
    font-size: 13.5px;
    color: var(--cv-ink, #16232e);
    white-space: pre-line;
    margin: 0;
}

.ps-historico {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ps-historico li {
        border-left: 3px solid var(--cv-line, #d8dee6);
        padding: 2px 0 2px 12px;
    }

.ps-historico-data {
    font-size: 11.5px;
    color: #8a94a3;
}

.ps-historico-texto {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--cv-ink, #16232e);
    white-space: pre-line;
}

/* Coluna personalizada do Portal (PortalPerfil.PermitirColunaPersonalizada) — cliente cria
   e preenche, controle interno dele. Global porque PortalProcessos.razor não alcança CSS
   isolado de outro componente (mesma lição repetida nesta sessão). */
/* display:flex NUNCA vai no <th> em si — um <th> com display:flex sai do modo table-cell
   (é o que a spec CSS2.1 §17.5.1 manda: display de tabela vira "block-ish" quando outro
   display é aplicado no elemento da célula), e para de esticar junto com a altura da linha:
   o navegador dimensiona só pelo conteúdo (~33px) em vez da altura real da linha (~48px,
   puxada pelas colunas vizinhas com ícone), ficando mais baixo que "Follow-up" ao lado —
   bug real, visto ao vivo comparando getBoundingClientRect().height dos dois. O <th>
   continua table-cell normal; o flex vai só no <span> interno (.th-coluna-personalizada-linha). */
.th-coluna-personalizada {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.th-coluna-personalizada-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

.th-coluna-personalizada-nova {
    min-width: 96px !important;
    width: 96px;
    text-align: center !important;
    padding: 4px 8px !important;
}

.btn-nova-coluna-personalizada {
    background: #eef2f7;
    border: 1px solid #b7c0cc;
    border-radius: 6px;
    color: #16232e;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-nova-coluna-personalizada:hover {
    background: #dfe6ee;
    border-color: #8a94a3;
}

.coluna-personalizada-acoes {
    display: flex;
    align-items: center;
    gap: 2px;
}

.coluna-personalizada-acoes button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    color: #8a94a3;
    padding: 1px 2px;
}

.coluna-personalizada-acoes button:hover {
    color: #16232e;
}

.input-coluna-personalizada-nome {
    width: 100%;
    font-size: 12px;
    border: 1px solid #b7c0cc;
    border-radius: 4px;
    padding: 2px 4px;
}

.celula-coluna-personalizada {
    padding: 4px 6px !important;
}

.input-coluna-personalizada-valor {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12.5px;
    color: var(--cv-ink, #16232e);
    padding: 3px 4px;
    border-radius: 4px;
}

.input-coluna-personalizada-valor:hover {
    border-color: #d8dee6;
}

.input-coluna-personalizada-valor:focus {
    outline: none;
    border-color: #5b6b7d;
    background: #fff;
}

/* Arquivos: seleção múltipla e arrastar para fora */
.arquivo-sel { flex: none; width: 16px; height: 16px; cursor: pointer; }
.arquivos-selecao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; margin-bottom: 6px; border-radius: 8px; background: #eef4fb; font-size: 13px; }
.arquivos-selecao[hidden] { display: none; }
.arquivos-selecao-todos { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.arquivos-selecao .arquivo-btn, .arquivos-selecao-todos .arquivo-btn { width: auto; padding: 4px 10px; font-size: 12px; }

/* Coluna unificada "Master / House": duas linhas, cada uma com o rótulo em versalete. */
.mh-linha { display: flex; align-items: baseline; gap: 6px; line-height: 1.35; }
.mh-rotulo { flex: none; min-width: 42px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #7c8a97; }
.mh-valor { min-width: 0; overflow-wrap: anywhere; }

/* 📎 da lista interna clicável (abre o modal de Arquivos) — botão sem moldura, mesmo tamanho do ícone. */
.icone-arquivos-btn { background: none; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer; font-family: inherit; line-height: 1; }
.icone-arquivos-btn:hover, .icone-arquivos-btn:focus-visible { opacity: 1; background: #eef4fb; }

/* Pendência do cliente dentro do follow-up do Portal (respostas + formulário). */
.pd-pendencia { margin-top: 8px; }
.pd-pendencia-selo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fbf0d3;
    color: #8a6410;
    font-size: 11px;
    font-weight: 700;
}
.pd-pendencia-aguarda { background: #dcecf5; color: #0b4f71; }
.pd-pendencia-ok { background: #e3f4ea; color: #1e7a3c; }

/* =========================================
   Compartilhado entre a tela interna e o Portal do Cliente
   (movido de ImpoProcessos.razor.css: CSS isolado nunca alcança o Portal)
========================================= */

/* Linha 2 — reserva permanente pros filtros, fora da fileira 1 (cards + botões). Só a
   ALTURA desta linha muda ao abrir/fechar; a fileira 1 nunca é afetada, então cards e
   botões de manutenção ficam visíveis o tempo todo, mesmo com filtros abertos e
   quebrando em 2+ linhas (max-height + overflow-y:auto evita que estoure o layout fixo
   de .layout-processos). */
.filtros-linha-reservada {
    flex-shrink: 0;
    overflow: hidden;
    transition: max-height 0.18s ease, opacity 0.15s ease;
}

.filtros-linha-fechada {
    max-height: 0;
    opacity: 0;
}

/* overflow:visible (e não auto): as listas de sugestão de Cliente/Account/Agente são
   position:absolute dentro desta linha — com overflow-y:auto elas eram cortadas nos 132px e a
   linha ganhava barra de rolagem, deixando ver só as primeiras opções. O hidden só é preciso
   fechado (max-height:0). O teto de altura fica só como rede de segurança da transição. */
.filtros-linha-aberta {
    max-height: 260px;
    opacity: 1;
    overflow: visible;
}

/* Célula agrupada REG. / CANAL: registrado aguardando parametrização (âmbar) e canal já atribuído mas
   ainda sem a liberação aduaneira (borda tracejada) — o liberado fica sólido, com o ✓. */
.reg-aguarda-param {
    background: #fdf3d8;
    color: #8a6d1f;
}

.canal-sem-liberacao {
    outline: 1.5px dashed currentColor;
    outline-offset: 1px;
}

.chips-filtros-ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 6px;
}

.chips-filtros-titulo {
    font-size: 12px;
    color: #6c757d;
    margin-right: 2px;
}

.chip-filtro-ativo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 360px;
    padding: 2px 4px 2px 10px;
    border: 1px solid #c9d8ee;
    border-radius: 999px;
    background: #eef4fc;
    font-size: 12px;
    color: #16233b;
}

.chip-filtro-rotulo {
    color: #55606e;
    white-space: nowrap;
}

.chip-filtro-valor {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-filtro-remover {
    border: none;
    background: transparent;
    color: #55606e;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
}

    .chip-filtro-remover:hover {
        background: #d5e2f5;
        color: #b02a37;
    }

.chips-filtros-limpar {
    border: none;
    background: none;
    color: #0056b3;
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}

    .chips-filtros-limpar:hover {
        text-decoration: underline;
    }

/* =========================================
   ETAPAS DO FLUXO — redesenho (selo em anel + datas com hierarquia)
   Sobrescreve as regras acima (mesma especificidade, vem depois). Só CSS: o markup continua
   emitindo o glifo (✓ • ○ –), e aqui ele é escondido/trocado por forma quando não é ✓.
   Compartilhado por lista interna, Portal e EtapasProcessoStrip.
========================================= */

/* Cabeçalho: ícone dentro de um disco suave */
.th-etapa-icone {
    width: 26px;
    height: 26px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf1f6;
    font-size: 13px;
    line-height: 1;
}

.th-etapa-nome {
    margin-top: 4px;
    font-size: 8.5px;
    letter-spacing: 0.2px;
}

/* Selo de estado: anel + preenchimento suave */
.etapa-marca {
    width: 18px;
    height: 18px;
    font-size: 10px;
    box-sizing: border-box;
    border: 1.5px solid transparent;
}

.etapa-marca.etapa-concluida {
    background: #dcf3e8;
    border-color: #0e7a4e;
    color: #0e7a4e;
}

.etapa-marca.etapa-andamento {
    background: #fdecc8;
    border-color: #93650a;
    color: #93650a;
    font-size: 0; /* esconde o glifo; o ponto pulsante vem do ::after */
}

.etapa-marca.etapa-andamento::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #93650a;
    animation: etapa-pulso 1.6s ease-in-out infinite;
}

.etapa-marca.etapa-pendente {
    background: #edf0f4;
    border-color: #b6bfca;
    font-size: 0;
}

.etapa-marca.etapa-na {
    background: transparent;
    border: 1.5px dashed #c7d0da;
    font-size: 0;
}

@keyframes etapa-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .etapa-marca.etapa-andamento::after { animation: none; }
}

/* Datas: previsto discreto, confirmado (fato) em destaque */
.etapa-datas-empilhadas {
    gap: 1px;
    margin-top: 3px;
}

.etapa-data-linha {
    color: #8a94a3;
}

.etapa-data-linha-confirmada {
    color: #16232e;
    font-weight: 700;
    background: rgba(11, 79, 113, 0.07);
    border-radius: 3px;
    padding: 0 3px;
}

.etapa-data-compacta {
    margin-top: 3px;
}

.etapa-data-atrasada {
    color: #c0392b;
    font-weight: 700;
}

/* Célula clicável: ponto discreto no canto, em vez de só o contorno no hover */
.celula-etapa-clicavel {
    position: relative;
}

.celula-etapa-clicavel::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cv-brand, #0b4f71);
    opacity: 0.55;
}

/* ---- Redesenho: selo clicável (Preparação / Lib. Registro) e célula Posição Atual ---- */

/* Selo que também é ação (estornar, alterar previsão, resolver pendência): pontinho no canto
   sinaliza "clicável"; selo sem pontinho é só leitura. */
.etapa-marca-btn {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .12s ease;
}

.etapa-marca-btn:hover { filter: brightness(.96); }
.etapa-marca-btn:focus-visible { outline: 2px solid var(--cv-brand, #0b4f71); outline-offset: 2px; }

.etapa-marca-btn::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16232e;
    opacity: .55;
    border: 1.5px solid #fff;
}

.etapa-marca-btn.etapa-concluida { background: #dcf3e8; color: #0e7a4e; }
.etapa-marca-btn.etapa-andamento { background: #fdecc8; color: #93650a; }
.etapa-marca-btn.etapa-atrasada  { background: #fee2e2; color: #b5423a; }

.etapa-marca-btn svg { width: 11px; height: 11px; }

.etapa-ponto-pulso {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #93650a;
    animation: etapa-pulso 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .etapa-ponto-pulso { animation: none; }
}

/* Datas sob os selos de liberação */
.etapa-data-prazo { display: block; margin-top: 2px; font-size: 8.5px; font-style: italic; color: #8a94a3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etapa-data-prazo.etapa-data-atrasada { font-style: normal; color: #c0392b; font-weight: 700; }

/* ---- Posição Atual (Importação e Agenciamento) ---- */
.celula-posicao { padding: 0 !important; vertical-align: middle; }

.pos-cel {
    --pos-cor: #1d4ed8;
    --pos-ico: #2563EB;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 10px;
    box-sizing: border-box;
}

button.pos-cel {
    font: inherit;
    text-align: left;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s ease;
}

button.pos-cel:hover { background: color-mix(in srgb, var(--pos-cor) 6%, transparent); }
button.pos-cel:focus-visible { outline: 2px solid var(--pos-cor); outline-offset: -2px; }

.pos-icone {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pos-ico) 12%, transparent);
    color: var(--pos-ico);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-icone svg { width: 14px; height: 14px; }

.pos-corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.pos-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }

.pos-modal { font-size: 10px; font-weight: 700; color: #4b5568; background: #eef1f6; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; }
.pos-rota { font-size: 11.5px; font-weight: 600; color: #5b6672; font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pos-op { font-size: 9px; font-weight: 700; letter-spacing: .3px; color: #8a94a3; }

.pos-selo {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pos-cor);
    background: color-mix(in srgb, var(--pos-cor) 10%, transparent);
    border-radius: 5px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    width: fit-content;
}

/* Agenciamento: cor pela posição do embarque */
.pos-emb-aguardando  { --pos-cor: #1d4ed8; }
.pos-emb-transito    { --pos-cor: #6d28d9; }
.pos-emb-chegada     { --pos-cor: #0e7490; }
.pos-emb-desembaraco { --pos-cor: #4338ca; }
.pos-emb-entregue    { --pos-cor: #be185d; }

/* Importação: cor pelo sinal de atendimento (roxo = atualizar, azul = em dia) */
.pos-sinal-roxo { --pos-cor: #7C3AED; --pos-ico: #7C3AED; }
.pos-sinal-azul { --pos-cor: #2563EB; --pos-ico: #2563EB; }

.etapa-marca svg { width: 11px; height: 11px; }

/* Cabeçalho das colunas de etapa: ícone de linha (SVG) em disco suave */
.th-etapa-icone { color: var(--cv-brand, #0b4f71); }
.th-etapa-icone svg { width: 15px; height: 15px; }