/* Portal do Fornecedor - layout pensado primeiro para celular */
:root {
    --pf-cor: #23427f;      /* azul do logo Balaroti: marca e acoes */
    --pf-laranja: #f07b24;  /* laranja do logo: detalhe da marca */
    --pf-alerta: #c8102e;   /* so para erro e "acao sua" (divergencia, vencida) */
    --pf-fundo: #f5f6f8;
    --pf-texto: #1f2933;
    --pf-suave: #4b5563;    /* mais escuro: texto de apoio legivel no celular */
    --pf-borda: #d9dde3;
}

body {
    margin: 0;
    background: var(--pf-fundo);
    color: var(--pf-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pf-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 3px solid var(--pf-laranja);
}

.pf-marca {
    font-weight: 700;
    color: var(--pf-cor);
    text-decoration: none;
}

.pf-usuario {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-nome {
    color: var(--pf-suave);
    font-size: 0.9rem;
}

.pf-vendo-como {
    background: #fff4e5;
    border: 1px solid #f5c26b;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.85rem;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* INTERNO so consulta (ModoConsulta): etiqueta dentro do "vendo como" */
.pf-modo-consulta {
    background: var(--pf-cor);
    color: #fff;
    border-radius: 8px;
    padding: 0 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: help;
}

/* celular: marca + "vendo como" + nome + Sair nao cabiam em 360px e o Sair saia cortado da tela */
@media (max-width: 480px) {
    .pf-topo {
        flex-wrap: wrap;
        padding: 8px 12px;
    }

    .pf-usuario {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
    }

    .pf-nome {
        display: none;
    }
}

.pf-busca {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.pf-busca-campo {
    flex: 1;
    min-width: 0;
}

.pf-conteudo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
}

/* telas de tabela (LayoutBean): mais largas em monitor grande; no celular a largura e a da tela */
.pf-conteudo.pf-conteudo-largo {
    max-width: 1440px;
}

/* tabela mais larga que a tela (tablet, notebook pequeno, zoom): rola dentro dela, a pagina nao */
.pf-conteudo .ui-datatable-tablewrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pf-rodape {
    text-align: center;
    color: var(--pf-suave);
    font-size: 0.8rem;
    padding: 24px 16px;
}

.pf-login {
    max-width: 380px;
    margin: 32px auto;
    background: #fff;
    border: 1px solid var(--pf-borda);
    border-radius: 8px;
    padding: 24px;
}

.pf-sub,
.pf-ajuda {
    color: var(--pf-suave);
    font-size: 0.9rem;
}

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

.pf-campo .ui-inputfield,
.pf-campo .ui-password,
.pf-campo .ui-password input {
    width: 100%;
}

.pf-botao-largo {
    width: 100%;
}

.pf-bloco {
    margin-top: 20px;
}

.pf-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.pf-cartao {
    background: #fff;
    border: 1px solid var(--pf-borda);
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.pf-cartao .pi {
    font-size: 1.4rem;
    color: var(--pf-cor);
}

.pf-cartao h3 {
    margin: 8px 0 4px;
    font-size: 1rem;
}

.pf-cartao p {
    margin: 0;
    color: var(--pf-suave);
    font-size: 0.9rem;
}

.pf-cartao-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pf-cartao-link:hover {
    border-color: var(--pf-cor);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ---------- agendamento ---------- */
.pf-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-passo {
    background: #fff;
    border: 1px solid var(--pf-borda);
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}

.pf-passo h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pf-cor);
    color: #fff;
    font-size: 0.8rem;
}

.pf-largo {
    width: 100%;
    max-width: 520px;
}

.pf-resumo {
    margin-top: 8px;
    font-weight: 600;
}

.pf-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf-dias .ui-button {
    border-radius: 6px !important;
    text-transform: capitalize;
}

.pf-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0 12px;
}

.pf-vazio {
    color: var(--pf-suave);
    padding: 12px 0;
}

.pf-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pf-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 12px;
    color: var(--pf-texto);
    background: var(--pf-fundo);
    border: 1px solid var(--pf-borda);
}

.pf-tag-ok,
.pf-tag-C {
    background: #e7f6ec;
    border-color: #7cc596;
    color: #1e5631;
}

.pf-tag-A {
    background: #fff4e5;
    border-color: #f0b44c;
    color: #7a4a00;
}

.pf-tag-R,
.pf-tag-X {
    background: #fdecec;
    border-color: #e88f8f;
    color: #8a1020;
}

.pf-sucesso {
    max-width: 520px;
    margin: 32px auto;
    background: #fff;
    border: 1px solid var(--pf-borda);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.pf-sucesso .pi-check-circle {
    font-size: 2.4rem;
    color: #2e7d32;
}

/* ---------- validacao NF-e ---------- */
.pf-veredito > span {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pf-veredito .pi {
    font-size: 2rem;
}

.pf-veredito h2 {
    margin: 0 0 4px;
}

.pf-veredito p {
    margin: 0;
}

.pf-veredito-OK {
    border-left: 5px solid #2e7d32;
}

.pf-veredito-OK .pi {
    color: #2e7d32;
}

.pf-veredito-MANUAL {
    border-left: 5px solid #1565c0;
}

.pf-veredito-MANUAL .pi {
    color: #1565c0;
}

.pf-veredito-DIVERGENTE {
    border-left: 5px solid var(--pf-alerta);
}

.pf-veredito-DIVERGENTE .pi {
    color: var(--pf-alerta);
}

.pf-dados-nota > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.pf-problema {
    color: #b3261e;
    font-size: 0.88rem;
    margin-top: 4px;
}

.pf-linha-erro {
    background: #fff6f6 !important;
}

.pf-ok {
    color: #2e7d32;
}

.pf-erro {
    color: #b3261e;
}

.pf-resposta {
    margin-top: 4px;
    padding: 6px 8px;
    background: var(--pf-fundo);
    border-radius: 6px;
    font-size: 0.88rem;
}

.pf-etapa {
    margin-top: 6px;
    font-size: 0.88rem;
    color: #1565c0;
}

/* ---------- precos e impostos ---------- */
.pf-ferramentas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.pf-ferramentas .pf-campo {
    margin-bottom: 0;
}

.pf-campo-check {
    align-items: flex-start;
}

.pf-linha-alterada {
    background: #fffbea !important;
}

.pf-input-num {
    width: 100%;
    text-align: right;
}

.pf-input-curto {
    width: 90px;
}

.pf-par {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.pf-justif {
    margin: 4px 0 6px 36px;
}

/* ---------- pre-cadastro ---------- */
.pf-anexo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--pf-borda);
}

.pf-anexo .pi-image,
.pf-anexo .pi-file-pdf {
    color: var(--pf-cor);
}

/* ---------- verbas ---------- */
.pf-totais {
    margin: 12px 0;
}

.pf-totais .pf-cartao h3 {
    margin: 4px 0 0;
    font-size: 1.3rem;
}

.pf-cartao-alerta {
    border-left: 5px solid var(--pf-alerta);
}

.pf-subtabela {
    margin: 4px 0 4px 36px;
}

.pf-em-breve {
    opacity: 0.75;
}

.pf-selo {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.7rem;
    background: var(--pf-fundo);
    border: 1px solid var(--pf-borda);
    border-radius: 10px;
    padding: 2px 8px;
}

/* ---------- precos por regiao ---------- */
.pf-regioes {
    border-collapse: collapse;
    margin: 4px 0 8px 36px;
    min-width: 560px;
}

.pf-regioes th,
.pf-regioes td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--pf-borda);
    text-align: left;
}

