/* =====================================================================
   Apollo — tema AgroCP (mesmo padrão do Bridge, do Proteus e do Analytics)
   ---------------------------------------------------------------------
   Carregado depois do AdminLTE, do adminlte3-compat.css e do my-styles.css:
   sobrescreve as variáveis do Bootstrap / AdminLTE, do Select2, do SweetAlert
   e do toastr. Para mudar a cor do sistema, mexer só nos tokens do :root.

   Paleta da marca:
     #116837 verde principal (destaque)     #348464 verde médio (hover)
     #19573F verde conversão                 #008250 verde conversão hover
     #4ED609 verde claro (acento)            #343a40 topo e menu lateral
     #333333 texto geral
   O #4ED609 não leva texto branco por cima (contraste baixo): fica só em acentos.
   As cores do AdminLTE 3 (bg-olive, bg-teal, bg-purple...) não mudam: são usadas
   como categorias em cards, badges e gráficos.
   ===================================================================== */

:root {
    /* ---- Tokens da marca ---- */
    --tema-verde: #116837;
    --tema-verde-rgb: 17, 104, 55;
    --tema-verde-escuro: #0c4f29;
    --tema-verde-medio: #348464;
    --tema-verde-medio-rgb: 52, 132, 100;
    --tema-verde-conversao: #19573F;
    --tema-verde-conversao-hover: #008250;
    --tema-verde-claro: #4ED609;
    --tema-verde-suave: #e6f2ea;
    --tema-verde-suave-hover: #d2e8da;
    --tema-verde-borda: #a6cdb4;
    --tema-topo: #222222;
    --tema-texto: #333333;
    --tema-raio: 10px;
    --tema-degrade-rgb: 10, 61, 31; /* tom escuro do degradê do login */
    --login-tom-rgb: var(--tema-verde-rgb); /* cor do véu sobre a foto do login */
    --login-alfa-1: .92;
    --login-alfa-2: .78;
    --login-alfa-3: .35;
    --login-alfa-celular-1: .85;
    --login-alfa-celular-2: .7;

    /* ---- Bootstrap 5.3 ---- */
    --bs-primary: var(--tema-verde);
    --bs-primary-rgb: var(--tema-verde-rgb);
    --bs-primary-text-emphasis: #0a3f21;
    --bs-primary-bg-subtle: var(--tema-verde-suave);
    --bs-primary-border-subtle: var(--tema-verde-borda);
    --bs-success: var(--tema-verde-medio);
    --bs-success-rgb: var(--tema-verde-medio-rgb);
    --bs-success-text-emphasis: #1f5641;
    --bs-success-bg-subtle: #e4f1eb;
    --bs-success-border-subtle: #a9d2bf;
    --bs-body-color: var(--tema-texto);
    --bs-body-color-rgb: 51, 51, 51;
    --bs-heading-color: inherit;
    --bs-link-color: var(--tema-verde);
    --bs-link-color-rgb: var(--tema-verde-rgb);
    --bs-link-hover-color: var(--tema-verde-conversao-hover);
    --bs-link-hover-color-rgb: 0, 130, 80;
    --bs-focus-ring-color: rgba(var(--tema-verde-rgb), .25);
    --bs-form-valid-color: var(--tema-verde-medio);
    --bs-form-valid-border-color: var(--tema-verde-medio);
}

/* Branco menos estourado no modo claro: cards, inputs, tabelas e modais usam o --bs-body-bg.
   Só no html em light, para não brigar com o modo-escuro.css. Para voltar ao branco puro, apagar este bloco */
html[data-bs-theme="light"] {
    --bs-body-bg: #f9faf8;
    --bs-body-bg-rgb: 249, 250, 248;
    --bs-tertiary-bg: #f0f2ef;
    --bs-tertiary-bg-rgb: 240, 242, 239;
    --bs-secondary-bg: #e6e9e5;
    --bs-secondary-bg-rgb: 230, 233, 229;
}

/* =====================================================================
   Tema Fermavi (vermelho da marca, #B10D0E — mesma cor dos e-mails Fermavi do Proteus)
   ---------------------------------------------------------------------
   Oculto: saiu do menu Opções, que agora liga o modo escuro (modo-escuro.css). Nada mais põe
   data-tema="fermavi" no <html>; os tokens ficam aqui para a cor poder voltar.
   Troca só os tokens da marca: tudo que usa var(--tema-*) fica vermelho.
   O "success" do Bootstrap (text-success, bg-success, badges de situação) continua verde,
   porque indica valor positivo/situação ok e não a marca.
   ===================================================================== */
:root[data-tema="fermavi"] {
    --tema-verde: #B10D0E;
    --tema-verde-rgb: 177, 13, 14;
    --tema-verde-escuro: #860a0b;
    --tema-verde-medio: #c8312f;
    --tema-verde-medio-rgb: 200, 49, 47;
    --tema-verde-conversao: #8f0b0c;
    --tema-verde-conversao-hover: #d01a1b;
    --tema-verde-claro: #ff8a80;
    --tema-verde-suave: #fbeaea;
    --tema-verde-suave-hover: #f5d6d6;
    --tema-verde-borda: #e7aeae;
    --tema-degrade-rgb: 74, 6, 7;
    /* Login: vinho escuro e mais transparente, para o vermelho não pesar sobre a foto */
    --login-tom-rgb: 118, 30, 34;
    --login-alfa-1: .88;
    --login-alfa-2: .6;
    --login-alfa-3: .2;
    --login-alfa-celular-1: .82;
    --login-alfa-celular-2: .55;
    --bs-primary-text-emphasis: #6e0809;
    --bs-link-hover-color-rgb: 208, 26, 27;
    /* Situação positiva continua no verde AgroCP */
    --bs-success: #348464;
    --bs-success-rgb: 52, 132, 100;
}

/* =====================================================================
   Botões (o Bootstrap fixa as cores na classe, então troca as variáveis do .btn)
   ===================================================================== */
.btn-primary {
    --bs-btn-bg: var(--tema-verde);
    --bs-btn-border-color: var(--tema-verde);
    --bs-btn-hover-bg: var(--tema-verde-medio);
    --bs-btn-hover-border-color: var(--tema-verde-medio);
    --bs-btn-active-bg: var(--tema-verde-escuro);
    --bs-btn-active-border-color: var(--tema-verde-escuro);
    --bs-btn-disabled-bg: var(--tema-verde);
    --bs-btn-disabled-border-color: var(--tema-verde);
    --bs-btn-focus-shadow-rgb: var(--tema-verde-rgb);
}

/* Ação positiva (Salvar, Adicionar...) no verde de conversão */
.btn-success {
    --bs-btn-bg: var(--tema-verde-conversao);
    --bs-btn-border-color: var(--tema-verde-conversao);
    --bs-btn-hover-bg: var(--tema-verde-conversao-hover);
    --bs-btn-hover-border-color: var(--tema-verde-conversao-hover);
    --bs-btn-active-bg: var(--tema-verde-escuro);
    --bs-btn-active-border-color: var(--tema-verde-escuro);
    --bs-btn-disabled-bg: var(--tema-verde-conversao);
    --bs-btn-disabled-border-color: var(--tema-verde-conversao);
    --bs-btn-focus-shadow-rgb: 25, 87, 63;
}

.btn-outline-primary {
    --bs-btn-color: var(--tema-verde);
    --bs-btn-border-color: var(--tema-verde);
    --bs-btn-hover-bg: var(--tema-verde);
    --bs-btn-hover-border-color: var(--tema-verde);
    --bs-btn-active-bg: var(--tema-verde-escuro);
    --bs-btn-active-border-color: var(--tema-verde-escuro);
    --bs-btn-disabled-color: var(--tema-verde);
    --bs-btn-disabled-border-color: var(--tema-verde);
    --bs-btn-focus-shadow-rgb: var(--tema-verde-rgb);
}

.btn-outline-success {
    --bs-btn-color: var(--tema-verde-medio);
    --bs-btn-border-color: var(--tema-verde-medio);
    --bs-btn-hover-bg: var(--tema-verde-medio);
    --bs-btn-hover-border-color: var(--tema-verde-medio);
    --bs-btn-active-bg: var(--tema-verde);
    --bs-btn-active-border-color: var(--tema-verde);
    --bs-btn-focus-shadow-rgb: var(--tema-verde-medio-rgb);
}

/* Secundário (Fechar, Voltar): preto da marca, hover cinza */
.btn-secondary {
    --bs-btn-bg: var(--tema-topo);
    --bs-btn-border-color: var(--tema-topo);
    --bs-btn-hover-bg: #888583;
    --bs-btn-hover-border-color: #888583;
    --bs-btn-active-bg: #111111;
    --bs-btn-active-border-color: #111111;
    --bs-btn-disabled-bg: var(--tema-topo);
    --bs-btn-disabled-border-color: var(--tema-topo);
}

.btn-link {
    --bs-btn-color: var(--tema-verde);
    --bs-btn-hover-color: var(--tema-verde-conversao-hover);
    --bs-btn-active-color: var(--tema-verde-escuro);
}

/* =====================================================================
   Formulários, paginação, abas, dropdown, progresso
   ===================================================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--tema-verde-medio);
    box-shadow: 0 0 0 .2rem rgba(var(--tema-verde-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--tema-verde) !important;
    border-color: var(--tema-verde) !important;
}

.form-check-input:focus {
    border-color: var(--tema-verde-medio);
    box-shadow: 0 0 0 .2rem rgba(var(--tema-verde-rgb), .2);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23348464'/%3e%3c/svg%3e");
}

.pagination {
    --bs-pagination-color: var(--tema-verde);
    --bs-pagination-hover-color: var(--tema-verde-escuro);
    --bs-pagination-hover-bg: var(--tema-verde-suave);
    --bs-pagination-focus-color: var(--tema-verde-escuro);
    --bs-pagination-focus-bg: var(--tema-verde-suave);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--tema-verde-rgb), .2);
    --bs-pagination-active-bg: var(--tema-verde);
    --bs-pagination-active-border-color: var(--tema-verde);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tema-verde);
}

/* Só abas do conteúdo; topo e menu lateral ficam com as cores originais */
.app-main .nav-link {
    --bs-nav-link-color: var(--tema-verde);
    --bs-nav-link-hover-color: var(--tema-verde-conversao-hover);
}

.app-main .nav-tabs .nav-link.active {
    border-top: 3px solid var(--tema-verde);
    color: var(--tema-verde);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--tema-verde);
}

.list-group {
    --bs-list-group-active-bg: var(--tema-verde);
    --bs-list-group-active-border-color: var(--tema-verde);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--tema-verde);
}

/* Tabelas com cabeçalho/linha "success" no verde suave da marca */
.table-success {
    --bs-table-bg: var(--tema-verde-suave);
    --bs-table-border-color: var(--tema-verde-borda);
    --bs-table-striped-bg: var(--tema-verde-suave-hover);
    --bs-table-hover-bg: var(--tema-verde-suave-hover);
    --bs-table-color: var(--tema-texto);
}

/* =====================================================================
   Tabelas do sistema no padrão do Bridge (.tabela-admin)
   - cabeçalho verde da marca, branco, em maiúsculas, cantos arredondados
   - coluna ordenável com o ícone A-Z (apagado até ser a coluna ordenada)
   - inativo (table-danger) em vermelho bem suave com barra à esquerda
   - sem overflow:hidden (quebraria o cabeçalho fixo .sticky-top): os cantos
     são arredondados nas próprias células
   ===================================================================== */
