/* ==========================================================================
   Base Fiscal -- folha de estilo da aplicacao
   Mobile first sobre o Bootstrap 5.3 (requisito 49).

   TEMA CLARO E ESCURO
   -------------------
   Toda cor sai de uma variavel. O tema escuro so redefine as variaveis em
   html[data-tema="escuro"] -- nao ha regra de componente duplicada.

   O mesmo atributo carrega data-bs-theme, entao os componentes do proprio
   Bootstrap (modal, dropdown, tabela, toast, offcanvas) trocam de tema
   sozinhos. Sem isso seria preciso reescrever cada um a mao.

   O atributo e gravado pelo PHP a partir do cookie, antes de o HTML chegar
   ao navegador: a pagina ja nasce no tema certo, sem piscar branco.
   ========================================================================== */

:root {
    /* ---- Marca ---------------------------------------------------------- */
    --bf-laranja:        #f5731a;
    --bf-laranja-claro:  #ff8a3d;
    --bf-laranja-escuro: #e0590a;
    --bf-laranja-grad:   linear-gradient(135deg, #fb7115 0%, #f05e00 100%);

    /* ---- Superficies ---------------------------------------------------- */
    --bf-fundo:       #eef0f3;
    --bf-superficie:  #ffffff;
    --bf-superficie-2:#f8fafc;
    --bf-borda:       #e7eaef;
    --bf-borda-suave: #f1f5f9;

    /* ---- Texto ---------------------------------------------------------- */
    --bf-texto:       #243447;
    --bf-texto-fraco: #6b7888;
    --bf-texto-forte: #16202e;
    --bf-rotulo:      #2d3e50;

    /* ---- Menu lateral --------------------------------------------------- */
    --bf-sidebar-largura: 246px;
    --bf-sidebar-bg:      #ffffff;
    --bf-sidebar-bg-hover:rgba(245, 115, 26, .07);
    --bf-sidebar-texto:   #445366;
    --bf-sidebar-icone:   #8b98a8;
    --bf-sidebar-secao:   #9aa7b6;
    --bf-sidebar-borda:   #e7eaef;
    --bf-sidebar-ativo:   var(--bf-laranja);
    --bf-sidebar-ativo-bg:rgba(245, 115, 26, .10);

    /* ---- Semanticas ----------------------------------------------------- */
    --bf-primaria: var(--bf-laranja);
    --bf-sucesso:  #2bb673;
    --bf-alerta:   #f5b301;
    --bf-perigo:   #e74c3c;
    --bf-info:     #2f6bd8;

    /* ---- Realces suaves (fundo claro + texto escuro) -------------------- */
    --bf-realce-ok-bg:    #e3f7ed;
    --bf-realce-ok-txt:   #1f8f5a;
    --bf-realce-erro-bg:  #fdeaea;
    --bf-realce-erro-txt: #c0392b;
    --bf-realce-aviso-bg: #fff3cd;
    --bf-realce-aviso-txt:#8a5a2b;

    /* Indicador de saude da base. Fica sempre sobre a faixa laranja, entao
       nao muda com o tema -- mas continua saindo de variavel, para que a cor
       seja ajustada num lugar so. */
    --bf-selo-ok:     #7cfc8a;
    --bf-selo-alerta: #ffd166;
    --bf-selo-erro:   #ff5e5e;

    /* ---- Formas --------------------------------------------------------- */
    --bf-raio:        .75rem;
    --bf-raio-pequeno:.5rem;
    --bf-topo-altura: 58px;
    --bf-sombra:      0 1px 3px rgba(20, 30, 50, .08);
    --bf-sombra-alta: 0 8px 24px rgba(20, 30, 50, .12);
    --bf-foco:        0 0 0 .2rem rgba(245, 115, 26, .18);
}

/* --------------------------------------------------------------------------
   Tema escuro -- so redefine variaveis
   -------------------------------------------------------------------------- */
html[data-tema="escuro"] {
    --bf-fundo:       #161b22;
    --bf-superficie:  #1f2630;
    --bf-superficie-2:#242c37;
    --bf-borda:       #2f3a47;
    --bf-borda-suave: #283039;

    --bf-texto:       #e8edf3;
    --bf-texto-fraco: #9aa7b6;
    --bf-texto-forte: #ffffff;
    --bf-rotulo:      #cdd6e0;

    --bf-sidebar-bg:      #1f2630;
    --bf-sidebar-texto:   #c3cdd9;
    --bf-sidebar-icone:   #8b98a8;
    --bf-sidebar-secao:   #7a8798;
    --bf-sidebar-borda:   #2f3a47;
    --bf-sidebar-bg-hover:rgba(245, 115, 26, .12);
    --bf-sidebar-ativo-bg:rgba(245, 115, 26, .16);

    --bf-realce-ok-bg:    rgba(43, 182, 115, .16);
    --bf-realce-ok-txt:   #5fd6a0;
    --bf-realce-erro-bg:  rgba(231, 76, 60, .16);
    --bf-realce-erro-txt: #f08a80;
    --bf-realce-aviso-bg: rgba(245, 179, 1, .16);
    --bf-realce-aviso-txt:#f0c765;

    --bf-sombra:      0 1px 3px rgba(0, 0, 0, .45);
    --bf-sombra-alta: 0 8px 24px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
    background-color: var(--bf-fundo);
    color: var(--bf-texto);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--bf-primaria); }
