/*
 * Totais presos na base da janela, a barra de uma linha e a gaveta — o desenho comum.
 *
 * Nasceu no `<style>` de `Views/Shared/_TotaisNotaFiscal.cshtml` (divergencias 998, 999 e 1014: o
 * quadro `Totais` da `Pesquisa Nota Fiscal`, de `Refaturar Estoque` e de `Baixar estoque de NF
 * substituída`) e veio para ca com o script (`alpha-totais.js`) quando o card de totais do
 * orcamento passou a usar a mesma barra e a mesma gaveta no celular (divergencia 1058) — segundo
 * consumidor, secao 3 do `CLAUDE.md`. O que fica em cada tela:
 *
 *   - o desenho do card preso (`.totais-fixo > .card`: a nota com a borda azul de 3 px; o orcamento,
 *     o pedido, a requisicao e a OC com a borda e a sombra da faixa `Faturar` da nota, 1006 — a classe
 *     `totais-faixa`, abaixo);
 *   - **quando** a barra aparece no lugar do card — a tela poe `display: flex` na `.totais-barra` e
 *     esconde o `.card-header`/`.card-body` do card fechado na faixa de largura que quiser (a nota:
 *     o teste de 10/10/2026, em toda largura; o orcamento, o pedido e a OC: abaixo de 768 px e na
 *     janela baixa — a classe `totais-celular`, abaixo).
 *
 * `totais-faixa` e `totais-celular` nasceram no `<style>` do card de totais do orcamento (1058) e
 * vieram para ca quando o pedido, a requisicao e a OC prenderam o rodape do mesmo jeito
 * (divergencia 1074, onda 5 da analise de usabilidade de Pedido, Requisicao, Cotacao e OC) — o
 * mesmo CSS repetido em quatro views. A requisicao so tem botoes, sem valor: leva `totais-faixa` e
 * nao `totais-celular` — no celular a fileira de botoes fica presa como esta, sem barra nem gaveta.
 *
 * O involucro tem de ser filho direto do conteudo da pagina — o `sticky` so anda dentro do pai —
 * e embrulha **so** o card: modal dentro dele ficaria presa no empilhamento do `z-index` (10).
 * `sticky` e nao `fixed`: continua no fluxo, herda a largura do conteudo com o sidebar aberto ou
 * recolhido e, no fim da rolagem, para no proprio lugar sem cobrir nada. Acima das celulas presas
 * da grade (`grade-acoes` 1 e 3, cabecalho `grade-janela` 4 e 5, `alpha-grade.css`), abaixo do botao
 * de topo (105), do cabecalho do tema e das modais (1050+). Com um menu `...` de grade aberto desce a
 * 2, para o menu de uma linha logo acima dele abrir por cima. O botao de topo (`#kt_scrolltop`) e o
 * `scroll-padding-bottom` (foco por `Tab`, `AlphaForm.focarCampo`) sobem a altura do involucro,
 * medida pelo `alpha-totais.js` (`--totais-fixo-altura`).
 *
 * A altura da barra e em px — 48 da barra + a borda de cima do card —, porque o tema encolhe a raiz
 * para 12 px abaixo do `lg` e `rem` daria 37.
 *
 * So posicionamento e peso de fonte — **nenhuma cor propria**: `--bs-gray-*`, `--bs-primary` e
 * `--bs-black-rgb` sao as do Metronic, entao o tema escuro sai pronto.
 */
.totais-barra { display: none; }

.totais-fixo { position: sticky; bottom: 0; z-index: 10; }
body:has(.grade-acoes .dropdown-menu.show) .totais-fixo:not(.aberta) { z-index: 2; }
html:has(.totais-fixo) { scroll-padding-bottom: calc(var(--totais-fixo-altura, 12rem) + .75rem); }
body:has(.totais-fixo) .scrolltop { bottom: calc(var(--totais-fixo-altura, 12rem) + .75rem); }

/* A barra: o titulo a esquerda, o total a direita, a seta. */
.totais-fixo .totais-barra {
    align-items: center; gap: .75rem; width: 100%; height: 48px;
    padding: 0 .75rem 0 1rem; border: 0; background: none; color: inherit; text-align: left;
    /* Ela mora na faixa do `scroll-padding-bottom` acima: sem isto o `Tab` que chega nela rola a pagina ate o fim. */
    scroll-margin-bottom: calc(-1 * (var(--totais-fixo-altura, 52px) + .75rem));
}
.totais-barra-titulo { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.totais-barra-nome { font-size: .95rem; font-weight: 700; color: var(--bs-gray-800); }
.totais-barra-nota { font-size: .8rem; color: var(--bs-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.totais-barra-total { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; line-height: 1.15; }
.totais-barra-rotulo { font-size: .7rem; font-weight: 700; color: var(--bs-gray-600); letter-spacing: .02em; white-space: nowrap; }
.totais-barra-valor {
    font-size: 1.15rem; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.totais-barra-seta { flex: 0 0 auto; pointer-events: none; }
.totais-barra-seta i { transition: transform .2s ease; }

/* A gaveta aberta: o card sobe da base por cima de tudo menos das modais; o fundo e o `::before` do involucro. */
.totais-fixo.aberta { z-index: 1045; min-height: var(--totais-fixo-altura, 52px); }
.totais-fixo.aberta::before { content: ""; position: fixed; inset: 0; background: rgba(var(--bs-black-rgb), .35); }
.totais-fixo.aberta > .card {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0 !important;
    max-height: 78vh; max-height: 78dvh;
    border-radius: 1rem 1rem 0 0; box-shadow: 0 -10px 30px rgba(var(--bs-black-rgb), .2);
}
.totais-fixo.aberta > .card > .card-header { flex: 0 0 auto; }
.totais-fixo.aberta > .card > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.totais-fixo.aberta .totais-barra { flex: 0 0 auto; height: 51px; border-top: 3px solid var(--bs-primary); }
.totais-fixo.aberta .totais-barra-seta i { transform: rotate(180deg); }
body:has(.totais-fixo.aberta) .scrolltop { display: none; }

/* De 768 px para cima a gaveta sobe na coluna do conteudo, nao por cima do sidebar (medida no `alpha-totais.js`). */
@media (min-width: 768px) {
    .totais-fixo.aberta > .card { left: var(--totais-esq, 0); right: auto; width: var(--totais-larg, 100%); }
}

/* O desenho da faixa `Faturar` da nota (1006): o fundo do card, a borda de cima e a sombra do tema, sem o canto de baixo. */
.totais-faixa > .card {
    border-top: 1px solid var(--bs-gray-200);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    box-shadow: 0 -6px 18px rgba(var(--bs-dark-rgb), .1);
}

/* A barra no lugar do card abaixo de 768 px e na janela baixa (ate 500 px de altura — o celular deitado, como na 999). */
@media (max-width: 767.98px), (max-height: 500px) {
    .totais-celular .totais-barra { display: flex; }
    .totais-celular:not(.aberta) > .card > .card-body { display: none; }
}