/* .pf-num sozinho e a bolinha numerada dos passos: aqui volta a ser celula comum, alinhada a direita */
.pf-regioes th.pf-num,
.pf-regioes td.pf-num {
    display: table-cell;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    text-align: right;
    white-space: nowrap;
}

.pf-regioes .pf-input-num {
    width: 120px;
}

.pf-regioes .pf-input-curto {
    width: 90px;
}

@media (max-width: 640px) {
    .pf-regioes {
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }
}

/* ---------- conversa com Compras ---------- */
.pf-conversa {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px 10px;
}

.pf-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--pf-borda);
}

.pf-msg-minha {
    align-self: flex-end;
    background: #eef4ff;
    border-color: #bcd0f5;
}

.pf-msg-compras {
    align-self: flex-start;
    background: #fff;
}

.pf-msg-autor {
    font-size: 0.75rem;
    color: var(--pf-suave);
    margin-bottom: 2px;
}

.pf-msg-texto {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pf-msg-lida {
    color: #2f855a;
}

.pf-botao-linha {
    margin: 0 4px 4px 0;
}

.pf-botao-novidade.ui-button {
    background: #fff4e5;
    border-color: #f5a623;
    color: #8a5300;
}

/* ---------- validar NF-e: nota da SEFAZ ---------- */
.pf-link-upload {
    margin-top: 8px;
}

.pf-aviso {
    background: #fff8e6;
    border: 1px solid #f5c26b;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

/* ---------- conferencia: divergencia por coluna (como a consulta_xml_dfe do ERP) ---------- */
.pf-tabela td.pf-div {
    background: #ffcccc !important;
}

.pf-oc-div {
    color: #cc0000;
    font-weight: bold;
    white-space: nowrap;
}

.pf-prazo-oc {
    color: #7d3c98;
    font-weight: bold;
}

.pf-tabela-dup {
    max-width: 640px;
}

.pf-faixa-prazo {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}

.pf-faixa-prazo-ok {
    background: #e6f4ea;
    border: 1px solid #81c784;
}

.pf-faixa-prazo-div {
    background: #ffe5e5;
    border: 1px solid #e57373;
}

.pf-faixa-sep {
    width: 12px;
}

/* divergencia bem visivel: a linha com erro ja e rosada, entao a celula precisa de contraste */
.pf-tabela td.pf-div {
    background: #f8b4b4 !important;
    color: #b71c1c;
    font-weight: bold;
    box-shadow: inset 3px 0 0 #d32f2f;
}

.pf-tabela td.pf-div .pf-oc-div {
    color: #7f0000;
}

.pf-tabela th.pf-col-div,
.pf-tabela thead th.pf-col-div {
    background: #d32f2f !important;
    color: #fff !important;
}

/* titulo da coluna com divergencia (f:facet header: o PF 15 ignora headerStyleClass) */
.pf-tabela th span.pf-col-div {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* grade da conferencia: muitas colunas numericas; com table-layout fixed (padrao do PF) a coluna
   Produto era espremida ate quebrar letra por letra em tela estreita */
.pf-tabela-conf .ui-datatable-tablewrapper {
    overflow-x: auto;
}

.pf-tabela-conf table {
    table-layout: auto !important;
    min-width: 860px;
}

.pf-tabela-conf td,
.pf-tabela-conf th {
    padding: 6px 8px !important;
    white-space: nowrap;
}

.pf-tabela-conf td.pf-col-produto {
    white-space: normal;
    min-width: 220px;
}

.pf-tabela-conf .pf-problema {
    white-space: normal;
}

/* ---------- voltar e painel do resultado ---------- */
.pf-voltar {
    margin: -8px 0 6px -12px;
}

.pf-painel-conf {
    margin-top: 12px;
}

.pf-painel-conf > .ui-panel-titlebar {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pf-painel-titulo {
    font-weight: 600;
}

.pf-painel-titulo .pi {
    margin-right: 6px;
}

.pf-painel-acoes {
    display: inline;
}

.pf-acoes-cab {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- celular: tabelas em modo cartao (reflow do PrimeFaces) ---------- */
@media (max-width: 640px) {
    .ui-datatable-reflow .ui-datatable-data > tr {
        display: block;
        background: #fff;
        border: 1px solid var(--pf-borda);
        border-radius: 10px;
        margin: 0 0 10px;
        padding: 6px 0;
    }

    .ui-datatable-reflow .ui-datatable-data > tr > td {
        display: flex !important;
        float: none !important;   /* o tema faz a celula flutuar: o cartao da linha ficava vazio */
        clear: none !important;
        align-items: baseline;
        gap: 10px;
        text-align: left !important;
        width: 100% !important;
        white-space: normal;
        border: 0 !important;
        padding: 3px 12px !important;
        box-sizing: border-box;
    }

    .ui-datatable-reflow .ui-datatable-data > tr > td .ui-column-title {
        flex: 0 0 36%;
        min-width: 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--pf-suave);
    }

    /* coluna secundaria (emissao, itens, loja...): some no celular */
    .ui-datatable-reflow .ui-datatable-data > tr > td.pf-so-pc {
        display: none !important;
    }

    /* botoes da linha ocupam a largura do cartao */
    .ui-datatable-reflow .ui-datatable-data > tr > td.pf-acoes-coluna {
        display: block !important;
        padding-top: 8px !important;
    }

    .ui-datatable-reflow.ui-datatable .ui-datatable-data {
        background: transparent;
    }
}

/* ---------- inicio: para sua atencao ---------- */
/* ---------- inicio: modulos com os avisos como selos ---------- */
.pf-modulos {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pf-modulo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 18px;
    min-height: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pf-modulo:hover {
    border-color: var(--pf-cor);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.pf-cartao .pf-modulo-icone {
    font-size: 1.8rem;
}

.pf-modulo h3 {
    margin: 6px 0 0;
    font-size: 1.15rem;
}

/* o link do titulo cobre o cartao inteiro; os selos ficam por cima (z-index) e levam para a tela do aviso */
.pf-modulo-link {
    color: inherit;
    text-decoration: none;
}

.pf-modulo-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* = inset: 0, que o Safari antes de 14.1 nao conhece */
    border-radius: 8px;
}

.pf-modulo-alerta {
    border-left: 5px solid var(--pf-alerta);
}

.pf-avisos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}

.pf-aviso {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff4e5;
    border: 1px solid #f5c26b;
    color: #7a4a00;
    font-size: 0.82rem;
    text-decoration: none;
}

.pf-aviso:hover {
    border-color: #b7791f;
}

.pf-aviso-alerta {
    background: #fdecec;
    border-color: #e9a3a3;
    color: var(--pf-alerta);
    font-weight: 600;
}

.pf-aviso-alerta:hover {
    border-color: var(--pf-alerta);
}

.pf-codigos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
}

.pf-codigo {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--pf-borda);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85rem;
}

/* datePicker com icone: o botao quebrava para a linha de baixo dentro da grade */
.pf-grade .ui-calendar,
.pf-campo .ui-calendar {
    display: flex;
    width: 100%;
}

.pf-grade .ui-calendar input,
.pf-campo .ui-calendar input {
    flex: 1;
    min-width: 0;
}

/* grade de precos: com table-layout fixed (padrao do PF) as colunas de largura fixa somavam quase a
   tabela toda e a coluna Produto ficava com ~0 px, quebrando a descricao letra por letra (linhas enormes) */
.pf-tabela-precos .ui-datatable-tablewrapper {
    overflow-x: auto;
}

.pf-tabela-precos > .ui-datatable-tablewrapper > table {
    table-layout: auto !important;
    min-width: 940px;
}

.pf-tabela-precos > .ui-datatable-tablewrapper > table > thead > tr > th,
.pf-tabela-precos > .ui-datatable-tablewrapper > table > tbody > tr > td {
    padding: 6px 8px !important;
    vertical-align: middle;
}

.pf-tabela-precos > .ui-datatable-tablewrapper > table > thead > tr > th {
    white-space: nowrap;
}

.pf-tabela-precos td.pf-col-produto {
    min-width: 320px;
    line-height: 1.3;
}

.pf-tabela-precos .pf-par {
    justify-content: flex-start;
    gap: 6px;
}

.pf-tabela-precos .pf-par .pf-input-num:not(.pf-input-curto) {
    width: 115px;
}

.pf-tabela-precos .pf-input-curto {
    width: 80px;
}

/* a grade de precos (7 colunas) usa a largura das telas de tabela (LayoutBean) */

.pf-tabela-precos td.pf-col-produto .pf-sub {
    white-space: nowrap;
}

/* a tabela de regioes fica dentro da grade do PrimeFaces e herdava largura 100%, bordas e padding das celulas dela */
.pf-tabela-precos table.pf-regioes {
    width: auto !important;
    table-layout: auto !important;
}

.pf-tabela-precos table.pf-regioes > thead > tr > th,
.pf-tabela-precos table.pf-regioes > tbody > tr > td {
    padding: 3px 10px !important;
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
    border-color: var(--pf-borda) !important;
    background: transparent;
    vertical-align: middle;
}

.pf-tabela-precos table.pf-regioes > thead > tr > th {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* codigo por e-mail (codigo.xhtml): numeros grandes e espacados */
.pf-codigo-acesso {
    font-size: 1.4rem;
    letter-spacing: 6px;
    text-align: center;
    max-width: 12rem;
}

/* dialogo da planilha de precos */
.pf-passos-planilha {
    margin: 0 0 16px;
    padding-left: 20px;
    line-height: 1.5;
}
.pf-passos-planilha li + li {
    margin-top: 6px;
}
#formPlanilhaEnviar {
    margin-top: 12px;
}

/* agendar: titulo do passo com o filtro de codigo discreto a direita (so quando a raiz tem mais de um codigo) */
.pf-passo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-filtro-codigo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--pf-suave);
}

