/* =====================================================================
   AgroCPBridge — site.css
   ---------------------------------------------------------------------
   Organização do arquivo:
     01. Variáveis globais (:root)
     02. Utilitários de cor de fundo (.text-bg-*)
     03. Utilitários de texto
     04. Botões de cor customizada (.btn-*)
     05. Alertas e destaques
     06. Tabela de moedas
     07. Nav pills
     08. Switches e form-check
     09. Modais
     10. Avatares
     11. Badges de status
     12. Botões de ícone (.btn-icon-*)
     13. Tabelas (ordenação)
     14. Tema info-dark (#1976d2)
     15. Navbar + menu Opções
     16. Histórico / Timeline
     17. Filtros das listagens
     18. Carteira de pedidos
     19. Select2 — chips dos itens selecionados
     20. Hierarquia de permissões (Index de Permissões)
     21. Modal de detalhe (SweetAlert2 fullscreen)
     22. Impressão PDF (Exportar PDF do modal)
     23. Tabelas responsivas (mobile)
     24. Topnav (mobile)
     25. Card-header (mobile)
     26. Paginação (mobile)
     27. Conteúdo do detalhe: Nota Fiscal / Financeiro (.nf-*)
     28. Agendamento
     29. Home — atalhos, indicadores e resumo
     30. Busca global por Nº de documento (menu superior)
     31. Assistente (botão flutuante e painel)
     32. Administrativo — cards de configuração
     33. Lista com checkbox (empresas/parceiros/permissões do usuário)
     34. Login
     35. Botões flutuantes (assistente e agendamento)
   ===================================================================== */


/* =====================================================================
   01. VARIÁVEIS GLOBAIS
   ===================================================================== */
:root {
    /* Tema info-dark (modais de Bloquear / Resetar Senha / Alterar Senha) */
    --info-dark: #1976d2;
    --info-dark-hover: #145ea8;
    --info-dark-soft: #e8f3fc;
    --info-dark-soft-hover: #cfe7fa;
    /* Navbar e menu Opções — fonte única da verdade para a cor do topo.
       Trocando aqui, a barra, o dropdown e o header do Resumo da Home
       (bloco 29) mudam juntos. */
    --navbar-bg: #343a40;
    --navbar-border: rgba(255, 255, 255, .12);
    --navbar-text: #ffffff;
    --navbar-text-muted: rgba(255, 255, 255, .65);
    /* Assistente (bloco 31): verdes da logo AgroCP; texto branco com contraste nos dois tons */
    --assistente-cor-inicio: #0e6b37;
    --assistente-cor-fim: #2a7f1f;
    --assistente-cor-hover-inicio: #0a5229;
    --assistente-cor-hover-fim: #24701b;
    --assistente-brilho: #ffd54f;
}


/* =====================================================================
   02. UTILITÁRIOS DE COR DE FUNDO
   ---------------------------------------------------------------------
   Padrão Bootstrap 5 (.text-bg-*): cor de fundo + cor de texto com
   contraste já resolvido. Usar em badges, cards e cabeçalhos.
   (.text-bg-laranja fica no bloco 27, junto do restante do detalhe.)
   ===================================================================== */
.text-bg-pink {
    color: white;
    background-color: #702963;
}

.text-bg-bronze {
    color: white;
    background-color: #CD7F32;
}

.text-bg-dark-light {
    color: white;
    background-color: #3B3C36;
}

.text-bg-lavender {
    color: white;
    background-color: #8E7AB5;
}

.text-bg-mint {
    color: #1A1A1A;
    background-color: #A8E6CF;
}

.text-bg-sky {
    color: #0D1B2A;
    background-color: #A9D6E5;
}

.text-bg-sand {
    color: #3E2723;
    background-color: #EAD2AC;
}

.text-bg-olive {
    color: white;
    background-color: #708D81;
}

.text-bg-clay {
    color: white;
    background-color: #B86B77;
}

.text-bg-mocha {
    color: white;
    background-color: #7B5E57;
}

.text-bg-moss {
    color: white;
    background-color: #6B705C;
}

.text-bg-copper {
    color: white;
    background-color: #B87333;
}

.text-bg-peach {
    color: #3E2723;
    background-color: #FFDAB9;
}

.text-bg-lilac {
    color: white;
    background-color: #9A8C98;
}

.text-bg-powderblue {
    color: #0D1B2A;
    background-color: #B0C4DE;
}

.text-bg-sage {
    color: #2E2E2E;
    background-color: #C8D5B9;
}

.text-bg-rose {
    color: white;
    background-color: #C97A8C;
}

.text-bg-silver {
    color: #1A1A1A;
    background-color: #C0C0C0;
}

.text-bg-charcoal {
    color: white;
    background-color: #36454F;
}

.text-bg-stone {
    color: white;
    background-color: #778899;
}

.text-bg-ash {
    color: #1A1A1A;
    background-color: #D3D3D3;
}

.text-bg-denim {
    color: white;
    background-color: #6A8EAE;
}


/* =====================================================================
   03. UTILITÁRIOS DE TEXTO
   ===================================================================== */

/* Sombra para texto amarelo sobre fundo claro (melhora legibilidade). */
.text-warning-shadow {
    text-shadow: 0px 1px 0px rgba(0,0,0,1);
}

/* Amarelo escurecido — usado no cronômetro/sessão da navbar. */
.text-warning-dark {
    color: #cc8400 !important;
}

/* Cursor de mão. Declaração ÚNICA (antes existiam três cópias). */
.cursor-pointer {
    cursor: pointer;
}


/* =====================================================================
   04. BOTÕES DE COR CUSTOMIZADA
   ---------------------------------------------------------------------
   Mesmo contrato do Bootstrap: color + background-color + border-color,
   com estado :hover. Só o .btn-pink define :focus/:active — os demais
   herdam o comportamento padrão do .btn.
   ===================================================================== */

/* PINK */
.btn-pink {
    color: #fff;
    background-color: #702963;
    border-color: #702963;
}

    .btn-pink:hover {
        color: #fff;
        background-color: #5d2152;
        border-color: #551d4b;
    }

    .btn-pink:focus,
    .btn-pink:active,
    .btn-pink.active {
        color: #fff;
        background-color: #551d4b;
        border-color: #4c1a43;
    }

/* BRONZE */
.btn-bronze {
    color: #fff;
    background-color: #CD7F32;
    border-color: #CD7F32;
}

    .btn-bronze:hover {
        color: #fff;
        background-color: #b76f2c;
        border-color: #a86529;
    }

/* DARK LIGHT */
.btn-dark-light {
    color: #fff;
    background-color: #3B3C36;
    border-color: #3B3C36;
}

    .btn-dark-light:hover {
        color: #fff;
        background-color: #30312c;
        border-color: #282924;
    }

/* LAVENDER */
.btn-lavender {
    color: #fff;
    background-color: #8E7AB5;
    border-color: #8E7AB5;
}

    .btn-lavender:hover {
        color: #fff;
        background-color: #7c6aa0;
        border-color: #725f95;
    }

/* MINT */
.btn-mint {
    color: #1A1A1A;
    background-color: #A8E6CF;
    border-color: #A8E6CF;
}

    .btn-mint:hover {
        color: #1A1A1A;
        background-color: #92d6bc;
        border-color: #88c9b1;
    }

/* SKY */
.btn-sky {
    color: #0D1B2A;
    background-color: #A9D6E5;
    border-color: #A9D6E5;
}

    .btn-sky:hover {
        color: #0D1B2A;
        background-color: #96c8da;
        border-color: #89bfd3;
    }

/* SAND */
.btn-sand {
    color: #3E2723;
    background-color: #EAD2AC;
    border-color: #EAD2AC;
}

    .btn-sand:hover {
        color: #3E2723;
        background-color: #dcc39c;
        border-color: #d2b891;
    }

/* OLIVE */
.btn-olive {
    color: #fff;
    background-color: #708D81;
    border-color: #708D81;
}

    .btn-olive:hover {
        color: #fff;
        background-color: #60796f;
        border-color: #566d64;
    }

/* CLAY */
.btn-clay {
    color: #fff;
    background-color: #B86B77;
    border-color: #B86B77;
}

    .btn-clay:hover {
        color: #fff;
        background-color: #a45f6a;
        border-color: #975763;
    }

/* MOCHA */
.btn-mocha {
    color: #fff;
    background-color: #7B5E57;
    border-color: #7B5E57;
}

    .btn-mocha:hover {
        color: #fff;
        background-color: #694f49;
        border-color: #5f4842;
    }

/* MOSS */
.btn-moss {
    color: #fff;
    background-color: #6B705C;
    border-color: #6B705C;
}

    .btn-moss:hover {
        color: #fff;
        background-color: #5c604f;
        border-color: #525646;
    }

/* COPPER */
.btn-copper {
    color: #fff;
    background-color: #B87333;
    border-color: #B87333;
}

    .btn-copper:hover {
        color: #fff;
        background-color: #a5662d;
        border-color: #995d29;
    }

/* PEACH */
.btn-peach {
    color: #3E2723;
    background-color: #FFDAB9;
    border-color: #FFDAB9;
}

    .btn-peach:hover {
        color: #3E2723;
        background-color: #f0cdae;
        border-color: #e4c3a5;
    }

/* LILAC */
.btn-lilac {
    color: #fff;
    background-color: #9A8C98;
    border-color: #9A8C98;
}

    .btn-lilac:hover {
        color: #fff;
        background-color: #897b87;
        border-color: #7f727d;
    }

/* POWDERBLUE */
.btn-powderblue {
    color: #0D1B2A;
    background-color: #B0C4DE;
    border-color: #B0C4DE;
}

    .btn-powderblue:hover {
        color: #0D1B2A;
        background-color: #9fb5d2;
        border-color: #94accb;
    }

/* SAGE */
.btn-sage {
    color: #2E2E2E;
    background-color: #C8D5B9;
    border-color: #C8D5B9;
}

    .btn-sage:hover {
        color: #2E2E2E;
        background-color: #bac8ab;
        border-color: #afbe9f;
    }

/* ROSE */
.btn-rose {
    color: #fff;
    background-color: #C97A8C;
    border-color: #C97A8C;
}

    .btn-rose:hover {
        color: #fff;
        background-color: #b76c7d;
        border-color: #ab6474;
    }

/* SILVER */
.btn-silver {
    color: #1A1A1A;
    background-color: #C0C0C0;
    border-color: #C0C0C0;
}

    .btn-silver:hover {
        color: #1A1A1A;
        background-color: #b0b0b0;
        border-color: #a6a6a6;
    }