.tabela-admin {
    --bs-table-hover-bg: var(--tema-verde-suave);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
}

    .tabela-admin > thead > tr:first-child > th:first-child {
        border-top-left-radius: calc(var(--tema-raio) - 1px);
    }

    .tabela-admin > thead > tr:first-child > th:last-child {
        border-top-right-radius: calc(var(--tema-raio) - 1px);
    }

    .tabela-admin > tbody:last-child > tr:last-child > td:first-child {
        border-bottom-left-radius: calc(var(--tema-raio) - 1px);
    }

    .tabela-admin > tbody:last-child > tr:last-child > td:last-child {
        border-bottom-right-radius: calc(var(--tema-raio) - 1px);
    }

    /* Cabeçalho de registro inativo em vermelho */
    .tabela-admin > thead > tr.table-danger > th {
        --bs-table-bg: #b02a37;
        background-color: #b02a37;
    }

    /* Linha de título (cor própria no style) e linha de ações (botões) acima do cabeçalho */
    .tabela-admin > thead > tr.tabela-admin-titulo > th {
        text-transform: none;
        letter-spacing: 0;
    }

    .tabela-admin > thead > tr.tabela-admin-acoes > th {
        --bs-table-bg: var(--tema-verde-suave);
        background-color: var(--tema-verde-suave);
        color: var(--tema-texto);
        text-transform: none;
        border-bottom: 1px solid var(--tema-verde-borda);
    }

    /* Linha selecionada no verde suave em vez do azul */
    .tabela-admin > tbody > tr.table-info {
        --bs-table-bg: var(--tema-verde-suave);
        --bs-table-color: var(--tema-texto);
        --bs-table-hover-bg: var(--tema-verde-suave-hover);
        --bs-table-hover-color: var(--tema-texto);
        --bs-table-border-color: #eef1ef;
    }

        .tabela-admin > tbody > tr.table-info > td:first-child {
            border-left-color: var(--tema-verde);
        }

    .tabela-admin > thead > tr > th {
        --bs-table-bg: var(--tema-verde);
        background-color: var(--tema-verde);
        color: #fff;
        border: 0;
        font-weight: 600;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .02em;
        padding-top: .65rem;
        padding-bottom: .65rem;
        vertical-align: middle;
        /* Cabeçalho pode ir para 2 linhas (equilibradas) para a largura ficar com os valores:
           com o título em uma linha só a tabela não cabia e os valores quebravam (ex.: "R$ / 1,49") */
        white-space: normal;
        text-wrap: balance;
        line-height: 1.25;
        /* Largura mínima igual para as colunas: cabeçalhos longos ("QTDE CANCELADA (KG/L)") ficam harmônicos */
        min-width: 6rem;
    }

        /* Título da coluna em uma linha só. As faixas de título e de ações ocupam a largura toda e podem quebrar */
        .tabela-admin > thead > tr:not(.tabela-admin-titulo, .tabela-admin-acoes) > th:not([colspan]) {
            white-space: nowrap;
        }

        .tabela-admin > thead > tr > th a {
            color: #fff;
        }

        .tabela-admin > thead > tr > th.ordenavel:hover {
            background-color: var(--tema-verde-escuro);
        }

            .tabela-admin > thead > tr > th.ordenavel:hover .opacity-50 {
                opacity: 1 !important;
            }

    .tabela-admin > tbody > tr > td {
        border-left: 0;
        border-right: 0;
        border-color: #eef1ef;
        vertical-align: middle;
    }

    /* Valores, quantidades e datas (colunas alinhadas à direita ou ao centro) nunca quebram;
       só o texto livre (produto, cliente, observação) quebra, sem precisar de barra horizontal */
    .tabela-admin > tbody > tr > td.text-end,
    .tabela-admin > tbody > tr > td.text-right,
    .tabela-admin > tbody > tr > td.text-center,
    .tabela-admin > tbody > tr > td.num,
    .tabela-admin > tbody > tr > td[style*="text-align:right"],
    .tabela-admin > tbody > tr > td[style*="text-align: right"],
    .tabela-admin > tbody > tr > td[style*="text-align:center"],
    .tabela-admin > tbody > tr > td[style*="text-align: center"],
    .tabela-admin > tfoot > tr > td,
    .tabela-admin > tfoot > tr > th {
        white-space: nowrap;
    }

    /* width 1% = a coluna de valor encolhe até o conteúdo (ou o min-width do cabeçalho)
       e sobra a largura para o texto livre ficar em uma linha */
    .tabela-admin > tbody > tr > td.text-end,
    .tabela-admin > tbody > tr > td.text-right,
    .tabela-admin > tbody > tr > td.text-center,
    .tabela-admin > tbody > tr > td.num {
        width: 1%;
    }

    /* Texto livre quebra em palavra, nunca no meio (ex.: "CARBONATO DE MG 39%") */
    .tabela-admin > tbody > tr > td {
        overflow-wrap: normal;
        word-break: normal;
    }

    .tabela-admin > tbody > tr:last-child > td {
        border-bottom: 0;
    }

    /* Barra de estado na primeira célula: não pinta a linha inteira de vermelho */
    .tabela-admin > tbody > tr > td:first-child {
        border-left: 4px solid transparent;
    }

    /* Cancelado/reprovado: vermelho bem visível (fundo, barra cheia e texto escuro legível) */
    .tabela-admin > tbody > tr.table-danger {
        --bs-table-bg: #f8d7da;
        --bs-table-color: #58151c;
        --bs-table-hover-bg: #f1c2c7;
        --bs-table-hover-color: #58151c;
        --bs-table-border-color: #f1b0b7;
    }

        .tabela-admin > tbody > tr.table-danger > td:first-child {
            border-left: 5px solid #dc3545;
        }

/* Paginação das listagens: em cima e embaixo da tabela, alinhada à direita */
/* Listas de cadastro: total, páginas e registros por página na mesma linha */
.cadastro-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

    .cadastro-paginacao .pagination {
        margin: 0;
    }

.cadastro-paginacao-total {
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.cadastro-paginacao-tamanho {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .85rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

    .cadastro-paginacao-tamanho .form-select {
        width: auto;
    }

.coluna-ordenavel {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

    .coluna-ordenavel i {
        margin-left: .15rem;
        font-size: .75em;
        opacity: .45;
    }

    .coluna-ordenavel:hover {
        color: inherit;
        text-decoration: underline;
    }

.coluna-ordenada .coluna-ordenavel i {
    opacity: 1;
}

/* Cadastros pai e filho: uma aba por tela do grupo */
.cadastro-abas {
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}

    .cadastro-abas .nav-link {
        padding: .35rem .75rem;
        font-size: .875rem;
        color: var(--bs-body-color);
    }

        .cadastro-abas .nav-link.active {
            background-color: var(--tema-verde);
            color: #fff;
        }

/* Cadastro em modal de tela cheia (padrão de compras e chamados): conteúdo centralizado para os campos não esticarem */
.cadastro-modal-corpo {
    max-width: 1140px;
    margin-inline: auto;
}

/* Mesmo efeito sem o wrapper: o corpo do modal ganha margem lateral até a largura de 1140px */
.modal-body.cadastro-modal-centro {
    padding-inline: max(1rem, calc((100% - 1140px) / 2));
}

/* Form em volta do modal-content (Html.BeginForm por fora): sem isso o modal-dialog-scrollable não prende o rodapé */
.modal-dialog.modal-fullscreen > form:not(.modal-content) {
    display: contents;
}

.cadastro-modal-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 1rem;
    scrollbar-width: thin;
}

    .cadastro-modal-abas .nav-link {
        white-space: nowrap;
        color: var(--bs-body-color);
    }

        .cadastro-modal-abas .nav-link.active {
            color: var(--tema-verde);
            font-weight: 600;
        }

    .cadastro-modal-abas .badge {
        font-weight: 500;
    }

.cadastro-filho-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.cadastro-filho-vazio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
}

    .cadastro-filho-vazio i {
        display: block;
        font-size: 1.75rem;
        margin-bottom: .5rem;
        opacity: .6;
    }

.paginacao-tabela .pagination {
    justify-content: flex-end;
}

.paginacao-topo {
    margin-bottom: .75rem;
}

/* =====================================================================
   Select2 (tema padrão): chips, foco e opções no verde
   ===================================================================== */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tema-verde-suave) !important;
    border-color: var(--tema-verde-borda) !important;
    color: var(--tema-verde) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tema-verde) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--tema-verde-medio);
    box-shadow: 0 0 0 .2rem rgba(var(--tema-verde-rgb), .2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--tema-verde-suave) !important;
    color: var(--tema-verde-escuro) !important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background-color: var(--tema-verde) !important;
    color: #fff !important;
}

.select2-dropdown {
    border-color: var(--tema-verde-borda);
}

/* Variação select2-success das telas (select2-adminlte3.css): chips, opção destacada e foco no verde da marca */
.select2-success + .select2-container--default.select2-container--open .select2-selection--single,
.select2-success + .select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-success .select2-selection--multiple:focus,
.select2-success .select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-success.select2-container--focus .select2-selection--multiple,
.select2-success .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--tema-verde-medio);
}

.select2-container--default .select2-success.select2-dropdown .select2-search__field:focus,
.select2-container--default .select2-success .select2-search--inline .select2-search__field:focus,
.select2-success .select2-container--default .select2-search--inline .select2-search__field:focus {
    border-color: var(--tema-verde-medio);
}

.select2-container--default .select2-success .select2-results__option--highlighted,
.select2-success .select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-success .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-success .select2-results__option--highlighted[aria-selected]:hover,
.select2-success .select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-success .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--tema-verde-suave) !important;
    color: var(--tema-verde-escuro) !important;
}

.select2-container--default .select2-success .select2-selection--multiple .select2-selection__choice,
.select2-success .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tema-verde-suave) !important;
    border-color: var(--tema-verde-borda) !important;
    color: var(--tema-verde) !important;
}

.select2-container--default .select2-success .select2-selection--multiple .select2-selection__choice__remove,
.select2-success .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-success .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-success .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--tema-verde) !important;
}

/* =====================================================================
   SweetAlert2 e Toastr
   ===================================================================== */
/* Confirmar no verde e cancelar no grafite da marca (quem passa confirmButtonColor no JS, ex.: vermelho
   de excluir, continua com a cor dele: vem inline). O .swal2-popup na frente é para ganhar do CSS que o
   sweetalert2.all.min.js injeta no <head> depois deste arquivo (mesmo seletor, ele vencia e ficava roxo) */
.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--tema-verde);
    border-radius: .5rem;
}

    .swal2-popup .swal2-styled.swal2-confirm:focus {
        box-shadow: 0 0 0 3px rgba(var(--tema-verde-rgb), .35);
    }

.swal2-popup .swal2-styled.swal2-cancel {
    background-color: var(--tema-topo);
    border-radius: .5rem;
}

    .swal2-popup .swal2-styled.swal2-cancel:focus {
        box-shadow: 0 0 0 3px rgba(34, 34, 34, .3);
    }

.swal2-popup {
    border-radius: var(--tema-raio);
}

/* Ícone de pergunta/informação no verde (o padrão era azul acinzentado) */
.swal2-icon.swal2-question,
.swal2-icon.swal2-info {
    border-color: var(--tema-verde-borda);
    color: var(--tema-verde);
}

/* Opções em card dentro do SweetAlert (ex.: escolher a visão da Carteira na Home) */
.swal-opcoes {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .5rem;
    text-align: left;
}

    .swal-opcoes .home-atalho {
        height: auto;
        cursor: pointer;
    }

.toast-success {
    background-color: var(--tema-verde) !important;
}

/* =====================================================================
   Cards
   ===================================================================== */
.card {
    border-radius: var(--tema-raio);
}

/* O AdminLTE 4 fixa a cor do card-primary/card-success em hexa: troca pela marca */
.card-primary {
    --lte-card-variant-bg: var(--tema-verde);
    --lte-card-variant-bg-rgb: var(--tema-verde-rgb);
}

.card-success {
    --lte-card-variant-bg: var(--tema-verde-medio);
    --lte-card-variant-bg-rgb: var(--tema-verde-medio-rgb);
}

.card-outline.card-primary,
.card-primary.card-outline {
    border-top-color: var(--tema-verde) !important;
}

/* =====================================================================
   Cards de atalho da tela inicial (mesmo desenho do Bridge e do Proteus)
   ===================================================================== */
.home-atalho {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .home-atalho:hover {
        color: var(--bs-body-color);
        border-color: var(--tema-verde-medio);
        box-shadow: 0 .35rem 1rem rgba(var(--tema-verde-rgb), .12);
        transform: translateY(-2px);
    }

.home-atalho-icone {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    font-size: 1.25rem;
    background-color: var(--tema-verde);
    color: #fff;
    transition: background-color .15s ease;
}

.home-atalho:hover .home-atalho-icone {
    background-color: var(--tema-verde-medio);
}

.home-atalho-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.3;
}

    .home-atalho-texto strong {
        font-size: 1rem;
    }

    .home-atalho-texto small {
        font-size: .8rem;
        color: var(--bs-secondary-color);
    }

.home-atalho-seta {
    color: var(--bs-secondary-color);
    transition: transform .15s ease, color .15s ease;
}

.home-atalho:hover .home-atalho-seta {
    color: var(--tema-verde);
    transform: translateX(3px);
}

/* =====================================================================
   Topo: cor única da barra e do menu Opções (mesmo padrão do Bridge)
   ===================================================================== */
:root {
    --navbar-bg: #343a40;
    --navbar-border: rgba(255, 255, 255, .12);
    --navbar-text: #ffffff;
    --navbar-text-muted: rgba(255, 255, 255, .65);
}

/* Iniciais do usuário no menu Opções */
.avatar-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tema-verde-medio), var(--tema-verde));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
}

/* min-width explícito para não achatar dentro de container flex */
.avatar-circle-lg {
    width: 70px;
    height: 70px;
    min-width: 70px;
    font-size: 1.5rem;
    border: 3px solid rgba(255, 255, 255, .3);
}

/* Avatar do botão Opções no celular */
.avatar-circle-topo {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: .7rem;
}

