/* =====================================================================
   CP Analytics — tema AgroCP (mesmo padrão do Bridge e do Proteus)
   ---------------------------------------------------------------------
   Carregado por último no _Styles: sobrescreve as variáveis do Bootstrap
   / AdminLTE, do Select2 (select2-adminlte3.css), do SweetAlert, do toastr
   e do my-styles.css. Para mudar a cor do portal, 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)            #222222 topo / neutro escuro
     #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 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);
}

/* =====================================================================
   Tema Fermavi (vermelho da marca, #B10D0E — mesma cor dos e-mails Fermavi do Proteus)
   ---------------------------------------------------------------------
   Escolhido no menu Opções e salvo no navegador (localStorage "cpanalytics_tema");
   o script no <head> dos layouts põe data-tema="fermavi" no <html> antes de pintar a tela.
   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;
    }

        .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;
    }

    .tabela-admin > tbody > tr.table-danger {
        --bs-table-bg: #fdf1f2;
        --bs-table-color: #8a6d70;
        --bs-table-hover-bg: #fbe6e8;
        --bs-table-hover-color: #8a6d70;
        --bs-table-border-color: #eef1ef;
    }

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

/* Paginação das listagens: em cima e embaixo da tabela, alinhada à direita */
.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;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .home-atalho-texto small {
        font-size: .8rem;
        color: var(--bs-secondary-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.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);
}

/* Painéis BI: a cor de cada card vem do cadastro (ReportCor / ReportCorTexto),
   passada no style do card como --painel-cor e --painel-cor-texto; vale nos dois temas */
.home-atalho-bi {
    border-left: 4px solid var(--painel-cor, var(--tema-verde));
}

    .home-atalho-bi .home-atalho-icone,
    .home-atalho-bi:hover .home-atalho-icone {
        background-color: var(--painel-cor, var(--tema-verde));
        color: var(--painel-cor-texto, #fff);
    }

    .home-atalho-bi:hover {
        border-color: var(--painel-cor, var(--tema-verde));
        box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .1);
    }

    .home-atalho-bi:hover .home-atalho-icone {
        filter: brightness(1.08);
    }

    .home-atalho-bi:hover .home-atalho-seta {
        color: var(--painel-cor, var(--tema-verde));
    }

/* =====================================================================
   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;
}

.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-tema-cor {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
}

.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 do Analytics (fundo1, a mesma do login antigo) com degradê verde por cima para dar leitura ao texto. */
.login-moderno {
    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%),
        url(/dist/img/fundo1.jpg) center / cover no-repeat fixed;
    color: #fff;
    overflow-x: hidden;
}

/* Login da Carteira de Pedidos: mantém a foto própria (fundo2) da tela antiga */
.login-moderno.login-carteira {
    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%),
        url(/dist/img/fundo2.jpg) center / cover no-repeat fixed;
}

.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);
        }

/* ---- 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%),
            url(/dist/img/fundo1.jpg) center / cover no-repeat;
    }

    .login-moderno.login-carteira {
        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%),
            url(/dist/img/fundo2.jpg) 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;
    }
}


/* =====================================================================
   Carteira do Vendedor (mobile first: celular -> tablet em pé -> desktop)
   VendedorAcesso (escolha dos vendedores), Vendedor (indicadores) e _VendedorClientes
   ===================================================================== */

/* ---- Escolha dos vendedores: card do login com a lista rolando e as ações sempre visíveis ---- */
.selecao-vendedor {
    max-width: 480px;
    padding: 1.5rem 1.25rem 1.25rem;
}

    .selecao-vendedor form {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 4rem);
    }

    .selecao-vendedor .login-moderno-logo img {
        max-width: 150px;
    }

.selecao-vendedor-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .25rem;
}

