/* ═══════════════════════════════════════════════════════════════════════════
   Visual novo do escritório — camada comum a todas as telas.
   Vale só com o visual novo ligado (Central → Recursos) e só para admin e vendedor
   (body.ln-ativo). O lojista e os escritórios sem o visual novo não carregam nada daqui.
   Três temas, escolhidos no rodapé do menu: claro, menu escuro (padrão) e tudo escuro
   (html.ln-noite, com as cores da Central).
   ═══════════════════════════════════════════════════════════════════════════ */

body.ln-ativo {
    --vn-fundo: #f5f6fa;
    --vn-cartao: #ffffff;
    --vn-cartao-2: #f8fafc;
    --vn-borda: #e5e7eb;
    --vn-borda-2: #d1d5db;
    --vn-texto: #1f2937;
    --vn-suave: #6b7280;
    --vn-fraco: #9ca3af;
    --vn-hover: #f3f4f6;
    --vn-raio: 14px;
    background: var(--vn-fundo);
    color: var(--vn-texto);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}
body.ln-ativo main.admin-main { background: transparent; }

/* ── Títulos: tamanho único por nível (as telas antigas usavam 2,5rem no h1) ── */
:where(body.ln-ativo) :is(h1, .h1) { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
:where(body.ln-ativo) :is(h2, .h2) { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
:where(body.ln-ativo) :where(.display-4, .display-5, .display-6) { font-size: 1.6rem; font-weight: 700; }

/* ── Cartões: borda fina, sem sombra e sem "pular" (só os cartões com foto, do catálogo, continuam subindo) ── */
:where(body.ln-ativo) .card { background: var(--vn-cartao); border: 1px solid var(--vn-borda); border-radius: var(--vn-raio); box-shadow: none; }
body.ln-ativo .card:not(:has(> .card-img-top, > a > .card-img-top)):hover { transform: none; box-shadow: none; }
:where(body.ln-ativo) .card-header { background: transparent; border-bottom: 1px solid var(--vn-borda); padding: .8rem 1rem; }
:where(body.ln-ativo) .card-header:first-child { border-radius: calc(var(--vn-raio) - 1px) calc(var(--vn-raio) - 1px) 0 0; }
:where(body.ln-ativo) .card-header :where(h1, h2, h3, h4, h5, h6) { font-size: 1rem; font-weight: 650; }
:where(body.ln-ativo) .card-footer { background: transparent; border-top: 1px solid var(--vn-borda); }

/* ── Botões sem o "pulo" ao passar o mouse ── */
body.ln-ativo .btn:hover { transform: none; }

/* ── Linha de título com botões: quebra em vez de espremer o título ── */
body.ln-ativo .card-header.d-flex,
body.ln-ativo .d-flex.justify-content-between { flex-wrap: wrap; row-gap: .5rem; column-gap: .75rem; }

/* ── Tabelas no padrão da Central ── */
body.ln-ativo .table { --bs-table-bg: transparent; --bs-table-color: var(--vn-texto); color: var(--vn-texto); }
body.ln-ativo .table > thead:not(.table-dark):not([class*="bg-"]) > tr > th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
    color: var(--vn-suave); white-space: nowrap; border-bottom-color: var(--vn-borda-2);
}
body.ln-ativo .table > :not(caption) > * > * { border-bottom-color: var(--vn-borda); }
body.ln-ativo .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--vn-hover); }

/* ── Página ── */
body.ln-ativo .breadcrumb { background: transparent; box-shadow: none; padding: .1rem 0; font-size: .82rem; }
body.ln-ativo footer.mt-5 { margin-top: 2rem !important; }
body.ln-ativo footer.mt-5 > .container { padding-top: .9rem !important; padding-bottom: .9rem !important; }