/* Nível de acesso às notas (My Notes): bronze, prata e ouro, usado no departamento e no My Notes */
.nivel-nota {
    font-weight: 600;
    cursor: pointer;
}

.nivel-nota-0 {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.nivel-nota-1 {
    background-color: #cd7f32;
    color: #fff;
}

.nivel-nota-2 {
    background-color: #a8a9ad;
    color: #fff;
}

.nivel-nota-3 {
    background-color: #d4a017;
    color: #fff;
}

span.nivel-nota {
    cursor: default;
}

/* Fala CP na Home: só o texto, à direita da mensagem do dia; o clique abre o modal com os comunicados */
.falacp-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding: .25rem .5rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--tema-verde);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .falacp-link:hover {
        background-color: color-mix(in srgb, var(--tema-verde) 10%, transparent);
    }

/* Texto do comunicado (HTML do editor): imagens e tabelas não passam da largura */
.falacp-noticia {
    font-size: 1rem;
    line-height: 1.6;
    word-break: break-word;
}

    .falacp-noticia img,
    .falacp-noticia video,
    .falacp-noticia iframe {
        max-width: 100%;
        height: auto;
        border-radius: .35rem;
    }

    .falacp-noticia table {
        max-width: 100%;
    }

/* My Notes: cartão da nota com a cor da lista na borda esquerda */
.nota-lista-cor {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .25rem;
    vertical-align: middle;
}

.nota-cartao {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--nota-cor, var(--tema-verde));
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .nota-cartao:hover {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
        transform: translateY(-1px);
    }

.nota-cartao-titulo {
    font-weight: 600;
    word-break: break-word;
}

.nota-cartao-rodape {
    margin-top: auto;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

/* Botão só com ícone no cabeçalho escuro dos modais (ex.: imprimir chamado e compra): mesmo visual do X de fechar */
.btn-icone-cabecalho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    opacity: .5;
    transition: opacity .15s ease;
}

    .btn-icone-cabecalho:hover {
        opacity: 1;
    }

    .btn-icone-cabecalho:focus-visible {
        opacity: 1;
        outline: 2px solid rgba(255, 255, 255, .5);
    }

/* Ações do cabeçalho do chamado e da compra: todos os ícones e o X na mesma linha, mesmo tamanho e espaço.
   O .modal-header .btn-close do Bootstrap tem margem negativa, que deixava o X mais alto que o resto */
.cabecalho-acoes {
    gap: .35rem;
}

    .cabecalho-acoes .btn-icone-cabecalho {
        width: 1.9rem;
        height: 1.9rem;
        opacity: .75;
    }

        .cabecalho-acoes .btn-icone-cabecalho:hover {
            opacity: 1;
            background-color: rgba(255, 255, 255, .12);
        }

    .cabecalho-acoes .btn-close {
        box-sizing: border-box;
        width: 1.9rem;
        height: 1.9rem;
        margin: 0 !important;
        padding: 0;
        background-size: .85rem;
        opacity: .75;
    }

        .cabecalho-acoes .btn-close:hover {
            opacity: 1;
        }

/* My Notes: trecho protegido (nota-segredo.js) */
.nota-segredo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .15rem .35rem .15rem 0;
    padding: .2rem .25rem .2rem .55rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .4rem;
    background-color: var(--bs-tertiary-bg);
    font-size: .875rem;
    vertical-align: middle;
}

    .nota-segredo > .fa-lock {
        color: var(--tema-verde);
    }

.nota-segredo-borrao {
    filter: blur(3px);
    user-select: none;
    letter-spacing: .1em;
}

.nota-segredo-dica {
    color: var(--bs-secondary-color);
}

.nota-segredo-painel {
    padding: .5rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

.nota-segredo-aberto {
    margin-bottom: .5rem;
    padding: .65rem .85rem;
    border-radius: .4rem;
    background-color: var(--bs-tertiary-bg);
    font-family: var(--bs-font-monospace);
    font-size: 1.05rem;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

/* Itens do orçamento: observação numa linha própria (antes colava no "dias úteis") e item sem foto */
.orcamento-item-obs {
    clear: both;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .4rem;
    padding: .3rem .6rem;
    border-left: 3px solid var(--tema-verde);
    border-radius: .25rem;
    background-color: var(--bs-tertiary-bg);
    font-size: .85rem;
    color: var(--bs-body-color);
    white-space: pre-line;
    word-break: break-word;
}

    .orcamento-item-obs > i {
        margin-top: .15rem;
        color: var(--tema-verde);
    }

.produto-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--tema-verde);
    font-size: 1.35rem;
}

/* Atalho de chamados do topo (ao lado das notificações) */
.atalho-chamados {
    min-width: 230px;
}

    .atalho-chamados .dropdown-item i {
        width: 1.25rem;
        text-align: center;
        margin-right: .35rem;
        color: var(--tema-verde);
    }

/* No celular o avatar (30px) é mais alto que a linha do link (24px) e ficava 4px abaixo dos outros ícones do topo:
   centraliza no próprio link e tira do padding o que o avatar tem a mais (8 + 24 + 8 = 5 + 30 + 5 = 40px) */
@media (max-width: 767.98px) {
    .navbar .user-menu > .nav-link {
        display: flex;
        align-items: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

.user-header .avatar-circle {
    margin-left: auto;
    margin-right: auto;
}

/* Barra superior e dropdown com a mesma cor; float do AdminLTE trocado por flex */
.app-header.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
}

.navbar .user-menu > .dropdown-menu {
    background-color: var(--navbar-bg);
    border: 1px solid var(--navbar-border);
    border-radius: .5rem;
    padding: 0;
    margin-top: .25rem;
    width: 260px;
    overflow: hidden; /* respeita o border-radius nas bordas internas */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .35);
}

    /* As três faixas do dropdown herdam o fundo da navbar. */
    .navbar .user-menu > .dropdown-menu > .user-header,
    .navbar .user-menu > .dropdown-menu > .user-body,
    .navbar .user-menu > .dropdown-menu > .user-footer {
        background-color: transparent !important;
        border-color: var(--navbar-border) !important;
        color: var(--navbar-text);
    }

    /* (b) Cabeçalho: avatar e nome centralizados, altura automática. */
    .navbar .user-menu > .dropdown-menu > .user-header {
        height: auto;
        padding: 1.25rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        text-align: center;
    }

        .navbar .user-menu > .dropdown-menu > .user-header p {
            margin: 0;
            line-height: 1.3;
            font-size: .9rem;
            font-weight: 600;
            color: var(--navbar-text);
        }

            .navbar .user-menu > .dropdown-menu > .user-header p small {
                display: block;
                font-weight: 400;
                font-size: .75rem;
                color: var(--navbar-text-muted);
            }

    /* Corpo: onde fica o "Alterar Senha". Centralizado, sem float. */
    .navbar .user-menu > .dropdown-menu > .user-body {
        padding: .75rem 1rem;
        border-top: 1px solid var(--navbar-border);
        display: flex;
        justify-content: center;
    }

    /* Rodapé: onde fica o "Sair". float:none mata o float-left/right
       herdado do AdminLTE, que jogava o botão para o lado. */
    .navbar .user-menu > .dropdown-menu > .user-footer {
        padding: .75rem 1rem;
        border-top: 1px solid var(--navbar-border);
        display: flex;
        justify-content: center;
        gap: .5rem;
    }

        .navbar .user-menu > .dropdown-menu > .user-footer .btn,
        .navbar .user-menu > .dropdown-menu > .user-body .btn {
            float: none !important;
            min-width: 150px;
        }

.navbar .user-menu > .dropdown-menu {
    width: 300px;
}

.navbar .user-menu > .dropdown-menu > .user-body {
    padding: .5rem;
}

.menu-usuario {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
}

.navbar .user-menu .menu-usuario-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .6rem;
    border-radius: .5rem;
    color: var(--navbar-text);
    text-decoration: none;
    text-align: left;
    transition: background-color .15s ease;
}

    /* display:flex ganharia do atributo hidden (usado pelo pwa.js) */
    .navbar .user-menu .menu-usuario-item[hidden] {
        display: none;
    }

    .navbar .user-menu .menu-usuario-item:hover,
    .navbar .user-menu .menu-usuario-item:focus-visible {
        background-color: rgba(255, 255, 255, .08);
        color: var(--navbar-text);
    }

.menu-usuario-icone {
    flex: 0 0 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    font-size: 1.05rem;
    background-color: rgba(255, 255, 255, .08);
    color: var(--navbar-text);
}

.menu-usuario-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

    .menu-usuario-texto strong {
        font-size: .875rem;
        font-weight: 600;
    }

    .menu-usuario-texto small {
        font-size: .75rem;
        color: var(--navbar-text-muted);
    }

/* Bolinha com a cor para a qual a opção "Cor do sistema" vai trocar */
.menu-usuario-seta {
    margin-left: auto;
    font-size: .8rem;
    color: var(--navbar-text-muted);
}

/* =====================================================================
   Rodapé discreto: uma linha fina, texto pequeno e cinza
   ===================================================================== */
.fixed-footer .app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .15rem 1rem;
    min-height: 0;
    padding: .35rem 1rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    font-size: .78rem;
    color: #8a918d;
    border-top: 1px solid #e3e7e5;
    box-shadow: none;
}

    .fixed-footer .app-footer strong {
        font-weight: 600;
    }

    .fixed-footer .app-footer a {
        color: var(--tema-verde);
        text-decoration: none;
    }

        .fixed-footer .app-footer a:hover {
            text-decoration: underline;
        }

@media (max-width: 767.98px) {
    .fixed-footer .app-footer {
        justify-content: center;
    }
}

/* =====================================================================
   Login (mesmo padrão do Bridge)
   ===================================================================== */

/* Foto da lavoura com degradê da marca por cima para dar leitura ao texto.
   A foto vem da variável --login-foto (o _LayoutLogin sorteia entre fundo1, fundo2 e fundo3, como no login antigo). */
.login-moderno {
    --login-foto: url(/dist/img/fundo1.jpg);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background:
        linear-gradient(115deg, rgba(var(--tema-degrade-rgb), var(--login-alfa-1)) 0%, rgba(var(--login-tom-rgb), var(--login-alfa-2)) 45%, rgba(var(--login-tom-rgb), var(--login-alfa-3)) 100%),
        var(--login-foto) center / cover no-repeat fixed;
    color: #fff;
    overflow-x: hidden;
}

/* Login do CP Play: mantém a foto própria da tela antiga */
.login-moderno.login-playcp {
    --login-foto: url(/dist/img/fundo_play_cp.jpg);
}


.login-moderno-conteudo {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

/* ---- Lado esquerdo (desktop) ---- */
.login-moderno-destaque {
    flex: 1;
    flex-direction: column;
    max-width: 520px;
}

    .login-moderno-destaque h1 {
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 1.15;
        margin: 1.25rem 0 1rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    }

    .login-moderno-destaque p {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, .85);
        margin-bottom: 2rem;
    }

.login-moderno-selo {
    align-self: flex-start;
    padding: .4rem .9rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    font-weight: 600;
    font-size: .9rem;
    backdrop-filter: blur(4px);
}

.login-moderno-recursos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

    .login-moderno-recursos li {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .7rem .9rem;
        border-radius: .75rem;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .15);
        font-weight: 500;
    }

        .login-moderno-recursos li i {
            font-size: 1.2rem;
            color: var(--tema-verde-claro);
        }

/* ---- Fotos de fundo que se revezam (fade + zoom lento), com o degradê da marca por cima ---- */
.login-moderno.login-moderno-dinamico {
    background: transparent;
}

.login-moderno-fundos {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgb(var(--tema-degrade-rgb));
}

    .login-moderno-fundos::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, rgba(var(--tema-degrade-rgb), var(--login-alfa-1)) 0%, rgba(var(--login-tom-rgb), var(--login-alfa-2)) 45%, rgba(var(--login-tom-rgb), var(--login-alfa-3)) 100%);
    }

.login-moderno-fundo {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 2s ease-in-out, transform 11s linear;
}

    .login-moderno-fundo.ativo {
        opacity: 1;
        transform: scale(1);
    }