/* CHARCOAL */
.btn-charcoal {
    color: #fff;
    background-color: #36454F;
    border-color: #36454F;
}

    .btn-charcoal:hover {
        color: #fff;
        background-color: #2d3942;
        border-color: #27323a;
    }

/* STONE */
.btn-stone {
    color: #fff;
    background-color: #778899;
    border-color: #778899;
}

    .btn-stone:hover {
        color: #fff;
        background-color: #687988;
        border-color: #5f6f7d;
    }

/* ASH */
.btn-ash {
    color: #1A1A1A;
    background-color: #D3D3D3;
    border-color: #D3D3D3;
}

    .btn-ash:hover {
        color: #1A1A1A;
        background-color: #c4c4c4;
        border-color: #b9b9b9;
    }

/* DENIM */
.btn-denim {
    color: #fff;
    background-color: #6A8EAE;
    border-color: #6A8EAE;
}

    .btn-denim:hover {
        color: #fff;
        background-color: #5d7d99;
        border-color: #54718b;
    }


/* =====================================================================
   05. ALERTAS E DESTAQUES
   ===================================================================== */

/* Texto de aviso em pílula translúcida — legível sobre fundos coloridos. */
.alerta-warning-text {
    display: inline-block;
    color: #fff3cd;
    background: rgba(0,0,0,0.18);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}


/* =====================================================================
   06. TABELA DE MOEDAS
   ===================================================================== */

/* Cabeçalho da tabela de cotações. */
.moeda-header {
    background-color: black;
    font-weight: bold;
    color: white;
    text-align: center;
}

/* Linha de cotação PTAX (oficial) — visual secundário. */
.ptax-row {
    font-style: italic;
    color: #6c757d;
    font-size: 0.9em;
}

/* Linha de cotação de mercado — visual primário. */
.mercado-row {
    font-weight: 500;
    color: #0d6efd;
}

/* Destaque da linha do dia atual. */
.hoje-destaque {
    border-left: 5px solid #ffc107;
    background-color: #ffc107 !important;
}

/* Valores numéricos monoespaçados e alinhados à direita. */
.valor-num {
    font-family: 'Consolas', monospace;
    text-align: right;
}


/* =====================================================================
   07. NAV PILLS (abas Ativo / Inativo)
   ===================================================================== */
.nav-ativo .nav-link.active {
    background-color: #198754 !important;
    color: #fff !important;
}

.nav-inativo .nav-link.active {
    background-color: #dc3545 !important;
    color: #fff !important;
}


/* =====================================================================
   08. SWITCHES E FORM-CHECK
   ===================================================================== */

/* Switch verde de sucesso. */
.switch-success .form-check-input,
.switch-success .form-check-label {
    cursor: pointer;
}

    .switch-success .form-check-input:checked {
        background-color: var(--bs-success);
        border-color: var(--bs-success);
    }

        .switch-success .form-check-input:checked + .form-check-label {
            color: var(--bs-success);
            font-weight: 600;
        }

/* ATENÇÃO (regra global): aumenta a fonte de TODO .form-check-label da
   aplicação, inclusive checkboxes de filtros e do SweetAlert2. Se algum
   checkbox aparecer "grande demais", a causa é esta regra. Mantida como
   estava para não alterar telas existentes; para restringir no futuro,
   prefixe com o contexto (ex.: .switch-parametro .form-check-label).
   Dentro de .filtros ela é neutralizada no bloco 17. */
.form-check-label {
    font-size: 1.15rem;
    font-weight: 500;
}

/* ATENÇÃO (regra global): idem — afeta todo .form-check do sistema. */
.form-check {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bloco de switches de parâmetros (tela de configurações). */
.switch-parametro {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* Compensa o padding-left que o Bootstrap aplica no .form-switch. */
    .switch-parametro.form-switch {
        padding-left: 3em !important;
    }

/* Switch ampliado (35% maior). */
.switch-parametro-input {
    cursor: pointer;
    transform: scale(1.35);
    margin-right: 6px;
}

    /* Verde quando ligado. */
    .switch-parametro-input:checked {
        background-color: #198754 !important;
        border-color: #198754 !important;
    }

/* Label do switch de parâmetro. */
.switch-parametro-label {
    font-size: 1.1rem;
    font-weight: 500;
}


/* =====================================================================
   09. MODAIS
   ===================================================================== */

/* Cabeçalho verde escuro (modais de confirmação positiva). */
.modal-header-success-dark {
    background-color: #157347 !important;
}


/* =====================================================================
   10. AVATARES (iniciais do usuário / do acesso externo)
   ===================================================================== */

/* Avatar padrão de lista/tabela (36px). */
.avatar-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #20c997, #198754);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
}

/* Avatar grande (modais e cabeçalho do menu Opções).
   min-width explícito para sobrescrever o min-width:36px herdado de
   .avatar-circle e evitar achatamento em containers flex. */
.avatar-circle-lg {
    width: 70px;
    height: 70px;
    min-width: 70px;
    font-size: 1.5rem;
    border: 3px solid rgba(255, 255, 255, .3);
}

/* Avatar dentro do cabeçalho do dropdown do usuário.
   O AdminLTE centraliza .user-header img com margin auto; como aqui é
   uma <div>, o margin auto precisa ser explícito. */
.user-header .avatar-circle {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

/* Variações de estado do avatar. */
.avatar-inativo {
    background: linear-gradient(135deg, #9aa0ab, #6c757d);
}

.avatar-bloqueado {
    background: linear-gradient(135deg, #ff8a80, #d32f2f);
}


/* =====================================================================
   11. BADGES DE STATUS
   ===================================================================== */

/* Base do badge (pílula com ícone + texto). */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .72rem;
    font-weight: 600;
    padding: .35em .6em;
    border-radius: 20px;
    width: fit-content;
}

.status-ativo {
    background-color: #e6f7ee;
    color: #1e7e4f;
}

.status-inativo {
    background-color: #f1f2f4;
    color: #6c757d;
}

/* Bloqueio manual, feito por administrador. */
.status-bloqueado {
    background-color: #fdeaea;
    color: #c0392b;
}

/* Bloqueio automático por tentativas de login (BLOQUEADO_MOTIVO = 'T'). */
.status-bloqueado-tentativas {
    background-color: #dc3545;
    color: #fff;
}


/* =====================================================================
   12. BOTÕES DE ÍCONE
   ---------------------------------------------------------------------
   Usados nas colunas "Segurança" e "Ações" das listagens: quadrado de
   38px (34px no celular), fundo suave na cor da ação e ícone sólido.
   Sempre acompanhados de title="..." na view, já que não têm rótulo
   visível. (Variante compacta .btn-icon-xs no bloco 20.)
   ===================================================================== */
.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

    .btn-icon:hover {
        box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .08);
    }

    /* Micro-feedback de clique. */
    .btn-icon:active {
        transform: scale(0.94);
    }

/* Celular: um pouco menor para a coluna de ações não estourar a linha */
@media (max-width: 575.98px) {
    .btn-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: .95rem;
    }
}

/* Azul do tema (Redefinir Senha, Usuários do Acesso Externo). */
.btn-icon-info {
    background-color: var(--info-dark-soft);
    color: var(--info-dark);
}

    .btn-icon-info:hover {
        background-color: var(--info-dark-soft-hover);
    }

/* Alerta (Bloquear, Gerar Usuário Administrador, Arquivo indisponível). */
.btn-icon-warning {
    background-color: #fff3e0;
    color: #b26a00;
}

    .btn-icon-warning:hover {
        background-color: #ffe4b8;
    }

/* Positivo (Desbloquear, Ativar). */
.btn-icon-success {
    background-color: #e6f7ee;
    color: #1e7e4f;
}

    .btn-icon-success:hover {
        background-color: #c8f0d9;
    }

/* Ação primária (Modificar). */
.btn-icon-primary {
    background-color: #e7f0fd;
    color: #0d6efd;
}

    .btn-icon-primary:hover {
        background-color: #d3e4fc;
    }

/* Ação destrutiva (Inativar) e PDF da nota. */
.btn-icon-danger {
    background-color: #fdeaea;
    color: #c0392b;
}

    .btn-icon-danger:hover {
        background-color: #f9d5d5;
    }

/* Ação neutra (Detalhes, XML da nota). */
.btn-icon-secondary {
    background-color: #eef0f2;
    color: #495057;
}

    .btn-icon-secondary:hover {
        background-color: #e0e3e7;
    }

/* Ação de consulta/auditoria (Histórico). */
.btn-icon-dark {
    background-color: #e4e6e8;
    color: #212529;
}

    .btn-icon-dark:hover {
        background-color: #d3d6d9;
    }


/* =====================================================================
   13. TABELAS — ícone de ordenação no cabeçalho
   ---------------------------------------------------------------------
   As listagens usam fa-arrow-down-a-z / fa-arrow-up-a-z.
   ===================================================================== */
thead a:hover .fa-arrow-down-a-z,
thead a:hover .fa-arrow-up-a-z {
    opacity: 1 !important;
    color: #fff !important;
}


/* =====================================================================
   14. TEMA INFO-DARK (#1976d2)
   ---------------------------------------------------------------------
   Paleta usada nos modais (Resetar Senha, Alterar Senha) e badges.
   As variáveis estão no :root do bloco 01.
   ===================================================================== */

/* Fundo sólido (cabeçalho de modal, badge). */
.bg-info-dark {
    background-color: var(--info-dark) !important;
    color: #fff !important;
}

/* Fundo suave (alert, card). */
.bg-info-dark-soft {
    background-color: var(--info-dark-soft) !important;
    color: var(--info-dark) !important;
}

.text-info-dark {
    color: var(--info-dark) !important;
}

.border-info-dark {
    border-color: var(--info-dark) !important;
}

/* Botão sólido. */
.btn-info-dark {
    background-color: var(--info-dark);
    border-color: var(--info-dark);
    color: #fff;
}

    .btn-info-dark:hover,
    .btn-info-dark:focus {
        background-color: var(--info-dark-hover);
        border-color: var(--info-dark-hover);
        color: #fff;
    }

/* Botão outline. */
.btn-outline-info-dark {
    background-color: transparent;
    border-color: var(--info-dark);
    color: var(--info-dark);
}

    .btn-outline-info-dark:hover,
    .btn-outline-info-dark:focus {
        background-color: var(--info-dark);
        border-color: var(--info-dark);
        color: #fff;
    }


/* =====================================================================
   15. NAVBAR + MENU OPÇÕES
   ---------------------------------------------------------------------
   Resolve dois problemas:
     (a) o dropdown vinha com a cor padrão do AdminLTE (mais escura que a
         barra) — agora ambos usam --navbar-bg;
     (b) avatar e botões desalinhados porque o AdminLTE usa float no
         .user-footer — trocado por flex.
   (Ajustes de mobile do topo no bloco 24.)
   ===================================================================== */

/* (a) Barra superior e dropdown compartilham a MESMA cor. */
.main-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;
        }