a:hover { text-decoration: underline; color: var(--bf-laranja-escuro); }

/* Numeros fiscais alinhados: tabular evita "dancar" de coluna */
.num, td.num, .table td.num, .table th.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

::selection { background: rgba(245, 115, 26, .25); }

/* --------------------------------------------------------------------------
   Barra superior da marca (faixa laranja, fixa no topo)
   -------------------------------------------------------------------------- */
.topo-app {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--bf-topo-altura);
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 .875rem;
    background: var(--bf-laranja-grad);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

@media (min-width: 992px) {
    .topo-app { padding: 0 1.125rem; }
}

.topo-app a { color: #fff; }
.topo-app a:hover { color: #fff; text-decoration: none; }

/* Botao que recolhe o menu (desktop) ou abre o offcanvas (mobile) */
.btn-topo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: .5625rem;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s;
}
.btn-topo:hover  { background: rgba(255, 255, 255, .28); color: #fff; }
.btn-topo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.topo-marca {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    min-width: 0;
}
.topo-marca .simbolo {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    border-radius: .5625rem;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
}
.topo-marca .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topo-direita {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* Indicador de saude da base */
.selo-base {
    display: flex;
    align-items: center;
    gap: .4375rem;
    padding: .3125rem .75rem;
    border-radius: 1.25rem;
    background: rgba(0, 0, 0, .16);
    font-size: .78rem;
    font-weight: 600;
}
.selo-base .ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bf-selo-ok);
    flex-shrink: 0;
}
.selo-base.instavel .ponto { background: var(--bf-selo-alerta); }
.selo-base.fora .ponto     { background: var(--bf-selo-erro); }

/* Usuario no topo */
.topo-usuario {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: none;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    padding: .25rem .375rem;
    border-radius: .5rem;
}
.topo-usuario:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.topo-usuario::after { margin-left: .125rem; }
.topo-usuario .nome  { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pill-perfil {
    background: rgba(255, 255, 255, .22);
    border-radius: .375rem;
    padding: .125rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.btn-sair {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    border-radius: .5625rem;
    padding: .375rem .875rem;
    font-size: .84rem;
    font-weight: 600;
}
.btn-sair:hover { background: rgba(255, 255, 255, .24); color: #fff; text-decoration: none; }

/* Em telas estreitas sobra pouco espaco: fica so o essencial. */
@media (max-width: 991.98px) {
    .topo-usuario .nome,
    .selo-base .txt,
    .btn-sair .txt { display: none; }
    .btn-sair { padding: .375rem .625rem; }
}

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */
.app-shell   { display: flex; min-height: 100vh; padding-top: var(--bf-topo-altura); }
.app-main    { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1 1 auto; padding: 1rem; }

@media (min-width: 992px) {
    .app-content { padding: 1.5rem 1.75rem; }
}

.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--bf-borda);
    color: var(--bf-texto-fraco);
    font-size: .8125rem;
}

@media (min-width: 992px) {
    .app-footer { padding: .875rem 1.75rem; }
}

/* --------------------------------------------------------------------------
   Menu lateral
   -------------------------------------------------------------------------- */
.sidebar {
    background: var(--bf-sidebar-bg);
    width: var(--bf-sidebar-largura);
}

/* No mobile o menu e um offcanvas do proprio Bootstrap. */
.sidebar.offcanvas-lg { --bs-offcanvas-width: var(--bf-sidebar-largura); }

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: var(--bf-topo-altura);
        align-self: flex-start;
        height: calc(100vh - var(--bf-topo-altura));
        flex: 0 0 var(--bf-sidebar-largura);
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--bf-sidebar-borda);
        transition: flex-basis .16s ease, width .16s ease;
    }
    .sidebar-body { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
}