@media (max-width: 991.98px) {
    .login-moderno-fundos::after {
        background: linear-gradient(180deg, rgba(var(--tema-degrade-rgb), var(--login-alfa-celular-1)) 0%, rgba(var(--login-tom-rgb), var(--login-alfa-celular-2)) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-moderno-fundo {
        transform: none;
        transition: none;
    }
}

/* ---- Missão, visão e valores no painel: um cartão só, de altura fixa, que troca sozinho ---- */
.login-mvv-carrossel {
    margin-top: 1.5rem;
    padding: 1rem 1.15rem .75rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
}

    /* Altura fixa: o painel não cresce nem pula quando o texto muda */
    .login-mvv-carrossel .carousel-inner {
        height: 7rem;
    }

    .login-mvv-carrossel .login-mvv-item p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .88rem;
    }

    /* Valores da AgroCP no cartão de altura fixa: etiquetas compactas para as 5 caberem sem cortar
       (com o tamanho do modal a 3ª linha ficava escondida em telas mais estreitas) */
    .login-mvv-carrossel .login-mvv-valores {
        gap: .3rem;
        margin-top: .25rem;
    }

        .login-mvv-carrossel .login-mvv-valores li {
            padding: .12rem .55rem;
            font-size: .74rem;
            line-height: 1.35;
        }

.login-mvv-indicadores {
    position: static;
    justify-content: flex-start;
    margin: .5rem 0 0;
    padding: 0;
}

    .login-mvv-carrossel .login-mvv-indicadores [data-bs-target] {
        width: .5rem;
        height: .5rem;
        margin: 0 .35rem 0 0;
        border: 0;
        border-radius: 50%;
        background-color: #fff;
        opacity: .35;
    }

        .login-mvv-carrossel .login-mvv-indicadores [data-bs-target].active {
            opacity: 1;
            background-color: var(--tema-verde-claro);
        }

/* ---- Missão, visão e valores no modal do celular ---- */
.login-mvv {
    margin-top: 1.75rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
}

.login-mvv-abas {
    gap: .4rem;
    margin-bottom: 1rem;
}

    .login-mvv-abas .nav-link {
        padding: .35rem .9rem;
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, .3);
        background: transparent;
        color: rgba(255, 255, 255, .8);
        font-size: .85rem;
        font-weight: 600;
    }

        .login-mvv-abas .nav-link:hover {
            color: #fff;
        }

        .login-mvv-abas .nav-link.active {
            background: #fff;
            border-color: #fff;
            color: var(--tema-verde);
        }

.login-mvv-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

    .login-mvv-item + .login-mvv-item {
        margin-top: .9rem;
        padding-top: .9rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .login-mvv-item strong {
        display: block;
        margin-bottom: .2rem;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--tema-verde-claro);
    }

    .login-mvv-item p {
        margin: 0;
        font-size: .9rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, .88);
    }

.login-mvv-icone {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .14);
    color: var(--tema-verde-claro);
}

.login-mvv-valores {
    list-style: none;
    padding: 0;
    margin: .35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .login-mvv-valores li {
        padding: .25rem .65rem;
        border-radius: 2rem;
        background: rgba(255, 255, 255, .14);
        border: 1px solid rgba(255, 255, 255, .2);
        font-size: .8rem;
    }

.login-mvv-valores-detalhe {
    list-style: none;
    padding: 0;
    margin: .35rem 0 0;
    font-size: .85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}

    .login-mvv-valores-detalhe li + li {
        margin-top: .4rem;
    }

    .login-mvv-valores-detalhe b {
        color: #fff;
    }

/* No modal do celular o fundo é o degradê da marca e o bloco perde a moldura de vidro */
.login-mvv-modal {
    background: linear-gradient(160deg, rgba(var(--tema-degrade-rgb), 1) 0%, rgba(var(--login-tom-rgb), 1) 100%);
    color: #fff;
    border: 0;
    border-radius: 1rem;
}

    .login-mvv-modal .login-mvv {
        margin-top: 0;
        padding: 0;
        background: none;
        border: 0;
        backdrop-filter: none;
    }

/* ---- Card do formulário ---- */
.login-moderno-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2.25rem 1.75rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .97);
    color: #212529;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3);
}

.login-moderno-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .login-moderno-logo img {
        max-width: 190px;
    }

.login-moderno-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: .25rem;
}

.login-moderno-subtitulo {
    text-align: center;
    color: #6c757d;
    margin-bottom: 1.75rem;
}

.login-moderno-rotulo {
    font-size: .875rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: .35rem;
}

.login-moderno-campo .input-group-text,
.login-moderno-campo .form-control,
.login-moderno-ver-senha {
    height: 3rem;
    border-color: #dee2e6;
    background-color: #f8f9fa;
}

.login-moderno-campo .input-group-text {
    color: var(--tema-verde);
    border-right: 0;
}

.login-moderno-campo .form-control {
    border-left: 0;
}

    .login-moderno-campo .form-control:focus {
        background-color: #fff;
        box-shadow: none;
    }

/* Borda verde no grupo inteiro quando o campo está em foco. */
.login-moderno-campo {
    border-radius: .5rem;
    transition: box-shadow .15s;
}

    .login-moderno-campo:focus-within {
        box-shadow: 0 0 0 .2rem rgba(var(--tema-verde-rgb), .25);
    }

        .login-moderno-campo:focus-within .input-group-text,
        .login-moderno-campo:focus-within .form-control,
        .login-moderno-campo:focus-within .login-moderno-ver-senha {
            border-color: var(--tema-verde-medio);
            background-color: #fff;
        }

.login-moderno-ver-senha {
    border: 1px solid #dee2e6;
    border-left: 0;
    color: #6c757d;
    cursor: pointer;
}

    .login-moderno-ver-senha:hover {
        color: var(--tema-verde);
    }

.login-moderno-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--tema-verde);
    text-decoration: none;
}

    .login-moderno-link:hover {
        text-decoration: underline;
    }

.login-moderno-botao {
    height: 3rem;
    font-weight: 600;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(var(--tema-verde-rgb), .3);
}

.login-moderno-rodape {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .8rem;
    color: #6c757d;
}

    .login-moderno-rodape a {
        color: var(--tema-verde);
        font-weight: 600;
        text-decoration: none;
    }

/* ---- Mobile: só o card, centralizado (background fixed trava no iOS) ---- */
@media (max-width: 991.98px) {
    .login-moderno {
        background:
            linear-gradient(180deg, rgba(var(--tema-degrade-rgb), var(--login-alfa-celular-1)) 0%, rgba(var(--login-tom-rgb), var(--login-alfa-celular-2)) 100%),
            var(--login-foto) center / cover no-repeat;
    }
}

@media (max-width: 575.98px) {
    .login-moderno-conteudo {
        padding: 1.25rem 1rem;
    }

    .login-moderno-card {
        padding: 2rem 1.25rem 1.25rem;
        border-radius: 1rem;
    }

    .login-moderno-logo img {
        max-width: 160px;
    }

    .login-moderno-rodape {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
}


/* =====================================================================
   Rodapé dos modais: Fechar sempre à direita, como último botão
   ---------------------------------------------------------------------
   Vale para qualquer modal sem editar cada view: o botão que fecha (data-bs-dismiss,
   onclick com "fechar" ou id fechar_modal_*/btn_fechar_*) vai para o fim do rodapé.
   O margin-right zerado anula o me-auto que algumas views tinham no Fechar.
   Regras separadas: numa lista só, um navegador sem :has descartava todas (e o Fechar ficava onde está no HTML).
   A regra de descendente pega o Fechar dentro de grupos flex do rodapé (ex.: #parcial_compra_rodape da compra).
   ===================================================================== */
.modal-footer :is(button, a):is([data-bs-dismiss="modal"], [onclick*="fechar" i], [id^="fechar_modal" i], [id^="btn_fechar" i]) {
    order: 99;
    margin-right: 0 !important;
}

.modal-footer > :has(> :is([data-bs-dismiss="modal"], [onclick*="fechar" i], [id^="fechar_modal" i], [id^="btn_fechar" i]):only-child) {
    order: 99;
    margin-right: 0 !important;
}

/* Fechar reconhecido também pelo ícone (X) */
.modal-footer :is(button, a):has(> .fa-times) {
    order: 99;
    margin-right: 0 !important;
}

/* Grupo dentro do rodapé que tem o Fechar: vira flex para o order valer também lá dentro */
.modal-footer > div:has(> :is(button, a):is([data-bs-dismiss="modal"], [onclick*="fechar" i], [id^="fechar_modal" i], [id^="btn_fechar" i])),
.modal-footer > div:has(> :is(button, a) > .fa-times) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

/* Cabeçalho das listagens: Adicionar e, por último, Voltar (sempre o mais à direita)
   (reconhecidos pelo ícone: plus-circle e seta para a esquerda) */
.card-header :is(.d-flex, .card-tools) > :is(a, button):has(> .fa-arrow-left) {
    order: 100;
}

.card-header :is(.d-flex, .card-tools) > :is(a, button):has(> .fa-plus-circle) {
    order: 99;
}

/* Descrição do chamado impresso (HTML do editor): imagens e tabelas não estouram a folha */
.doc-texto-rico img {
    max-width: 100%;
    height: auto;
}

.doc-texto-rico table {
    width: 100%;
}

.doc-texto-rico p:last-child {
    margin-bottom: 0;
}

/* X do cabeçalho sempre no final, mesmo quando o cabeçalho tem botões (Imprimir etc.) depois dele no HTML */
.modal-header > .btn-close {
    order: 99;
}

/* Ícone do título (chamado, compra...): Font Awesome num quadrado discreto no lugar dos PNGs antigos */
.icone-titulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .55rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

/* Fora do cabeçalho escuro (card, listagem) o quadrado vai na cor do tema */
:not(.modal-header) > .icone-titulo,
.card .icone-titulo {
    background: var(--tema-verde-suave);
    border-color: transparent;
    color: var(--tema-verde);
}

.modal-header .icone-titulo,
.modal-header .modal-title .icone-titulo {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

/* =====================================================================
   Cabeçalho dos modais e cards escuros na cor da marca
   ---------------------------------------------------------------------
   As telas usam "modal-header bg-dark text-white" (quase 300 modais):
   ganham o mesmo cabeçalho do Bridge (.modal-header-tema) sem mexer em
   cada view. O bg-dark do Bootstrap tem !important, por isso aqui também.
   ===================================================================== */
.modal-header-tema,
.modal-content > .modal-header.bg-dark,
.modal-content > form > .modal-header.bg-dark {
    background-color: var(--tema-verde) !important;
    border-bottom: 3px solid var(--tema-verde-claro);
    color: #fff;
}

    .modal-content > .modal-header.bg-dark .btn-close,
    .modal-header-tema .btn-close {
        filter: invert(1) grayscale(1) brightness(2);
    }

    /* Textos text-success/text-danger no título continuam legíveis sobre o verde */
    .modal-content > .modal-header.bg-dark .modal-title.text-success,
    .modal-content > .modal-header.bg-dark .modal-title.text-danger {
        color: #fff !important;
    }

/* Registro cancelado, recusado ou reprovado: cabeçalho vermelho no lugar do verde (StatusCabecalho.cs).
   :has porque os cabeçalhos de chamado e compra são parciais recarregadas dentro do modal-header:
   a cor acompanha a troca de status sem reabrir o modal */
.modal-content .modal-header.bg-dark.status-negativo,
.modal-content .modal-header.bg-dark:has(.status-negativo) {
    background-color: #B10D0E !important;
    border-bottom-color: #ff8a80;
}

    /* O badge vermelho sumiria sobre o fundo vermelho */
    .modal-content .modal-header.bg-dark.status-negativo .badge.text-bg-danger,
    .modal-content .modal-header.bg-dark:has(.status-negativo) .badge.text-bg-danger {
        background-color: #fff !important;
        color: #B10D0E !important;
    }

/* Sem overflow: hidden no modal-content: ele recortava listas que passam da altura do modal (select2 com
   dropdownParent dentro do modal, ex.: Adicionar Atendente). Os cantos ficam no cabeçalho e no rodapé */
.modal-content {
    border-radius: var(--tema-raio);
}

    .modal-content > .modal-header:first-child {
        border-top-left-radius: var(--tema-raio);
        border-top-right-radius: var(--tema-raio);
    }

    .modal-content > .modal-footer:last-child,
    .modal-content > .modal-body:last-child {
        border-bottom-left-radius: var(--tema-raio);
        border-bottom-right-radius: var(--tema-raio);
    }

/* =====================================================================
   Tabelas: estados das linhas, totais e detalhe (complementa o .tabela-admin)
   ---------------------------------------------------------------------
   .linha-inativa   registro inativo (barra vermelha suave à esquerda)
   .linha-cancelada / table-danger  cancelado, reprovado, vencido
   table-success    concluído / aprovado
   table-warning    atenção (atrasado, pendente)
   ===================================================================== */
.tabela-admin > tbody > tr.linha-inativa > td {
    color: #8a6d70;
    background-color: #fdf1f2;
}

    .tabela-admin > tbody > tr.linha-inativa > td:first-child {
        border-left-color: #e4a3aa;
    }

.tabela-admin.table-hover > tbody > tr.linha-inativa:hover > td {
    background-color: #fbe6e8;
}

.tabela-admin > tbody > tr.linha-cancelada {
    --tabela-estado-cor: #dc3545;
    --tabela-estado-fundo: #f8d7da;
    --bs-table-hover-bg: #f1c2c7;
}

    .tabela-admin > tbody > tr.linha-cancelada > td {
        border-color: #f1b0b7 !important;
    }

        .tabela-admin > tbody > tr.linha-cancelada > td:first-child {
            border-left-width: 5px;
        }

.tabela-admin > tbody > tr.table-success {
    --tabela-estado-cor: #4caf50;
    --tabela-estado-fundo: #f2f9f4;
    --bs-table-hover-bg: #e4f3e8;
}

.tabela-admin > tbody > tr.table-warning {
    --tabela-estado-cor: #fd7e14;
    --tabela-estado-fundo: #fff7ef;
    --bs-table-hover-bg: #ffecd9;
}

    .tabela-admin > tbody > tr:is(.linha-cancelada, .table-success, .table-warning) > td {
        --bs-table-color: var(--tema-texto);
        --bs-table-hover-color: var(--tema-texto);
        color: var(--tema-texto);
        background-color: var(--tabela-estado-fundo) !important;
        border-color: #eef1ef;
    }

        .tabela-admin > tbody > tr:is(.linha-cancelada, .table-success, .table-warning) > td:first-child {
            border-left-color: var(--tabela-estado-cor);
        }

/* Totais (tfoot) no verde suave */
.tabela-admin > tfoot > tr > td,
.tabela-admin > tfoot > tr > th {
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde-escuro);
    font-weight: 600;
    border-left: 0;
    border-right: 0;
    border-color: var(--tema-verde-borda);
    vertical-align: middle;
}

/* Detalhe (table-sm): mesmo cabeçalho, mais baixo */
.tabela-admin.table-sm > thead > tr > th {
    font-size: .72rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
    min-width: 0;
}

/* Tabela dentro de card/área que já tem moldura não leva outra */
.card-body.p-0 > .tabela-admin,
.card-body.p-0 > .table-responsive > .tabela-admin,
.modal-body > .table-responsive > .tabela-admin.tabela-sem-moldura,
.tabela-admin.tabela-sem-moldura {
    border: 0;
    border-radius: 0;
}

/* text-danger na linha (cancelado) não chegava na célula: o Bootstrap pinta o td com --bs-table-color */
.tabela-admin > tbody > tr.text-danger > td {
    color: var(--bs-danger) !important;
}

/* Chave/valor do detalhe: rótulo à esquerda sem quebrar, valor quebra */
.tabela-chave-valor > tbody > tr > td:first-child,
.tabela-chave-valor > tbody > tr > th:first-child {
    width: 1%;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.tabela-chave-valor > tbody > tr > td:last-child {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-nome {
    font-weight: 600;
    color: var(--tema-texto);
}

.admin-sub {
    font-size: .8rem;
    color: #6c757d;
}

/* Linhas que abrem o modal ao clicar (linha-abre-modal.js) */
.linha-abre-modal {
    cursor: pointer;
}

/* Hover das linhas e cartões clicáveis (chamados, compras, cadastros): faixa verde à esquerda e um pulso curto
   ao entrar com o mouse. Nas tabelas o tom vai no box-shadow do td, porque o table-hover do Bootstrap pinta por cima do fundo */
@keyframes linha-pulso {
    0% {
        box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tema-verde) 20%, transparent);
    }

    100% {
        box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tema-verde) 6%, transparent);
    }
}