/* Variante clara do outline-info-dark para uso sobre a navbar escura
   (o azul #1976d2 puro tem pouco contraste em fundo escuro). */
.btn-outline-info-light {
    background-color: transparent;
    border-color: #64b5f6;
    color: #64b5f6;
}

    .btn-outline-info-light:hover,
    .btn-outline-info-light:focus {
        background-color: #64b5f6;
        border-color: #64b5f6;
        color: #0d1b2a;
    }


/* =====================================================================
   16. HISTÓRICO / TIMELINE
   ---------------------------------------------------------------------
   Usado nos modais Historico.cshtml de AcessoExternoHistorico e
   UsuarioExternoHistorico. A cor de cada evento vem do enum, via
   GetCor() -> bg-{cor} no marcador/badge e .hist-tint-{cor} no card.
   ===================================================================== */

/* Fundo do modal-body: cinza para os cards brancos ganharem relevo. */
.hist-fundo {
    background: #eef1f5;
}

/* ---------- Trilho ---------- */

.hist-timeline {
    position: relative;
    padding-left: 2.75rem;
}

    .hist-timeline::before {
        content: "";
        position: absolute;
        left: 1rem;
        top: .25rem;
        bottom: .25rem;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, #8a949e 0%, #c7ced6 100%);
    }

/* ---------- Separador de dia ---------- */

.hist-dia {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem -1.55rem;
}

    /* Linha que se dissolve à direita do badge da data. */
    .hist-dia::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, #c7ced6, rgba(199, 206, 214, 0));
    }

    .hist-dia .badge {
        padding: .4rem .7rem;
        font-size: .78rem;
        letter-spacing: .02em;
    }

/* ---------- Item ---------- */

.hist-item {
    position: relative;
    margin-bottom: 1.15rem;
}

.hist-dot {
    position: absolute;
    left: -2.75rem;
    top: .4rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    /* Anel na cor do fundo separa o marcador do trilho. */
    box-shadow: 0 0 0 3px #eef1f5, 0 2px 5px rgba(33, 37, 41, .28);
    transition: transform .15s ease;
}

.hist-card {
    border: 1px solid #ced4da;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(33, 37, 41, .10);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.hist-item:hover .hist-card {
    box-shadow: 0 5px 14px rgba(33, 37, 41, .13);
    transform: translateY(-1px);
}

.hist-item:hover .hist-dot {
    transform: scale(1.07);
}

.hist-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .55rem .85rem;
    background: #eef1f5; /* fallback: sobrescrito por .hist-tint-* */
    border-bottom: 1px solid #dee2e6;
    color: #343a40;
}

    /* O text-muted padrão do Bootstrap fica lavado sobre o fundo tingido. */
    .hist-card-header .text-muted,
    .hist-card-rodape .text-muted {
        color: #55606b !important;
    }

.hist-card-body {
    padding: .85rem;
    white-space: pre-wrap; /* preserva as quebras de linha da descrição */
    word-break: break-word;
    color: #212529;
}

/* Faixas do rodapé do card: anexo e "editado por". */
.hist-card-rodape {
    padding: .55rem .85rem;
    background: #f6f8fa;
    border-top: 1px solid #e4e8ec;
}

/* Registro inativado: esmaecido, borda tracejada e sem hover. */
.hist-item-inativo .hist-card {
    opacity: .6;
    border-style: dashed;
    box-shadow: none;
}

.hist-item-inativo:hover .hist-card {
    transform: none;
    box-shadow: none;
}

/* ---------- Tingimento do cabeçalho por tipo ----------
   A cor do evento entra como fundo suave do cabeçalho, acompanhando o
   badge e o marcador — sem faixa lateral grossa.
   Tons: cor a 12% sobre branco; borda inferior a 30%.                */

.hist-tint-primary .hist-card-header {
    background: #e2eeff;
    border-bottom-color: #b6d4fe;
}

.hist-tint-secondary .hist-card-header {
    background: #edeeef;
    border-bottom-color: #d3d6d8;
}

.hist-tint-success .hist-card-header {
    background: #e3f1ea;
    border-bottom-color: #badbcc;
}

.hist-tint-danger .hist-card-header {
    background: #fbe7e9;
    border-bottom-color: #f5c2c7;
}

.hist-tint-warning .hist-card-header {
    background: #fff8e1;
    border-bottom-color: #ffecb5;
}

.hist-tint-info .hist-card-header {
    background: #e2f9fd;
    border-bottom-color: #b6effa;
}

.hist-tint-dark .hist-card-header {
    background: #e4e5e5;
    border-bottom-color: #bcbebf;
}

/* ---------- Anexo: o nome do arquivo é o próprio link ---------- */

.hist-anexo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .3rem .7rem .3rem .55rem;
    border: 1px solid #ced4da;
    border-radius: 2rem;
    background: #fff;
    color: #2b3440;
    text-decoration: none;
    font-size: .875rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .hist-anexo:hover,
    .hist-anexo:focus {
        background: #e2eeff;
        border-color: #0d6efd;
        color: #0a58ca;
    }

.hist-anexo-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-anexo:hover .hist-anexo-nome {
    text-decoration: underline;
}

/* Ícone conforme a extensão do arquivo (definido na view). */
.hist-anexo-tipo {
    font-size: 1rem;
    color: #55606b;
}

.hist-anexo:hover .hist-anexo-tipo {
    color: #0a58ca;
}

/* Seta de download: discreta em repouso, acende no hover. */
.hist-anexo-acao {
    font-size: .8rem;
    opacity: .55;
    transition: opacity .15s ease, transform .15s ease;
}

.hist-anexo:hover .hist-anexo-acao {
    opacity: 1;
    transform: translateY(1px);
}

/* ---------- Estado vazio ---------- */

.hist-vazio {
    border: 1px dashed #adb5bd;
    border-radius: .5rem;
    padding: 2.5rem 2rem;
    text-align: center;
    color: #55606b;
    background: #f8f9fa;
}

/* ---------- Card "Nova interação" ---------- */

.hist-nova-card {
    border: 1px solid #ced4da;
    box-shadow: 0 1px 3px rgba(33, 37, 41, .10);
}

    /* Rodapé onde fica o botão Adicionar. */
    .hist-nova-card .card-footer {
        background: #f6f8fa;
        border-top: 1px solid #e4e8ec;
    }


/* =====================================================================
   17. FILTROS DAS LISTAGENS
   ---------------------------------------------------------------------
   Padroniza a linha de filtros (Código, Descrição, Itens por página,
   Somente ativos, Pesquisar/Limpar). Todos os controles nascem na mesma
   altura e alinhados pelo topo, porque TODA coluna tem um .form-label —
   as que não precisam de rótulo usam .filtro-espacador com &nbsp;.

   Sem isso, as colunas sem label sobem em relação às outras e nenhum
   align-items resolve, já que o desalinhamento vem da altura do rótulo.
   (No mobile o espaçador some — bloco 23.)
   ===================================================================== */

.filtros .form-label {
    margin-bottom: .25rem;
    font-weight: 500;
    font-size: .95rem;
}

/* Rótulo invisível que reserva a mesma altura dos demais. */
.filtros .filtro-espacador {
    display: block;
    user-select: none;
}

/* Neutraliza, SÓ dentro dos filtros, as regras globais do bloco 08
   (.form-check com margin-bottom 1.5rem e .form-check-label 1.15rem),
   que empurravam o switch para baixo e o deixavam maior que os campos. */
.filtros .form-check {
    margin-bottom: 0;
    min-height: calc(1.5em + .75rem + 2px); /* = altura do .form-control */
    display: flex;
    align-items: center;
    gap: .5rem;
}

.filtros .form-check-label {
    font-size: .95rem;
    font-weight: 500;
    margin-bottom: 0;
}

/* Ícone e texto centralizados dentro dos botões de filtro. */
.filtros .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    white-space: nowrap;
}


/* =====================================================================
   18. CARTEIRA DE PEDIDOS
   ---------------------------------------------------------------------
   Hierarquia visual: agrupamento (escuro) > pedido (cinza) > itens.
   Os cards .carteira-pedido também são usados dentro do modal do
   contrato (variações de cancelado no bloco 21).
   ===================================================================== */

/* ---------- Totalizadores ---------- */

.carteira-total {
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: #fff;
    height: 100%;
}

    .carteira-total .carteira-total-icone {
        width: 40px;
        height: 40px;
        border-radius: .6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex: 0 0 auto;
    }

    .carteira-total .carteira-total-rotulo {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color);
    }

    .carteira-total .carteira-total-valor {
        font-size: 1.35rem;
        font-weight: 600;
        line-height: 1.2;
    }

/* ---------- Agrupamento (nível mais escuro) ---------- */

.carteira-grupo {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
}