.sidebar-nav { padding: .625rem .5rem 1rem; }

.sidebar-nav .nav-secao {
    padding: .875rem .875rem .3125rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bf-sidebar-secao);
    white-space: nowrap;
}

.sidebar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .875rem;
    margin-bottom: .0625rem;
    border-radius: var(--bf-raio-pequeno);
    color: var(--bf-sidebar-texto);
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background-color .12s, color .12s;
}
.sidebar-nav .nav-link:hover {
    background: var(--bf-sidebar-bg-hover);
    color: var(--bf-texto-forte);
    text-decoration: none;
}
.sidebar-nav .nav-link.active {
    background: var(--bf-sidebar-ativo-bg);
    color: var(--bf-sidebar-ativo);
    border-left-color: var(--bf-sidebar-ativo);
    font-weight: 600;
}
.sidebar-nav .nav-link i {
    font-size: 1.0625rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--bf-sidebar-icone);
}
.sidebar-nav .nav-link:hover i  { color: var(--bf-texto); }
.sidebar-nav .nav-link.active i { color: var(--bf-sidebar-ativo); }
.sidebar-nav .nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Aviso discreto de andamento no rodape do menu. Os modulos ainda nao
   implementados nao aparecem como itens: apenas sao contados aqui. */
.sidebar-pendentes {
    padding: .625rem 1.125rem;
    border-top: 1px solid var(--bf-sidebar-borda);
    color: var(--bf-sidebar-secao);
    font-size: .6875rem;
}
.sidebar-pendentes span { cursor: help; white-space: nowrap; }

.sidebar-rodape {
    padding: .75rem 1.125rem;
    border-top: 1px solid var(--bf-sidebar-borda);
    color: var(--bf-texto-fraco);
}
.sidebar-rodape .text-muted { color: var(--bf-texto-fraco) !important; }

/* ---- Menu recolhido (somente icones) -----------------------------------
   O rotulo nao some do HTML: ele vira um balao no hover. Assim o menu
   recolhido continua utilizavel e acessivel a leitor de tela. */
@media (min-width: 992px) {
    html[data-menu="recolhido"] { --bf-sidebar-largura: 62px; }

    html[data-menu="recolhido"] .sidebar-nav { padding-left: .375rem; padding-right: .375rem; }

    html[data-menu="recolhido"] .sidebar-nav .nav-link {
        justify-content: center;
        padding-left: .5rem;
        padding-right: .5rem;
        gap: 0;
    }
    html[data-menu="recolhido"] .sidebar-nav .nav-link span {
        position: absolute;
        left: calc(100% + .5rem);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1040;
        padding: .375rem .625rem;
        border-radius: var(--bf-raio-pequeno);
        background: var(--bf-texto);
        color: var(--bf-superficie);
        font-size: .8125rem;
        box-shadow: var(--bf-sombra-alta);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .12s;
    }
    html[data-menu="recolhido"] .sidebar-nav .nav-link:hover span,
    html[data-menu="recolhido"] .sidebar-nav .nav-link:focus-visible span {
        opacity: 1;
        visibility: visible;
    }

    /* O titulo da secao vira um tracinho: mantem a separacao sem texto. */
    html[data-menu="recolhido"] .sidebar-nav .nav-secao {
        font-size: 0;
        padding: .5rem .625rem .25rem;
        margin: .25rem .25rem 0;
        border-top: 1px solid var(--bf-sidebar-borda);
    }

    html[data-menu="recolhido"] .sidebar-pendentes,
    html[data-menu="recolhido"] .sidebar-rodape { display: none; }
}

/* --------------------------------------------------------------------------
   Barra de contexto (migalhas)
   -------------------------------------------------------------------------- */
.topbar {
    align-items: center;
    gap: 1rem;
    padding: .625rem 1.75rem;
    background: var(--bf-superficie);
    border-bottom: 1px solid var(--bf-borda);
}