@keyframes cartao-pulso {
    0% {
        box-shadow: inset 4px 0 0 var(--tema-verde), inset 0 0 0 2px color-mix(in srgb, var(--tema-verde) 45%, transparent);
    }

    100% {
        box-shadow: inset 4px 0 0 var(--tema-verde), inset 0 0 0 2px transparent;
    }
}

.table > tbody > tr.linha-abre-modal:hover > td {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--tema-verde) 6%, transparent);
    animation: linha-pulso .8s ease-out;
}

.table > tbody > tr.linha-abre-modal:hover > td:first-child {
    background-image: linear-gradient(var(--tema-verde), var(--tema-verde));
    background-size: 4px 100%;
    background-repeat: no-repeat;
}

.compra-resumo-card.linha-abre-modal {
    transition: background-color .2s ease;
}

    .compra-resumo-card.linha-abre-modal:hover {
        background-color: color-mix(in srgb, var(--tema-verde) 6%, transparent);
        box-shadow: inset 4px 0 0 var(--tema-verde);
        animation: cartao-pulso .9s ease-out;
    }

@media (prefers-reduced-motion: reduce) {
    .table > tbody > tr.linha-abre-modal:hover > td,
    .compra-resumo-card.linha-abre-modal:hover {
        animation: none;
    }
}

/* =====================================================================
   Apollo Study: reprodução, avaliação do material e prova
   ===================================================================== */
.study-descricao {
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

    .study-descricao > :last-child {
        margin-bottom: 0;
    }

    .study-descricao img {
        max-width: 100%;
        height: auto;
    }

/* Celular: player em cima e lista embaixo. Computador: lista à esquerda (bloco no fim do arquivo de media) */
.study-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.study-player {
    overflow: hidden;
    border-radius: var(--tema-raio);
    background-color: #000;
}

.study-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    background-color: #000;
}

.study-player-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 0;
}

.study-lista {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .study-lista .study-lista {
        margin-top: .4rem;
        padding-left: 1rem;
    }

.study-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
    text-decoration: none;
}

    .study-item:hover {
        border-color: var(--tema-verde-medio);
        color: var(--bs-body-color);
    }

    .study-item.ativo {
        border-color: var(--tema-verde);
        background-color: var(--tema-verde-suave);
    }

.study-item-icone {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: .5rem;
    background-color: var(--tema-verde);
    color: #fff;
}

.study-item-texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: .15rem;
    overflow-wrap: anywhere;
}

    .study-item-texto strong {
        font-size: .9rem;
        font-weight: 600;
    }

    .study-item-texto small {
        color: var(--bs-secondary-color);
    }

.study-item-progresso {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .study-item-progresso .progress {
        flex: 1 1 auto;
        height: .35rem;
    }

    .study-item-progresso .progress-bar {
        background-color: var(--tema-verde);
    }

.study-avaliacao {
    margin-top: .5rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
}

.study-criterio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    padding: .25rem 0;
}

.study-estrela {
    padding: .25rem;
    border: 0;
    background: none;
    color: var(--bs-border-color);
    font-size: 1.35rem;
    line-height: 1;
}

    .study-estrela.marcada {
        color: #f5b301;
    }

/* Prova: a tela não tem o layout de propósito */
.study-prova {
    max-width: 960px;
    margin: 0 auto;
    padding: calc(.75rem + env(safe-area-inset-top, 0px)) .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--bs-tertiary-bg);
}

.study-prova-dados {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

    .study-prova-dados strong {
        color: var(--bs-body-color);
    }

.study-questao {
    margin-bottom: 1.25rem;
}

.study-questao-titulo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-bottom: .6rem;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

/* A alternativa inteira é clicável, o que ajuda no celular */
.study-opcao {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .4rem;
    padding: .65rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
    background-color: var(--bs-body-bg);
    font-weight: 400;
    cursor: pointer;
    overflow-wrap: anywhere;
}

    .study-opcao:has(input:checked) {
        border-color: var(--tema-verde);
        background-color: var(--tema-verde-suave);
    }

    .study-opcao .form-check-input {
        flex: 0 0 auto;
        margin-top: .15rem;
    }

.small-box.study-indicador {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

@media (min-width: 992px) {
    .study-layout {
        grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr);
    }

    .study-materiais {
        order: -1;
    }
}

/* Área sendo recarregada pelo AtualizarTela() (atualizar-tela.js) */
.area-atualizando {
    opacity: .55;
    pointer-events: none;
    transition: opacity .2s;
}

@media (max-width: 767.98px) {
    .tabela-admin.tabela-mobile {
        border: 0;
        border-radius: 0;
    }

        .tabela-admin.tabela-mobile > tbody > tr > td:first-child {
            border-left: 0;
        }

        .tabela-admin.tabela-mobile > tbody > tr.linha-inativa {
            border-left: 4px solid #e4a3aa;
            background-color: #fdf1f2;
        }

        .tabela-admin.tabela-mobile > tbody > tr.table-danger {
            border-left: 5px solid #dc3545;
            background-color: #f8d7da;
        }

        .tabela-admin.tabela-mobile > tbody > tr:is(.linha-cancelada, .table-success, .table-warning) {
            border-left: 4px solid var(--tabela-estado-cor);
            background-color: var(--tabela-estado-fundo);
        }
}

/* =====================================================================
   Chips (vínculos, contadores, empresas do chamado)
   ===================================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .2em .6em;
    margin: .15rem .15rem 0 0;
    border-radius: 20px;
    border: 1px solid var(--tema-verde-borda);
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde-escuro);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

    .chip i {
        font-size: .9em;
        opacity: .8;
    }

.chip-neutro {
    border-color: #dfe3e1;
    background-color: #f4f6f5;
    color: #495057;
}

/* Atendentes nas listas de chamados (Atividade e UserPlace) */
.avatares-atendentes {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.avatar-atendente {
    position: relative;
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: .68rem;
    cursor: help;
}

.avatar-atendente .avatar-entregue {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
}

.chip-vazio {
    border-style: dashed;
    border-color: #ced4da;
    background-color: transparent;
    color: #8a918d;
}

.chip-perigo {
    border-color: #f1b0b7;
    background-color: #fdeaea;
    color: #b02a37;
}

a.chip,
button.chip {
    cursor: pointer;
    text-decoration: none;
}

    a.chip:hover,
    button.chip:hover {
        border-color: var(--tema-verde);
        background-color: var(--tema-verde-suave-hover);
    }

.chips-linha {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .15rem;
}

    .chips-linha .chip {
        margin: 0;
    }

/* Chip compacto (mesmo do Bridge): só ícone/código; o texto (.chip-rotulo) abre ao passar o mouse
   e, no celular, ao tocar (linha-abre-modal.js) */
.chip-compacto {
    cursor: pointer;
    user-select: none;
}

    .chip-compacto .chip-rotulo {
        display: none;
    }

    .chip-compacto:hover .chip-rotulo,
    .chip-compacto.chip-aberto .chip-rotulo {
        display: inline;
    }

    .chip-compacto:hover,
    .chip-compacto.chip-aberto {
        white-space: normal;
    }

/* =====================================================================
   Avisos dentro de modal (inativar, excluir, cancelar...)
   ===================================================================== */
.alerta-acao {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e3e7e5;
    border-left: 5px solid var(--tema-verde);
    border-radius: var(--tema-raio);
    background-color: #fff;
    font-weight: 500;
}

    .alerta-acao > i {
        font-size: 1.25rem;
        margin-top: .1rem;
        color: var(--tema-verde);
    }

.alerta-acao-perigo {
    border-left-color: #dc3545;
    background-color: #fdf3f4;
}

    .alerta-acao-perigo > i {
        color: #dc3545;
    }

.alerta-acao-aviso {
    border-left-color: #f0ad00;
    background-color: #fff9e6;
}

    .alerta-acao-aviso > i {
        color: #c98f00;
    }

/* =====================================================================
   Toggle switch e formulários
   ===================================================================== */
.form-switch .form-check-input,
.form-switch .form-check-label {
    cursor: pointer;
}

    .form-switch .form-check-input:disabled,
    .form-switch .form-check-input:disabled ~ .form-check-label {
        cursor: not-allowed;
    }

/* Mensagem do Swal sem botão (sucesso que fecha sozinho): mesmo respiro em cima e embaixo */
.swal2-popup:has(> .swal2-actions[style*="none"]) {
    padding-bottom: 2rem;
}

/* =====================================================================
   Carregamento ao trocar de página (carregando-pagina.js)
   Barra no topo + camada leve com o cartão "Carregando... / Só um minutinho"
   ===================================================================== */
.carregando-barra {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 0;
    height: 4px;
    opacity: 0;
    background-color: var(--tema-verde-medio);
    box-shadow: 0 0 6px rgba(var(--tema-verde-medio-rgb), .55);
    pointer-events: none;
}

    .carregando-barra.ativa {
        opacity: 1;
        animation: carregando-avanco 8s cubic-bezier(.1, .6, .2, 1) forwards;
    }

    .carregando-barra.concluida {
        width: 100%;
        opacity: 0;
        animation: none;
        transition: width .2s, opacity .3s .2s;
    }

@keyframes carregando-avanco {
    0% { width: 0; }
    20% { width: 45%; }
    60% { width: 75%; }
    100% { width: 92%; }
}

.carregando-camada {
    position: fixed;
    inset: 0;
    z-index: 1990;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}

    .carregando-camada.ativa {
        opacity: 1;
        visibility: visible;
    }

.carregando-caixa {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    border: 1px solid var(--tema-verde-borda);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    color: var(--tema-verde-escuro);
    font-size: 1.2rem;
    font-weight: 600;
}

    .carregando-caixa .spinner-border {
        width: 2.4rem;
        height: 2.4rem;
        border-width: .25rem;
        color: var(--tema-verde);
    }

    .carregando-caixa small {
        display: block;
        font-size: .9rem;
        font-weight: 400;
        color: #6c757d;
    }

/* Carregando dentro do modal (_ModalCarregando / _Carregando) */
.carregando-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2rem 1rem;
    color: var(--tema-verde-escuro);
    font-weight: 600;
    text-align: center;
}

    .carregando-modal .spinner-border {
        width: 2.4rem;
        height: 2.4rem;
        color: var(--tema-verde);
    }

    .carregando-modal small {
        font-weight: 400;
        color: #6c757d;
    }

/* =====================================================================
   Filtros recolhíveis das listagens (filtros-recolhiveis.js)
   ---------------------------------------------------------------------
   Botão "Filtros" no cabeçalho do card com a quantidade de filtros ativos.
   Clicar coloca .filtros-recolhidos no pai das linhas .filtros e esconde todas.
   ===================================================================== */
.filtros .btn {
    white-space: nowrap;
}

.filtros-botao {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.filtros-botao-qtd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background-color: var(--tema-verde);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

    .filtros-botao:hover .filtros-botao-qtd,
    .filtros-botao:active .filtros-botao-qtd {
        background-color: #fff;
        color: var(--tema-verde);
    }

.filtros-seta {
    font-size: .8em;
    transition: transform .15s ease;
}

.filtros-botao[aria-expanded="true"] .filtros-seta {
    transform: rotate(180deg);
}

.filtros-recolhidos > .row.filtros {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .filtros-seta {
        transition: none;
    }
}

/* =====================================================================
   Impressão (Exportar PDF) — mesmo esquema do Bridge
   ---------------------------------------------------------------------
   Cada tela monta o documento num <template>; o impressao-documento.js
   joga ele no #areaImpressao (filho direto do body), põe .imprimindo no
   body e chama o print. Na impressão todo o resto some.
   Unidades em pt/mm para o tamanho bater no papel A4.
   ===================================================================== */
#areaImpressao {
    display: none;
}

@media print {

    body.imprimindo > *:not(#areaImpressao) {
        display: none !important;
    }

    body.imprimindo #areaImpressao {
        display: block !important;
        overflow: visible !important;
    }

    /* Modal aberto trava html/body em 100% com overflow hidden: no papel cortava na primeira folha */
    html.swal2-shown,
    html.swal2-height-auto,
    body.imprimindo {
        height: auto !important;
        overflow: visible !important;
    }

    /* Sem isso o navegador tira os fundos (cabeçalho das tabelas, selos) */
    #areaImpressao,
    #areaImpressao * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #areaImpressao table {
        page-break-inside: auto;
    }

    #areaImpressao tr {
        page-break-inside: avoid;
    }

    #areaImpressao thead {
        display: table-header-group;
    }

    .d-print-none {
        display: none !important;
    }

    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    @page documento {
        size: A4 portrait;
        margin: 9mm 10mm;
    }
}