.carteira-grupo-header {
    cursor: pointer;
    background: #212529;
    color: #fff;
    border-left: 4px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

    .carteira-grupo-header:hover {
        background: #2b3035;
    }

    .carteira-grupo-header[aria-expanded="true"] {
        background: #343a40;
        border-left-color: var(--bs-primary);
    }

    .carteira-grupo-header .carteira-chevron {
        transition: transform .2s ease;
        color: rgba(255, 255, 255, .65);
    }

    .carteira-grupo-header[aria-expanded="true"] .carteira-chevron {
        transform: rotate(180deg);
        color: #fff;
    }

/* Rótulo do agrupamento em vigor: Cliente / Empresa / Vendedor. */
.carteira-grupo-tipo {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: .1rem;
}

/* Nome do cliente/empresa/vendedor — substitui o avatar de iniciais. */
.carteira-grupo-nome {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    margin-bottom: .35rem;
}

.carteira-grupo-metricas {
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
}

    .carteira-grupo-metricas strong {
        color: #fff;
    }

.carteira-grupo-corpo {
    background: var(--bs-tertiary-bg);
}

/* ---------- Pedido (nível intermediário) ---------- */

.carteira-pedido {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: #fff;
    overflow: hidden;
}

.carteira-pedido-cabecalho {
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .82rem;
}

/* Bloco em destaque com os números do pedido (Siagri e SIG). */
.carteira-pedido-numeros {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.carteira-pedido-rotulo {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.carteira-pedido-numero {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-emphasis-color);
}

    .carteira-pedido-numero.sem-valor {
        color: var(--bs-secondary-color);
        font-weight: 500;
    }

.carteira-pedido table {
    font-size: .85rem;
}


/* =====================================================================
   19. SELECT2 — CHIPS DOS ITENS SELECIONADOS
   ---------------------------------------------------------------------
   O Select2 pinta os itens escolhidos de cinza claro, que some no meio
   do formulário. Aqui eles viram pílulas verdes (success).

   Escopado em .filtros de propósito: os Select2 de outras telas seguem
   com o visual padrão. Para valer no sistema todo, remova o ".filtros"
   do início de cada seletor.

   row-reverse: o "x" é o PRIMEIRO filho no DOM (4.0 e 4.1), então
   invertendo o eixo ele cai no fim da pílula, sem depender de order.
   ===================================================================== */

/* Pílula do item selecionado. */
.filtros .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #e6f7ee !important;
    border: 1px solid #a9dcc3 !important;
    color: #1e7e4f !important;
    border-radius: 2rem !important;
    padding: .2rem .65rem !important;
    margin-top: .3rem;
    margin-right: .3rem;
    font-size: .85rem;
    font-weight: 500;
    display: inline-flex !important;
    flex-direction: row-reverse;
    align-items: center;
    gap: .4rem;
    line-height: 1.4;
}

/* Texto do item (existe só no 4.1; no 4.0 o texto é um nó solto). */
.filtros .select2-container .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0 !important;
    color: inherit;
}

/* "x" — 4.0 (span) e 4.1 (button). */
.filtros .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #1e7e4f !important;
    background: transparent !important;
    border: none !important;
    opacity: .65;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    transition: opacity .15s ease, color .15s ease;
}

    .filtros .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover,
    .filtros .select2-container .select2-selection--multiple .select2-selection__choice__remove:focus {
        color: #c0392b !important;
        background: transparent !important;
        opacity: 1;
    }

/* Caixa do select em foco acompanha o verde. */
.filtros .select2-container--default.select2-container--focus .select2-selection--multiple,
.filtros .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #a9dcc3;
    box-shadow: 0 0 0 .2rem rgba(30, 126, 79, .15);
}

/* Altura mínima igual à dos .form-control vizinhos. */
.filtros .select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px);
    border-color: var(--bs-border-color);
}


/* =====================================================================
   20. HIERARQUIA DE PERMISSÕES (Index de Permissões)
   ---------------------------------------------------------------------
   Suporte visual ao toggle Lista/Hierarquia: indentação por nível com
   transição suave, seta de expandir/retrair que GIRA em vez de trocar
   de ícone (mesmo espírito do .carteira-chevron do bloco 18), e uma
   variante compacta dos .btn-icon-* do bloco 12 para o botão de
   adicionar filha, que fica inline com o nome da permissão.
   ===================================================================== */

#tabelaPermissoes .col-descricao {
    transition: padding-left .2s ease;
}

.btn-icon-xs {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .7rem;
    vertical-align: middle;
    margin-right: .35rem;
}

.perm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin-right: .35rem;
    color: #8a949e;
    cursor: pointer;
    transition: transform .2s ease, color .15s ease;
}

    .perm-toggle:hover {
        color: #343a40;
    }

    .perm-toggle.perm-toggle-colapsada {
        transform: rotate(-90deg);
    }

.perm-toggle-espaco {
    display: inline-block;
    width: 16px;
    margin-right: .35rem;
}

/* Linha inteira funciona como toggle em modo Hierarquia (via JS/delegação),
   quando tem filhos na página — cursor indica isso. */
#tabelaPermissoes tbody tr.perm-linha-expansivel {
    cursor: pointer;
}

/* Ao expandir, as linhas que aparecem "descem" de leve + fazem fade-in —
   reforça visualmente que passaram a existir um nível abaixo do pai. */
@keyframes permEntrarNivel {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#tabelaPermissoes tbody tr.perm-entrando {
    animation: permEntrarNivel .18s ease-out;
}


/* =====================================================================
   21. MODAL DE DETALHE (SweetAlert2 fullscreen)
   ---------------------------------------------------------------------
   Usado nas telas de Contratos, Pedidos e Financeiro: o Swal ocupa a
   tela toda, no mesmo formato do .modal-fullscreen do Bootstrap —
   header (title), corpo rolável (html-container) e rodapé (actions).

   Uso na view:
     customClass: {
         container: 'swal-detalhe-container',
         popup: 'swal-detalhe' (+ ' swal-detalhe-negativo' se negativo),
         confirmButton: 'btn btn-secondary'
     },
     buttonsStyling: false

   REGRA DE ROLAGEM: a rolagem VERTICAL é do corpo do modal, e só dele.
   Tabelas largas rolam na HORIZONTAL dentro do próprio .detalhe-scroll,
   sem criar uma segunda barra vertical dentro da primeira.
   ===================================================================== */

/* O container do Swal tem padding próprio (.625em); com o popup em
   100vw isso gerava barra de rolagem horizontal na página. */
.swal-detalhe-container,
.swal2-container:has(> .swal-detalhe) {
    padding: 0 !important;
}

.swal-detalhe {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* a rolagem fica no corpo, nao no popup */
    display: flex !important;
    flex-direction: column;
}

    /* O header do Swal envolve o titulo e tem padding proprio - some com ele
       para nao sobrar faixa branca acima da barra do titulo. */
    .swal-detalhe .swal2-header {
        padding: 0;
        margin: 0;
        width: 100%;
        display: block;
    }

    /* Barra do titulo (equivale ao modal-header do Bootstrap). */
    .swal-detalhe .swal2-title {
        background: var(--bs-secondary);
        color: #fff;
        margin: 0;
        padding: 1rem 1.5rem;
        font-size: 1.15rem;
        font-weight: 500;
        text-align: left;
        width: 100%;
        border-radius: 0;
        display: block;
    }

    /* Espaco reservado do icone, que nao usamos aqui. */
    .swal-detalhe .swal2-icon {
        display: none !important;
    }

    /* O "x" precisa aparecer sobre a barra do titulo. */
    .swal-detalhe .swal2-close {
        color: rgba(255, 255, 255, .85);
        margin: 0;
        position: absolute;
        top: .5rem;
        right: .75rem;
        z-index: 2;
    }

        .swal-detalhe .swal2-close:hover {
            color: #fff;
        }

    /* Corpo rolavel (modal-body). overflow-x hidden: as linhas .row
       (margens negativas) nao geram barra horizontal no corpo. */
    .swal-detalhe .swal2-html-container {
        margin: 0;
        padding: 1.25rem 1.5rem;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1 1 auto;
        text-align: left;
        font-size: .85rem;
    }

    /* Rodape com o botao Fechar (modal-footer). */
    .swal-detalhe .swal2-actions {
        margin: 0;
        padding: .75rem 1.5rem;
        width: 100%;
        justify-content: flex-end;
        background: #f8f9fa;
        border-top: 1px solid var(--bs-border-color);
        flex: 0 0 auto;
    }

    /* Tabela dentro do fullscreen: sem rolagem vertical propria (quem rola
       e o corpo); a horizontal fica aqui, para tabelas largas.
       (Unifica as duas regras que existiam para este seletor.) */
    .swal-detalhe .detalhe-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid var(--bs-border-color);
    }

        .swal-detalhe .detalhe-scroll table {
            width: 100%;
            max-width: 100%;
            table-layout: fixed;
        }

        /* No modal o texto quebra (vence o nowrap do .detalhe-tabela). */
        .swal-detalhe .detalhe-scroll th,
        .swal-detalhe .detalhe-scroll td {
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }

        .swal-detalhe .detalhe-scroll .produto-descricao {
            width: 28%;
        }

/* Linha secundaria embaixo da descricao do item (cultura, embalagem). */
.detalhe-tabela .item-detalhe {
    font-size: .75rem;
    margin-top: .1rem;
}

/* Enquanto o modal esta aberto, a pagina de tras nao rola. */
body.swal2-shown > :not(.swal2-container) {
    overflow: hidden;
}

html.swal2-height-auto {
    height: 100% !important;
}


/* ---------- Tabela dentro do modal ---------- */

.detalhe-tabela {
    font-size: .8rem;
}

    .detalhe-tabela th,
    .detalhe-tabela td {
        white-space: nowrap;
        vertical-align: middle;
    }

/* Area rolavel da tabela (uso fora do modal fullscreen). */
.detalhe-scroll {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
}

    /* Barra de rolagem visivel (o padrao do Chrome some quando parado). */
    .detalhe-scroll::-webkit-scrollbar,
    .swal-detalhe .swal2-html-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .detalhe-scroll::-webkit-scrollbar-track,
    .swal-detalhe .swal2-html-container::-webkit-scrollbar-track {
        background: #eef1f5;
    }

    .detalhe-scroll::-webkit-scrollbar-thumb,
    .swal-detalhe .swal2-html-container::-webkit-scrollbar-thumb {
        background: #adb5bd;
        border-radius: 6px;
        border: 2px solid #eef1f5;
    }

        .detalhe-scroll::-webkit-scrollbar-thumb:hover,
        .swal-detalhe .swal2-html-container::-webkit-scrollbar-thumb:hover {
            background: #868e96;
        }

/* Firefox */
.detalhe-scroll,
.swal-detalhe .swal2-html-container {
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #eef1f5;
}

    /* Cabecalho da tabela fixo ao rolar (tabela com rolagem propria fora
   do modal, e corpo do modal rolando por baixo). */
    .detalhe-scroll thead th,
    .swal-detalhe .detalhe-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

/* Rotulos do bloco de resumo do modal. */
.detalhe-rotulo {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
}

.detalhe-valor {
    font-weight: 600;
    white-space: nowrap;
}

/* Linha de registro cancelado/recusado/reprovado nas listagens. */
.linha-cancelada > td {
    background-color: rgba(220, 53, 69, .08) !important;
}

.table-hover > tbody > tr.linha-cancelada:hover > td {
    background-color: rgba(220, 53, 69, .16) !important;
}


/* ---------- Variante do modal para registros negativos ----------
   Recusado, reprovado, cancelado ou título vencido: header e rodape em
   danger solido, corpo em vermelho leve e conteudo no mesmo padrao.   */