.breadcrumb { margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bf-texto-fraco); }
.breadcrumb-item.active { color: var(--bf-texto-fraco); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Cabecalho da pagina
   -------------------------------------------------------------------------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--bf-texto-forte);
}
.page-subtitle {
    margin: .25rem 0 0;
    color: var(--bf-texto-fraco);
    font-size: .875rem;
}
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.ambiente-dev {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .25rem .625rem;
    border-radius: 1rem;
    background: var(--bf-realce-aviso-bg);
    color: var(--bf-realce-aviso-txt);
    font-size: .75rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cartoes e indicadores
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--bf-superficie);
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-raio);
    box-shadow: var(--bf-sombra);
}
.card-header {
    background: var(--bf-superficie);
    border-bottom: 1px solid var(--bf-borda);
    padding: .875rem 1.125rem;
    font-weight: 600;
    color: var(--bf-texto-forte);
}
.card-footer {
    background: var(--bf-superficie);
    border-top: 1px solid var(--bf-borda);
}

.card-indicador { position: relative; overflow: hidden; }
.card-indicador .indicador-rotulo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bf-texto-fraco);
}
.card-indicador .indicador-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.card-indicador .indicador-icone {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    opacity: .12;
}

/* Cartao de indicador cujo destino ainda nao existe: nao e link. */
.tag-breve-card {
    position: absolute;
    top: .625rem;
    right: .625rem;
    padding: .0625rem .375rem;
    border-radius: .625rem;
    background: var(--bf-borda);
    color: var(--bf-texto-fraco);
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.card-indicador-inativo { opacity: .65; }

/* --------------------------------------------------------------------------
   Tabelas (scroll horizontal no mobile -- requisito 49)
   -------------------------------------------------------------------------- */
.tabela-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--bf-raio);
}

.table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--bf-texto);
    color: var(--bf-texto);
}
.table > thead > tr > th {
    background: var(--bf-superficie-2);
    border-bottom: 1px solid var(--bf-borda);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bf-texto-fraco);
    white-space: nowrap;
    padding: .6875rem .75rem;
}
.table > tbody > tr > td {
    padding: .625rem .75rem;
    vertical-align: middle;
    border-color: var(--bf-borda-suave);
    color: var(--bf-texto);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--bf-sidebar-bg-hover);
    color: var(--bf-texto);
}

/* Coluna de acoes fixa a direita no desktop */
.col-acoes { width: 1%; white-space: nowrap; }

/* Ordenacao de coluna */
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--bf-primaria); }
th.ordenavel .bi { font-size: .7rem; opacity: .5; }
th.ordenavel.ordenado .bi { opacity: 1; color: var(--bf-primaria); }

/* --------------------------------------------------------------------------
   Estados: vazio, carregando
   -------------------------------------------------------------------------- */
.estado-vazio {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--bf-texto-fraco);
}
.estado-vazio i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; }

.skeleton {
    background: linear-gradient(90deg,
                var(--bf-borda-suave) 25%,
                var(--bf-borda) 37%,
                var(--bf-borda-suave) 63%);
    background-size: 400% 100%;
    animation: skeleton 1.3s ease infinite;
    border-radius: .25rem;
    height: 1rem;
}
@keyframes skeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.carregando-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bf-superficie) 72%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: var(--bf-raio);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.form-label {
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .3125rem;
    color: var(--bf-rotulo);
}
.form-label .obrigatorio,
.obrigatorio { color: var(--bf-perigo); }

.form-control, .form-select {
    background-color: var(--bf-superficie);
    border-color: var(--bf-borda);
    color: var(--bf-texto);
    border-radius: var(--bf-raio-pequeno);
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    background-color: var(--bf-superficie);
    border-color: var(--bf-laranja);
    color: var(--bf-texto);
    box-shadow: var(--bf-foco);
}
.form-control::placeholder { color: var(--bf-texto-fraco); opacity: .75; }
.form-control:disabled, .form-select:disabled { background-color: var(--bf-superficie-2); }

.input-group-text {
    background-color: var(--bf-superficie-2);
    border-color: var(--bf-borda);
    color: var(--bf-texto-fraco);
}

.form-text { font-size: .75rem; color: var(--bf-texto-fraco); }

.form-check-input:checked {
    background-color: var(--bf-laranja);
    border-color: var(--bf-laranja);
}
.form-check-input:focus { border-color: var(--bf-laranja); box-shadow: var(--bf-foco); }