.doc-folha {
    page: documento;
    --doc-cor: #3d4a5c;
    --doc-borda: #d5dae1;
    --doc-fundo: #f3f5f8;
    --doc-texto-2: #6b7480;
    color: #1f2933;
    font-size: 8pt;
    line-height: 1.35;
}

    .doc-folha .doc-rotulo {
        display: block;
        font-size: 6.5pt;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--doc-texto-2);
    }

    .doc-folha .doc-sub {
        font-size: 7.5pt;
        color: var(--doc-texto-2);
    }

    .doc-folha .doc-bloco {
        margin-bottom: 3mm;
    }

/* Topo: empresa/título à esquerda, número do documento à direita */
.doc-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6mm;
    padding-bottom: 3mm;
    border-bottom: 2.5pt solid var(--doc-cor);
    margin-bottom: 3mm;
}

    .doc-topo .doc-empresa {
        font-size: 14pt;
        font-weight: 700;
        color: var(--doc-cor);
    }

    .doc-topo .doc-logo {
        max-height: 12mm;
        max-width: 45mm;
        margin-bottom: 1mm;
    }

.doc-identificacao {
    text-align: right;
}

    .doc-identificacao .doc-numero {
        font-size: 16pt;
        font-weight: 700;
        line-height: 1.1;
    }

.doc-status {
    display: inline-block;
    margin-top: 1mm;
    padding: .4mm 2.5mm;
    border-radius: 10pt;
    border: 1px solid var(--doc-borda);
    background: var(--doc-fundo);
    font-size: 7pt;
    font-weight: 600;
}

/* Faixa de dados (fundo cinza). .doc-faixa = mesma grade só com borda */
.doc-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2mm 4mm;
    padding: 2.5mm 3mm;
    background: var(--doc-fundo);
    border-radius: 2mm;
    margin-bottom: 3mm;
}

    .doc-info .doc-info-larga {
        grid-column: span 2;
    }

    .doc-info .doc-info-toda {
        grid-column: 1 / -1;
    }

.doc-faixa {
    background: transparent;
    border: 1px solid var(--doc-borda);
}

/* Indicadores em destaque (totais) */
.doc-resumo {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 2.5mm;
    margin-bottom: 3mm;
}

.doc-kpi {
    border: 1px solid var(--doc-borda);
    border-top: 2pt solid var(--doc-cor);
    border-radius: 1.5mm;
    padding: 1.8mm 2.5mm;
}

    .doc-kpi .doc-kpi-valor {
        font-size: 11pt;
        font-weight: 700;
        line-height: 1.2;
    }

.doc-aviso {
    padding: 1.5mm 3mm;
    margin-bottom: 3mm;
    border-left: 2pt solid #e0a800;
    background: #fff8e1;
}

/* Caixas lado a lado (fornecedor, solicitante, entrega...) */
.doc-partes {
    display: flex;
    gap: 3mm;
    margin-bottom: 3mm;
}

    .doc-partes .doc-caixa {
        flex: 1 1 0;
    }

.doc-caixa {
    border: 1px solid var(--doc-borda);
    border-radius: 2mm;
    padding: 2mm 3mm;
    margin-bottom: 3mm;
}

.doc-partes .doc-caixa {
    margin-bottom: 0;
}

    .doc-caixa .doc-caixa-titulo {
        font-size: 6.5pt;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--doc-cor);
        margin-bottom: .8mm;
    }

    .doc-caixa .doc-destaque {
        font-weight: 600;
    }

/* Tabela de itens */
.doc-itens {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 3mm;
}

    .doc-itens th {
        background: var(--doc-cor);
        color: #fff;
        font-size: 6.5pt;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        padding: 1.5mm;
        text-align: left;
        overflow-wrap: normal;
        word-break: normal;
        vertical-align: bottom;
    }

    .doc-itens td {
        padding: 1.3mm 1.5mm;
        border-bottom: 1px solid var(--doc-borda);
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .doc-itens tbody tr:nth-child(even) td {
        background: var(--doc-fundo);
    }

    .doc-itens tfoot td {
        font-weight: 700;
        border-top: 1.5pt solid var(--doc-cor);
        border-bottom: 0;
    }

    .doc-itens .doc-col-num {
        width: 6mm;
        text-align: center;
        color: var(--doc-texto-2);
    }

    .doc-itens .doc-num {
        text-align: right;
    }

    .doc-itens td.doc-num,
    .doc-itens td.doc-centro {
        white-space: nowrap;
    }

    .doc-itens .doc-centro {
        text-align: center;
    }

    .doc-itens .doc-w-13 { width: 13mm; }
    .doc-itens .doc-w-16 { width: 16mm; }
    .doc-itens .doc-w-20 { width: 20mm; }
    .doc-itens .doc-w-24 { width: 24mm; }
    .doc-itens .doc-w-30 { width: 30mm; }

    .doc-itens .doc-linha-cancelada td {
        color: var(--doc-texto-2);
        text-decoration: line-through;
    }

.doc-produto {
    font-weight: 600;
}

.doc-produto-detalhe {
    font-size: 7pt;
    color: var(--doc-texto-2);
}

.doc-forte {
    font-weight: 700;
}

.doc-negativo {
    color: #c0392b;
}

.doc-positivo {
    color: #1e7e34;
}

/* Bloco de seção (orçamentos, aprovações, anexos) */
.doc-secao {
    border: 1px solid var(--doc-borda);
    border-radius: 2mm;
    margin-bottom: 3mm;
    overflow: hidden;
    break-inside: avoid;
}

    .doc-secao .doc-itens {
        margin-bottom: 0;
    }

.doc-secao-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1mm 5mm;
    padding: 1.8mm 3mm;
    background: var(--doc-fundo);
    border-bottom: 1px solid var(--doc-borda);
}

    .doc-secao-cabecalho .doc-secao-numero {
        font-size: 9.5pt;
        font-weight: 700;
    }

.doc-secao-obs {
    padding: 1.5mm 3mm;
    border-top: 1px solid var(--doc-borda);
    font-size: 7pt;
    color: var(--doc-texto-2);
}

/* Observações à esquerda, totais à direita */
.doc-fechamento {
    display: flex;
    gap: 5mm;
    align-items: flex-start;
    justify-content: space-between;
    break-inside: avoid;
}

.doc-observacoes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2mm;
}

.doc-totais {
    flex: 0 0 72mm;
    width: 72mm;
    border-collapse: collapse;
}

    .doc-totais td {
        padding: .9mm 0;
        border-bottom: 1px dotted var(--doc-borda);
    }

        .doc-totais td:last-child {
            text-align: right;
            white-space: nowrap;
        }

    .doc-totais .doc-total-final td {
        background: var(--doc-cor);
        color: #fff;
        font-size: 10.5pt;
        font-weight: 700;
        padding: 2mm 3mm;
        border: 0;
    }

/* Assinaturas (aprovador, comprador, recebedor) */
.doc-assinaturas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8mm;
    margin-top: 12mm;
    break-inside: avoid;
}

    .doc-assinaturas > div {
        padding-top: 1.5mm;
        border-top: 1px solid #1f2933;
        text-align: center;
        font-size: 7pt;
    }

.doc-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: 5mm;
    padding-top: 1.5mm;
    border-top: 1px solid var(--doc-borda);
    font-size: 6.5pt;
    color: var(--doc-texto-2);
}
/* Spinner do SweetAlert (telas que ainda usam Swal.showLoading) na cor da marca */
.swal2-popup .swal2-loader {
    border-color: var(--tema-verde) transparent var(--tema-verde) transparent;
}

/* =====================================================================
   Compras (Apollo Buy): resumo da linha e etapas do fluxo
   (_BuyApolloResumoLinha / _BuyApolloEtapas)
   ===================================================================== */
.compra-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.compra-resumo-principal {
    flex: 1 1 320px;
    min-width: 0;
}

.compra-resumo-titulo {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.compra-resumo-numero {
    display: inline-block;
    margin-right: .35rem;
    padding: .05rem .45rem;
    border-radius: 6px;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde-escuro);
    font-size: .85rem;
    white-space: nowrap;
}

/* Nome longo (fornecedor, investimento) quebra linha dentro do chip, sem cortar */
.compra-resumo .chip {
    white-space: normal;
}

/* Rótulo antes do valor (Solicitante:, Comprador:...), mais leve para o valor se destacar */
.compra-rotulo {
    font-weight: 400;
    opacity: .75;
}

/* Com os detalhes abertos, centro de custo, HPS e investimento ficam só no bloco de detalhes */
.card:has(> .compra-detalhe:not(.d-none)) .compra-resumo-classificacao {
    display: none;
}

.compra-detalhe-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .6rem 1rem;
    padding: .75rem 1rem;
    font-size: .85rem;
    overflow-wrap: anywhere;
}

    .compra-detalhe-info strong {
        font-weight: 600;
    }

/* Quatro colunas no computador, duas no celular (mobile-app.css) */
@media (min-width: 992px) {
    .compra-detalhe-info {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A faixa de próxima ação já diz que é a vez do usuário */
.card:has(> .compra-proxima) .compra-chip-sua-vez {
    display: none;
}

/* Próxima ação: azul quando é de outra pessoa; laranja quando o botão apareceu para o usuário.
   Fundo translúcido para servir no tema claro e no escuro */
.compra-proxima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 1rem;
    background-color: rgba(31, 78, 121, .1);
}

.compra-proxima-sua {
    display: none;
}

.compra-proxima-acoes {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: .35rem;
}

.compra-proxima:has(.compra-proxima-acoes .btn:not(.d-none)) {
    background-color: rgba(194, 87, 12, .14);
}

    .compra-proxima:has(.compra-proxima-acoes .btn:not(.d-none)) .compra-proxima-sua {
        display: inline;
    }

    .compra-proxima:has(.compra-proxima-acoes .btn:not(.d-none)) .compra-proxima-outro {
        display: none;
    }

/* Barra de ações do card */
.compra-acoes-barra {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

    .compra-acoes-barra > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem;
    }

/* Barra de progresso do celular, no lugar da trilha de etapas */
.compra-progresso-barra {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--bs-border-color);
}

    .compra-progresso-barra > i {
        display: block;
        height: 100%;
        background-color: var(--tema-verde);
    }