/* ── Componentes das telas revistas ── */
/* cabeçalho da tela: título + o que dá para fazer ali */
body.ln-ativo .vn-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
body.ln-ativo .vn-cab h1 { margin: 0; }
body.ln-ativo .vn-cab .vn-sub { color: var(--vn-suave); font-size: .88rem; margin-top: .15rem; }
body.ln-ativo .vn-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
body.ln-ativo .vn-acoes .btn { white-space: nowrap; }
/* números do topo, compactos */
body.ln-ativo .vn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
body.ln-ativo .vn-kpi { background: var(--vn-cartao); border: 1px solid var(--vn-borda); border-radius: 12px; padding: .7rem .9rem; min-width: 0; }
body.ln-ativo .vn-kpi .rot { color: var(--vn-suave); font-size: .78rem; display: flex; align-items: center; gap: .35rem; }
body.ln-ativo .vn-kpi .val { font-size: 1.4rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
body.ln-ativo .vn-kpi .sub { color: var(--vn-fraco); font-size: .75rem; }
/* filtros: no celular ficam atrás do botão "Filtros" */
body.ln-ativo .vn-filtros-botao { display: none; }

@media (max-width: 767.98px) {
    /* faixa de botões das telas antigas: rola de lado, sem quebrar o texto do botão */
    body.ln-ativo .card-header .d-flex:has(> .btn ~ .btn ~ .btn),
    body.ln-ativo .d-flex.justify-content-between > .d-flex:has(> .btn ~ .btn ~ .btn) {
        flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px;
    }
    body.ln-ativo .card-header .btn, body.ln-ativo .d-flex.justify-content-between .btn { white-space: nowrap; }
    body.ln-ativo .card-header.d-flex > :is(h1, h2, h3, h4, h5, h6):first-child { flex: 1 1 100%; }
    body.ln-ativo .vn-cab { margin-bottom: .75rem; }
    body.ln-ativo .vn-cab > .vn-acoes { width: 100%; }
    body.ln-ativo .vn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    body.ln-ativo .vn-kpi { padding: .55rem .7rem; }
    body.ln-ativo .vn-kpi .val { font-size: 1.2rem; }
    body.ln-ativo .vn-filtros-botao { display: inline-flex; }
    body.ln-ativo .vn-filtros:not(.vn-aberto) .vn-filtro-extra { display: none !important; }

    /* o quadro em volta de uma lista que virou cartões some (evita borda dupla) */
    body.ln-ativo .card:has(table.vn-cartoes, #divisionsGrid) { background: transparent; border: 0; }
    body.ln-ativo .card:has(table.vn-cartoes, #divisionsGrid) > :is(.card-body, .card-header) { padding-left: 0; padding-right: 0; }
    body.ln-ativo .card:has(table.vn-cartoes, #divisionsGrid) > .card-body.border-bottom { border-bottom: 0 !important; }
    /* tabelas viram cartões (o rótulo de cada valor vem do cabeçalho; ver o script no base.html) */
    body.ln-ativo table.vn-cartoes > thead { display: none; }
    body.ln-ativo table.vn-cartoes,
    body.ln-ativo table.vn-cartoes > tbody,
    body.ln-ativo table.vn-cartoes > tbody > tr,
    body.ln-ativo table.vn-cartoes > tbody > tr > td { display: block; width: 100%; }
    body.ln-ativo .table-responsive:has(> table.vn-cartoes) { overflow: visible; }
    body.ln-ativo table.vn-cartoes { min-width: 0 !important; margin-bottom: 0; }
    body.ln-ativo table.vn-cartoes > tbody > tr {
        background: var(--vn-cartao); border: 1px solid var(--vn-borda); border-radius: 12px;
        padding: .55rem .8rem; margin-bottom: .6rem;
    }
    body.ln-ativo table.vn-cartoes > tbody > tr > td {
        position: relative; border: 0; padding: .2rem 0 .2rem 40%; min-height: 1.6rem; text-align: left !important;
        box-shadow: none !important; background: transparent !important; white-space: normal; word-break: break-word;
    }
    body.ln-ativo table.vn-cartoes > tbody > tr > td::before {
        content: attr(data-label); position: absolute; left: 0; top: .2rem; width: 37%; text-align: left;
        color: var(--vn-suave); font-size: .76rem; font-weight: 600; line-height: 1.5;
    }
    body.ln-ativo table.vn-cartoes > tbody > tr > td.vn-titulo { padding-left: 0; font-weight: 600; font-size: .98rem; padding-bottom: .35rem; }
    body.ln-ativo table.vn-cartoes > tbody > tr > td.vn-acoes {
        padding-left: 0; padding-top: .5rem; margin-top: .35rem; border-top: 1px solid var(--vn-borda);
        display: flex; flex-wrap: wrap; gap: .35rem;
    }
    body.ln-ativo table.vn-cartoes > tbody > tr > td.vn-acoes .ms-1 { margin-left: 0 !important; }
    body.ln-ativo table.vn-cartoes > tbody > tr > :is(td.vn-titulo, td.vn-acoes, td[data-label=""], td[colspan])::before { content: none; }
    body.ln-ativo table.vn-cartoes > tbody > tr > td[data-label=""] { padding-left: 0; }
    body.ln-ativo table.vn-cartoes > tbody > tr > td[colspan] { padding-left: 0; text-align: center; }
    body.ln-ativo table.vn-cartoes > tbody > tr > td:empty { display: none; }
}

/* ═══ Tudo escuro (html.ln-noite + data-bs-theme="dark" do Bootstrap) ═══════════ */
html.ln-noite { color-scheme: dark; }
html.ln-noite[data-bs-theme="dark"] {
    --bs-body-bg: #0b1120; --bs-body-color: #e2e8f0; --bs-border-color: #223049;
    --bs-secondary-bg: #18233b; --bs-tertiary-bg: #131c31; --bs-emphasis-color: #fff; --bs-secondary-color: #94a3b8;
}
html.ln-noite body.ln-ativo {
    --vn-fundo: #0b1120;
    --vn-cartao: #131c31;
    --vn-cartao-2: #0f172a;
    --vn-borda: #223049;
    --vn-borda-2: #2b3a55;
    --vn-texto: #e2e8f0;
    --vn-suave: #94a3b8;
    --vn-fraco: #64748b;
    --vn-hover: rgba(148, 163, 184, .08);
    /* as variáveis de sempre do base.html */
    --surface: #131c31; --bg: #0b1120; --border: #223049; --text: #e2e8f0; --text-muted: #94a3b8;
    background: var(--vn-fundo);   /* vence o fundo claro fixo do base.html */
    color: var(--vn-texto);
}
html.ln-noite body.ln-ativo .card { background-color: var(--vn-cartao); color: var(--vn-texto); border-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .card-header:not([class*="bg-"]) { background-color: transparent; color: var(--vn-texto); }
html.ln-noite body.ln-ativo .ln-topo { background: rgba(11, 17, 32, .88) !important; backdrop-filter: blur(10px);
                                       border-bottom: 1px solid var(--vn-borda); box-shadow: none; }
html.ln-noite body.ln-ativo :is(.bg-white, .bg-body) { background-color: var(--vn-cartao) !important; color: var(--vn-texto); }
html.ln-noite body.ln-ativo .bg-light { background-color: var(--vn-cartao-2) !important; color: var(--vn-texto); }
html.ln-noite body.ln-ativo :is(.text-dark, .text-black, .text-body) { color: var(--vn-texto) !important; }
html.ln-noite body.ln-ativo :is(.text-muted, .text-secondary) { color: var(--vn-suave) !important; }
html.ln-noite body.ln-ativo :is(.border, .border-top, .border-bottom, .border-start, .border-end, .border-light) { border-color: var(--vn-borda) !important; }
html.ln-noite body.ln-ativo .table-light { --bs-table-bg: var(--vn-cartao-2); --bs-table-color: var(--vn-texto); --bs-table-border-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(148, 163, 184, .04); color: var(--vn-texto); }
html.ln-noite body.ln-ativo .btn-light { background: var(--vn-cartao-2); border-color: var(--vn-borda); color: var(--vn-texto); }
html.ln-noite body.ln-ativo .btn-outline-dark { color: var(--vn-texto); border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo .btn-outline-secondary { color: #cbd5e1; border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo .btn-outline-secondary:hover { background: var(--vn-hover); color: #fff; }
html.ln-noite body.ln-ativo :is(.dropdown-menu, .modal-content, .offcanvas, .popover, .toast) { background-color: var(--vn-cartao); color: var(--vn-texto); }
html.ln-noite body.ln-ativo .dropdown-item { color: var(--vn-texto); }
html.ln-noite body.ln-ativo .dropdown-item:hover { background: var(--vn-hover); color: #fff; }
html.ln-noite body.ln-ativo .list-group-item { background-color: var(--vn-cartao); color: var(--vn-texto); border-color: var(--vn-borda); }
html.ln-noite body.ln-ativo :is(.form-control, .form-select) { background-color: var(--vn-cartao-2); border-color: var(--vn-borda-2); color: var(--vn-texto); }
html.ln-noite body.ln-ativo :is(.form-control, .form-select):focus { background-color: var(--vn-cartao-2); color: #fff; }
html.ln-noite body.ln-ativo .form-control::placeholder { color: var(--vn-fraco); }
html.ln-noite body.ln-ativo .input-group-text { background: var(--vn-cartao); border-color: var(--vn-borda-2); color: var(--vn-suave); }
html.ln-noite body.ln-ativo .nav-tabs { border-bottom-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .nav-tabs .nav-link.active { background: var(--vn-cartao); border-color: var(--vn-borda) var(--vn-borda) var(--vn-cartao); color: #fff; }
html.ln-noite body.ln-ativo .spinner-overlay { background: rgba(11, 17, 32, .8); }
html.ln-noite body.ln-ativo .accordion-button:not(.collapsed) { background: var(--vn-cartao-2); color: #fff; }
/* telas antigas feitas com Tailwind */
html.ln-noite body.ln-ativo :is(.bg-gray-50, .bg-gray-100, .bg-gray-200) { background-color: var(--vn-cartao-2) !important; }
html.ln-noite body.ln-ativo :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--vn-texto) !important; }
html.ln-noite body.ln-ativo :is(.text-gray-600, .text-gray-500) { color: var(--vn-suave) !important; }
html.ln-noite body.ln-ativo :is(.border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--vn-borda) !important; }
/* fundos brancos escritos direto no HTML das telas antigas */
html.ln-noite body.ln-ativo :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"],
    [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background-color:white"], [style*="background-color: white"],
    [style*="background:#f8f9fa"], [style*="background: #f8f9fa"], [style*="background-color: #f8f9fa"], [style*="background:#f9fafb"],
    [style*="background: #f9fafb"], [style*="background:#f8fafc"], [style*="background: #f8fafc"], [style*="background:#f4f6fb"],
    [style*="background: #f1f5f9"], [style*="background:#f1f5f9"]) {
    background-color: var(--vn-cartao) !important; background-image: none !important; color: var(--vn-texto);
}
/* catálogo e telas antigas com cor de texto/fundo fixa no style.css */
html.ln-noite { background: #0b1120; }
html.ln-noite body.ln-ativo .card :is(.card-title, h1, h2, h3, h4, h5, h6):not([class*="text-"]) { color: var(--vn-texto); }
html.ln-noite body.ln-ativo :is(.produto .card-title, .produto-titulo, .quantidade, #view-controls label) { color: var(--vn-texto); }
html.ln-noite body.ln-ativo :is(#cart-summary, #vitrine-container, .produto-card, .vitrine-options-content) { background-color: var(--vn-cartao); color: var(--vn-texto); }
/* foto de produto continua sobre fundo branco (a maioria tem fundo branco) */
html.ln-noite body.ln-ativo :is(.card-img-top, .produto-imagem, .produto-imagem-container) { background-color: #fff; }
html.ln-noite .swal2-popup { background: #131c31; color: #e2e8f0; }
html.ln-noite .swal2-title, html.ln-noite .swal2-html-container { color: #e2e8f0; }

/* ── Menu do tema (rodapé do menu lateral) ── */
.ln-rodape .dropup { flex: 1; display: flex; }
.ln-rodape .dropup > button { flex: 1; }
.ln-tema-menu { min-width: 200px; }
.ln-tema-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.ln-tema-menu .dropdown-item .bi-check2 { margin-left: auto; visibility: hidden; }
.ln-tema-menu .dropdown-item.active { background: transparent; color: inherit; font-weight: 600; }
.ln-tema-menu .dropdown-item.active .bi-check2 { visibility: visible; color: var(--primary); }

/* ── A faixa "Instale o App" fica por baixo das janelas (antes cobria os botões Salvar/Cancelar) ── */
body.ln-ativo #pwa-install-banner { z-index: 1040 !important; }

/* ── Tudo escuro: pontos que ficavam ilegíveis (pedido de 07/10, 23h45) ── */
/* o navegador reescreve o style de quem o JavaScript mexe como "rgb(255, 255, 255)" */
html.ln-noite body.ln-ativo :is([style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"],
    [style*="background: white"], [style*="background-color: white"]) {
    background-color: var(--vn-cartao) !important; color: var(--vn-texto);
}
/* filtro "Todas as faixas" (divisão e Catálogo Geral) */
html.ln-noite body.ln-ativo :is(#faixa-dropdown, #faixa-filter-btn) {
    background: var(--vn-cartao) !important; color: var(--vn-texto) !important; border-color: var(--vn-borda-2) !important;
}
html.ln-noite body.ln-ativo #faixa-dropdown label { color: var(--vn-texto); }
html.ln-noite body.ln-ativo #faixa-dropdown hr { border-color: var(--vn-borda); }
/* resumo do carrinho (Total do pedido / Total de itens) */
html.ln-noite body.ln-ativo .cart-summary { background-color: var(--vn-cartao-2); box-shadow: none; border: 1px solid var(--vn-borda); }
html.ln-noite body.ln-ativo .cart-summary .summary-label { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .cart-summary-qty .summary-value { color: var(--vn-texto); }
html.ln-noite body.ln-ativo .cart-summary-total .summary-value { color: #4ade80; }
/* Painel completo (admin): a paleta da tela vira a escura */
html.ln-noite {
    --c-text: #e2e8f0; --c-muted: #94a3b8; --c-border: #223049; --c-bg: #0b1120;
    --c-blue-bg: rgba(59, 130, 246, .14); --c-green-bg: rgba(16, 185, 129, .14); --c-amber-bg: rgba(245, 158, 11, .14);
    --c-violet-bg: rgba(139, 92, 246, .14);
}
html.ln-noite body.ln-ativo :is(.dash-card, .period-btn:not(.active), .btn-icon-only) { background: var(--vn-cartao); border-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .modern-table thead tr { background: var(--vn-cartao-2); }
html.ln-noite body.ln-ativo .modern-table tbody tr:hover td { background: var(--vn-hover); }
html.ln-noite body.ln-ativo :is(.status-ok) { color: #6ee7b7; }
html.ln-noite body.ln-ativo :is(.status-warn) { color: #fcd34d; }
html.ln-noite body.ln-ativo :is(.status-err) { background: rgba(239, 68, 68, .16); color: #fca5a5; }
html.ln-noite body.ln-ativo .dash-card [style*="color:#1a1a2e"], html.ln-noite body.ln-ativo [style*="color:#1a1a2e"] { color: var(--vn-texto) !important; }
html.ln-noite body.ln-ativo .ss-box, html.ln-noite body.ln-ativo .ss-dropdown { background: var(--vn-cartao-2); border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo :is(.ss-text-input, .ss-item) { color: var(--vn-texto); }
html.ln-noite body.ln-ativo .ss-item { border-bottom-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .ss-item:hover { background: var(--vn-hover); }

/* ── Rodapé acompanha a cor do escritório (no tudo escuro, continua escuro) ── */
html:not(.ln-noite) body.ln-ativo > footer.mt-5 { background: var(--primary-gradient) !important; border-top: 0 !important; }
html:not(.ln-noite) body.ln-ativo > footer.mt-5 :is(p, small, a) { color: rgba(255, 255, 255, .92) !important; }
html:not(.ln-noite) body.ln-ativo > footer.mt-5 small { color: rgba(255, 255, 255, .72) !important; }

/* ═══ Visual em teste (vt): Divisões em imagens ou em lista ═══ */
body.ln-ativo .vt-div-card { background: var(--vn-cartao); border: 1px solid var(--vn-borda); border-radius: 14px; overflow: hidden;
                             height: 100%; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
body.ln-ativo .vt-div-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--vn-borda)); box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }
/* Inativa: só a foto e os dados ficam apagados. Com a opacidade no cartão inteiro, o menu "⋯" ficava preso nele:
   saía apagado e por trás do cartão de baixo (22/10/2026, Makru) */
body.ln-ativo .vt-div-card.inativa .vt-div-foto, body.ln-ativo .vt-div-card.inativa .vt-div-chips { opacity: .72; }
.vt-div-lista tr.vt-inativa > td:not(:last-child) { opacity: .75; }
body.ln-ativo .vt-div-foto { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--vn-cartao-2); overflow: hidden; }
body.ln-ativo .vt-div-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; z-index: 1; }
body.ln-ativo .vt-div-card:hover .vt-div-foto img { transform: scale(1.04); }
body.ln-ativo .vt-div-sem-foto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--vn-fraco); font-size: 1.8rem; }
body.ln-ativo .vt-div-nome { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.4rem .7rem .5rem; color: #fff; font-weight: 700;
                             font-size: .88rem; line-height: 1.2; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
body.ln-ativo .vt-div-info { padding: .6rem .65rem .65rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
body.ln-ativo .vt-div-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
body.ln-ativo .vt-chip { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: var(--vn-cartao-2); border: 1px solid var(--vn-borda);
                         color: var(--vn-suave); white-space: nowrap; }
body.ln-ativo .vt-chip.forte { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: transparent; color: var(--primary); font-weight: 600; }
body.ln-ativo .vt-chip.aviso { background: rgba(245, 158, 11, .14); border-color: transparent; color: #b45309; font-weight: 600; }
html.ln-noite body.ln-ativo .vt-chip.aviso { color: #fcd34d; }
body.ln-ativo .vt-div-acoes { display: flex; gap: .3rem; margin-top: auto; }
body.ln-ativo .vt-div-mini { display: block; width: 56px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--vn-cartao-2); }
body.ln-ativo .vt-div-mini img { width: 100%; height: 100%; object-fit: cover; }
body.ln-ativo .vt-div-lista td { padding-top: .45rem; padding-bottom: .45rem; }
@media (max-width: 575.98px) {
    body.ln-ativo .vt-div-acoes .btn { padding-left: .45rem; padding-right: .45rem; }
    body.ln-ativo .vt-div-nome { font-size: .8rem; }
}

/* janela de tela cheia (mapa do Início): o style.css antigo limita a largura de todas as janelas */
body.ln-ativo .modal-dialog.modal-fullscreen { max-width: none; width: 100vw; margin: 0; }

/* Assistente de planilhas e Pergunte ao assistente, no tudo escuro */
html.ln-noite body.ln-ativo :is(.ap-card, .as-card, .as-ia) { background: var(--vn-cartao); border-color: var(--vn-borda); color: var(--vn-texto); }
html.ln-noite body.ln-ativo .ap-num { background: var(--vn-cartao-2); }
html.ln-noite body.ln-ativo :is(.ap-num span, .ap-rel-quadro .nota, .as-fontes, .as-pensando) { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .ap-soltar { border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo .ap-intencao label { border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo .ap-intencao input:checked + label { background: var(--vn-hover); }
html.ln-noite body.ln-ativo .ap-origem { background: rgba(99, 102, 241, .18); color: #c7d2fe; }
html.ln-noite body.ln-ativo .ap-dup-tipo { background: rgba(251, 146, 60, .16); color: #fdba74; }
html.ln-noite body.ln-ativo .ap-dup-tipo.leve { background: rgba(99, 102, 241, .18); color: #c7d2fe; }

/* ── Barra de busca do catálogo: a margem era a do Bootstrap antigo (15px) e passava 3px da tela ── */
body.ln-ativo .search-container { margin-left: -12px; margin-right: -12px; }

/* ── "Instale o App" no computador: começa depois do menu lateral (antes ficava cortada por baixo dele) ── */
@media (min-width: 992px) {
  body.ln-ativo #pwa-install-banner { left: 264px !important; }
  body.ln-ativo.ln-recolhido #pwa-install-banner { left: 72px !important; }
}

/* ── Barra dos selecionados nos Repasses (lista e Meus repasses): também começa depois do menu lateral;
      antes o menu cobria o começo dela (quantos itens, pares e valor) ── */
@media (min-width: 992px) {
  body.ln-ativo .rp-barra-selecao { left: 264px; transition: transform .2s ease, left .18s ease; }
  body.ln-ativo.ln-recolhido .rp-barra-selecao { left: 72px; }
}

/* ── Catálogo: cartão de produto enxuto (novidades em teste, .vt-catalogo) ── */
.vt-catalogo .produto { padding: 6px; margin-bottom: 8px; }
.vt-catalogo .card { border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: none; overflow: hidden; }
.vt-catalogo .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.vt-catalogo .card-img-top { height: 170px; }
.vt-catalogo .card-body { padding: .7rem .8rem .8rem; justify-content: flex-start; }
.vt-catalogo .card-title { font-size: .98rem; text-align: left; margin-bottom: .15rem; line-height: 1.25; }
.vt-catalogo .vt-info { text-align: left; padding: 0; margin: 0 0 .55rem !important; display: block; }
.vt-catalogo .vt-codigos { display: flex; flex-wrap: wrap; gap: 0 .45rem; font-size: .8rem; color: #6b7280; }
.vt-catalogo .vt-codigos span + span::before { content: '·'; margin-right: .45rem; color: #cbd5e1; }
.vt-catalogo .vt-info .pdv-info, .vt-catalogo .vt-preco { margin: .3rem 0 0; font-size: .9rem; }
.vt-catalogo .vt-rotulo { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 700; margin-right: .2rem; }
.vt-catalogo .btn-caracteristicas { font-size: .8rem; }
.vt-catalogo .modo-adicao { display: inline-flex; align-self: flex-start; border: 1px solid #d1d5db; border-radius: 999px; padding: 2px; margin-bottom: .55rem !important; }
.vt-catalogo .modo-adicao .form-check { margin: 0; padding: 0; min-height: 0; }
.vt-catalogo .modo-adicao .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.vt-catalogo .modo-adicao .form-check-label { display: block; padding: .18rem .75rem; border-radius: 999px; font-size: .8rem; cursor: pointer; color: #4b5563; }
.vt-catalogo .modo-adicao .form-check-input:checked + .form-check-label { background: var(--primary-fundo); color: #fff; font-weight: 600; }
.vt-catalogo .modo-adicao .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--primary); outline-offset: 1px; }
.vt-catalogo :is(.quantidade-multipla, .quantidade-simples) { align-items: center; gap: .5rem; margin-bottom: .4rem !important; }
.vt-catalogo :is(.quantidade-multipla, .quantidade-simples):not([style*="none"]) { display: flex !important; }   /* o script põe display:block/none */
.vt-catalogo :is(.quantidade-multipla, .quantidade-simples) label { margin: 0; font-size: .8rem; color: #6b7280; }
.vt-catalogo :is(.quantidade-multipla-input, .quantidade-simples-input) { max-width: 96px; height: 34px; padding: .25rem .55rem; }
.vt-catalogo .tamanhos.mt-3 { margin-top: .25rem !important; }
.vt-catalogo .vt-obs { margin-top: .35rem; }
.vt-catalogo .vt-obs summary { font-size: .8rem; color: var(--primary); cursor: pointer; list-style: none; width: fit-content; }
.vt-catalogo .vt-obs summary::-webkit-details-marker { display: none; }
.vt-catalogo .vt-obs[open] summary { margin-bottom: .3rem; }
.vt-catalogo .data-desejada-container { margin-top: .5rem !important; font-size: .8rem; }
.vt-catalogo .vt-rodape-produto { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.vt-catalogo .vt-total { display: flex; flex-direction: column; line-height: 1.15; font-size: .72rem; color: #6b7280; min-width: 0; }
.vt-catalogo .vt-total strong { font-size: 1rem; color: #111827; white-space: nowrap; }
.vt-catalogo .add-to-cart { border-radius: 10px; font-weight: 600; padding: .45rem .9rem; white-space: nowrap; flex-shrink: 0; }
.vt-catalogo .quick-add-btn { background: #fff; color: var(--primary); border: 1px solid #e5e7eb; width: 36px; height: 36px; box-shadow: 0 2px 6px rgba(15, 23, 42, .12); }
.vt-catalogo .quick-add-btn:hover { background: var(--primary-fundo); color: #fff; }
@media (max-width: 575.98px) {
  .vt-catalogo .produto { padding: 4px 2px; margin-bottom: 4px; }
  .vt-catalogo .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: .75rem; padding: .65rem .7rem .7rem; }
  .vt-catalogo .card:hover { transform: none; }
  .vt-catalogo .card > .image-link { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .vt-catalogo .card .card-img-top { width: 104px; height: 104px; padding: 2px; border-radius: 10px; background: #fff; }
  .vt-catalogo .card-body { display: contents; }
  .vt-catalogo .card-body > * { grid-column: 1 / -1; }
  .vt-catalogo .card-body > :is(.card-title, .badge, .vt-info, .modo-adicao) { grid-column: 2; }
  .vt-catalogo .card-body > .badge { justify-self: start; }
  .vt-catalogo .card-title { padding-right: 2.4rem; }
  .vt-catalogo .modo-adicao { justify-self: start; margin-bottom: .2rem !important; }
  .vt-catalogo .card-body > :is(.quantidade-multipla, .quantidade-simples, .tamanhos, .mb-2) { margin-top: .5rem; }
  .vt-catalogo .quick-add-container { top: 8px; right: 8px; }
}
html.ln-noite body.ln-ativo .vt-catalogo .card { border-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .vt-catalogo :is(.vt-codigos, .vt-rotulo, .vt-total, :is(.quantidade-multipla, .quantidade-simples) label) { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .vt-catalogo .vt-total strong { color: var(--vn-texto); }
html.ln-noite body.ln-ativo .vt-catalogo .modo-adicao { border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo .vt-catalogo .modo-adicao .form-check-label { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .vt-catalogo .modo-adicao .form-check-input:checked + .form-check-label { color: #fff; }
html.ln-noite body.ln-ativo .vt-catalogo .quick-add-btn { background: var(--vn-cartao-2); border-color: var(--vn-borda-2); }
html.ln-noite body.ln-ativo .search-container { background: rgba(11, 17, 32, .94); box-shadow: 0 1px 0 var(--vn-borda); }

/* ── Ver pedido (novidades em teste) ── */
body.ln-ativo .vt-pedido .vn-cab h1 { font-size: 1.35rem; }
body.ln-ativo .vt-situacao-selo { font-size: .72rem; font-weight: 600; vertical-align: middle; }
body.ln-ativo .vt-secao { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--vn-suave); margin-bottom: .45rem; }
body.ln-ativo .vt-dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .92rem; }
body.ln-ativo .vt-dl dt { font-weight: 500; color: var(--vn-suave); }
body.ln-ativo .vt-dl dd { margin: 0; min-width: 0; }
body.ln-ativo .vt-grade-mini { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
body.ln-ativo .vt-grade-mini span { display: inline-flex; gap: .3rem; align-items: baseline; border: 1px solid var(--vn-borda); border-radius: 6px; padding: 0 .4rem; font-size: .76rem; line-height: 1.5; }
body.ln-ativo .vt-grade-mini b { font-weight: 700; }
body.ln-ativo .vt-totais { margin-left: auto; max-width: 340px; margin-top: .75rem; font-size: .92rem; }
body.ln-ativo .vt-totais > div { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
body.ln-ativo .vt-total-final { border-top: 1px solid var(--vn-borda); margin-top: .25rem; padding-top: .4rem !important; font-weight: 700; font-size: 1.05rem; }
body.ln-ativo .vt-historico { list-style: none; padding: 0; margin: 0; }
body.ln-ativo .vt-historico li { padding: .45rem 0; border-bottom: 1px solid var(--vn-borda); }
body.ln-ativo .vt-historico li:last-child { border-bottom: 0; }
@media (max-width: 767.98px) {
  body.ln-ativo .vt-totais { max-width: none; }
  body.ln-ativo .vt-pedido .vn-acoes { width: 100%; }
}

/* ── Checkout (novidades em teste, .vt-checkout) ── */
.vt-checkout #checkout-form { border: 1px solid #e5e7eb; box-shadow: none !important; border-radius: 16px; }
.vt-checkout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea):not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid #d1d5db !important; border-radius: 10px !important; padding: .5rem .75rem; background: #fff; box-shadow: none !important; min-height: 40px; }
.vt-checkout :is(input, select, textarea):focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important; }
.vt-checkout label.block { font-size: .8rem; color: #4b5563; font-weight: 600; }
.vt-checkout #checkout-form > .mb-6 > button[onclick*="toggle"]:not(.w-full) { border: 1px solid #d1d5db; border-radius: 999px; padding: .35rem .85rem; color: #374151; font-weight: 600; flex-wrap: wrap; }
.vt-checkout #vitrine-container { border: 1px solid #e5e7eb; box-shadow: none !important; border-radius: 16px; padding: 1.1rem !important; }
.vt-checkout #vitrine-container > .flex:first-child { flex-wrap: wrap; gap: .5rem; }
.vt-checkout #vitrine-container h2 { font-size: 1.1rem; }
.vt-checkout #vitrine-container > .flex:first-child > button { padding: .35rem .8rem; font-size: .85rem; border-radius: 999px; }
.vt-checkout #vitrine-totals-container h4 { font-size: .8rem; color: #6b7280; margin: 0; }
.vt-checkout #vitrine-totals-container p { font-size: 1.05rem; margin: 0; }
.vt-checkout #resumo-pedido-body p { display: flex; justify-content: space-between; gap: 1rem; margin: .15rem 0; }
.vt-checkout .botoes-container { align-items: center; flex-wrap: wrap; gap: .6rem; }
.vt-checkout .vt-total-barra { margin-right: auto; display: flex; flex-direction: column; line-height: 1.2; }
.vt-checkout .vt-total-barra span { font-size: .8rem; color: #6b7280; }
.vt-checkout .vt-total-barra strong { font-size: 1.35rem; }
.vt-checkout .botao-checkout { min-width: 0; padding: .6rem 1.1rem; border-radius: 10px; }
.vt-checkout :is(.botao-voltar, .botao-grades) { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.vt-checkout :is(.botao-voltar, .botao-grades):hover { background: #f3f4f6; color: #111827; }
/* Configurar Pedido é muito usado: botão cheio, escuro, ao lado do Finalizar */
.vt-checkout .botao-configurar { background: #1f2937; color: #fff; border: 1px solid #1f2937; }
.vt-checkout .botao-configurar:hover { background: #111827; color: #fff; }
@media (max-width: 767.98px) {
    .vt-checkout .botoes-container { flex-direction: row !important; flex-wrap: wrap; }
    .vt-checkout .vt-total-barra { width: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 0 0 .2rem; }
    .vt-checkout .botao-checkout { width: auto !important; flex: 1 1 30%; padding: .55rem .5rem; font-size: .85rem; }
    .vt-checkout .botao-finalizar { flex-basis: 100%; order: 9; }
    .vt-checkout #vitrine-totals-container .grid { grid-template-columns: 1fr 1fr; }
}
html.ln-noite body.ln-ativo .vt-checkout :is(#checkout-form, #vitrine-container) { border-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .vt-checkout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { background: var(--vn-cartao-2); border-color: var(--vn-borda-2) !important; color: var(--vn-texto); }
html.ln-noite body.ln-ativo .vt-checkout label.block { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .vt-checkout :is(.botao-voltar, .botao-grades) { background: var(--vn-cartao-2); border-color: var(--vn-borda-2); color: var(--vn-texto); }
html.ln-noite body.ln-ativo .vt-checkout .botao-configurar { background: #e2e8f0; border-color: #e2e8f0; color: #0f172a; }
html.ln-noite body.ln-ativo .vt-checkout .vt-total-barra span { color: var(--vn-suave); }
@media (max-width: 767.98px) { .vt-checkout .botao-checkout { white-space: normal; line-height: 1.2; font-size: .8rem; padding: .5rem .35rem; } }
html.ln-noite body.ln-ativo .vt-checkout #carrinho-itens .quantidade { background: var(--vn-cartao-2) !important; color: var(--vn-texto); }

/* ── Configurar Pedido (novidades em teste): a tabela de divisões rola dentro do quadro no celular ── */
.vt-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vt-rolar > table { min-width: 620px; }

/* ── Telas antigas no celular (novidades em teste, body.ln-teste) ── */
@media (max-width: 767.98px) {
  /* títulos de seção recolhível (ex.: Personalizar Catálogo) quebram a linha em vez de passar da tela */
  body.ln-teste .card-header > .btn-link { white-space: normal; text-align: left; }
}

/* ═══ Tudo escuro, rodada 3 (09/10): o que a varredura de contraste das 113 telas achou ═══════════
   Regra: texto com contraste de pelo menos 4,5 sobre o fundo de verdade (3 nos títulos grandes). */
html.ln-noite body.ln-ativo { --vn-fraco: #7d8ca2; }
/* verdes, vermelhos, amarelos e azuis do Bootstrap são escuros demais para o fundo escuro */
html.ln-noite body.ln-ativo .text-success { color: #4ade80 !important; }
html.ln-noite body.ln-ativo .text-danger { color: #f87171 !important; }
html.ln-noite body.ln-ativo .text-warning { color: #fbbf24 !important; }
html.ln-noite body.ln-ativo .text-info { color: #67e8f9 !important; }
html.ln-noite body.ln-ativo .btn-outline-success { --bs-btn-color: #4ade80; --bs-btn-border-color: #22c55e; --bs-btn-hover-bg: #16a34a;
    --bs-btn-hover-border-color: #16a34a; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #15803d; --bs-btn-active-color: #fff; }
html.ln-noite body.ln-ativo .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626; --bs-btn-hover-color: #fff; }
html.ln-noite body.ln-ativo .btn-outline-warning { --bs-btn-color: #fbbf24; --bs-btn-border-color: #f59e0b; --bs-btn-hover-color: #1f2937; }
html.ln-noite body.ln-ativo .btn-outline-info { --bs-btn-color: #67e8f9; --bs-btn-border-color: #22d3ee; --bs-btn-hover-color: #1f2937; }
/* etiquetas de fundo claro (amarelo, ciano) ficam com letra escura, no claro e no escuro */
.badge:is(.bg-warning, .bg-info), .text-bg-warning, .text-bg-info { color: #1f2937 !important; }
html.ln-noite body.ln-ativo :is(.bg-warning, .bg-info, .text-bg-warning, .text-bg-info).text-dark { color: #1f2937 !important; }
/* o "Total" e os números na cor do escritório já seguem --primary (clareada no escuro); os textos cinza
   fixos de telas antigas ganham o cinza claro */
html.ln-noite body.ln-ativo :is([style*="color:#444"], [style*="color: #444"], [style*="color:#333"], [style*="color: #333"],
    [style*="color:#555"], [style*="color: #555"], [style*="color:#666"], [style*="color: #666"]) { color: var(--vn-texto) !important; }
/* telas com cartão branco fixo no CSS da própria tela (Meus Números, Análise de Produtos, Administradores,
   Rotas, Processador de Potencial, Análise de Planilha) */
html.ln-noite body.ln-ativo :is(.mn-card, .kpi-card, .filters-bar, .chart-card, .admin-card, .rt-passo, .file-drop-zone, .upload-area) {
    background: var(--vn-cartao) !important; border-color: var(--vn-borda) !important; color: var(--vn-texto); }
html.ln-noite body.ln-ativo :is(.mn-card-header, .admin-card-header, .rt-totais) {
    background: var(--vn-cartao-2) !important; border-color: var(--vn-borda) !important; color: var(--vn-texto); }
html.ln-noite body.ln-ativo .rt-legenda { background: rgba(19, 28, 49, .95) !important; color: var(--vn-texto); }
html.ln-noite body.ln-ativo :is(.rt-passo label, .filters-bar label, .kpi-sub, .form-label-sm) { color: var(--vn-suave) !important; }
html.ln-noite body.ln-ativo .map-footer-stat .sf-val { color: var(--vn-texto); }
html.ln-noite body.ln-ativo .rank-table thead th { color: var(--vn-suave); border-bottom-color: var(--vn-borda); }
html.ln-noite body.ln-ativo .rank-num { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .rank-num.top3 { color: #f59e0b; }
html.ln-noite body.ln-ativo .perm-item.checked { background: rgba(59, 130, 246, .16) !important; border-color: rgba(147, 197, 253, .45) !important; }
html.ln-noite body.ln-ativo .perm-item:hover { background: var(--vn-hover) !important; }
html.ln-noite body.ln-ativo .badge-me { background: rgba(245, 158, 11, .16); color: #fcd34d; border-color: rgba(252, 211, 77, .4); }
html.ln-noite body.ln-ativo .badge-vendor { background: rgba(16, 185, 129, .16); color: #6ee7b7; border-color: rgba(110, 231, 183, .4); }
/* Configurar Pedido: cabeçalhos com fundo claro escrito no HTML */
html.ln-noite body.ln-ativo :is([style*="background:#f0f4fa"], [style*="background: #f0f4fa"], [style*="background:#e8f0fe"],
    [style*="background: #e8f0fe"], [style*="background-color:#f0f4fa"], [style*="background-color:#e8f0fe"]) {
    background: var(--vn-cartao-2) !important; color: var(--vn-texto); }
/* Repasses → Painel: cabeçalhos das tabelas */
html.ln-noite body.ln-ativo .rp-mini thead th { background: var(--vn-cartao-2); color: var(--vn-suave); }
html.ln-noite body.ln-ativo .rp-tabela thead th { background: #1e293b; color: #e2e8f0; }
/* catálogo: o preço PDV em verde escuro sumia */
html.ln-noite body.ln-ativo .pdv-valor { color: #4ade80 !important; }
html.ln-noite body.ln-ativo .pdv-info strong { color: #86efac; }
/* cabeçalho ciano ou amarelo (Editar Catálogo): letra escura, no claro e no escuro */
.card-header:is(.bg-info, .bg-warning), .card-header:is(.bg-info, .bg-warning) * { color: #1f2937 !important; }
/* botão cinza marcado (filtro "Todas" das Divisões) */
html.ln-noite body.ln-ativo .btn-outline-secondary.active { color: #fff; }
/* links dentro de avisos claros, azuis do Tailwind e cinzas fixos de telas antigas */
html.ln-noite body.ln-ativo .alert-light a { color: #e2e8f0; text-decoration: underline; }
html.ln-noite body.ln-ativo :is(.text-blue-500, .text-blue-600, .text-blue-700) { color: #93c5fd !important; }
html.ln-noite body.ln-ativo :is(.text-body-secondary, [style*="color:#6c757d"], [style*="color: #6c757d"], [style*="color:#888"],
    [style*="color: #888"], [style*="color:#999"], [style*="color: #999"], [style*="color:#aaa"], [style*="color: #aaa"],
    [style*="color:#64748b"], [style*="color: #64748b"]) { color: var(--vn-suave) !important; }
/* Análise de Produtos e Meus Números: números, títulos e medalhas */
html.ln-noite body.ln-ativo :is(.kpi-num, .chart-title, [style*="color:#0f172a"], [style*="color: #0f172a"]) { color: var(--vn-texto) !important; }
html.ln-noite body.ln-ativo .kpi-label { color: var(--vn-suave); }
html.ln-noite body.ln-ativo .top-table thead th { background: var(--vn-cartao-2); color: var(--vn-suave); }
.rank-badge:not(.bronze) { color: #1f2937; }   /* número escuro na medalha clara (amarela, cinza), no claro e no escuro */
/* Rotas: as etiquetas de situação */
html.ln-noite body.ln-ativo .rt-chip { background: var(--vn-cartao-2); border-color: var(--vn-borda-2); color: var(--vn-texto); }
html.ln-noite body.ln-ativo .alert-light .text-muted { color: #cbd5e1 !important; }
html.ln-noite body.ln-ativo .rt-vazio { color: var(--vn-suave); }