/* largura fixa e pequena: o padrao do portal estica os campos para 100% */
.pf-filtro-codigo .ui-selectonemenu {
    width: 220px !important;
    min-width: 0;
    font-size: 0.85rem;
}

.pf-filtro-codigo .ui-selectonemenu .ui-selectonemenu-label {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* meus agendamentos: situacao da NF-e da entrega (a vaga confirmada e reserva; libera com a NF-e) */
.pf-nf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.3;
}

.pf-nf-LIBERADA {
    color: #2f855a;
}

.pf-nf-FALTA_NF,
.pf-nf-JUSTIFICADA {
    color: #9a5b00;
}

.pf-nf-DIVERGENCIA {
    color: var(--pf-alerta);
    font-weight: 600;
}

.pf-nf a {
    font-weight: 600;
}

/* meus agendamentos: Reagendar e Cancelar empilhados (sobra espaco para o fornecedor e a situacao da NF-e) */
.pf-acoes-coluna .ui-button {
    display: flex;
    width: 100%;
    margin: 0 0 6px 0 !important;
}

/* agendar: escolha entre reservar a vaga ou agendar ja com a NF-e */
.pf-modo {
    margin: 4px 0 12px;
}

.pf-modo .pf-sub {
    margin: 6px 0 0;
}

/* agendar com a NF-e: notas informadas (conferida = entra; com divergencia = fica de fora) */
.pf-notas-entrega {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.pf-nota-entrega {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 12px;
    border: 1px solid var(--pf-borda);
    border-left: 4px solid #2f855a;
    border-radius: 8px;
    background: #fff;
}

.pf-nota-entrega .pi {
    color: #2f855a;
}

.pf-nota-div {
    border-left-color: var(--pf-alerta);
    background: #fff6f6;
}

.pf-nota-div .pi {
    color: var(--pf-alerta);
}

.pf-nota-entrega .ui-button {
    margin-left: auto;
}

.pf-passo-rodape {
    margin: -6px 0 12px;
}

/* agendar com a NF-e: so o botao "Enviar XML" (sem a area grande de arrastar arquivo) */
#formNf .ui-fileupload-content {
    display: none;
}