.compra-progresso-erro .compra-progresso-barra > i {
    background-color: #dc3545;
}

.compra-resumo-lateral {
    flex: 0 0 auto;
    text-align: right;
}

.compra-resumo-valor {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tema-verde-escuro);
    white-space: nowrap;
}

.compra-resumo-status .badge {
    margin-top: .3rem;
    padding: .45em .7em;
    font-size: .8rem;
    white-space: normal;
    text-align: right;
}

.compra-resumo-etapas {
    margin-top: .6rem;
}

.compra-resumo-card {
    padding: .75rem .85rem;
    border-bottom: 1px solid #eef1ef;
}

.compra-etapas {
    display: flex;
    align-items: flex-start;
    margin: 0;
    /* Respiro em cima: o overflow-x também recorta na vertical e cortava o anel (box-shadow) do passo atual */
    padding: 6px 2px .25rem;
    list-style: none;
    overflow-x: auto;
}

    .compra-etapas .etapa {
        position: relative;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        min-width: 66px;
        color: #8a918d;
        font-size: .72rem;
        text-align: center;
    }

        /* Linha que liga uma etapa à anterior */
        .compra-etapas .etapa + .etapa::before {
            content: "";
            position: absolute;
            top: 11px;
            right: 50%;
            width: 100%;
            height: 2px;
            background-color: #dfe3e1;
        }

    .compra-etapas .etapa-marca {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 2px solid #dfe3e1;
        border-radius: 50%;
        background-color: #fff;
        font-size: .7rem;
        font-weight: 700;
    }

    .compra-etapas .etapa-nome {
        margin-top: .2rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .compra-etapas .etapa-concluida {
        color: var(--tema-verde-escuro);
    }

        .compra-etapas .etapa-concluida .etapa-marca {
            border-color: var(--tema-verde);
            background-color: var(--tema-verde);
            color: #fff;
        }

    .compra-etapas .etapa-concluida + .etapa::before {
        background-color: var(--tema-verde);
    }

    .compra-etapas .etapa-atual {
        color: #b35900;
    }

        .compra-etapas .etapa-atual .etapa-marca {
            border-color: #fd7e14;
            color: #b35900;
            box-shadow: 0 0 0 4px rgba(253, 126, 20, .18);
        }

        .compra-etapas .etapa-atual .etapa-nome,
        .compra-etapas .etapa-erro .etapa-nome {
            font-weight: 700;
        }

    .compra-etapas .etapa-erro {
        color: #b02a37;
    }

        .compra-etapas .etapa-erro .etapa-marca {
            border-color: #dc3545;
            background-color: #dc3545;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(220, 53, 69, .15);
        }

.compra-etapas-cancelada .etapa {
    opacity: .55;
    text-decoration: line-through;
}

    /* O passo "Cancelada" fica legível; os anteriores, riscados */
    .compra-etapas-cancelada .etapa-erro {
        opacity: 1;
        text-decoration: none;
    }

/* Fluxo pelos status: rolagem discreta, status atual já concluído (aprovado/finalizado), recolhidos, data e nota */
.compra-etapas {
    scrollbar-width: thin;
}

    .compra-etapas::-webkit-scrollbar {
        height: 4px;
    }

    .compra-etapas::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, .4);
        border-radius: 4px;
    }

    .compra-etapas .etapa-concluida.etapa-atual {
        color: var(--tema-verde-escuro);
    }

        .compra-etapas .etapa-concluida.etapa-atual .etapa-marca {
            border-color: var(--tema-verde);
            color: #fff;
            box-shadow: 0 0 0 4px rgba(25, 135, 84, .2);
        }

    .compra-etapas .etapa-concluida.etapa-atual .etapa-nome,
    .compra-etapas .etapa-recolhida .etapa-nome {
        font-weight: 700;
    }

    .compra-etapas .etapa-recolhida {
        flex: 0 0 auto;
        min-width: 44px;
    }

    .compra-etapas .etapa-data,
    .compra-etapas .etapa-nota {
        font-size: .68rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .compra-etapas .etapa-data {
        font-weight: 400;
        opacity: .85;
    }

    .compra-etapas .etapa-nota {
        font-weight: 600;
    }

.compra-etapas-completas .etapa {
    min-width: 88px;
}

/* Mínimo (visão simplificada): bolinhas de 10px ligadas por uma linha fina */
.compra-etapas-minimo {
    justify-content: center;
    margin-top: .35rem;
    padding: 4px 2px;
}

    .compra-etapas-minimo .etapa {
        flex: 0 0 auto;
        min-width: 14px;
    }

        .compra-etapas-minimo .etapa + .etapa::before {
            top: 4px;
            height: 2px;
        }

    .compra-etapas-minimo .etapa-marca {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    .compra-etapas-minimo .etapa-atual .etapa-marca,
    .compra-etapas-minimo .etapa-erro .etapa-marca,
    .compra-etapas-minimo .etapa-concluida.etapa-atual .etapa-marca {
        width: 12px;
        height: 12px;
        margin-top: -1px;
        box-shadow: 0 0 0 3px rgba(253, 126, 20, .2);
    }

    .compra-etapas-minimo .etapa-atual .etapa-marca {
        background-color: #fd7e14;
    }

    .compra-etapas-minimo .etapa-concluida.etapa-atual .etapa-marca {
        background-color: var(--tema-verde);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, .2);
    }

    .compra-etapas-minimo .etapa-erro .etapa-marca {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, .2);
    }

    .compra-etapas-minimo.compra-etapas-cancelada .etapa {
        text-decoration: none;
    }

/* Cabeçalho flex: o clearfix (::after) do AdminLTE vira um terceiro item e, com justify-content-between,
   empurrava o bloco da direita para o meio (ex.: Retrair dos orçamentos) */
.card-header.d-flex::after {
    content: none;
}

/* Cabeçalho escuro do modal da compra */
.compra-etapas-escuro {
    margin-top: .5rem;
}

    .compra-etapas-escuro .etapa {
        color: rgba(255, 255, 255, .7);
    }

    .compra-etapas-escuro .etapa-marca {
        border-color: rgba(255, 255, 255, .4);
        background-color: transparent;
    }

    .compra-etapas-escuro .etapa:not(.etapa-concluida) + .etapa::before {
        background-color: rgba(255, 255, 255, .25);
    }

    .compra-etapas-escuro .etapa-concluida {
        color: #9fe0b5;
    }

    .compra-etapas-escuro .etapa-atual {
        color: #ffc48a;
    }

    .compra-etapas-escuro .etapa-erro {
        color: #ff9aa3;
    }

        .compra-etapas-escuro .etapa-atual .etapa-marca {
            color: #ffc48a;
        }

    .compra-etapas-escuro .etapa-concluida.etapa-atual {
        color: #9fe0b5;
    }

/* Orçamentos no modal da compra: cabeçalho com respiro (checkbox, ícone, valor e contador), itens e ações espaçados */
.orcamento-cabecalho {
    padding: .65rem .85rem;
}

    .orcamento-cabecalho .card-title {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem .6rem;
        margin: 0;
        line-height: 1.35;
    }

    .orcamento-cabecalho .form-check {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        padding-left: 0;
    }

        .orcamento-cabecalho .form-check .form-check-input {
            float: none;
            margin: 0;
            flex: 0 0 auto;
        }

        .orcamento-cabecalho .form-check-label {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .25rem .5rem;
        }

    .orcamento-cabecalho .fa-file {
        margin-right: .35rem;
    }

    .orcamento-cabecalho .orcamento-ferramentas {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-left: 1rem;
    }

/* Totalizadores da compra no tom do sistema (a base fica no my-styles.css) */
.resumo-compra-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.resumo-card {
    --resumo-cor: var(--tema-verde-medio);
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--resumo-cor);
    border-radius: var(--tema-raio);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}

    .resumo-card:hover {
        transform: none;
    }

    .resumo-card .resumo-icone {
        display: inline-flex;
        flex: 0 0 2.1rem;
        align-items: center;
        justify-content: center;
        height: 2.1rem;
        border-radius: .5rem;
        background-color: color-mix(in srgb, var(--resumo-cor) 14%, transparent);
        color: var(--resumo-cor);
        font-size: .95rem;
        opacity: 1;
    }

    .resumo-card .resumo-label {
        color: var(--bs-secondary-color);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: none;
        opacity: 1;
    }

    .resumo-card .resumo-valor {
        color: var(--bs-emphasis-color);
        font-size: 1.05rem;
        font-variant-numeric: tabular-nums;
    }

    .resumo-card.acento-info {
        --resumo-cor: var(--tema-verde-medio);
        border-left-color: var(--resumo-cor);
    }

    .resumo-card.acento-sucesso {
        --resumo-cor: var(--tema-verde);
        border-left-color: var(--resumo-cor);
    }

    .resumo-card.acento-alerta {
        --resumo-cor: #c98a00;
        border-left-color: var(--resumo-cor);
    }

    .resumo-card.acento-perigo {
        --resumo-cor: #dc3545;
        border-left-color: var(--resumo-cor);
    }

/* Abas de Detalhes, Modificar e Aprovar da compra (compra-abas.js).
   Os dados e o corpo são parciais recarregadas: quem decide o que aparece é o data-compra-aba do container.
   display: contents deixa os totalizadores subirem para cima da barra de abas */
.compra-abas {
    display: flex;
    flex-direction: column;
}

    .compra-abas > .compra-abas-nav {
        order: 1;
        flex-shrink: 0;
        margin-bottom: 1rem;
    }

.compra-abas-info {
    display: contents;
}

    .compra-abas-info > * {
        order: 2;
    }

    .compra-abas-info > #parcial_compra_orcamento_pagamento_totalizador {
        order: 0;
    }

.compra-abas > #parcial_compra_corpo,
.compra-abas > .compra-aba-orcamentos {
    order: 3;
}

.compra-abas > #parcial_print_pedido {
    order: 4;
}

.compra-abas:not([data-compra-aba="dados"]) .compra-aba-dados,
.compra-abas:not([data-compra-aba="produtos"]) .compra-aba-produtos,
.compra-abas:not([data-compra-aba="orcamentos"]) > .compra-aba-orcamentos,
.compra-abas:not([data-compra-aba="corpo"]) > #parcial_compra_corpo {
    display: none;
}

/* Aprovar abre em outra aba: o select2 iniciado em aba escondida ficaria sem largura */
.compra-abas .select2-container {
    width: 100% !important;
}

/* A barra de cima substitui as abas do corpo e os botões de retrair */
.compra-abas #parcial_compra_corpo .card-tabs > .card-header,
.compra-abas .compra-aba-dados > .mb-2.text-end:first-child,
.compra-abas #cardItensSolicitados .card-header .btn:has(.btn-text) {
    display: none;
}

.compra-abas #div_informacao_basica {
    display: flex !important;
}

.compra-abas #div_itens_solicitados {
    display: block !important;
    max-height: none !important;
}

/* Cada orçamento é um cartão separado: sem isso um encostava no outro */
.card:has(> .orcamento-cabecalho) {
    margin-bottom: 1.5rem;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 6px rgba(16, 24, 20, .08);
}

.orcamento_itens .products-list > .item {
    padding: .65rem .5rem;
}

.orcamento_itens .product-info {
    line-height: 1.45;
}

.orcamento_itens .orcamento-item-valores {
    margin: .35rem 0;
}

    .orcamento_itens .orcamento-item-valores .chip {
        font-size: .78rem;
        font-weight: 600;
    }

.orcamento_itens .orcamento-item-acoes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
}

    /* Ações discretas: a cor só aparece ao passar o mouse, os valores ficam em primeiro plano */
    .orcamento_itens .orcamento-item-acoes .btn {
        width: 2rem;
        height: 2rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--bs-border-color);
        border-radius: .45rem;
        background: transparent;
        color: var(--bs-secondary-color);
    }

        .orcamento_itens .orcamento-item-acoes .btn.d-none {
            display: none;
        }

        .orcamento_itens .orcamento-item-acoes .btn:hover,
        .orcamento_itens .orcamento-item-acoes .btn:focus-visible {
            border-color: var(--tema-verde);
            background: var(--tema-verde);
            color: #fff;
        }

        .orcamento_itens .orcamento-item-acoes .btn-danger:hover,
        .orcamento_itens .orcamento-item-acoes .btn-danger:focus-visible {
            border-color: var(--bs-danger);
            background: var(--bs-danger);
        }

/* Itens do orçamento: lista, modais de Adicionar, Modificar, Remover e Observações */
.oi-modal-subtitulo {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    font-weight: 400;
    opacity: .85;
}