/* Bloco de filtros das listagens */
.filtros {
    background: var(--bf-superficie);
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-raio);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Campo com indicacao de origem fiscal */
.campo-fiscal { position: relative; }
.campo-fiscal .badge-fonte {
    position: absolute;
    right: .5rem;
    top: 2.05rem;
    font-size: .625rem;
}

/* --------------------------------------------------------------------------
   Botoes
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--bf-raio-pequeno); font-weight: 600; font-size: .875rem; }
.btn:focus-visible { box-shadow: var(--bf-foco); }

.btn-primary {
    --bs-btn-bg: var(--bf-laranja);
    --bs-btn-border-color: var(--bf-laranja);
    --bs-btn-hover-bg: var(--bf-laranja-escuro);
    --bs-btn-hover-border-color: var(--bf-laranja-escuro);
    --bs-btn-active-bg: var(--bf-laranja-escuro);
    --bs-btn-active-border-color: var(--bf-laranja-escuro);
    --bs-btn-disabled-bg: var(--bf-laranja);
    --bs-btn-disabled-border-color: var(--bf-laranja);
    box-shadow: 0 2px 8px rgba(242, 97, 0, .28);
}

.btn-outline-primary {
    --bs-btn-color: var(--bf-laranja);
    --bs-btn-border-color: var(--bf-laranja);
    --bs-btn-hover-bg: var(--bf-laranja);
    --bs-btn-hover-border-color: var(--bf-laranja);
    --bs-btn-active-bg: var(--bf-laranja);
    --bs-btn-active-border-color: var(--bf-laranja);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bf-texto-fraco);
    --bs-btn-border-color: var(--bf-borda);
    --bs-btn-hover-bg: var(--bf-superficie-2);
    --bs-btn-hover-border-color: var(--bf-borda);
    --bs-btn-hover-color: var(--bf-texto);
}

/* --------------------------------------------------------------------------
   Abas da tela de produto (requisito 35)
   -------------------------------------------------------------------------- */
.abas-produto {
    border-bottom: 1px solid var(--bf-borda);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.abas-produto .nav-link {
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bf-texto-fraco);
    font-size: .875rem;
    padding: .625rem .875rem;
}
.abas-produto .nav-link:hover { color: var(--bf-primaria); border-bottom-color: var(--bf-borda); }
.abas-produto .nav-link.active {
    color: var(--bf-primaria);
    background: transparent;
    border-bottom-color: var(--bf-primaria);
    font-weight: 700;
}
.abas-produto .nav-link .bi { margin-right: .35rem; }

/* --------------------------------------------------------------------------
   Vigencia e auditoria
   -------------------------------------------------------------------------- */
.badge-vigencia {
    font-size: .6875rem;
    font-weight: 600;
    padding: .25em .5em;
}

.linha-tempo { position: relative; padding-left: 1.75rem; }
.linha-tempo::before {
    content: '';
    position: absolute;
    left: .4375rem;
    top: .375rem;
    bottom: .375rem;
    width: 2px;
    background: var(--bf-borda);
}
.linha-tempo-item { position: relative; padding-bottom: 1.25rem; }
.linha-tempo-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: .3125rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--bf-superficie);
    border: 2px solid var(--bf-primaria);
}

/* Diff da auditoria: antes em vermelho, depois em verde */
.diff-antes {
    background: var(--bf-realce-erro-bg);
    color: var(--bf-realce-erro-txt);
    padding: .0625rem .3125rem;
    border-radius: .1875rem;
}
.diff-depois {
    background: var(--bf-realce-ok-bg);
    color: var(--bf-realce-ok-txt);
    padding: .0625rem .3125rem;
    border-radius: .1875rem;
}

/* --------------------------------------------------------------------------
   Autocomplete (NCM, produtos)
   -------------------------------------------------------------------------- */