#formNf .ui-fileupload-buttonbar {
    padding: 0;
    border: 0;
    background: transparent;
}

/* agendar com a NF-e: nota justificada (aguarda Compras) e a lista de divergencias da conferencia */
.pf-nota-just {
    border-left-color: #b7791f;
    background: #fffaf0;
}

.pf-nota-just .pi {
    color: #b7791f;
}

.pf-nota-divergencias {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: #9b1c1c;
}

.pf-nota-divergencias ul,
ul.pf-nota-divergencias {
    margin: 0;
    padding-left: 18px;
}

/* combos com nome longo (ex.: "3815 - DOCOL INDUSTRIA E COMERCIO LTDA (41 OCs)"): o PrimeFaces calcula a largura pelo
   texto e no celular passava da tela (pagina rolava para o lado); limita a largura e corta com reticencias */
.ui-selectonemenu {
    max-width: 100% !important;
}

/* a caixa em volta estica junto com o combo (min-width auto do flex): no celular, limita pela tela */
@media (max-width: 640px) {
    .ui-selectonemenu {
        max-width: calc(100vw - 64px) !important;
        min-width: 0 !important; /* o PrimeFaces grava min-width do tamanho do texto (autoWidth) */
    }
}

.ui-selectonemenu .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* pre-cadastro: descricao montada pela familia */
.pf-familia { margin-bottom: 1rem; }
.pf-familia .ui-autocomplete { width: 100%; }
.pf-familia .ui-autocomplete-input { width: calc(100% - 2.4rem); }
.pf-desc-previa { margin-top: .6rem; padding: .6rem .8rem; border-left: 3px solid var(--pf-cor); background: rgba(200, 16, 46, .05); border-radius: 4px; display: flex; flex-direction: column; gap: .2rem; }
.pf-desc-previa:empty { display: none; }
.pf-desc-previa strong { font-size: 1.02rem; word-break: break-word; }

