/* /Components/AjudaChecklist.razor.rz.scp.css */
.btn-ajuda[b-xfecbwemez] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8dee6;
    background: #f3f6fa;
    color: #0b4f71;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .btn-ajuda:hover[b-xfecbwemez] {
        background: #e4ecf7;
        border-color: #b9c7d8;
    }

.ajuda-overlay[b-xfecbwemez] {
    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;
}

.ajuda-modal[b-xfecbwemez] {
    background: white;
    border-radius: 14px;
    width: 560px;
    max-width: 94vw;
    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;
}

.ajuda-header[b-xfecbwemez] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f3;
    flex-shrink: 0;
}

    .ajuda-header h3[b-xfecbwemez] {
        margin: 0;
        font-size: 16px;
        color: #16232e;
    }

.ajuda-fechar[b-xfecbwemez] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #8a94a3;
}

    .ajuda-fechar:hover[b-xfecbwemez] {
        color: #16232e;
    }

.ajuda-intro[b-xfecbwemez] {
    margin: 16px 22px 0;
    font-size: 13px;
    color: #55606e;
}

.ajuda-corpo[b-xfecbwemez] {
    padding: 16px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* /Components/AjudaPasso.razor.rz.scp.css */
.ajuda-passo[b-eom0rrzqkc] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
}

    .ajuda-passo:last-child[b-eom0rrzqkc] {
        border-bottom: none;
        padding-bottom: 0;
    }

.ajuda-passo-numero[b-eom0rrzqkc] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0b4f71;
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.ajuda-passo-icone[b-eom0rrzqkc] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f3f6fa;
    color: #0b4f71;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ajuda-passo-icone svg[b-eom0rrzqkc] {
        width: 18px;
        height: 18px;
    }

.ajuda-passo-texto[b-eom0rrzqkc] {
    flex: 1;
    min-width: 0;
}

    .ajuda-passo-texto strong[b-eom0rrzqkc] {
        display: block;
        font-size: 13.5px;
        color: #16232e;
        margin-bottom: 2px;
    }

    .ajuda-passo-texto p[b-eom0rrzqkc] {
        margin: 0;
        font-size: 12.5px;
        color: #55606e;
        line-height: 1.5;
    }
/* /Components/AnexosDigitacaoEditor.razor.rz.scp.css */
.anexos-editor[b-auei8odrfm] {
    margin-top: 16px;
    padding: 12px 14px;
    background: #f3f6fa;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .anexos-editor h3[b-auei8odrfm] {
        margin: 0;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #55606e;
    }

.anexo-titulo[b-auei8odrfm] {
    font-size: 12px;
    font-weight: 700;
    color: #16233b;
    margin-bottom: 4px;
}

.anexo-info[b-auei8odrfm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
}

.anexo-ausente[b-auei8odrfm] {
    color: #8a94a3;
}

.anexo-meta[b-auei8odrfm] {
    font-size: 11.5px;
    color: #6c757d;
}

.anexo-dica[b-auei8odrfm] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: #6c757d;
}

.anexo-erro[b-auei8odrfm],
.anexo-aviso[b-auei8odrfm] {
    font-size: 12px;
    border-radius: 6px;
    padding: 6px 10px;
}

.anexo-erro[b-auei8odrfm] {
    color: #842029;
    background: #f8d7da;
}

.anexo-aviso[b-auei8odrfm] {
    color: #664d03;
    background: #fff3cd;
}
/* /Components/ArquivosModal.razor.rz.scp.css */
.arq-modal-overlay[b-aaj7d83v1p] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.arq-modal[b-aaj7d83v1p] {
    background: white;
    border-radius: 14px;
    width: 620px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    font-family: 'Segoe UI', sans-serif;
}

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

    .arq-modal-header h3[b-aaj7d83v1p] {
        margin: 0;
        font-size: 16px;
        color: #1f2937;
    }

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

    .arq-modal-fechar:hover[b-aaj7d83v1p] {
        background: #f3f6fa;
        color: #1f2937;
    }

.arq-modal-corpo[b-aaj7d83v1p] {
    overflow-y: auto;
    padding: 16px 20px 20px;
}

.arq-toolbar[b-aaj7d83v1p] {
    margin-bottom: 12px;
}

.arq-compilar-btn[b-aaj7d83v1p] {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid #0b4f71;
    border-radius: 9px;
    background: #0b4f71;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .arq-compilar-btn:hover[b-aaj7d83v1p] {
        background: #073853;
    }

.arq-compilar-btn-ativo[b-aaj7d83v1p] {
    background: white;
    color: #0b4f71;
}

    .arq-compilar-btn-ativo:hover[b-aaj7d83v1p] {
        background: #eef6fb;
    }

/* A lista em si (ArquivosProcesso) é markup de outro componente, sem o atributo de escopo
   deste CSS isolado — precisa de ::deep pra alcançar .arquivos-grupo/.arquivo-item. Continua
   coluna única (mesma leitura de cima pra baixo da lateral), só que agora com a largura do
   modal em vez dos 320px da lateral — o nome do arquivo não trunca mais tão cedo. */
[b-aaj7d83v1p] .arquivo-item {
    margin-bottom: 0;
}

[b-aaj7d83v1p] .arquivos-grupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Components/CardDashboard.razor.rz.scp.css */
.card-icon[b-jxdxtktfth] {
    height: 60px;
    width: 60px;
}
.dashboard-container[b-jxdxtktfth] {
    background-color: #005a8d; /* Tom de azul da imagem */
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
}

/* Cards Superiores */
.card-logistica[b-jxdxtktfth] {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 10px 20px;
    min-width: 200px;
    flex: 1;
    color: white;
}

.card-header-text[b-jxdxtktfth] {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 5px;
    
}