.autocomplete-wrapper { position: relative; }
.autocomplete-lista {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--bf-superficie);
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-raio-pequeno);
    box-shadow: var(--bf-sombra-alta);
    margin-top: .25rem;
}
.autocomplete-item {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .8125rem;
    border-bottom: 1px solid var(--bf-borda-suave);
    color: var(--bf-texto);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.selecionado { background: var(--bf-sidebar-bg-hover); }
.autocomplete-item .codigo { font-weight: 700; font-family: ui-monospace, monospace; }
.autocomplete-item .descricao { color: var(--bf-texto-fraco); display: block; font-size: .75rem; }

/* --------------------------------------------------------------------------
   Tela de login
   -------------------------------------------------------------------------- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bf-laranja-grad);
}
.login-card {
    width: 100%;
    max-width: 26rem;
    background: var(--bf-superficie);
    border-radius: 1.125rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    padding: 2.25rem 2rem 1.75rem;
}
.login-marca { text-align: center; margin-bottom: 1.5rem; }
.login-marca i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.25rem;
    background: var(--bf-laranja-grad);
    color: #fff;
    font-size: 2.125rem;
    box-shadow: 0 8px 20px rgba(242, 97, 0, .28);
}
.login-marca h1 { font-size: 1.375rem; font-weight: 700; margin: .875rem 0 .125rem; }
.login-marca p  { font-size: .8125rem; color: var(--bf-texto-fraco); margin: 0; }

/* --------------------------------------------------------------------------
   Componentes do Bootstrap que precisam do nosso token
   -------------------------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--bf-superficie);
    --bs-dropdown-border-color: var(--bf-borda);
    --bs-dropdown-link-color: var(--bf-texto);
    --bs-dropdown-link-hover-bg: var(--bf-superficie-2);
    --bs-dropdown-link-hover-color: var(--bf-texto);
    box-shadow: var(--bf-sombra-alta);
}

.modal-content {
    background-color: var(--bf-superficie);
    border-color: var(--bf-borda);
    border-radius: var(--bf-raio);
}
.modal-header, .modal-footer { border-color: var(--bf-borda); }

.offcanvas { background-color: var(--bf-sidebar-bg); color: var(--bf-texto); }
.offcanvas-header { border-bottom: 1px solid var(--bf-sidebar-borda); }

.pagination {
    --bs-pagination-bg: var(--bf-superficie);
    --bs-pagination-border-color: var(--bf-borda);
    --bs-pagination-color: var(--bf-texto-fraco);
    --bs-pagination-hover-bg: var(--bf-superficie-2);
    --bs-pagination-hover-color: var(--bf-texto);
    --bs-pagination-active-bg: var(--bf-laranja);
    --bs-pagination-active-border-color: var(--bf-laranja);
    --bs-pagination-disabled-bg: var(--bf-superficie);
    --bs-pagination-disabled-border-color: var(--bf-borda);
}

.progress { background-color: var(--bf-borda); }
.progress-bar { background-color: var(--bf-laranja); }

hr { border-color: var(--bf-borda); opacity: 1; }

.text-muted { color: var(--bf-texto-fraco) !important; }

/* Alertas: no escuro o fundo claro do Bootstrap fica ilegivel. */
html[data-tema="escuro"] .alert-secondary {
    background-color: var(--bf-superficie-2);
    border-color: var(--bf-borda);
    color: var(--bf-texto);
}

/* --------------------------------------------------------------------------
   Impressao
   -------------------------------------------------------------------------- */
@media print {
    .topo-app, .sidebar, .topbar, .app-footer,
    .page-actions, .filtros, .navbar { display: none !important; }
    .app-shell   { padding-top: 0; }
    .app-content { padding: 0; }
    .card { border: none; box-shadow: none; }
}

/* ==========================================================================
   Grafico de barras do painel de consumo da API
   Feito em CSS puro: sem biblioteca externa, imprime igual a tela e nao
   depende de script de terceiro que a politica do cliente possa bloquear.
   ========================================================================== */
.gr-barras {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 180px;
    overflow-x: auto;
    padding-bottom: 1.25rem;
    position: relative;
}

.gr-barra-col {
    flex: 1 0 14px;
    min-width: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.gr-barra {
    width: 100%;
    background: var(--bf-laranja);
    border-radius: 2px 2px 0 0;
    min-height: 1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: opacity .15s ease;
}

.gr-barra-col:hover .gr-barra { opacity: .75; }

/* Fatia de erros dentro da propria barra: da para ver a proporcao sem
   precisar comparar duas barras lado a lado. */
.gr-barra-erro {
    width: 100%;
    background: var(--bf-perigo);
    border-radius: 2px 2px 0 0;
}

.gr-barra-rotulo {
    position: absolute;
    bottom: -1.15rem;
    font-size: .62rem;
    color: var(--bf-texto-fraco);
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center;
}

/* Em telas estreitas o rotulo de cada dia vira ruido: some. */
@media (max-width: 767.98px) {
    .gr-barras { height: 140px; padding-bottom: .25rem; }
    .gr-barra-rotulo { display: none; }
}