.swal-detalhe-negativo .swal2-title {
    background: var(--bs-danger);
    color: #fff;
}

.swal-detalhe-negativo .swal2-close {
    color: rgba(255, 255, 255, .85);
}

    .swal-detalhe-negativo .swal2-close:hover {
        color: #fff;
    }

.swal-detalhe-negativo .swal2-html-container {
    background: rgba(220, 53, 69, .08);
}

.swal-detalhe-negativo .swal2-actions {
    background: var(--bs-danger);
    border-top-color: var(--bs-danger);
}

    /* Botao Fechar sobre o rodape vermelho. */
    .swal-detalhe-negativo .swal2-actions .btn {
        background-color: #fff;
        border-color: #fff;
        color: var(--bs-danger);
    }

        .swal-detalhe-negativo .swal2-actions .btn:hover,
        .swal-detalhe-negativo .swal2-actions .btn:focus {
            background-color: #f1f1f1;
            border-color: #f1f1f1;
            color: var(--bs-danger);
        }

/* Secoes do detalhe de NF/Financeiro (.nf-*, bloco 27) no modal negativo:
   fundo branco translucido e bordas/titulos vermelhos. */
.swal-detalhe-negativo .nf-secao,
.swal-detalhe-negativo .nf-card {
    background-color: rgba(255, 255, 255, .75);
    border-color: rgba(220, 53, 69, .25);
}

.swal-detalhe-negativo .nf-secao-titulo {
    color: #842029;
    border-bottom-color: rgba(220, 53, 69, .25);
}

.swal-detalhe-negativo .nf-rotulo {
    color: #842029;
}

/* ---------- Tabelas dentro do modal negativo ---------- */

/* Cabecalho das tabelas acompanha o danger (sobrescreve o table-secondary). */
.swal-detalhe-negativo .detalhe-tabela > thead > tr > th {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
    border-color: rgba(220, 53, 69, .5) !important;
}

/* Corpo e rodape das tabelas em branco translucido, para nao brigar com o fundo. */
.swal-detalhe-negativo .detalhe-tabela > tbody > tr > td,
.swal-detalhe-negativo .detalhe-tabela > tfoot > tr > td {
    background-color: rgba(255, 255, 255, .75) !important;
    border-color: rgba(220, 53, 69, .2) !important;
}

.swal-detalhe-negativo .detalhe-tabela > tfoot > tr > td,
.swal-detalhe-negativo .detalhe-tabela > tbody > tr.table-light > td {
    background-color: rgba(220, 53, 69, .12) !important;
}

.swal-detalhe-negativo .detalhe-tabela.table-hover > tbody > tr:hover > td {
    background-color: rgba(220, 53, 69, .14) !important;
}

/* Moldura da area rolavel. */
.swal-detalhe-negativo .detalhe-scroll {
    border-color: rgba(220, 53, 69, .35);
}

.swal-detalhe-negativo .detalhe-rotulo {
    color: #842029;
}

/* ---------- Variante do modal para título que vence em breve ----------
   Mesmo esquema do negativo, em laranja (#fd7e14). */

.swal-detalhe-alerta .swal2-title {
    background: #fd7e14;
    color: #fff;
}

.swal-detalhe-alerta .swal2-close {
    color: rgba(255, 255, 255, .85);
}

    .swal-detalhe-alerta .swal2-close:hover {
        color: #fff;
    }

.swal-detalhe-alerta .swal2-html-container {
    background: rgba(253, 126, 20, .08);
}

.swal-detalhe-alerta .swal2-actions {
    background: #fd7e14;
    border-top-color: #fd7e14;
}

    .swal-detalhe-alerta .swal2-actions .btn {
        background-color: #fff;
        border-color: #fff;
        color: #c25e0a;
    }

        .swal-detalhe-alerta .swal2-actions .btn:hover,
        .swal-detalhe-alerta .swal2-actions .btn:focus {
            background-color: #f1f1f1;
            border-color: #f1f1f1;
            color: #c25e0a;
        }

.swal-detalhe-alerta .nf-secao {
    background-color: rgba(255, 255, 255, .75);
    border-color: rgba(253, 126, 20, .3);
}

/* Mantem a borda colorida da esquerda dos cards (pago, a receber...) */
.swal-detalhe-alerta .nf-card {
    background-color: rgba(255, 255, 255, .75);
    border-top-color: rgba(253, 126, 20, .3);
    border-right-color: rgba(253, 126, 20, .3);
    border-bottom-color: rgba(253, 126, 20, .3);
}

.swal-detalhe-alerta .nf-secao-titulo {
    color: #8a4508;
    border-bottom-color: rgba(253, 126, 20, .3);
}

.swal-detalhe-alerta .nf-rotulo {
    color: #8a4508;
}

/* ---------- Cards de pedido dentro do modal do contrato ----------
   Cancelado total: borda vermelha forte + cabecalho tingido.
   Cancelado parcial: mesma ideia, em intensidade menor.            */

.carteira-pedido.pedido-cancelado {
    border-color: var(--bs-danger);
    border-width: 2px;
}

    .carteira-pedido.pedido-cancelado .carteira-pedido-cabecalho {
        background: rgba(220, 53, 69, .14);
        border-bottom-color: rgba(220, 53, 69, .35);
    }

.carteira-pedido.pedido-cancelado-parcial {
    border-color: rgba(220, 53, 69, .5);
}

    .carteira-pedido.pedido-cancelado-parcial .carteira-pedido-cabecalho {
        background: rgba(220, 53, 69, .07);
    }

/* ---------- Tabelas dentro do card de pedido cancelado ----------
   Sem isso o thead (table-secondary) e o tfoot (table-light) ficam
   cinza dentro de um card vermelho.                                */

.carteira-pedido.pedido-cancelado .detalhe-tabela > thead > tr > th {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
    border-color: rgba(220, 53, 69, .5) !important;
}

.carteira-pedido.pedido-cancelado .detalhe-tabela > tbody > tr > td {
    background-color: rgba(220, 53, 69, .06) !important;
    border-color: rgba(220, 53, 69, .2) !important;
}

.carteira-pedido.pedido-cancelado .detalhe-tabela > tfoot > tr > td {
    background-color: rgba(220, 53, 69, .18) !important;
    border-color: rgba(220, 53, 69, .3) !important;
}

.carteira-pedido.pedido-cancelado .detalhe-tabela.table-hover > tbody > tr:hover > td {
    background-color: rgba(220, 53, 69, .14) !important;
}

/* Parcial: so o rodape e o cabecalho ganham um tom leve. */
.carteira-pedido.pedido-cancelado-parcial .detalhe-tabela > thead > tr > th {
    background-color: rgba(220, 53, 69, .2) !important;
    color: #842029 !important;
}

.carteira-pedido.pedido-cancelado-parcial .detalhe-tabela > tfoot > tr > td {
    background-color: rgba(220, 53, 69, .1) !important;
}


/* =====================================================================
   22. IMPRESSÃO DO DETALHE (Exportar PDF do modal)
   ---------------------------------------------------------------------
   O conteudo do modal e clonado para #areaImpressao (filho direto do
   body) e o body ganha a classe .imprimindo. Na impressao, todo o resto
   some. Como e a propria pagina, o CSS ja esta carregado - diferente do
   iframe, onde as folhas recomecam o download e nao chegam a tempo.
   ===================================================================== */

#areaImpressao {
    display: none;
}

@media print {

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

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

    /* O modal aberto trava html/body em 100% da altura com overflow hidden
       (e o #areaImpressao tambem herda o overflow hidden do swal2-shown):
       no papel isso cortava o conteudo 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 (cabecalho das tabelas, badges). */
    #areaImpressao,
    #areaImpressao * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* A tabela nao rola no papel: mostra tudo e quebra por linha. */
    #areaImpressao .detalhe-scroll {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    #areaImpressao .detalhe-tabela {
        font-size: .7rem;
    }

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

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

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

        /* O sticky do cabecalho atrapalha na impressao. */
        #areaImpressao thead th {
            position: static !important;
        }

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

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

    /* Os documentos (pedido, contrato, agendamento, carteira) usam folha propria (retrato). */
    @page documento {
        size: A4 portrait;
        margin: 9mm 10mm;
    }
}


/* =====================================================================
   22.1 DOCUMENTOS IMPRESSOS (Exportar PDF)
   ---------------------------------------------------------------------
   Layout exclusivo da impressao de Pedido, Contrato, Agendamento e
   Carteira. Cada view monta o documento num <template> e o
   impressao-documento.js joga ele no #areaImpressao e chama o print.
   Unidades em pt/mm para o tamanho bater no papel. Compacto de
   proposito, para um documento comum caber numa folha A4.
   ===================================================================== */

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

    /* Carteira: o mesmo template imprime tudo (.doc-so-geral) ou um
       agrupamento so (.doc-modo-grupo mostra o .doc-so-grupo). */
    .doc-folha .doc-so-grupo {
        display: none;
    }

    .doc-folha.doc-modo-grupo .doc-so-grupo {
        display: block;
    }

    .doc-folha.doc-modo-grupo .doc-so-geral {
        display: none;
    }

/* Topo: empresa/titulo a esquerda, numero do documento a 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-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;
    font-size: 7pt;
    font-weight: 600;
}

/* Faixa de dados (fundo cinza). .doc-faixa = mesma grade so 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;
}

    /* Faixa do contrato no pedido: a descricao (2a coluna) e a mais longa. */
    .doc-info.doc-info-5 {
        grid-template-columns: 1fr 2.2fr 1fr 1.3fr 1.3fr;
    }

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

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

/* Indicadores em destaque (totais do contrato, agendamento, carteira) */
.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-kpi small {
        font-size: 7pt;
        color: var(--doc-texto-2);
    }

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

.doc-aviso-negativo {
    border-left-color: #c0392b;
    background: #fdf1f2;
}

/* Caixas lado a lado (parceiro, propriedade, logistica) */
.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;
}

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

.doc-caixa-negativa {
    border-color: #f1b0b7;
    background: #fdf1f2;
}