.selecao-vendedor-todos {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

.selecao-vendedor-contador {
    padding: .2rem .65rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    background-color: #eef1ef;
    color: #6c757d;
}

    .selecao-vendedor-contador.ativo {
        background-color: var(--tema-verde-suave);
        color: var(--tema-verde);
    }

.selecao-vendedor-lista {
    flex: 1 1 auto;
    min-height: 9rem;
    max-height: 50dvh;
    overflow-y: auto;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    -webkit-overflow-scrolling: touch;
}

/* Linha inteira clicável, com altura de toque confortável (>= 48px) */
.selecao-vendedor-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    margin: 0;
    padding: .6rem .85rem;
    border-bottom: 1px solid #eef1ef;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color .12s ease;
}

    .selecao-vendedor-item:last-of-type {
        border-bottom: 0;
    }

    .selecao-vendedor-item:hover {
        background-color: #f6f8f7;
    }

    .selecao-vendedor-item.marcado {
        background-color: var(--tema-verde-suave);
        border-left-color: var(--tema-verde);
    }

.selecao-vendedor .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.selecao-vendedor-avatar {
    flex: 0 0 auto;
    min-width: 2.75rem;
    padding: .15rem .4rem;
    border-radius: .4rem;
    background-color: #eef1ef;
    color: #495057;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

.selecao-vendedor-item.marcado .selecao-vendedor-avatar {
    background-color: var(--tema-verde);
    color: #fff;
}

.selecao-vendedor-nome {
    min-width: 0;
    font-size: .9rem;
    line-height: 1.25;
    color: var(--tema-texto);
}

.selecao-vendedor-vazio {
    padding: 1.25rem;
    text-align: center;
    color: #6c757d;
    font-size: .9rem;
}

.selecao-vendedor-acoes {
    flex: 0 0 auto;
    padding-top: 1rem;
}

/* ---- Carteira: página própria (sem menu lateral) ---- */
body.carteira-vendedor {
    background-color: #f4f6f5;
    min-height: 100dvh;
}

.carteira-topo {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: .6rem .85rem;
    background-color: #fff;
    border-bottom: 1px solid #e3e7e5;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .04);
}

.carteira-topo-linha {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.carteira-topo-logo {
    height: 1.9rem;
    width: auto;
}

.carteira-topo-titulo {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

    .carteira-topo-titulo h1 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .carteira-topo-titulo small {
        display: block;
        color: #6c757d;
        font-size: .75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.carteira-topo-acoes {
    display: flex;
    gap: .35rem;
    flex: 0 0 auto;
}

    .carteira-topo-acoes .btn {
        min-width: 2.4rem;
        min-height: 2.4rem;
    }

.carteira-topo-atualizado {
    display: block;
    margin-top: .25rem;
    color: #8a918d;
    font-size: .7rem;
}

.carteira-conteudo {
    padding: .85rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* No celular a logo some e o título ocupa a linha */
@media (max-width: 575.98px) {
    .carteira-topo-logo {
        display: none;
    }
}

/* ---- Indicadores: 2 por linha no celular/tablet em pé, 4 no desktop ---- */
.carteira-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    .carteira-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.carteira-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
    padding: .8rem .85rem .7rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
    color: var(--tema-texto);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .carteira-kpi:hover,
    .carteira-kpi:focus-visible {
        border-color: var(--tema-verde-medio);
        box-shadow: 0 .35rem 1rem rgba(var(--tema-verde-rgb), .12);
    }

.carteira-kpi-cabecalho {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    min-width: 0;
}

.carteira-kpi-icone {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background-color: var(--tema-verde);
    color: #fff;
    font-size: .9rem;
}

.carteira-kpi-titulo {
    font-size: .8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
}

.carteira-kpi-valor {
    font-size: clamp(1.05rem, 4.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--tema-texto);
}

    .carteira-kpi-valor small {
        font-size: .6em;
        font-weight: 600;
        color: #6c757d;
    }

.carteira-kpi-sub {
    font-size: .78rem;
    white-space: nowrap;
}

.carteira-kpi-detalhe {
    margin-top: .4rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tema-verde);
}

/* Cabeçalho dos modais da Carteira no verde da marca */
.carteira-modal-cabecalho {
    background-color: var(--tema-verde);
    color: #fff;
}

    .carteira-modal-cabecalho .modal-title {
        color: #fff;
        font-size: 1.05rem;
    }

/* Detalhe por linha de produto */
.carteira-linhas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.carteira-linha {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
}

.carteira-linha-icone {
    flex: 0 0 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
}

.carteira-linha-nome {
    flex: 1;
    font-weight: 700;
}

.carteira-linha-valores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

    .carteira-linha-valores small {
        color: #6c757d;
    }

/* ---- Área dos clientes ---- */
.carteira-secao-card {
    padding: .25rem 0 .5rem;
}

    .carteira-secao-card > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

.carteira-clientes-barra h5 {
    font-weight: 700;
}

.carteira-clientes-acoes .btn {
    white-space: nowrap;
}

.carteira-busca .input-group-text {
    background-color: #fff;
    color: var(--tema-verde);
}

/* Card do cliente: cabeçalho clicável (abre os pedidos) */
.carteira-cliente {
    margin-bottom: .65rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
    overflow: hidden;
}

.carteira-cliente-cabecalho {
    display: block;
    padding: .75rem .85rem;
    color: var(--tema-texto);
    text-decoration: none;
}

    .carteira-cliente-cabecalho:hover {
        color: var(--tema-texto);
        background-color: #f9fbfa;
    }

    .carteira-cliente-cabecalho:not(.collapsed) {
        background-color: var(--tema-verde-suave);
        border-bottom: 1px solid var(--tema-verde-borda);
    }

.carteira-cliente-topo {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.carteira-cliente-icone {
    flex: 0 0 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
}

.carteira-cliente-nome {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

    .carteira-cliente-nome strong {
        font-size: .92rem;
    }

    .carteira-cliente-nome small {
        color: #6c757d;
        font-size: .75rem;
    }

.carteira-cliente-seta {
    margin-top: .5rem;
    color: #6c757d;
    transition: transform .15s ease;
}

.carteira-cliente-cabecalho:not(.collapsed) .carteira-cliente-seta {
    transform: rotate(180deg);
    color: var(--tema-verde);
}

.carteira-metricas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .65rem;
}

@media (min-width: 768px) {
    .carteira-metricas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-left: 2.75rem;
    }
}

.carteira-metrica {
    display: flex;
    flex-direction: column;
    padding: .35rem .55rem;
    border-radius: .5rem;
    background-color: #f4f6f5;
    line-height: 1.2;
}

    .carteira-metrica small {
        font-size: .68rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
    }

    .carteira-metrica strong {
        font-size: .85rem;
        white-space: nowrap;
    }

        .carteira-metrica strong em {
            font-style: normal;
            font-size: .7rem;
            font-weight: 500;
            color: #6c757d;
        }

.carteira-cliente-corpo {
    padding: .75rem .65rem;
    background-color: #fafbfa;
}

.carteira-ordenar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    color: #6c757d;
}

    .carteira-ordenar .btn input {
        display: none;
    }

/* ---- Pedido ---- */
.carteira-pedido {
    margin-bottom: .85rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
    overflow: hidden;
    font-size: .9rem;
}

.carteira-pedido-cabecalho {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem .75rem;
    padding: .6rem .8rem;
    background-color: var(--tema-verde);
    color: #fff;
}

@media (min-width: 768px) {
    .carteira-pedido-cabecalho {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

    .carteira-pedido-cabecalho span {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .carteira-pedido-cabecalho small {
        font-size: .68rem;
        text-transform: uppercase;
        opacity: .8;
    }

.carteira-pedido-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem .9rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid #eef1ef;
}

@media (min-width: 768px) {
    .carteira-pedido-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

    .carteira-pedido-info > div,
    .carteira-pedido-obs {
        line-height: 1.3;
    }

    .carteira-pedido-info small,
    .carteira-pedido-obs small,
    .carteira-item-produto > small,
    .carteira-item-campo > small {
        display: block;
        font-size: .68rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

/* Tabela (desktop) e cards (celular/tablet em pé) com respiro lateral */
.carteira-pedido > .d-lg-block,
.carteira-itens {
    padding: .65rem .8rem 0;
}

.carteira-item {
    margin-bottom: .6rem;
    padding: .7rem .8rem;
    border: 1px solid #e3e7e5;
    border-radius: .6rem;
    background-color: #fff;
}

/* Campos do item: 2 colunas no celular, 3 no tablet em pé */
.carteira-item-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .75rem;
}

@media (min-width: 576px) {
    .carteira-item-dados {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.carteira-item-produto {
    grid-column: 1 / -1;
    padding-bottom: .5rem;
    border-bottom: 1px solid #eef1ef;
    font-weight: 600;
    line-height: 1.3;
}

.carteira-item-campo > div {
    font-weight: 600;
    white-space: nowrap;
}

.carteira-pedido-obs {
    margin: .25rem .8rem .6rem;
    padding: .5rem .65rem;
    border-radius: .5rem;
    background-color: #fff8e6;
    font-size: .85rem;
}

/* Totais do pedido: rótulo à esquerda e valor à direita */
.carteira-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem .8rem;
    font-size: .85rem;
}

    .carteira-total > span {
        color: #6c757d;
    }

    .carteira-total > div {
        font-weight: 700;
        white-space: nowrap;
    }

    .carteira-total.separa {
        margin-top: .35rem;
        padding-top: .55rem;
        border-top: 1px solid #eef1ef;
    }

.carteira-pedido > .carteira-total:last-child {
    padding-bottom: .7rem;
}

@media (min-width: 768px) {
    .carteira-conteudo {
        padding: 1.25rem;
    }

    .carteira-topo {
        padding: .7rem 1.25rem;
    }
}

/* =====================================================================
   Painéis com abas, filtros, indicadores e seções (ex.: Overview Bags)
   ===================================================================== */
.painel-bags {
    border: 1px solid #e3e7e5;
    box-shadow: none;
}

    .painel-bags > .card-header .nav-tabs {
        padding: 0 .75rem;
    }

    .painel-bags > .card-body {
        padding: 1rem;
    }

/* Filtros em uma linha (quebram no celular) */
.painel-filtros {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #f8faf9;
}

    .painel-filtros .form-label {
        margin-bottom: .25rem;
        font-size: .8rem;
        font-weight: 600;
        color: #6c757d;
    }

.painel-filtros-acoes .btn {
    white-space: nowrap;
}

/* Indicadores do período: 1 coluna no celular, 2 no tablet, 4 no desktop */
.painel-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-bottom: 1rem;
}

@media (min-width: 576px) {
    .painel-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .painel-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.painel-kpi,
.painel-saldo {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
    min-width: 0;
}

.painel-kpi-icone {
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
    font-size: 1.1rem;
}

.painel-kpi-icone-despesa {
    background-color: #fdecec;
    color: #b02a37;
}

.painel-kpi-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

    .painel-kpi-texto small {
        font-size: .75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .painel-kpi-texto strong {
        font-size: 1.25rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .painel-kpi-texto strong em {
            font-style: normal;
            font-size: .75rem;
            font-weight: 600;
            color: #6c757d;
        }

/* Seções recolhíveis: cabeçalho com ícone, título e total à direita */
.painel-secao {
    margin-bottom: 1rem;
    border: 1px solid #e3e7e5;
    box-shadow: none;
}

.painel-secao-cabecalho {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background-color: #fff;
    cursor: pointer;
}

    .painel-secao-cabecalho .card-tools {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-left: auto;
    }

.painel-secao-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1rem;
}

.painel-secao-icone {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background-color: var(--tema-verde);
    color: #fff;
    font-size: .9rem;
}

.painel-secao-total {
    padding: .2rem .7rem;
    border-radius: 2rem;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}

/* Abas internas (Por Produto / Por Cliente...) e cards de cliente */
.painel-abas,
.painel-subcard {
    border: 1px solid #e3e7e5;
    box-shadow: none;
}

    .painel-abas > .card-header {
        background-color: #fff;
    }

    .painel-subcard > .card-header {
        background-color: #f8faf9;
        font-size: .85rem;
        line-height: 1.4;
    }

/* Rosca com altura fixa: o Chart.js ocupa o contêiner (sem esticar a tela) */
.grafico-rosca {
    position: relative;
    height: 340px;
    margin-bottom: 1rem;
}

@media (min-width: 992px) {
    .grafico-rosca {
        height: 440px;
        margin-bottom: 0;
    }
}

/* Linha de grupo dentro do cabeçalho verde (Matéria Prima / Produto Acabado) */
.tabela-admin > thead > tr > th.tabela-admin-grupo {
    --bs-table-bg: var(--tema-verde-escuro);
    background-color: var(--tema-verde-escuro);
    letter-spacing: .06em;
}

/* =====================================================================
   Agendamentos (Carregamentos e Pedidos x Agendamentos)
   ===================================================================== */
.agendamento-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid #e3e7e5;
}

.agendamento-contador {
    padding: .3rem .8rem;
    border-radius: 2rem;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
    font-weight: 700;
    font-size: .85rem;
}

.agendamento-linha {
    cursor: pointer;
}

.agendamento-cliente {
    max-width: 280px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.agendamento-botoes {
    white-space: nowrap;
}

    .agendamento-botoes .btn + .btn {
        margin-left: .25rem;
    }

.agendamento-vazio {
    padding: 3rem 1rem;
    text-align: center;
    color: #6c757d;
}

    .agendamento-vazio i {
        font-size: 2rem;
        color: var(--tema-verde-borda);
        margin-bottom: .5rem;
    }

/* ---- Detalhe ---- */
.agendamento-detalhe {
    background-color: #f8faf9;
}

.agendamento-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .85rem;
    padding: .85rem 1rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
}

@media (min-width: 768px) {
    .agendamento-resumo {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.agendamento-resumo-item,
.agendamento-campos > div,
.agendamento-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
    line-height: 1.3;
}

    .agendamento-resumo-item small,
    .agendamento-campos small,
    .agendamento-kpi small {
        font-size: .7rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

.agendamento-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .85rem;
}

@media (min-width: 576px) {
    .agendamento-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .agendamento-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.agendamento-kpi {
    padding: .7rem .85rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
}

    .agendamento-kpi strong {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .agendamento-kpi em {
        font-style: normal;
        font-size: .72rem;
        color: #6c757d;
    }

    .agendamento-kpi.destaque {
        border-top: 3px solid var(--tema-verde);
    }

.agendamento-caixa {
    padding: .85rem 1rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
}

.agendamento-caixa-titulo {
    margin-bottom: .6rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--tema-verde);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.agendamento-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem 1rem;
}

@media (min-width: 576px) {
    .agendamento-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .agendamento-campos > .largo {
            grid-column: 1 / -1;
        }
}

.agendamento-total > td {
    font-weight: 700;
    background-color: var(--tema-verde-suave);
}

/* ---- Tabela que vira cards no celular (rótulo vem do data-th) ---- */
@media (max-width: 767.98px) {
    .tabela-cartao-wrapper {
        overflow: visible;
    }

    .tabela-cartao.tabela-admin {
        border: 0;
        border-radius: 0;
    }

    .tabela-cartao > thead {
        display: none;
    }

    .tabela-cartao,
    .tabela-cartao > tbody,
    .tabela-cartao > tfoot,
    .tabela-cartao > tbody > tr,
    .tabela-cartao > tfoot > tr {
        display: block;
        width: 100%;
    }

        .tabela-cartao > tbody > tr,
        .tabela-cartao > tfoot > tr {
            margin-bottom: .65rem;
            padding: .4rem 0;
            border: 1px solid #e3e7e5;
            border-radius: var(--tema-raio);
            background-color: #fff;
        }

            /* Rótulo (data-th) fixo à esquerda; o conteúdo empilha alinhado à direita */
            .tabela-cartao > tbody > tr > td,
            .tabela-cartao > tfoot > tr > td {
                display: block;
                position: relative;
                /* !important: as colunas de valor têm width 1% na tabela normal */
                width: 100% !important;
                min-height: 2rem;
                padding: .35rem .85rem .35rem 42%;
                border: 0 !important;
                text-align: right !important;
                white-space: normal;
            }

                .tabela-cartao > tbody > tr > td::before,
                .tabela-cartao > tfoot > tr > td::before {
                    content: attr(data-th);
                    position: absolute;
                    left: .85rem;
                    top: .45rem;
                    width: calc(42% - 1.35rem);
                    font-size: .7rem;
                    font-weight: 600;
                    color: #6c757d;
                    text-transform: uppercase;
                    text-align: left;
                    line-height: 1.2;
                }

                /* Primeira célula vira o título do card */
                .tabela-cartao > tbody > tr > td:first-child {
                    border-bottom: 1px solid #eef1ef !important;
                    padding-bottom: .5rem;
                    margin-bottom: .2rem;
                }

                .tabela-cartao > tbody > tr > td[data-th=""]::before {
                    content: none;
                }

                /* Célula sem rótulo (botões) ocupa a largura toda */
                .tabela-cartao > tbody > tr > td[data-th=""],
                .tabela-cartao > tfoot > tr > td[colspan] {
                    padding-left: .85rem;
                }

                .tabela-cartao > tbody > tr > td.agendamento-botoes {
                    padding-top: .5rem;
                }

            .tabela-cartao > tfoot > tr > td[colspan] {
                font-weight: 700;
                text-align: left !important;
            }

    .agendamento-cliente {
        max-width: none;
    }
}

/* =====================================================================
   Overview Despesas: total e hierarquia (gerência > vendedor > categoria > conta)
   ===================================================================== */
.despesa-arvore {
    border: 1px solid #e3e7e5;
    box-shadow: none;
    overflow: hidden;
}

/* Faixa do total: clicar abre a hierarquia */
.despesa-total {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background-color: #fff;
    cursor: pointer;
}

    .despesa-total:hover {
        background-color: #fbfcfb;
    }

.despesa-total-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

    .despesa-total-texto small {
        font-size: .75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .despesa-total-texto strong {
        font-size: clamp(1.4rem, 4vw, 1.9rem);
        font-weight: 700;
        color: #b02a37;
        white-space: nowrap;
    }

.despesa-total-acao {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tema-verde);
    white-space: nowrap;
}

/* Cada nível: cabeçalho branco com seta, rótulo pequeno do nível e valor em pílula */
.despesa-card {
    margin: 0 0 .5rem;
    border: 1px solid #e3e7e5;
    border-left: 4px solid var(--tema-verde);
    border-radius: var(--tema-raio);
    box-shadow: none;
    overflow: hidden;
}

.despesa-card-2 {
    border-left-color: var(--tema-verde-medio);
}

.despesa-card-3 {
    border-left-color: #5aa2b0;
}

.despesa-card-4 {
    border-left-color: #c7a23a;
}

.despesa-nivel {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    background-color: #fff;
    cursor: pointer;
}

    .despesa-nivel:hover {
        background-color: #f8faf9;
    }

.despesa-card:not(.collapsed-card) > .despesa-nivel {
    background-color: var(--tema-verde-suave);
    border-bottom: 1px solid #e3e7e5;
}

.despesa-nivel-seta {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #eef1ef;
    color: #6c757d;
    font-size: .7rem;
    transition: transform .15s ease, background-color .15s ease;
}

/* Aberto: a seta gira e fica na cor da marca */
.despesa-card:not(.collapsed-card) > .despesa-nivel .despesa-nivel-seta,
.despesa-arvore:not(.collapsed-card) > .despesa-total .despesa-nivel-seta {
    transform: rotate(90deg);
    background-color: var(--tema-verde);
    color: #fff;
}

.despesa-nivel-titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-weight: 600;
}

    .despesa-nivel-titulo small {
        font-size: .66rem;
        font-weight: 700;
        color: #8a918d;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

.despesa-nivel-valor {
    padding: .2rem .7rem;
    border-radius: 2rem;
    background-color: #fdecec;
    color: #b02a37;
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}

.despesa-arvore > .card-body,
.despesa-card > .card-body {
    padding: .65rem .65rem .25rem;
    background-color: #fafbfa;
}

.despesa-lancamentos {
    padding: .65rem !important;
}

/* Detalhe (modal): total, contagem e busca na mesma linha no desktop */
.despesa-detalhe-topo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .85rem;
}

.despesa-detalhe-busca {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .despesa-detalhe-topo {
        grid-template-columns: 220px 160px 1fr;
        align-items: stretch;
    }

    .despesa-detalhe-busca {
        grid-column: auto;
        align-self: center;
    }
}

@media (max-width: 575.98px) {
    .despesa-total-acao {
        display: none;
    }

    .despesa-nivel-valor {
        font-size: .78rem;
    }
}

/* =====================================================================
   RDV Quilometragem: card por veículo e modal das fotos
   ===================================================================== */
.km-veiculo {
    margin-bottom: .65rem;
    border: 1px solid #e3e7e5;
    border-left: 4px solid var(--tema-verde);
    border-radius: var(--tema-raio);
    background-color: #fff;
    overflow: hidden;
}

    .km-veiculo.pendente {
        border-left-color: #e0a800;
    }

.km-veiculo-cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem .85rem;
    padding: .8rem 1rem;
    color: var(--tema-texto);
    text-decoration: none;
}

    .km-veiculo-cabecalho:hover {
        color: var(--tema-texto);
        background-color: #f9fbfa;
    }

    .km-veiculo-cabecalho:not(.collapsed) {
        background-color: var(--tema-verde-suave);
        border-bottom: 1px solid var(--tema-verde-borda);
    }

.km-veiculo-icone {
    flex: 0 0 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
}

.km-veiculo.pendente .km-veiculo-icone {
    background-color: #fff3cd;
    color: #b07d00;
}

.km-veiculo-titulo {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

    .km-veiculo-titulo small {
        color: #6c757d;
    }

.km-veiculo-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.km-veiculo-total {
    padding: .2rem .7rem;
    border-radius: 2rem;
    background-color: var(--tema-verde);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}

.km-veiculo-seta {
    color: #6c757d;
    transition: transform .15s ease;
}

.km-veiculo-cabecalho:not(.collapsed) .km-veiculo-seta {
    transform: rotate(180deg);
    color: var(--tema-verde);
}

.km-veiculo-corpo {
    padding: .75rem;
    background-color: #fafbfa;
}

/* No celular a seta vai para o canto e o resumo ocupa a linha de baixo */
@media (max-width: 575.98px) {
    .km-veiculo-resumo {
        order: 3;
        width: 100%;
        padding-left: 3.25rem;
    }

    .km-veiculo-seta {
        order: 2;
    }
}

/* ---- Modal das fotos ---- */
.km-diferenca {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
    padding: .7rem 1rem;
    border-radius: var(--tema-raio);
    background-color: var(--tema-verde);
    color: #fff;
}

    .km-diferenca strong {
        margin-left: auto;
        font-size: 1.15rem;
    }

.km-registro {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fff;
    overflow: hidden;
}

.km-registro-cabecalho {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .9rem;
    border-bottom: 1px solid #eef1ef;
}

.km-registro-icone {
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
    font-size: .8rem;
}

.km-registro.pendente .km-registro-icone {
    background-color: #fff3cd;
    color: #b07d00;
}

.km-registro-titulo {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .03em;
}

.km-registro-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem;
    padding: .75rem .9rem;
}

    .km-registro-dados > div {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
    }

    .km-registro-dados small {
        font-size: .7rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
    }

/* Foto inteira à vista, sem esticar o modal */
.km-registro-foto {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    margin: 0 .9rem .9rem;
    border-radius: .6rem;
    background-color: #f1f3f2;
    overflow: hidden;
}

    .km-registro-foto img {
        max-width: 100%;
        max-height: 60vh;
        object-fit: contain;
    }

.km-sem-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem;
    color: #8a918d;
    text-align: center;
}

    .km-sem-foto i {
        font-size: 1.8rem;
        color: #c3cbc7;
    }

/* =====================================================================
   Overview Margens: cards por linha de produto, detalhe e gráficos
   (--margem-cor vem da linha: CP MULT verde, TURBO laranja, FERTIL azul-petróleo)
   ===================================================================== */
.margem-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .85rem;
}

    .margem-opcoes .form-check-label {
        font-size: .9rem;
    }

.margem-abas .nav-link {
    font-weight: 600;
}

/* Cards das linhas: 1 por linha no celular, 3 lado a lado do tablet em diante */
.margem-linhas {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}

@media (min-width: 768px) {
    .margem-linhas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.margem-linha {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    border: 1px solid #e3e7e5;
    border-top: 4px solid var(--margem-cor);
    border-radius: var(--tema-raio);
    background-color: #fff;
    color: var(--tema-texto);
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .margem-linha:hover {
        color: var(--tema-texto);
        box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .07);
        transform: translateY(-2px);
    }

    .margem-linha:not(.collapsed) {
        box-shadow: 0 0 0 2px var(--margem-cor);
    }

.margem-linha-topo {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.margem-linha-ponto {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background-color: var(--margem-cor);
    flex: 0 0 auto;
}

.margem-linha-nome {
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .03em;
}

.margem-linha-seta {
    margin-left: auto;
    color: #6c757d;
    transition: transform .15s ease;
}

.margem-linha:not(.collapsed) .margem-linha-seta {
    transform: rotate(180deg);
    color: var(--margem-cor);
}

.margem-linha-valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

    .margem-linha-valor small {
        font-size: .9rem;
        margin-left: .15rem;
        color: #6c757d;
    }

.margem-linha-rotulo {
    font-size: .75rem;
    color: #6c757d;
}

/* Barra da margem (0 a 100%) */
.margem-linha-barra {
    height: .35rem;
    margin-top: .4rem;
    border-radius: 1rem;
    background-color: #eef1ef;
    overflow: hidden;
}

    .margem-linha-barra > span {
        display: block;
        height: 100%;
        border-radius: 1rem;
        background-color: var(--margem-cor);
    }

/* Detalhe da linha / diretorias */
.margem-detalhe {
    margin-bottom: .75rem;
    padding: .85rem;
    border: 1px solid #e3e7e5;
    border-radius: var(--tema-raio);
    background-color: #fafbfa;
}

.margem-detalhe-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tema-texto);
}

/* Linha da diretoria dentro da tabela: faixa suave com a média */
.tabela-admin > tbody > tr.margem-diretoria > td {
    --bs-table-bg: var(--tema-verde-suave);
    background-color: var(--tema-verde-suave);
    font-weight: 700;
    border-top: 1px solid var(--tema-verde-borda);
}

.margem-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: #6c757d;
}

    .margem-legenda > span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

.margem-grafico + .margem-grafico {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef1ef;
}

.margem-grafico-titulo {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .25rem;
}

@media (max-width: 575.98px) {
    .painel-secao-cabecalho {
        flex-wrap: wrap;
    }

    .margem-legenda {
        width: 100%;
    }
}

/* Overview Bags > Despesas por participante: participante em destaque, centralizadores recuados */
.despesa-participantes > tbody > tr.participante-linha > td {
    --bs-table-bg: var(--tema-verde-suave);
    background-color: var(--tema-verde-suave);
    font-weight: 700;
    color: var(--tema-texto);
    border-top: 1px solid var(--tema-verde-borda);
}

    .despesa-participantes > tbody > tr.participante-linha > td small {
        margin-left: .5rem;
        font-weight: 500;
        color: #6c757d;
    }

    .despesa-participantes > tbody > tr.participante-linha > td i {
        color: var(--tema-verde);
    }

.despesa-participantes > tbody > tr.participante-item > td {
    font-size: .85rem;
    color: #495057;
}

    .despesa-participantes > tbody > tr.participante-item > td:first-child {
        padding-left: 2.1rem;
    }

.despesa-participantes > tfoot > tr.participante-total > td {
    font-weight: 700;
    border-top: 2px solid var(--tema-verde);
}

/* Equipe de Vendas: responsável e contatos no cabeçalho de cada nível */
.equipe-pessoa {
    display: block;
    margin-top: .15rem;
    font-weight: 500;
    font-size: .88rem;
    color: #495057;
}

.equipe-contatos {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    margin-top: .2rem;
    font-weight: 400;
    font-size: .8rem;
}

    .equipe-contatos a {
        color: #6c757d;
        text-decoration: none;
    }

        .equipe-contatos a:hover {
            color: var(--tema-verde);
        }

.equipe-quantidade {
    padding: .2rem .7rem;
    border-radius: 2rem;
    background-color: var(--tema-verde-suave);
    color: var(--tema-verde);
    font-weight: 700;
    font-size: .8rem;
    white-space: nowrap;
}