/* precos: planilha do sistema do fornecedor (conferencia das colunas) */
.pf-planilha-baixar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.pf-mapa-colunas { margin-top: .4rem; }
.pf-mapa-colunas .ui-selectonemenu { width: 100%; }
.pf-previa-planilha { margin-top: .8rem; padding: .6rem .8rem; background: var(--pf-fundo); border: 1px solid var(--pf-borda); border-radius: 6px; }
.pf-previa-planilha p { margin: 0 0 .5rem; }
.pf-tabela-rolagem { overflow-x: auto; }
.pf-tabela-simples { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pf-tabela-simples th, .pf-tabela-simples td { padding: .3rem .45rem; border-bottom: 1px solid var(--pf-borda); text-align: left; vertical-align: top; }
.pf-tabela-simples th { color: var(--pf-suave); font-weight: 600; white-space: nowrap; }
.pf-mapa-colunas .ui-selectoneradio label { white-space: nowrap; }
#formPlanilhaEnviar .ui-fileupload-content { display: none; }

/* minhas propostas: botoes da linha com a mesma largura, sem quebrar o texto */
.pf-acoes-coluna .ui-button { justify-content: center; white-space: nowrap; }
.pf-acoes-coluna .ui-button:last-child { margin-bottom: 0 !important; }
.pf-acoes-coluna .ui-button .ui-button-text { flex: 0 1 auto; }

/* minhas propostas no celular: cartao mais compacto (reflow poe cada campo numa linha) */
@media (max-width: 640px) {
    #formPropostas\:tbl > .ui-datatable-tablewrapper > table > tbody > tr > td { padding: .2rem 1rem; border: 0; }
    #formPropostas\:tbl > .ui-datatable-tablewrapper > table > tbody > tr > td:first-child { padding-top: .6rem; text-align: right; }
    #formPropostas\:tbl > .ui-datatable-tablewrapper > table > tbody > tr > td:first-child .ui-column-title { display: none; }
    #formPropostas\:tbl > .ui-datatable-tablewrapper > table > tbody > tr > td.pf-acoes-coluna { padding: .5rem 1rem .8rem; }
    #formPropostas\:tbl > .ui-datatable-tablewrapper > table > tbody > tr { border-bottom: 1px solid var(--pf-borda); }
}

/* meus agendamentos: avisos de NF-e no topo; validar: contexto da entrega */
.pf-nf-avisos { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 .8rem; }
.pf-nf-avisos .pi { margin-right: .25rem; }
.pf-nf-aviso-just { padding: .5rem .8rem; background: #fff4e5; border: 1px solid #f5a623; border-radius: 6px; color: #8a5300; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pf-nf-aviso-just a { font-weight: 600; }
.pf-entrega-contexto { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; margin: .4rem 0 .8rem;
    background: #fff; border: 1px solid var(--pf-borda); border-left: 4px solid var(--pf-cor); border-radius: 6px; }
.pf-entrega-contexto > .pi { font-size: 1.2rem; color: var(--pf-cor); margin-top: .1rem; }
.pf-entrega-contexto > div { flex: 1 1 260px; }
.pf-entrega-voltar { white-space: nowrap; font-weight: 600; }
.pf-nf-avisos a, .pf-entrega-contexto a { color: var(--pf-cor); text-decoration: none; font-weight: 600; }
.pf-nf-avisos a:hover, .pf-entrega-contexto a:hover { text-decoration: underline; }
.pf-nota-entrega { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; margin: 0 0 .8rem; border-radius: 6px; font-weight: 600; }
.pf-nota-entrega-OK { background: #e8f5ee; border: 1px solid #9ad3b4; color: #1e6b45; }
.pf-nota-entrega-PARCIAL { background: #fff4e5; border: 1px solid #f5a623; color: #8a5300; }
.pf-nota-entrega-OUTRA { background: #fdecee; border: 1px solid #e5a3ad; color: var(--pf-alerta); }
.pf-filtro-ativo { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .8rem; margin: 0 0 .6rem;
    background: #eaf3fc; border: 1px solid #b6d4f2; border-radius: 6px; color: #1b4f80; }
.pf-filtro-ativo a { color: var(--pf-cor); font-weight: 600; text-decoration: none; }

/* ajuda: link no topo, "Ajuda desta tela" na linha do Voltar e a pagina ajuda.xhtml */
.pf-topo .pf-ajuda-topo { margin-left: auto; color: var(--pf-cor); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.pf-topo .pf-ajuda-topo:hover { text-decoration: underline; }
.pf-voltar { display: flex; align-items: center; gap: .5rem; min-height: 2rem; }
.pf-ajuda-tela { margin-left: auto; color: var(--pf-cor); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.pf-ajuda-tela:hover { text-decoration: underline; }
.pf-ajuda { max-width: 860px; }
.pf-ajuda-indice { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1.2rem; padding: 0; list-style: none; }
.pf-ajuda-indice a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--pf-borda); border-radius: 999px; background: #fff;
    color: var(--pf-texto); text-decoration: none; font-size: .88rem; }
.pf-ajuda-indice a:hover { border-color: var(--pf-cor); color: var(--pf-cor); }
.pf-ajuda section { background: #fff; border: 1px solid var(--pf-borda); border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: .9rem;
    scroll-margin-top: 12px; }
.pf-ajuda section:target { border-color: var(--pf-cor); box-shadow: 0 0 0 2px rgba(35, 66, 127, .15); }
.pf-ajuda h2 { margin: 0 0 .5rem; font-size: 1.12rem; display: flex; align-items: center; gap: .45rem; }
.pf-ajuda h2 .pi { color: var(--pf-cor); }
.pf-ajuda ol, .pf-ajuda ul { margin: .3rem 0 .4rem; padding-left: 1.3rem; }
.pf-ajuda li { margin: .25rem 0; line-height: 1.45; }
.pf-ajuda .pf-dica { margin: .5rem 0 0; padding: .45rem .7rem; background: var(--pf-fundo); border-radius: 6px; font-size: .9rem; color: var(--pf-suave); }
.pf-ajuda dt { font-weight: 600; margin-top: .6rem; }
.pf-ajuda dd { margin: .15rem 0 0; color: var(--pf-suave); line-height: 1.45; }
@media (max-width: 480px) { .pf-topo .pf-ajuda-topo { font-size: .85rem; } }

/* ---------- rodada 12/10: agendar, validar, meus, barra fixa, celular ---------- */
/* agendar: busca pelo numero da OC e "so as livres" */
.pf-filtros-oc { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: .2rem 0 .6rem; }
.pf-busca-oc input { width: 180px; }
.pf-so-livres { display: inline-flex; align-items: center; gap: .45rem; }
.pf-tabela-ocs tr.pf-oc-bloqueada td { color: var(--pf-suave); }
.pf-atrasada { color: #b45309; font-weight: 600; }
.pf-tag-atrasada { margin-left: .35rem; background: #fff4e5; border-color: #f5a623; color: #8a5300; }

/* resumo fixo no rodape da tela enquanto a lista rola (agendar e precos) */
.pf-barra-fixa { position: sticky; bottom: 0; z-index: 5; margin: 0 0 12px; padding: .55rem .9rem; background: #fff;
    border: 1px solid var(--pf-borda); border-radius: 8px; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
.pf-barra-fixa .pf-resumo { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; font-weight: 400; }
.pf-barra-fixa .ui-button { white-space: nowrap; }

/* meus agendamentos: acao principal + reagendar/cancelar discretos embaixo */
.pf-acoes-coluna .pf-acoes-sec { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-top: .15rem; }
.pf-acoes-coluna .pf-acoes-sec .ui-button { width: auto !important; flex: 0 0 auto; margin: 0 !important; padding: .25rem .45rem; font-size: .85rem; }
.pf-acoes-coluna .pf-acoes-sec .ui-button .ui-button-text { padding: 0 0 0 1.4rem; }
.pf-acoes-coluna .pf-acoes-sec .ui-button .ui-button-icon-left { left: .4rem; }

/* validar: validacoes anteriores da nota (seta da linha) */
.pf-hist-anteriores { padding: .4rem .6rem .2rem 2.4rem; font-size: .9rem; }
.pf-hist-anteriores ul { margin: .3rem 0 .2rem; padding-left: 1.1rem; }
.pf-hist-anteriores li { margin: .2rem 0; color: var(--pf-texto); }

/* pre-cadastro: o PrimeFaces desenha uma caixa vazia embaixo de cada botao de upload */
#formFotos .ui-fileupload-content:not(:has(.ui-fileupload-row)) { display: none; }
#formFotos .ui-fileupload-buttonbar { border: 0; background: transparent; padding: 0; }

/* celular: alvos de toque de pelo menos 40px e topo mais compacto */
@media (max-width: 640px) {
    .pf-topo a, .pf-topo .ui-button, .pf-voltar .ui-button, .pf-ajuda-tela { min-height: 40px; display: inline-flex; align-items: center; }
    .pf-vendo-como { max-width: 100%; overflow: hidden; }
    .pf-vendo-como > :not(a):not(i) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev,
    .ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-last { min-width: 40px; height: 40px; }
    .ui-chkbox .ui-chkbox-box { width: 26px; height: 26px; }
    .pf-busca-oc, .pf-busca-oc input { width: 100%; }
    .pf-filtros-oc { flex-direction: column; align-items: stretch; }
}

/* meus agendamentos: NF-e ja emitidas para as OCs da entrega (xPed) */
.pf-notas-oc { margin-top: .3rem; font-size: .85rem; color: var(--pf-suave); }
.pf-notas-oc a { color: var(--pf-cor); font-weight: 600; text-decoration: none; }
.pf-notas-oc a:hover { text-decoration: underline; }

/* minhas propostas: itens na seta da linha. O reflow da tabela de fora escondia os titulos do cabecalho desta
   (regra do PF para td .ui-column-title) e as colunas de largura fixa espremiam o Produto em ~50px */
.pf-subtabela thead th .ui-column-title { display: inline !important; }
.pf-subtabela > .ui-datatable-tablewrapper > table { table-layout: auto !important; }
.pf-subtabela > .ui-datatable-tablewrapper > table > tbody > tr > td:first-child { min-width: 260px; }
@media (max-width: 640px) {
    .pf-subtabela > .ui-datatable-tablewrapper > table > tbody > tr > td:first-child { min-width: 0; }
}
/* meus agendamentos: o texto da NF-e quebrava inteiro para a linha de baixo e deixava o icone sozinho */
.pf-nf { flex-wrap: nowrap; }
.pf-nf > span { flex: 1 1 auto; min-width: 0; }

/* rodada 12/10 (2): notas para agendar, aviso de divergencia, periodo, cartoes compactos no celular */
.pf-sugeridas { margin: .8rem 0; padding: .6rem .8rem; background: #f3f8fe; border: 1px solid #b6d4f2; border-radius: 8px; }
.pf-sugeridas-titulo { font-weight: 600; color: #1b4f80; margin-bottom: .4rem; }
.pf-sugerida { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid #d9e7f5; }
.pf-sugerida:first-of-type { border-top: 0; }
.pf-sugerida-div strong { color: var(--pf-alerta); }
.pf-nf-aviso-div { padding: .5rem .8rem; background: #fdecee; border: 1px solid #e5a3ad; border-radius: 6px; color: #8c1d2c; display: flex; gap: .5rem; align-items: flex-start; }
.pf-nf-aviso-div .pi { margin-top: .15rem; }
.pf-periodo { margin: 0 0 .6rem; }
/* "Esqueci minha senha" / "Voltar para o login": alvo de toque maior */
.pf-ajuda a { display: inline-block; padding: .55rem 0; }
@media (max-width: 640px) {
    /* agendar: cada OC num cartao de 2 colunas (antes uma linha por campo: ~8 mil px para 15 OCs) */
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr { display: grid; grid-template-columns: 44px 1fr 1fr; column-gap: .4rem; padding: .5rem 0; }
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td { display: block; padding: .15rem .2rem !important; border: 0; }
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td:first-child { grid-row: 1 / span 4; align-self: center; }
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td:first-child .ui-column-title { display: none; }
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td .ui-column-title { display: block; min-width: 0; font-size: .75rem; font-weight: 600; }
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td:last-child { grid-column: 2 / span 2; }
    .pf-sugerida { flex-wrap: wrap; }
}
.pf-mostrar-todas { display: inline-block; padding: .45rem 0 0; color: var(--pf-cor); font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
    /* agendar no celular: emissao e itens pesam pouco na escolha; o cartao fica com codigo, OC, chegada, saldo e situacao */
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td.pf-col-sec { display: none; }
    .pf-tabela-ocs.ui-datatable-reflow .ui-datatable-data > tr > td:first-child { grid-row: 1 / span 3; }
}

/* ordens de compra: OC com PDF novo (ainda nao aberto) */
.pf-tabela tr.pf-oc-nova td { background: #f3f8fe; }
.pf-tag-nova { margin-left: .35rem; background: var(--pf-cor); border-color: var(--pf-cor); color: #fff; }
.pf-oc-confirmada { color: #2e7d32; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.pf-oc-sem-pdf { white-space: normal; }

/* ordens de compra: Ver PDF e Confirmo o recebimento lado a lado (uma linha por OC); no celular quebram */
.pf-oc-acoes .pf-oc-botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-oc-acoes .pf-oc-botoes .ui-button { width: auto !important; flex: 0 0 auto; margin: 0 !important; }

/* pre-cadastro: ICMS por UF lado a lado (no celular um embaixo do outro) */
.pf-fiscal-ufs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .6rem; }
.pf-fiscal-uf { border: 1px solid var(--pf-borda); border-radius: 8px; padding: .6rem .9rem .8rem; background: #fff; }
.pf-fiscal-uf h3 { margin: 0 0 .5rem; font-size: 1rem; }

/* combo nunca passa da coluna: o PrimeFaces mede pelo texto mais longo (ex.: origem "6 - Estrangeira direta...")
   e no tablet a pagina ganhava rolagem lateral; o texto longo e cortado com "..." */
.pf-grade > * { min-width: 0; }
.pf-campo .ui-selectonemenu { max-width: 100%; min-width: 0 !important; } /* o PrimeFaces poe min-width no style */
.pf-campo .ui-selectonemenu .ui-selectonemenu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* agendar/reagendar: o fornecedor so escolhe o dia; o horario de chegada e o da janela (JanelaVaga.primeiraComVaga) */
.pf-chegada { padding: .55rem .8rem; border-radius: 8px; background: #eef6ff; border: 1px solid #b6d4f5; }
.pf-sem-vaga { padding: .55rem .8rem; border-radius: 8px; background: #fff4e5; border: 1px solid #f5a623; color: #8a5300; }


/* ======================= revisao visual (14/10/2026) ======================= */

/* 1. marca: logo + nome no topo e no login */
.pf-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--pf-cor); }
.pf-logo { height: 30px; width: auto; display: block; }
.pf-login-logo { display: block; height: 44px; width: auto; margin: 0 0 14px; }
.pf-login .pf-ajuda a, .pf-ajuda a { color: var(--pf-cor); font-weight: 600; text-decoration: none; }
.pf-login .pf-ajuda a:hover, .pf-ajuda a:hover { text-decoration: underline; }
.pf-num { background: var(--pf-cor); }
.pf-ajuda-topo { color: var(--pf-cor); }

/* 4. titulos: menos espaco em cima; menores no celular */
.pf-conteudo h1 { font-size: 1.9rem; line-height: 1.2; margin: 6px 0 10px; }
.pf-voltar { margin-bottom: 2px; }

/* 3. inicio: empresa no topo, Agendar em destaque, proximas entregas */
.pf-inicio-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-inicio-topo h1 { margin-bottom: 6px; }
.pf-empresa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-botao-destaque.ui-button { white-space: nowrap; }
.pf-modulos { align-items: start; }  /* cada cartao com a altura do que tem (antes todos esticavam) */
.pf-proximas { background: #fff; border: 1px solid var(--pf-borda); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.pf-proximas-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pf-proximas-cab h2 { font-size: 1.05rem; margin: 0; }
.pf-proximas-cab h2 .pi { color: var(--pf-laranja); margin-right: 4px; }
.pf-proximas-cab a { color: var(--pf-cor); font-weight: 600; text-decoration: none; }
.pf-proxima { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 8px 0;
    border-top: 1px solid var(--pf-borda); color: var(--pf-texto); text-decoration: none; }
.pf-proximas-cab { flex-wrap: wrap; gap: 4px 12px; }
.pf-proximas-cab h2, .pf-proximas-cab a { white-space: nowrap; }
.pf-proximas-alerta { border-left: 4px solid var(--pf-alerta); }
.pf-proximas-avisos { margin: 4px 0 8px; }
.pf-proximas-vazio { display: block; padding: 8px 0 2px; border-top: 1px solid var(--pf-borda); }
.pf-proxima:hover { background: var(--pf-fundo); }
.pf-proxima-dia { font-weight: 700; color: var(--pf-cor); text-transform: capitalize; }
.pf-proxima-ocs { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-proxima-situacao { text-align: right; }
.pf-proxima-nf { display: block; font-size: .8rem; }

/* 7. barra de resumo do Agendar: so com OC marcada */
.pf-oculta { display: none !important; }

/* 10. texto de apoio legivel */
.pf-sub, .pf-ajuda { line-height: 1.45; }

@media (max-width: 640px) {
    .pf-conteudo h1 { font-size: 1.45rem; }
    .pf-logo { height: 26px; }
    .pf-marca span { font-size: .95rem; }
    .pf-nome { display: none; }   /* no celular o nome do usuario ja esta no "Ola" */
    /* topo numa linha so: Ajuda e Sair so com o icone */
    .pf-topo { flex-wrap: nowrap; padding: 8px 12px; }
    .pf-topo .pf-ajuda-topo { font-size: 0; }
    .pf-topo .pf-ajuda-topo .pi { font-size: 1.25rem; }
    .pf-usuario .ui-button .ui-button-text { display: none; }
    .pf-usuario .ui-button.ui-button-text-icon-left { padding: 6px 8px; }
    .pf-usuario .ui-button .ui-button-icon-left { position: static; margin: 0; }
    .pf-inicio-topo .pf-botao-destaque { width: 100%; }
    .pf-proxima { grid-template-columns: 74px 1fr; }
    .pf-proxima-situacao { grid-column: 2; text-align: left; }
    .pf-sub, .pf-ajuda { font-size: .875rem; }
}

/* atalhos dos modulos no topo do inicio (no lugar dos cartoes): botoes com tooltip e selo de aviso */
.pf-inicio-topo { display: block; }
.pf-atalhos { display: flex; flex-wrap: wrap; gap: 12px 8px; align-items: center; margin: 0 0 16px; padding-top: 6px; }
.pf-atalhos .pf-botao-destaque.ui-button { height: 40px; }
.pf-atalho { position: relative; display: inline-flex; }
.pf-atalho-botao { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; box-sizing: border-box; font-size: .95rem;
    background: #fff; color: var(--pf-cor); border: 1px solid var(--pf-cor); border-radius: 6px;
    font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s; }
.pf-atalho-botao:hover { background: #e8edf7; }
.pf-atalho-botao:focus-visible { outline: 2px solid var(--pf-laranja); outline-offset: 2px; }
.pf-atalho-alerta .pf-atalho-botao { border-color: var(--pf-alerta); }
/* selo do aviso no canto do botao; leva direto para a tela do aviso */
.pf-atalho-selos { position: absolute; top: -9px; right: -7px; display: flex; gap: 3px; }
.pf-atalho-selo { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
    border-radius: 10px; background: #f0b44c; color: #3d2600; font-size: .72rem; font-weight: 700; line-height: 20px;
    text-align: center; text-decoration: none; box-shadow: 0 0 0 2px var(--pf-fundo); }
.pf-atalho-selo-alerta { background: var(--pf-alerta); color: #fff; }

@media (max-width: 640px) {
    /* celular: dois botoes por linha, Agendar ocupando a linha toda */
    .pf-atalhos { display: grid; grid-template-columns: 1fr 1fr; }
    .pf-atalhos .pf-botao-destaque.ui-button { grid-column: 1 / -1; width: 100%; }
    .pf-atalho, .pf-atalho-botao { width: 100%; }
    .pf-atalho-botao { padding: 0 10px; font-size: .9rem; white-space: normal; line-height: 1.15; }
}

/* o PrimeFaces esconde o texto do botao de arquivo ate 40em: no celular ficava so o "+" (Enviar XML, Adicionar fotos) */
@media screen and (max-width: 40em) {
    .ui-fileupload-buttonbar .ui-button .ui-button-text { display: block; padding: .6rem 1rem .6rem 2.5rem !important; }
    .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose { padding: 0 !important; }
    .ui-fileupload-buttonbar .ui-button .ui-button-icon-left { left: 1rem !important; margin-left: 0 !important; }
}

/* campo que ocupa a linha inteira da grade (descricao do fornecedor no pre-cadastro) */
.pf-grade > .pf-campo-largo { grid-column: 1 / -1; }

/* pre-cadastro: identificacao primeiro e fotos logo antes do Enviar (os forms ficam na ordem do HTML; so a tela muda) */
.pf-precad-ordem { display: flex; flex-direction: column; }
.pf-precad-ordem > .pf-precad-dados { display: contents; }
.pf-precad-ordem .pf-precad-fotos { order: 1; }
.pf-precad-ordem .pf-precad-enviar { order: 2; }

/* Agendar: chegada logo abaixo dos dias; XML como botao secundario (contorno), o principal e Adicionar */
.pf-chegada-dia { margin-top: 12px; }
.pf-upload-secundario .ui-fileupload-choose.ui-button { background: #fff; color: var(--pf-cor); border-color: var(--pf-cor); }
.pf-upload-secundario .ui-fileupload-choose.ui-button:hover { background: #e8edf7; color: var(--pf-cor); }

/* ======================= comprovante, linha do tempo, resumo e planilha (16/10/2026) ======================= */

/* Meus agendamentos: linha do tempo da entrega */
.pf-linha-tempo { display: flex; margin: 8px 0 4px; max-width: 420px; }
.pf-lt-passo { flex: 1; position: relative; text-align: center; font-size: .72rem; color: var(--pf-suave); }
.pf-lt-passo::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--pf-borda); }
.pf-lt-passo:first-child::before { display: none; }
.pf-lt-ponto { display: block; position: relative; z-index: 1; width: 14px; height: 14px; margin: 0 auto 3px; border-radius: 50%;
    background: #fff; border: 2px solid var(--pf-borda); box-sizing: border-box; }
.pf-lt-feito .pf-lt-ponto, .pf-lt-atual .pf-lt-ponto { background: var(--pf-cor); border-color: var(--pf-cor); }
.pf-lt-feito::before, .pf-lt-atual::before { background: var(--pf-cor); }
.pf-lt-atual .pf-lt-ponto { box-shadow: 0 0 0 3px rgba(35, 66, 127, .2); }
.pf-lt-atual { color: var(--pf-texto); font-weight: 600; }
.pf-lt-nome { display: block; line-height: 1.15; }
.pf-btn-comprovante.ui-button { margin-top: 4px; }
@media (max-width: 640px) {
    .pf-linha-tempo { max-width: none; width: 100%; }
    /* no cartao do celular a celula e flex em linha: a linha do tempo e a etapa vao para uma linha inteira */
    .ui-datatable-reflow .ui-datatable-data > tr > td { flex-wrap: wrap; }
    .ui-datatable-reflow .ui-datatable-data > tr > td > .pf-linha-tempo,
    .ui-datatable-reflow .ui-datatable-data > tr > td > .pf-etapa { flex: 1 1 100%; }
    .pf-lt-passo { font-size: .66rem; }
}

/* listas: botao Planilha */
.pf-planilha-linha { display: flex; justify-content: flex-end; margin: 0 0 6px; }

/* Agendar: resumo antes de confirmar */
.pf-resumo-lista { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; }
.pf-resumo-lista dt { color: var(--pf-suave); font-weight: 600; }
.pf-resumo-lista dd { margin: 0; overflow-wrap: anywhere; }
.pf-regras { background: var(--pf-fundo); border: 1px solid var(--pf-borda); border-radius: 8px; padding: 10px 14px; }
.pf-regras ul { margin: 6px 0 0; padding-left: 18px; }
.pf-regras li { margin: 3px 0; }
.pf-ciente { margin: 12px 0 4px; }

/* comprovante para o motorista */
.pf-comprovante { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--pf-borda); border-radius: 10px; padding: 20px 22px; }
.pf-comprovante-cab { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid var(--pf-laranja); padding-bottom: 12px; margin-bottom: 14px; }
.pf-comprovante-logo { height: 40px; width: auto; }
.pf-comprovante-prot { font-size: 1.5rem; color: var(--pf-cor); }
.pf-comprovante-aviso { border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; background: #fff4e5; border: 1px solid #f0b44c; }
.pf-comprovante-ok { background: #e7f6ec; border-color: #7cc596; }
.pf-comprovante-invalido { background: #fdecec; border-color: #e88f8f; }
.pf-comprovante-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; }
.pf-comprovante-dados dt { color: var(--pf-suave); font-weight: 600; }
.pf-comprovante-dados dd { margin: 0; overflow-wrap: anywhere; }
.pf-comprovante-destaque { font-size: 1.15rem; font-weight: 700; }
.pf-comprovante-rodape { border-top: 1px dashed var(--pf-borda); padding-top: 10px; line-height: 1.5; }
.pf-comprovante-rodape .pf-sub { display: block; margin-top: 4px; }
@media (max-width: 640px) {
    .pf-comprovante { padding: 14px; }
    .pf-comprovante-dados { grid-template-columns: 1fr; gap: 2px; }
    .pf-comprovante-dados dd { margin-bottom: 8px; }
}
@media print {
    .pf-topo, .pf-rodape, .pf-voltar, .pf-nao-imprime { display: none !important; }
    body, main { background: #fff !important; }
    .pf-comprovante { border: 0; max-width: none; padding: 0; }
}