.oi-secao {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
}

    .oi-secao:last-child {
        margin-bottom: 0;
    }

    .oi-secao > .mb-3:last-child {
        margin-bottom: 0 !important;
    }

.oi-secao-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

    .oi-secao-titulo i {
        color: var(--tema-verde);
    }

.oi-total-destaque .form-control {
    font-weight: 700;
}

.oi-metricas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.75rem;
}

.oi-metrica {
    display: grid;
    align-content: start;
    justify-items: start;
    min-width: 5rem;
    line-height: 1.3;
}

    .oi-metrica small {
        font-size: .7rem;
        color: var(--bs-secondary-color);
    }

    .oi-metrica strong {
        font-size: .9rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.oi-metrica-total strong {
    font-weight: 700;
    color: var(--tema-verde);
}

.oi-editar-valor {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: -.35rem;
    padding: 0 .35rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .35rem;
    background: none;
    color: inherit;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: text;
}

    .oi-editar-valor i {
        font-size: .65rem;
        color: var(--bs-secondary-color);
    }

    .oi-editar-valor:hover,
    .oi-editar-valor:focus-visible {
        border-color: var(--tema-verde);
        background: var(--tema-verde-suave, var(--bs-tertiary-bg));
    }

.oi-campo-valor {
    width: 7.5rem;
    margin-left: -.35rem;
    padding: 0 .35rem;
    min-height: 0;
    height: 1.5rem;
    font-size: .9rem;
    font-weight: 600;
}

.oi-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.oi-resumo {
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
}

.oi-resumo-produto {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

    .oi-resumo-produto i {
        color: var(--tema-verde);
    }

    /* No cabeçalho verde a bolinha verde sumia: concluída vira bolinha branca com o ✓ na cor do tema,
       a linha percorrida fica branca e os nomes em branco */
    .compra-etapas-escuro .etapa-concluida .etapa-marca,
    .compra-etapas-escuro .etapa-concluida.etapa-atual .etapa-marca {
        background-color: #fff;
        border-color: #fff;
        color: var(--tema-verde);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
    }

    .compra-etapas-escuro .etapa-concluida + .etapa::before {
        background-color: rgba(255, 255, 255, .85);
    }

    .compra-etapas-escuro .etapa-concluida,
    .compra-etapas-escuro .etapa-concluida.etapa-atual {
        color: #fff;
    }

    .compra-etapas-escuro .etapa-atual .etapa-marca {
        background-color: #fff;
        border-color: #fd7e14;
    }

    .compra-etapas-escuro .etapa-erro .etapa-marca {
        background-color: #fff;
        border-color: #dc3545;
        color: #dc3545;
    }

    .compra-etapas-escuro .etapa-data {
        color: rgba(255, 255, 255, .75);
    }

@media (max-width: 767.98px) {
    .compra-resumo-lateral {
        flex-basis: 100%;
        text-align: left;
    }

    .compra-resumo-status .badge {
        text-align: left;
    }
}

/* =====================================================================
   Compras: grade comparativa de orçamentos (edição, aprovação e detalhes) e pulso de seleção
   ===================================================================== */
/*Grade comparativa: cabeçalho na cor do tema, produto em destaque, selos de melhor preço/aprovado*/
.grade-orcamentos {
    white-space: nowrap;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 0;
}

    .grade-orcamentos thead th {
        background-color: var(--tema-verde, #116837);
        color: #fff;
        font-weight: 600;
        border-bottom: 0;
        vertical-align: middle;
    }

    .grade-orcamentos thead th:first-child {
        border-top-left-radius: var(--tema-raio, .5rem);
    }

    .grade-orcamentos thead th:last-child {
        border-top-right-radius: var(--tema-raio, .5rem);
    }

    .grade-orcamentos tbody td {
        border-bottom: 1px solid #e9ecea;
    }

    .grade-orcamentos tbody td + td {
        border-left: 1px solid #f1f3f2;
    }

    .grade-orcamentos .grade-produto {
        white-space: normal;
        min-width: 240px;
    }

.grade-orcamento-numero {
    font-weight: 700;
}

.grade-orcamento-fornecedor {
    font-size: .75rem;
    font-weight: 400;
    opacity: .9;
    white-space: normal;
}

.grade-valor {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.grade-selo {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .05rem .45rem;
    margin-bottom: .2rem;
    border-radius: 999px;
    background-color: var(--tema-verde, #116837);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.grade-selo-aprovado {
    background-color: #0f766e;
}

.grade-orcamentos td.grade-melhor-preco {
    background-color: #e6f4ea;
    box-shadow: inset 3px 0 0 var(--tema-verde, #116837);
}

.grade-orcamentos td.grade-aprovado {
    background-color: #d9f2ec;
    box-shadow: inset 3px 0 0 #0f766e;
}

.grade-orcamentos td.selecionar-td {
    cursor: pointer;
    transition: background-color .15s;
}

    .grade-orcamentos td.selecionar-td:hover {
        background-color: #f3f8f5;
    }

.grade-orcamentos td.grade-selecionada,
.grade-orcamentos td.grade-selecionada:hover {
    background-color: #fff3cd;
    box-shadow: inset 3px 0 0 #d39e00;
    animation: pulso-selecao .6s ease-out;
}

.grade-orcamentos .grade-totais th {
    background-color: #f1f5f3;
    border-top: 2px solid var(--tema-verde, #116837);
    font-weight: 700;
}

    .grade-orcamentos .grade-totais th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
    }

/*Legenda: amostra da cor de cada situação*/
.grade-amostra {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 3px;
}

    .grade-amostra.grade-melhor-preco {
        background-color: #e6f4ea;
        box-shadow: inset 3px 0 0 var(--tema-verde, #116837);
    }

    .grade-amostra.grade-selecionada {
        background-color: #fff3cd;
        box-shadow: inset 3px 0 0 #d39e00;
    }

    .grade-amostra.grade-aprovado {
        background-color: #d9f2ec;
        box-shadow: inset 3px 0 0 #0f766e;
    }

@keyframes pulso-selecao {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .45); }
    70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* =====================================================================
   Reservas (Space e Fleet): grade de escolha de sala/veículo e período em chips
   Views/Shared/_ReservaEscolhaGrade.cshtml e _ReservaPeriodo.cshtml
   ===================================================================== */
.reserva-grade-busca {
    position: relative;
    margin-bottom: 1rem;
}

    .reserva-grade-busca > i {
        position: absolute;
        left: .85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bs-secondary-color);
        pointer-events: none;
    }

    .reserva-grade-busca .form-control {
        padding-left: 2.3rem;
        border-radius: 999px;
    }

.reserva-grade-itens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.reserva-cartao {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    color: inherit;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .reserva-cartao:not(:disabled):hover,
    .reserva-cartao:not(:disabled):focus-visible {
        transform: translateY(-3px);
        border-color: var(--tema-verde-borda);
        box-shadow: 0 10px 24px rgba(var(--tema-verde-rgb), .16);
        outline: none;
    }

.reserva-cartao-bloqueado {
    opacity: .6;
    cursor: not-allowed;
}

.reserva-cartao-foto {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    /* esqueleto enquanto a foto chega */
    background: linear-gradient(100deg, var(--bs-tertiary-bg) 30%, var(--bs-secondary-bg) 50%, var(--bs-tertiary-bg) 70%);
    background-size: 300% 100%;
    animation: reserva-esqueleto 1.2s ease-in-out infinite;
}

    .reserva-cartao-foto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .25s ease, transform .3s ease;
    }

        .reserva-cartao-foto img.carregada {
            opacity: 1;
        }

.reserva-cartao:not(:disabled):hover .reserva-cartao-foto img {
    transform: scale(1.04);
}

@keyframes reserva-esqueleto {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.reserva-cartao-status {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
}

.rg-status-livre { background-color: rgba(25, 135, 84, .9); }
.rg-status-ocupado { background-color: rgba(204, 140, 0, .92); }
.rg-status-interditado { background-color: rgba(176, 42, 55, .92); }
.rg-status-neutro { background-color: rgba(52, 58, 64, .85); }

.reserva-cartao-corpo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem .35rem;
    flex: 1 1 auto;
}

.reserva-cartao-titulo {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
}

.reserva-cartao-sub {
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.reserva-cartao-acao {
    padding: .35rem .85rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tema-verde);
}

    .reserva-cartao-acao i {
        transition: transform .15s ease;
    }

.reserva-cartao:hover .reserva-cartao-acao i {
    transform: translateX(3px);
}

.reserva-grade-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: var(--bs-secondary-color);
}

/* Cabeçalho do formulário com a foto da sala/veículo escolhido */
.reserva-escolhido {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
    background-color: var(--bs-tertiary-bg);
}

    .reserva-escolhido img {
        width: 84px;
        height: 60px;
        object-fit: cover;
        border-radius: calc(var(--tema-raio) - 4px);
        background-color: var(--bs-secondary-bg);
    }

    .reserva-escolhido strong {
        display: block;
        line-height: 1.2;
    }

/* ---------- Período em chips ---------- */
.reserva-periodo {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.rp-rotulo {
    display: block;
    margin-bottom: .2rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.reserva-periodo .rp-chip {
    font-size: .8rem;
    padding: .3em .75em;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

    .reserva-periodo .rp-chip:hover {
        border-color: var(--tema-verde);
    }

    .reserva-periodo .rp-chip.rp-ativo {
        background-color: var(--tema-verde);
        border-color: var(--tema-verde);
        color: #fff;
    }

    .reserva-periodo .rp-chip.rp-esmaecido {
        opacity: .45;
    }

.rp-horarios {
    max-height: 5.6rem;
    overflow-y: auto;
}

/* Campo do flatpickr do "Outro dia": linha vazia logo abaixo dos chips de dia; o calendário (static) abre ali,
   alinhado à esquerda, para caber também no celular */
.reserva-periodo .rp-outro-ancora {
    position: relative;
    flex-basis: 100%;
    height: 0;
}

    .reserva-periodo .rp-outro-ancora .flatpickr-wrapper {
        position: absolute;
        left: 0;
        top: 0;
    }

.reserva-periodo .rp-data-oculta {
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.reserva-periodo .flatpickr-calendar.static {
    z-index: 1070;
    top: 4px;
    left: 0;
}

.rp-resumo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .6rem .8rem;
    border-radius: var(--tema-raio);
    background-color: var(--tema-verde-suave);
    border: 1px solid var(--tema-verde-borda);
}

.rp-resumo-icone {
    font-size: 1.3rem;
    color: var(--tema-verde);
}

.rp-resumo-texto {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
}

.rp-disponibilidade {
    font-size: .8rem;
    font-weight: 600;
}

    .rp-disponibilidade.rp-livre { color: #198754; }
    .rp-disponibilidade.rp-ocupado { color: #b02a37; }
    .rp-disponibilidade.rp-verificando { color: var(--bs-secondary-color); }

.rp-manual-botao {
    text-decoration: none;
    font-size: .8rem;
}

html[data-bs-theme="dark"] .rp-resumo {
    background-color: rgba(var(--tema-verde-rgb), .18);
    border-color: rgba(var(--tema-verde-rgb), .45);
}

/* Recebimento de envios: resumo, cartão por envio e anexos */
.recebimento-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem 1.5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
}

.recebimento-campos {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
}

.recebimento-observacao .ck-editor__editable_inline {
    min-height: 7.5rem !important;
}

.recebimento-envio {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tema-raio);
}

    .recebimento-envio:last-child {
        margin-bottom: 0;
    }

.recebimento-envio-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.recebimento-itens {
    padding: .25rem 1rem;
    margin: 0;
    list-style: none;
}

    .recebimento-itens > li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem 0;
    }

        .recebimento-itens > li + li {
            border-top: 1px solid var(--bs-border-color);
        }

        .recebimento-itens > li > strong {
            flex-shrink: 0;
        }

.recebimento-envio .recebimento-anexos {
    margin: .25rem 1rem .85rem;
}

.recebimento-anexos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

.recebimento-anexos-zona {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem 1rem;
    margin: 0;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--tema-raio);
    cursor: pointer;
}

    .recebimento-anexos-zona:hover {
        border-color: var(--tema-verde);
    }

.recebimento-anexos-ok .recebimento-anexos-zona {
    border-color: var(--tema-verde);
}

.recebimento-anexos-invalido .recebimento-anexos-zona {
    border-color: #dc3545;
}

.recebimento-anexos-lista {
    padding: 0;
    margin: .4rem 0 0;
    list-style: none;
}

    .recebimento-anexos-lista:empty {
        display: none;
    }

    .recebimento-anexos-lista > li {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .2rem 0;
    }

        .recebimento-anexos-lista > li > span {
            flex-grow: 1;
            min-width: 0;
            overflow-wrap: anywhere;
        }

.recebimento-anexos-erro {
    margin-top: .35rem;
    color: #b02a37;
    font-size: .875rem;
}