/* 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 1.5mm;
        text-align: left;
    }

    .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: 5mm;
        text-align: center;
        color: var(--doc-texto-2);
    }

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

    /* Valor nao quebra; o cabecalho quebra nos espacos ("VLR. CANCEL. / (R$)"). */
    .doc-itens td.doc-num,
    .doc-itens td.doc-centro {
        white-space: nowrap;
    }

    .doc-itens th {
        overflow-wrap: normal;
        word-break: normal;
        vertical-align: bottom;
    }

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

    /* Largura das colunas fixas (no <th>); a do produto fica com o resto. */
    .doc-itens .doc-w-13 { width: 13mm; }
    .doc-itens .doc-w-14 { width: 14mm; }
    .doc-itens .doc-w-15 { width: 15mm; }
    .doc-itens .doc-w-16 { width: 16mm; }
    .doc-itens .doc-w-17 { width: 17mm; }
    .doc-itens .doc-w-20 { width: 20mm; }
    .doc-itens .doc-w-24 { width: 24mm; }

    /* Tabela com muitas colunas (carteira): fonte menor para sobrar espaco ao produto. */
    .doc-itens.doc-itens-compacta td {
        font-size: 7pt;
    }

    .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,
.doc-negativo td {
    color: #c0392b;
}

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

/* Bloco de um pedido dentro do documento (contrato, carteira) */
.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);
}

/* Titulo de grupo da carteira (cliente / vendedor / empresa) */
.doc-grupo {
    margin-bottom: 4mm;
}

.doc-grupo-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4mm;
    padding: 1.8mm 3mm;
    margin-bottom: 2mm;
    border-left: 3pt solid var(--doc-cor);
    background: var(--doc-fundo);
    break-after: avoid;
}

    .doc-grupo-titulo .doc-grupo-nome {
        font-size: 10pt;
        font-weight: 700;
    }

    .doc-grupo-titulo .doc-grupo-metricas {
        display: flex;
        gap: 4mm;
        font-size: 7.5pt;
        white-space: nowrap;
    }

/* Observacoes a esquerda, totais a 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 small {
        color: var(--doc-texto-2);
    }

    .doc-totais .doc-subtotal td {
        font-weight: 600;
        border-bottom: 1px solid var(--doc-borda);
    }

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

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


/* =====================================================================
   23. TABELAS RESPONSIVAS (mobile)
   ---------------------------------------------------------------------
   Aplicar a classe .tabela-mobile na <table>. O data-label de cada
   célula e o wrapper .celula-valor são gerados no tabela-responsiva.js.
   Abaixo de 768px cada linha vira um cartão.
   ===================================================================== */

/* No desktop o wrapper não existe para o layout. */
.celula-valor {
    display: contents;
}

@media (max-width: 767.98px) {

    /* Sem rolagem lateral: cada linha vira um cartão. */
    .table-responsive.tem-tabela-mobile {
        overflow-x: visible;
    }

    .tabela-mobile,
    .tabela-mobile > thead,
    .tabela-mobile > tbody,
    .tabela-mobile > tfoot,
    .tabela-mobile > * > tr,
    .tabela-mobile > * > tr > td {
        display: block;
        width: auto;
        max-width: 100%;
    }

        /* O cabeçalho vira o rótulo de cada célula. */
        .tabela-mobile > thead {
            display: none;
        }

        .tabela-mobile > tbody > tr,
        .tabela-mobile > tfoot > tr {
            margin-bottom: .75rem;
            padding: .25rem .75rem;
            border: 1px solid var(--bs-border-color);
            border-radius: .5rem;
            background-color: var(--bs-body-bg);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
            overflow: hidden;
        }

            .tabela-mobile > tbody > tr:last-child,
            .tabela-mobile > tfoot > tr:last-child {
                margin-bottom: 0;
            }

            .tabela-mobile > tbody > tr > td,
            .tabela-mobile > tfoot > tr > td {
                display: flex;
                align-items: baseline;
                gap: .75rem;
                width: auto !important;
                min-height: 0;
                padding: .5rem 0;
                border: 0;
                border-bottom: 1px dashed var(--bs-border-color);
            }

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

                .tabela-mobile > tbody > tr > td[data-label]:not([data-label=""])::before,
                .tabela-mobile > tfoot > tr > td[data-label]:not([data-label=""])::before {
                    content: attr(data-label);
                    flex: 0 0 38%;
                    text-align: left;
                    font-size: .75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: .02em;
                    line-height: 1.2;
                    color: var(--bs-secondary-color);
                }

        /* O valor ocupa o resto e pode encolher/quebrar (badges, nomes longos). */
        .tabela-mobile td > .celula-valor {
            display: block;
            flex: 1 1 0;
            min-width: 0;
            text-align: right;
            overflow-wrap: anywhere;
        }

            .tabela-mobile td > .celula-valor > * {
                max-width: 100%;
            }

            /* Grupos de badges/botões: quebram linha e vão para a direita.
               !important porque os utilitários do Bootstrap
               (justify-content-center, align-items-center) também são. */
            .tabela-mobile td > .celula-valor .badge {
                white-space: normal;
            }

            .tabela-mobile td > .celula-valor .d-flex:not(.flex-column) {
                justify-content: flex-end !important;
                flex-wrap: wrap !important;
            }

            .tabela-mobile td > .celula-valor .d-flex.flex-column {
                align-items: flex-end !important;
            }

        /* text-center/text-start do <td> não valem no cartão. */
        .tabela-mobile > tbody > tr > td > .celula-valor,
        .tabela-mobile > tfoot > tr > td > .celula-valor {
            text-align: right;
        }

        /* Célula vazia some; célula de colspan (totais / "nenhum registro")
           ocupa a linha. */
        .tabela-mobile > tbody > tr > td:empty,
        .tabela-mobile > tfoot > tr > td:empty {
            display: none;
        }

        .tabela-mobile > tbody > tr > td[data-label=""] > .celula-valor,
        .tabela-mobile > tfoot > tr > td[data-label=""] > .celula-valor {
            text-align: center;
            font-weight: 600;
        }

        /* Borda do table-bordered não faz sentido dentro do cartão. */
        .tabela-mobile.table-bordered > :not(caption) > * > * {
            border-width: 0;
        }

        .tabela-mobile > tbody > tr.linha-cancelada,
        .tabela-mobile > tbody > tr.table-danger {
            border-color: var(--bs-danger-border-subtle);
        }

    /* Cabeçalho do pedido (Contratos/Carteira) empilha melhor. */
    .carteira-pedido-numeros {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* No mobile os filtros empilham, então o rótulo vazio só ocupa espaço. */
    .filtros .filtro-espacador {
        display: none;
    }
}


/* =====================================================================
   24. TOPNAV — evita quebra de linha no mobile
   ===================================================================== */

.app-header .container-fluid,
.app-header .navbar-nav {
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
}

    .app-header .navbar-nav .nav-link {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        white-space: nowrap;
    }

.app-header .nav-perfis {
    min-width: 0;
}

    .app-header .nav-perfis .perfis-texto {
        display: inline-block;
        max-width: 16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

/* Cronômetro da sessão não "pula" ao trocar os dígitos. */
.app-header #contadorSessao {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .app-header .nav-perfis .perfis-texto {
        max-width: 8rem;
    }

    .app-header .navbar-nav .nav-item.me-3 {
        margin-right: .5rem !important;
    }

    .app-header .navbar-nav .nav-link {
        padding-left: .35rem;
        padding-right: .35rem;
    }
}

@media (max-width: 575.98px) {
    /* Só o ícone; o nome dos perfis fica no title. */
    .app-header .nav-perfis .perfis-texto {
        display: none;
    }

    .app-header .nav-item-fullscreen {
        display: none;
    }
}


/* =====================================================================
   25. CARD-HEADER — ações quebram linha no mobile
   ===================================================================== */

@media (max-width: 767.98px) {

    /* Título em uma linha, ações na linha de baixo. */
    .card-header > .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

        .card-header > .d-flex > .card-title {
            flex: 1 1 100%;
        }

        .card-header > .d-flex > .d-flex {
            flex-wrap: wrap;
            width: 100%;
            justify-content: flex-start !important;
        }

            /* Botões e grupos dividem a largura disponível. */
            .card-header > .d-flex > .d-flex > .btn,
            .card-header > .d-flex > .d-flex > .btn-group {
                flex: 1 1 auto;
            }

    .card-header .btn-group > .btn {
        flex: 1 1 auto;
    }

    .card-header .btn {
        white-space: nowrap;
    }
}


/* =====================================================================
   26. PAGINAÇÃO — quebra linha no mobile
   ===================================================================== */

@media (max-width: 767.98px) {

    .pagination {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: .25rem;
    }

        /* O Bootstrap junta os itens com margem negativa; com gap não serve. */
        .pagination .page-item:not(:first-child) .page-link {
            margin-left: 0;
        }

        .pagination .page-link {
            padding: .25rem .55rem;
            font-size: .875rem;
            border-radius: .25rem;
        }
}


/* =====================================================================
   27. CONTEÚDO DO DETALHE — NOTA FISCAL / FINANCEIRO (.nf-*)
   ---------------------------------------------------------------------
   Seções, campos e cards montados por JS (Secao/Campo/Card) nos modais
   de Notas Fiscais e Financeiro. Cores dos cards seguem a situação do
   título: success (pago), danger (vencido), laranja (vence em breve),
   secondary (a vencer / em aberto). No modal negativo (vencido) as
   seções ganham o tom vermelho no bloco 21.
   ===================================================================== */

.nf-detalhe {
    font-size: .95rem;
}

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

.nf-secao-titulo {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: .4rem;
    margin-bottom: .75rem;
}

.nf-rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.nf-valor {
    font-weight: 600;
    word-break: break-word;
}

/* Chave de acesso da NF-e em fonte monoespaçada. */
.nf-chave {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .85rem;
    letter-spacing: .03em;
}

/* ---------- Cards de valor (Valor / Pago / A receber / Vencimento) ---------- */

.nf-card {
    height: 100%;
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: .5rem;
    padding: .5rem .75rem;
}

    .nf-card .nf-valor {
        font-size: 1.1rem;
    }

.nf-card-success {
    border-left-color: var(--bs-success);
}

.nf-card-danger {
    border-left-color: var(--bs-danger);
}

.nf-card-laranja {
    border-left-color: #fd7e14;
}

.nf-card-secondary {
    border-left-color: var(--bs-secondary);
}