.card-body[b-jxdxtktfth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-number[b-jxdxtktfth] {
    font-size: 40px;
    font-weight: bold;
}
/* /Components/CompiladoPdfPainel.razor.rz.scp.css */
.compilado-painel[b-jmin0b833q] {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #c9d8ee;
    border-radius: 10px;
    background: #f5f9fe;
}

.compilado-vazio[b-jmin0b833q],
.compilado-dica[b-jmin0b833q] {
    font-size: 13px;
    color: #6c757d;
}

.compilado-topo[b-jmin0b833q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #55606e;
}

.compilado-topo-acoes[b-jmin0b833q] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.compilado-btn-txt[b-jmin0b833q] {
    width: auto;
    padding: 3px 10px;
    font-size: 12px;
}

.compilado-lista[b-jmin0b833q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.compilado-item[b-jmin0b833q] {
    display: grid;
    grid-template-columns: 16px 18px 22px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: white;
    font-size: 13px;
    cursor: grab;
}

.compilado-item-marcado[b-jmin0b833q] {
    border-color: #0b4f71;
    background: #eef6fb;
}

.compilado-item-arrastando[b-jmin0b833q] {
    opacity: 0.45;
}

.compilado-alca[b-jmin0b833q] {
    color: #8492a0;
    user-select: none;
}

.compilado-pos[b-jmin0b833q] {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    color: #0b4f71;
    text-align: center;
}

.compilado-nome[b-jmin0b833q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compilado-meta[b-jmin0b833q] {
    font-size: 11px;
    color: #8492a0;
    white-space: nowrap;
}

.compilado-mover[b-jmin0b833q] {
    display: flex;
    gap: 4px;
}

.compilado-rodape[b-jmin0b833q] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.compilado-gerar[b-jmin0b833q] {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 8px;
    background: #0b4f71;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .compilado-gerar:hover[b-jmin0b833q] {
        background: #073853;
        color: white;
    }
/* /Components/EtapasProcessoStrip.razor.rz.scp.css */
/* Este componente é renderizado dentro de .processo-container (ProcessoDetalhe.razor), então
   as custom properties --pd-* declaradas lá (var(--pd-brand) etc.) chegam aqui por herança
   normal de CSS — Blazor CSS isolation não cria Shadow DOM, só marca seletores; herança de
   variável continua funcionando através da árvore real do documento. Ainda assim, .info-card
   em si é uma classe isolada em ProcessoDetalhe.razor.css e não alcança este componente
   (isolamento é por atributo de escopo, não por nome de classe) — por isso a "carcaça" do
   card é redeclarada aqui, replicando o mesmo visual. */

.etapas-strip-card[b-oi1ccsq2dx] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    padding: 12px 18px 14px;
    box-shadow: 0 2px 6px rgba(11, 79, 113, 0.04);
    border: 1px solid var(--pd-line);
    margin-bottom: 14px;
}

    .etapas-strip-card h2[b-oi1ccsq2dx] {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin: 0 0 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #edf2f7;
        color: var(--pd-brand-deep);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .etapas-strip-card h2 .icon[b-oi1ccsq2dx] {
            font-style: normal;
            font-size: 14px;
        }

/* 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 em processos-visual.css) e as outras só 1 — o texto mais alto
   nunca empurra o ícone das etapas vizinhas fora do lugar. .etapa-strip-item vira
   display:contents: só existe para estruturar o markup, os filhos (ícone/nome/data) é que
   viram os itens de fato do grid. .etapa-marca (linha 1) e .etapa-datas-empilhadas (linha 3)
   ficam definidas em processos-visual.css — compartilhadas com o equivalente do Portal. */
.etapas-strip[b-oi1ccsq2dx] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto auto;
    align-items: start;
    row-gap: 3px;
    column-gap: 2px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.etapa-strip-item[b-oi1ccsq2dx] {
    display: contents;
}

.etapa-strip-btn[b-oi1ccsq2dx] {
    grid-row: 1;
    justify-self: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

    .etapa-strip-btn:hover .etapa-marca[b-oi1ccsq2dx] {
        outline: 2px solid #94a3b8;
        outline-offset: 1px;
    }

.etapa-strip-nome[b-oi1ccsq2dx] {
    grid-row: 2;
    justify-self: center;
    min-width: 62px;
    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;
}

/* Precisa da combinação de classes (maior especificidade que .etapa-strip-nome sozinho, que
   tem o atributo de escopo do CSS isolado) pra a cor do canal (flag-canal-*, em
   processos-visual.css) realmente vencer a cor padrão var(--pd-brand) herdada acima. */
.etapa-strip-nome.etapa-strip-canal-legenda.flag-canal-verde[b-oi1ccsq2dx] { color: #047857; }
.etapa-strip-nome.etapa-strip-canal-legenda.flag-canal-amarelo[b-oi1ccsq2dx] { color: #b45309; }
.etapa-strip-nome.etapa-strip-canal-legenda.flag-canal-vermelho[b-oi1ccsq2dx] { color: #b91c1c; }
.etapa-strip-nome.etapa-strip-canal-legenda.flag-canal-cinza[b-oi1ccsq2dx] { color: #4b5563; }

.etapa-strip-data[b-oi1ccsq2dx] {
    grid-row: 3;
    justify-self: center;
    font-size: 8px;
    color: #8a94a3;
    font-variant-numeric: tabular-nums;
}

.etapa-strip-seta[b-oi1ccsq2dx] {
    grid-row: 1 / span 3;
    align-self: center;
    color: #c3ccd8;
    font-size: 14px;
    flex-shrink: 0;
}

/* ===== Modal de marcação — mesmo visual dos outros modais da tela (ObservacoesModal,
   ArquivosModal), CSS isolado não cruza componentes, então redeclara aqui. ===== */

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

.etapa-modal[b-oi1ccsq2dx] {
    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;
}

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

    .etapa-modal-header h3[b-oi1ccsq2dx] {
        margin: 0;
        font-size: 15px;
        color: #1f2937;
    }

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

    .etapa-modal-fechar:hover[b-oi1ccsq2dx] {
        background: #f3f6fa;
        color: #1f2937;
    }

.etapa-modal-corpo[b-oi1ccsq2dx] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .etapa-modal-corpo label[b-oi1ccsq2dx] {
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin-top: 10px;
    }

.etapa-modal-aviso[b-oi1ccsq2dx] {
    margin: 0 0 4px;
    font-size: 12px;
    color: #6b7684;
    line-height: 1.4;
}

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

.etapa-modal-textarea[b-oi1ccsq2dx] {
    resize: vertical;
    min-height: 60px;
}

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

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

    .etapa-modal-cancelar:hover[b-oi1ccsq2dx] {
        background: #f3f6fa;
    }

.etapa-modal-confirmar[b-oi1ccsq2dx] {
    border: none;
    background: linear-gradient(135deg, #0b4f71, #073853);
    color: white;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .etapa-modal-confirmar:hover[b-oi1ccsq2dx] {
        filter: brightness(1.05);
    }

@media (max-width: 640px) {
    .etapa-strip-seta[b-oi1ccsq2dx] {
        display: none;
    }
}
/* /Components/FluxoProcesso.razor.rz.scp.css */
/* Fluxo do Processo — trilha das 12 etapas do desembaraço.
   Cores e tipografia acompanham o restante do módulo de Importação. */

.fluxo-processo[b-iy7j6doqa2] {
    --cv-brand: #0b4f71;
    --cv-brand-deep: #073853;
    --cv-line: #d8dee6;
    --cv-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    background: white;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.fluxo-titulo[b-iy7j6doqa2] {
    font-size: 11px;
    font-weight: 600;
    color: #8a94a3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* A trilha rola na horizontal em telas estreitas em vez de empurrar a página. */
.fluxo-trilha[b-iy7j6doqa2] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.fluxo-etapa[b-iy7j6doqa2] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "ordem nome"
        "icone valor"
        "icone percentual";
    align-items: center;
    gap: 1px 6px;
    flex: 1 0 auto;
    min-width: 92px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: 'Segoe UI', sans-serif;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: 0.15s ease;
    outline-offset: 2px;
}

.fluxo-etapa:hover[b-iy7j6doqa2] {
    background: #eef6ff;
    border-color: var(--cv-line);
}

.fluxo-etapa-ativa[b-iy7j6doqa2] {
    background: #eef6ff;
    border-color: var(--cv-brand);
    box-shadow: inset 0 -2px 0 var(--cv-brand);
}

.fluxo-ordem[b-iy7j6doqa2] {
    grid-area: ordem;
    font-family: var(--cv-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: white;
    background: var(--cv-brand);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fluxo-nome[b-iy7j6doqa2] {
    grid-area: nome;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: #55606e;
    white-space: nowrap;
}

.fluxo-icone[b-iy7j6doqa2] {
    grid-area: icone;
    font-size: 18px;
    line-height: 1;
    align-self: center;
}

.fluxo-valor[b-iy7j6doqa2] {
    grid-area: valor;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 700;
    color: var(--cv-brand-deep);
    line-height: 1.1;
}

.fluxo-percentual[b-iy7j6doqa2] {
    grid-area: percentual;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9.5px;
    color: #8a94a3;
    line-height: 1.1;
}

.fluxo-seta[b-iy7j6doqa2] {
    align-self: center;
    color: #c3ccd8;
    font-size: 16px;
    flex: 0 0 auto;
    user-select: none;
}

@media (max-width: 1100px) {
    .fluxo-seta[b-iy7j6doqa2] {
        display: none;
    }
}
/* /Components/FluxoProcessoAgenciamento.razor.rz.scp.css */
/* Fluxo do Processo — trilha das 12 etapas do desembaraço.
   Cores e tipografia acompanham o restante do módulo de Importação. */

.fluxo-processo[b-7jfr201nbk] {
    --cv-brand: #0b4f71;
    --cv-brand-deep: #073853;
    --cv-line: #d8dee6;
    --cv-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    background: white;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.fluxo-titulo[b-7jfr201nbk] {
    font-size: 11px;
    font-weight: 600;
    color: #8a94a3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* A trilha rola na horizontal em telas estreitas em vez de empurrar a página. */
.fluxo-trilha[b-7jfr201nbk] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.fluxo-etapa[b-7jfr201nbk] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "ordem nome"
        "icone valor"
        "icone percentual";
    align-items: center;
    gap: 1px 6px;
    flex: 1 0 auto;
    min-width: 92px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: 'Segoe UI', sans-serif;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: 0.15s ease;
    outline-offset: 2px;
}

.fluxo-etapa:hover[b-7jfr201nbk] {
    background: #eef6ff;
    border-color: var(--cv-line);
}

.fluxo-etapa-ativa[b-7jfr201nbk] {
    background: #eef6ff;
    border-color: var(--cv-brand);
    box-shadow: inset 0 -2px 0 var(--cv-brand);
}

.fluxo-ordem[b-7jfr201nbk] {
    grid-area: ordem;
    font-family: var(--cv-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: white;
    background: var(--cv-brand);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fluxo-nome[b-7jfr201nbk] {
    grid-area: nome;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: #55606e;
    white-space: nowrap;
}

.fluxo-icone[b-7jfr201nbk] {
    grid-area: icone;
    font-size: 18px;
    line-height: 1;
    align-self: center;
}

.fluxo-valor[b-7jfr201nbk] {
    grid-area: valor;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 700;
    color: var(--cv-brand-deep);
    line-height: 1.1;
}

.fluxo-percentual[b-7jfr201nbk] {
    grid-area: percentual;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9.5px;
    color: #8a94a3;
    line-height: 1.1;
}

.fluxo-seta[b-7jfr201nbk] {
    align-self: center;
    color: #c3ccd8;
    font-size: 16px;
    flex: 0 0 auto;
    user-select: none;
}

@media (max-width: 1100px) {
    .fluxo-seta[b-7jfr201nbk] {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-vq4nepsmzt] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-vq4nepsmzt] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-vq4nepsmzt] {
    background-image: linear-gradient(180deg, rgb(0, 110, 181) 0%, #000000 70%);
}

.top-row[b-vq4nepsmzt] {
    /* Mesma cor do fundo da página: o menu é uma barra flutuante de cantos arredondados, e o que
       rola por trás dele não pode aparecer nos cantos (o top-row é sticky). */
    background-color: var(--pt-bg, #eef2f6);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: flex-start;
}

    .top-row[b-vq4nepsmzt]  a, .top-row[b-vq4nepsmzt]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-vq4nepsmzt]  a:hover, .top-row[b-vq4nepsmzt]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-vq4nepsmzt]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-vq4nepsmzt] {
        justify-content: space-between;
    }

    .top-row[b-vq4nepsmzt]  a, .top-row[b-vq4nepsmzt]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-vq4nepsmzt] {
        flex-direction: row;
    }

    .sidebar[b-vq4nepsmzt] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-vq4nepsmzt] {
        position: sticky;
        top: 0;
        /* Mais alto que qualquer cabeçalho sticky de tabela na página (ImpoProcessos.razor.css,
           AgenciamentoProcessos.razor.css: z-index 1) — mesmo z-index e o de baixo perde a
           disputa só por vir depois no DOM, e o cabeçalho da tabela passava por cima do menu
           ao rolar. O menu do site sempre fica por cima do conteúdo da página. */
        z-index: 50;
    }

    .top-row.auth[b-vq4nepsmzt]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-vq4nepsmzt], article[b-vq4nepsmzt] {
        padding-left: 1rem !important;
        padding-right: 0.75rem !important;
    }
}

#blazor-error-ui[b-vq4nepsmzt] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-vq4nepsmzt] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================
   TOP NAVBAR — responsivo em 3 estágios, sem empilhar
   > 1280px : nav com rótulos + chips de status individuais
   1024–1280: status colapsa em uma pílula com popover
   < 1024px : nav colapsa em menu hambúrguer (painel)
   A barra mantém 64px de altura em TODAS as larguras.
   ========================================================= */

.top-navbar[b-6zr4fd9t04] {
    --cv-brand: #0b4f71;
    --cv-brand-deep: #073853;
    --cv-brand-abyss: #041e2c;
    --cv-brass: #d9b46a;
    --cv-paper: rgba(255, 255, 255, 0.78);
    --cv-nav-h: 64px;

    position: relative;
    z-index: 30;
    box-sizing: border-box;
    width: 100%;
    height: var(--cv-nav-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    background: linear-gradient(120deg, var(--cv-brand) 0%, var(--cv-brand-deep) 62%, var(--cv-brand-abyss) 100%);
    color: white;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(4, 30, 44, 0.22);
}

/* =========================
   HAMBÚRGUER (só < 1024px)
========================= */

.nav-toggle[b-6zr4fd9t04] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    color: white;
    cursor: pointer;
}

    .nav-toggle:hover[b-6zr4fd9t04] {
        background: rgba(255, 255, 255, 0.16);
    }

    .nav-toggle[aria-expanded="true"][b-6zr4fd9t04] {
        background: rgba(255, 255, 255, 0.2);
        border-color: var(--cv-brass);
    }

/* =========================
   LOGO
========================= */

.navbar-left[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.brand-lockup[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    text-decoration: none;
    padding: 5px 8px 5px 5px;
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

    .brand-lockup:hover[b-6zr4fd9t04] {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .brand-lockup:focus-visible[b-6zr4fd9t04] {
        outline: 2px solid var(--cv-brass);
        outline-offset: 2px;
    }

.brand-chip[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 9px;
    background: white;
    box-shadow: 0 4px 10px rgba(4, 30, 44, 0.35);
}

    .brand-chip img[b-6zr4fd9t04] {
        width: 28px;
        height: 28px;
        object-fit: contain;
        display: block;
    }

.brand-texto[b-6zr4fd9t04] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.brand-eyebrow[b-6zr4fd9t04] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--cv-brass);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-titulo[b-6zr4fd9t04] {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.15;
    color: white;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   MENU — trilho de rota
========================= */

.navbar-center[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-rail[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* fade na borda direita avisa que há mais itens fora da vista */
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}

    .nav-rail[b-6zr4fd9t04]::-webkit-scrollbar {
        display: none;
    }

.nav-item[b-6zr4fd9t04] {
    display: flex;
    flex-shrink: 0;
}

/* <NavLink> renderiza o <a> fora do escopo deste CSS isolado — daí o ::deep. */
.nav-item[b-6zr4fd9t04]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    box-sizing: border-box;
    color: var(--cv-paper);
    text-decoration: none;
    padding: 0 12px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.875rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-item[b-6zr4fd9t04]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-item[b-6zr4fd9t04]  .nav-link.active {
    background-color: rgba(255, 255, 255, 0.14);
    color: white;
    font-weight: 600;
}

.nav-item[b-6zr4fd9t04]  .nav-link:focus-visible {
    outline: 2px solid var(--cv-brass);
    outline-offset: -2px;
}

/* porto de escala: marca o item ativo sem custar 20px de altura pra todos */
.nav-item[b-6zr4fd9t04]  .nav-link.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--cv-brass);
}

.nav-icon[b-6zr4fd9t04] {
    flex-shrink: 0;
    display: inline-block;
    opacity: 0.85;
}

.nav-item[b-6zr4fd9t04]  .nav-link:hover .nav-icon,
.nav-item[b-6zr4fd9t04]  .nav-link.active .nav-icon {
    opacity: 1;
}

.nav-item[b-6zr4fd9t04]  .nav-contador {
    font-family: "Cascadia Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    background: var(--cv-brass);
    color: var(--cv-brand-deep);
    border-radius: 10px;
    padding: 3px 6px;
}

/* =========================
   STATUS
========================= */

.status-container[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.status-button[b-6zr4fd9t04] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--cv-paper);
    font-size: 12px;
    padding: 5px 10px 5px 8px;
    border-radius: 20px;
    cursor: default;
    white-space: nowrap;
}

.status-button[b-6zr4fd9t04]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cv-brass);
    flex-shrink: 0;
}

.status-nome[b-6zr4fd9t04] {
    opacity: 0.9;
}

.status-total[b-6zr4fd9t04] {
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: white;
}

/* pílula resumo — assume o lugar dos chips abaixo de 1280px */
.status-resumo[b-6zr4fd9t04] {
    display: none;
    align-items: center;
    gap: 8px;
    height: 36px;
    flex-shrink: 0;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: var(--cv-paper);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

    .status-resumo:hover[b-6zr4fd9t04] {
        background: rgba(255, 255, 255, 0.16);
        color: white;
    }

    .status-resumo[aria-expanded="true"][b-6zr4fd9t04] {
        border-color: var(--cv-brass);
        color: white;
    }

.status-popover[b-6zr4fd9t04] {
    position: absolute;
    top: calc(var(--cv-nav-h) + 8px);
    right: 14px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 230px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    background: var(--cv-brand-deep);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(4, 30, 44, 0.45);
}

.status-linha[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--cv-paper);
    background: rgba(255, 255, 255, 0.06);
}

/* =========================
   USUÁRIO
========================= */

.navbar-right[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.navbar-right[b-6zr4fd9t04] {
    gap: 10px;
}

.btn-sino[b-6zr4fd9t04] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}

    .btn-sino:hover[b-6zr4fd9t04] {
        background: rgba(255, 255, 255, 0.18);
        border-color: var(--cv-brass);
    }

.sino-badge[b-6zr4fd9t04] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #d93025;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.user-card[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 5px 10px 5px 5px;
    border-radius: 24px;
    color: white;
}

.user-name[b-6zr4fd9t04] {
    font-size: 12px;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-avatar[b-6zr4fd9t04] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--cv-brass);
    flex-shrink: 0;
}

    .user-avatar img[b-6zr4fd9t04] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.btn-logout[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0 10px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s, border-color 0.2s;
}

    .btn-logout:hover[b-6zr4fd9t04] {
        background: rgba(255, 255, 255, 0.15);
        border-color: var(--cv-brass);
    }

/* =========================
   PAINEL MOBILE
========================= */

.nav-backdrop[b-6zr4fd9t04] {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(4, 30, 44, 0.45);
    border: 0;
    padding: 0;
}

.nav-panel[b-6zr4fd9t04] {
    position: absolute;
    top: calc(var(--cv-nav-h) + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - var(--cv-nav-h) - 24px);
    overflow-y: auto;
    padding: 10px;
    background: var(--cv-brand-deep);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(4, 30, 44, 0.45);
}

.nav-panel-titulo[b-6zr4fd9t04] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cv-brass);
    padding: 6px 10px 2px;
}

.nav-panel[b-6zr4fd9t04]  .nav-link {
    height: 48px;
    border-radius: 9px;
    padding: 0 12px;
    font-size: 0.95rem;
}

.nav-panel[b-6zr4fd9t04]  .nav-link.active::after {
    display: none;
}

.nav-panel[b-6zr4fd9t04]  .nav-link.active {
    background: rgba(217, 180, 106, 0.18);
}

.nav-panel .btn-logout[b-6zr4fd9t04] {
    width: 100%;
    height: 44px;
    border-radius: 9px;
    margin-top: 6px;
}

.nav-panel-usuario[b-6zr4fd9t04] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: white;
}

/* =========================
   ESTÁGIO 2 — 1024 a 1280px
   Chips individuais dão lugar à pílula resumo.
========================= */

@media (max-width: 1280px) {
    .status-container[b-6zr4fd9t04] {
        display: none;
    }

    .status-resumo[b-6zr4fd9t04] {
        display: flex;
    }

    .brand-eyebrow[b-6zr4fd9t04] {
        display: none;
    }

    .btn-logout span[b-6zr4fd9t04] {
        display: none;
    }

    .btn-logout[b-6zr4fd9t04] {
        padding: 0;
        width: 34px;
    }
}

/* =========================
   ESTÁGIO 3 — < 1024px
   Nav vira painel; barra continua em 1 linha.
========================= */

@media (max-width: 1023px) {
    .nav-toggle[b-6zr4fd9t04] {
        display: flex;
    }

    .navbar-center[b-6zr4fd9t04] {
        display: none;
    }

    .user-card[b-6zr4fd9t04] {
        background: transparent;
        border: 0;
        padding: 0;
        gap: 0;
    }

    .user-info[b-6zr4fd9t04],
    .navbar-right .btn-logout[b-6zr4fd9t04] {
        display: none;
    }
}

@media (max-width: 560px) {
    .top-navbar[b-6zr4fd9t04] {
        gap: 10px;
        padding: 0 10px;
    }

    .brand-titulo[b-6zr4fd9t04] {
        font-size: 15px;
    }

    .status-resumo span:first-of-type[b-6zr4fd9t04] {
        display: none;
    }

    .status-resumo[b-6zr4fd9t04] {
        padding: 0 10px;
    }
}

@media (max-width: 400px) {
    .brand-texto[b-6zr4fd9t04] {
        display: none;
    }
}
/* /Components/MenuSuperior.razor.rz.scp.css */
.btn-login[b-thjgapmhg6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1e73be, #0b5ed7);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .btn-login .icon[b-thjgapmhg6] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-login svg[b-thjgapmhg6] {
        width: 18px;
        height: 18px;
    }

    /* Hover */
    .btn-login:hover[b-thjgapmhg6] {
        background: linear-gradient(135deg, #0b5ed7, #084298);
        transform: translateY(-1px);
    }

    /* Clique */
    .btn-login:active[b-thjgapmhg6] {
        transform: scale(0.97);
    }

.user-card[b-thjgapmhg6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1e73be, #0b5ed7);
    padding: 10px 16px;
    border-radius: 8px;
    width: 200px;
    color: white;
    font-family: Arial, sans-serif;
}

.user-info[b-thjgapmhg6] {
    overflow: hidden;
}

.user-name[b-thjgapmhg6] {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-avatar[b-thjgapmhg6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden; /* 🔥 ESSENCIAL */
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Imagem ocupa todo o espaço */
    .user-avatar img[b-thjgapmhg6] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 🔥 mantém proporção e corta */
    }
/* /Components/NotificacoesModal.razor.rz.scp.css */
.notif-overlay[b-7jn468fep5] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 64px 16px 16px;
    box-sizing: border-box;
}

.notif-modal[b-7jn468fep5] {
    width: 420px;
    max-width: 100%;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    color: #1f2937;
}

.notif-cabecalho[b-7jn468fep5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eef1f6;
}

    .notif-cabecalho h2[b-7jn468fep5] {
        margin: 0;
        font-size: 16px;
    }

.notif-fechar[b-7jn468fep5] {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0 4px;
}

    .notif-fechar:hover[b-7jn468fep5] {
        color: #1f2937;
    }

.notif-barra[b-7jn468fep5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #eef1f6;
    font-size: 12px;
}

.notif-select[b-7jn468fep5] {
    border: 1px solid #d5dbe5;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    max-width: 200px;
}

.notif-check[b-7jn468fep5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #3d4759;
    cursor: pointer;
    user-select: none;
}

.notif-link[b-7jn468fep5] {
    border: none;
    background: none;
    color: #0056b3;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

    .notif-link:hover[b-7jn468fep5] {
        text-decoration: underline;
    }

.notif-corpo[b-7jn468fep5] {
    overflow-y: auto;
}

.notif-vazio[b-7jn468fep5] {
    padding: 32px 16px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}

.notif-lista[b-7jn468fep5] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-item[b-7jn468fep5] {
    padding: 10px 16px;
    border-bottom: 1px solid #eef1f6;
}

    .notif-item:last-child[b-7jn468fep5] {
        border-bottom: none;
    }

    .notif-item.nao-lida[b-7jn468fep5] {
        background: #f0f6ff;
    }

        .notif-item.nao-lida .notif-titulo[b-7jn468fep5] {
            font-weight: 700;
        }

.notif-linha1[b-7jn468fep5] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.notif-titulo[b-7jn468fep5] {
    font-size: 13px;
}

.notif-data[b-7jn468fep5] {
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.notif-msg[b-7jn468fep5] {
    margin-top: 2px;
    font-size: 12px;
    color: #55606e;
    overflow-wrap: anywhere;
}

.notif-acoes[b-7jn468fep5] {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

@media (max-width: 560px) {
    .notif-overlay[b-7jn468fep5] {
        padding: 56px 8px 8px;
    }
}
/* /Components/ObservacoesModal.razor.rz.scp.css */
.obs-modal-overlay[b-up6mxeo7q3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.obs-modal[b-up6mxeo7q3] {
    background: white;
    border-radius: 14px;
    width: 520px;
    max-width: 92vw;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    /* O modal inteiro rola (cabeçalho fixo no topo): antes só a lista de follow-ups rolava e
       os blocos acima dela (atualização, etiquetas, novo follow, envio) eram espremidos em
       tela baixa até ficarem ilegíveis. */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Nenhuma seção encolhe: o que não cabe rola, não comprime. */
.obs-modal > *[b-up6mxeo7q3] {
    flex-shrink: 0;
}

.obs-modal-header[b-up6mxeo7q3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
    cursor: move;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 3;
    background: white;
}

/* Puxador de redimensionar — canto inferior direito, mesma linguagem visual do
   col-resize-handle da tabela (processos-visual.css). Genérico: reutilizável em qualquer
   modal que ganhe as classes modal-arrastavel/modal-arrastavel-header. */
.modal-resize-handle[b-up6mxeo7q3] {
    position: sticky;
    align-self: flex-end;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    margin-top: -18px;
    cursor: nwse-resize;
    z-index: 3;
}

    .modal-resize-handle[b-up6mxeo7q3]::after {
        content: "";
        position: absolute;
        right: 4px;
        bottom: 4px;
        width: 9px;
        height: 9px;
        border-right: 2px solid #c3ccd8;
        border-bottom: 2px solid #c3ccd8;
    }

    .modal-resize-handle:hover[b-up6mxeo7q3]::after {
        border-color: #8a94a3;
    }

    .obs-modal-header h3[b-up6mxeo7q3] {
        margin: 0;
        font-size: 16px;
        color: #1f2937;
    }

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

    .obs-modal-fechar:hover[b-up6mxeo7q3] {
        background: #f3f6fa;
        color: #1f2937;
    }

/* ===== Confirmação de atualização (registrarAtendimento), incorporada aqui — antes era um
   modal à parte (ImpoProcessos.razor .liberar-modal), agora fica junto do follow-up porque
   as duas ações quase sempre andam juntas. ===== */
.obs-modal-atualizacao[b-up6mxeo7q3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f3;
    background: #fafbfd;
}

.obs-atualizacao-linha[b-up6mxeo7q3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.obs-atualizacao-prazo[b-up6mxeo7q3] {
    font-size: 12px;
    color: #55606e;
}

.obs-atualizacao-acoes[b-up6mxeo7q3] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .obs-atualizacao-acoes button[b-up6mxeo7q3] {
        flex: 1;
        min-width: 150px;
        border: none;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .obs-atualizacao-acoes button:disabled[b-up6mxeo7q3] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.obs-atualizacao-replicar[b-up6mxeo7q3] {
    background: #eef2f6;
    color: #16232e;
}

    .obs-atualizacao-replicar:hover:not(:disabled)[b-up6mxeo7q3] {
        background: #e2e8f0;
    }

.obs-atualizacao-registrar[b-up6mxeo7q3] {
    background: #0b4f71;
    color: white;
}

    .obs-atualizacao-registrar:hover:not(:disabled)[b-up6mxeo7q3] {
        background: #073853;
    }

.obs-atualizacao-dica[b-up6mxeo7q3] {
    margin: 0;
    font-size: 11px;
    color: #8a94a3;
}

/* ===== Etiquetas, incorporadas aqui — antes só dava pra editar na lista ou (desde a última
   sessão) no Processo Detalhe; agora também direto no modal de follow-up. ===== */
.obs-modal-etiquetas[b-up6mxeo7q3] {
    padding: 12px 20px;
    border-bottom: 1px solid #eef0f3;
}

.obs-etiqueta-editor[b-up6mxeo7q3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background: #f7fafc;
    border-radius: 8px;
}

.obs-etiqueta-editor-acoes[b-up6mxeo7q3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.obs-modal-novo[b-up6mxeo7q3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
}

.obs-modal-textarea[b-up6mxeo7q3] {
    resize: vertical;
    min-height: 60px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    font-family: inherit;
}

    .obs-modal-textarea:focus[b-up6mxeo7q3] {
        outline: none;
        border-color: #007bff;
    }

.obs-modal-adicionar[b-up6mxeo7q3] {
    align-self: flex-end;
    border: none;
    background: #0d6efd;
    color: white;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .obs-modal-adicionar:hover[b-up6mxeo7q3] {
        background: #0b5ed7;
    }

    .obs-modal-adicionar:disabled[b-up6mxeo7q3] {
        background: #c3cbd6;
        cursor: not-allowed;
    }

.obs-modal-lista[b-up6mxeo7q3] {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Sobra do redimensionar (modal-drag-resize.js) vai pra lista — é a parte que faz
       sentido crescer quando o modal fica mais alto. */
    flex: none;
    min-height: 60px;
}

.obs-modal-vazio[b-up6mxeo7q3] {
    color: #8a94a3;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

.obs-item[b-up6mxeo7q3] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 10px 12px;
}

.obs-item-meta[b-up6mxeo7q3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.obs-item-quem[b-up6mxeo7q3] {
    display: flex;
    gap: 8px;
}

.obs-item-remover[b-up6mxeo7q3] {
    border: none;
    background: transparent;
    color: #adb5bd;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

    .obs-item-remover:hover[b-up6mxeo7q3] {
        background: rgba(220, 53, 69, 0.12);
        color: #dc3545;
    }

.obs-item-texto[b-up6mxeo7q3] {
    font-size: 13px;
    color: #1a202c;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Concluído: o registro continua no histórico (não some), só fica visualmente "resolvido" —
   mesma lógica do resto do app (fato/marcação nunca é apagado, só marcado). */
.obs-item-concluido[b-up6mxeo7q3] {
    opacity: 0.6;
}

    .obs-item-concluido .obs-item-texto[b-up6mxeo7q3] {
        text-decoration: line-through;
    }

.obs-item-badge-cliente[b-up6mxeo7q3] {
    display: inline-flex;
    align-items: center;
    background: #fff3cd;
    color: #856404;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 7px;
    border-radius: 10px;
}

.obs-item-flags[b-up6mxeo7q3] {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}

.obs-item-flag-check[b-up6mxeo7q3] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #55606e;
    cursor: pointer;
}

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

/* ===== Envio do follow-up por e-mail ===== */

.obs-modal-envio[b-up6mxeo7q3] {
    border-top: 1px solid #eef0f3;
    padding: 12px 20px 16px;
}

.obs-envio-toggle[b-up6mxeo7q3] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: #0b4f71;
    cursor: pointer;
}

.obs-envio-corpo[b-up6mxeo7q3] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .obs-envio-corpo label[b-up6mxeo7q3] {
        font-size: 11.5px;
        font-weight: 600;
        color: #55606e;
        margin-top: 6px;
    }

.obs-envio-input[b-up6mxeo7q3] {
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid #dcdcdc;
    font-size: 12.5px;
    font-family: inherit;
}

    .obs-envio-input:focus[b-up6mxeo7q3] {
        outline: none;
        border-color: #0b4f71;
    }

    .obs-envio-input:disabled[b-up6mxeo7q3] {
        background: #f3f6fa;
        color: #8a94a3;
    }

.obs-envio-nota[b-up6mxeo7q3] {
    margin: 2px 0 0;
    font-size: 11px;
    color: #8a94a3;
}

.obs-envio-acoes[b-up6mxeo7q3] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

    .obs-envio-acoes button[b-up6mxeo7q3] {
        flex: 1;
        border: none;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .obs-envio-acoes button:disabled[b-up6mxeo7q3] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.obs-envio-copiar[b-up6mxeo7q3] {
    background: #eef2f6;
    color: #16232e;
}

    .obs-envio-copiar:hover:not(:disabled)[b-up6mxeo7q3] {
        background: #e2e8f0;
    }

.obs-envio-enviar[b-up6mxeo7q3] {
    background: #0b4f71;
    color: white;
}

    .obs-envio-enviar:hover:not(:disabled)[b-up6mxeo7q3] {
        background: #073853;
    }

.obs-envio-mensagem[b-up6mxeo7q3] {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
}

    .obs-envio-mensagem.sucesso[b-up6mxeo7q3] {
        color: #2e7d5b;
    }

    .obs-envio-mensagem.erro[b-up6mxeo7q3] {
        color: #b5423a;
    }

.pend-declarada[b-up6mxeo7q3] {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #e3f4ea;
    color: #1e7a3c;
    font-size: 12px;
    font-weight: 600;
}
/* /Components/Pages/AcessoNegado.razor.rz.scp.css */
.acesso-container[b-6od1psipps] {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f6f9;
    padding: 20px;
}

.card-acesso[b-6od1psipps] {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 18px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 6px solid #d32f2f;
}

.icone[b-6od1psipps] {
    font-size: 70px;
    margin-bottom: 20px;
}

.card-acesso h1[b-6od1psipps] {
    margin: 0;
    font-size: 34px;
    color: #d32f2f;
    font-weight: 700;
}

.descricao[b-6od1psipps] {
    margin-top: 20px;
    font-size: 18px;
    color: #444;
}

.detalhe[b-6od1psipps] {
    margin-top: 10px;
    font-size: 14px;
    color: #777;
    line-height: 1.5;
}

.btn-voltar[b-6od1psipps] {
    margin-top: 30px;
    border: none;
    background: #1976d2;
    color: white;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-voltar:hover[b-6od1psipps] {
        background: #1259a7;
        transform: translateY(-2px);
    }
/* /Components/Pages/AdminUsuarios.razor.rz.scp.css */
.admin-usuarios[b-ioj52gkkmz] {
    padding: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.admin-usuarios-subtitulo[b-ioj52gkkmz] {
    color: #6b7684;
    font-size: 13px;
    margin: 0 0 20px;
    max-width: 640px;
}

.admin-usuarios-form[b-ioj52gkkmz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: white;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

    .admin-usuarios-form label[b-ioj52gkkmz] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
    }

.admin-usuarios-input[b-ioj52gkkmz] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    font-family: inherit;
    min-width: 240px;
}

.admin-usuarios-check[b-ioj52gkkmz] {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    cursor: pointer;
}

    .admin-usuarios-check input[type="checkbox"][b-ioj52gkkmz] {
        cursor: pointer;
    }

.admin-usuarios-servicos[b-ioj52gkkmz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}

.admin-usuarios-servicos-titulo[b-ioj52gkkmz] {
    font-size: 12px;
    font-weight: 600;
    color: #55606e;
}

.admin-usuarios-servicos-nota[b-ioj52gkkmz] {
    font-size: 11px;
    color: #8a94a3;
    font-weight: 400;
}

.admin-usuarios-servicos-lista[b-ioj52gkkmz] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-usuarios-acoes-form[b-ioj52gkkmz] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.admin-usuarios-btn-primario[b-ioj52gkkmz] {
    border: none;
    background: #0b4f71;
    color: white;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .admin-usuarios-btn-primario:hover:not(:disabled)[b-ioj52gkkmz] {
        background: #073853;
    }

    .admin-usuarios-btn-primario:disabled[b-ioj52gkkmz] {
        background: #c3cbd6;
        cursor: not-allowed;
    }

.admin-usuarios-btn-secundario[b-ioj52gkkmz] {
    border: 1px solid #d8dee6;
    background: white;
    color: #16232e;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .admin-usuarios-btn-secundario:hover[b-ioj52gkkmz] {
        background: #f3f6fa;
    }

.admin-usuarios-mensagem[b-ioj52gkkmz] {
    width: 100%;
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 600;
}

    .admin-usuarios-mensagem.sucesso[b-ioj52gkkmz] {
        color: #2e7d5b;
    }

    .admin-usuarios-mensagem.erro[b-ioj52gkkmz] {
        color: #b5423a;
    }

.admin-usuarios-tabela[b-ioj52gkkmz] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    overflow: hidden;
    font-size: 12.5px;
}

    .admin-usuarios-tabela th[b-ioj52gkkmz] {
        text-align: left;
        padding: 10px 12px;
        background: #f3f6fa;
        color: #55606e;
        font-weight: 600;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        border-bottom: 1px solid #d8dee6;
    }

    .admin-usuarios-tabela td[b-ioj52gkkmz] {
        padding: 9px 12px;
        border-bottom: 1px solid #eef0f3;
        color: #16232e;
    }

.admin-usuarios-vazio[b-ioj52gkkmz] {
    text-align: center;
    color: #8a94a3;
    padding: 20px !important;
}

.admin-usuarios-linha-acoes[b-ioj52gkkmz] {
    display: flex;
    gap: 6px;
}

.admin-usuarios-btn-icone[b-ioj52gkkmz] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 6px;
}

    .admin-usuarios-btn-icone:hover[b-ioj52gkkmz] {
        background: #f3f6fa;
    }
/* /Components/Pages/AgenciamentoExportConfig.razor.rz.scp.css */
.export-config-container[b-jyogwfthd2] {
    padding: 20px;
    background: #f5f7fb;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.export-config-card[b-jyogwfthd2] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 28px;
    max-width: 960px;
    width: 100%;
    height: fit-content;
}

.export-config-header h1[b-jyogwfthd2] {
    margin: 0 0 6px 0;
    font-size: 22px;
    color: #1f2937;
}

.export-config-header p[b-jyogwfthd2] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6c757d;
}

.export-config-atalhos[b-jyogwfthd2] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.link-atalho[b-jyogwfthd2] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}

    .link-atalho:hover[b-jyogwfthd2] {
        text-decoration: underline;
    }

.export-config-secao[b-jyogwfthd2] {
    padding: 14px 0;
    border-top: 1px solid #eef0f3;
}

    .export-config-secao:last-of-type[b-jyogwfthd2] {
        border-bottom: 1px solid #eef0f3;
    }

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

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

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

    .export-config-item input[type="checkbox"][b-jyogwfthd2] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #007bff;
    }

.export-config-acoes[b-jyogwfthd2] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.btn-voltar[b-jyogwfthd2] {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .btn-voltar:hover[b-jyogwfthd2] {
        background: #f3f6fa;
    }

.btn-salvar[b-jyogwfthd2] {
    border: none;
    background: linear-gradient(135deg, #198754, #157347);
    color: white;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-salvar:hover[b-jyogwfthd2] {
        filter: brightness(1.05);
    }

.export-config-mensagem[b-jyogwfthd2] {
    margin-top: 14px;
    font-size: 13px;
    color: #155724;
    background: #d4edda;
    border-radius: 8px;
    padding: 8px 12px;
}
/* /Components/Pages/AgenciamentoProcessoDetalhe.razor.rz.scp.css */
.processo-container[b-uu1glqincp] {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: #f8f9fa;
}

/* Cabeçalho */
.processo-header[b-uu1glqincp] {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-left: 5px solid #0056b3;
}

.header-main[b-uu1glqincp] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .header-main h1[b-uu1glqincp] {
        margin: 0;
        font-size: 24px;
        color: #1a202c;
    }

.header-meta p[b-uu1glqincp] {
    margin: 4px 0;
    font-size: 14px;
    text-align: right;
}

/* Badges */
.badge[b-uu1glqincp] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge[b-uu1glqincp] {
    background: #e2e8f0;
    color: #4a5568;
}

.modal-badge[b-uu1glqincp] {
    background: #d0e7ff;
    color: #004085;
    text-transform: none;
}

.canal-verde[b-uu1glqincp] {
    background: #d4edda;
    color: #155724;
}

.canal-amarelo[b-uu1glqincp] {
    background: #fff3cd;
    color: #856404;
}

.canal-vermelho[b-uu1glqincp] {
    background: #f8d7da;
    color: #721c24;
}

.canal-cinza[b-uu1glqincp] {
    background: #e2e3e5;
    color: #383d41;
}

/* Grid de Cards */
.dashboard-grid[b-uu1glqincp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

/* Força o card de cronograma a ocupar toda a largura nas telas grandes */
.timestamps-card[b-uu1glqincp] {
    grid-column: 1 / -1;
}

/* Estrutura dos Cards */
.info-card[b-uu1glqincp] {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
}

    .info-card h2[b-uu1glqincp] {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid #edf2f7;
        color: #2d3748;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.card-content[b-uu1glqincp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.data-group[b-uu1glqincp] {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

    .data-group strong[b-uu1glqincp] {
        color: #718096;
        font-size: 12px;
        margin-bottom: 2px;
    }

    .data-group span[b-uu1glqincp] {
        color: #1a202c;
        font-weight: 500;
        word-break: break-word;
    }

/* Timeline Específica do Embarque */
.timeline-summary[b-uu1glqincp] {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.timeline-step[b-uu1glqincp] {
    background: #f7fafc;
    padding: 12px;
    border-radius: 6px;
    flex: 1;
    min-width: 200px;
    font-size: 13px;
}

    .timeline-step p[b-uu1glqincp] {
        margin: 4px 0;
    }

.confirmed[b-uu1glqincp] {
    color: #2b6cb0;
    font-weight: 500;
}

/* Responsividade */
@media (max-width: 768px) {
    .dashboard-grid[b-uu1glqincp] {
        grid-template-columns: 1fr;
    }

    .card-content[b-uu1glqincp] {
        grid-template-columns: 1fr;
    }

    .processo-header[b-uu1glqincp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-meta p[b-uu1glqincp] {
        text-align: left;
    }
}
/* /Components/Pages/AgenciamentoProcessosFluxo.razor.rz.scp.css */
.layout-processos[b-kn0gx66ne0] {
    --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;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Tela inteira, sem rolar a página: só a área de linhas da tabela rola (ver
       .tabela-scroll-body). 80px é a altura do menu superior (.top-row), mesma referência já
       usada no min-height antigo. dvh em vez de vh: em mobile a barra de endereço some/aparece
       e recalcula vh, dvh acompanha sem sobrar espaço morto. */
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    background: #f5f7fb;
}

/* ---------- fixados (linhas no início da própria tabela, arrasta e solta) ---------- */

.linha-fixada[b-kn0gx66ne0] {
    background: #fffdf5;
}

    .linha-fixada:hover[b-kn0gx66ne0] {
        background: #fef8e4;
    }

.linha-fixada-arrastando[b-kn0gx66ne0] {
    opacity: 0.4;
}

.fixado-arrastar[b-kn0gx66ne0] {
    color: #b5aa7a;
    cursor: grab;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.referencia-linha[b-kn0gx66ne0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fixar-btn[b-kn0gx66ne0] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.25;
    filter: grayscale(1);
}

    .fixar-btn:hover[b-kn0gx66ne0] {
        opacity: 0.7;
    }

    .fixar-btn.fixar-btn-ativo[b-kn0gx66ne0] {
        opacity: 1;
        filter: none;
    }

/* Loader de carregamento inicial (.pagina-carregando-overlay / .loader) virou global —
   ver wwwroot/css/processos-visual.css — porque o Portal do Cliente (CSS isolado próprio,
   sem acesso a este arquivo) também usa o mesmo componente PaginaCarregando. */

/* Cards KPI, chips de Status Operacional, badge de status/SLA, ícone de modal e marcas de
   etapa agora são visual compartilhado — ver wwwroot/css/processos-visual.css (global) e
   Components/Shared/KpiCardsProcessos.razor / StatusChipsProcessos.razor. Também usado pelo
   Portal do Cliente, para as duas telas manterem a mesma identidade visual. */

/* =========================================
   CONTEUDO
========================================= */

.conteudo-processos[b-kn0gx66ne0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* =========================================
   TOPO
========================================= */

/* =========================================
   FILEIRA 1 — visão geral (KPIs) + ações. Sempre a primeira coisa depois do
   título: os totais dão o panorama antes de qualquer filtro.
========================================= */

.painel-kpis[b-kn0gx66ne0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
}

.kpi-row-wrap[b-kn0gx66ne0] {
    /* flex:1/min-width:0 (sizing dentro de .painel-kpis, flex-row) ficam aqui — só valem pra
       tela interna. overflow-x/overflow-y/padding-bottom e o :has() de filtros abertos
       mudaram pra processos-visual.css (global): o Portal do Cliente usa a mesma classe e
       precisava do mesmo comportamento, que CSS isolado nunca alcançava (ver lá). */
    flex: 1;
    min-width: 0;
}

/* =========================================
   FILEIRA 2 — FILTROS, logo abaixo dos cards
========================================= */

.filtros-container[b-kn0gx66ne0] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    background: white;
    border: 1px solid var(--cv-line);
    border-radius: 9px;
    padding: 6px 10px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.04);
    box-sizing: border-box;
}

/* .label-filtro, .input-filtro, .filtro-dropdown, .filtro-checkbox, .filtro-busca-*,
   .filtro-data-range e .input-data MUDARAM pra wwwroot/css/processos-visual.css (global) —
   essas classes eram só CSS ISOLADO deste arquivo, mas o Portal do Cliente
   (PortalProcessos.razor) usa os MESMOS nomes de classe pros próprios campos de filtro.
   Isolamento de CSS do Blazor carimba um atributo [b-xxxx] só nos elementos renderizados por
   ESTE componente — o Portal, sendo outro componente, nunca recebia essas regras, e os campos
   apareciam sem estilo nenhum (borda/fundo/fonte padrão do navegador). Ver processos-visual.css
   pra editar essas classes agora — mexer aqui não alcança mais o Portal. */

/* =========================================
   TABELA
========================================= */

.paginacao-container[b-kn0gx66ne0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--cv-line);
    /* Fora de .tabela-scroll-body (ver acima) — sempre visível por estrutura, não por sticky:
       só a área de linhas rola, cabeçalho e rodapé da tabela ficam fixos por fora dela.
       Mesmo tom do cabeçalho da tabela (.table thead, --cv-surface-alt) — leve contraste com
       o branco do card, marcando visualmente onde a área rolável termina. */
    flex-shrink: 0;
    background: var(--cv-surface-alt);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.paginacao-info[b-kn0gx66ne0] {
    font-size: 12.5px;
    color: #6b7684;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
}

.paginacao-tamanho[b-kn0gx66ne0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6b7684;
}

    .paginacao-tamanho select[b-kn0gx66ne0] {
        max-width: 80px;
        padding: 5px 8px;
        max-height: none;
    }

.paginacao-nav[b-kn0gx66ne0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.paginacao-atual[b-kn0gx66ne0] {
    font-size: 12.5px;
    color: var(--cv-ink);
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    margin: 0 6px;
    white-space: nowrap;
}

.btn-paginacao[b-kn0gx66ne0] {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--cv-line);
    background: white;
    color: var(--cv-brand);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .btn-paginacao:hover:not(:disabled)[b-kn0gx66ne0] {
        background: var(--cv-surface-alt);
        border-color: var(--cv-brand);
    }

    .btn-paginacao:disabled[b-kn0gx66ne0] {
        color: #b7c0cc;
        cursor: not-allowed;
    }

.tabela-resultado[b-kn0gx66ne0] {
    position: relative;
    width: 100%;
    background: white;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Só esta área rola — cabeçalho (.painel-kpis) e rodapé (.paginacao-container) ficam fora
   dela, sempre visíveis. overflow:auto nos dois eixos: vertical rola as linhas, horizontal
   continua rolando a tabela quando as colunas somadas passam da largura disponível (era
   overflow-x do .tabela-resultado antes desta divisão). thead th já é position:sticky;top:0
   (ver mais abaixo) — com a rolagem vertical acontecendo AQUI, é a este elemento que o
   cabeçalho da tabela gruda, não mais ao topo da página inteira. */
.tabela-scroll-body[b-kn0gx66ne0] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tabela-carregando-overlay[b-kn0gx66ne0] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-brand, #0b4f71);
}

.tabela-carregando-spinner[b-kn0gx66ne0] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--cv-line, #d8dee6);
    border-top-color: var(--cv-brand, #0b4f71);
    animation: tabela-carregando-girar-b-kn0gx66ne0 0.7s linear infinite;
}

@keyframes tabela-carregando-girar-b-kn0gx66ne0 {
    to { transform: rotate(360deg); }
}

.table[b-kn0gx66ne0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', sans-serif;
}

/* Colunas redimensionáveis por arrasto (column-resize.js) — table-layout:fixed pra cada
   <th> respeitar exatamente a largura definida (inline, via EstiloLargura) em vez de
   recalcular sozinho pelo conteúdo. Colunas sem largura salva ainda dividem o espaço
   sobrando normalmente, então nada muda até o usuário arrastar pela primeira vez.

   width:auto (em vez de herdar o width:100% de .table) + min-width:100% é o que faz a
   tabela crescer além do container quando as colunas somadas passam da largura
   disponível — junto com o min-width somado em EstiloTabela() e o overflow-x:auto de
   .tabela-resultado, a tabela rola de lado em vez de espremer cada coluna pra caber. */
.tabela-redimensionavel[b-kn0gx66ne0] {
    /* width vem inline (EstiloTabela(), em px) — nada de width:auto/min-width:100% aqui: com
       table-layout:fixed, isso faz a tabela esticar até o container quando a soma das colunas
       é menor que o espaço disponível, e o fixed reparte a sobra entre as colunas em vez de
       deixar espaço em branco. A tabela pode ficar mais estreita que o card; quem cresce além
       do container aciona o scroll horizontal de .tabela-scroll-body — as colunas nunca. */
    table-layout: fixed;
}

    .tabela-redimensionavel th[b-kn0gx66ne0] {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tabela-redimensionavel td[b-kn0gx66ne0] {
        overflow: hidden;
        text-overflow: ellipsis;
    }



    .table thead[b-kn0gx66ne0] {
        /* Mesma cor do cabeçalho da tabela do Portal do Cliente (.portal-tabela th) — as
           duas telas mostram o mesmo tipo de dado, não faz sentido a interna parecer outro
           produto. */
        background: #f3f6fa;
        color: #55606e;
    }

    .table th[b-kn0gx66ne0] {
        text-align: left;
        padding: 14px;
        font-size: 12px;
        position: sticky;
        top: 0;
        z-index: 1;
        /* th sticky é sua própria caixa pintada — sem background PRÓPRIO aqui, fica
           transparente ao colar no topo da rolagem (.tabela-scroll-body) e deixa as linhas
           passarem por baixo visualmente, mesmo com a cor certa lá no .table thead. */
        background: #f3f6fa;
        /* Sem isto, arrastar perto do puxador de redimensionar ou do cabeçalho arrastável
           (column-drag.js) seleciona o texto como texto comum — a cor de seleção padrão do
           navegador é clara, e por cima do cabeçalho branco-sobre-azul o texto selecionado
           fica praticamente invisível. Cabeçalho não é conteúdo pra selecionar mesmo. */
        user-select: none;
    }

        .table th:first-child[b-kn0gx66ne0] {
            border-top-left-radius: 10px;
        }

        .table th:last-child[b-kn0gx66ne0] {
            border-top-right-radius: 10px;
        }

    .th-ordenavel[b-kn0gx66ne0] {
        user-select: none;
        white-space: nowrap;
    }

    .table td[b-kn0gx66ne0] {
        padding: 8px;
        font-size: 12px;
        border-bottom: 1px solid #eef0f3;
        vertical-align: middle;
    }

    /* Rodapé de total das colunas financeiras (ValorNumerario/ValorImpostosFederais) — soma
       do conjunto FILTRADO inteiro, não só a página visível (ver agregados em
       ConsultarTotaisFinanceiros). Fundo diferente e texto em negrito pra não confundir com
       uma linha de processo comum; sticky no fim da rolagem vertical da tabela. */
    .linha-total-financeiro td[b-kn0gx66ne0] {
        background: #f3f6fa;
        font-weight: 700;
        color: #16232e;
        border-top: 2px solid #d8dee6;
        border-bottom: none;
        position: sticky;
        bottom: 0;
        cursor: default;
    }

    .table tbody tr[b-kn0gx66ne0] {
        cursor: pointer;
    }

    /* Zebrado bem claro — só nas linhas normais, nunca sobre fixada (bg próprio #fffdf5) nem
       sobre o rodapé de total financeiro (bg próprio, sticky). */
    .table tbody tr:nth-child(even):not(.linha-fixada):not(.linha-total-financeiro)[b-kn0gx66ne0] {
        background: #fafbfd;
    }

    .table tbody tr:hover[b-kn0gx66ne0] {
        background: #eef6ff;
    }

/* =========================================
   REFERÊNCIA (+ referência do cliente, em linha menor)
========================================= */

/* Quebra em vez de cortar com "..." — texto se adapta à largura da coluna, sem teto de
   linhas nem corte: nome completo do cliente sempre visível. */
.referencia-principal[b-kn0gx66ne0] {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Só a tela interna: badge de Autorização de Embarque sai do lado direito da célula (ver
   .celula-exportador-agrupada global) e desce pra baixo do país de origem, compacto — o
   Portal continua com o agrupamento em linha original. */
.celula-exportador-agrupada-empilhada[b-kn0gx66ne0] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

    .celula-exportador-agrupada-empilhada .badge-autorizacao-embarque-compacto[b-kn0gx66ne0] {
        margin-top: 1px;
    }

.referencia-cliente-sub[b-kn0gx66ne0] {
    margin-top: 2px;
    font-size: 10.5px;
    color: #8a94a3;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    max-width: 240px;
}

/* Célula de modal, badge de status/SLA (cores por fase do pipeline) — ver
   wwwroot/css/processos-visual.css */

/* =========================================
   ETIQUETAS (estilo categoria do Outlook)
========================================= */

/* .etiquetas-lista, .etiqueta-tag, .etiqueta-add-icon, .etiqueta-modal,
   .etiqueta-visivel-cliente, .btn-etiqueta-excluir, .paleta-cores, .swatch* MUDARAM pra
   wwwroot/css/processos-visual.css (global) — eram CSS isolado deste arquivo, mas o editor
   de etiquetas agora também é usado em ProcessoDetalhe.razor (outro componente), que nunca
   receberia essas regras isoladas (mesmo motivo já documentado pros filtros do Portal). */

/* Versão compacta: linhas mais baixas, sem quebra de linha, mais densa */
.table-compacta th[b-kn0gx66ne0],
.table-compacta td[b-kn0gx66ne0] {
    white-space: nowrap;
}

.table-compacta th[b-kn0gx66ne0] {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.table-compacta td[b-kn0gx66ne0] {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.3;
}

.table-compacta tbody tr:nth-child(even)[b-kn0gx66ne0] {
    background: #f8fafc;
}

.table-compacta tbody tr:nth-child(even):hover[b-kn0gx66ne0] {
    background: #eef6ff;
}

/* Colunas de etapa do fluxo (.th-etapa / .celula-etapa / .celula-etapa-clicavel) — ver
   wwwroot/css/processos-visual.css. Somente leitura: refletem o que está registrado no
   iData. A marcação manual das etapas de checklist entra na sobreposição (banco local). */


/* Marcas de etapa (.etapa-marca / .etapa-concluida / etc.) — ver wwwroot/css/processos-visual.css */

/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 1100px) {

    .kpi-row-principal[b-kn0gx66ne0] {
        flex-direction: column;
    }

    .kpi-grupo-direita[b-kn0gx66ne0] {
        align-items: flex-start;
    }

    .kpi-grupo-cards[b-kn0gx66ne0] {
        flex-wrap: wrap;
    }

    .kpi-total[b-kn0gx66ne0],
    .kpi-pill[b-kn0gx66ne0],
    .kpi-modal[b-kn0gx66ne0] {
        flex: 1 1 auto;
        min-width: 100%;
        max-width: 100%;
    }
}

/* Cores dos cards por responsabilidade/modal (.resp-*/.modal-*) — ver
   wwwroot/css/processos-visual.css */[b-kn0gx66ne0]

/* .menu-colunas-dropdown / .menu-colunas-item — visual compartilhado, ver
   wwwroot/css/processos-visual.css */

 .btn-export-mini-colunas {
    background: linear-gradient(135deg, #64748b, #475569);
}

/* Menu "Exportar" — botão só com ícone (sem rótulo de texto), na mesma linha do
   "🧩 Colunas". Dropdown continua com as 3 opções (Configurar/CSV/Excel). */

[b-kn0gx66ne0] .menu-exportar-dropdown {
    left: auto;
    right: 0;
    min-width: 220px;
    padding: 6px;
}

[b-kn0gx66ne0] .menu-exportar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12.5px;
    color: var(--cv-ink);
    text-decoration: none;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

    [b-kn0gx66ne0] .menu-exportar-item:hover {
        background: var(--cv-surface-alt);
    }

    [b-kn0gx66ne0] .menu-exportar-item .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
    }

/* =========================================
   FOLLOW-UP (ícone de observações)
========================================= */

.obs-icone[b-kn0gx66ne0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.4;
    filter: grayscale(1);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

    .obs-icone:hover[b-kn0gx66ne0] {
        opacity: 0.9;
        filter: grayscale(0);
        background: #f3f6fa;
    }

.obs-icone-preenchido[b-kn0gx66ne0] {
    opacity: 1;
    filter: grayscale(0);
}

.obs-icone-contador[b-kn0gx66ne0] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: white;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    padding: 2px 4px;
    min-width: 12px;
    text-align: center;
}

/* Freetime/armazenagem — mesma paleta do resto do painel (verde/amarelo/vermelho), aqui só a
   data mais urgente das duas; o restante fica no title (tooltip) e no Processo Detalhe. */
.venc-operacional-vazio[b-kn0gx66ne0] {
    color: #adb5bd;
}

.badge-venc-operacional[b-kn0gx66ne0] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-venc-verde[b-kn0gx66ne0] {
    background: #d4edda;
    color: #155724;
}

.badge-venc-amarelo[b-kn0gx66ne0] {
    background: #fff3cd;
    color: #856404;
}

.badge-venc-vermelho[b-kn0gx66ne0] {
    background: #f8d7da;
    color: #721c24;
}

.btn-liberar-digitacao[b-kn0gx66ne0] {
    border: none;
    background: linear-gradient(135deg, var(--cv-brand), var(--cv-brand-deep));
    color: white;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-liberar-digitacao:hover[b-kn0gx66ne0] {
        filter: brightness(1.05);
    }

.btn-liberar-digitacao-icone[b-kn0gx66ne0] {
    border: none;
    background: linear-gradient(135deg, #0b4f71, #083a54);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .12s ease;
}

    .btn-liberar-digitacao-icone svg[b-kn0gx66ne0] {
        width: 13px;
        height: 13px;
    }

    .btn-liberar-digitacao-icone:hover[b-kn0gx66ne0] {
        filter: brightness(1.12);
    }

    .btn-liberar-digitacao-icone:focus-visible[b-kn0gx66ne0] {
        outline: 2px solid #0b4f71;
        outline-offset: 2px;
    }

.digitacao-liberada[b-kn0gx66ne0] {
    font-size: 11px;
    font-weight: 600;
    color: #155724;
    white-space: nowrap;
}

.digitacao-pendente[b-kn0gx66ne0] {
    font-size: 12px;
    color: #adb5bd;
}

.link-atalho[b-kn0gx66ne0] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: var(--cv-brand, #0b4f71);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

/* =========================================
   AGENCIAMENTO — só o que não existe em Importação (base deste arquivo, copiada de
   ImpoProcessos.razor.css). Etiqueta-tag/swatch/paleta-cores/etiquetas-lista/
   etiqueta-add-icon já são globais (processos-visual.css) — não repetidos aqui.
========================================= */

.etiqueta-cell[b-kn0gx66ne0] {
    width: 1%;
}

.etiqueta-remover[b-kn0gx66ne0] {
    font-weight: bold;
    opacity: 0.8;
    padding: 0 2px;
    border-radius: 3px;
}

    .etiqueta-remover:hover[b-kn0gx66ne0] {
        opacity: 1;
        background: rgba(0,0,0,0.15);
    }

.etiqueta-editor[b-kn0gx66ne0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: white;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    width: max-content;
}

.etiqueta-editor-linha[b-kn0gx66ne0] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.etiqueta-input[b-kn0gx66ne0] {
    flex: none;
    box-sizing: border-box;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 11px;
    width: 130px;
}

    .etiqueta-input:focus[b-kn0gx66ne0] {
        outline: none;
        border-color: #007bff;
    }

.btn-etiqueta-ok[b-kn0gx66ne0] {
    flex: none;
    border: none;
    background: #0d6efd;
    color: white;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-etiqueta-ok:hover[b-kn0gx66ne0] {
        background: #0b5ed7;
    }
/* /Components/Pages/ChecklistConferencia.razor.rz.scp.css */
.conferencia-container[b-oxqlzhy05x] {
    padding: 20px;
    background: #f5f7fb;
    min-height: 100vh;
    box-sizing: border-box;
}

.conferencia-topo[b-oxqlzhy05x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

    .conferencia-topo h1[b-oxqlzhy05x] {
        margin: 0;
        font-size: 20px;
        color: #1f2937;
    }

.conferencia-abas[b-oxqlzhy05x] {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 16px;
}

.aba-item[b-oxqlzhy05x] {
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.aba-item.aba-ativa[b-oxqlzhy05x] {
    color: #0056b3;
    border-bottom-color: #0056b3;
}

.conferencia-filtros[b-oxqlzhy05x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

    .conferencia-filtros .input-texto[b-oxqlzhy05x] {
        min-width: 200px;
    }

    .conferencia-filtros .input-select[b-oxqlzhy05x] {
        min-width: 160px;
    }

.conferencia-mensagem[b-oxqlzhy05x] {
    margin-bottom: 14px;
    font-size: 13px;
    color: #842029;
    background: #f8d7da;
    border-radius: 8px;
    padding: 8px 12px;
}

.conferencia-lista[b-oxqlzhy05x] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 16px;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
}

.tabela-config[b-oxqlzhy05x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .tabela-config th[b-oxqlzhy05x] {
        text-align: left;
        padding: 8px;
        color: #55606e;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-bottom: 1px solid #eef0f3;
    }

    .tabela-config td[b-oxqlzhy05x] {
        padding: 8px;
        border-bottom: 1px solid #f3f4f6;
    }

.celula-vazia[b-oxqlzhy05x] {
    text-align: center;
    color: #8a94a3;
    padding: 16px !important;
}

.link-atalho[b-oxqlzhy05x] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}

    .link-atalho:hover[b-oxqlzhy05x] {
        text-decoration: underline;
    }

.badge-status[b-oxqlzhy05x] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-nao-iniciada[b-oxqlzhy05x] {
    background: #eef0f3;
    color: #55606e;
}

.status-andamento[b-oxqlzhy05x] {
    background: #cfe8fb;
    color: #0056b3;
}

.status-pausada[b-oxqlzhy05x] {
    background: #f3e8d0;
    color: #8a6d1f;
}

.status-finalizada[b-oxqlzhy05x] {
    background: #d4edda;
    color: #155724;
}

.badge-modal[b-oxqlzhy05x] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #e5e9f7;
    color: #33418c;
}

.badge-prioridade[b-oxqlzhy05x] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.prioridade-baixa[b-oxqlzhy05x] {
    background: #eef0f3;
    color: #55606e;
}

.prioridade-normal[b-oxqlzhy05x] {
    background: #e5e9f7;
    color: #33418c;
}

.prioridade-alta[b-oxqlzhy05x] {
    background: #f3e8d0;
    color: #8a6d1f;
}

.prioridade-critico[b-oxqlzhy05x] {
    background: #f8d7da;
    color: #842029;
}

.input-texto[b-oxqlzhy05x] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 12px;
}

.input-select[b-oxqlzhy05x] {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    background: white;
}

.conferencia-rodape[b-oxqlzhy05x] {
    margin-top: 20px;
}

.btn-voltar[b-oxqlzhy05x] {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .btn-voltar:hover[b-oxqlzhy05x] {
        background: #f3f6fa;
    }


/* Drawer da fila — mesmo desenho do drawer da Digitação. */
.drawer-overlay[b-oxqlzhy05x] {
    position: fixed;
    inset: 0;
    background: rgba(16,24,40,0.4);
    z-index: 60;
}

.conferencia-drawer[b-oxqlzhy05x] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(560px, 100vw);
    background: white;
    z-index: 61;
    box-shadow: -8px 0 30px rgba(16,24,40,0.15);
    overflow-y: auto;
    box-sizing: border-box;
}

.drawer-corpo[b-oxqlzhy05x] {
    padding: 24px 28px 40px;
}

.drawer-topo[b-oxqlzhy05x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .drawer-topo h2[b-oxqlzhy05x] {
        margin: 0;
        font-size: 18px;
        color: #1f2937;
    }

.drawer-cliente[b-oxqlzhy05x] {
    margin: 2px 0 10px 0;
    font-size: 13px;
    color: #6c757d;
}

.drawer-fechar[b-oxqlzhy05x] {
    border: none;
    background: #f4f6fa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7686;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

    .drawer-fechar:hover[b-oxqlzhy05x] {
        background: #eef0f4;
    }

.drawer-tempo[b-oxqlzhy05x] {
    margin-top: 10px;
    font-size: 13px;
    color: #333;
}

.drawer-tempo-nota[b-oxqlzhy05x] {
    margin-left: 6px;
    font-size: 11px;
    color: #8a94a3;
}

.drawer-mini-cards[b-oxqlzhy05x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 4px;
}

.drawer-mini-card[b-oxqlzhy05x] {
    border: 1px solid #e7eaf1;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
}

.drawer-mini-titulo[b-oxqlzhy05x] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a94a3;
    font-weight: 700;
    margin-bottom: 6px;
}

.drawer-acoes[b-oxqlzhy05x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.btn-acao[b-oxqlzhy05x] {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
}

.btn-iniciar[b-oxqlzhy05x] { background: #1a8a5f; }
.btn-pausar[b-oxqlzhy05x] { background: #b8860b; }
.btn-abrir[b-oxqlzhy05x] { background: #0056b3; }

.drawer-form-pausa[b-oxqlzhy05x] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.conferencia-drawer h3[b-oxqlzhy05x] {
    margin: 18px 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #55606e;
}

.drawer-historico[b-oxqlzhy05x] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
}

    .drawer-historico li[b-oxqlzhy05x] {
        padding: 6px 0;
        border-bottom: 1px solid #eef0f4;
    }

.historico-data[b-oxqlzhy05x] {
    color: #6c757d;
    margin-right: 8px;
}

.historico-tipo[b-oxqlzhy05x] {
    font-weight: 700;
    margin-right: 8px;
}

.historico-usuario[b-oxqlzhy05x] {
    color: #6c757d;
}

.historico-obs[b-oxqlzhy05x] {
    margin-top: 2px;
    color: #333;
}

.linha-selecionada[b-oxqlzhy05x],
.linha-selecionada:nth-child(even)[b-oxqlzhy05x],
.linha-selecionada:hover[b-oxqlzhy05x] {
    background: #dceafd;
    box-shadow: inset 3px 0 0 #0056b3;
}

.celula-sub[b-oxqlzhy05x] {
    font-size: 11px;
    color: #6b7686;
    margin-top: 1px;
}

.badge-grau[b-oxqlzhy05x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    color: white;
    cursor: default;
}

.grau-1[b-oxqlzhy05x] { background: #6b7686; }
.grau-2[b-oxqlzhy05x] { background: #b8860b; }
.grau-3[b-oxqlzhy05x] { background: #b02a37; }
/* /Components/Pages/ChecklistConferenciaDetalhe.razor.rz.scp.css */
.conferencia-detalhe-container[b-gymjgb81qx] {
    padding: 20px;
    background: #f5f7fb;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
}

.conferencia-detalhe-topo[b-gymjgb81qx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.conferencia-mensagem[b-gymjgb81qx] {
    margin-bottom: 14px;
    font-size: 13px;
    color: #842029;
    background: #f8d7da;
    border-radius: 8px;
    padding: 8px 12px;
}

.consulta-apoio-erro[b-gymjgb81qx] {
    font-size: 12px;
    color: #842029;
    background: #f8d7da;
    border-radius: 6px;
    padding: 6px 10px;
}

.checklist-config-dica[b-gymjgb81qx] {
    font-size: 12px;
    color: #6c757d;
    margin: 4px 0;
}

.consulta-apoio-resultado-wrap[b-gymjgb81qx] {
    overflow-x: auto;
    max-width: 100%;
}

.tabela-consulta-apoio[b-gymjgb81qx] {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    .tabela-consulta-apoio th[b-gymjgb81qx], .tabela-consulta-apoio td[b-gymjgb81qx] {
        padding: 4px 8px;
        border: 1px solid #e2e5ea;
    }

    .tabela-consulta-apoio th[b-gymjgb81qx] {
        background: #eef0f3;
        text-align: left;
    }

.conferencia-detalhe[b-gymjgb81qx] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 20px 24px;
    width: 100%;
    box-sizing: border-box;
}

.conferencia-detalhe-cabecalho[b-gymjgb81qx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .conferencia-detalhe h2[b-gymjgb81qx] {
        margin: 0;
        font-size: 19px;
        color: #1f2937;
    }

.conferencia-cliente[b-gymjgb81qx] {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: #6c757d;
}

.conferencia-progresso[b-gymjgb81qx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    font-size: 12px;
    color: #55606e;
}

.barra-progresso[b-gymjgb81qx] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #eef0f3;
    overflow: hidden;
}

.barra-preenchida[b-gymjgb81qx] {
    height: 100%;
    background: linear-gradient(135deg, #0056b3, #007bff);
    transition: width 0.2s ease;
}

.itens-filtros[b-gymjgb81qx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

    .itens-filtros .input-select[b-gymjgb81qx] {
        min-width: 150px;
    }

    .itens-filtros .input-texto[b-gymjgb81qx] {
        min-width: 220px;
        width: auto;
    }

.tabela-itens[b-gymjgb81qx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}

.th-ordenavel-itens[b-gymjgb81qx] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .th-ordenavel-itens:hover[b-gymjgb81qx] {
        color: #0056b3;
    }

    .tabela-itens th[b-gymjgb81qx] {
        text-align: left;
        padding: 8px 6px;
        color: #55606e;
        font-size: 11px;
        text-transform: uppercase;
        border-bottom: 1px solid #eef0f3;
    }

    .tabela-itens td[b-gymjgb81qx] {
        padding: 8px 6px;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: top;
    }

.botoes-resposta[b-gymjgb81qx] {
    display: flex;
    gap: 4px;
}

.btn-resposta[b-gymjgb81qx] {
    border: 1px solid #dcdcdc;
    background: white;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .btn-resposta.btn-c.ativo[b-gymjgb81qx] {
        background: #198754;
        border-color: #198754;
        color: white;
    }

    .btn-resposta.btn-nc.ativo[b-gymjgb81qx] {
        background: #dc3545;
        border-color: #dc3545;
        color: white;
    }

    .btn-resposta.btn-na.ativo[b-gymjgb81qx] {
        background: #6c757d;
        border-color: #6c757d;
        color: white;
    }

    .btn-resposta:disabled[b-gymjgb81qx] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.input-select[b-gymjgb81qx] {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    background: white;
}

.input-select-pequeno[b-gymjgb81qx] {
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 12px;
    background: white;
    max-width: 170px;
}

.select-obrigatorio[b-gymjgb81qx] {
    border-color: #dc3545;
}

.input-texto[b-gymjgb81qx] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 12px;
}

.conferencia-acoes[b-gymjgb81qx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.aviso-permissao[b-gymjgb81qx] {
    font-size: 12px;
    color: #842029;
}

.btn-salvar[b-gymjgb81qx] {
    border: none;
    background: linear-gradient(135deg, #198754, #157347);
    color: white;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-salvar:hover:not(:disabled)[b-gymjgb81qx] {
        filter: brightness(1.05);
    }

    .btn-salvar:disabled[b-gymjgb81qx] {
        background: #c3cbd6;
        cursor: not-allowed;
    }

.btn-voltar[b-gymjgb81qx] {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .btn-voltar:hover[b-gymjgb81qx] {
        background: #f3f6fa;
    }

.badge-status[b-gymjgb81qx] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-nao-iniciada[b-gymjgb81qx] {
    background: #eef0f3;
    color: #55606e;
}

.status-andamento[b-gymjgb81qx] {
    background: #cfe8fb;
    color: #0056b3;
}

.status-pausada[b-gymjgb81qx] {
    background: #f3e8d0;
    color: #8a6d1f;
}

.status-finalizada[b-gymjgb81qx] {
    background: #d4edda;
    color: #155724;
}

.link-atalho[b-gymjgb81qx] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}

    .link-atalho:hover[b-gymjgb81qx] {
        text-decoration: underline;
    }

.celula-vazia[b-gymjgb81qx] {
    text-align: center;
    color: #8a94a3;
    padding: 16px !important;
}
/* /Components/Pages/ChecklistDigitacao.razor.rz.scp.css */
.digitacao-container[b-l3fg1hy4w6] {
    padding: 20px;
    background: #f5f7fb;
    min-height: 100vh;
    box-sizing: border-box;
}

.digitacao-topo[b-l3fg1hy4w6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

    .digitacao-topo h1[b-l3fg1hy4w6] {
        margin: 0;
        font-size: 20px;
        color: #1f2937;
    }

/* Cabeçalho em uma linha só (74px): KPIs rolam na horizontal e o ranking pagina de 3 em 3 —
   nunca quebra em coluna nem estica a altura. Abaixo de 1000px empilha (ver @media no fim). */
.dg-topo[b-l3fg1hy4w6] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 74px;
    margin-bottom: 16px;
}

.dg-kpis-wrap[b-l3fg1hy4w6] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    position: relative;
}

.dg-kpis[b-l3fg1hy4w6] {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .dg-kpis[b-l3fg1hy4w6]::-webkit-scrollbar {
        display: none;
    }

/* Esmaece a borda direita para indicar que há mais cards ao rolar. */
.dg-kpis-fade[b-l3fg1hy4w6] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22px;
    background: linear-gradient(to right, rgba(245, 247, 251, 0), #f5f7fb);
    pointer-events: none;
}

.dg-separador[b-l3fg1hy4w6] {
    flex: 0 0 auto;
    width: 1px;
    height: 70%;
    background: #e3e8ee;
}

.kpi-card[b-l3fg1hy4w6] {
    --kpi-cor: #8a94a3;
    flex: 0 0 auto;
    position: relative;
    background: white;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 6px 10px 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 92px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

    .kpi-card[b-l3fg1hy4w6]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 3px;
        background: var(--kpi-cor);
        opacity: .5;
        transition: opacity .15s ease;
    }

    .kpi-card:hover[b-l3fg1hy4w6] {
        box-shadow: 0 3px 10px rgba(16, 24, 40, 0.08);
    }

    .kpi-card:focus-visible[b-l3fg1hy4w6] {
        outline: 2px solid var(--kpi-cor);
        outline-offset: 2px;
    }

    .kpi-card.kpi-ativo[b-l3fg1hy4w6] {
        border-color: var(--kpi-cor);
        background: color-mix(in srgb, var(--kpi-cor) 7%, white);
    }

        .kpi-card.kpi-ativo[b-l3fg1hy4w6]::before {
            opacity: 1;
        }

    /* Informativo ("Não liberado"): não filtra, então não parece clicável. */
    .kpi-card.kpi-somente-leitura[b-l3fg1hy4w6] {
        cursor: default;
    }

        .kpi-card.kpi-somente-leitura:hover[b-l3fg1hy4w6] {
            box-shadow: none;
        }

.kpi-icone[b-l3fg1hy4w6] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpi-cor);
    background: color-mix(in srgb, var(--kpi-cor) 14%, white);
}

.kpi-texto[b-l3fg1hy4w6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kpi-titulo[b-l3fg1hy4w6] {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--kpi-cor);
    white-space: nowrap;
}

.kpi-somente-leitura .kpi-titulo[b-l3fg1hy4w6] {
    color: #8a94a3;
}

.kpi-valor[b-l3fg1hy4w6] {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.digitacao-filtros[b-l3fg1hy4w6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.input-texto[b-l3fg1hy4w6] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
    box-sizing: border-box;
}

.link-atalho[b-l3fg1hy4w6] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}

    .link-atalho:hover[b-l3fg1hy4w6] {
        text-decoration: underline;
    }

.digitacao-lista[b-l3fg1hy4w6] {
    background: white;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 16px;
    overflow-x: auto;
}

/* Ranking — 3 pessoas por vez, paginado pelas setas (ver RankingIr no .razor). */
.rk[b-l3fg1hy4w6] {
    flex: 0 0 380px;
    min-width: 280px;
    height: 100%;
    box-sizing: border-box;
    background: white;
    border: 1px solid #e7eaf1;
    border-radius: 10px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

.rk-cab[b-l3fg1hy4w6] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.rk-titulo[b-l3fg1hy4w6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #16233b;
    white-space: nowrap;
}

.rk-pagina[b-l3fg1hy4w6] {
    font-size: 9px;
    color: #9aa4b2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rk-vazio[b-l3fg1hy4w6] {
    font-size: 11px;
    color: #8a94a3;
}

.rk-corpo[b-l3fg1hy4w6] {
    flex: 0 0 34px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rk-seta[b-l3fg1hy4w6] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #e3e8ee;
    background: white;
    color: #6b7686;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease;
}

    .rk-seta:hover:not(:disabled)[b-l3fg1hy4w6] {
        background: #f3f6fa;
    }

    .rk-seta:disabled[b-l3fg1hy4w6] {
        opacity: .35;
        cursor: default;
    }

.rk-lista[b-l3fg1hy4w6] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rk-item[b-l3fg1hy4w6] {
    --rk-cor: #9aa4b2;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--rk-cor) 6%, white);
    border: 1px solid color-mix(in srgb, var(--rk-cor) 22%, white);
    border-radius: 8px;
    padding: 3px 5px;
}

.rk-avatar-wrap[b-l3fg1hy4w6] {
    position: relative;
    flex-shrink: 0;
}

.rk-avatar[b-l3fg1hy4w6] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--rk-cor);
    color: white;
    font-size: 8.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-pos[b-l3fg1hy4w6] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rk-cor);
    color: white;
    font-size: 6px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid white;
}

.rk-textos[b-l3fg1hy4w6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.rk-nome[b-l3fg1hy4w6] {
    font-size: 9.5px;
    font-weight: 700;
    color: #16233b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-meta[b-l3fg1hy4w6] {
    font-size: 8px;
    color: #6b7686;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.regras-lista[b-l3fg1hy4w6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.regra-linha[b-l3fg1hy4w6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.regra-pill[b-l3fg1hy4w6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.regra-descricao[b-l3fg1hy4w6] {
    font-size: 13px;
    color: #3d4759;
}

.badge-numerario[b-l3fg1hy4w6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.numerario-gerado[b-l3fg1hy4w6] {
    background: #fdf3e0;
    color: #8a6d1f;
}

.numerario-conferido[b-l3fg1hy4w6] {
    background: #e5f7ee;
    color: #1a8a5f;
}

.celula-vazia-traco[b-l3fg1hy4w6] {
    color: #c3c9d3;
}

.tabela-config[b-l3fg1hy4w6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .tabela-config thead th[b-l3fg1hy4w6] {
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: left;
        padding: 10px 8px;
        color: #55606e;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: #f8f9fb;
        border-bottom: 1px solid #e4e8ee;
    }

    .tabela-config td[b-l3fg1hy4w6] {
        padding: 9px 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #2a323d;
    }

    .tabela-config tbody tr[b-l3fg1hy4w6] {
        cursor: pointer;
        transition: background-color .1s ease;
    }

        .tabela-config tbody tr:nth-child(even)[b-l3fg1hy4w6] {
            background: #fafbfd;
        }

        .tabela-config tbody tr:hover[b-l3fg1hy4w6] {
            background: #eef4fb;
        }

.linha-selecionada[b-l3fg1hy4w6],
.linha-selecionada:nth-child(even)[b-l3fg1hy4w6],
.linha-selecionada:hover[b-l3fg1hy4w6] {
    background: #dceafd;
    box-shadow: inset 3px 0 0 #0056b3;
}

/* Processo com pendência aberta: fundo rosado e barra vermelha à esquerda — precisa vencer a zebra e
   o hover (por isso o seletor completo), mas a linha selecionada continua azul, só ficando com a
   barra vermelha pra não esconder a pendência de quem está com o drawer aberto. */
.tabela-config tbody tr.linha-pendencia[b-l3fg1hy4w6],
.tabela-config tbody tr.linha-pendencia:nth-child(even)[b-l3fg1hy4w6] {
    background: #fff1f2;
    box-shadow: inset 4px 0 0 #dc3545;
}

.tabela-config tbody tr.linha-pendencia:hover[b-l3fg1hy4w6] {
    background: #ffe3e6;
}

.tabela-config tbody tr.linha-pendencia.linha-selecionada[b-l3fg1hy4w6],
.tabela-config tbody tr.linha-pendencia.linha-selecionada:nth-child(even)[b-l3fg1hy4w6],
.tabela-config tbody tr.linha-pendencia.linha-selecionada:hover[b-l3fg1hy4w6] {
    background: #dceafd;
    box-shadow: inset 4px 0 0 #dc3545;
}

.filtro-checkbox-inline[b-l3fg1hy4w6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3d4759;
    cursor: pointer;
    user-select: none;
}

    .filtro-checkbox-inline input[b-l3fg1hy4w6] {
        margin: 0;
        cursor: pointer;
    }

.celula-vazia[b-l3fg1hy4w6] {
    text-align: center;
    color: #8a94a3;
    padding: 16px !important;
}

.badge-status[b-l3fg1hy4w6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-nao-iniciada[b-l3fg1hy4w6] {
    background: #eef0f3;
    color: #55606e;
}

.status-andamento[b-l3fg1hy4w6] {
    background: #cfe8fb;
    color: #0056b3;
}

.status-pausada[b-l3fg1hy4w6] {
    background: #f3e8d0;
    color: #8a6d1f;
}

.status-finalizada[b-l3fg1hy4w6] {
    background: #d4edda;
    color: #155724;
}

.badge-modal[b-l3fg1hy4w6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #e5e9f7;
    color: #33418c;
}

.badge-prioridade[b-l3fg1hy4w6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.prioridade-baixa[b-l3fg1hy4w6] {
    background: #eef0f3;
    color: #55606e;
}

.prioridade-normal[b-l3fg1hy4w6] {
    background: #e5e9f7;
    color: #33418c;
}

.prioridade-alta[b-l3fg1hy4w6] {
    background: #f3e8d0;
    color: #8a6d1f;
}

.prioridade-critico[b-l3fg1hy4w6] {
    background: #f8d7da;
    color: #842029;
}

/* Painel de detalhe virou drawer lateral (era coluna fixa ao lado da tabela) — mesmo
   conteúdo/lógica, só a apresentação mudou, a pedido do modelo de design. */
.drawer-overlay[b-l3fg1hy4w6] {
    position: fixed;
    inset: 0;
    background: rgba(16,24,40,0.4);
    /* .top-row (MainLayout.razor.css) é sticky com z-index:50 de propósito, pra sempre ficar
       por cima do conteúdo da página — o drawer precisa vencer essa disputa pra não nascer
       parcialmente escondido atrás do menu. */
    z-index: 60;
}

.digitacao-detalhe[b-l3fg1hy4w6] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(560px, 100vw);
    background: white;
    z-index: 61;
    box-shadow: -8px 0 30px rgba(16,24,40,0.15);
    overflow-y: auto;
    box-sizing: border-box;
}

.drawer-corpo[b-l3fg1hy4w6] {
    padding: 24px 28px 40px;
}

.drawer-topo[b-l3fg1hy4w6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.drawer-fechar[b-l3fg1hy4w6] {
    border: none;
    background: #f4f6fa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7686;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

    .drawer-fechar:hover[b-l3fg1hy4w6] {
        background: #eef0f4;
    }

.drawer-mini-cards[b-l3fg1hy4w6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 4px;
}

.drawer-mini-card[b-l3fg1hy4w6] {
    border: 1px solid #e7eaf1;
    border-radius: 10px;
    padding: 12px 14px;
}

.drawer-mini-titulo[b-l3fg1hy4w6] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a94a3;
    font-weight: 700;
    margin-bottom: 6px;
}

    .digitacao-detalhe h2[b-l3fg1hy4w6] {
        margin: 0;
        font-size: 18px;
        color: #1f2937;
    }

    .digitacao-detalhe h3[b-l3fg1hy4w6] {
        margin: 18px 0 8px 0;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #55606e;
    }

.digitacao-cliente[b-l3fg1hy4w6] {
    margin: 2px 0 10px 0;
    font-size: 13px;
    color: #6c757d;
}

.digitacao-tempo[b-l3fg1hy4w6] {
    margin-top: 10px;
    font-size: 13px;
    color: #333;
}

.digitacao-liberacao-info[b-l3fg1hy4w6] {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f3f6fa;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
}

    .digitacao-liberacao-info h3[b-l3fg1hy4w6] {
        margin: 0 0 6px 0;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #55606e;
    }

    .digitacao-liberacao-info div[b-l3fg1hy4w6] {
        margin-top: 2px;
    }

.digitacao-mensagem[b-l3fg1hy4w6] {
    margin-top: 10px;
    font-size: 13px;
    color: #842029;
    background: #f8d7da;
    border-radius: 8px;
    padding: 8px 12px;
}

.digitacao-anexo-rfb[b-l3fg1hy4w6] {
    margin-top: 16px;
    padding: 12px 14px;
    background: #f3f6fa;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
}

    .digitacao-anexo-rfb h3[b-l3fg1hy4w6] {
        margin: 0 0 8px 0;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #55606e;
    }

.anexo-info[b-l3fg1hy4w6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
}

.anexo-ausente[b-l3fg1hy4w6] {
    color: #8a94a3;
}

.anexo-meta[b-l3fg1hy4w6] {
    font-size: 11.5px;
    color: #6c757d;
}

.anexo-dica[b-l3fg1hy4w6] {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: #6c757d;
}

.anexo-erro[b-l3fg1hy4w6] {
    margin-top: 8px;
    font-size: 12px;
    color: #842029;
    background: #f8d7da;
    border-radius: 6px;
    padding: 6px 10px;
}

.digitacao-acoes[b-l3fg1hy4w6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.btn-acao[b-l3fg1hy4w6] {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: white;
}

.btn-iniciar[b-l3fg1hy4w6] {
    background: #0d6efd;
}

.btn-pausar[b-l3fg1hy4w6] {
    background: #b58900;
}

.btn-finalizar[b-l3fg1hy4w6] {
    background: #198754;
}

.btn-liberar[b-l3fg1hy4w6] {
    background: #6c757d;
}

.btn-pendencia[b-l3fg1hy4w6] {
    background: #dc3545;
}

.digitacao-pendencia-alerta[b-l3fg1hy4w6] {
    margin-top: 10px;
    font-size: 13px;
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: 8px;
    padding: 10px 12px;
}

    .digitacao-pendencia-alerta div[b-l3fg1hy4w6] {
        margin-top: 4px;
    }

.digitacao-form-pausa[b-l3fg1hy4w6] {
    margin-top: 12px;
    background: #f8f9fb;
    border-radius: 10px;
    padding: 12px;
}

    .digitacao-form-pausa label[b-l3fg1hy4w6] {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin-bottom: 6px;
    }

    .digitacao-form-pausa textarea[b-l3fg1hy4w6] {
        width: 100%;
        box-sizing: border-box;
        resize: vertical;
    }

.digitacao-linha-inline[b-l3fg1hy4w6] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

    .digitacao-linha-inline .input-texto[b-l3fg1hy4w6] {
        flex: 1;
    }

.digitacao-historico[b-l3fg1hy4w6] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

    .digitacao-historico li[b-l3fg1hy4w6] {
        padding: 8px 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: baseline;
    }

.historico-data[b-l3fg1hy4w6] {
    color: #8a94a3;
}

.historico-tipo[b-l3fg1hy4w6] {
    font-weight: 600;
    color: #1f2937;
}

.historico-usuario[b-l3fg1hy4w6] {
    color: #6c757d;
}

.historico-obs[b-l3fg1hy4w6] {
    flex-basis: 100%;
    color: #333;
    font-style: italic;
}

.digitacao-rodape[b-l3fg1hy4w6] {
    margin-top: 20px;
}

.btn-voltar[b-l3fg1hy4w6] {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .btn-voltar:hover[b-l3fg1hy4w6] {
        background: #f3f6fa;
    }

@media (max-width: 1000px) {
    .dg-topo[b-l3fg1hy4w6] {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .dg-kpis-wrap[b-l3fg1hy4w6] {
        height: auto;
    }

    .dg-kpis[b-l3fg1hy4w6] {
        padding-bottom: 2px;
    }

    .dg-separador[b-l3fg1hy4w6] {
        display: none;
    }

    .rk[b-l3fg1hy4w6] {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-width: 0;
    }
}

.badge-pendencia[b-l3fg1hy4w6] {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #842029;
    background: #f8d7da;
    white-space: nowrap;
}

.cliente-account[b-l3fg1hy4w6] {
    font-size: 11px;
    color: #6b7686;
    margin-top: 1px;
}

.data-prevista[b-l3fg1hy4w6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8a6d1f;
    font-style: italic;
}

.data-prevista-tag[b-l3fg1hy4w6] {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a6d1f;
    background: #fdf3d8;
    border: 1px solid #ecd48f;
    border-radius: 20px;
    padding: 1px 6px;
}
/* /Components/Pages/ChecklistLayouts.razor.rz.scp.css */
.checklist-config-container[b-c46j97q5qn] {
    padding: 20px;
    background: #f5f7fb;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.checklist-config-card[b-c46j97q5qn] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 28px;
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
}

.checklist-config-header[b-c46j97q5qn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.checklist-config-header h1[b-c46j97q5qn] {
    margin: 0 0 6px 0;
    font-size: 22px;
    color: #1f2937;
}

.checklist-config-header p[b-c46j97q5qn] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6c757d;
}

.checklist-config-abas[b-c46j97q5qn] {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 16px;
}

.aba-item[b-c46j97q5qn] {
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.aba-item.aba-ativa[b-c46j97q5qn] {
    color: #0056b3;
    border-bottom-color: #0056b3;
}

.checklist-config-mensagem[b-c46j97q5qn] {
    margin-bottom: 14px;
    font-size: 13px;
    color: #155724;
    background: #d4edda;
    border-radius: 8px;
    padding: 8px 12px;
}

.checklist-config-secao[b-c46j97q5qn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.checklist-config-lista[b-c46j97q5qn], .checklist-config-form[b-c46j97q5qn] {
    min-width: 0;
}

.checklist-config-form[b-c46j97q5qn] {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 18px;
}

    .checklist-config-form h2[b-c46j97q5qn] {
        margin: 0 0 12px 0;
        font-size: 16px;
        color: #1f2937;
    }

    .checklist-config-form h3[b-c46j97q5qn] {
        margin: 18px 0 10px 0;
        font-size: 14px;
        color: #1f2937;
    }

    .checklist-config-form label[b-c46j97q5qn] {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin: 12px 0 4px 0;
    }

.checkbox-linha[b-c46j97q5qn] {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.input-texto[b-c46j97q5qn], .input-select[b-c46j97q5qn] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
}

.input-texto-pequeno[b-c46j97q5qn] {
    width: 120px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
}

.input-numero-pequeno[b-c46j97q5qn] {
    width: 60px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 13px;
}

.tag-selecionado[b-c46j97q5qn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e7f1ff;
    color: #0056b3;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-top: 6px;
}

    .tag-selecionado button[b-c46j97q5qn] {
        border: none;
        background: transparent;
        color: #0056b3;
        cursor: pointer;
        font-weight: bold;
    }

.lista-sugestoes[b-c46j97q5qn] {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    max-height: 160px;
    overflow-y: auto;
    background: white;
}

    .lista-sugestoes li[b-c46j97q5qn] {
        padding: 6px 8px;
        font-size: 13px;
        cursor: pointer;
        border-radius: 6px;
    }

        .lista-sugestoes li:hover[b-c46j97q5qn] {
            background: #f3f6fa;
        }

.tabela-config[b-c46j97q5qn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .tabela-config th[b-c46j97q5qn] {
        text-align: left;
        padding: 8px;
        color: #55606e;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-bottom: 1px solid #eef0f3;
    }

    .tabela-config td[b-c46j97q5qn] {
        padding: 8px;
        border-bottom: 1px solid #f3f4f6;
    }

.linha-selecionada[b-c46j97q5qn] {
    background: #e7f1ff;
}

.linha-categoria-clicavel[b-c46j97q5qn] {
    cursor: pointer;
}

.linha-arrastando[b-c46j97q5qn] {
    opacity: 0.4;
}

.celula-arrasto[b-c46j97q5qn] {
    cursor: grab;
    color: #adb5bd;
    text-align: center;
    width: 24px;
    user-select: none;
}

    .celula-arrasto:active[b-c46j97q5qn] {
        cursor: grabbing;
    }

.celula-arrasto-desabilitada[b-c46j97q5qn] {
    cursor: not-allowed;
    opacity: 0.4;
}

    .linha-categoria-clicavel:hover[b-c46j97q5qn] {
        background: #f3f6fa;
    }

.input-busca-item[b-c46j97q5qn] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.linha-em-edicao[b-c46j97q5qn] {
    background: #fff8e1;
}

    .linha-em-edicao input[b-c46j97q5qn], .linha-em-edicao select[b-c46j97q5qn] {
        border-color: #d4a72c;
    }

.link-atalho:disabled[b-c46j97q5qn] {
    color: #adb5bd;
    cursor: not-allowed;
    text-decoration: none;
}

.celula-vazia[b-c46j97q5qn] {
    text-align: center;
    color: #8a94a3;
    padding: 16px !important;
}

.link-atalho[b-c46j97q5qn] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    margin-right: 10px;
}

    .link-atalho:hover[b-c46j97q5qn] {
        text-decoration: underline;
    }

.link-remover[b-c46j97q5qn] {
    color: #dc3545;
}

.checklist-config-acoes[b-c46j97q5qn] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.btn-voltar[b-c46j97q5qn] {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .btn-voltar:hover[b-c46j97q5qn] {
        background: #f3f6fa;
    }

.checklist-config-dica[b-c46j97q5qn] {
    font-size: 12px;
    color: #6c757d;
    margin: 4px 0 12px 0;
}

.checklist-config-add-catalogo[b-c46j97q5qn] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

    .checklist-config-add-catalogo .input-select[b-c46j97q5qn] {
        flex: 1;
    }

.btn-salvar[b-c46j97q5qn] {
    border: none;
    background: linear-gradient(135deg, #198754, #157347);
    color: white;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

    .btn-salvar:hover[b-c46j97q5qn] {
        filter: brightness(1.05);
    }

@media (max-width: 900px) {
    .checklist-config-secao[b-c46j97q5qn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/ConsultaApoioEditor.razor.rz.scp.css */
.consulta-apoio-details[b-lj28ye1wr3] {
    margin-top: 6px;
    font-size: 13px;
}

    .consulta-apoio-details summary[b-lj28ye1wr3] {
        cursor: pointer;
        color: #0056b3;
        font-weight: 600;
        font-size: 12px;
    }

.consulta-apoio-corpo[b-lj28ye1wr3] {
    margin-top: 8px;
    padding: 10px;
    background: #f8f9fb;
    border-radius: 8px;
}

.consulta-apoio-textarea[b-lj28ye1wr3] {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    resize: vertical;
    margin-bottom: 8px;
}

.consulta-apoio-teste[b-lj28ye1wr3] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.consulta-apoio-erro[b-lj28ye1wr3] {
    font-size: 12px;
    color: #842029;
    background: #f8d7da;
    border-radius: 6px;
    padding: 6px 10px;
}

.consulta-apoio-resultado-wrap[b-lj28ye1wr3] {
    overflow-x: auto;
    max-width: 100%;
}

.tabela-consulta-apoio[b-lj28ye1wr3] {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    .tabela-consulta-apoio th[b-lj28ye1wr3], .tabela-consulta-apoio td[b-lj28ye1wr3] {
        padding: 4px 8px;
        border: 1px solid #e2e5ea;
    }

    .tabela-consulta-apoio th[b-lj28ye1wr3] {
        background: #eef0f3;
        text-align: left;
    }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
h1[b-xhslxxfiwa] {
    font-family: Arial;
    font-size: 12px;
    color: black;
}

h2[b-xhslxxfiwa] {
    color: rgb(0, 110, 181);
    font-family: 'Arial Black', sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.titulo-pagina[b-xhslxxfiwa] {
    color: black;
    font-size: 30px;
    font-weight: bold;
    font-family: Arial;
}

.dashboard-container[b-xhslxxfiwa] {
    background-color: #005a8d; /* Tom de azul da imagem */
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
}

/* Cards Superiores */
.card-logistica[b-xhslxxfiwa] {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 10px 20px;
    min-width: 200px;
    flex: 1;
    color: white;
}

.card-header-text[b-xhslxxfiwa] {
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 5px;
}

.card-body[b-xhslxxfiwa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-number[b-xhslxxfiwa] {
    font-size: 3rem;
    font-weight: bold;
}

.card-icon[b-xhslxxfiwa] {
    height: 80px;
}

/* Cards Inferiores (Status) */
.status-grid[b-xhslxxfiwa] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}

.status-card[b-xhslxxfiwa] {
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    color: white;
    background-color: rgb(0, 0, 0, 0,53);
}

.status-number[b-xhslxxfiwa] {
    font-size: 40px;
    display: block;
    font-weight: bold;
}

.status-label[b-xhslxxfiwa] {
    font-size: 12px;
    text-transform: uppercase;
    
}

.loading-container[b-xhslxxfiwa] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f6fa;
}

.spinner[b-xhslxxfiwa] {
    width: 60px;
    height: 60px;
    border: 6px solid #dcdde1;
    border-top: 6px solid #4a69bd;
    border-radius: 50%;
    animation: spin-b-xhslxxfiwa 1s linear infinite;
}

.loading-text[b-xhslxxfiwa] {
    margin-top: 15px;
    font-size: 16px;
    color: #555;
    font-family: Arial, sans-serif;
}

@keyframes spin-b-xhslxxfiwa {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.filtros-container[b-xhslxxfiwa] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    max-width: 100%
}

.input-filtro[b-xhslxxfiwa] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    width: 180px;
    transition: 0.2s;
}

    .input-filtro:focus[b-xhslxxfiwa] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 4px rgba(0,123,255,0.3);
    }

.filtro-dropdown[b-xhslxxfiwa] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    background: white;
    cursor: pointer;
    max-width: 300px;
}

.label-filtro[b-xhslxxfiwa] {
    font-size: 12px;
    color: white;
}
/* /Components/Pages/DevLogin.razor.rz.scp.css */
.dev-login[b-a3u8qzi388] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6fa;
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding: 32px;
    box-sizing: border-box;
}

.dev-login-caixa[b-a3u8qzi388] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11, 79, 113, 0.12);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 420px;
    border-top: 4px solid #c8862a;
}

.dev-login-eyebrow[b-a3u8qzi388] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c8862a;
    margin-bottom: 6px;
}

.dev-login-caixa h1[b-a3u8qzi388] {
    margin: 0 0 6px;
    font-size: 22px;
    color: #16232e;
}

.dev-login-subtitulo[b-a3u8qzi388] {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7684;
}

.dev-login-erro[b-a3u8qzi388] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.dev-login-form[b-a3u8qzi388] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .dev-login-form label[b-a3u8qzi388] {
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin-top: 10px;
    }

    .dev-login-form input[b-a3u8qzi388] {
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #dcdcdc;
        font-size: 14px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .dev-login-form input:focus-visible[b-a3u8qzi388] {
            outline: none;
            border-color: #0b4f71;
            box-shadow: 0 0 0 3px rgba(11, 79, 113, 0.15);
        }

    .dev-login-form button[b-a3u8qzi388] {
        margin-top: 22px;
        padding: 11px;
        border: none;
        border-radius: 8px;
        background: #c8862a;
        color: white;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease;
    }

        .dev-login-form button:hover[b-a3u8qzi388] {
            background: #a86e1f;
        }
/* /Components/Pages/DevMia.razor.rz.scp.css */
.devmia[b-9jp65eps71] {
    padding: 24px;
    background: #f5f7fb;
    min-height: 100vh;
    box-sizing: border-box;
    color: #1f2937;
}

.devmia-topo[b-9jp65eps71] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

    .devmia-topo h1[b-9jp65eps71] {
        margin: 0;
        font-size: 22px;
    }

.devmia-tag[b-9jp65eps71] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: #6d28d9;
    border-radius: 6px;
    padding: 2px 8px;
    vertical-align: middle;
}

.devmia-sub[b-9jp65eps71] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #55606e;
}

.devmia-links[b-9jp65eps71] {
    display: flex;
    gap: 14px;
    font-size: 13px;
}

    .devmia-links a[b-9jp65eps71] {
        color: #0056b3;
        text-decoration: none;
    }

.devmia-cartoes[b-9jp65eps71] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.devmia-cartao[b-9jp65eps71] {
    background: #fff;
    border: 1px solid #e7eaf1;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.devmia-rotulo[b-9jp65eps71] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a94a3;
    font-weight: 700;
}

.devmia-cartao small[b-9jp65eps71] {
    color: #6b7686;
}

.ok[b-9jp65eps71] { color: #12684a; }
.erro[b-9jp65eps71] { color: #b02a37; }

.devmia-bloco[b-9jp65eps71] {
    background: #fff;
    border: 1px solid #e7eaf1;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

    .devmia-bloco h2[b-9jp65eps71] {
        margin: 0 0 10px;
        font-size: 15px;
    }

        .devmia-bloco h2 small[b-9jp65eps71] {
            font-weight: 400;
            color: #6b7686;
        }

.devmia-texto[b-9jp65eps71] {
    width: 100%;
    box-sizing: border-box;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    padding: 10px;
}

.devmia-acoes[b-9jp65eps71] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.devmia-botao[b-9jp65eps71] {
    border: none;
    background: #0b4f71;
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .devmia-botao:disabled[b-9jp65eps71] {
        opacity: 0.5;
        cursor: default;
    }

.devmia-secundario[b-9jp65eps71] {
    background: #eef0f4;
    color: #3d4759;
}

.devmia-link[b-9jp65eps71] {
    border: none;
    background: none;
    color: #0056b3;
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}

.devmia-resultado[b-9jp65eps71] {
    margin-top: 12px;
    border: 1px solid #e7eaf1;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

    .devmia-resultado ul[b-9jp65eps71] {
        margin: 6px 0 6px 18px;
        padding: 0;
    }

.devmia-analise[b-9jp65eps71] {
    margin-top: 8px;
    color: #1f2937;
}

.devmia-tabela[b-9jp65eps71] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .devmia-tabela th[b-9jp65eps71] {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        color: #8a94a3;
        padding: 6px 8px;
        border-bottom: 1px solid #e7eaf1;
    }

    .devmia-tabela td[b-9jp65eps71] {
        padding: 6px 8px;
        border-bottom: 1px solid #f0f2f7;
        vertical-align: top;
    }

.devmia-pilula[b-9jp65eps71] {
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
    background: #eef0f4;
}

    .devmia-pilula.ok[b-9jp65eps71] { background: #d9f2e6; }
    .devmia-pilula.erro[b-9jp65eps71] { background: #f8d7da; }

.devmia-duas[b-9jp65eps71] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

    .devmia-duas pre[b-9jp65eps71] {
        margin: 0;
        max-height: 340px;
        overflow: auto;
        background: #f5f7fb;
        border-radius: 8px;
        padding: 10px;
        font-size: 11.5px;
    }

    .devmia-duas h3[b-9jp65eps71] {
        margin: 0 0 4px;
        font-size: 12px;
        color: #55606e;
    }

.devmia-vazio[b-9jp65eps71] {
    text-align: center;
    color: #8a94a3;
    padding: 18px;
}

.devmia-form[b-9jp65eps71] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

    .devmia-form input[b-9jp65eps71],
    .devmia-form select[b-9jp65eps71] {
        border: 1px solid #d5dbe5;
        border-radius: 8px;
        padding: 7px 10px;
        font-size: 13px;
    }

.devmia-msg[b-9jp65eps71] {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #55606e;
}


.devmia-recintos[b-9jp65eps71] {
    margin-top: 10px;
    border: 1px dashed #d5dbe5;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
}

    .devmia-recintos ul[b-9jp65eps71] {
        margin: 6px 0 0 0;
        padding: 0;
        list-style: none;
    }

    .devmia-recintos li[b-9jp65eps71] {
        padding: 3px 0;
    }
/* /Components/Pages/ImpoProcessos.razor.rz.scp.css */
.layout-processos[b-rz8otx579x] {
    --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;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Tela inteira, sem rolar a página: só a área de linhas da tabela rola (ver
       .tabela-scroll-body). 80px é a altura do menu superior (.top-row), mesma referência já
       usada no min-height antigo. dvh em vez de vh: em mobile a barra de endereço some/aparece
       e recalcula vh, dvh acompanha sem sobrar espaço morto. */
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    background: #f5f7fb;
}

/* ---------- fixados (linhas no início da própria tabela, arrasta e solta) ---------- */

.linha-fixada[b-rz8otx579x] {
    background: #fffdf5;
}

    .linha-fixada:hover[b-rz8otx579x] {
        background: #fef8e4;
    }

.linha-fixada-arrastando[b-rz8otx579x] {
    opacity: 0.4;
}

.fixado-arrastar[b-rz8otx579x] {
    color: #b5aa7a;
    cursor: grab;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.referencia-linha[b-rz8otx579x] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fixar-btn[b-rz8otx579x] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.25;
    filter: grayscale(1);
}

    .fixar-btn:hover[b-rz8otx579x] {
        opacity: 0.7;
    }

    .fixar-btn.fixar-btn-ativo[b-rz8otx579x] {
        opacity: 1;
        filter: none;
    }

/* Loader de carregamento inicial (.pagina-carregando-overlay / .loader) virou global —
   ver wwwroot/css/processos-visual.css — porque o Portal do Cliente (CSS isolado próprio,
   sem acesso a este arquivo) também usa o mesmo componente PaginaCarregando. */

/* Cards KPI, chips de Status Operacional, badge de status/SLA, ícone de modal e marcas de
   etapa agora são visual compartilhado — ver wwwroot/css/processos-visual.css (global) e
   Components/Shared/KpiCardsProcessos.razor / StatusChipsProcessos.razor. Também usado pelo
   Portal do Cliente, para as duas telas manterem a mesma identidade visual. */

/* =========================================
   CONTEUDO
========================================= */

.conteudo-processos[b-rz8otx579x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* =========================================
   TOPO
========================================= */

/* =========================================
   FILEIRA 1 — visão geral (KPIs) + ações. Sempre a primeira coisa depois do
   título: os totais dão o panorama antes de qualquer filtro.
========================================= */

.painel-kpis[b-rz8otx579x] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    /* Altura fixa: fileira 1 (cards + botões de manutenção) nunca cresce nem encolhe —
       é o que garante que fiquem sempre visíveis independente do estado dos filtros. */
}

/* Botões de manutenção da lista (Colunas/Visualizações/Exportar, dentro do AcoesContent
   de KpiCardsProcessos) um pouco mais discretos/compactos nesta tela. */
[b-rz8otx579x] .btn-acao-tabela-icone {
    width: 27px;
    height: 27px;
    font-size: 12.5px;
}

.kpi-row-wrap[b-rz8otx579x] {
    /* flex:1/min-width:0 (sizing dentro de .painel-kpis, flex-row) ficam aqui — só valem pra
       tela interna. overflow-x/overflow-y/padding-bottom e o :has() de filtros abertos
       mudaram pra processos-visual.css (global): o Portal do Cliente usa a mesma classe e
       precisava do mesmo comportamento, que CSS isolado nunca alcançava (ver lá). */
    flex: 1;
    min-width: 0;
}

/* =========================================
   FILEIRA 2 — FILTROS, logo abaixo dos cards
========================================= */

.filtros-container[b-rz8otx579x] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    background: white;
    border: 1px solid var(--cv-line);
    border-radius: 9px;
    padding: 5px 8px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.04);
    box-sizing: border-box;
}

.btn-mais-filtros[b-rz8otx579x] {
    border: none;
    background: none;
    color: var(--cv-brand);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    align-self: flex-end;
    white-space: nowrap;
}

    .btn-mais-filtros:hover[b-rz8otx579x] {
        text-decoration: underline;
    }

/* .label-filtro, .input-filtro, .filtro-dropdown, .filtro-checkbox, .filtro-busca-*,
   .filtro-data-range e .input-data MUDARAM pra wwwroot/css/processos-visual.css (global) —
   essas classes eram só CSS ISOLADO deste arquivo, mas o Portal do Cliente
   (PortalProcessos.razor) usa os MESMOS nomes de classe pros próprios campos de filtro.
   Isolamento de CSS do Blazor carimba um atributo [b-xxxx] só nos elementos renderizados por
   ESTE componente — o Portal, sendo outro componente, nunca recebia essas regras, e os campos
   apareciam sem estilo nenhum (borda/fundo/fonte padrão do navegador). Ver processos-visual.css
   pra editar essas classes agora — mexer aqui não alcança mais o Portal. */

/* =========================================
   TABELA
========================================= */

.paginacao-container[b-rz8otx579x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--cv-line);
    /* Fora de .tabela-scroll-body (ver acima) — sempre visível por estrutura, não por sticky:
       só a área de linhas rola, cabeçalho e rodapé da tabela ficam fixos por fora dela.
       Mesmo tom do cabeçalho da tabela (.table thead, --cv-surface-alt) — leve contraste com
       o branco do card, marcando visualmente onde a área rolável termina. */
    flex-shrink: 0;
    background: var(--cv-surface-alt);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.paginacao-info[b-rz8otx579x] {
    font-size: 12.5px;
    color: #6b7684;
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
}

.paginacao-tamanho[b-rz8otx579x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6b7684;
}

    .paginacao-tamanho select[b-rz8otx579x] {
        max-width: 80px;
        padding: 5px 8px;
        max-height: none;
    }

.paginacao-nav[b-rz8otx579x] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.paginacao-atual[b-rz8otx579x] {
    font-size: 12.5px;
    color: var(--cv-ink);
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    margin: 0 6px;
    white-space: nowrap;
}

.btn-paginacao[b-rz8otx579x] {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--cv-line);
    background: white;
    color: var(--cv-brand);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .btn-paginacao:hover:not(:disabled)[b-rz8otx579x] {
        background: var(--cv-surface-alt);
        border-color: var(--cv-brand);
    }

    .btn-paginacao:disabled[b-rz8otx579x] {
        color: #b7c0cc;
        cursor: not-allowed;
    }

.tabela-resultado[b-rz8otx579x] {
    position: relative;
    width: 100%;
    background: white;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Multisseleção: barra de ação que só aparece com processos marcados, e coluna do checkbox. */
.barra-selecao[b-rz8otx579x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #e7f1ff;
    border: 1px solid #bcd6f7;
    font-size: 13px;
    color: #16233b;
}

.barra-selecao-acao[b-rz8otx579x] {
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: white;
    background: var(--cv-brand, #0b4f71);
    cursor: pointer;
}

    .barra-selecao-acao:hover:not(:disabled)[b-rz8otx579x] {
        background: var(--cv-brand-deep, #073853);
    }

    .barra-selecao-acao:disabled[b-rz8otx579x] {
        opacity: .6;
        cursor: progress;
    }

.barra-selecao-limpar[b-rz8otx579x] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 12.5px;
    cursor: pointer;
    padding: 0;
}

    .barra-selecao-limpar:hover:not(:disabled)[b-rz8otx579x] {
        text-decoration: underline;
    }

.barra-selecao-mensagem[b-rz8otx579x] {
    font-size: 12.5px;
    color: #155724;
}

    .barra-selecao-mensagem.erro[b-rz8otx579x] {
        color: #842029;
    }

.th-selecao[b-rz8otx579x],
.celula-selecao[b-rz8otx579x] {
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

    .th-selecao input[type="checkbox"][b-rz8otx579x],
    .celula-selecao input[type="checkbox"][b-rz8otx579x] {
        width: 15px;
        height: 15px;
        cursor: pointer;
        vertical-align: middle;
    }

/* Só esta área rola — cabeçalho (.painel-kpis) e rodapé (.paginacao-container) ficam fora
   dela, sempre visíveis. overflow:auto nos dois eixos: vertical rola as linhas, horizontal
   continua rolando a tabela quando as colunas somadas passam da largura disponível (era
   overflow-x do .tabela-resultado antes desta divisão). thead th já é position:sticky;top:0
   (ver mais abaixo) — com a rolagem vertical acontecendo AQUI, é a este elemento que o
   cabeçalho da tabela gruda, não mais ao topo da página inteira. */
.tabela-scroll-body[b-rz8otx579x] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tabela-carregando-overlay[b-rz8otx579x] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-brand, #0b4f71);
}

.tabela-carregando-spinner[b-rz8otx579x] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--cv-line, #d8dee6);
    border-top-color: var(--cv-brand, #0b4f71);
    animation: tabela-carregando-girar-b-rz8otx579x 0.7s linear infinite;
}

@keyframes tabela-carregando-girar-b-rz8otx579x {
    to { transform: rotate(360deg); }
}

.table[b-rz8otx579x] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', sans-serif;
}

/* Colunas redimensionáveis por arrasto (column-resize.js) — table-layout:fixed pra cada
   <th> respeitar exatamente a largura definida (inline, via EstiloLargura) em vez de
   recalcular sozinho pelo conteúdo. Colunas sem largura salva ainda dividem o espaço
   sobrando normalmente, então nada muda até o usuário arrastar pela primeira vez.

   width:auto (em vez de herdar o width:100% de .table) + min-width:100% é o que faz a
   tabela crescer além do container quando as colunas somadas passam da largura
   disponível — junto com o min-width somado em EstiloTabela() e o overflow-x:auto de
   .tabela-resultado, a tabela rola de lado em vez de espremer cada coluna pra caber. */
.tabela-redimensionavel[b-rz8otx579x] {
    /* width vem inline (EstiloTabela(), em px) — nada de width:auto/min-width:100% aqui: com
       table-layout:fixed, isso faz a tabela esticar até o container quando a soma das colunas
       é menor que o espaço disponível, e o fixed reparte a sobra entre as colunas em vez de
       deixar espaço em branco. A tabela pode ficar mais estreita que o card; quem cresce além
       do container aciona o scroll horizontal de .tabela-scroll-body — as colunas nunca. */
    table-layout: fixed;
}

    .tabela-redimensionavel th[b-rz8otx579x] {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tabela-redimensionavel td[b-rz8otx579x] {
        overflow: hidden;
        text-overflow: ellipsis;
    }



    .table thead[b-rz8otx579x] {
        /* Mesma cor do cabeçalho da tabela do Portal do Cliente (.portal-tabela th) — as
           duas telas mostram o mesmo tipo de dado, não faz sentido a interna parecer outro
           produto. */
        background: #f3f6fa;
        color: #55606e;
    }

    .table th[b-rz8otx579x] {
        text-align: left;
        padding: 14px;
        font-size: 12px;
        position: sticky;
        top: 0;
        z-index: 1;
        /* th sticky é sua própria caixa pintada — sem background PRÓPRIO aqui, fica
           transparente ao colar no topo da rolagem (.tabela-scroll-body) e deixa as linhas
           passarem por baixo visualmente, mesmo com a cor certa lá no .table thead. */
        background: #f3f6fa;
        /* Sem isto, arrastar perto do puxador de redimensionar ou do cabeçalho arrastável
           (column-drag.js) seleciona o texto como texto comum — a cor de seleção padrão do
           navegador é clara, e por cima do cabeçalho branco-sobre-azul o texto selecionado
           fica praticamente invisível. Cabeçalho não é conteúdo pra selecionar mesmo. */
        user-select: none;
    }

        .table th:first-child[b-rz8otx579x] {
            border-top-left-radius: 10px;
        }

        .table th:last-child[b-rz8otx579x] {
            border-top-right-radius: 10px;
        }

    .th-ordenavel[b-rz8otx579x] {
        user-select: none;
        white-space: nowrap;
    }

    .table td[b-rz8otx579x] {
        padding: 8px;
        font-size: 12px;
        border-bottom: 1px solid #eef0f3;
        vertical-align: middle;
    }

    /* Rodapé de total das colunas financeiras (ValorNumerario/ValorImpostosFederais) — soma
       do conjunto FILTRADO inteiro, não só a página visível (ver agregados em
       ConsultarTotaisFinanceiros). Fundo diferente e texto em negrito pra não confundir com
       uma linha de processo comum; sticky no fim da rolagem vertical da tabela. */
    .linha-total-financeiro td[b-rz8otx579x] {
        background: #f3f6fa;
        font-weight: 700;
        color: #16232e;
        border-top: 2px solid #d8dee6;
        border-bottom: none;
        position: sticky;
        bottom: 0;
        cursor: default;
    }

    .table tbody tr[b-rz8otx579x] {
        cursor: pointer;
    }

    /* Zebrado bem claro — só nas linhas normais, nunca sobre fixada (bg próprio #fffdf5) nem
       sobre o rodapé de total financeiro (bg próprio, sticky). */
    .table tbody tr:nth-child(even):not(.linha-fixada):not(.linha-total-financeiro)[b-rz8otx579x] {
        background: #fafbfd;
    }

    .table tbody tr:hover[b-rz8otx579x] {
        background: #eef6ff;
    }

/* =========================================
   REFERÊNCIA (+ referência do cliente, em linha menor)
========================================= */

/* Quebra em vez de cortar com "..." — texto se adapta à largura da coluna, sem teto de
   linhas nem corte: nome completo do cliente sempre visível. */
.referencia-principal[b-rz8otx579x] {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Só a tela interna: badge de Autorização de Embarque sai do lado direito da célula (ver
   .celula-exportador-agrupada global) e desce pra baixo do país de origem, compacto — o
   Portal continua com o agrupamento em linha original. */
.celula-exportador-agrupada-empilhada[b-rz8otx579x] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

    .celula-exportador-agrupada-empilhada .badge-autorizacao-embarque-compacto[b-rz8otx579x] {
        margin-top: 1px;
    }

.referencia-cliente-sub[b-rz8otx579x] {
    margin-top: 2px;
    font-size: 10.5px;
    color: #8a94a3;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    max-width: 240px;
}

/* Célula de modal, badge de status/SLA (cores por fase do pipeline) — ver
   wwwroot/css/processos-visual.css */

/* =========================================
   ETIQUETAS (estilo categoria do Outlook)
========================================= */

/* .etiquetas-lista, .etiqueta-tag, .etiqueta-add-icon, .etiqueta-modal,
   .etiqueta-visivel-cliente, .btn-etiqueta-excluir, .paleta-cores, .swatch* MUDARAM pra
   wwwroot/css/processos-visual.css (global) — eram CSS isolado deste arquivo, mas o editor
   de etiquetas agora também é usado em ProcessoDetalhe.razor (outro componente), que nunca
   receberia essas regras isoladas (mesmo motivo já documentado pros filtros do Portal). */

/* Versão compacta: linhas mais baixas, sem quebra de linha, mais densa */
.table-compacta th[b-rz8otx579x],
.table-compacta td[b-rz8otx579x] {
    white-space: nowrap;
}

.table-compacta th[b-rz8otx579x] {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.table-compacta td[b-rz8otx579x] {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.3;
}

.table-compacta tbody tr:nth-child(even)[b-rz8otx579x] {
    background: #f8fafc;
}

.table-compacta tbody tr:nth-child(even):hover[b-rz8otx579x] {
    background: #eef6ff;
}

/* Colunas de etapa do fluxo (.th-etapa / .celula-etapa / .celula-etapa-clicavel) — ver
   wwwroot/css/processos-visual.css. Somente leitura: refletem o que está registrado no
   iData. A marcação manual das etapas de checklist entra na sobreposição (banco local). */


/* Marcas de etapa (.etapa-marca / .etapa-concluida / etc.) — ver wwwroot/css/processos-visual.css */

/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 1100px) {

    .kpi-row-principal[b-rz8otx579x] {
        flex-direction: column;
    }

    .kpi-grupo-direita[b-rz8otx579x] {
        align-items: flex-start;
    }

    .kpi-grupo-cards[b-rz8otx579x] {
        flex-wrap: wrap;
    }

    .kpi-total[b-rz8otx579x],
    .kpi-pill[b-rz8otx579x],
    .kpi-modal[b-rz8otx579x] {
        flex: 1 1 auto;
        min-width: 100%;
        max-width: 100%;
    }
}

/* Cores dos cards por responsabilidade/modal (.resp-*/.modal-*) — ver
   wwwroot/css/processos-visual.css */[b-rz8otx579x]

/* =========================================
   AÇÕES DE EXPORT (topo da tabela, botões compactos)
========================================= */

/* ::deep em tudo daqui pra baixo — não depende do atributo de escopo do Blazor bater
   exatamente no elemento (bug visto: sem isso, se o escopo não aplicasse por qualquer
   motivo, o position:relative sumia e o dropdown, sem ancestral posicionado, subia até
   o topo do documento e reaparecia lá embaixo, depois da tabela inteira). */

 .acoes-export {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 0;
}

[b-rz8otx579x] .btn-export-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

    [b-rz8otx579x] .btn-export-mini:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    [b-rz8otx579x] .btn-export-mini .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

[b-rz8otx579x] .btn-export-mini-excel {
    background: linear-gradient(135deg, var(--cv-brand), var(--cv-brand-deep));
}

/* .menu-colunas-dropdown / .menu-colunas-item — visual compartilhado, ver
   wwwroot/css/processos-visual.css */

[b-rz8otx579x] .btn-export-mini-colunas {
    background: linear-gradient(135deg, #64748b, #475569);
}

/* Menu "Exportar" — botão só com ícone (sem rótulo de texto), na mesma linha do
   "🧩 Colunas". Dropdown continua com as 3 opções (Configurar/CSV/Excel). */

[b-rz8otx579x] .menu-exportar-dropdown {
    left: auto;
    right: 0;
    min-width: 220px;
    padding: 6px;
}

[b-rz8otx579x] .menu-exportar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12.5px;
    color: var(--cv-ink);
    text-decoration: none;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

    [b-rz8otx579x] .menu-exportar-item:hover {
        background: var(--cv-surface-alt);
    }

    [b-rz8otx579x] .menu-exportar-item .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
    }

/* =========================================
   FOLLOW-UP (ícone de observações)
========================================= */

.obs-icone[b-rz8otx579x] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.4;
    filter: grayscale(1);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

    .obs-icone:hover[b-rz8otx579x] {
        opacity: 0.9;
        filter: grayscale(0);
        background: #f3f6fa;
    }

.obs-icone-preenchido[b-rz8otx579x] {
    opacity: 1;
    filter: grayscale(0);
}

.obs-icone-contador[b-rz8otx579x] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: white;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    padding: 2px 4px;
    min-width: 12px;
    text-align: center;
}

/* Freetime/armazenagem — mesma paleta do resto do painel (verde/amarelo/vermelho), aqui só a
   data mais urgente das duas; o restante fica no title (tooltip) e no Processo Detalhe. */
.venc-operacional-vazio[b-rz8otx579x] {
    color: #adb5bd;
}

.badge-venc-operacional[b-rz8otx579x] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-venc-verde[b-rz8otx579x] {
    background: #d4edda;
    color: #155724;
}

.badge-venc-amarelo[b-rz8otx579x] {
    background: #fff3cd;
    color: #856404;
}

.badge-venc-vermelho[b-rz8otx579x] {
    background: #f8d7da;
    color: #721c24;
}

.btn-liberar-digitacao[b-rz8otx579x] {
    border: none;
    background: linear-gradient(135deg, var(--cv-brand), var(--cv-brand-deep));
    color: white;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-liberar-digitacao:hover[b-rz8otx579x] {
        filter: brightness(1.05);
    }

.btn-liberar-digitacao-icone[b-rz8otx579x] {
    border: none;
    background: linear-gradient(135deg, #0b4f71, #083a54);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .12s ease;
}

    .btn-liberar-digitacao-icone svg[b-rz8otx579x] {
        width: 13px;
        height: 13px;
    }

    .btn-liberar-digitacao-icone:hover[b-rz8otx579x] {
        filter: brightness(1.12);
    }

    .btn-liberar-digitacao-icone:focus-visible[b-rz8otx579x] {
        outline: 2px solid #0b4f71;
        outline-offset: 2px;
    }

.digitacao-liberada[b-rz8otx579x] {
    font-size: 11px;
    font-weight: 600;
    color: #155724;
    white-space: nowrap;
}

.digitacao-pendente[b-rz8otx579x] {
    font-size: 12px;
    color: #adb5bd;
}

.link-atalho[b-rz8otx579x] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: var(--cv-brand, #0b4f71);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}
/* /Components/Pages/ImportacaoExportConfig.razor.rz.scp.css */
.export-config-container[b-a6nq2t06v5] {
    padding: 20px;
    background: #f5f7fb;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.export-config-card[b-a6nq2t06v5] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 28px;
    max-width: 960px;
    width: 100%;
    height: fit-content;
}

.export-config-header h1[b-a6nq2t06v5] {
    margin: 0 0 6px 0;
    font-size: 22px;
    color: #1f2937;
}

.export-config-header p[b-a6nq2t06v5] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6c757d;
}

.export-config-atalhos[b-a6nq2t06v5] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.link-atalho[b-a6nq2t06v5] {
    border: none;
    background: transparent;
    color: #0056b3;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}

    .link-atalho:hover[b-a6nq2t06v5] {
        text-decoration: underline;
    }

.export-config-secao[b-a6nq2t06v5] {
    padding: 14px 0;
    border-top: 1px solid #eef0f3;
}

    .export-config-secao:last-of-type[b-a6nq2t06v5] {
        border-bottom: 1px solid #eef0f3;
    }

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

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

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

    .export-config-item input[type="checkbox"][b-a6nq2t06v5] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #007bff;
    }

.export-config-acoes[b-a6nq2t06v5] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.btn-voltar[b-a6nq2t06v5] {
    border: 1px solid #dcdcdc;
    background: white;
    color: #333;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .btn-voltar:hover[b-a6nq2t06v5] {
        background: #f3f6fa;
    }

.btn-salvar[b-a6nq2t06v5] {
    border: none;
    background: linear-gradient(135deg, #198754, #157347);
    color: white;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-salvar:hover[b-a6nq2t06v5] {
        filter: brightness(1.05);
    }

.export-config-mensagem[b-a6nq2t06v5] {
    margin-top: 14px;
    font-size: 13px;
    color: #155724;
    background: #d4edda;
    border-radius: 8px;
    padding: 8px 12px;
}
/* /Components/Pages/ListaProcessos.razor.rz.scp.css */
.filtros-container[b-av01wkfc56] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.input-filtro[b-av01wkfc56] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    width: 180px;
    transition: 0.2s;
}

    .input-filtro:focus[b-av01wkfc56] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 4px rgba(0,123,255,0.3);
    }

.filtro-dropdown[b-av01wkfc56] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.tabela-resultado[b-av01wkfc56] {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 10px;
}

/* Tabela base */
.table[b-av01wkfc56] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

    /* Cabeçalho */
    .table thead[b-av01wkfc56] {
        background: linear-gradient(90deg, #007bff, #0056b3);
        color: white;
    }

    .table th[b-av01wkfc56] {
        text-align: left;
        padding: 12px 14px;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    /* Linhas */
    .table td[b-av01wkfc56] {
        padding: 12px 14px;
        font-size: 11px;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.2s ease;
    }

    /* Zebra (alternância de cor) */
    .table tbody tr:nth-child(even)[b-av01wkfc56] {
        background-color: #fafafa;
    }

    /* Hover moderno */
    .table tbody tr[b-av01wkfc56] {
        transition: all 0.25s ease;
    }

        .table tbody tr:hover[b-av01wkfc56] {
            background-color: #eaf4ff;
            transform: scale(1.01);
            box-shadow: 0 2px 10px rgba(0, 123, 255, 0.15);
        }

        /* Clique (ativo) */
        .table tbody tr:active[b-av01wkfc56] {
            transform: scale(0.98);
        }

    /* Cursor já vem do seu código, mas reforçando */
    .table tbody tr[b-av01wkfc56] {
        cursor: pointer;
    }

/* Status estilizado */
.status-badge[b-av01wkfc56] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* Exemplos de cores (opcional usar no Blazor) */
.status-verde[b-av01wkfc56] {
    background: #155724;
    color: white;
}

.status-azul[b-av01wkfc56] {
    background: #d0e7ff;
    color: #004085;
}

.status-amarelo[b-av01wkfc56] {
    background: #fff3cd;
    color: #856404;
}

.status-cinza[b-av01wkfc56] {
    background: #e2e3e5;
    color: #6c757d;
}

.status-vermelho[b-av01wkfc56] {
    background: #ff0000;
    color: white;
}

.topo-filtros[b-av01wkfc56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

/* CARD */
.card-total[b-av01wkfc56] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    min-width: 220px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card-total:hover[b-av01wkfc56] {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

/* Ícone */
.card-icone[b-av01wkfc56] {
    font-size: 40px;
}

/* Texto */
.card-info[b-av01wkfc56] {
    display: flex;
    flex-direction: column;
}

.card-titulo[b-av01wkfc56] {
    font-size: 12px;
    opacity: 0.9;
}

.card-valor[b-av01wkfc56] {
    font-size: 30px;
    font-weight: bold;
}

.modal-icon[b-av01wkfc56] {
    margin-right: 6px;
    font-size: 14px;
    text-align: center;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Visual desta tela é compartilhado com a Seleção de Serviço (mesma casca de
   painel de marca) — ver wwwroot/css/acesso-visual.css, classes .acesso-*.
   Mantido global de propósito, pra as duas telas não divergirem. */
/* /Components/Pages/Manual.razor.rz.scp.css */
body[b-v892ydxnka] {
    background: #f4f6f9;
}

.manual-container[b-v892ydxnka] {
    max-width: 1400px;
    margin: auto;
    padding: 30px;
    font-family: 'Segoe UI';
    color: #1f2937;
}

.capa-manual[b-v892ydxnka] {
    background: linear-gradient(180deg, rgb(0, 110, 181) 0%, #000000 95%);
    color: white;
    padding: 50px;
    border-radius: 18px;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

    .capa-manual h1[b-v892ydxnka] {
        font-size: 42px;
        margin-bottom: 10px;
    }

    .capa-manual p[b-v892ydxnka] {
        font-size: 18px;
        opacity: 0.95;
    }

.box-info[b-v892ydxnka] {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

    .box-info div[b-v892ydxnka] {
        background: rgba(255,255,255,0.12);
        padding: 18px 24px;
        border-radius: 12px;
        min-width: 240px;
        backdrop-filter: blur(4px);
    }

.titulo-info[b-v892ydxnka] {
    display: block;
    font-size: 13px;
    opacity: .8;
    margin-bottom: 5px;
}

.secao[b-v892ydxnka] {
    background: white;
    padding: 30px;
    border-radius: 18px;
    margin-bottom: 25px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

    .secao h2[b-v892ydxnka] {
        margin-bottom: 20px;
        color: #0f172a;
    }

.etapa-card[b-v892ydxnka] {
    background: white;
    border-radius: 18px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.etapa-header[b-v892ydxnka] {
    background: linear-gradient(180deg, rgb(0, 110, 181) 0%, #000000 90%);
    color: white;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.badge[b-v892ydxnka] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.conteudo-etapa[b-v892ydxnka] {
    display: flex;
    gap: 30px;
    padding: 30px;
    flex-wrap: wrap;
}

.info-etapa[b-v892ydxnka] {
    flex: 1;
    min-width: 350px;
}

.linha-info[b-v892ydxnka] {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.label[b-v892ydxnka] {
    font-weight: 700;
    color: #0f172a;
}

.imagem-manual[b-v892ydxnka] {
    width: 700px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .imagem-manual img[b-v892ydxnka] {
        width: 100%;
        border-radius: 14px;
        border: 1px solid #d1d5db;
        background: #f3f4f6;
        min-height: 280px;
        object-fit: cover;
    }

    .imagem-manual span[b-v892ydxnka] {
        font-size: 13px;
        color: #6b7280;
        text-align: center;
    }

.sla-table[b-v892ydxnka] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .sla-table th[b-v892ydxnka] {
        background: #0f172a;
        color: white;
        padding: 12px;
        text-align: left;
    }

    .sla-table td[b-v892ydxnka] {
        padding: 12px;
        border-bottom: 1px solid #e5e7eb;
    }

.timeline[b-v892ydxnka] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.timeline-item[b-v892ydxnka] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .timeline-item span[b-v892ydxnka] {
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #2563eb;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .timeline-item h3[b-v892ydxnka] {
        margin: 0 0 5px 0;
        color: #0f172a;
    }

    .timeline-item p[b-v892ydxnka] {
        margin: 0;
        color: #4b5563;
    }

.mt[b-v892ydxnka] {
    margin-top: 20px;
}

@media(max-width: 1100px) {

    .conteudo-etapa[b-v892ydxnka] {
        flex-direction: column;
    }

    .imagem-manual[b-v892ydxnka] {
        width: 100%;
    }
}
/* /Components/Pages/PaginaSemPermissao.razor.rz.scp.css */
.container-permissao[b-vbtpc3nfjq] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    background: #f4f6f9;
}

.card-permissao[b-vbtpc3nfjq] {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.icone[b-vbtpc3nfjq] {
    font-size: 60px;
    margin-bottom: 15px;
}

.card-permissao h1[b-vbtpc3nfjq] {
    color: #d9534f;
    margin-bottom: 15px;
}

.card-permissao p[b-vbtpc3nfjq] {
    color: #555;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-voltar[b-vbtpc3nfjq] {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

    .btn-voltar:hover[b-vbtpc3nfjq] {
        background: #0056b3;
        transform: scale(1.05);
    }
/* /Components/Pages/PortalUsuarios.razor.rz.scp.css */
/* Tela cheia: sem teto de largura (mesmo padrão de ImpoProcessos.razor.css — max-width:100%,
   não um valor fixo) e altura mínima preenchendo o que sobra abaixo da barra superior (72px,
   ver NavMenu.razor.css), pra não ficar um cartão pequeno flutuando no topo de uma tela alta. */
.portal-admin[b-63kp2lnxvc] {
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - 72px);
    box-sizing: border-box;
    padding: 28px clamp(20px, 3.5vw, 56px) 48px;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
}

    .portal-admin .pagina-titulo[b-63kp2lnxvc] {
        margin: 0 0 4px;
        font-size: 22px;
    }

.portal-admin-subtitulo-pagina[b-63kp2lnxvc] {
    margin: 0 0 22px;
    font-size: 13px;
    color: #6b7684;
}

/* ===== Abas (Perfis | Logins) ===== */

.portal-admin-abas[b-63kp2lnxvc] {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--cv-line, #d8dee6);
}

.portal-admin-aba[b-63kp2lnxvc] {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #8a94a3;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 8px;
    margin-bottom: -1px;
    cursor: pointer;
}

    .portal-admin-aba:hover[b-63kp2lnxvc] {
        color: var(--cv-ink, #16232e);
    }

    .portal-admin-aba.ativa[b-63kp2lnxvc] {
        color: var(--cv-brand, #0b4f71);
        border-bottom-color: var(--cv-brand, #0b4f71);
    }

    .portal-admin-aba:focus-visible[b-63kp2lnxvc] {
        outline: 3px solid #c8862a;
        outline-offset: 1px;
    }

/* ===== Cartões de seção ===== */

/* flex:1 — a seção ativa estica até preencher o que sobra da tela, em vez de um cartão do
   tamanho do conteúdo boiando no topo de uma viewport alta (era a leitura de "parcial"). */
.portal-admin-secao[b-63kp2lnxvc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 14px;
    padding: 26px 28px 32px;
    box-shadow: 0 1px 2px rgba(11, 79, 113, 0.04);
}

.portal-admin-secao-topo[b-63kp2lnxvc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cv-line, #d8dee6);
}

    .portal-admin-secao-topo h2[b-63kp2lnxvc] {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--cv-ink, #16232e);
    }

.portal-admin-secao-legenda[b-63kp2lnxvc] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #6b7684;
    max-width: 62ch;
}

.portal-admin-vazio[b-63kp2lnxvc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 40px;
    text-align: center;
    font-size: 13.5px;
    color: #8a94a3;
    background: var(--cv-surface-alt, #f3f6fa);
    border-radius: 10px;
    border: 1px dashed var(--cv-line, #d8dee6);
}

/* ===== Botões ===== */

.portal-admin button[b-63kp2lnxvc] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

    .portal-admin button:focus-visible[b-63kp2lnxvc] {
        outline: 3px solid #c8862a;
        outline-offset: 1px;
    }

.botao-primario[b-63kp2lnxvc] {
    background: var(--cv-brand, #0b4f71);
    border: 1px solid var(--cv-brand, #0b4f71);
    color: #ffffff;
}

    .botao-primario:hover[b-63kp2lnxvc] {
        background: var(--cv-brand-deep, #073853);
        border-color: var(--cv-brand-deep, #073853);
    }

.botao-secundario[b-63kp2lnxvc] {
    background: #ffffff;
    border: 1px solid var(--cv-line, #d8dee6);
    color: #55606e;
}

    .botao-secundario:hover[b-63kp2lnxvc] {
        background: var(--cv-surface-alt, #f3f6fa);
        border-color: #b9c2cc;
    }

.botao-fantasma[b-63kp2lnxvc] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cv-brand, #0b4f71);
    padding: 6px 10px;
}

    .botao-fantasma:hover[b-63kp2lnxvc] {
        background: var(--cv-surface-alt, #f3f6fa);
        border-color: var(--cv-line, #d8dee6);
    }

.botao-perigo[b-63kp2lnxvc] {
    color: #b5423a;
}

/* ===== Tabelas ===== */

.portal-admin-tabela-wrap[b-63kp2lnxvc] {
    flex: 1;
    overflow-x: auto;
}

.portal-admin-tabela[b-63kp2lnxvc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .portal-admin-tabela th[b-63kp2lnxvc] {
        text-align: left;
        padding: 11px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #8a94a3;
        border-bottom: 1px solid var(--cv-line, #d8dee6);
        white-space: nowrap;
    }

    .portal-admin-tabela td[b-63kp2lnxvc] {
        padding: 12px 14px;
        border-bottom: 1px solid #f1f5f9;
        color: var(--cv-ink, #16232e);
        vertical-align: middle;
    }

    .portal-admin-tabela tbody tr:hover[b-63kp2lnxvc] {
        background: var(--cv-surface-alt, #f3f6fa);
    }

    .portal-admin-tabela tbody tr:last-child td[b-63kp2lnxvc] {
        border-bottom: none;
    }

.portal-admin-tabela-forte[b-63kp2lnxvc] {
    font-weight: 600;
}

.portal-admin-tabela-mono[b-63kp2lnxvc] {
    font-family: var(--cv-mono, Consolas, monospace);
    font-size: 12px;
}

.portal-admin-tabela-sutil[b-63kp2lnxvc] {
    color: #8a94a3;
    font-size: 12px;
}

.portal-admin-tabela-acoes[b-63kp2lnxvc] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    text-align: right;
}

/* ===== Selos (checagem de permissão) e status ===== */

.portal-selo[b-63kp2lnxvc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

    .portal-selo.on[b-63kp2lnxvc] {
        background: #e5f3ec;
        color: #2e7d5b;
    }

    .portal-selo.off[b-63kp2lnxvc] {
        background: #f1f5f9;
        color: #b9c2cc;
    }

.portal-status[b-63kp2lnxvc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
}

    .portal-status[b-63kp2lnxvc]::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .portal-status.ativo[b-63kp2lnxvc] {
        background: #e5f3ec;
        color: #2e7d5b;
    }

        .portal-status.ativo[b-63kp2lnxvc]::before {
            background: #2e7d5b;
        }

    .portal-status.inativo[b-63kp2lnxvc] {
        background: #f1f5f9;
        color: #8a94a3;
    }

        .portal-status.inativo[b-63kp2lnxvc]::before {
            background: #b9c2cc;
        }

/* ===== Formulários (usam .portal-admin-modal-corpo — Perfil e Login viraram os dois um
   modal, pelo mesmo motivo: um formulário estreito e fixo boiando no meio de uma tela larga
   é justamente o efeito "parcial" que este redesenho tira do caminho) ===== */

.portal-admin-checkbox-linha[b-63kp2lnxvc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cv-ink, #16232e);
    margin-top: 8px;
    cursor: pointer;
}

.portal-admin-checkgrid[b-63kp2lnxvc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 16px;
    margin-top: 4px;
}

    .portal-admin-checkgrid label[b-63kp2lnxvc] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 400;
        font-size: 12.5px;
        color: var(--cv-ink, #16232e);
        margin-top: 0;
        padding: 4px 2px;
    }

.portal-admin-form-acoes[b-63kp2lnxvc] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.portal-admin-selecionado[b-63kp2lnxvc] {
    font-size: 12px;
    font-weight: 600;
    color: #2e7d5b;
    margin: 2px 0 0;
}

.portal-admin-erro[b-63kp2lnxvc] {
    color: #b5423a;
    font-size: 12px;
    background: #fdf2f1;
    border: 1px solid #f3c8c3;
    border-radius: 7px;
    padding: 8px 10px;
    margin: 8px 0 0;
}

.portal-admin-subtitulo[b-63kp2lnxvc] {
    display: block;
    margin: 16px 0 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--cv-ink, #16232e);
}

.portal-admin-nota[b-63kp2lnxvc] {
    margin: 0 0 6px;
    font-size: 11px;
    color: #8a94a3;
}

/* Empresas já adicionadas ao login, no formulário de criar/editar (PortalUsuarios.razor) —
   cada chip é removível, pra montar o conjunto sem reabrir a busca do zero a cada troca. */
.portal-admin-empresas-chips[b-63kp2lnxvc] {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .portal-admin-empresas-chips li[b-63kp2lnxvc] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #eef2f6;
        border: 1px solid #d8dee6;
        border-radius: 999px;
        padding: 4px 6px 4px 12px;
        font-size: 12px;
        color: #16232e;
    }

    .portal-admin-empresas-chips button[b-63kp2lnxvc] {
        border: none;
        background: none;
        color: #8a94a3;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 50%;
    }

        .portal-admin-empresas-chips button:hover[b-63kp2lnxvc] {
            background: #dbe2ea;
            color: #b5423a;
        }

.portal-admin-colunas-extras[b-63kp2lnxvc] {
    /* O pai (.portal-admin-modal-corpo) é flex com overflow-y:auto — item flex com
       overflow próprio ganha min-height automático 0 por padrão (regra do spec), e some
       (encolhe pra ~padding) espremido pelos vizinhos. flex-shrink:0 trava o tamanho real
       (até max-height, aí rola por dentro). */
    flex-shrink: 0;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 8px;
    align-content: start;
}

    .portal-admin-colunas-extras label[b-63kp2lnxvc] {
        font-size: 12px;
        font-weight: 400;
        color: var(--cv-ink, #16232e);
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 0;
        padding: 5px 6px;
        border-radius: 5px;
    }

        .portal-admin-colunas-extras label:hover[b-63kp2lnxvc] {
            background: var(--cv-surface-alt, #f3f6fa);
        }

/* grid-column:1/-1 — o rótulo do grupo atravessa todas as colunas do grid acima, em vez de
   virar mais uma célula estreita entre os checkboxes. */
.portal-admin-colunas-grupo[b-63kp2lnxvc] {
    grid-column: 1 / -1;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8a94a3;
    padding: 9px 6px 3px;
    border-top: 1px solid #f1f5f9;
    margin-top: 3px;
}

    .portal-admin-colunas-grupo:first-child[b-63kp2lnxvc] {
        border-top: none;
        margin-top: 0;
    }

.portal-admin-cor-selo[b-63kp2lnxvc] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.portal-admin-logo-selo[b-63kp2lnxvc] {
    display: inline-block;
    height: 22px;
    max-width: 60px;
    width: auto;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: middle;
    background: #f3f6fa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 2px 4px;
}

.portal-admin-cor-linha[b-63kp2lnxvc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .portal-admin-cor-linha input[type="color"][b-63kp2lnxvc] {
        width: 40px;
        height: 34px;
        padding: 2px;
        border: 1px solid var(--cv-line, #d8dee6);
        border-radius: 6px;
        cursor: pointer;
    }

.portal-admin-linha-clicavel[b-63kp2lnxvc] {
    cursor: pointer;
}

/* ===== Modal do login (identidade + empresas + cor + logo, um formulário só) ===== */

.portal-admin-modal-overlay[b-63kp2lnxvc] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    z-index: 100;
}

.portal-admin-modal[b-63kp2lnxvc] {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 12px 40px rgba(11, 79, 113, 0.22);
}

.portal-admin-modal-estreito[b-63kp2lnxvc] {
    max-width: 400px;
}

/* Modal do Perfil: mais campo (checkboxes + colunas extras + etapas) do que o de Login,
   então ganha mais largura pra render em 2-3 colunas em vez de empilhar tudo numa coluna só. */
.portal-admin-modal-largo[b-63kp2lnxvc] {
    max-width: 760px;
}

.portal-admin-modal-header[b-63kp2lnxvc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cv-line, #d8dee6);
}

    .portal-admin-modal-header h3[b-63kp2lnxvc] {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--cv-ink, #16232e);
    }

/* Selo "visualizando" — lembrete de que o formulário está travado até "Editar", pro admin
   não estranhar por que os campos não respondem ao clique. */
.portal-admin-modal-modo[b-63kp2lnxvc] {
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8a94a3;
    background: var(--cv-surface-alt, #f3f6fa);
    border-radius: 999px;
    padding: 3px 9px;
    vertical-align: middle;
}

.portal-admin-modal-fechar[b-63kp2lnxvc] {
    background: none;
    border: none;
    font-size: 15px;
    color: #8a94a3;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

    .portal-admin-modal-fechar:hover[b-63kp2lnxvc] {
        background: var(--cv-surface-alt, #f3f6fa);
        color: var(--cv-ink, #16232e);
    }

.portal-admin-modal-corpo[b-63kp2lnxvc] {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 76vh;
    overflow-y: auto;
}

    .portal-admin-modal-corpo label[b-63kp2lnxvc] {
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin-top: 6px;
    }

    .portal-admin-modal-corpo input[type="text"][b-63kp2lnxvc],
    .portal-admin-modal-corpo input:not([type])[b-63kp2lnxvc],
    .portal-admin-modal-corpo select[b-63kp2lnxvc] {
        font-family: inherit;
        font-size: 13px;
        padding: 8px 10px;
        border-radius: 7px;
        border: 1px solid var(--cv-line, #d8dee6);
        background: #ffffff;
        color: var(--cv-ink, #16232e);
    }

    /* select[size] tem scroll interno nativo do navegador (overflow-y calculado pelo próprio
       Chrome, não por regra nossa) — dentro de um flex column (.portal-admin-modal-corpo), todo
       elemento com overflow diferente de "visible" perde o tamanho mínimo automático baseado no
       conteúdo (vira 0, pela spec de flexbox) e é espremido pelos vizinhos até quase sumir. Sem
       flex-shrink:0 + min-height aqui, a lista de empresas encontradas renderizava como uma
       linha de ~2px, sem nenhuma opção visível — existia no DOM, só não dava pra ver. */
    .portal-admin-modal-corpo select[size][b-63kp2lnxvc] {
        padding: 4px;
        flex-shrink: 0;
        min-height: 130px;
    }

.portal-admin-modal-divisor[b-63kp2lnxvc] {
    border: none;
    border-top: 1px solid var(--cv-line, #d8dee6);
    margin: 16px 0 4px;
}

.portal-admin-logo-preview-linha[b-63kp2lnxvc] {
    margin: 4px 0 8px;
}

.portal-admin-logo-preview-modal[b-63kp2lnxvc] {
    height: 44px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
    background: var(--cv-surface-alt, #f3f6fa);
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 8px;
    padding: 6px 10px;
}

@media (max-width: 640px) {
    .portal-admin-secao-topo[b-63kp2lnxvc] {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-admin-checkgrid[b-63kp2lnxvc] {
        grid-template-columns: 1fr;
    }

    .portal-admin-modal-overlay[b-63kp2lnxvc] {
        padding: 0;
        align-items: stretch;
    }

    .portal-admin-modal[b-63kp2lnxvc] {
        max-width: none;
        border-radius: 0;
        min-height: 100%;
    }
}
/* /Components/Pages/Portal/PortalAparencia.razor.rz.scp.css */
.portal-aparencia-caixa[b-sbo4coywv2] {
    gap: 4px;
}

.portal-aparencia-intro[b-sbo4coywv2] {
    margin: 0 0 16px 0;
    font-size: 12.5px;
    color: #6b7684;
    line-height: 1.5;
}

.portal-aparencia-preview[b-sbo4coywv2] {
    height: 40px;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.portal-aparencia-linha[b-sbo4coywv2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.portal-aparencia-picker[b-sbo4coywv2] {
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    cursor: pointer;
    background: none;
}

.portal-aparencia-hex[b-sbo4coywv2] {
    max-width: 120px;
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    text-transform: uppercase;
}

.portal-aparencia-aviso[b-sbo4coywv2] {
    margin: 12px 0 0 0;
    font-size: 12px;
    color: #8a6d1a;
    background: #fdf6e3;
    border: 1px solid #f0e0a8;
    border-radius: 6px;
    padding: 8px 10px;
}

.portal-aparencia-check[b-sbo4coywv2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cv-ink, #16232e);
    margin-top: 14px;
    cursor: pointer;
}

.portal-aparencia-acoes[b-sbo4coywv2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.portal-aparencia-btn-padrao[b-sbo4coywv2] {
    background: none;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #16232e;
}

    .portal-aparencia-btn-padrao:hover[b-sbo4coywv2] {
        background: #f3f6fa;
    }

    .portal-aparencia-btn-padrao:disabled[b-sbo4coywv2] {
        opacity: 0.6;
        cursor: default;
    }

.portal-aparencia-logo-preview-linha[b-sbo4coywv2] {
    margin-bottom: 14px;
}

.portal-aparencia-logo-preview[b-sbo4coywv2] {
    height: 56px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    display: block;
    background: #f3f6fa;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    padding: 8px 12px;
}

.portal-aparencia-logo-vazio[b-sbo4coywv2] {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 16px;
    background: #f3f6fa;
    border: 1px dashed #d8dee6;
    border-radius: 8px;
    color: #8a94a3;
    font-size: 12.5px;
}
/* /Components/Pages/Portal/PortalLogin.razor.rz.scp.css */
.portal-login[b-edlioup4fe] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ===== Painel de marca ===== */

.portal-login-marca[b-edlioup4fe] {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 48px;
    background: #052a3b;
}

.portal-login-foto[b-edlioup4fe] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.16) translate(1.5%, -1.5%);
    animation: portal-foto-chega-b-edlioup4fe 5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s forwards;
}

@keyframes portal-foto-chega-b-edlioup4fe {
    to { transform: scale(1) translate(0, 0); }
}

/* Véu com o azul da marca sobre a foto — mantém o texto legível e ancora
   a foto na mesma identidade visual do restante do app. */
.portal-login-veu[b-edlioup4fe] {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(11, 79, 113, 0.88) 0%, rgba(7, 56, 83, 0.82) 55%, rgba(5, 42, 59, 0.94) 100%);
}

.portal-login-marca-conteudo[b-edlioup4fe] {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.portal-login-logo-chip[b-edlioup4fe] {
    display: inline-flex;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

    .portal-login-logo-chip img[b-edlioup4fe] {
        height: 44px;
        width: auto;
        display: block;
    }

.portal-login-heranca[b-edlioup4fe] {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c8862a;
}

.portal-login-frase[b-edlioup4fe] {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    color: #cfe0ea;
    letter-spacing: 0.1px;
}

/* ===== Painel de acesso ===== */

.portal-login-area[b-edlioup4fe] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6fa;
    padding: 32px;
}

.portal-login-caixa[b-edlioup4fe] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11, 79, 113, 0.12);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 380px;
    animation: portal-caixa-entra-b-edlioup4fe 0.5s ease-out 0.1s both;
}

@keyframes portal-caixa-entra-b-edlioup4fe {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.portal-login-eyebrow[b-edlioup4fe] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0b4f71;
    margin-bottom: 6px;
}

.portal-login-caixa h1[b-edlioup4fe] {
    margin: 0 0 6px;
    font-size: 22px;
    color: #16232e;
}

.portal-login-subtitulo[b-edlioup4fe] {
    margin: 0 0 24px;
    font-size: 13px;
    color: #6b7684;
}

.portal-login-erro[b-edlioup4fe] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.portal-login-form[b-edlioup4fe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .portal-login-form label[b-edlioup4fe] {
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
        margin-top: 10px;
    }

    .portal-login-form input[b-edlioup4fe] {
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #dcdcdc;
        font-size: 14px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .portal-login-form input:focus-visible[b-edlioup4fe] {
            outline: none;
            border-color: #0b4f71;
            box-shadow: 0 0 0 3px rgba(11, 79, 113, 0.15);
        }

    .portal-login-form button[b-edlioup4fe] {
        margin-top: 22px;
        padding: 11px;
        border: none;
        border-radius: 8px;
        background: #0b4f71;
        color: white;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease;
    }

        .portal-login-form button:hover[b-edlioup4fe] {
            background: #073853;
        }

        .portal-login-form button:focus-visible[b-edlioup4fe] {
            outline: 3px solid #c8862a;
            outline-offset: 2px;
        }

@media (prefers-reduced-motion: reduce) {
    .portal-login-foto[b-edlioup4fe],
    .portal-login-caixa[b-edlioup4fe] {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 860px) {
    .portal-login[b-edlioup4fe] {
        grid-template-columns: 1fr;
    }

    .portal-login-marca[b-edlioup4fe] {
        padding: 32px 28px;
        min-height: 240px;
        align-items: center;
    }

    .portal-login-logo-chip img[b-edlioup4fe] {
        height: 36px;
    }

    .portal-login-frase[b-edlioup4fe] {
        font-size: 15px;
    }

    .portal-login-area[b-edlioup4fe] {
        padding: 28px 20px 40px;
    }
}
/* /Components/Pages/Portal/PortalProcessos.razor.rz.scp.css */
/* Layout/cromado próprios do Portal (cabeçalho, sair, wrapper da tabela, paginação). Os cards
   KPI, chips de status, badge de status/SLA, ícone de modal e marcas de etapa vêm do visual
   compartilhado com a tela interna — ver wwwroot/css/processos-visual.css e
   Components/Shared/KpiCardsProcessos.razor / StatusChipsProcessos.razor. */

.portal-processos[b-l7ow8tf6vz] {
    font-family: 'Segoe UI', sans-serif;
    padding: 12px 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #f5f7fb;
    /* Preenche a altura que sobra de .portal-layout (100dvh, ver processos-visual.css) — só
       a área de linhas da tabela rola, cabeçalho de marca/filtros/chips e a paginação ficam
       sempre visíveis. Mesmo ajuste de Importação · Processos. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.portal-cabecalho[b-l7ow8tf6vz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .portal-cabecalho h1[b-l7ow8tf6vz] {
        margin: 0;
        font-size: 22px;
        color: #16232e;
    }

.portal-cliente-nome[b-l7ow8tf6vz] {
    font-size: 13px;
    color: #6b7684;
}

.portal-sair[b-l7ow8tf6vz] {
    background: none;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #16232e;
}

    .portal-sair:hover[b-l7ow8tf6vz] {
        background: #f3f6fa;
    }

.portal-tabela-wrap[b-l7ow8tf6vz] {
    background: white;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Só esta área rola — cabeçalho e paginação ficam fora dela. overflow:auto nos dois eixos:
   vertical rola as linhas, horizontal continua rolando a tabela quando as colunas somadas
   passam da largura disponível (era o overflow-x de .portal-tabela-wrap antes desta divisão).
   .portal-tabela th vira sticky top:0 (ver mais abaixo) relativo a ESTE elemento. */
.portal-tabela-scroll-body[b-l7ow8tf6vz] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.portal-tabela[b-l7ow8tf6vz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .portal-tabela th[b-l7ow8tf6vz] {
        text-align: left;
        padding: 7px 10px;
        background: #f3f6fa;
        color: #55606e;
        font-weight: 600;
        border-bottom: 1px solid #d8dee6;
        white-space: nowrap;
        /* Arrastar perto do puxador de redimensionar ou do cabeçalho arrastável (column-drag.js)
           não deveria selecionar o texto como texto comum — mesmo ajuste da tela interna. */
        user-select: none;
        /* Gruda no topo de .portal-tabela-scroll-body ao rolar as linhas — mesmo ajuste de
           Importação · Processos. th é sua própria caixa pintada: o background PRECISA estar
           aqui (não só herdado do bloco acima), senão fica transparente ao colar e as linhas
           passam por baixo visualmente. */
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .portal-tabela td[b-l7ow8tf6vz] {
        padding: 4px 10px;
        border-bottom: 1px solid #eef0f3;
        line-height: 1.3;
    }

/* Rodapé de total das colunas financeiras (ValorNumerario/ValorImpostosFederais) — soma do
   conjunto FILTRADO inteiro, não só a página visível (agregados, ver ConsultarTotaisFinanceiros
   em ClassComandos.cs). Mesmo estilo do rodapé equivalente da tela interna. */
.linha-total-financeiro td[b-l7ow8tf6vz] {
    background: #f3f6fa;
    font-weight: 700;
    color: #16232e;
    border-top: 2px solid #d8dee6;
    border-bottom: none;
    position: sticky;
    bottom: 0;
    cursor: default;
}

/* A linha inteira leva ao detalhe (clique em qualquer célula, não só na Referência) —
   o cursor e o realce avisam isso antes do clique. */
.portal-linha-clicavel[b-l7ow8tf6vz] {
    cursor: pointer;
}

    .portal-linha-clicavel:hover[b-l7ow8tf6vz] {
        background: #f3f6fa;
    }

/* Redimensionar (column-resize.js) e reordenar (column-drag.js) — mesmos scripts da tela
   interna (Importação · Processos). table-layout:fixed é o que faz a largura de cada <th>
   realmente prender a coluna; sem isso o navegador recalcula sozinho pelo conteúdo.

   NÃO declarar width aqui (nem "auto"). table-layout:fixed com width:auto cai de volta no
   layout automático por conteúdo (CSS 2.1 §17.5.2) — foi o que quebrou a rolagem lateral:
   colunas paravam de respeitar a largura arrastada e a tabela nunca crescia além do
   container, então .portal-tabela-wrap nunca precisava rolar. A tabela herda width:100% de
   .portal-tabela, e o min-width somado em EstiloTabela() (inline, por isso sempre vence)
   é quem força a tabela além do container quando as colunas somadas passam da largura
   disponível — mesmo mecanismo de ImpoProcessos.razor.css (.tabela-redimensionavel), que já
   funciona. Daí em diante é só o overflow-x:auto de .portal-tabela-wrap que faz o resto. */
.portal-tabela-redimensionavel[b-l7ow8tf6vz] {
    /* width vem inline (EstiloTabela(), em px) — mesma correção da tela interna. Nada de
       width:auto/min-width:100% aqui: com table-layout:fixed isso esticava a tabela até o
       container quando a soma das colunas era menor que o espaço disponível, e o fixed
       repartia a sobra entre as colunas em vez de deixar espaço em branco. */
    table-layout: fixed;
}

    .portal-tabela-redimensionavel th[b-l7ow8tf6vz] {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .portal-tabela-redimensionavel td[b-l7ow8tf6vz] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.portal-tabela .th-ordenavel[b-l7ow8tf6vz] {
    cursor: pointer;
    user-select: none;
}

    .portal-tabela .th-ordenavel:hover[b-l7ow8tf6vz] {
        background: #eaf1f8;
    }

.portal-paginacao[b-l7ow8tf6vz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
    font-size: 13px;
    /* Fora de .portal-tabela-scroll-body — sempre visível por estrutura, não por sticky.
       Mesma redução de altura da tela interna (ImpoProcessos.razor.css .paginacao-container). */
    flex-shrink: 0;
}

    .portal-paginacao button[b-l7ow8tf6vz] {
        border: 1px solid #d8dee6;
        background: white;
        border-radius: 8px;
        padding: 4px 12px;
        cursor: pointer;
    }

.portal-paginacao-tamanho[b-l7ow8tf6vz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .portal-paginacao-tamanho label[b-l7ow8tf6vz] {
        color: #6b7785;
    }

/* Select isolado (não herda .filtro-dropdown de ImpoProcessos.razor.css) — mesmo visual da
   tela interna, redeclarado aqui só pra este dropdown. */
.portal-paginacao-tamanho .filtro-dropdown[b-l7ow8tf6vz] {
    border: 1px solid #d8dee6;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

/* Coluna "Referência" unificada — mesmas classes de ImpoProcessos.razor.css (isolado, não
   chega até aqui), valores idênticos. Ordem invertida de propósito: aqui quem é "principal"
   (linha de cima, destacada) é a Ref. Cliente, não a nossa — é por ela que o cliente se
   localiza; a Fischer & Rechsteiner vira o subtítulo pequeno embaixo. */
.referencia-principal[b-l7ow8tf6vz] {
    font-family: var(--cv-mono);
    font-variant-numeric: tabular-nums;
}

.referencia-cliente-sub[b-l7ow8tf6vz] {
    margin-top: 2px;
    font-size: 10.5px;
    color: #8a94a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* Agente de carga, à direita da referência Fischer na mesma linha — mesmo tamanho da
   referência, só um pouco mais escuro pra não competir com ela sendo dado secundário. */
.portal-ref-agente[b-l7ow8tf6vz] {
    color: #55606e;
}

/* Mesma compactação do resto da tabela, só que aqui por cima do !important global
   (.celula-logistica em processos-visual.css é compartilhada com a tela interna, que
   continua no tamanho de sempre) — precisa de seletor mais específico pra vencer. */
.portal-tabela .celula-logistica[b-l7ow8tf6vz] {
    padding: 4px 10px !important;
    gap: 8px;
}

.portal-tabela .log-icone-atualizar svg[b-l7ow8tf6vz] {
    width: 20px;
    height: 20px;
}

/* Coluna "Logística" — modal+rota (celula-modal/log-* em processos-visual.css, mesma
   consolidação da tela interna) e a espinha de "Onde está a carga" (pd-espinha no
   detalhe do processo), deitada e reduzida a cinco marcas, cada uma com sua própria cor
   da progressão (.mini-atingido.pos-* abaixo) e o MESMO selo colorido de "Posição Atual"
   por baixo (.embarque-badge/.emb-* em processos-visual.css — StatusEmbarqueVisual.Classe).
   O trilho mostra o trajeto percorrido; o selo diz em palavras onde a carga está agora. */

/* .log-icone-atualizar (processos-visual.css) nasceu clicável — na tela interna ele TAMBÉM
   é o botão de atualização de atendimento. Aqui é só o ícone do modal, sem essa ação (o
   Portal não tem o conceito de atendimento do lado do cliente) — cursor/hover de botão
   ficariam prometendo um clique que não faz nada. */
.celula-logistica .log-icone-atualizar[b-l7ow8tf6vz] {
    cursor: default;
    color: var(--cv-brand-deep, #073853);
}

    .celula-logistica .log-icone-atualizar:hover[b-l7ow8tf6vz] {
        opacity: 1;
    }

.mini-espinha[b-l7ow8tf6vz] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
}

.mini-passo[b-l7ow8tf6vz] {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d8dee6;
    flex: 0 0 auto;
}

/* A linha entre marcas: só entre as que já foram atingidas ganha cor, o resto do
   trajeto fica cinza — mesma leitura da versão vertical do detalhe. Mais comprida
   que o traço original: a coluna agora tem largura de sobra pra mostrar o trajeto
   inteiro, não só sugeri-lo. */
.mini-passo:not(:last-child)[b-l7ow8tf6vz]::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 2px;
    background: #d8dee6;
}

.mini-atingido[b-l7ow8tf6vz] {
    background: #0b4f71;
    border-color: #0b4f71;
}

.mini-atingido:not(:last-child)[b-l7ow8tf6vz]::after {
    background: #0b4f71;
}

/* Cada estágio atingido ganha a própria cor da progressão azul→roxo→ciano→índigo→rosa
   (.pos-* em processos-visual.css, mesma usada nos cards KPI) em vez do azul único acima
   — os valores aqui espelham os de lá de propósito (é CSS isolado do componente: o global
   não vence a especificidade do .mini-atingido sozinho, precisa da combinação de classes).
   :not(.mini-atual) deixa o estágio ATUAL de fora: esse continua âmbar (regra abaixo),
   sempre — senão a cor da posição venceria a do "você está aqui" por especificidade. */
.mini-atingido.pos-embarque:not(.mini-atual)[b-l7ow8tf6vz] { background: #2563eb; border-color: #1d4ed8; }
.mini-atingido.pos-embarque:not(:last-child)[b-l7ow8tf6vz]::after { background: #2563eb; }

.mini-atingido.pos-transito:not(.mini-atual)[b-l7ow8tf6vz] { background: #8b5cf6; border-color: #6d28d9; }
.mini-atingido.pos-transito:not(:last-child)[b-l7ow8tf6vz]::after { background: #8b5cf6; }

.mini-atingido.pos-atracado:not(.mini-atual)[b-l7ow8tf6vz] { background: #06b6d4; border-color: #0e7490; }
.mini-atingido.pos-atracado:not(:last-child)[b-l7ow8tf6vz]::after { background: #06b6d4; }

.mini-atingido.pos-desembaraco:not(.mini-atual)[b-l7ow8tf6vz] { background: #6366f1; border-color: #4338ca; }
.mini-atingido.pos-desembaraco:not(:last-child)[b-l7ow8tf6vz]::after { background: #6366f1; }

.mini-atingido.pos-entregue:not(.mini-atual)[b-l7ow8tf6vz] { background: #ec4899; border-color: #be185d; }
.mini-atingido.pos-entregue:not(:last-child)[b-l7ow8tf6vz]::after { background: #ec4899; }

/* O único acento âmbar da marca — onde a carga está agora, igual ao detalhe. */
.mini-atual[b-l7ow8tf6vz] {
    background: #c8862a;
    border-color: #c8862a;
    box-shadow: 0 0 0 3px rgba(200, 134, 42, 0.22);
}

.mini-posicao-linha[b-l7ow8tf6vz] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

/* .embarque-badge já define o formato do selo (pílula, peso, tamanho) — aqui só
   ajusta pro espaço mais apertado da célula da lista. */
.mini-posicao-selo[b-l7ow8tf6vz] {
    font-size: 10.5px;
    padding: 1px 6px;
    letter-spacing: 0.02em;
}

.mini-posicao-data[b-l7ow8tf6vz] {
    font-size: 10.5px;
    color: #8a94a3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


        .portal-paginacao button:disabled[b-l7ow8tf6vz] {
            opacity: 0.5;
            cursor: default;
        }

/* Autorização de embarque + prioridade — priorização manual de embarque
   (PortalPerfil.PermitirAutorizacaoEmbarque). A célula só mostra um ícone de status;
   checkbox e select ficam no modal (AbrirAutorizacao) — mantém a tabela limpa e evita
   salvar por engano ao clicar perto do controle numa linha vizinha. */
.celula-autorizacao[b-l7ow8tf6vz] {
    text-align: center;
}

/* .celula-exportador-agrupada MUDOU pra wwwroot/css/processos-visual.css (global) — usada
   também na tela interna (ImpoProcessos.razor), outro componente que CSS isolado não alcança. */

/* Mesmo ajuste feito na tela interna: badge sai do lado direito e desce pra baixo do país
   de origem, empilhado e compacto — CSS isolado, só vale aqui (ver mesma classe em
   ImpoProcessos.razor.css, cada tela com a própria cópia). */
.celula-exportador-agrupada-empilhada[b-l7ow8tf6vz] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

    .celula-exportador-agrupada-empilhada .badge-autorizacao-embarque-compacto[b-l7ow8tf6vz] {
        margin-top: 1px;
    }

.portal-autorizacao-icone[b-l7ow8tf6vz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d8dee6;
    background: #f3f6fa;
    color: #8a94a3;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.portal-autorizacao-icone:hover[b-l7ow8tf6vz] {
    background: #e5e9ee;
}

/* Autorizado com prioridade Alta — chama mais atenção que os demais estados. */
.portal-autorizacao-icone.autorizacao-alta[b-l7ow8tf6vz] {
    background: #fdeeea;
    border-color: #f3c8c3;
    color: #c0392b;
}

.portal-autorizacao-icone.autorizacao-ok[b-l7ow8tf6vz] {
    background: #e9f7ee;
    border-color: #bfe6cd;
    color: #1e8a4c;
}

.portal-autorizacao-icone.autorizacao-pendente[b-l7ow8tf6vz] {
    background: #f3f6fa;
    border-color: #d8dee6;
    color: #8a94a3;
}

/* Só usado pelo Numerário Externo — "Solicitado" (o account já pediu o pagamento, aguardando
   o cliente) é um 4º estado que Autorização de Embarque não tem. */
.portal-autorizacao-icone.autorizacao-solicitado[b-l7ow8tf6vz] {
    background: #eaf2fb;
    border-color: #c3d9f3;
    color: #2266b0;
}

/* Numerário Externo — pill de status com rótulo por extenso, mesmo idioma visual do selo de
   vencimentos do cabeçalho interno (header-venc-resumo/header-venc-ponto, processos-visual.css):
   texto lido de cara, sem decorar o que um glifo sozinho (✓/▲/$/○) queria dizer. O pontinho
   pulsa só quando falta o CLIENTE agir (Pendente/Solicitado) — Pago e Confirmado ficam parados. */
.numerario-status-pill[b-l7ow8tf6vz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .numerario-status-pill:hover[b-l7ow8tf6vz] {
        filter: brightness(0.95);
    }

.numerario-status-ponto[b-l7ow8tf6vz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: numerario-status-pulsar-b-l7ow8tf6vz 1.6s ease-in-out infinite;
}

@keyframes numerario-status-pulsar-b-l7ow8tf6vz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .numerario-status-ponto[b-l7ow8tf6vz] {
        animation: none;
    }
}

.numerario-status-pendente[b-l7ow8tf6vz] {
    color: #8a94a3;
    background: #f3f6fa;
    border-color: #d8dee6;
}

.numerario-status-solicitado[b-l7ow8tf6vz] {
    color: #2266b0;
    background: #eaf2fb;
    border-color: #c3d9f3;
}

/* Âmbar, não vermelho: o cliente já pagou e anexou o comprovante — é "em andamento",
   aguardando conferência do account, não um alerta. */
.numerario-status-pago[b-l7ow8tf6vz] {
    color: #b8730f;
    background: #fdf1e0;
    border-color: #f0d8ab;
}

.numerario-status-confirmado[b-l7ow8tf6vz] {
    color: #1e8a4c;
    background: #e9f7ee;
    border-color: #bfe6cd;
}

/* Corpo do modal de manutenção (checkbox + prioridade) — reaproveita o chassi
   .portal-modal* global (processos-visual.css), só o conteúdo é específico daqui. */
.portal-autorizacao-modal-corpo[b-l7ow8tf6vz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portal-autorizacao-check[b-l7ow8tf6vz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #16232e;
    cursor: pointer;
}

.portal-autorizacao-rotulo-select[b-l7ow8tf6vz] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #55606e;
}

.portal-autorizacao-prioridade[b-l7ow8tf6vz] {
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    background: white;
    color: #16232e;
    cursor: pointer;
}

.portal-autorizacao-nota[b-l7ow8tf6vz] {
    margin: 0;
    font-size: 12px;
    color: #8a94a3;
}

.portal-autorizacao-modal-acoes[b-l7ow8tf6vz] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.portal-btn-primario[b-l7ow8tf6vz] {
    background: var(--cv-brand-deep, #0b4f71);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}

/* Rascunho de e-mail ao exportador — passo 2 do modal de Autorização de Embarque, um botão
   por idioma (mesma paleta de .portal-btn-primario, mas como link mailto — precisa do próprio
   text-decoration/display que um <a> não herda de graça de um botão). */
.portal-autorizacao-idiomas[b-l7ow8tf6vz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-autorizacao-idioma-btn[b-l7ow8tf6vz] {
    display: inline-flex;
    align-items: center;
    background: var(--cv-brand-deep, #0b4f71);
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

    .portal-autorizacao-idioma-btn:hover[b-l7ow8tf6vz] {
        opacity: 0.9;
    }

.portal-btn-primario:hover[b-l7ow8tf6vz] {
    opacity: 0.9;
}

.link-atalho[b-l7ow8tf6vz] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    color: inherit;
}

/* Linha de filtros própria, logo abaixo dos cards — mesmo layout da tela interna (Importação · Processos).
   A reserva/abertura da linha (.filtros-linha-*) e os chips são globais, em processos-visual.css. */
.filtros-container[b-l7ow8tf6vz] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    background: white;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 9px;
    padding: 5px 8px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
/* /Components/Pages/ProcessoDetalhe.razor.rz.scp.css */
/* Token system desta tela — mesma paleta/família de marca usada no resto do app
   (processos-visual.css, e-mails, login do Portal): consistência entre telas pesa mais,
   aqui, do que uma paleta nova só pra esta página. O risco de design fica na estrutura
   (faixa de rota + abas), não na cor. */
.processo-container[b-ne1i5x6fja] {
    --pd-brand: #0b4f71;
    --pd-brand-deep: #073853;
    --pd-ink: #16232e;
    --pd-surface-alt: #f3f6fa;
    --pd-line: #d8dee6;
    --pd-verde: #2e7d5b;
    --pd-vermelho: #b5423a;
    --pd-amber: #c8862a;
    --pd-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--pd-ink);
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    gap: 5px;
    background-color: #f5f7fb;
}

.loading[b-ne1i5x6fja] {
    padding: 60px 0;
    text-align: center;
    color: #6b7684;
}

/* ===== Cabeçalho ===== */

.processo-header[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid var(--pd-line);
    box-shadow: 0 2px 6px rgba(11, 79, 113, 0.05);
    margin-bottom: 14px;
}

.btn-voltar[b-ne1i5x6fja] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--pd-line);
    background: white;
    color: var(--pd-brand);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .btn-voltar:hover[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
        border-color: var(--pd-brand);
    }

.header-titulo[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.header-eyebrow[b-ne1i5x6fja] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a94a3;
}

.header-titulo h1[b-ne1i5x6fja] {
    margin: 0;
    font-size: 21px;
    font-family: var(--pd-mono);
    font-variant-numeric: tabular-nums;
    color: var(--pd-ink);
}

.header-ref-cliente[b-ne1i5x6fja] {
    font-size: 11.5px;
    color: #6b7684;
}

.header-partes[b-ne1i5x6fja] {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

.header-parte[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 0 14px;
    margin-left: 14px;
    border-left: 1px solid var(--pd-line);
    justify-content: center;
}

.header-parte-label[b-ne1i5x6fja] {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a94a3;
}

.header-parte-valor[b-ne1i5x6fja] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.header-parte-cnpj[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    font-family: var(--pd-mono);
    font-variant-numeric: tabular-nums;
    color: #6b7684;
    flex-shrink: 0;
}

.btn-copiar-cnpj[b-ne1i5x6fja] {
    border: none;
    background: transparent;
    color: #8a94a3;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
}

    .btn-copiar-cnpj:hover[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
        color: var(--pd-brand);
    }

/* Coluna à direita do cabeçalho: o selo de vencimentos em cima (discreto, só levanta a voz
   quando há algo vencido/vencendo), os badges operacionais de sempre embaixo. */
.header-lado-direito[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: auto;
}

.header-chips[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Selo de resumo de vencimentos — atalho pro card "Controle de Vencimentos" (âncora
   #controle-vencimentos). Em dia: quase invisível, cor neutra, sem dot. Assim que há algo
   vencendo ou vencido, ganha cor e o pontinho pulsante chama o olho sem gritar. */
.header-venc-resumo[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    font-family: inherit;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .header-venc-resumo:hover[b-ne1i5x6fja] {
        filter: brightness(0.96);
    }

.header-venc-ok[b-ne1i5x6fja] {
    color: #8a94a3;
    background: transparent;
    border-color: var(--pd-line);
}

.header-venc-amarelo[b-ne1i5x6fja] {
    color: var(--pd-amber);
    background: rgba(200, 134, 42, 0.12);
    border-color: rgba(200, 134, 42, 0.3);
    font-weight: 700;
}

.header-venc-vermelho[b-ne1i5x6fja] {
    color: var(--pd-vermelho);
    background: rgba(181, 66, 58, 0.12);
    border-color: rgba(181, 66, 58, 0.3);
    font-weight: 700;
}

.header-venc-ponto[b-ne1i5x6fja] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: header-venc-pulsar-b-ne1i5x6fja 1.6s ease-in-out infinite;
}

@keyframes header-venc-pulsar-b-ne1i5x6fja {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .header-venc-ponto[b-ne1i5x6fja] {
        animation: none;
    }
}

/* Badges */
.badge[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    font-family: inherit;
}

/* Posicao atual do processo (mesma cascata e mesmas cores da coluna de Registro). */
.badge-posicao[b-ne1i5x6fja] {
    background: #6b7686;
    color: white;
}

    .badge-posicao.pos-embarque[b-ne1i5x6fja] { background: #3b6fd8; }
    .badge-posicao.pos-transito[b-ne1i5x6fja] { background: #6d4fd0; }
    .badge-posicao.pos-atracado[b-ne1i5x6fja] { background: #0d9db8; }
    .badge-posicao.pos-desembaraco[b-ne1i5x6fja] { background: #4a54c9; }
    .badge-posicao.pos-entregue[b-ne1i5x6fja] { background: #c2367a; }

/* Barra de a��es do cabe�alho: uma a��o principal (Atualizar), uma secund�ria (Arquivos) e o
   menu "Mais" para o resto. Bot�es de contorno; s� a principal � preenchida. */
.header-acoes[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.hdr-acao[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pd-line);
    border-radius: 9px;
    background: white;
    color: var(--pd-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

    .hdr-acao:hover[b-ne1i5x6fja] {
        border-color: var(--pd-brand);
        background: var(--pd-surface-alt);
        color: var(--pd-brand);
    }

    .hdr-acao:active[b-ne1i5x6fja] {
        transform: translateY(1px);
    }

    .hdr-acao:focus-visible[b-ne1i5x6fja],
    .hdr-mais-item:focus-visible[b-ne1i5x6fja] {
        outline: 2px solid var(--pd-brand);
        outline-offset: 2px;
    }

.hdr-acao-primaria[b-ne1i5x6fja] {
    background: var(--pd-brand);
    border-color: var(--pd-brand-deep);
    color: white;
}

    .hdr-acao-primaria:hover[b-ne1i5x6fja] {
        background: var(--pd-brand-deep);
        border-color: var(--pd-brand-deep);
        color: white;
    }

/* Atendimento vencido: a a��o principal vira alerta (mesma regra do antigo badge vermelho). */
.hdr-acao-alerta[b-ne1i5x6fja] {
    background: var(--pd-vermelho);
    border-color: var(--pd-vermelho);
}

    .hdr-acao-alerta:hover[b-ne1i5x6fja] {
        background: #93332c;
        border-color: #93332c;
    }

.hdr-acao-icone[b-ne1i5x6fja] {
    width: 34px;
    padding: 0;
    justify-content: center;
}

.hdr-mais[b-ne1i5x6fja] {
    position: relative;
}

/* Fundo transparente que fecha o menu ao clicar fora (sem depender de JS). */
.hdr-mais-fundo[b-ne1i5x6fja] {
    position: fixed;
    inset: 0;
    z-index: 20;
    border: none;
    background: transparent;
    cursor: default;
}

.hdr-mais-menu[b-ne1i5x6fja] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 21;
    min-width: 260px;
    padding: 5px;
    border: 1px solid var(--pd-line);
    border-radius: 11px;
    background: white;
    box-shadow: 0 12px 28px rgba(4, 30, 44, 0.18);
    animation: hdr-mais-entrar-b-ne1i5x6fja 0.14s ease-out both;
}

@keyframes hdr-mais-entrar-b-ne1i5x6fja {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.hdr-mais-item[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--pd-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .hdr-mais-item:hover[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
        color: var(--pd-brand);
    }

@media (prefers-reduced-motion: reduce) {
    .hdr-mais-menu[b-ne1i5x6fja] {
        animation: none;
    }
}

/* Navegação Anterior/Próximo — mesma ordem da tabela de Processos (fixados incluídos),
   lida de sessionStorage (ver clipboard.js, salvarSequenciaProcessos/lerSequenciaProcessos).
   Some quando não há sequência salva (acesso direto pela URL, por exemplo). */
.processo-nav[b-ne1i5x6fja] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.processo-nav-btn[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 4px 10px;
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .processo-nav-btn:not(:disabled):hover[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
        border-color: var(--pd-brand);
    }

    .processo-nav-btn:disabled[b-ne1i5x6fja] {
        opacity: 0.35;
        cursor: default;
    }

.processo-nav-btn-proximo[b-ne1i5x6fja] {
    flex-direction: row;
}

.processo-nav-seta[b-ne1i5x6fja] {
    font-size: 14px;
    color: var(--pd-brand);
    flex-shrink: 0;
}

.processo-nav-preview[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    text-align: left;
}

    .processo-nav-preview strong[b-ne1i5x6fja] {
        font-size: 11px;
        font-family: var(--pd-mono);
        color: var(--pd-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .processo-nav-preview span[b-ne1i5x6fja] {
        font-size: 9.5px;
        color: #8a94a3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.canal-verde[b-ne1i5x6fja] {
    background: #d4edda;
    color: #155724;
}

.canal-amarelo[b-ne1i5x6fja] {
    background: #fff3cd;
    color: #856404;
}

.canal-vermelho[b-ne1i5x6fja] {
    background: #f8d7da;
    color: #721c24;
}

.canal-cinza[b-ne1i5x6fja] {
    background: #e2e3e5;
    color: #383d41;
}

/* ===== Faixa de rota (assinatura visual — mesma linguagem do login do Portal) ===== */

.rota-strip[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(160deg, var(--pd-brand) 0%, var(--pd-brand-deep) 100%);
    border-radius: 10px;
    padding: 10px 22px;
    margin-bottom: 10px;
    color: white;
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Transbordo: escala intermediária de processotracking — marcador discreto entre os dois
   pontos principais (embarque/chegada), não compete visualmente com eles. */
.rota-ponto-transbordo[b-ne1i5x6fja] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    opacity: 0.85;
}

    .rota-ponto-transbordo[b-ne1i5x6fja]::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        border: 2px solid var(--pd-brand-deep);
        margin-bottom: 2px;
    }

    .rota-ponto-transbordo .rota-info[b-ne1i5x6fja] {
        align-items: center;
    }

    .rota-ponto-transbordo .rota-rotulo[b-ne1i5x6fja] {
        font-size: 8.5px;
    }

    .rota-ponto-transbordo strong[b-ne1i5x6fja] {
        font-size: 12px;
    }

.rota-ponto[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rota-ponto-fim[b-ne1i5x6fja] {
    margin-left: auto;
    flex-direction: row-reverse;
    text-align: right;
}

.rota-icone[b-ne1i5x6fja] {
    font-size: 18px;
    flex-shrink: 0;
}

.rota-icone-fim[b-ne1i5x6fja] {
    font-size: 15px;
    opacity: 0.85;
}

.rota-info[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rota-ponto-fim .rota-info[b-ne1i5x6fja] {
    align-items: flex-end;
}

.rota-rotulo[b-ne1i5x6fja] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.65);
}

.rota-info strong[b-ne1i5x6fja] {
    font-size: 12.5px;
}

.rota-data[b-ne1i5x6fja] {
    font-size: 10.5px;
    font-family: var(--pd-mono);
    font-variant-numeric: tabular-nums;
}

.rota-data.prevista[b-ne1i5x6fja] {
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

.rota-data.confirmada[b-ne1i5x6fja] {
    color: #d9f2e6;
    font-weight: 600;
}

.rota-linha[b-ne1i5x6fja] {
    flex: 1;
    height: 2px;
    min-width: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    position: relative;
}

.rota-linha-ativa[b-ne1i5x6fja] {
    background: rgba(255, 255, 255, 0.65);
}

/* ===== Grade de 4 colunas (Follow-up | Despacho | Dados Gerais | Histórico) =====
   Substituiu o layout de sidebar fixa + grid separado: agora é tudo cards do mesmo
   tipo (.info-card) numa grade só, cada um cuidando do seu próprio scroll interno
   (historico-lista/followup-lista já tem max-height, então a coluna não estica
   sem limite quando o histórico é longo). */

.grade-4col[b-ne1i5x6fja] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Altura padronizada: os 4 cards têm quantidades de conteúdo bem diferentes
   (Histórico pode ter dezenas de eventos, Dados Gerais são 4 campos) — sem uma altura
   fixa comum, cada um ficava do tamanho do próprio conteúdo. As listas que podem
   crescer (historico-lista/followup-lista) ganham scroll interno (flex:1 abaixo) pra
   caber dentro dessa altura em vez de estourar o card. */
.grade-4col > .info-card[b-ne1i5x6fja] {
    height: 460px;
    overflow-y: auto;
}

.card-pendencia[b-ne1i5x6fja] {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--pd-line);
    font-size: 11px;
    color: #8a94a3;
    font-style: italic;
}

.atualizacao-toggle[b-ne1i5x6fja] {
    margin-bottom: 4px;
}

.historico-lista[b-ne1i5x6fja],
.followup-lista[b-ne1i5x6fja] {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.historico-item[b-ne1i5x6fja] {
    display: flex;
    gap: 6px;
}

.historico-ponto[b-ne1i5x6fja] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.historico-ponto-auto[b-ne1i5x6fja] {
    background: #2b6cb0;
}

.historico-ponto-manual[b-ne1i5x6fja] {
    background: #d97706;
}

.historico-item-corpo[b-ne1i5x6fja] {
    background: var(--pd-surface-alt);
    border-radius: 6px;
    padding: 6px 8px;
    flex: 1;
    font-size: 11.5px;
}

.historico-item-topo[b-ne1i5x6fja] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: #475569;
}

.historico-item-tipo[b-ne1i5x6fja] {
    font-weight: 600;
    color: var(--pd-brand);
}

.historico-item-corpo p[b-ne1i5x6fja] {
    margin: 3px 0;
    color: var(--pd-ink);
}

.historico-item-usuario[b-ne1i5x6fja] {
    font-size: 9px;
    color: #94a3b8;
}

.historico-vazio[b-ne1i5x6fja] {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

.historico-novo[b-ne1i5x6fja],
.followup-novo[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .historico-novo textarea[b-ne1i5x6fja],
    .followup-novo textarea[b-ne1i5x6fja] {
        resize: vertical;
        border-radius: 6px;
        border: 1px solid #cbd5e0;
        padding: 8px 10px;
        font-family: inherit;
        font-size: 13px;
    }

    .historico-novo button[b-ne1i5x6fja],
    .followup-novo button[b-ne1i5x6fja] {
        align-self: flex-end;
        background: var(--pd-brand);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 8px 14px;
        font-size: 13px;
        cursor: pointer;
    }

        .historico-novo button:disabled[b-ne1i5x6fja],
        .followup-novo button:disabled[b-ne1i5x6fja] {
            opacity: 0.5;
            cursor: default;
        }

.historico-nota[b-ne1i5x6fja] {
    font-size: 10px;
    color: #64748b;
    margin: 10px 0 0;
}

.followup-item[b-ne1i5x6fja] {
    background: var(--pd-surface-alt);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11.5px;
}

.followup-item-topo[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: #475569;
    margin-bottom: 3px;
}

.followup-item-topo-info[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.followup-item-remover[b-ne1i5x6fja] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #adb5bd;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 4px;
}

    .followup-item-remover:hover[b-ne1i5x6fja] {
        background: rgba(220, 53, 69, 0.12);
        color: #dc3545;
    }

.followup-item p[b-ne1i5x6fja] {
    margin: 0;
    color: var(--pd-ink);
}

/* Concluído: continua no histórico, só marcado como resolvido — mesmo princípio de
   "nunca apagar, só marcar por cima" que o resto do app já segue (etapas, checklist). */
.followup-item-concluido[b-ne1i5x6fja] {
    opacity: 0.6;
}

    .followup-item-concluido p[b-ne1i5x6fja] {
        text-decoration: line-through;
    }

.followup-badge-cliente[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    background: #fff3cd;
    color: #856404;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 10px;
}

.followup-item-flags[b-ne1i5x6fja] {
    display: flex;
    gap: 12px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--pd-line);
}

.followup-flag-check[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #55606e;
    cursor: pointer;
}

    .followup-flag-check input[type="checkbox"][b-ne1i5x6fja] {
        cursor: pointer;
        accent-color: var(--pd-brand);
    }

/* ===== Envio por e-mail (Atualização e Follow-up) ===== */

.followup-envio[b-ne1i5x6fja] {
    border-top: 1px solid var(--pd-line);
    margin-top: 4px;
    padding-top: 10px;
}

.followup-envio-toggle[b-ne1i5x6fja] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-brand);
    cursor: pointer;
}

.followup-envio-corpo[b-ne1i5x6fja] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .followup-envio-corpo label[b-ne1i5x6fja] {
        font-size: 11.5px;
        font-weight: 600;
        color: #55606e;
        margin-top: 6px;
    }

.followup-envio-input[b-ne1i5x6fja] {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e0;
    font-size: 12.5px;
    font-family: inherit;
}

    .followup-envio-input:focus[b-ne1i5x6fja] {
        outline: none;
        border-color: var(--pd-brand);
    }

    .followup-envio-input:disabled[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
        color: #8a94a3;
    }

.followup-envio-nota[b-ne1i5x6fja] {
    margin: 2px 0 0;
    font-size: 11px;
    color: #8a94a3;
}

.followup-envio-acoes[b-ne1i5x6fja] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

    .followup-envio-acoes button[b-ne1i5x6fja] {
        flex: 1;
        border: none;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .followup-envio-acoes button:disabled[b-ne1i5x6fja] {
        opacity: 0.5;
        cursor: default;
    }

.followup-envio-copiar[b-ne1i5x6fja] {
    background: white;
    color: var(--pd-ink);
    border: 1px solid var(--pd-line) !important;
}

    .followup-envio-copiar:hover:not(:disabled)[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
    }

.followup-envio-enviar[b-ne1i5x6fja] {
    background: var(--pd-brand);
    color: white;
}

    .followup-envio-enviar:hover:not(:disabled)[b-ne1i5x6fja] {
        background: var(--pd-brand-deep);
    }

.followup-envio-mensagem[b-ne1i5x6fja] {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
}

    .followup-envio-mensagem.sucesso[b-ne1i5x6fja] {
        color: var(--pd-verde);
    }

    .followup-envio-mensagem.erro[b-ne1i5x6fja] {
        color: var(--pd-vermelho);
    }

/* ===== Grid de cards de conteúdo ===== */

/* grid-auto-rows: 1fr (removido) equalizava a altura de TODAS as linhas do grid entre si,
   não só dos cards dentro da mesma linha — cross-row, não intra-row. Era por isso que
   Dados Gerais/Logística/Vencimentos, cada um numa linha diferente, ficavam esticados até
   bater com o card mais alto (Despacho) mesmo sem compartilhar linha visual com ele. O
   grid já iguala a altura dos cards que DIVIDEM linha por conta própria (align-items:
   stretch é o padrão do grid) — não precisava do fr pra isso. */
.card-full[b-ne1i5x6fja] {
    grid-column: 1 / -1;
}

    .card-full .card-content[b-ne1i5x6fja] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 8px 14px;
    }

    .card-full .data-group[b-ne1i5x6fja] {
        font-size: 12.5px;
    }

/* Cards da grade de 4 colunas (Despacho/Dados Gerais): coluna única — o card já é
   estreito (1/4 da largura), 2 colunas internas cramparia rótulo e valor. Seletor
   composto (duas classes) de propósito: garante especificidade maior que .card-content
   sozinho, então não depende de ordem no arquivo pra vencer a cascata. */
.card-content.card-content-1col[b-ne1i5x6fja] {
    grid-template-columns: 1fr;
}

/* Vencimentos logo abaixo do cabeçalho: uma linha só, título à esquerda e os documentos
   correndo ao lado — mais discreto que um card comum, é alerta, não o assunto principal da
   tela. Sem estado de expandir/recolher: bater o olho já mostra tudo.
   Seletor composto (.info-card.vencimentos-linha-unica, não só a classe sozinha) de
   propósito: com a mesma especificidade de ".info-card"/".info-card h2" a ordem no arquivo
   decidiria quem vence, e ".info-card" vem depois — já caímos nessa (ver card-content-1col
   mais abaixo). Composto garante a prioridade sem depender de onde a regra mora no arquivo. */
.info-card.vencimentos-linha-unica[b-ne1i5x6fja] {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 8px 14px;
    scroll-margin-top: 14px; /* respiro pro scroll do selo do cabeçalho não colar no topo */
}

    .info-card.vencimentos-linha-unica h2[b-ne1i5x6fja] {
        flex-shrink: 0;
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
        font-size: 10px;
        line-height: 1;
    }

        .info-card.vencimentos-linha-unica h2 .icon[b-ne1i5x6fja] {
            font-size: 11px;
        }

.info-card[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 2px 6px rgba(11, 79, 113, 0.04);
    border: 1px solid var(--pd-line);
}

    .info-card h2[b-ne1i5x6fja] {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin: 0 0 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #edf2f7;
        color: var(--pd-brand-deep);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .info-card h2 .icon[b-ne1i5x6fja] {
            font-style: normal;
            font-size: 15px;
        }

.card-content[b-ne1i5x6fja] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    align-content: start;
    flex: 1;
}

.data-group[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    min-width: 0;
}

    .data-group strong[b-ne1i5x6fja] {
        color: #8a94a3;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        margin-bottom: 2px;
    }

    .data-group span[b-ne1i5x6fja] {
        color: var(--pd-ink);
        font-weight: 500;
        word-break: break-word;
    }

/* ===== Controle de Vencimentos ===== */

.vencimentos-lista[b-ne1i5x6fja] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* Um documento, um chip: título · data · status · ação, lado a lado do título da seção
   inteira (ver .vencimentos-linha-unica) — não estica mais pra preencher coluna de grid,
   é largura de conteúdo mesmo. */
.vencimento-linha[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    padding: 5px 8px;
    background: var(--pd-surface-alt);
    border-radius: 7px;
    border: 1px solid var(--pd-line);
}

.vencimento-titulo[b-ne1i5x6fja] {
    flex: 0 0 auto;
    max-width: 130px;
    font-size: 11px;
    font-weight: 700;
    color: var(--pd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vencimento-data[b-ne1i5x6fja] {
    flex-shrink: 0;
    font-size: 10.5px;
    color: #718096;
    font-family: var(--pd-mono);
    font-variant-numeric: tabular-nums;
}

.vencimento-badge[b-ne1i5x6fja] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.vencimento-verde[b-ne1i5x6fja] {
    background: #d4edda;
    color: #155724;
}

.vencimento-vermelho[b-ne1i5x6fja] {
    background: #f8d7da;
    color: #721c24;
}

.vencimento-amarelo[b-ne1i5x6fja] {
    background: #fff3cd;
    color: #856404;
}

.vencimento-indefinido[b-ne1i5x6fja] {
    background: #e2e3e5;
    color: #383d41;
}

/* Mesmos dois campos, agora dentro do card "Logística" (data-group, rótulo em cima/valor
   embaixo) em vez do card "Controle de Vencimentos" — só a moldura muda, input+badge são os
   mesmos de sempre. */
.vencimento-linha-inline[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vencimento-input[b-ne1i5x6fja] {
    flex: 1;
    min-width: 0;
    font-size: 10.5px;
    font-family: var(--pd-mono);
    color: var(--pd-ink);
    border: 1px solid var(--pd-line);
    border-radius: 5px;
    padding: 2px 4px;
    background: #fff;
}

.vencimento-btn-icone[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: white;
    border: 1px solid var(--pd-line);
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
}

    .vencimento-btn-icone:hover[b-ne1i5x6fja] {
        background: var(--pd-surface-alt);
        border-color: var(--pd-brand);
    }

.vencimento-pendente[b-ne1i5x6fja] {
    font-size: 11px;
    color: #856404;
    white-space: nowrap;
}

/* ===== Checklist como faixa de tags (era grid de cards — bem mais compacto) ===== */

.checklist-tags[b-ne1i5x6fja] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.check-tag[b-ne1i5x6fja] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #55606e;
    background: var(--pd-surface-alt);
    border-radius: 20px;
    padding: 6px 12px 6px 14px;
    border-left: 3px solid var(--pd-line);
}

    .check-tag strong[b-ne1i5x6fja] {
        font-size: 11.5px;
        font-weight: 700;
    }

.check-sim[b-ne1i5x6fja] {
    border-left-color: var(--pd-verde);
}

    .check-sim strong[b-ne1i5x6fja] {
        color: var(--pd-verde);
    }

.check-nao[b-ne1i5x6fja] {
    border-left-color: var(--pd-vermelho);
}

    .check-nao strong[b-ne1i5x6fja] {
        color: var(--pd-vermelho);
    }

.check-na[b-ne1i5x6fja] {
    border-left-color: #b9c2cc;
}

    .check-na strong[b-ne1i5x6fja] {
        color: #8a94a3;
    }

.check-pendente[b-ne1i5x6fja] {
    border-left-color: var(--pd-amber);
}

    .check-pendente strong[b-ne1i5x6fja] {
        color: var(--pd-amber);
    }

/* ===== Responsividade ===== */

@media (max-width: 992px) {
    .grade-4col[b-ne1i5x6fja] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grade-4col[b-ne1i5x6fja] {
        grid-template-columns: 1fr;
    }

    .card-content[b-ne1i5x6fja] {
        grid-template-columns: 1fr;
    }

    .processo-header[b-ne1i5x6fja] {
        flex-wrap: wrap;
    }

    .header-chips[b-ne1i5x6fja] {
        margin-left: 0;
        width: 100%;
    }

    .header-lado-direito[b-ne1i5x6fja] {
        width: 100%;
        align-items: flex-start;
    }

    .header-acoes[b-ne1i5x6fja] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .rota-strip[b-ne1i5x6fja] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .rota-ponto-fim[b-ne1i5x6fja] {
        margin-left: 0;
        flex-direction: row;
        text-align: left;
    }

    .rota-ponto-fim .rota-info[b-ne1i5x6fja] {
        align-items: flex-start;
    }

    .rota-linha[b-ne1i5x6fja] {
        width: 2px;
        height: 24px;
        min-width: 0;
        margin-left: 10px;
    }
}

.mercadoria-vazio[b-ne1i5x6fja] {
    color: #8a94a3;
    font-size: 13px;
}

.mercadoria-tabela[b-ne1i5x6fja] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .mercadoria-tabela th[b-ne1i5x6fja] {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        color: #8a94a3;
        padding: 4px 6px;
        border-bottom: 1px solid #d8dee6;
    }

    .mercadoria-tabela td[b-ne1i5x6fja] {
        padding: 6px;
        border-bottom: 1px solid #eef1f5;
        vertical-align: top;
    }

.mercadoria-acoes[b-ne1i5x6fja] {
    white-space: nowrap;
    text-align: right;
}

.mercadoria-form[b-ne1i5x6fja] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.mercadoria-form-acoes[b-ne1i5x6fja] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.link-atalho[b-ne1i5x6fja] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: #0b4f71;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

.botao-fantasma[b-ne1i5x6fja] {
    background: none;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #16232e;
    align-self: flex-start;
}

    .botao-fantasma:hover[b-ne1i5x6fja] {
        background: #f3f6fa;
    }

/* Mercadoria mora fora da grade de 4 colunas (ver ProcessoDetalhe.razor) — sem item, é só
   este botão embaixo dos cards, sem abrir espaço reservado pra seção vazia. */
.mercadoria-botao-adicionar[b-ne1i5x6fja] {
    margin-top: 4px;
}

/* Com item cadastrado, o card ocupa a largura toda abaixo da grade — a tabela lê melhor
   esticada do que espremida numa coluna de 4. */
.mercadoria-card-largo[b-ne1i5x6fja] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

/* Pin de fixar/desafixar ao lado da refer�ncia � mesmo visual do da lista de Processos. */
.header-referencia-linha[b-ne1i5x6fja] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detalhe-fixar-btn[b-ne1i5x6fja] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    opacity: 0.3;
    filter: grayscale(1);
}

    .detalhe-fixar-btn:hover[b-ne1i5x6fja],
    .detalhe-fixar-btn:focus-visible[b-ne1i5x6fja] {
        opacity: 0.75;
        background: rgba(0, 0, 0, 0.06);
    }

    .detalhe-fixar-btn.detalhe-fixar-btn-ativo[b-ne1i5x6fja] {
        opacity: 1;
        filter: none;
    }

.pend-declarada[b-ne1i5x6fja] {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #e3f4ea;
    color: #1e7a3c;
    font-size: 12px;
    font-weight: 600;
}
/* /Components/Pages/RegistroControle.razor.rz.scp.css */
/* Estrutura da página (container, cabeçalho, filtros, tabela, botões) vem de wwwroot/css/painel-tema.css (classes pg-*).
   Aqui só o que é próprio da tela de Registro. */

.col-ref[b-z7g8rf4hnq] {
    font-weight: 700;
    color: #16233b;
    white-space: nowrap;
}

.celula-sub[b-z7g8rf4hnq] {
    font-size: 11px;
    color: #6b7686;
    margin-top: 1px;
}

.celula-vazia[b-z7g8rf4hnq],
.celula-vazia-traco[b-z7g8rf4hnq] {
    color: #8a94a3;
}

.celula-vazia[b-z7g8rf4hnq] {
    text-align: center;
    padding: 24px;
}

.badge-modal[b-z7g8rf4hnq] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #3d4759;
    background: #eef0f4;
    border-radius: 6px;
    padding: 2px 8px;
}

.badge-posicao[b-z7g8rf4hnq] {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: white;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    background: #6b7686;
}

    .badge-posicao.pos-embarque[b-z7g8rf4hnq] { background: #3b6fd8; }
    .badge-posicao.pos-transito[b-z7g8rf4hnq] { background: #6d4fd0; }
    .badge-posicao.pos-atracado[b-z7g8rf4hnq] { background: #0d9db8; }
    .badge-posicao.pos-desembaraco[b-z7g8rf4hnq] { background: #4a54c9; }
    .badge-posicao.pos-entregue[b-z7g8rf4hnq] { background: #c2367a; }

.prep-linha[b-z7g8rf4hnq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 1px 0;
}

.prep-rotulo[b-z7g8rf4hnq],
.dupla-rotulo[b-z7g8rf4hnq] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8a94a3;
    min-width: 34px;
    display: inline-block;
}

.dupla-linha[b-z7g8rf4hnq] {
    white-space: nowrap;
}

.badge-status[b-z7g8rf4hnq] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
}

.status-nao-iniciada[b-z7g8rf4hnq] { background: #eef0f4; color: #55606e; }
.status-andamento[b-z7g8rf4hnq] { background: #dceafd; color: #0b4f9c; }
.status-pausada[b-z7g8rf4hnq] { background: #fdf3d8; color: #8a6d1f; }
.status-finalizada[b-z7g8rf4hnq] { background: #d9f2e6; color: #12684a; }

.badge-prioridade[b-z7g8rf4hnq] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
}

.prioridade-baixa[b-z7g8rf4hnq] { background: #eef0f4; color: #55606e; }
.prioridade-normal[b-z7g8rf4hnq] { background: #dceafd; color: #0b4f9c; }
.prioridade-alta[b-z7g8rf4hnq] { background: #fdf3d8; color: #8a6d1f; }
.prioridade-critico[b-z7g8rf4hnq] { background: #f8d7da; color: #842029; }

.num-etapas[b-z7g8rf4hnq] {
    display: flex;
    gap: 6px;
}

.num-etapa[b-z7g8rf4hnq] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px dashed #d5dbe5;
    font-size: 10.5px;
    font-weight: 700;
    color: #8a94a3;
    line-height: 1.25;
}

    .num-etapa em[b-z7g8rf4hnq] {
        font-style: normal;
        font-weight: 600;
        font-size: 11px;
    }

    .num-etapa.num-feita[b-z7g8rf4hnq] {
        border: 1px solid #b7e0cb;
        background: #eaf7f0;
        color: #12684a;
    }

.registro-feito[b-z7g8rf4hnq] {
    display: inline-block;
    font-weight: 700;
    color: #12684a;
    background: #d9f2e6;
    border-radius: 20px;
    padding: 2px 10px;
}

.registro-rodape[b-z7g8rf4hnq] {
    margin-top: 16px;
}

.badge-registro[b-z7g8rf4hnq] {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.reg-pendente[b-z7g8rf4hnq] { background: #eef0f4; color: #55606e; }
.reg-diagnosticado[b-z7g8rf4hnq] { background: #fdf3d8; color: #8a6d1f; }
.reg-registrado[b-z7g8rf4hnq] { background: #d9f2e6; color: #12684a; }

.prev-atrasada[b-z7g8rf4hnq] {
    color: #b02a37;
    font-weight: 700;
}
/* /Components/Pages/RelatorioMovimentacao.razor.rz.scp.css */
.relatorio-movimentacao[b-yeaa2s4o9d] {
    padding: 24px;
    max-width: 720px;
}

    .relatorio-movimentacao h1[b-yeaa2s4o9d] {
        font-size: 20px;
        margin: 0 0 6px;
        color: #16232e;
    }

.relatorio-subtitulo[b-yeaa2s4o9d] {
    font-size: 13px;
    color: #55606e;
    margin: 0 0 20px;
    max-width: 640px;
}

.relatorio-filtros[b-yeaa2s4o9d] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

    .relatorio-filtros label[b-yeaa2s4o9d] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        color: #55606e;
    }

    .relatorio-filtros select[b-yeaa2s4o9d],
    .relatorio-filtros input[b-yeaa2s4o9d] {
        font-size: 13px;
        padding: 7px 10px;
        border: 1px solid #d8dee6;
        border-radius: 6px;
        min-width: 200px;
    }

.relatorio-btn-gerar[b-yeaa2s4o9d] {
    background: var(--cv-brand-deep, #0b4f71);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    cursor: pointer;
    height: 34px;
}

    .relatorio-btn-gerar:hover[b-yeaa2s4o9d] {
        opacity: 0.9;
    }

.relatorio-resumo[b-yeaa2s4o9d] {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: #16232e;
    margin-bottom: 12px;
}

.relatorio-vazio[b-yeaa2s4o9d] {
    color: #8a94a3;
    font-size: 13px;
}

.relatorio-tabela[b-yeaa2s4o9d] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .relatorio-tabela th[b-yeaa2s4o9d] {
        text-align: left;
        padding: 8px 10px;
        background: #f3f6fa;
        color: #55606e;
        font-weight: 600;
        border-bottom: 1px solid #d8dee6;
    }

    .relatorio-tabela td[b-yeaa2s4o9d] {
        padding: 6px 10px;
        border-bottom: 1px solid #eef0f3;
    }

.relatorio-col-qtd[b-yeaa2s4o9d] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 120px;
}
/* /Components/Pages/SelecaoServico.razor.rz.scp.css */
/* Visual desta tela é compartilhado com o Login interno (mesma casca de painel
   de marca) e traz as marcas de rota dos serviços — ver
   wwwroot/css/acesso-visual.css, classes .acesso-* e .servico-*.
   Mantido global de propósito, pra as duas telas não divergirem. */
/* /Components/Pages/SolicitacoesProcesso.razor.rz.scp.css */
.sol-pagina[b-6731wonub8] {
    padding: 8px;
    font-family: 'Segoe UI', sans-serif;
    max-width: 1180px;
}

.sol-legenda[b-6731wonub8] {
    color: #5b6b78;
    font-size: 13.5px;
    max-width: 68ch;
    margin: -8px 0 20px;
}

.sol-carregando[b-6731wonub8] {
    padding: 24px;
    color: #8a94a3;
}

.sol-erro[b-6731wonub8] {
    background: #fbe9e7;
    border: 1px solid #e0a394;
    color: #8a3b2a;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13.5px;
}

/* ===== Filtros por status ===== */

.sol-filtros[b-6731wonub8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.sol-chip[b-6731wonub8] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    background: #eef1f4;
    color: #5b6b78;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .sol-chip.ativo[b-6731wonub8] {
        background: #fff;
        border-color: var(--cv-brand, #0b4f71);
        color: var(--cv-brand-deep, #073853);
    }

.sol-chip-num[b-6731wonub8] {
    font-family: "Cascadia Mono", ui-monospace, monospace;
    font-size: 11px;
    background: var(--cv-brand, #0b4f71);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
}

/* ===== Selos de status (chip + tabela + detalhe) ===== */

.sol-selo[b-6731wonub8], .sol-chip.st-nova[b-6731wonub8], .sol-chip.st-analise[b-6731wonub8], .sol-chip.st-aguardando[b-6731wonub8],
.sol-chip.st-aberto[b-6731wonub8], .sol-chip.st-recusada[b-6731wonub8], .sol-chip.st-cancelada[b-6731wonub8] {
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 11px;
    display: inline-block;
}

.sol-selo[b-6731wonub8] { background: #eef1f4; color: #5b6b78; }

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

/* ===== Tabela ===== */

.sol-vazio[b-6731wonub8], .sol-vazio-bloco[b-6731wonub8] {
    color: #8a94a3;
    font-size: 13.5px;
    padding: 16px 0;
}

.sol-tabela-wrap[b-6731wonub8] {
    overflow-x: auto;
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 8px;
    margin-bottom: 24px;
}

.sol-tabela[b-6731wonub8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 760px;
}

    .sol-tabela thead th[b-6731wonub8] {
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #8a94a3;
        background: #f7f9fa;
        padding: 10px 14px;
        border-bottom: 1px solid var(--cv-line, #d8dee6);
        white-space: nowrap;
    }

    .sol-tabela tbody td[b-6731wonub8] {
        padding: 10px 14px;
        border-bottom: 1px solid #eef1f4;
        vertical-align: middle;
    }

    .sol-tabela tbody tr[b-6731wonub8] {
        cursor: pointer;
    }

        .sol-tabela tbody tr:hover[b-6731wonub8] {
            background: #f7f9fa;
        }

        .sol-tabela tbody tr.sol-linha-aberta[b-6731wonub8] {
            background: #e1edf3;
        }

.sol-num[b-6731wonub8] {
    font-family: "Cascadia Mono", ui-monospace, monospace;
    color: #5b6b78;
}

.sol-cliente[b-6731wonub8] {
    display: block;
    font-weight: 600;
    color: var(--cv-ink, #16232e);
}

.sol-autor[b-6731wonub8] {
    display: block;
    font-size: 11.5px;
    color: #8a94a3;
}

.sol-exportador[b-6731wonub8] {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Detalhe ===== */

.sol-detalhe[b-6731wonub8] {
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 10px;
    padding: 20px 22px;
    background: #fff;
}

.sol-detalhe-topo[b-6731wonub8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

    .sol-detalhe-topo h2[b-6731wonub8] {
        margin: 0 0 4px;
        font-size: 18px;
    }

.sol-detalhe-sub[b-6731wonub8] {
    margin: 0;
    color: #8a94a3;
    font-size: 13px;
}

.sol-detalhe-acoes-topo[b-6731wonub8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sol-blocos[b-6731wonub8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (max-width: 860px) {
    .sol-blocos[b-6731wonub8] {
        grid-template-columns: 1fr;
    }
}

.sol-bloco[b-6731wonub8] {
    border: 1px solid var(--cv-line, #d8dee6);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

    .sol-bloco h3[b-6731wonub8] {
        margin: 0 0 12px;
        font-size: 14px;
        color: var(--cv-brand-deep, #073853);
    }

    .sol-bloco h4[b-6731wonub8] {
        margin: 14px 0 4px;
        font-size: 12.5px;
        color: #8a94a3;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

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

.sol-dados[b-6731wonub8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    margin: 0;
}

    .sol-dados > div[b-6731wonub8] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .sol-dados dt[b-6731wonub8] {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #8a94a3;
    }

    .sol-dados dd[b-6731wonub8] {
        margin: 0;
        font-size: 13.5px;
        color: var(--cv-ink, #16232e);
    }

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

.sol-arquivos[b-6731wonub8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .sol-arquivos li[b-6731wonub8] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.sol-arquivo-tipo[b-6731wonub8] {
    font-size: 11px;
    font-weight: 600;
    background: #e1edf3;
    color: var(--cv-brand-deep, #073853);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

.sol-arquivo-nome[b-6731wonub8] {
    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;
}

.sol-arquivo-tam[b-6731wonub8] {
    font-size: 11.5px;
    color: #8a94a3;
    white-space: nowrap;
}

/* ===== Ações de status / vínculo ===== */

.sol-acoes[b-6731wonub8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.sol-acao[b-6731wonub8] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--cv-line, #d8dee6);
    background: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
}

    .sol-acao:hover[b-6731wonub8] {
        border-color: var(--cv-brand, #0b4f71);
        color: var(--cv-brand-deep, #073853);
    }

.sol-recusa[b-6731wonub8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    background: #fdeeea;
    border: 1px solid #f3c9bd;
    border-radius: 8px;
}

    .sol-recusa textarea[b-6731wonub8] {
        font-family: inherit;
        font-size: 13px;
        border: 1px solid var(--cv-line, #d8dee6);
        border-radius: 6px;
        padding: 8px;
        resize: vertical;
    }

.sol-nota-acao[b-6731wonub8] {
    font-size: 12px;
    color: #8a94a3;
    margin: 0 0 6px;
}

.sol-vinculo[b-6731wonub8] {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

    .sol-vinculo input[b-6731wonub8] {
        flex: 1;
        max-width: 260px;
        padding: 8px 10px;
        border: 1px solid var(--cv-line, #d8dee6);
        border-radius: 6px;
        font-size: 13px;
    }

.botao-primario[b-6731wonub8], .botao-secundario[b-6731wonub8] {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
}

    .botao-primario:disabled[b-6731wonub8], .botao-secundario:disabled[b-6731wonub8] {
        opacity: .6;
        cursor: default;
    }

.botao-primario[b-6731wonub8] {
    background: var(--cv-brand, #0b4f71);
    color: #fff;
    border: 1px solid var(--cv-brand, #0b4f71);
}

    .botao-primario:hover:not(:disabled)[b-6731wonub8] {
        background: var(--cv-brand-deep, #073853);
    }

.botao-secundario[b-6731wonub8] {
    background: #fff;
    color: var(--cv-brand-deep, #073853);
    border: 1px solid var(--cv-line, #d8dee6);
}

    .botao-secundario:hover:not(:disabled)[b-6731wonub8] {
        border-color: var(--cv-brand, #0b4f71);
    }

/* ===== Histórico ===== */

.sol-nova-mensagem[b-6731wonub8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .sol-nova-mensagem textarea[b-6731wonub8] {
        flex: 1;
        min-width: 220px;
        padding: 8px 10px;
        border: 1px solid var(--cv-line, #d8dee6);
        border-radius: 6px;
        font-family: inherit;
        font-size: 13px;
        resize: vertical;
    }

.sol-check[b-6731wonub8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #5b6b78;
    white-space: nowrap;
}

.sol-eventos[b-6731wonub8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .sol-eventos li[b-6731wonub8] {
        border-left: 3px solid var(--cv-line, #d8dee6);
        padding: 2px 0 2px 12px;
    }

    .sol-eventos li.sol-evento-privado[b-6731wonub8] {
        border-left-color: #c98a4b;
    }

.sol-evento-cabeca[b-6731wonub8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}

.sol-evento-tipo[b-6731wonub8] {
    font-weight: 600;
    color: var(--cv-brand-deep, #073853);
}

.sol-evento-quando[b-6731wonub8], .sol-evento-autor[b-6731wonub8] {
    color: #8a94a3;
}

.sol-evento-selo-privado[b-6731wonub8] {
    font-size: 10.5px;
    font-weight: 600;
    background: #f7ece1;
    color: #93470f;
    border-radius: 10px;
    padding: 1px 8px;
}

.sol-evento-texto[b-6731wonub8] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--cv-ink, #16232e);
    white-space: pre-line;
}
/* /Components/Shared/EmailTagsInput.razor.rz.scp.css */
.email-tags[b-p31y36zvxp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 7px;
    border: 1px solid #dcdcdc;
    background: #ffffff;
    cursor: text;
}

    .email-tags:focus-within[b-p31y36zvxp] {
        border-color: #0b4f71;
    }

.email-tags-disabled[b-p31y36zvxp] {
    background: #f3f6fa;
    cursor: default;
}

.email-tag[b-p31y36zvxp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2f6;
    color: #16232e;
    font-size: 12px;
    padding: 3px 4px 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.email-tag-remover[b-p31y36zvxp] {
    border: none;
    background: transparent;
    color: #8a94a3;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 50%;
}

    .email-tag-remover:hover[b-p31y36zvxp] {
        background: rgba(181, 66, 58, 0.14);
        color: #b5423a;
    }

.email-tags-input[b-p31y36zvxp] {
    flex: 1 1 80px;
    min-width: 80px;
    border: none;
    outline: none;
    font-size: 12.5px;
    font-family: inherit;
    padding: 3px 2px;
    background: transparent;
}
/* /Components/Shared/PortalCabecalhoMarca.razor.rz.scp.css */
.portal-marca-cabecalho[b-1gypbri0a7] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    /* Banner reduzido em pelo menos 1/4 da altura original (200px -> 140px, min-height) — a
       pedido do usuário, pra sobrar mais espaço vertical pra tabela. */
    padding: 16px 28px;
    min-height: 140px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 12px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Logo em cima, título embaixo — âncora no rodapé do banner, mesmo layout do mockup de
   referência (hero alto, conteúdo no canto inferior esquerdo em vez de centralizado). */
.portal-marca-identidade[b-1gypbri0a7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    align-self: flex-end;
}

.portal-marca-logo-fischer[b-1gypbri0a7] {
    height: 22px;
    width: auto;
    display: block;
    background: #ffffff;
    border-radius: 7px;
    padding: 5px 9px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.portal-marca-divisor[b-1gypbri0a7] {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.3);
}

.portal-marca-logo-cliente[b-1gypbri0a7] {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* Cartão claro atrás do logo do cliente — sem ele, um logo na mesma cor da paleta (o caso
   comum: a paleta em EstiloFundo normalmente É a cor de marca do cliente) some contra a
   própria faixa. Um fundo quase branco funciona pra qualquer cor de paleta sem precisar
   calcular contraste caso a caso; leve porque o protagonista continua sendo o logo, não a
   moldura — mesma lógica do chip branco que já existe pro logo da Fischer ao lado. */
.portal-marca-logo-cliente-card[b-1gypbri0a7] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 9px;
    padding: 7px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
}

.portal-marca-logo-cliente-img[b-1gypbri0a7] {
    height: 40px;
    max-width: 180px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Só quando o logo fica direto sobre a faixa (sem o cartão claro acima): um contorno sutil
   pra não sumir de vez se a cor do logo bater com a cor da faixa naquele ponto exato — sem
   isso o "transparente" vira literalmente invisível em vez de só "sem moldura". */
.portal-marca-logo-cliente-img-transparente[b-1gypbri0a7] {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.portal-marca-titulo[b-1gypbri0a7] {
    min-width: 0;
    padding-left: 12px;
    border-left: 3px solid rgba(255, 255, 255, 0.55);
}

    .portal-marca-titulo h1[b-1gypbri0a7] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: #ffffff;
    }

.portal-marca-titulo .portal-cliente-nome[b-1gypbri0a7] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
}

/* No topo do banner, não embaixo com o resto — mesmo canto do mockup ("Olá, Cliente" +
   Sair ficam no alto, o logo/título ancoram embaixo). */
.portal-marca-acoes[b-1gypbri0a7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Acoes direto sobre a foto (MenuUsuario=false: Aparência/Alterar senha só têm "Voltar";
   Detalhe do processo tem "Voltar" + "Arquivos" + o selo de posição) — pill translúcido,
   mesmo tratamento de antes do menu de usuário existir. .portal-sair nasceu em
   PortalProcessos.razor.css (CSS isolado, só vale ali) — qualquer outra página que usa esse
   slot chega aqui sem forma nenhuma, por isso redeclarada. */
.portal-marca-acoes[b-1gypbri0a7]  .portal-sair {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

    .portal-marca-acoes[b-1gypbri0a7]  .portal-sair:hover {
        background: rgba(255, 255, 255, 0.18);
    }

.portal-marca-sino[b-1gypbri0a7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

    .portal-marca-sino:hover[b-1gypbri0a7] {
        background: rgba(255, 255, 255, 0.18);
    }

.portal-marca-sino-badge[b-1gypbri0a7] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #d64545;
    border: 1.5px solid #052a3b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.portal-marca-usermenu[b-1gypbri0a7] {
    position: relative;
}

.portal-marca-usermenu-btn[b-1gypbri0a7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

    .portal-marca-usermenu-btn:hover[b-1gypbri0a7] {
        background: rgba(255, 255, 255, 0.18);
    }

    .portal-marca-usermenu-caret[b-1gypbri0a7] {
        font-size: 10px;
        opacity: 0.75;
    }

.portal-marca-usermenu-dropdown[b-1gypbri0a7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    padding: 8px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

    /* .portal-sair nasceu em PortalProcessos.razor.css (CSS isolado — só vale ali dentro).
       O conteúdo do slot Acoes, porém, é escrito por QUALQUER página que usa este cabeçalho
       (Processos, Aparência, Alterar senha, Processo Detalhe), cada uma com o próprio escopo
       de isolamento — a regra de lá nunca alcança as outras três, então os botões chegavam
       aqui sem forma nenhuma. Por isso a forma inteira é redeclarada aqui: dentro do dropdown
       branco, cada ação vira uma linha de menu (não mais o pill translúcido de antes, que só
       fazia sentido direto sobre a foto). */
    .portal-marca-usermenu-dropdown[b-1gypbri0a7]  .portal-sair {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 13.5px;
        text-align: left;
        padding: 9px 12px;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        background: none;
        border: none;
        color: #16232e;
    }

        .portal-marca-usermenu-dropdown[b-1gypbri0a7]  .portal-sair:hover {
            background: #f3f6fa;
        }

@media (max-width: 640px) {
    .portal-marca-cabecalho[b-1gypbri0a7] {
        flex-wrap: wrap;
        gap: 12px;
        min-height: 0;
    }

    .portal-marca-identidade[b-1gypbri0a7] {
        flex-wrap: wrap;
    }

    .portal-marca-acoes[b-1gypbri0a7] {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Shared/PortalFaixaMarca.razor.rz.scp.css */
.portal-faixa-marca[b-vsp19rzfqy] {
    height: 5px;
    background: #0b4f71; /* fallback — mesmo --pd-brand do resto do app, quando não há paleta */
    border-radius: 0;
}

.portal-faixa-marca-rodape[b-vsp19rzfqy] {
    margin-top: 32px;
}
/* /Components/Shared/ResponderPendenciaCliente.razor.rz.scp.css */
.rp-acoes-fechado[b-bt8ft3hvpz],
.rp-rodape[b-bt8ft3hvpz],
.rp-anexos[b-bt8ft3hvpz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rp-acoes-fechado[b-bt8ft3hvpz] {
    margin-top: 8px;
}

.rp-form[b-bt8ft3hvpz] {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #c9d8ee;
    border-radius: 10px;
    background: #f5f9fe;
}

.rp-rotulo[b-bt8ft3hvpz] {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #16232e;
}

.rp-campo[b-bt8ft3hvpz] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    background: #fff;
}

    .rp-campo:focus[b-bt8ft3hvpz] {
        outline: none;
        border-color: #0b4f71;
        box-shadow: 0 0 0 3px rgba(11, 79, 113, 0.16);
    }

.rp-contador[b-bt8ft3hvpz] {
    text-align: right;
    font-size: 11px;
    color: #6b7686;
}

.rp-anexos[b-bt8ft3hvpz] {
    margin-top: 4px;
}

.rp-dica[b-bt8ft3hvpz] {
    font-size: 11.5px;
    color: #6b7686;
}

.rp-anexos-lista[b-bt8ft3hvpz] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .rp-anexos-lista li[b-bt8ft3hvpz] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        background: #fff;
        font-size: 12.5px;
    }

    .rp-anexos-lista em[b-bt8ft3hvpz] {
        font-style: normal;
        color: #6b7686;
        white-space: nowrap;
    }

.rp-anexo-nome[b-bt8ft3hvpz] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-remover[b-bt8ft3hvpz] {
    border: none;
    background: none;
    color: #8492a0;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

    .rp-remover:hover[b-bt8ft3hvpz] {
        color: #b02a37;
    }

.rp-rodape[b-bt8ft3hvpz] {
    justify-content: flex-end;
    margin-top: 10px;
}

.rp-btn[b-bt8ft3hvpz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    background: #fff;
    color: #16232e;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

    .rp-btn:hover:not(:disabled)[b-bt8ft3hvpz] {
        border-color: #0b4f71;
        color: #0b4f71;
    }

    .rp-btn:disabled[b-bt8ft3hvpz] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.rp-btn-primario[b-bt8ft3hvpz] {
    background: #0b4f71;
    border-color: #073853;
    color: #fff;
}

    .rp-btn-primario:hover:not(:disabled)[b-bt8ft3hvpz] {
        background: #073853;
        color: #fff;
    }

.rp-btn-ok[b-bt8ft3hvpz] {
    border-color: #1e7a3c;
    color: #1e7a3c;
}

    .rp-btn-ok:hover:not(:disabled)[b-bt8ft3hvpz] {
        background: #e3f4ea;
        border-color: #1e7a3c;
        color: #1e7a3c;
    }

.rp-btn-arquivo[b-bt8ft3hvpz] {
    position: relative;
}

.rp-nota[b-bt8ft3hvpz],
.rp-ok[b-bt8ft3hvpz],
.rp-erro[b-bt8ft3hvpz] {
    margin: 8px 0 0;
    font-size: 12.5px;
}

.rp-nota[b-bt8ft3hvpz] {
    color: #6b7686;
}

.rp-ok[b-bt8ft3hvpz] {
    color: #1e7a3c;
    font-weight: 600;
}

.rp-erro[b-bt8ft3hvpz] {
    color: #b02a37;
}
/* /Components/Shared/RespostasPendencia.razor.rz.scp.css */
.resp-pend-lista[b-fnuvn3z3k4] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid #dbe2ea;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resp-pend-item[b-fnuvn3z3k4] {
    padding: 7px 10px;
    border-radius: 8px;
    background: #f6f8fb;
    font-size: 12.5px;
    color: #16232e;
}

.resp-pend-realizada[b-fnuvn3z3k4] {
    background: #e3f4ea;
}

.resp-pend-topo[b-fnuvn3z3k4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.resp-pend-data[b-fnuvn3z3k4] {
    font-size: 11px;
    color: #6b7686;
    font-variant-numeric: tabular-nums;
}

.resp-pend-selo[b-fnuvn3z3k4] {
    padding: 1px 8px;
    border-radius: 999px;
    background: #1e7a3c;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.resp-pend-texto[b-fnuvn3z3k4] {
    margin: 4px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.resp-pend-anexos[b-fnuvn3z3k4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.resp-pend-anexo[b-fnuvn3z3k4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid #c9d8ee;
    border-radius: 999px;
    background: #fff;
    color: #0b4f71;
    font-size: 11.5px;
    text-decoration: none;
}

    .resp-pend-anexo:hover[b-fnuvn3z3k4] {
        background: #eef6fb;
    }

    .resp-pend-anexo span[b-fnuvn3z3k4] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .resp-pend-anexo em[b-fnuvn3z3k4] {
        font-style: normal;
        color: #6b7686;
        white-space: nowrap;
    }