/* Badge "Vence em breve". */
.text-bg-laranja {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

/* ---------- Nota filha (possui nota mãe) ---------- */

tr.nota-filha > td:first-child {
    border-left: 4px solid var(--bs-info) !important;
}

.badge-nota-filha {
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border: 1px solid var(--bs-info-border-subtle);
    font-weight: 600;
}

.nota-filha-texto {
    color: var(--bs-info-text-emphasis);
    font-weight: 600;
}

.nf-secao-titulo .badge-nota-filha {
    text-transform: none;
    letter-spacing: normal;
}

.nf-filha-destaque {
    border: 1px solid var(--bs-info-border-subtle);
    border-left: 4px solid var(--bs-info);
    background-color: var(--bs-info-bg-subtle);
    border-radius: .5rem;
    padding: .75rem 1rem 1rem;
}

.nf-filha-destaque-titulo {
    color: var(--bs-info-text-emphasis);
    font-weight: 700;
    margin-bottom: .5rem;
}

.nf-filha-numero {
    font-size: 1.25rem;
    color: var(--bs-info-text-emphasis);
}

/* Nota mãe: mesma ideia da filha, em roxo para não confundir */
.table > tbody > tr.nota-mae > * {
    --bs-table-bg: #f3edfe;
    --bs-table-color: #212529;
    --bs-table-hover-bg: #e2d4fb;
    --bs-table-hover-color: #212529;
}

tr.nota-mae > td:first-child {
    border-left: 4px solid #6f42c1 !important;
}

.badge.badge-nota-mae {
    background-color: #6f42c1;
    color: #fff;
    border: 1px solid #5a32a3;
    font-weight: 600;
}

.nf-mae-filhas {
    border-left: 4px solid #6f42c1;
}

/* Resumo da nota mãe: mãe - remessado - desfeito = saldo restante */
.nf-card-mae {
    border-left-color: #6f42c1;
}

.nf-card-destaque {
    background-color: var(--bs-success-bg-subtle);
}

    .nf-card-destaque.nf-card-danger {
        background-color: var(--bs-danger-bg-subtle);
    }

    .nf-card-destaque .nf-valor {
        font-size: 1.35rem;
        font-weight: 700;
    }

/* Desfazimento listado entre as filhas da nota mãe */
.badge.badge-desfazimento {
    background-color: #fdeaea;
    color: #c0392b;
    border: 1px solid #f5c2c7;
    font-weight: 600;
}

.nf-filha-desfazimento > td {
    color: #842029;
}

/* Carteira: o que a nota mãe (entrega futura) ainda tem para remessar */
.badge.badge-remessa-pendente {
    background-color: #efe7fd;
    color: #4b0fb0;
    border: 1px solid #d3bff9;
    font-weight: 600;
}

/* Selos clicáveis da carteira (agendamento e desfazimento) */
a.badge.badge-link:hover,
a.badge.badge-desfazimento:hover {
    filter: brightness(.92);
    text-decoration: underline !important;
}


/* =====================================================================
   28. AGENDAMENTO — checkbox e seleção (botão flutuante no bloco 35)
   ===================================================================== */

/* Checkbox de agendamento: maior e com destaque verde quando selecionado. */
.chk-agendar-lg {
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    border-width: 2px;
}

    .chk-agendar-lg:checked,
    .chk-agendar-lg:indeterminate {
        background-color: var(--bs-success);
        border-color: var(--bs-success);
    }

    /* Sem disponível para agendar: cinza, borda tracejada e cadeado, para não confundir com o vazio.
       pointer-events volta para o title (motivo) aparecer no hover */
    .chk-agendar-lg:disabled {
        opacity: 1;
        pointer-events: auto;
        cursor: not-allowed;
        border-style: dashed;
        border-color: var(--bs-secondary-color);
        background-color: var(--bs-secondary-bg);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%236c757d' d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3e%3c/svg%3e");
        background-size: 65%;
        background-position: center;
        background-repeat: no-repeat;
    }

.agendar-check-wrap {
    line-height: 1;
}

.agendar-check-rotulo {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
    margin-top: .15rem;
}

/* Realce da linha do item selecionado. */
tr.item-selecionado {
    --bs-table-bg: rgba(25, 135, 84, .12);
}

/* Faixa verde no pedido que tem item selecionado. */
.carteira-pedido.pedido-com-selecao {
    box-shadow: inset .3rem 0 0 var(--bs-success);
}


/* =====================================================================
   29. HOME — atalhos, indicadores e resumo
   ---------------------------------------------------------------------
   .home-atalho  : atalhos do topo (ícone cinza + título + descrição)
   .home-kpi     : indicadores (também usados no resumo do Financeiro)
   .dashboard-*  : card "Resumo" com carrossel de slides e gráficos
   ===================================================================== */

/* ---------- Atalhos e indicadores (base comum) ---------- */
.home-atalho,
.home-kpi {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    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,
    .home-kpi:hover {
        color: var(--bs-body-color);
        border-color: var(--bs-secondary);
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
        transform: translateY(-2px);
    }

.home-atalho-icone,
.home-kpi-icone {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    font-size: 1.2rem;
}

.home-atalho-icone {
    background-color: var(--bs-secondary);
    color: #fff;
}

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

    .home-atalho-texto strong {
        font-size: .9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

/* ---------- Indicadores ---------- */
.home-kpi-icone {
    flex-basis: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
}

.home-kpi-texto small {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .7rem;
}

.home-kpi-texto strong {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-kpi-detalhe {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Card Resumo: header na cor do menu lateral ---------- */
.dashboard-header {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    border-bottom-color: var(--navbar-bg);
}

/* Abas do carrossel (btn-outline-light sobre o header escuro).
   Declaração ÚNICA — antes havia duas, e a segunda (#343a40) vencia. */
.dashboard-abas .btn {
    white-space: nowrap;
}

.dashboard-abas .btn-outline-light.active {
    color: var(--navbar-bg);
}

/* ---------- Card Resumo: corpo e slides ---------- */
.dashboard-corpo {
    min-height: 320px;
}

.dashboard-slide-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

    .dashboard-slide-titulo h5 {
        font-size: 1rem;
        font-weight: 600;
    }

/* Botão "Ver ..." do slide: pílula com seta que anda no hover. */
.dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border: 1px solid var(--bs-secondary);
    border-radius: 50rem;
    color: var(--bs-secondary);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

    .dashboard-link i {
        transition: transform .15s;
    }

    .dashboard-link:hover,
    .dashboard-link:focus {
        background-color: var(--bs-secondary);
        color: #fff;
    }

        .dashboard-link:hover i,
        .dashboard-link:focus i {
            transform: translateX(3px);
        }

/* Mini-indicadores do slide (borda colorida à esquerda vem do JS). */
.dashboard-mini {
    height: 100%;
    padding: .45rem .75rem;
    border-radius: .375rem;
    background-color: var(--bs-tertiary-bg);
}

    .dashboard-mini small {
        display: block;
        font-size: .68rem;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
    }

    .dashboard-mini strong {
        font-size: 1rem;
        white-space: nowrap;
    }

.dashboard-grafico {
    min-height: 280px;
}

/* Carregando / erro / sem dados. */
.dashboard-vazio {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

/* Legenda do donut: nome à esquerda, quantidade/percentual à direita. */
.dashboard-grafico .apexcharts-legend-series {
    display: flex !important;
    align-items: center;
}

.dashboard-grafico .apexcharts-legend-text {
    display: inline-flex !important;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
}

.dashboard-legenda-nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-legenda-valor {
    font-weight: 600;
    white-space: nowrap;
}

    .dashboard-legenda-valor small {
        font-weight: 400;
        color: var(--bs-secondary-color);
        margin-left: .25rem;
    }

/* Ícone do botão Recarregar girando durante a carga. */
.girando {
    display: inline-block;
    animation: dashboard-girar 1s linear infinite;
}

@keyframes dashboard-girar {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Telas menores ---------- */
@media (max-width: 991.98px) {
    .dashboard-corpo {
        min-height: 0;
    }

    .dashboard-grafico {
        min-height: 240px;
    }
}

@media (max-width: 767.98px) {
    .dashboard-navegacao {
        width: 100%;
    }

    /* Abas rolam na horizontal, sem barra visível. */
    .dashboard-abas {
        flex: 1;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .dashboard-abas::-webkit-scrollbar {
            display: none;
        }

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

    .dashboard-mini strong {
        font-size: .9rem;
    }
}

/* ---------- Mini-indicador com link (abre a tela já filtrada) ---------- */
.dashboard-mini-link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
    padding-right: 1.6rem;
    transition: background-color .15s, box-shadow .15s;
}

    .dashboard-mini-link > i {
        position: absolute;
        right: .4rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
        color: var(--bs-secondary-color);
        transition: transform .15s, color .15s;
    }

    .dashboard-mini-link:hover,
    .dashboard-mini-link:focus {
        color: inherit;
        background-color: var(--bs-primary-bg-subtle);
        box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .06);
    }

        .dashboard-mini-link:hover > i,
        .dashboard-mini-link:focus > i {
            color: var(--bs-primary);
            transform: translate(3px, -50%);
        }

/* ---------- Carregando: caminhão andando numa linha do cinza ao verde ---------- */
.carregando-caminhao {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--bs-secondary-color);
}

    .carregando-caminhao small {
        font-size: .85rem;
    }

.carregando-trilho {
    position: relative;
    width: min(320px, 80%);
    height: 6px;
    margin-top: 1.4rem; /* espaço do caminhão em cima da linha */
    border-radius: 3px;
    background-color: #dcdcdc;
}

/* A linha vai ficando verde atrás do caminhão */
.carregando-progresso {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #c8c8c8, var(--tema-verde-claro, #4ED609) 55%, var(--tema-verde, #116837));
    animation: carregando-avancar 2.4s ease-in-out infinite;
}

.carregando-veiculo {
    position: absolute;
    bottom: 2px;
    left: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--tema-verde, #116837);
    transform: translateX(-50%);
    animation: carregando-andar 2.4s ease-in-out infinite;
}

    /* sacolejo leve do caminhão */
    .carregando-veiculo::before {
        display: inline-block;
        animation: carregando-sacolejar .3s ease-in-out infinite alternate;
    }

@keyframes carregando-avancar {
    0% { width: 0; opacity: 1; }
    85% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

@keyframes carregando-andar {
    0% { left: 0; opacity: 0; }
    8% { opacity: 1; }
    85% { left: 100%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes carregando-sacolejar {
    from { transform: translateY(0); }
    to { transform: translateY(-1.5px); }
}

/* Versão compacta, dentro dos indicadores */
.carregando-caminhao-mini {
    min-height: 0;
    align-items: flex-start;
    gap: 0;
    padding: .15rem 0 .2rem;
}

    .carregando-caminhao-mini .carregando-trilho {
        width: 120px;
        height: 4px;
        margin-top: 1rem;
    }

    .carregando-caminhao-mini .carregando-veiculo {
        font-size: 1rem;
    }

@media (prefers-reduced-motion: reduce) {
    .carregando-progresso,
    .carregando-veiculo,
    .carregando-veiculo::before {
        animation: none;
    }

    .carregando-progresso {
        width: 60%;
    }

    .carregando-veiculo {
        left: 60%;
    }
}

/* =====================================================================
   30. BUSCA GLOBAL POR Nº DE DOCUMENTO (MENU SUPERIOR)
   ===================================================================== */
.busca-global {
    position: relative;
    flex: 1 1 auto;
    max-width: 48rem;
    min-width: 0;
    margin: 0 1rem;
}

    .busca-global .form-control,
    .busca-global .input-group-text {
        font-size: 1.05rem;
        padding-top: .45rem;
        padding-bottom: .45rem;
    }

    .busca-global .input-group-text {
        font-size: 1.15rem;
    }

.busca-global-resultado {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

.busca-global-mensagem,
.busca-global-aviso {
    padding: .75rem 1rem;
    font-size: .875rem;
}

.busca-global-aviso {
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-warning-text-emphasis);
}

.busca-global-grupo + .busca-global-grupo {
    border-top: 1px solid var(--bs-border-color);
}

.busca-global-grupo-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

    .busca-global-grupo-titulo small {
        font-weight: 400;
        color: var(--bs-secondary-color);
    }

.busca-global-item {
    display: block;
    padding: .5rem 1rem;
    font-size: .95rem;
    text-decoration: none;
    color: var(--bs-body-color);
}

    .busca-global-item:hover,
    .busca-global-item:focus,
    .busca-global-grupo-titulo:hover {
        background: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

/* No celular o campo ocupa o espaco livre e o resultado usa a largura da tela */
@media (max-width: 767.98px) {
    .busca-global {
        margin: 0 .25rem;
        max-width: none;
    }

        .busca-global .input-group-text {
            display: none;
        }

        .busca-global .form-control {
            font-size: 1rem;
        }

    .busca-global-resultado {
        position: fixed;
        top: 3.5rem;
        left: .5rem;
        right: .5rem;
    }
}


/* =====================================================================
   31. ASSISTENTE (PAINEL; botão flutuante no bloco 35)
   ===================================================================== */
/* Estrelinhas de IA: douradas, com brilho leve */
.assistente-brilho {
    color: var(--assistente-brilho);
    display: inline-block;
    animation: assistente-brilho 2.4s ease-in-out infinite;
}

@keyframes assistente-brilho {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .65;
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistente-brilho {
        animation: none;
    }

    .botao-flutuante:hover,
    .botao-flutuante:focus-visible {
        transform: none;
    }
}

.assistente-painel {
    --bs-offcanvas-width: 420px;
}

/* Lixeira do cabecalho no mesmo estilo do btn-close (sem borda, mesma cor e opacidade) */
.assistente-limpar {
    border: 0;
    background: transparent;
    padding: .25em;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--bs-emphasis-color);
    opacity: var(--bs-btn-close-opacity, .5);
}

    .assistente-limpar:hover {
        opacity: var(--bs-btn-close-hover-opacity, .75);
    }

    .assistente-limpar:focus-visible {
        opacity: 1;
        outline: 0;
        box-shadow: var(--bs-btn-close-focus-shadow, 0 0 0 .25rem rgba(13, 110, 253, .25));
        border-radius: .375rem;
    }

/* Botao de enviar do painel, no mesmo verde do botao flutuante */
.assistente-enviar {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--assistente-cor-inicio), var(--assistente-cor-fim));
}

    .assistente-enviar:hover,
    .assistente-enviar:focus-visible {
        color: #fff;
        background: linear-gradient(135deg, var(--assistente-cor-hover-inicio), var(--assistente-cor-hover-fim));
    }

    .assistente-enviar:disabled {
        color: #fff;
        opacity: .6;
    }

.assistente-conversa {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.assistente-balao {
    max-width: 90%;
    padding: .6rem .85rem;
    border-radius: .75rem;
    font-size: .95rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.assistente-usuario {
    align-self: flex-end;
    background: var(--assistente-cor-inicio);
    color: #fff;
    border-bottom-right-radius: .2rem;
}

.assistente-resposta {
    align-self: flex-start;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-bottom-left-radius: .2rem;
}

/* Resposta do modelo montada em paragrafos e listas (markdown basico) */
.assistente-formatado {
    white-space: normal;
}

    .assistente-formatado p {
        margin: 0 0 .4rem;
    }

    .assistente-formatado ul,
    .assistente-formatado ol {
        margin: 0 0 .4rem;
        padding-left: 1.2rem;
    }

    .assistente-formatado li + li {
        margin-top: .2rem;
    }

    .assistente-formatado > :last-child {
        margin-bottom: 0;
    }

.assistente-pensando {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.assistente-erro {
    border-color: var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
}

@media (max-width: 767.98px) {
    .assistente-painel {
        --bs-offcanvas-width: 100%;
    }
}


/* =====================================================================
   32. ADMINISTRATIVO — CARDS DE CONFIGURAÇÃO
   ---------------------------------------------------------------------
   Mesmo molde dos atalhos da Home (bloco 29), um pouco maiores e com a
   descrição em até 2 linhas. A cor vem do perfil exigido:
   admin-card-danger (Super Admin) / admin-card-secondary (Admin).
   ===================================================================== */
.admin-card {
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-left-width: 4px;
}

.admin-card-danger {
    border-left-color: var(--bs-danger);
}

.admin-card-secondary {
    border-left-color: var(--bs-secondary);
}

    .admin-card-danger:hover {
        border-color: var(--bs-danger);
    }

    .admin-card-secondary:hover {
        border-color: var(--bs-secondary);
    }

.admin-card-icone {
    flex-basis: 3rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.4rem;
}

.admin-card .home-atalho-texto strong {
    font-size: 1rem;
    white-space: normal;
}

/* Descricao inteira, quebrando linha (no atalho da Home ela e cortada) */
.admin-card .home-atalho-texto small {
    margin-top: .2rem;
    font-size: .8rem;
    white-space: normal;
    overflow: visible;
}

.admin-card-perfil {
    align-self: flex-start;
    margin-top: .5rem;
    font-weight: 600;
}


/* =====================================================================
   33. LISTA COM CHECKBOX (EMPRESAS / PARCEIROS / PERMISSÕES DO USUÁRIO)
   ===================================================================== */

/* Neutraliza o .form-check global (margem e fonte grandes) dentro da lista. */
.selecao-checkbox-linha .form-check {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.selecao-checkbox-linha {
    cursor: pointer;
}

    .selecao-checkbox-linha:hover {
        background-color: rgba(25, 135, 84, .06);
    }

    .selecao-checkbox-linha .form-check-label {
        font-size: .95rem;
        font-weight: 400;
        cursor: pointer;
        flex: 1;
    }

/* Mesmo checkbox verde do agendamento. */
.selecao-checkbox-item {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    cursor: pointer;
    border-width: 2px;
}

    .selecao-checkbox-item:checked {
        background-color: var(--bs-success);
        border-color: var(--bs-success);
    }

    .selecao-checkbox-item:focus {
        border-color: var(--bs-success);
        box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25);
    }

    .selecao-checkbox-item:disabled,
    .selecao-checkbox-item:disabled + .form-check-label {
        cursor: not-allowed;
    }

/* Linha marcada fica levemente verde. */
.selecao-checkbox-linha:has(.selecao-checkbox-item:checked) {
    background-color: rgba(25, 135, 84, .1);
}


/* =====================================================================
   34. LOGIN
   ===================================================================== */

/* Foto da lavoura 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(10, 61, 31, .92) 0%, rgba(16, 104, 56, .78) 45%, rgba(16, 104, 56, .35) 100%),
        url(/dist/assets/img/img-background.png) center / cover no-repeat fixed;
    color: #fff;
    overflow-x: hidden;
}

.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: #4fd60d;
        }

/* ---- 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: #106838;
    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(25, 135, 84, .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: #198754;
            background-color: #fff;
        }

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

    .login-moderno-ver-senha:hover {
        color: #106838;
    }

.login-moderno-link {
    font-size: .875rem;
    font-weight: 500;
    color: #106838;
    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(25, 135, 84, .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: #106838;
        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(10, 61, 31, .85) 0%, rgba(16, 104, 56, .7) 100%),
            url(/dist/assets/img/img-background.png) 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;
    }
}


/* =====================================================================
   35. BOTÕES FLUTUANTES (ASSISTENTE E AGENDAMENTO)
   ---------------------------------------------------------------------
   Mesmo visual do assistente para todos. Ficam empilhados no canto
   direito, acima do rodapé fixo: o assistente embaixo e o agendamento
   logo acima dele (ou no lugar dele quando o assistente não aparece).
   ===================================================================== */
:root {
    --botao-flutuante-direita: 1.25rem;
    --botao-flutuante-base: 4.5rem;
    --botao-flutuante-altura: 2.75rem;
    --botao-flutuante-espaco: .6rem;
}

.botao-flutuante {
    position: fixed;
    right: var(--botao-flutuante-direita);
    bottom: var(--botao-flutuante-base);
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: var(--botao-flutuante-altura);
    padding: 0 1.1rem;
    border: 0;
    border-radius: 2rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, var(--assistente-cor-inicio), var(--assistente-cor-fim));
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .botao-flutuante:hover,
    .botao-flutuante:focus-visible,
    .botao-flutuante:active {
        color: #fff;
        background: linear-gradient(135deg, var(--assistente-cor-hover-inicio), var(--assistente-cor-hover-fim));
        box-shadow: 0 .65rem 1.25rem rgba(0, 0, 0, .25);
    }

    .botao-flutuante:hover,
    .botao-flutuante:focus-visible {
        transform: translateY(-2px);
    }

/* Contador dentro do botão (ex.: itens marcados para agendar) */
.botao-flutuante-contador {
    min-width: 1.5rem;
    padding: .25rem .45rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--assistente-cor-inicio);
    background-color: #fff;
}

/* Agendamento empilhado acima do assistente */
.agendamento-fab {
    bottom: calc(var(--botao-flutuante-base) + var(--botao-flutuante-altura) + var(--botao-flutuante-espaco));
}

/* Sem o assistente na tela, o agendamento desce para o lugar dele */
body:not(:has(.assistente-botao)) .agendamento-fab {
    bottom: var(--botao-flutuante-base);
}

@media (max-width: 767.98px) {
    :root {
        --botao-flutuante-direita: .75rem;
    }

    .botao-flutuante {
        padding: 0 .9rem;
    }
}