@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bg-app: #e2e8f0; 
    --bg-surface: #ffffff;
    --glass-border: #e2e8f0;
    --border-color: #cbd5e1;
    --bg-sidebar: #0a1a09;
    /* 23/09/2026, pedido do Junior "o fundo do sidebar tb tem que ficar
       vermelho" (cor por loja): antes o 2o stop do gradiente do fundo do
       menu (.sidebar, logo abaixo) estava hardcoded (#0d1a0c), entao so'
       o --bg-sidebar respondia a uma cor de loja customizada e o gradiente
       ficava com uma ponta verde/preta sempre fixa. Virou variavel, com o
       MESMO valor de antes como padrao (zero mudanca visual pra quem nao
       configurar nada). */
    --bg-sidebar-end: #0d1a0c;
    --sidebar-text: #9ca3af;
    --sidebar-text-hover: #ffffff;
    --sidebar-active: #1b331a;
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-text: #1a202c;
    --header-text-secondary: #64748b;
    --header-border: #e2e8f0;
    --text-primary: #1a202c;
    --text-secondary: #475569;
    --brand-primary: #1b331a;
    --brand-glow: rgba(27, 51, 26, 0.12);
    --danger: #ef4444;
    --danger-bg: #fef2f2;
    --success: #10b981;
    --success-bg: #ecfdf5;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    
    --transition-fast: 0.15s ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--bg-app);
    background-image: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   Utilitários (compatíveis com as classes herdadas dos templates antigos:
   d-*, m*-*, p*-*, text-*, fw-*, flex-*, justify-content-*, align-items-*,
   w-100/h-100). Ficam aqui porque o Bootstrap foi removido do projeto, mas
   dezenas de templates continuam usando essas classes para espaçamento,
   alinhamento e responsividade — sem isso elas viram no-ops silenciosos.
   ========================================================================== */

.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-grid { display: grid !important; }
.d-none { display: none !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 24px !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-muted { color: var(--text-secondary) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Escala de espaçamento (0=0, 1=4px, 2=8px, 3=16px, 4=24px, 5=48px),
   nos quatro lados (m/p) e nas variantes t/b/s/e/x/y, igual ao Bootstrap. */
:root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px; --custom-color-success: #1B5E20; }
.m-0 { margin: var(--space-0) !important; } .m-1 { margin: var(--space-1) !important; } .m-2 { margin: var(--space-2) !important; } .m-3 { margin: var(--space-3) !important; } .m-4 { margin: var(--space-4) !important; } .m-5 { margin: var(--space-5) !important; }
.mt-0 { margin-top: var(--space-0) !important; } .mt-1 { margin-top: var(--space-1) !important; } .mt-2 { margin-top: var(--space-2) !important; } .mt-3 { margin-top: var(--space-3) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-5 { margin-top: var(--space-5) !important; }
.mb-0 { margin-bottom: var(--space-0) !important; } .mb-1 { margin-bottom: var(--space-1) !important; } .mb-2 { margin-bottom: var(--space-2) !important; } .mb-3 { margin-bottom: var(--space-3) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-5 { margin-bottom: var(--space-5) !important; }
.ms-0 { margin-left: var(--space-0) !important; } .ms-1 { margin-left: var(--space-1) !important; } .ms-2 { margin-left: var(--space-2) !important; } .ms-3 { margin-left: var(--space-3) !important; } .ms-4 { margin-left: var(--space-4) !important; } .ms-5 { margin-left: var(--space-5) !important; }
.me-0 { margin-right: var(--space-0) !important; } .me-1 { margin-right: var(--space-1) !important; } .me-2 { margin-right: var(--space-2) !important; } .me-3 { margin-right: var(--space-3) !important; } .me-4 { margin-right: var(--space-4) !important; } .me-5 { margin-right: var(--space-5) !important; }
.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; } .mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; } .mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; } .mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; } .mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; } .mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; } .my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; } .my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; } .my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; } .my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; } .my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.p-0 { padding: var(--space-0) !important; } .p-1 { padding: var(--space-1) !important; } .p-2 { padding: var(--space-2) !important; } .p-3 { padding: var(--space-3) !important; } .p-4 { padding: var(--space-4) !important; } .p-5 { padding: var(--space-5) !important; }
.pt-0 { padding-top: var(--space-0) !important; } .pt-1 { padding-top: var(--space-1) !important; } .pt-2 { padding-top: var(--space-2) !important; } .pt-3 { padding-top: var(--space-3) !important; } .pt-4 { padding-top: var(--space-4) !important; } .pt-5 { padding-top: var(--space-5) !important; }
.pb-0 { padding-bottom: var(--space-0) !important; } .pb-1 { padding-bottom: var(--space-1) !important; } .pb-2 { padding-bottom: var(--space-2) !important; } .pb-3 { padding-bottom: var(--space-3) !important; } .pb-4 { padding-bottom: var(--space-4) !important; } .pb-5 { padding-bottom: var(--space-5) !important; }
.ps-0 { padding-left: var(--space-0) !important; } .ps-1 { padding-left: var(--space-1) !important; } .ps-2 { padding-left: var(--space-2) !important; } .ps-3 { padding-left: var(--space-3) !important; } .ps-4 { padding-left: var(--space-4) !important; } .ps-5 { padding-left: var(--space-5) !important; }
.pe-0 { padding-right: var(--space-0) !important; } .pe-1 { padding-right: var(--space-1) !important; } .pe-2 { padding-right: var(--space-2) !important; } .pe-3 { padding-right: var(--space-3) !important; } .pe-4 { padding-right: var(--space-4) !important; } .pe-5 { padding-right: var(--space-5) !important; }
.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; } .px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; } .px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; } .px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; } .px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } .px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; } .py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; } .py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; } .py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; } .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; } .py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }

/* Utilitários de exibição responsivos (breakpoints iguais aos usados no
   resto do arquivo: lg=992px, md=768px, sm=576px).
   BUG CORRIGIDO (15/10/2026, Junior reportou "em toda tela o menu
   hamburguer nao aparece no mobile e os botoes tb nao ficam legais"):
   essas 3 regras usavam "max-width" (esconde/mostra em telas ESTREITAS),
   o CONTRARIO do que o nome das classes promete (padrao Bootstrap:
   ".d-lg-none" = escondido a PARTIR do breakpoint lg pra CIMA, ou seja,
   visivel no mobile e escondido no desktop -- e ".d-md-inline" = visivel
   a partir do md pra cima, escondido abaixo). Resultado pratico do bug:
   o botao hamburguer (classe "d-lg-none", usado em ~50 telas pra abrir o
   menu lateral no celular) ficava ESCONDIDO no celular e VISIVEL no
   desktop -- o oposto do que deveria, por isso ninguem via o botao de
   menu no mobile em nenhuma tela. Mesma inversao afetava todo elemento
   com o padrao "d-none d-md-inline"/"d-none d-lg-inline" (ex: nome do
   usuario do lado do avatar, contadores no topo) -- ficavam visiveis no
   celular (onde deveriam sumir pra economizar espaco) e escondidos no
   desktop (onde deveriam aparecer). Antes so' tinha sido corrigido pontual
   -- so' na pagina vendas_caixa.html (ver comentario "#menu-toggle" nesse
   arquivo) -- porque na epoca pareceu arriscado mexer aqui, usado em ~50
   lugares; agora, confirmado pelo Junior que o problema e' sistemico,
   corrigido na raiz (media query certa, min-width) em vez de replicar o
   mesmo contorno em cada tela. */
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

.app-layout {
    display: flex;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, var(--bg-sidebar-end) 100%);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-fast), width var(--transition-fast);
    z-index: 1100;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    position: relative;
}

.sidebar-header {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    overflow: hidden;
    /* BUG CORRIGIDO (23/09/2026, Junior reportou menu "achatado" de novo --
       esse flex-shrink:0 e' o mesmo ajuste ja feito em 16/09 (ver
       frontend_layout_bootstrap.md), que nao estava presente neste arquivo.
       Sem isso, o flexbox da .sidebar (altura travada em 100vh) espreme
       este cabecalho junto com os itens do menu em vez de so' deixar o
       .sidebar-nav rolar. */
    flex-shrink: 0;
}

.sidebar-header img {
    height: 32px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    transition: opacity var(--transition-fast);
}

.sidebar-nav {
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    /* BUG CORRIGIDO (23/09/2026, pedido do Junior "scroll invisivel" no
       menu): era "thin" (uma barra fininha mas ainda visivel) -- trocado
       pro mesmo padrao 100% invisivel ja usado em .main-area logo abaixo
       neste arquivo (o scroll continua funcionando normal, so' sem trilho
       visivel). */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legado */
}

.sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}

.nav-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 8px 12px;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0; /* mesmo motivo do .sidebar-header acima */
}

.nav-item {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    color: var(--sidebar-text);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    /* mesmo motivo do .sidebar-header acima: sem isso o flexbox espreme
       cada item de menu pra menos de 44px em vez de deixar so' o
       .sidebar-nav rolar (menus com muitos links, ex. tela_principal). */
    flex-shrink: 0;
}

.nav-item i {
    font-size: 1.2rem;
    min-width: 28px;
    transition: color var(--transition-fast);
}

.nav-item span {
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

/* 16/10/2026 (pedido do Junior: "o count nao ta aparecendo de pendencias
   de lancamento, por causa do nome muito grande") -- .nav-item e' flex +
   overflow:hidden (ver acima, de proposito, pra nao espremer a altura dos
   itens). Sem isso, um rotulo longo ("Pendências de Lançamento") ocupava
   todo o espaco e empurrava o badge (ultimo filho, margin-left:auto) pra
   fora da area visivel -- cortado pelo overflow:hidden do pai, nunca
   chegava a aparecer. Agora o ROTULO e' quem encolhe/corta com "..." se
   precisar (flex:1, min-width:0), e o badge (sempre pequeno, numero) fica
   com tamanho fixo -- nao encolhe, nao e' cortado, sempre visivel. */
.nav-item > span:not(.badge-mini) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item > span.badge-mini {
    flex-shrink: 0;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text-hover);
}

.nav-item.active {
    /* Era um gradiente ate' rgba(27, 51, 26, 0.8) FIXO (16/09/2026, achado
       junto com o pedido do Junior "o menu sidebar tb tem que alterar a
       cor") -- com uma cor de loja customizada, o item ativo do menu ficava
       metade na cor nova (var(--sidebar-active)) e metade sempre no verde
       padrao antigo, um gradiente torto/2 cores. Trocado por cor solida,
       segue 100% a cor configurada (ou o verde padrao, se a loja nao tiver
       nada configurado). */
    background: var(--sidebar-active);
    color: #ffffff;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #4ade80;
    border-radius: 0 4px 4px 0;
}

.nav-item.active i {
    color: #ffffff;
}

.app-layout.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
}

.app-layout.sidebar-collapsed .sidebar-header {
    padding: 0 16px;
}

.app-layout.sidebar-collapsed .sidebar-header h2,
.app-layout.sidebar-collapsed .nav-title,
.app-layout.sidebar-collapsed .nav-item span {
    opacity: 0;
    visibility: hidden;
    width: 0;
    display: none;
}

.app-layout.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 0;
}

.app-layout.sidebar-collapsed .nav-item i {
    margin-right: 0;
    min-width: auto;
}

.app-layout.sidebar-collapsed .nav-item.active::before {
    display: none;
}

/* 21/10/2026 (pedido do Junior, com print: icone de Pendencias de
   Lancamento no menu colapsado aparecia com um "bloco" estranho em cima
   do icone) -- causa: a regra geral ".nav-item span { display:none }" do
   menu colapsado tambem pega o badge (span.badge-mini), mas o JS do
   contador (ver _sidebar_menu.html) seta badge.style.display inline
   ('inline-flex'/'none') pra mostrar/esconder o numero -- estilo inline
   sempre vence a regra do CSS, entao so' o "display" escapava do
   escondido. Width:0 (que a regra geral tambem forca) continuava valendo
   (JS nao mexe nisso), e com o padding do .badge-mini, a largura 0 virava
   um retangulo pequeno sem numero legivel -- exatamente o "bloco" do
   print. Agora, quando colapsado, o badge (que so' aparece via JS quando
   tem pendencia > 0) vira um selo pequeno e redondo, ancorado no canto
   superior direito do icone (".nav-item" ja e' position:relative acima),
   igual ao padrao comum de sidebar colapsada com notificacao. */
.app-layout.sidebar-collapsed .nav-item > span.badge-mini {
    opacity: 1;
    visibility: visible;
    width: auto;
    position: absolute;
    top: 2px;
    right: 8px;
    margin-left: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.62rem;
    line-height: 16px;
    border-radius: 999px;
    z-index: 2;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    cursor: pointer;
}

.app-layout.mobile-open .sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.main-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: transparent;
    position: relative;
    scrollbar-width: none; /* Firefox: rola a pagina normalmente, mas sem a barra visivel */
    -ms-overflow-style: none; /* IE/Edge legado */
}

.main-area::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge: mantem o scroll funcionando, so oculta a barra */
}

.top-bar {
    height: 72px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--header-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    will-change: transform;
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar-right .text-secondary.d-none {
    display: inline-block !important;
    margin-right: 8px;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: #ffffff;
    color: var(--header-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-icon:hover {
    background: #f1f5f9;
    color: var(--text-primary);
    border-color: var(--brand-primary);
    transform: translateY(-1px);
}

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--header-text);
    letter-spacing: -0.5px;
}

.user-profile-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    background: #ffffff;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.user-profile-pill:hover {
    background: #f1f5f9;
    box-shadow: var(--shadow-sm);
}

.user-profile-pill .avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #2a4d28 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.content-wrapper {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

.card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--glass-border);
    margin-bottom: 24px;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card-header {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 16px;
}

.card-header i {
    color: var(--brand-primary);
    font-size: 1.25rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.input-group label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.input-control {
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #ffffff;
    font-size: 0.938rem;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

.input-control:hover {
    border-color: #94a3b8;
}

.input-control:focus {
    outline: none;
    border-color: var(--brand-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.input-control[readonly] {
    background: #f1f5f9;
    color: var(--text-secondary);
}

textarea.input-control {
    height: auto;
    min-height: 60px;
    padding: 10px 14px;
    resize: vertical;
    font-size: 0.85rem;
}

.input-group small {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.card form.d-flex .btn {
    height: 44px !important; 
    margin-bottom: 0px !important;
}

.btn-container {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 28px;
    flex-wrap: wrap;
}

.btn {
    height: 38px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    letter-spacing: -0.2px;
}

.btn i {
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--brand-primary);
    color: #fff !important;
    border: 1px solid transparent;
}

.btn-primary:hover {
    background: #10240f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 51, 26, 0.2);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: #f1f5f9 !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--danger) !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-danger:hover {
    background: #b91c1c !important;
    transform: translateY(-1px);
}

.btn-text {
    background: transparent;
    color: var(--text-secondary);
}

.btn-text:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 0.8rem;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background: #ffffff;
    border: 1px solid var(--glass-border);
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
}

.table th {
    padding: 14px 16px;
    text-align: left;
    background: #f8fafc;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.table td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 500;
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.table td[data-label="Cliente"] {
    max-width: 180px;
}

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background-color: #f1f5f9;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.text-right {
    text-align: right !important;
}

.text-danger {
    color: var(--danger) !important;
    font-weight: 700;
}

.linha-cancelada {
    background-color: var(--danger-bg) !important;
    border-left: 4px solid var(--danger);
}

.linha-cancelada:hover {
    background-color: #fecaca !important;
}

.linha-enviada {
    background-color: var(--success-bg) !important;
    border-left: 4px solid var(--success);
}

.linha-enviada:hover {
    background-color: #d1fae5 !important;
}

.alert {
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 0.938rem;
    border-left: 4px solid;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert-danger { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-left-color: var(--warning); }
.alert-success { background: var(--success-bg); color: var(--success); border-left-color: var(--success); }
.alert-info { background: #eff6ff; color: #2563eb; border-left-color: #3b82f6; }

.alert button {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
    padding: 4px 8px;
}

.alert button:hover { opacity: 1; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.empty-state i { font-size: 3rem; color: #cbd5e1; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.15rem; color: var(--text-primary); font-weight: 700; margin-bottom: 8px; }
.empty-state p { font-size: 0.9rem; }

.spinner-overlay {
    display: none; position: fixed; inset: 0; background: rgba(255, 255, 255, 0.8);
    z-index: 2000; justify-content: center; align-items: center;
}

.spinner {
    width: 48px; height: 48px; border: 3px solid var(--border-color);
    border-top: 3px solid var(--brand-primary); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000; display: none; align-items: flex-start; justify-content: center;
    padding: 20px 16px; overflow-y: auto;
}

.modal-overlay.show { display: flex; }

.modal-container {
    background: var(--bg-surface);
    border-radius: var(--radius-xl); width: 100%; max-height: 90vh; display: flex;
    flex-direction: column; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--glass-border); overflow: hidden; margin: auto;
    animation: slideDown 0.3s ease-out;
}

.modal-xl { max-width: 950px; }
.modal-lg { max-width: 750px; }
.modal-md { max-width: 580px; }
.modal-sm { max-width: 450px; }

.modal-header {
    padding: 20px 24px; border-bottom: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}

.modal-title {
    margin: 0; font-size: 1.25rem; font-weight: 700;
    display: flex; align-items: center; gap: 10px; color: var(--text-primary);
}

.modal-title i { color: var(--brand-primary); }

.modal-close {
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background-color var(--transition-fast), color var(--transition-fast) !important; 
    cursor: pointer !important; border: none !important;
    background: #f1f5f9 !important; font-size: 1.25rem !important;
    color: var(--text-secondary) !important; padding: 0 !important;
}

.modal-close:hover { background: #fee2e2 !important; color: var(--danger) !important; }

.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; max-height: calc(85vh - 140px); }
.modal-footer { padding: 16px 24px; border-top: 1px solid #e2e8f0; display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; }

.details-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.details-grid dt { font-weight: 600; color: var(--text-secondary); }
.details-grid dd { margin: 0; color: var(--text-primary); }

.upload-section-card {
    background: #f8fafc; border-radius: var(--radius-lg);
    padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--glass-border); 
    transition: background-color var(--transition-fast);
}

.upload-section-card:hover { background: #f1f5f9; }

.upload-section-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 2px solid var(--brand-primary); flex-wrap: wrap;
}

.upload-section-number {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    background: var(--brand-primary); color: white; border-radius: 50%;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}

.upload-section-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }

.btn-upload {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 16px; background: #ffffff;
    border: 2px dashed var(--border-color); border-radius: var(--radius-md);
    color: var(--text-secondary); font-weight: 500; cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); 
    margin-bottom: 10px; font-size: 0.85rem;
}

.btn-upload:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-glow); }

.file-list { list-style: none; margin: 10px 0; padding: 0; }

.file-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #ffffff;
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    margin-bottom: 6px; font-size: 0.82rem; gap: 10px;
}

.file-item span { display: flex; align-items: center; gap: 8px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.file-item span i { color: var(--brand-primary); flex-shrink: 0; }

.file-remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); }
.file-remove:hover { background: var(--danger-bg); color: var(--danger); }

.checkbox-label { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-primary); cursor: pointer; }
.checkbox-label span { font-weight: 500; color: var(--text-primary); font-size: 0.85rem; }

.char-counter { display: block; text-align: right; font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; }

.section-header {
    color: var(--brand-primary); border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px; margin: 20px 0 16px 0; font-size: 0.9rem;
    font-weight: 700; display: flex; align-items: center; gap: 8px;
}

.switch-wrapper {
    display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
    background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
}

.switch-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch-toggle input { opacity: 0; width: 0; height: 0; }
.slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: background-color .3s; border-radius: 24px; }
.slider-round:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: transform .3s; border-radius: 50%; }
.switch-toggle input:checked + .slider-round { background-color: var(--brand-primary); }
.switch-toggle input:checked + .slider-round:before { transform: translateX(20px); }

.badge-mini {
    padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.7rem;
    font-weight: 700; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}

.badge-green { background: var(--success); color: #fff; }
.badge-red { background: var(--danger); color: #fff; }
.badge-gray { background: var(--text-secondary); color: #fff; }
/* 15/10/2026 (pedido do Junior: contador de Pendencias de Lancamento
   sumiu do menu lateral) -- tom "amber"/alerta, mesmo espirito do .pill
   ja usado dentro da propria tela de Pendencias de Lancamento. */
.badge-amber { background: #f59e0b; color: #fff; }
/* 17/10/2026 (pedido do Junior: "sinalizar essas notas que tem data
   agendada") -- mesmo tom "info" ja usado em .status-indicator--info
   (vendas_caixa.html), reaproveitado aqui pro badge de "Agendada" em
   Pendencias de Lancamento. */
.badge-blue { background: #dbeafe; color: #1e40af; }

/* 15/10/2026 (bug reportado pelo Junior, com print: colunas da direita
   cortadas/sumindo numa tabela larga, ex. "Equipe responsável"/botao
   "Salvar" em Pendencias de Lancamento -- pedido tambem pra conferir
   "outras telas" com o mesmo problema) -- varias tabelas ficam dentro de
   um cartao com overflow:hidden (de proposito, pra cortar o fundo do
   cabecalho nos cantos arredondados); sem um scroll proprio da TABELA, o
   excesso de colunas simplesmente ficava cortado e invisivel, sem
   nenhuma barra de rolagem avisando que tinha mais coluna pra ver. Classe
   generica (nao fica so' numa tela) -- envolve so' a tabela, sem afetar o
   arredondamento do cartao em volta. */
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.metrics-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }

.metric-card {
    background: var(--bg-surface); border-radius: var(--radius-xl);
    padding: 18px 20px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-card);
    display: flex; align-items: center; gap: 14px; transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    position: relative; overflow: hidden; min-height: 90px;
}

.metric-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.metric-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand-primary); border-radius: 4px 0 0 4px; }
.metric-card__icon { width: 44px; height: 44px; background: var(--brand-glow); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--brand-primary); font-size: 1.15rem; flex-shrink: 0; }
.metric-card__info { flex: 1; min-width: 0; }
.metric-card__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.metric-card__value { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.metric-card__toggle { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; font-size: 0.9rem; transition: color var(--transition-fast); }
.metric-card__toggle:hover { color: var(--brand-primary); }

.acoes-cell {
    display: flex; gap: 4px; justify-content: flex-end; align-items: center; flex-wrap: nowrap;
}

.acoes-cell .btn { font-size: 0.78rem; height: 30px; padding: 0 12px; white-space: nowrap; flex-shrink: 0; }
.acoes-cell .btn i { font-size: 0.8rem; }
.acoes-cell .btn span { display: inline !important; }

.status-indicator {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}

.status-indicator--success { background: var(--success-bg); color: var(--success); }
.status-indicator--danger { background: var(--danger-bg); color: var(--danger); }
.status-indicator--warning { background: var(--warning-bg); color: var(--warning); }
/* 21/10/2026 (pedido do Junior): sinalizar com outra cor quando a loja da
   entrega for Assistencia Tecnica/Carreto Assistencia (ver entregas.html,
   coluna Loja). Roxo pra nao se confundir com os outros status (verde,
   vermelho, amarelo, azul). */
.status-indicator--purple { background: #f3e8ff; color: #7c3aed; }

.cliente-toggle-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); text-align: center; }

.cliente-info-panel { background: #f8fafc; border-radius: var(--radius-lg); padding: 16px; margin-top: 16px; border: 1px solid var(--glass-border); display: none; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.endereco-section { background: #f8fafc; border-radius: var(--radius-md); padding: 16px; border: 1px solid var(--border-color); }

.cliente-search-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.cliente-search-bar .input-control { flex: 1; }

.cliente-list { max-height: 380px; overflow-y: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: #ffffff; }
.cliente-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; transition: background-color var(--transition-fast); gap: 10px; flex-wrap: wrap; }
.cliente-list-item:hover { background: #f1f5f9; }
.cliente-list-item:last-child { border-bottom: none; }
.cliente-list-item__info { flex: 1; min-width: 150px; }
.cliente-list-item__name { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-list-item__docs { font-size: 0.72rem; color: var(--text-secondary); margin-top: 3px; }
.cliente-list-item__actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.toast-alert { position: fixed; top: 24px; right: 24px; z-index: 10000; min-width: 280px; max-width: 450px; padding: 14px 20px; border-radius: var(--radius-lg); color: #fff; display: flex; align-items: center; gap: 10px; transition: transform 0.3s ease-out, opacity 0.3s ease-out; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-weight: 500; transform: translateX(100%); opacity: 0; }
.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }

.toast-alert.show { transform: translateX(0); opacity: 1; }

.in-page-notification { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 1500; max-width: 420px; box-shadow: var(--shadow-hover); background: #eff6ff; border-left: 4px solid #3b82f6; padding: 16px 20px; border-radius: var(--radius-lg); }
.in-page-notification.show { display: block; animation: slideUp 0.3s ease; }

.card-header-clean { padding: 18px 24px; margin-bottom: 0; border-bottom: 2px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; gap: 10px; }
.card-header-clean i { color: var(--brand-primary); }

.nav-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.nav-tabs .nav-link { font-size: 0.85rem; font-weight: 600; padding: 12px 20px; border: none; color: var(--text-secondary); background: transparent; cursor: pointer; transition: color var(--transition-fast), border-bottom-color var(--transition-fast); border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--brand-primary); border-bottom: 2px solid var(--brand-primary); }
.nav-tabs .nav-link:hover:not(.active) { color: var(--text-primary); border-bottom-color: var(--border-color); }
.tab-content { position: relative; width: 100%; }
.tab-pane { display: none; animation: fadeInTab 0.2s ease; }
.tab-pane.active.show { display: block; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.solicitar-nf-card { border: 2px dashed #f59e0b; background: var(--warning-bg); }
.solicitar-nf-card .upload-section-header { border-bottom-color: var(--warning); }
.solicitar-nf-card .upload-section-number { background: var(--warning); }

@media (max-width: 1200px) {
    .acoes-cell .btn { padding: 0 10px; }
}

@media (max-width: 992px) {
    .app-layout.sidebar-collapsed .sidebar { width: var(--sidebar-width); }
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.2s ease-in-out; box-shadow: none; }
    .app-layout.mobile-open .sidebar { transform: translateX(0); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); }
    .app-layout .sidebar-header h2, .app-layout .nav-title, .app-layout .nav-item span { opacity: 1 !important; visibility: visible !important; width: auto !important; display: block !important; }
    .app-layout .nav-item { justify-content: flex-start; padding: 0 12px; }
    .app-layout .nav-item i { margin-right: 0; min-width: 28px; }
    .app-layout .nav-item.active::before { display: block; }
    .top-bar { padding: 0 16px; height: 64px; }
    .page-title { font-size: 1rem; }
    .user-profile-pill span { display: none; }
    .user-profile-pill { padding: 4px; }
    .content-wrapper { padding: 12px; }
    .card { padding: 16px; border-radius: var(--radius-lg); margin-bottom: 16px; }
    .card-header { font-size: 1rem; margin-bottom: 16px; padding-bottom: 12px; }
    .form-grid { display: flex; flex-direction: column; gap: 12px; align-items: center; }
    .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .modal-container { max-width: 95% !important; margin: 10px auto; }
    .modal-body { padding: 16px; }
    .table td { max-width: 140px; }
    .metric-card__value { font-size: 1.15rem; }
    .metrics-strip { grid-template-columns: 1fr 1fr; }
    .cliente-list-item__name { max-width: 180px; }
    .btn-container { display: flex; flex-direction: row; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
    .btn { flex: 1; min-width: 100px; padding: 0 10px; font-size: 0.8rem; height: 36px; }
}

@media (max-width: 768px) {
    .top-bar-right .text-secondary.d-none { display: none !important; }
    .acoes-cell { flex-wrap: wrap !important; justify-content: flex-start !important; }

    /* Tabelas viram lista de "cards" empilhados no mobile, em vez de uma
       tabela apertada de 900px com scroll horizontal (pedido do Junior
       23/09/2026 -- "modo mobile fica ruim de ver"). Reaproveita os
       atributos data-label="..." que a maioria das tabelas do sistema ja'
       tem em cada <td> (preparados pra isso, so' faltava essa regra). Uma
       tabela sem data-label ainda melhora (cada celula vira uma linha
       cheia, sem precisar de scroll lateral), so' fica sem o rotulo antes
       do valor. Em telas normais (desktop) nada muda -- essas regras so'
       valem abaixo de 768px. Impressao (@media print) ja' tinha uma regra
       propria revertendo isso, entao os relatorios em PDF/impressos nao
       sao afetados. */
    .table-wrapper { overflow-x: visible; border: none; background: transparent; }
    .table { min-width: 0; width: 100%; border-spacing: 0 10px; }
    .table thead { display: none; }
    .table tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 10px;
        overflow: hidden;
    }
    .table tbody tr:hover { background-color: #ffffff; }
    .table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: none;
        width: 100%;
        white-space: normal;
        text-align: right;
        overflow: visible;
        text-overflow: clip;
        border-bottom: 1px solid #f1f5f9;
    }
    .table td:empty { display: none; }
    .table td:last-child { border-bottom: none; }
    .table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-secondary);
    }
    .table td:not([data-label])::before,
    .table td[data-label=""]::before { content: none; }
    /* Celula so' com checkbox/icone de acao (sem data-label): centraliza
       em vez de empurrar pra direita, ja' que nao tem rotulo do lado. */
    .table td:not([data-label]) { justify-content: center; }
}

/* 14/10/2026 (pedido do Junior: "se as tabelas esta aparecendo como cards
   em modo mobile") -- a regra ".table" acima so' vira "card" no celular
   pra tabela com class="table" mesmo. Varias telas usam uma classe
   PROPRIA pra tabela (definida no <style> de cada pagina: lojas-table,
   relatorio-table, tabela-dashboard, table-mini, indices-table,
   tabela-pendencias, comissao-resumo-table, table-comissao) -- nessas,
   a regra nunca batia, e a tabela continuava aparecendo apertada/com
   scroll horizontal no celular, sem virar cartao.
   Trocar a classe dessas tabelas pra "table" seria arriscado: a regra
   ".table" normal (fora desse media query) forca min-width:900px, o que
   quebraria tabela pequena feita de proposito pra caber num cartao de
   dashboard (ex: table-mini, indices-table dentro de modal). Em vez
   disso, repete-se aqui SO' as regras de celular (sem tocar no visual
   de desktop de nenhuma delas).
   De proposito NAO inclui .doc-table (usada em
   relatorio_comissao_montagem.html) -- essa e' um documento formatado
   pra impressao (tem as proprias regras @media print), igual os
   relatorios _pdf.html, nao uma tela comum de navegacao. */
@media (max-width: 768px) {
    .lojas-table,
    .relatorio-table,
    .tabela-dashboard,
    .table-mini,
    .indices-table,
    .tabela-pendencias,
    .comissao-resumo-table,
    .table-comissao {
        min-width: 0;
        width: 100%;
        border-spacing: 0 10px;
    }
    .lojas-table thead,
    .relatorio-table thead,
    .tabela-dashboard thead,
    .table-mini thead,
    .indices-table thead,
    .tabela-pendencias thead,
    .comissao-resumo-table thead,
    .table-comissao thead {
        display: none;
    }
    .lojas-table tbody tr,
    .relatorio-table tbody tr,
    .tabela-dashboard tbody tr,
    .table-mini tbody tr,
    .indices-table tbody tr,
    .tabela-pendencias tbody tr,
    .comissao-resumo-table tbody tr,
    .table-comissao tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 10px;
        overflow: hidden;
    }
    .lojas-table td,
    .relatorio-table td,
    .tabela-dashboard td,
    .table-mini td,
    .indices-table td,
    .tabela-pendencias td,
    .comissao-resumo-table td,
    .table-comissao td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: none;
        width: 100%;
        white-space: normal;
        text-align: right;
        overflow: visible;
        text-overflow: clip;
        border-bottom: 1px solid #f1f5f9;
    }
    .lojas-table td:empty,
    .relatorio-table td:empty,
    .tabela-dashboard td:empty,
    .table-mini td:empty,
    .indices-table td:empty,
    .tabela-pendencias td:empty,
    .comissao-resumo-table td:empty,
    .table-comissao td:empty {
        display: none;
    }
    .lojas-table td:last-child,
    .relatorio-table td:last-child,
    .tabela-dashboard td:last-child,
    .table-mini td:last-child,
    .indices-table td:last-child,
    .tabela-pendencias td:last-child,
    .comissao-resumo-table td:last-child,
    .table-comissao td:last-child {
        border-bottom: none;
    }
    .lojas-table td::before,
    .relatorio-table td::before,
    .tabela-dashboard td::before,
    .table-mini td::before,
    .indices-table td::before,
    .tabela-pendencias td::before,
    .comissao-resumo-table td::before,
    .table-comissao td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-secondary);
    }
    .lojas-table td:not([data-label])::before,
    .lojas-table td[data-label=""]::before,
    .relatorio-table td:not([data-label])::before,
    .relatorio-table td[data-label=""]::before,
    .tabela-dashboard td:not([data-label])::before,
    .tabela-dashboard td[data-label=""]::before,
    .table-mini td:not([data-label])::before,
    .table-mini td[data-label=""]::before,
    .indices-table td:not([data-label])::before,
    .indices-table td[data-label=""]::before,
    .tabela-pendencias td:not([data-label])::before,
    .tabela-pendencias td[data-label=""]::before,
    .comissao-resumo-table td:not([data-label])::before,
    .comissao-resumo-table td[data-label=""]::before,
    .table-comissao td:not([data-label])::before,
    .table-comissao td[data-label=""]::before {
        content: none;
    }
    .lojas-table td:not([data-label]),
    .relatorio-table td:not([data-label]),
    .tabela-dashboard td:not([data-label]),
    .table-mini td:not([data-label]),
    .indices-table td:not([data-label]),
    .tabela-pendencias td:not([data-label]),
    .comissao-resumo-table td:not([data-label]),
    .table-comissao td:not([data-label]) {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
    .modal-body { padding: 12px; }
    .upload-section-card { padding: 12px; }
    .metrics-strip { grid-template-columns: 1fr; }
    .cliente-list-item { flex-direction: column; align-items: flex-start; }
    .cliente-list-item__actions { width: 100%; justify-content: flex-end; }
    .table td { font-size: 0.8rem; padding: 10px 12px; }
    .cliente-search-bar { flex-direction: column; }
    .modal-overlay { padding: 8px; }
    .toast-alert { left: 12px; right: 12px; max-width: none; }
    .content-wrapper { padding: 8px; }
    .card { padding: 12px; }
}

@media print {
    .sidebar, .top-bar, .btn-container, .btn-icon, .user-profile-pill, .sidebar-overlay,
    .modal-overlay, #spinner, .spinner-overlay, .card-header i, .btn, .col-acao,
    .table td:last-child, .table th:last-child { display: none !important; }
    .main-area { height: auto !important; overflow: visible !important; background: white !important; }
    .content-wrapper { padding: 0 !important; max-width: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; padding: 12px !important; margin-bottom: 16px !important; background: white !important; }
    .card-header { border-bottom: 1px solid #ccc !important; margin-bottom: 12px !important; padding-bottom: 8px !important; font-size: 14px !important; color: black !important; }
    .table-wrapper { border: 1px solid #000 !important; overflow: visible !important; }
    .table { min-width: auto !important; border-collapse: collapse !important; width: 100% !important; display: table !important; }
    .table thead { display: table-header-group !important; }
    .table tbody { display: table-row-group !important; }
    .table tr { display: table-row !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
    .table th, .table td { display: table-cell !important; border: 1px solid #000 !important; padding: 6px 8px !important; color: #000 !important; font-size: 10px !important; text-align: left !important; }
    .table th { background-color: #e5e5e5 !important; font-weight: 700 !important; }
    .table td { background-color: white !important; }
    .table td::before { display: none !important; }
    .linha-cancelada, .linha-enviada { background-color: white !important; border-left: none !important; }
    @page { margin: 1cm; size: A4 landscape; }
}

/* ============================================================
   CORES DOS TIPOS DE SOLICITAÇÃO - SOBRESCREVENDO O GLOBAL
   ============================================================ */

/* Forçar cores para cliente_loja */
#tabela-solicitacoes-body tr.tipo-cliente-loja,
#tabela-solicitacoes-body tr.tipo-cliente-loja.linha-pendente,
#tabela-solicitacoes-body tr.linha-pendente.tipo-cliente-loja {
    background: #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
}
#tabela-solicitacoes-body tr.tipo-cliente-loja:hover {
    background: #bfdbfe !important;
}

/* Forçar cores para entrega */
#tabela-solicitacoes-body tr.tipo-entrega,
#tabela-solicitacoes-body tr.tipo-entrega.linha-pendente,
#tabela-solicitacoes-body tr.linha-pendente.tipo-entrega {
    background: #fef3c7 !important;
    border-left: 4px solid #f59e0b !important;
}
#tabela-solicitacoes-body tr.tipo-entrega:hover {
    background: #fde68a !important;
}

/* Forçar cores para sem_solicitacao */
#tabela-solicitacoes-body tr.tipo-sem-solicitacao,
#tabela-solicitacoes-body tr.tipo-sem-solicitacao.linha-pendente,
#tabela-solicitacoes-body tr.linha-pendente.tipo-sem-solicitacao {
    background: #f1f5f9 !important;
    border-left: 4px solid #94a3b8 !important;
}
#tabela-solicitacoes-body tr.tipo-sem-solicitacao:hover {
    background: #e2e8f0 !important;
}

/* Badges dos tipos */
.tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.tipo-badge-cliente_loja { background: #3b82f6; color: #fff; }
.tipo-badge-entrega { background: #f59e0b; color: #fff; }
.tipo-badge-sem_solicitacao { background: #94a3b8; color: #fff; }
/* ============================================================
   20/10/2026 (pedido do Junior: tela Financeiro com scroll lateral,
   "preciso algo mais responsivo e profissional" + "remove o <style> da
   pagina... quero q remova de todas e deixa apenas o CSS global, pois
   tem paginas com CSS proprio q atrapalha a responsividade")

   Regras que antes viviam no <style> de templates/total_pagamentos.html,
   promovidas pra aqui (CSS global) -- primeiro passo dessa limpeza
   (confirmado com o Junior fazer o resto, de outras paginas, aos poucos
   -- ver conversa). Nomes de classe conferidos um a um contra TODO o
   projeto antes de mover, pra nao vazar estilo de uma tela pra outra que
   usa o mesmo nome com um objetivo diferente:
   - .filter-grid, .divergence-input-group, .total-geral-display eram
     exclusivas desta tela -- seguras, movidas como estavam.
   - .filter-actions tambem e' usada em dashboard.html e
     pre_pedido_almoxarifado.html, cada uma com o MESMO valor base
     (display:flex; gap:10px; align-items:end) ou um override proprio
     definido DEPOIS desta folha global no <head> de cada pagina (entao
     continua ganhando por ordem de cascata, sem quebrar nada) -- regra
     aqui e' so' o denominador comum, nao foi preciso tocar nas outras 2
     paginas.
   ============================================================ */

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: end;
}

.filter-actions { display: flex; gap: 10px; align-items: end; }

.divergence-input-group { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.divergence-input-group .input-group { flex-grow: 1; margin-bottom: 0; }
.divergence-input-group .btn { flex-shrink: 0; }

@media (max-width: 767.98px) {
    .divergence-input-group { flex-direction: column; align-items: stretch; }
    .divergence-input-group .btn { width: 100%; }
    .filter-actions { flex-direction: column; align-items: stretch; }
}

.total-geral-display {
    background-color: var(--brand-glow);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    text-align: right;
}
.total-geral-display h2 { margin: 0; font-size: 1.05rem; color: var(--text-secondary); font-weight: 600; }
.total-geral-display h2 span { font-weight: 700; color: var(--brand-primary); font-size: 1.2em; margin-left: 8px; }

.resultado-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 12px;
    background-color: var(--bg-surface);
}

/* .table-cards-sempre -- tabela que SEMPRE aparece em formato de
   "cartao" (rotulo antes do valor, empilhada), em QUALQUER largura de
   tela, nao so' no celular. Pensada pra tabela tipo "pivot"/cruzada, com
   numero de colunas VARIAVEL (ex: uma coluna por forma de pagamento que
   teve movimento no periodo) -- nesse tipo de tabela, scroll horizontal
   nunca fica "profissional" (pedido do Junior), nem em tela grande,
   porque o numero de colunas e' imprevisivel. Pra tabela normal, com
   numero de colunas FIXO que cabe na tela, ".table" de sempre continua
   melhor (mostra mais informacao por tela no desktop) -- esta classe e'
   so' pra esse caso especifico de colunas dinamicas.
   Repete a MESMA aparencia de cartao que ".table" ja usa dentro de
   @media (max-width: 768px) mais acima, so' que sem o media query (ou
   seja, sempre ativa). Precisa de data-label="..." em cada <td> (mesma
   convencao usada em toda tabela do sistema) pra mostrar o rotulo antes
   do valor. */
.table-cards-sempre { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.table-cards-sempre thead { display: none; }
.table-cards-sempre tbody tr {
    display: block;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.table-cards-sempre tbody tr:hover { background-color: #ffffff; }
.table-cards-sempre td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: none;
    width: 100%;
    white-space: normal;
    text-align: right;
    overflow: visible;
    text-overflow: clip;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.table-cards-sempre td:empty { display: none; }
.table-cards-sempre td:last-child { border-bottom: none; }
.table-cards-sempre td::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}
.table-cards-sempre td:not([data-label])::before,
.table-cards-sempre td[data-label=""]::before { content: none; }
/* Linha de cabecalho do cartao (empresa/loja) e a linha de total --
   destacadas, igual a antiga .sticky-col/.total-col faziam na tabela com
   scroll. */
.table-cards-sempre td.card-destaque { background: #f8fafc; font-weight: 700; }
.table-cards-sempre td.card-destaque::before { color: var(--brand-primary); }

/* ============================================================
   20/10/2026 (continuacao do pedido do Junior: "remove o <style> de
   todas [as paginas] e deixa so' o CSS global") -- regras das 4 paginas
   de erro (erro_404.html, erro_403.html, erro_conexao.html, 500.html),
   que tinham o MESMO <style> (byte a byte identico nas 4, confirmado por
   md5sum antes de mover) -- unificadas aqui, 1 vez so' em vez de 4
   copias iguais. So' fica de fora a imagem de fundo (precisa de
   url_for(), que so' funciona dentro do .html processado pelo Flask,
   nunca dentro de um .css estatico) -- continua um <style> de 1 regra
   so' em cada uma dessas 4 paginas, so' pra essa 1 linha dinamica.
   Nome da classe no body (".pagina-erro") escolhido de proposito em vez
   de usar o seletor "body" puro (que afetaria TODA pagina do sistema,
   nao so' essas 4). ============================================================ */
.pagina-erro { display: flex; flex-direction: column; align-items: center; position: relative; }
.error-header { width: 100%; background-color: var(--brand-primary); padding: 10px 0; text-align: center; }
.error-header .logo { height: 50px; }
.error-card { margin: 60px auto; text-align: center; max-width: 500px; width: 90%; }
.error-card h1 { font-size: 1.6rem; margin-bottom: 10px; color: var(--text-primary); }
.error-card p { font-size: 1rem; margin-bottom: 20px; color: var(--text-secondary); }

/* ============================================================
   20/10/2026 (continuacao "remove o <style> de todas as paginas") --
   regras de templates/cadastrar_ei_si.html. ".tab-pane" foi RENOMEADA pra
   ".ei-si-pane" (no html e no js, static/js/extraido/cadastrar_ei_si.js)
   -- essa pagina tem seu PROPRIO sistema de abas (JS so' usa a classe
   "active", nunca "show"), diferente do sistema de abas global que ja'
   existe mais acima (.tab-content/.tab-pane, que exige "active" E "show"
   juntos) -- manter o nome ".tab-pane" ia quebrar as abas desta pagina
   (a regra global nunca bateria, a aba nunca apareceria). Resto das
   classes (.tabs, .tab-btn, .autocomplete-*, .m3-toast, etc) conferidas
   contra o projeto antes de mover: .autocomplete-wrapper/list/item sao
   IDENTICAS as de pedido_mostruario.html (confirmado comparando valor a
   valor) -- essa outra pagina continua com a copia dela, sem conflito
   (mesmos valores dos dois lados). ============================================================ */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
    padding: 10px 18px; border-radius: 8px; border: 2px solid var(--border, #ccc);
    background: #fff; font-weight: 700; cursor: pointer; color: #444;
}
.tab-btn.active { border-color: var(--brand-primary); color: var(--brand-primary); background: #eef3ee; }
.ei-si-pane { display: none; }
.ei-si-pane.active { display: block; }
.transfer-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; }
@media (max-width: 768px) { .transfer-grid { grid-template-columns: 1fr; } }
.transfer-arrow { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--brand-primary); padding-bottom: 12px; }
.saldo-hint { font-size: 13px; color: #666; margin-top: 4px; }
.saldo-hint.ok { color: #2e7d32; }
.saldo-hint.low { color: #ba1a1a; font-weight: 700; }
.tipo-toggle { display: flex; gap: 8px; }
.tipo-toggle label {
    flex: 1; text-align: center; padding: 10px; border: 2px solid var(--border, #ccc);
    border-radius: 8px; cursor: pointer; font-weight: 700; color: #444;
}
.tipo-toggle input { display: none; }
.tipo-toggle input:checked + span { color: #fff; }
.tipo-toggle label:has(input:checked) { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.item-add-grid { display: grid; grid-template-columns: 2fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 768px) { .item-add-grid { grid-template-columns: 1fr; } }
.autocomplete-wrapper { position: relative; }
.autocomplete-list {
    position: absolute; z-index: 20; background: #fff; border: 1px solid #ccc; border-radius: 8px;
    width: 100%; max-height: 220px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: none;
}
.autocomplete-list.show { display: block; }
.autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #eee; }
.autocomplete-item:hover { background: #eef3ee; }
.autocomplete-item small { display: block; color: #777; }
.m3-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--brand-primary); color: #fff; padding: 14px 22px; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90vw;
}
.m3-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.m3-toast.m3-toast--error { background: #ba1a1a; }

/* ============================================================
   20/10/2026 (continuacao "remove o <style> de todas as paginas") --
   regras de templates/analise_estoque.html, movidas como estavam
   (nenhum nome de classe colide com outra pagina do projeto, conferido
   antes de mover). ============================================================ */
.analysis-header { margin-bottom: 16px; }
.analysis-header__title { font-size: 1.2rem; margin: 0 0 4px; }
.analysis-header__subtitle { color: var(--text-secondary); margin: 0; font-size: 0.9rem; }

.saldo-principal-block { background: var(--brand-glow); border: 1px solid var(--brand-primary); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; text-align: center; }
.saldo-principal-block__label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; }
.saldo-principal-block__value { display: block; font-size: 2.2rem; font-weight: 800; color: var(--brand-primary); }
.saldo-principal-block__value.negative { color: var(--danger); }
.saldo-comparativo { margin-top: 10px; font-size: 0.9rem; color: var(--text-primary); }
.saldo-comparativo.text-muted { color: var(--text-secondary); }

.movimentacao-periodo-block { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.movimento-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px; text-align: center; }
.movimento-card__label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.movimento-card__value { display: block; font-size: 1.3rem; font-weight: 700; }
.movimento-card__value.entrada { color: var(--success); }
.movimento-card__value.saida { color: var(--danger); }
.chart-button-container { display: flex; justify-content: center; }

.ajustes-info-block { background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; }
.ajustes-info-block h4 { margin: 0 0 10px; font-size: 0.95rem; }
.ajuste-item { font-size: 0.88rem; margin-bottom: 8px; }
.ajuste-item:last-child { margin-bottom: 0; }
.qtde-ajustada.text-success { color: var(--success); }
.qtde-ajustada.text-danger { color: var(--danger); }
.qtde-ajustada.text-muted { color: var(--text-secondary); }
.info-text-ajuste { margin: 4px 0 0; font-size: 0.82rem; color: var(--text-secondary); }

.detalhes-auditoria-block { margin-top: 8px; }
.detalhes-auditoria-block__title { font-size: 1rem; margin-bottom: 10px; }
.notes-list-container { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 16px; max-height: 320px; overflow-y: auto; }
.notes-list { list-style: none; margin: 0; padding: 0; }
.notes-list li { padding: 6px 0; border-bottom: 1px solid #e2e8f0; }
.notes-list li:last-child { border-bottom: none; }
.note-badge { cursor: pointer; font-size: 0.88rem; }
.note-badge:hover { color: var(--brand-primary); text-decoration: underline; }
.note-badge.entrada { color: var(--success); }
.note-badge.saida { color: var(--danger); }
.note-badge.ajuste { color: var(--warning); }

.chart-no-data-message { text-align: center; color: var(--text-secondary); margin-top: 16px; }
.modal-body .table-wrapper { margin-top: 8px; }
    

/* ============================================================
   20/10/2026 (continuacao "remove o <style> de todas as paginas") --
   regras de templates/definir_funcao.html. O "body { display:flex;
   align-items:center; ... }" NAO foi movido como seletor "body" puro
   (afetaria toda pagina do sistema) -- virou a classe ".pagina-auth"
   (aplicada so' no <body> desta pagina). confirmar_funcao_qr.html tem
   um "body{...}" quase identico no proprio <style> dela (nao foi tocada
   agora, continua com o dela, sem conflito -- so' nao reaproveita esta
   classe nova ainda). #definirFuncaoForm e' um ID, exclusivo desta
   pagina (conferido). ============================================================ */
.pagina-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--bg-app); padding: 20px; }
.auth-card { max-width: 420px; width: 100%; text-align: center; }
.logo-container { margin-bottom: 20px; }
.logo-container .logo { max-width: 160px; }
.auth-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin: 0 0 20px; }
.alert-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; text-align: left; }
#definirFuncaoForm { display: flex; flex-direction: column; gap: 16px; text-align: left; }
#definirFuncaoForm .btn { width: 100%; justify-content: center; }

/* ============================================================
   20/10/2026 (continuacao "remove o <style> de todas as paginas") --
   regras de templates/cadastro_cliente.html. ".me-2" e
   ".align-items-center" ja existiam no CSS global IDENTICAS (conferido
   valor a valor) -- a copia local era so' redundante, nao precisou
   mover (so' apagada). ".char-counter" (base) ja' existe global; so' o
   modificador ".char-counter.warning" era novo. ============================================================ */
.field-required::after { content: " *"; color: var(--danger); font-weight: 700; }
.wtforms-errors { list-style: none; margin: 4px 0 0; padding: 0; }
.wtforms-errors li { color: var(--danger); font-size: 0.78rem; font-weight: 600; }
.form-group-full { grid-column: 1 / -1; }
.hidden { display: none !important; }
.char-counter.warning { color: var(--danger); font-weight: 700; }

/* 20/10/2026 -- templates/consultar_estoque.html (nomes conferidos: estoque.html
   e imprimir_etiqueta.html tem ".cards-container" PROPRIO, com valores
   diferentes -- nao foram tocadas agora, continuam com a copia delas). */
.cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.estoque-card--destaque { background-color: var(--brand-glow); border-color: var(--brand-primary); }
.estoque-card p { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-primary); }
.estoque-card p:last-child { margin-bottom: 0; }
.estoque-card .saldo, .estoque-card .currency { font-weight: 600; color: var(--brand-primary); }

/* 20/10/2026 -- templates/total_vendas.html. ".col-valor" (so' text-align:right)
   e' compartilhada com varias paginas com o MESMO significado -- vira
   regra global base aqui; paginas PDF que adicionam white-space:nowrap
   por cima continuam com essa adicao na copia local delas (nao tocadas
   agora), sem conflito. */
.col-valor { text-align: right; }
.clickable-total { cursor: pointer; transition: color var(--transition-fast); }
.clickable-total:hover { color: var(--brand-primary); text-decoration: underline; }
.total-geral-row { background-color: var(--brand-glow); font-weight: 700; }

/* 20/10/2026 -- templates/whatsapp_grupos.html (todas as classes exclusivas
   desta pagina, conferido). */
.grupo-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.grupo-card:last-child { border-bottom: none; }
.grupo-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grupo-info .fa-users { color: #64748b; }
.grupo-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.grupo-jid { font-size: .75rem; color: #94a3b8; }
.badge-offline { font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; margin-left: 8px; }
.grupo-form { display: flex; align-items: center; gap: 8px; }
.grupo-form select { min-width: 220px; }

/* 20/10/2026 -- templates/lucro_fornecedor.html. ".chart-button-container"
   foi RENOMEADA pra ".chart-button-container-dir" -- esse nome ja' existia
   global (vindo de analise_estoque.html) com valores DIFERENTES
   (display:flex;justify-content:center), reusar ia mudar o layout de
   analise_estoque.html sem tocar nela. ".col-valor"/".col-texto" sao a
   mesma regra simples (text-align) ja' usada/movida de outras paginas --
   sem conflito. A variavel --custom-color-success que estava num
   ":root{}" local foi incorporada ao :root global (linha 133) em vez de
   deixar um segundo bloco :root{} solto na pagina. */
.preset-button-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; margin-bottom: 16px; }
.preset-button { padding: 4px 12px; font-size: 0.75rem; height: 28px; }
.valor-negativo { color: var(--danger) !important; font-weight: 500; }
.valor-positivo { color: var(--custom-color-success, #1B5E20) !important; font-weight: 500; }
.valor-negativo strong, .valor-positivo strong { color: inherit; font-weight: inherit; }
.filter-description { margin-top: -8px; margin-bottom: 16px; color: var(--text-secondary); }
.chart-button-container-dir { margin-bottom: 16px; text-align: right; }
.col-texto { text-align: left; }
#lucroChart { max-width: 100%; height: auto !important; }


/* configurar_marca.html - cores da marca (unico ao arquivo) */
.cor-card{background:var(--bg-surface);border-radius:var(--radius-lg);padding:16px 20px;border:1px solid var(--glass-border);box-shadow:var(--shadow-card);margin-bottom:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cor-card__nome{flex:1;min-width:180px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:10px}
.cor-card__swatch{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border-color);flex-shrink:0}
.cor-card form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cor-card input[type="color"]{width:44px;height:36px;padding:2px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#fff;cursor:pointer}
.cor-card__status{font-size:0.78rem;color:var(--text-secondary)}
.cor-card__status.custom{color:var(--success);font-weight:600}
.cor-card__logo-preview{width:36px;height:36px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--border-color);flex-shrink:0}
.cor-card__divider{width:1px;align-self:stretch;background:var(--border-color);margin:0 4px}
.cor-card input[type="file"]{max-width:180px;font-size:0.78rem;color:var(--text-secondary)}
@media (max-width:576px){
    .cor-card{flex-direction:column;align-items:stretch}
    .cor-card form{justify-content:space-between}
    .cor-card__divider{display:none}
}


/* pre_pedido_almoxarifado.html - texto negativo, campo "comprar" e coluna
   numerica. ".text-negative" nao conflita de verdade com pre_pedido_pdf.html
   / relatorio_saldo_estoque_pdf.html (mesmo nome, variam a cor exata) pq
   esses 2 sao paginas de impressao standalone que NAO carregam este CSS
   global -- confirmado, sem link <link ... olivasoft-premium.css> nelas.
   ".col-numero" tem o mesmo valor (text-align:right) em todo canto que
   aparece -- seguro juntar com ".col-valor" (que ja' e' global). O override
   proprio de ".filter-actions" (com margin-left:auto e media query
   diferente) e a remocao do spinner de input number continuam no <style>
   local da pagina -- nao e' seguro tornar global a remocao de spinner
   (afetaria TODO input number do sistema sem ter sido pedido). */
.text-negative { color: var(--danger) !important; font-weight: 600; }
.comprar-input { width: 80px; text-align: right; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: #fff; color: var(--text-primary); }
.col-numero { text-align: right; }


/* pre_pedido.html - grid de datas, input de quantidade a comprar e variante
   "sem necessidade". ".date-group" tem o mesmo valor (e a mesma media
   query) em pedido_mostruario.html -- seguro usar como base compartilhada;
   aquela pagina continua com seu <style> proprio intacto, repetindo a
   mesma regra sem conflito. ".input-table" e' exclusiva desta pagina.
   ".input-comprar.sem-necessidade" e' um seletor composto (2 classes) que
   so' se aplica quando as DUAS classes estao juntas no elemento -- nao
   colide com o ".input-comprar" (base, sem combinar) de
   pedido_mostruario.html, que nunca usa "sem-necessidade". */
.date-group { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.input-table {
    width: 100px; height: 40px; padding: 0 12px; text-align: right;
    border: 1.5px solid var(--border-color); border-radius: 8px;
    font-weight: 600; font-size: 0.938rem; transition: all 0.2s; background: #fff;
}
.input-table:hover { border-color: #cbd5e1; }
.input-table:focus { border-color: var(--brand-primary); outline: none; box-shadow: 0 0 0 3px var(--brand-glow); }
.input-comprar.sem-necessidade { color: #2e7d32; border-color: #a5d6a7; background: #f1f8f1; }
@media (max-width: 768px) {
    .date-group { grid-template-columns: 1fr; }
}


/* totalcompras.html - titulo de filtro com icone e tarjas de impressao.
   Renomeei ".filter-title" -> ".filter-title-flex" porque esta pagina usa
   um valor com display:flex/icone-colorido diferente do ".filter-title"
   mais simples (sem flex) de relatorio_comissao.html -- se eu juntasse os
   dois sob o mesmo nome global, relatorio_comissao.html ganharia de
   graca o layout flex/icone sem isso ter sido pedido nem revisado. Com o
   nome novo nao ha mais relacao entre as duas regras. ".tarja-impressao"
   e variantes sao exclusivas desta pagina. */
.filter-title-flex { font-size: 1.1rem; color: var(--text-primary); font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.filter-title-flex i { color: var(--brand-primary); }
.tarja-impressao {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: white;
    display: inline-block;
    margin-top: 6px;
}
.tarja-verde { background-color: var(--success); }
.tarja-vermelha { background-color: var(--danger); }


/* baixa_entrega.html - linha selecionada/clicavel da lista de entregas.
   Mesmo valor em baixa_montagem.html -- seguro compartilhar. O bloco
   #sac-scrim (SAC em tela cheia) dessa pagina ficou de proposito no
   <style> local dela, nao aqui -- ver comentario no proprio arquivo. */
.row-selected { background-color: var(--brand-glow) !important; }
.delivery-row { cursor: pointer; }


/* imprimir_etiqueta.html - titulo com borda, cards de resultado e saldo
   pendente. Renomeei ".cards-container" -> ".cards-container-280" porque
   esse valor (minmax 280px) e' diferente do de consultar_estoque.html
   (300px, ja' global) e de estoque.html (320px, continua com <style>
   proprio) -- como o <style> local INTEIRO desta pagina esta sendo
   removido, nao dava mais pra depender da cascata (ordem no documento)
   pra manter o 280px; precisei renomear. Resto e' exclusivo desta pagina. */
.section-title-bordered {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.cards-container-280 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.resultado-card-item.saldo-pendente-card {
    border-left: 4px solid var(--danger);
}
.resultado-card-item {
    border-left: 4px solid var(--brand-primary);
}
.saldo-pendente {
    color: var(--danger);
    font-weight: 600;
}


/* comissao_motoristas.html - cards de taxa, formularios de regiao/bairro
   e tabela de lojas. ".lojas-table" ja' e' reconhecida no CSS global (faz
   parte do grupo ".lojas-table, .relatorio-table, .tabela-dashboard,
   .table-mini" que vira cards sempre, de uma limpeza anterior) -- as
   regras abaixo so' ADICIONAM refinamentos proprios desta tabela (largura,
   border-collapse, padding, select) por cima daquele comportamento base,
   sem conflito. Resto e' exclusivo desta pagina. */
.taxa-card{background:var(--bg-surface);border-radius:var(--radius-lg);padding:14px 20px;border:1px solid var(--glass-border);box-shadow:var(--shadow-card);margin-bottom:10px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.taxa-card__nome{flex:1;min-width:160px;font-weight:700;color:var(--text-primary)}
.taxa-card form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.taxa-card input[type="text"],.taxa-card input[type="number"]{width:120px;padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff)}
.form-add-regiao{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:16px 20px;}
.form-add-regiao .campo{display:flex;flex-direction:column;gap:4px}
.form-add-regiao label{font-size:0.78rem;color:var(--text-secondary);font-weight:600}
.form-add-regiao input{padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff)}
.lojas-table{width:100%;border-collapse:collapse}
.lojas-table th,.lojas-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-color);font-size:0.88rem}
.lojas-table select{padding:6px 8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff);min-width:160px}
.form-add-bairro{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:16px 20px;}
.form-add-bairro .campo{display:flex;flex-direction:column;gap:4px}
.form-add-bairro label{font-size:0.78rem;color:var(--text-secondary);font-weight:600}
.form-add-bairro input,.form-add-bairro select{padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff)}
.mostruario-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;}
.mostruario-card input{width:120px;padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff)}

/* comissao_motoristas_relatorio.html - filtro de periodo, tabela de
   relatorio e avisos. Mesma logica do ".relatorio-table" acima (classe ja'
   reconhecida no grupo "sempre cards" do CSS global) -- aqui so' entram os
   refinamentos proprios desta tabela. Resto e' exclusivo desta pagina. */
.filtro-periodo{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:16px 20px;}
.filtro-periodo .campo{display:flex;flex-direction:column;gap:4px}
.filtro-periodo label{font-size:0.78rem;color:var(--text-secondary);font-weight:600}
.filtro-periodo input{padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff)}
.relatorio-table{width:100%;border-collapse:collapse;font-size:0.84rem}
.relatorio-table th,.relatorio-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-color);white-space:nowrap}
.relatorio-table th{color:var(--text-secondary);font-size:0.76rem;text-transform:uppercase}
.relatorio-table td.num{text-align:right}
.relatorio-table tr.linha-mostruario{background:rgba(255,193,7,0.06)}
.relatorio-table .detalhe-regiao{font-size:0.74rem;color:var(--text-secondary);white-space:normal;max-width:220px}
.ajuste-form{display:flex;align-items:center;gap:6px}
.ajuste-form input{width:80px;padding:6px 8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input,#fff);text-align:right}
.relatorio-table tfoot td{font-weight:700;border-top:2px solid var(--border-color);border-bottom:none}
.badge-extra{background:#fff3cd;color:#856404;font-weight:600;font-size:0.72rem;padding:2px 6px;border-radius:8px}
.alert-avisos{background:#fff3cd;border:1px solid #ffe08a;color:#856404;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:0.85rem}
.alert-avisos ul{margin:6px 0 0 18px;padding:0}

/* cadastro_cep.html - lista de resultados de busca de logradouro.
   ".logradouro-result-item"/".result-details" tambem aparecem em
   caixa.html e pdv.html com um visual de "cartao" diferente (borda
   completa, raio, fundo, margem) -- esses dois arquivos continuam com seu
   <style> proprio intacto (nao foram tocados ainda, sao grandes/arriscados
   demais pra essa limpeza), entao o override deles, definido depois desta
   folha global no <head> de cada um, continua ganhando por cascata sem
   quebrar nada. Aqui vai so' o valor mais simples (lista, sem cartao) que
   cadastro_cep.html usa. ".results-list" e' exclusiva desta pagina. */
.logradouro-result-item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
}
.logradouro-result-item:last-child { border-bottom: none; }
.logradouro-result-item:hover {
    background-color: var(--bg-app);
}
.result-details {
     font-size: 0.9em;
     color: var(--text-secondary);
}
.results-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}


/* baixa_montagem.html - input de mes, nome/volume do produto na lista e
   rotulo de optgroup de equipe. Todas exclusivas desta pagina (.row-selected
   e .delivery-row ja' sao globais, vieram de baixa_entrega.html - mesmo
   valor, nao precisa repetir aqui). O bloco #sac-scrim dessa pagina ficou
   de proposito no <style> local dela, igual em baixa_entrega.html. */
.month-input { text-align: center; letter-spacing: 1px; }
.produto-nome { font-weight: 600; color: var(--text-primary); }
.volume-info { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.equipe-optgroup-label { font-weight: 700; }


/* confirmar_funcao_qr.html - variante do ".pagina-auth"/".auth-card"/
   ".logo-container"/".alert-messages" ja' globais (mesmos valores de
   definir_funcao.html, <body> virou class="pagina-auth" aqui tambem).
   ".auth-title" tem um valor MENOR aqui (1.25rem/16px) que o default
   global (1.375rem/20px, que veio de definir_funcao.html) -- renomeei pra
   ".auth-title-compact" em vez de forcar o mesmo nome com valor diferente.
   "#confirmarFuncaoForm" e' um ID (nunca colide com outra pagina) com o
   mesmo padrao de "#definirFuncaoForm", que ja' e' global -- adicionei
   como uma regra extra, nao precisei renomear nada. ".device-info-box" e'
   exclusiva desta pagina. */
.auth-title-compact { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; }
.device-info-box {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-secondary, #475569);
}
.device-info-box strong { color: var(--text-primary); }
#confirmarFuncaoForm { display: flex; flex-direction: column; gap: 16px; text-align: left; }
#confirmarFuncaoForm .btn { width: 100%; justify-content: center; }


/* gerenciar_emails.html - cabecalho de secao, grid de config, paginacao,
   abas e toast. ".text-center"/".text-muted"/".d-block" locais desta
   pagina eram identicos (ou ja' inefetivos, por causa do !important) ao
   que ja' existe aqui em cima -- nao precisei re-adicionar, so' remover
   da pagina. ".py-4" tem valores diferentes em consultar_assistencia.html
   (24px) e vendas_caixa.html (16px), que continuam com <style> proprio
   intacto -- o valor abaixo (32px) e' so' o default, a cascata deles
   continua protegendo essas 2 paginas. ".mb-2" e' o mesmo valor em todo
   canto que usa (8px ou 0.5rem, igual na pratica). ".section-header-row"
   tem a MESMA regra base em relatorios_assistencia.html, mas o "h3" por
   dentro diverge (cor/tamanho) -- esta pagina continua intocada, cascata
   protege. ".toast-close-btn" e' identico ao de relatorios_assistencia.html
   (tambem nao tocada ainda) -- so' conferencia.html tem uma versao bem
   diferente, tambem protegida pela cascata. Resto exclusivo desta pagina. */
.section-header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.section-header-row h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; }
.section-header-row h3 i { margin-right: 8px; color: var(--brand-primary); }

.config-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 992px) { .config-layout { grid-template-columns: 1fr; } }

.email-copias { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.py-4 { padding-top: 32px; padding-bottom: 32px; }
.mb-2 { margin-bottom: 8px; }

.pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 16px 0 0; justify-content: center; flex-wrap: wrap; }
.page-link { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-weight: 600; font-size: 0.85rem; background: #ffffff; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.page-link:hover { background: #f1f5f9; border-color: var(--brand-primary); }
.page-item.disabled .page-link { opacity: 0.5; pointer-events: none; }
.page-item.active .page-link { background: var(--brand-primary); border-color: var(--brand-primary); color: #ffffff; }

/* .nav-tabs ja' e' global (acima) como componente de abas estilizado --
   essa pagina usa um <ul> pra isso e precisa so' tirar a bolinha de lista
   padrao do navegador; acrescento como regra extra, nao troquei a de cima. */
.nav-tabs { list-style: none; }

.toast-close-btn { background: none; border: none; color: #fff; opacity: 0.8; cursor: pointer; font-size: 1rem; padding: 4px; margin-left: auto; }
.toast-close-btn:hover { opacity: 1; }


/* relatorio_baixas_entrega.html - cards de estatistica, celulas e badges
   do relatorio, tabela-resumo de comissao e modal de PDF. ".obs-cell" tem
   valores diferentes em dashboard_montagem.html e pendencias_lancamento.html
   (nao tocadas ainda) -- o valor abaixo e' so' o default desta pagina, a
   cascata delas continua protegendo as outras 2. ".comissao-resumo-table"
   ja' e' reconhecida no grupo "sempre cards" do CSS global -- as regras
   abaixo so' complementam. ".modal-body-pdf"/".pdf-loader-container"/
   "#pdfFrame"/".spinner-text" sao identicas a relatorio_comissao.html (que
   usa o mesmo modal de visualizar PDF, ainda nao tocada) -- seguro
   compartilhar. Resto exclusivo desta pagina. */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; text-align: center; }
.stat-box .stat-valor { font-size: 1.8rem; font-weight: 700; }
.stat-box .stat-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; }
.stat-box.stat-app .stat-valor { color: #1565c0; }
.stat-box.stat-manual .stat-valor { color: #b05a00; }
.stat-box.stat-total .stat-valor { color: var(--brand-primary); }

.obs-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; color: var(--text-secondary); }
.badge-tentativas { background-color: #fff3cd; color: #856404; font-weight: 600; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.badge-tipo-baixa { font-size: 0.7rem; padding: 3px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.badge-tipo-app { background-color: #e3f2fd; color: #1565c0; }
.badge-tipo-sem-produto { background-color: #fdecea; color: #c0392b; margin-top: 4px; display: inline-block; }
.badge-tipo-manual { background-color: #fff3e0; color: #b05a00; }

.comissao-cell { font-size: 0.85rem; white-space: nowrap; }
.comissao-cell .sem-regiao { color: #c0392b; font-size: 0.72rem; }
.comissao-resumo-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.comissao-resumo-table th, .comissao-resumo-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: left; }
.comissao-resumo-table td.num, .comissao-resumo-table th.num { text-align: right; }
.comissao-resumo-table tfoot td { font-weight: 700; border-top: 2px solid var(--border-color); border-bottom: none; }

.modal-body-pdf { height: 85vh; position: relative; background-color: #1a1a1a; padding: 0; }
.pdf-loader-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.8); z-index: 10; }
#pdfFrame { width: 100%; height: 100%; border: none; position: relative; z-index: 1; display: none; }
.spinner-text { color: white; margin-top: 15px; font-size: 14px; }


/* consultar_compras.html - grid de detalhes da compra e celulas de valor.
   Todas as classes sao exclusivas desta pagina. */
.compra-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
    margin-bottom: 16px;
}
.compra-detail-item strong {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.compra-detail-item span, .compra-detail-item div {
    font-size: 1rem;
    color: var(--text-primary);
}
.detail-pre {
    white-space: pre-wrap;
    text-align: left;
    background-color: var(--bg-app);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-family: 'Roboto Mono', monospace;
    max-height: 300px;
    overflow-y: auto;
}
.col-valor-item, .col-qtde-item { text-align: right; }
.btn-marcar-pago { padding: 6px 12px; font-size: 0.875rem; }


/* pedido_mostruario.html - grid de rankings, input de compra do
   mostruario e grid de item extra. ".date-group" e
   ".autocomplete-wrapper/-list/-item" ja' sao globais com o MESMO valor
   (vieram de pre_pedido.html e cadastrar_ei_si.html respectivamente) --
   nao precisei repetir. ".input-comprar" (base, sem combinar com
   "sem-necessidade") e' diferente do ".input-comprar.sem-necessidade" de
   pre_pedido.html (selector composto, nao colide). Resto exclusivo desta
   pagina. */
.rankings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 992px) { .rankings-grid { grid-template-columns: 1fr; } }
.rankings-grid > .card { min-width: 0; }
.ranking-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; }
.ranking-title.mais { color: var(--success, #2e7d32); }
.ranking-title.menos { color: var(--danger, #ba1a1a); }
.input-comprar {
    width: 90px; height: 38px; padding: 0 10px; text-align: right;
    border: 1.5px solid var(--border-color); border-radius: 8px;
    font-weight: 700; font-size: 0.9rem; transition: all 0.2s; background: #fff;
}
.input-comprar:hover { border-color: #cbd5e1; }
.input-comprar:focus { border-color: var(--brand-primary); outline: none; box-shadow: 0 0 0 3px var(--brand-glow); }
.input-comprar.tem-necessidade { border-color: var(--danger, #ba1a1a); color: var(--danger, #ba1a1a); }
.extra-add-grid { display: grid; grid-template-columns: minmax(240px, 420px) auto; gap: 12px; align-items: end; margin-bottom: 16px; }
@media (max-width: 576px) { .extra-add-grid { grid-template-columns: 1fr; } }
.btn-remover-extra { color: var(--danger, #ba1a1a); background: none; border: none; cursor: pointer; font-size: 1rem; padding: 6px; }
.btn-remover-extra:hover { opacity: 0.7; }


/* SAC em tela cheia (padronizado em 20/10/2026 a pedido do Junior: "o
   widget de SAC e' pra ser igual em todas as telas, copiar o formato da
   tela vendas_caixa.html"). #sac-scrim e' um ID (nunca colide entre
   paginas -- cada pagina tem o seu proprio elemento com esse id), usado
   em baixa_entrega.html, baixa_montagem.html, entregas.html,
   lancar_montagem.html, vendas_caixa.html e dashboard_montagem.html.
   Historico original (22/09/2026): o modal continuava cortando a tela com
   um "flutter" na parte inferior, atrapalhando a responsividade, mesmo
   depois de varios ajustes de tamanho -- ver sac_whatsapp_integracao.md.
   Em vez de continuar tentando acertar o tamanho de uma caixa flutuante
   dentro da pagina, o SAC ocupa a tela inteira quando aberto.
   dashboard_montagem.html usava um estilo inline proprio (caixa flutuante,
   sem !important) pro mesmo modal -- essa regra global, com !important,
   agora ganha dele tambem, deixando o SAC igual em todo lugar, como
   pedido. */
#sac-scrim.modal-overlay { padding: 0 !important; background: #fff !important; }
#sac-scrim .modal-sac {
    width: 100vw !important; height: 100vh !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0 !important; margin: 0 !important;
    box-shadow: none !important; border: none !important;
}
/* BUG CORRIGIDO (23/09/2026, Junior reportou faixa branca vazia no rodape
   do SAC em tela cheia): o .modal-body GERAL (usado por TODOS os modais do
   sistema) tem "max-height: calc(85vh - 140px)" -- esse limite fazia
   sentido pro modal antigo, de caixa flutuante, mas aqui o .modal-sac vira
   a tela inteira (100vh, ver regra acima) e o .modal-body (com o iframe do
   SAC dentro) continuava preso a esse teto antigo -- sobrava um vao em
   branco embaixo. Removido o teto so' pra esse modal (nao mexe no
   .modal-body dos outros modais do sistema). Tambem esconde a barra de
   rolagem NOSSA (o scroll continua funcionando, so' sem o trilho/setas
   visiveis) -- pedido do Junior "ativa scroll invisivel". A barra com
   setas de dentro do proprio app do SAC (dominio diferente, dentro do
   iframe) nao da pra esconder deste lado. */
#sac-scrim .modal-body {
    max-height: none !important;
    height: calc(100% - 64px) !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Edge legado */
}
#sac-scrim .modal-body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }


/* relatorios_assistencia.html - toggle de filtro, grid de acoes das
   estatisticas, botao exportar, badges de pecas e toasts extras. O
   ".section-header-row" base e ".section-header-row h3 i" ja' eram
   identicos ao global (de gerenciar_emails.html) -- so' o "h3" (cor/
   tamanho/maiuscula) divergia, por isso ficou como ".section-header-row
   .compacto h3" no <style> local da pagina em vez de forcar aqui.
   ".toast-close-btn" idem, ja' era identico ao global. ".toast-info" tem
   o mesmo valor aqui, em consultar_assistencia.html, editar_entrega.html
   e registrar_assistencia.html (nenhuma tocada ainda) -- so'
   coordenadora_mostruario.html usa um valor diferente (gradiente), mas
   continua protegida pela cascata (nao tocada). Resto exclusivo desta
   pagina. */
.btn-toggle-filtro { background: none; border: none; color: var(--brand-primary); cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-toggle-filtro:hover { text-decoration: underline; }

.estatisticas-actions-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; margin-bottom: 24px; }
@media (max-width: 992px) { .estatisticas-actions-row { grid-template-columns: 1fr; } }

.btn-exportar { background-color: #2196f3 !important; color: #fff !important; border-color: #2196f3 !important; }
.btn-exportar:hover:not(:disabled) { background-color: #1976d2 !important; }

.loading-spinner { text-align: center; padding: 40px; }

.pecas-badge { background: var(--brand-glow); color: var(--brand-primary); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 600; cursor: pointer; display: inline-block; }
.pecas-badge:hover { background: var(--brand-primary); color: #fff; }

.pecas-detalhes .lista-pecas { max-height: 300px; overflow-y: auto; }
.peca-item-detailed { padding: 10px; background: #f8fafc; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 0.9rem; }
.peca-item-detailed strong { color: var(--text-secondary); }

.atrasado { color: var(--danger) !important; font-weight: 700; }

.toast-info { background: #0288d1; }
.toast-warning { background: var(--warning); }


/* relatorio_comissao.html - cards de comissao por empresa, tabela, badges
   e card-resumo do vendedor. ".filter-title" aqui e' o valor simples
   (sem flex) que totalcompras.html tinha e eu renomeei pra
   ".filter-title-flex" na limpeza dela -- esse nome bare agora e' so'
   dessa pagina. ".table-comissao" ja' e' reconhecida no grupo "sempre
   cards" do CSS global -- as regras abaixo so' complementam.
   ".row-gerente"/".row-gerente-televendas"/".row-total" tambem aparecem
   em relatorio_comissao_pdf.html, mas essa e' uma pagina de PDF standalone
   que NAO carrega este CSS global -- sem conflito real. ".modal-body-pdf"/
   ".pdf-loader-container"/"#pdfFrame"/".spinner-text" ja' sao globais
   (de relatorio_baixas_entrega.html, mesmo valor) -- nao repeti. Resto
   exclusivo desta pagina. */
.filter-title { font-size: 1.1rem; color: var(--text-primary); font-weight: 700; margin-bottom: 20px; }

.resultados-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; padding: 4px 0; }
.card-comissao {
    border: 1px solid var(--border-color); border-radius: var(--radius-lg); background-color: var(--bg-surface);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-card);
}
.card-comissao:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-primary); }
.card-header-comissao { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.empresa-nome { font-weight: 700; color: var(--brand-primary); margin: 0; font-size: 1.1rem; }
.faturamento-box { text-align: right; flex-shrink: 0; }
.faturamento-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; display: block; }
.faturamento-valor { font-weight: 700; color: var(--success); font-size: 0.95rem; }

.table-comissao { width: 100%; font-size: 0.88rem; border-collapse: collapse; }
.table-comissao td, .table-comissao th { padding: 10px 15px; text-align: left; }
.table-comissao th { font-size: 0.7rem; text-transform: uppercase; color: var(--text-secondary); }
.table-comissao td.text-end, .table-comissao th.text-end { text-align: right; }
.row-gerente { background-color: var(--warning-bg); font-weight: 500; color: #856404; }
.row-gerente-televendas { background-color: #fff3e0; font-weight: 500; color: #e65100; }
.row-total { background-color: var(--bg-app); font-weight: 700; border-top: 2px solid var(--border-color) !important; }

.badge-multi-store { background-color: var(--success-bg); color: var(--success); font-size: 0.7rem; padding: 2px 6px; border-radius: var(--radius-pill); margin-left: 8px; cursor: help; }
.badge-televendas { background-color: #e65100; color: #fff; font-size: 0.65rem; padding: 2px 6px; border-radius: var(--radius-pill); margin-left: 6px; }

.vendedor-resumo-card { background: linear-gradient(135deg, var(--brand-primary) 0%, #2a4d2a 100%); color: #fff; border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.vendedor-resumo-card h3 { margin: 0 0 8px 0; font-size: 1.3rem; }
.vendedor-resumo-card .total-comissao { font-size: 2rem; font-weight: bold; margin: 8px 0; }
.vendedor-resumo-card .detalhe-lojas { font-size: 0.85rem; opacity: 0.9; margin-top: 8px; }
.vendedor-resumo-card .text-warning { color: #ffc107 !important; opacity: 1; }

.spinner-modal-content { text-align: center; background: #fff; padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); }


/* contabilidade_estoque.html - trava de scroll duplo, cards de saldo e
   estado vazio. A trava "overflow:hidden" em body/.app-layout/.main-area
   NAO pode virar global sem escopo -- .app-layout/.main-area sao as
   classes do layout principal usadas em TODO o sistema, travar o scroll
   globalmente quebraria a rolagem normal de quase todas as paginas.
   Virou a classe ".pagina-scroll-trancado" no <body> (mesmo padrao usado
   em lancar_montagem.html, que tem a mesma trava no <style> dela ainda --
   candidata a usar essa classe nova numa limpeza futura). As utilidades
   bootstrap-like (.d-flex/.gap-2/.gap-3/.align-items-end/
   .align-items-center/.justify-content-between/.flex-wrap/.text-right/
   .text-center/.d-none/.me-3/.d-md-inline/.d-md-flex/.d-lg-none) desta
   pagina eram todas identicas ou ja' inefetivas (o global usa !important,
   que sempre ganha de uma regra sem !important, nao importa a ordem) --
   so' ".ms-auto" ainda nao existia, adicionada abaixo (mesmo valor em
   conferencia.html/contabilidade_mostruario.html/
   contabilidade_solicitacoes.html/coordenadora_mostruario.html/
   vendas_caixa.html, nenhuma tocada ainda). O bloco "@media(max-width:768px)
   .table thead{display:none}..." desta pagina era uma versao mais antiga
   e ja' superada da transformacao "tabela vira cards no celular" que o
   CSS global já aplica em ".table" desde 14/10/2026 -- removido sem
   substituto, a pagina passa a usar o padrao atual do sistema (mais
   consistente, nao e' uma regressao). ".saldo-positivo/-negativo/-zero"
   e ".linha-nova"/".vazio-aba" sao exclusivas desta pagina (estoque.html
   usa um nome parecido, ".card-produto.saldo-zero", mas e' outro seletor,
   sem colisao real; conferencia.html/contabilidade_solicitacoes.html/
   coordenadora_mostruario.html tem suas proprias ".linha-nova"/".vazio-aba"
   com valor um pouco diferente, nao tocadas, protegidas pela cascata). */
body.pagina-scroll-trancado { overflow: hidden !important; height: 100vh !important; margin: 0; padding: 0; }
body.pagina-scroll-trancado .app-layout { height: 100vh !important; overflow: hidden !important; }
body.pagina-scroll-trancado .main-area { height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; }

.ms-auto { margin-left: auto; }

.saldo-positivo { color: #065f46; font-weight: 800; background: #d1fae5; padding: 2px 8px; border-radius: 4px; }
.saldo-negativo { color: #991b1b; font-weight: 800; background: #fee2e2; padding: 2px 8px; border-radius: 4px; }
.saldo-zero { color: #64748b; font-weight: 800; background: #f1f5f9; padding: 2px 8px; border-radius: 4px; }

@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.linha-nova { animation: slideIn 0.5s ease-out; }

.vazio-aba { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.vazio-aba i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 12px; }
.vazio-aba h4 { font-size: 1rem; color: var(--text-primary); font-weight: 700; margin-bottom: 6px; }
.vazio-aba p { font-size: 0.85rem; }


/* dashboard_montagem.html - cards de resumo, grupos recolhiveis por
   montador, pills/badges de status e tabela do dashboard. ".resumo-cards"/
   ".resumo-card"/".resumo-card .valor" sao identicas em
   pendencias_lancamento.html (nao tocada ainda) -- seguro compartilhar.
   O ".pill" de pendencias_lancamento.html e' sempre escopado como
   ".secao-header .pill" (seletor composto), nao colide com o ".pill" bare
   desta pagina. ".grupo-header" (base) nao colide mais com
   relatorio_custos.html, que foi renomeada pra ".grupo-header-rotulo"
   numa limpeza anterior. "table.tabela-dashboard" ja' e' reconhecida no
   grupo "sempre cards" do CSS global -- as regras abaixo so' complementam.
   Renomeei ".obs-cell" -> ".obs-cell-dash" e ".empty-state" ->
   ".empty-state-dash" porque os valores desta pagina diferem do default
   global (que veio de relatorio_baixas_entrega.html e e' o default
   generico, respectivamente) -- como o <style> local INTEIRO foi
   removido, nao dava pra depender da cascata. Resto exclusivo desta
   pagina. */
.resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.resumo-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: 14px 16px; }
.resumo-card .valor { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); }
.resumo-card .label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }

.grupo-montador { margin-bottom: 18px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; overflow: hidden; }
.grupo-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg-hover, #f8fafc); cursor: pointer; }
.grupo-header h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.grupo-header .contadores { display: flex; gap: 8px; flex-shrink: 0; }
.pill { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill-pendente { background: #fef3c7; color: #92400e; }
.pill-entregue { background: #dcfce7; color: #166534; }
.pill-atrasado { background: #fee2e2; color: #991b1b; }

.grupo-body { display: none; }
.grupo-montador.open .grupo-body { display: block; }
.grupo-montador.open .grupo-header .chevron { transform: rotate(90deg); }
.chevron { transition: transform 0.15s ease; }

table.tabela-dashboard { width: 100%; border-collapse: collapse; }
table.tabela-dashboard th { text-align: left; font-size: 0.72rem; text-transform: uppercase; color: var(--text-secondary); padding: 8px 14px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
table.tabela-dashboard td { padding: 8px 14px; border-bottom: 1px solid var(--border-color, #f1f5f9); font-size: 0.85rem; vertical-align: top; }
table.tabela-dashboard tr:last-child td { border-bottom: none; }

.badge-entrega { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.badge-entrega.pendente { background: #fee2e2; color: #991b1b; }
.badge-entrega.entregue { background: #dcfce7; color: #166534; }
.badge-entrega.retira { background: #e0e7ff; color: #3730a3; }
.badge-entrega.montado { background: #dbeafe; color: #1e40af; }

tr.linha-atrasada td { background: #fef2f2; }

.obs-cell-dash { color: var(--text-secondary); font-size: 0.78rem; max-width: 260px; white-space: pre-line; }

.empty-state-dash { text-align: center; padding: 48px 16px; color: var(--text-secondary); }
.empty-state-dash i { font-size: 2.2rem; margin-bottom: 10px; display: block; color: #a3e635; }

@media print {
    .sidebar, .top-bar, .grupo-header .chevron { display: none !important; }
    .grupo-body { display: block !important; }
}


/* dashboard_supervisores.html - botoes de periodo rapido, banner de
   benchmark, grid de cards por loja e tabela mini de vendedores.
   ".periodo-rapido"/".periodo-botoes"/".periodo-btn"/".benchmark-banner"
   tambem existem em dashboard.html (nao tocada ainda), com valores quase
   iguais (so' ".periodo-rapido" tem um margin-bottom levemente diferente)
   -- o default abaixo e' so' desta pagina, a cascata de dashboard.html
   continua protegendo ela. ".table-mini" ja' e' reconhecida no grupo
   "sempre cards" do CSS global -- as regras abaixo so' complementam.
   Resto exclusivo desta pagina. */
.periodo-rapido { margin-bottom: 15px; }
.periodo-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.periodo-btn { padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 20px; background: #fff; color: var(--text-primary); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.periodo-btn:hover { background: var(--brand-glow); border-color: var(--brand-primary); }
.periodo-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.benchmark-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px 30px; border-radius: var(--radius-md); margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.benchmark-banner h4 { margin: 0; font-size: 1.1rem; }
.benchmark-banner .value { font-size: 2rem; font-weight: 700; }
.lojas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.loja-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); overflow: hidden; transition: transform 0.2s; }
.loja-card:hover { transform: translateY(-2px); }
.loja-card-header { padding: 20px; background: linear-gradient(135deg, var(--brand-primary) 0%, #2a4d2a 100%); color: #fff; }
.loja-card-header h4 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.loja-card-header .faturamento { font-size: 1.8rem; font-weight: 700; margin-top: 8px; }
.loja-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; background: #f8f9fa; border-bottom: 1px solid var(--border-color); }
.loja-kpi-item { text-align: center; }
.loja-kpi-item .label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 5px; }
.loja-kpi-item .value { font-size: 1.2rem; font-weight: 700; }
.loja-top-vendedor { padding: 20px; border-bottom: 1px solid var(--border-color); background: #fffbf0; }
.loja-top-vendedor .label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 5px; }
.loja-top-vendedor .vendedor-info { display: flex; justify-content: space-between; align-items: center; }
.loja-top-vendedor .nome { font-weight: 600; color: var(--brand-primary); }
.loja-top-vendedor .total { font-weight: 700; }
.comparison-indicator { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; margin-top: 8px; }
.comparison-indicator.above { background: #e8f5e9; color: #2e7d32; }
.comparison-indicator.below { background: #ffebee; color: #c62828; }
.vendedores-list { padding: 20px; }
.vendedores-list h6 { margin-bottom: 15px; font-weight: 600; }
.table-mini { width: 100%; font-size: 0.85rem; }
.table-mini th { font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary); padding: 8px 12px; background: #f8f9fa; border-bottom: 2px solid var(--border-color); }
.table-mini td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.table-mini tr:hover { background: #f8f9fa; }
.badge-rank-mini { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; background: #e9ecef; }
.badge-rank-mini.gold { background: #ffd700; color: #333; }
.badge-rank-mini.silver { background: #c0c0c0; color: #333; }
.badge-rank-mini.bronze { background: #cd7f32; color: #fff; }
@media (max-width: 992px) {
    .lojas-grid { grid-template-columns: 1fr; }
}


/* tela_principal.html - mensagem de boas-vindas, grupos de acao rapida e
   variante compacta da faixa de metricas. ".metrics-strip" ja' e' global
   (base, margin-bottom:24px) -- esta pagina queria so' um espacamento
   menor (8px); em vez de forcar isso pra TODO uso de ".metrics-strip"
   (montagens.html/vendas_caixa.html tambem usam, com seus proprios
   ajustes, nao tocadas), virou o modificador ".metrics-strip--compact"
   (mesmo padrao BEM que ".metric-card--alert" ja' usava nesta pagina).
   ".section-title" tambem aparece em templates/pdv/nota_montagem_impressao.html,
   mas essa e' uma pagina de impressao que nao carrega o CSS global --
   sem colisao real. Resto exclusivo desta pagina. */
.welcome-message { margin-bottom: 24px; }
.welcome-message h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.welcome-message p { color: var(--text-secondary); margin: 0; }

.metrics-strip--compact { margin-bottom: 8px; }
.metric-card--alert::before { background: var(--danger); }
.metric-card--alert .metric-card__icon { background: var(--danger-bg); color: var(--danger); }
.metric-card__link { display: inline-block; margin-top: 6px; font-size: 0.75rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; }
.metric-card__link:hover { text-decoration: underline; }

.section-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 32px 0 16px; }
.action-groups { display: flex; flex-direction: column; gap: 20px; }
.action-group__title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }

.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.quick-action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 20px 12px; background: #ffffff; border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); color: var(--text-primary); font-weight: 600; font-size: 0.85rem;
    text-align: center; transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
}
.quick-action-btn i { font-size: 1.5rem; color: var(--brand-primary); }
.quick-action-btn:hover { border-color: var(--brand-primary); background: var(--brand-glow); transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }


/* entregas.html - spinner geral, status da entrega, info do cliente/VN e
   galeria de fotos (antes em static/galeria.css). "@keyframes spin" ja'
   era identico ao global -- nao repeti. ".vn-number"/".cliente-info"
   tambem existem em montagens.html (nao tocada ainda) com valores
   diferentes -- o default abaixo e' so' desta pagina, a cascata dela
   continua protegendo montagens.html. ".spinner-circle" tambem existe em
   lancar_entrega.html com um valor diferente (maior) -- mesma logica,
   protegida. Resto exclusivo desta pagina. */
#spinnerGeral { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:99999; justify-content:center; align-items:center; }
.spinner-circle { width: 50px; height: 50px; border: 5px solid #ccc; border-top-color: var(--brand-primary); border-radius: 50%; animation: spin 1s linear infinite; }

.entrega-info-status { margin-top: 16px; padding: 16px; background: #f9f9f9; border-radius: var(--radius-md); border-left: 4px solid #ccc; }
.entrega-info-status.recusada { border-left-color: var(--danger); background: var(--danger-bg); }
.entrega-info-status.ausente { border-left-color: var(--warning); background: var(--warning-bg); }
.entrega-info-status.entregue { border-left-color: var(--success); background: var(--success-bg); }

.vn-number { font-size: 0.95rem; }
.cliente-info { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 4px; }

.gallery-body { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.img-container {
    display: inline-block; margin: 10px; border: 1px solid #ddd; border-radius: var(--radius-md);
    padding: 8px; background: #fff; vertical-align: top; text-align: center; width: 180px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s;
}
.img-container:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.img-container img { max-width: 150px; max-height: 150px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: transform 0.2s; }
.img-container img:hover { transform: scale(1.05); }
.gallery-caption { font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

@media (max-width: 768px) {
    .img-container { width: 140px; }
    .img-container img { max-width: 120px; max-height: 120px; }
}

/* entregas.html / baixa_entrega.html - overlay de tela cheia (zoom/pan) da
   galeria de fotos e video. Essas regras ficavam no <style> local de cada
   pagina e foram perdidas na limpeza do dia 20/10/2026 (so' .gallery-body/
   .img-container/.gallery-caption foram migradas, as regras de
   #fullscreen-* nao) -- corrigido em 21/10/2026. Mesmos valores que
   static/galeria.css (usado so' por montagens.html) ja' tinha; sem
   duplicacao de efeito visual porque sao os mesmos valores (galeria.css
   carrega depois e ganha por ordem, com o mesmo resultado). */
#fullscreen-overlay img { transition: transform 0.1s ease; cursor: grab; }
#fullscreen-overlay img:active { cursor: grabbing; }
#fullscreen-overlay video { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
#fullscreen-close-btn { background: rgba(0,0,0,0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
#fullscreen-close-btn:hover { background: rgba(0,0,0,0.8); transform: scale(1.1); }


/* lancar_montagem.html - inputs de percentual, tiras de info/avaria,
   pulso de atencao, atalhos de acao, selecao de nota e estilizacao do
   TomSelect (modo "vidro"). A trava de scroll (body/.app-layout/
   .main-area) e' a mesma de contabilidade_estoque.html -- reaproveitei a
   classe ".pagina-scroll-trancado" ja' criada la, no <body> desta pagina.
   ".w-100" ja' era identico (e ja' inefetivo por causa do !important
   global) -- nao repeti. ".fade-in"/".mini-muted"/".soft-card"/
   ".info-strip"/".pulse"/".contador-badge" tambem aparecem em
   sincronizar_entregas.html (".soft-card"/".info-strip" com valores
   diferentes) e em lancar_entrega.html/relatorio_comissao_montagem.html
   (".fade-in" com timing diferente) -- nenhuma tocada ainda, o default
   abaixo e' so' desta pagina, a cascata delas continua protegendo.
   ".ts-wrapper" (bare) de lancar_entrega.html na verdade e' sempre
   ".ts-wrapper.input-control" (seletor composto), nao colide com o bare
   usado aqui. A regra "@media(max-width:768px) .form-grid{grid-template-
   columns:1fr}" era morta (mesmo motivo documentado em
   baixa_montagem.html: o global ja' vira flex-column em 992px, antes de
   chegar em 768px) -- removida sem substituto. "#modal-impressao" e' um
   ID, exclusivo desta pagina. Resto exclusivo desta pagina. */
.perc-input { width: 70px !important; height: 38px !important; padding: 4px 8px !important; text-align: center; }
.fade-in { animation: fadeIn 0.25s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mini-muted { color: var(--text-secondary); font-size: 0.85rem; }

.soft-card { padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.info-strip { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border-left: 5px solid #3b82f6; background: #eff6ff; display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.info-strip strong { font-weight: 800; }
.avaria-strip { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border-left: 5px solid var(--danger); background: var(--danger-bg); display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.avaria-strip strong { font-weight: 800; color: #b91c1c; }

.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

.botoes-acao-rapida { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.contador-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: var(--danger); font-weight: bold; font-size: 0.75rem; margin-left: 5px; padding: 0 6px; }

.item-selecao-nota { cursor: pointer; transition: all 0.2s ease; margin-bottom: 8px; }
.item-selecao-nota:hover { background: #f1f5f9 !important; border-color: var(--brand-primary) !important; transform: translateY(-1px); }

.ts-wrapper { width: 100% !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; display: block !important; }
.ts-wrapper .ts-control { border: 1.5px solid var(--border-color) !important; border-radius: 8px !important; padding: 0 14px !important; min-height: 44px !important; height: 44px !important; font-size: 0.938rem !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 500 !important; background: #fff !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; box-shadow: none !important; color: var(--text-primary) !important; line-height: 44px !important; }
.ts-wrapper.focus .ts-control { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 4px var(--brand-glow) !important; }
.ts-wrapper .ts-control input { font-size: 0.938rem !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 500 !important; min-height: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; line-height: 44px !important; color: var(--text-primary) !important; }
.ts-wrapper .ts-control > * { vertical-align: middle !important; }
.ts-wrapper .ts-control .item { line-height: 24px !important; }
.ts-dropdown { border: 1.5px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: var(--shadow-hover) !important; margin-top: 4px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.ts-dropdown .option { padding: 10px 14px !important; font-size: 0.9rem !important; }
.ts-dropdown .option.active { background-color: var(--brand-glow) !important; color: var(--brand-primary) !important; }

.container-botoes-montagem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

@media (max-width: 576px) {
    .container-botoes-montagem { flex-direction: column !important; width: 100% !important; align-items: stretch !important; margin-top: 12px; }
    .container-botoes-montagem .btn { width: 100% !important; justify-content: center !important; }
    .produto-lancar-mobile-wrap { flex-direction: column; width: 100%; }
    .produto-lancar-mobile-wrap .perc-input { width: 100% !important; }
    .produto-lancar-mobile-wrap .btn { width: 100% !important; justify-content: center; }
    #modal-impressao .modal-container { height: 100vh !important; max-height: 100vh !important; margin: 0 !important; border-radius: 0 !important; }
}


/* montagens.html - tabela expansivel de montagens, badges de status e
   ajustes mobile proprios. A trava de scroll duplo e' a mesma de
   contabilidade_estoque.html -- reaproveitei ".pagina-scroll-trancado"
   (o "display:flex"/"flex:1" extra que esta pagina declarava em
   .app-layout/.main-area ja' sao os valores padrao globais dessas
   classes, redundante). Renomeei ".vn-number"->".vn-number-m",
   ".cliente-info"->".cliente-info-m" e ".empty-state"->".empty-state-m"
   porque os valores aqui diferem do default global (".vn-number"/
   ".cliente-info" vieram de entregas.html, que JA' NAO TEM mais <style>
   proprio pra proteger via cascata -- precisava renomear de verdade, nao
   so' documentar; ".empty-state" e' o default historico do sistema,
   mesma logica de dashboard_montagem.html->".empty-state-dash").
   Os dois blocos de @media desta pagina usam MUITAS classes genericas e
   compartilhadas (.table-wrapper, .table-montagens, .btn-container,
   .sidebar, .top-bar, .card, .modal-container, .modal-lg,
   .user-profile-pill) com valores proprios desta tela (ex: mantem a
   tabela com scroll horizontal no celular em vez de virar "cards", que e'
   o padrao do resto do sistema) -- em vez de arriscar mudar o
   comportamento mobile de QUALQUER outra pagina que usa essas mesmas
   classes, os dois blocos foram movidos pro global JA' ESCOPADOS dentro
   de "body.pagina-montagens", a classe nova que o <body> desta pagina
   ganhou. So' tem efeito aqui. */
.linha-montagem-conferida { background-color: rgba(236, 253, 245, 0.6) !important; }
.linha-montagem-conferida td { background-color: transparent !important; }
.btn-check-concluido { background-color: #10b981 !important; color: #fff !important; border: none !important; }
.btn-check-concluido:hover { background-color: #059669 !important; }

.badge-avaria { display: inline-block; background: var(--danger-bg); color: var(--danger); padding: 3px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 700; border: 1px solid var(--danger); }
.badge-nao-realizada { display: inline-block; background: var(--danger-bg); color: var(--danger); padding: 3px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 700; border: 1px solid var(--danger); }
.badge-recusada { display: inline-block; background: var(--danger-bg); color: var(--danger); padding: 3px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 700; border: 1px solid var(--danger); }
.badge-ausente { display: inline-block; background: var(--warning-bg); color: var(--warning); padding: 3px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 700; border: 1px solid var(--warning); }
.badge-retirado-loja { display: inline-block; background: #f3e8ff; color: #6b21a8; padding: 3px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 700; border: 1px solid #d8b4fe; }
.badge-conferida { display: inline-block; background: var(--success-bg); color: var(--success); padding: 3px 8px; border-radius: 12px; font-size: 11px; margin-left: 4px; font-weight: 700; border: 1px solid var(--success); }

.child-row { display: none; background: #f8fafc; }
.child-row.is-visible { display: table-row; }

.expand-icon { transition: transform 0.2s; margin-right: 8px; font-size: 0.8rem; color: var(--text-secondary); }
.parent-row.expanded .expand-icon { transform: rotate(90deg); color: var(--brand-primary); }

.parent-row { cursor: pointer; transition: background-color 0.2s; }
.parent-row:hover { background: #f1f5f9; }

.status-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.status-pendente { background: var(--warning-bg); color: #92400e; border-color: var(--warning); }
.status-concluida { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.status-com-avaria { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.status-nao-realizada { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.status-fora-prazo { background: #fee2e2; color: #991b1b; border-color: #ef4444; }

.vn-number-m { font-weight: 800; color: var(--brand-primary); font-size: 1.05rem; }
.cliente-info-m { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.table-montagens th { white-space: nowrap; }
.table-montagens td { vertical-align: middle; border-bottom: 1px solid var(--border-color); }

body.pagina-montagens .acoes-cell { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
body.pagina-montagens .acoes-cell .btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 6px; }

.dica-duplo-clique { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: #eff6ff; border-radius: 8px; color: #2563eb; font-size: 0.85rem; font-weight: 600; margin-bottom: 16px; border: 1px dashed #bfdbfe; }

.empty-state-m { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.empty-state-m i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 12px; }
.empty-state-m p { font-size: 0.95rem; font-weight: 500; }

@media (max-width: 768px) {
    body.pagina-montagens .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.pagina-montagens .table-montagens {
        min-width: 800px;
        width: 100%;
    }
    body.pagina-montagens .content-wrapper {
        padding: 12px;
    }
    body.pagina-montagens .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    body.pagina-montagens .input-group[style*="grid-column"] {
        grid-column: span 1 !important;
    }
    body.pagina-montagens .btn-container {
        flex-direction: column;
    }
    body.pagina-montagens .btn-container .btn {
        width: 100%;
        justify-content: center;
    }
    body.pagina-montagens .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 1050;
        transition: left 0.3s ease;
        width: 280px;
    }
    body.pagina-montagens .app-layout.mobile-open .sidebar {
        left: 0;
    }
    body.pagina-montagens .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }
    body.pagina-montagens .app-layout.mobile-open .sidebar-overlay {
        display: block;
    }
    body.pagina-montagens .top-bar {
        padding: 12px;
    }
    body.pagina-montagens .top-bar-left {
        gap: 8px;
    }
    body.pagina-montagens .page-title {
        font-size: 1.1rem;
    }
    body.pagina-montagens .dica-duplo-clique {
        font-size: 0.78rem;
        padding: 8px 12px;
    }
    body.pagina-montagens .metrics-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body.pagina-montagens .card {
        border-radius: 0;
        margin-left: -12px;
        margin-right: -12px;
    }
    body.pagina-montagens .card .table-wrapper {
        margin: 0;
    }
    body.pagina-montagens .cliente-info-m {
        font-size: 0.78rem;
    }
    body.pagina-montagens .badge-avaria,
    body.pagina-montagens .badge-nao-realizada,
    body.pagina-montagens .badge-recusada,
    body.pagina-montagens .badge-ausente,
    body.pagina-montagens .badge-retirado-loja,
    body.pagina-montagens .badge-conferida {
        font-size: 10px;
        padding: 2px 6px;
        margin-left: 2px;
    }
}

@media (max-width: 480px) {
    body.pagina-montagens .top-bar-right .d-none.d-md-inline {
        display: none;
    }
    body.pagina-montagens .user-profile-pill {
        padding: 6px 10px;
    }
    body.pagina-montagens .modal-container {
        width: 95%;
        margin: 10px;
    }
    body.pagina-montagens .modal-lg {
        max-height: 85vh;
    }
}


/* contabilidade_solicitacoes.html - abas, linhas coloridas por tipo de
   solicitacao, badges de forma de pagamento e grid de info. A trava de
   scroll e as utilidades bootstrap-like (.d-flex/.gap-2/.gap-3/
   .align-items-X/.justify-content-X/.flex-wrap/.ms-auto/.ms-1/.me-2/
   .me-3/.mb-2/.mb-3/.mt-2/.mt-3/.mt-4/.text-right/.text-center/
   .text-muted/.text-danger/.text-success/.w-100/.d-none/.d-md-X/.d-lg-X)
   eram todas identicas (ou ja' inefetivas por causa do !important
   global) -- so' removidas, nada novo. ".vazio-aba" tambem era identica
   ao default global -- so' removida. Renomeei ".status-badge"/
   ".status-pendente"/".status-concluido" -> "-ctb" porque os valores
   daqui diferem do que ja' e' global (veio de montagens.html, que
   TAMBEM NAO TEM MAIS <style> proprio -- precisava renomear de verdade).
   "@keyframes pulse" ja' era identico ao global (de lancar_montagem.html)
   -- nao repeti. ".indicador-online"/".contador-atualizacao" tambem
   existem em contabilidade_mostruario.html/coordenadora_mostruario.html
   (nao tocadas ainda, mesmo valor) -- seguro compartilhar. O bloco
   "@media(max-width:768px) .table thead{display:none}..." era a mesma
   versao antiga/superada da transformacao de tabela em cards que ja' foi
   removida de contabilidade_estoque.html -- removida sem substituto,
   mesma razao (o CSS global ja' cobre ".table" desde 14/10/2026). Resto
   exclusivo desta pagina. */
.abas-contabilidade {
    display: flex;
    gap: 4px;
    padding: 0 4px 0 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
    background: #f8fafc;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-wrap: wrap;
}
.aba-item {
    padding: 12px 20px;
    cursor: pointer;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px 8px 0 0;
}
.aba-item:hover { background: rgba(255,255,255,0.5); color: var(--text-primary); }
.aba-item.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); background: #ffffff; }
.aba-item .badge-aba {
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}
.aba-item .badge-aba.azul { background: #3b82f6; }
.aba-item .badge-aba.laranja { background: #f59e0b; }
.aba-item .badge-aba.cinza { background: #94a3b8; }
.aba-item .badge-aba.vermelho { background: #ef4444; }

.conteudo-aba { display: none; padding: 16px 0; }
.conteudo-aba.active { display: block; }

.linha-cliente-loja { background: #dbeafe !important; border-left: 4px solid #3b82f6 !important; }
.linha-cliente-loja:hover { background: #bfdbfe !important; }

.linha-entrega { background: #fef3c7 !important; border-left: 4px solid #f59e0b !important; }
.linha-entrega:hover { background: #fde68a !important; }

.linha-sem-solicitacao { background: #f8fafc !important; border-left: 4px solid #94a3b8 !important; }
.linha-sem-solicitacao:hover { background: #f1f5f9 !important; }

.linha-resolicitada { background: #fee2e2 !important; border-left: 4px solid #ef4444 !important; }
.linha-resolicitada:hover { background: #fecaca !important; }

.status-badge-ctb { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.status-pendente-ctb { background: var(--warning-bg); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-concluido-ctb { background: var(--success-bg); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.3); }

.acoes-contabilidade { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.btn-acao-tabela {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color);
    background: #ffffff; color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease; font-size: 1rem; flex-shrink: 0;
}
.btn-acao-tabela:hover { background: var(--brand-glow); border-color: var(--brand-primary); color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-acao-tabela.destaque { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); }
.btn-acao-tabela.destaque:hover { background: #10240f; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(27, 51, 26, 0.2); }
.btn-acao-tabela.roxo { color: #7c3aed; border-color: #d8b4fe; background: #faf5ff; }
.btn-acao-tabela.roxo:hover { background: #7c3aed; color: #ffffff; border-color: #7c3aed; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2); }
.btn-acao-tabela.laranja { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.btn-acao-tabela.laranja:hover { background: #d97706; color: #ffffff; border-color: #d97706; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2); }

.contador-solicitacoes { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }

.indicador-online { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; animation: pulse 2s infinite; }
.contador-atualizacao { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-weight: 500; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.info-item { background: #f8fafc; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 4px; transition: all 0.2s; }
.info-item:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); background: #ffffff; }
.info-label { font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); }
.info-value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); word-break: break-word; }

.btn-icon-sm {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-color);
    background: #ffffff; color: var(--brand-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.btn-icon-sm:hover { background: var(--brand-glow); border-color: var(--brand-primary); }
.btn-icon-sm.copiado { background: var(--success-bg) !important; border-color: var(--success) !important; color: var(--success) !important; }

.toast-alert { position: fixed; top: 20px; right: 20px; padding: 14px 20px; border-radius: var(--radius-lg); color: #fff; font-size: 0.85rem; font-weight: 500; z-index: 9999; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-hover); transition: all 0.3s ease; max-width: 400px; }
.toast-success { background: linear-gradient(135deg, var(--success) 0%, #146c43 100%); }
.toast-error { background: linear-gradient(135deg, var(--danger) 0%, #b02a37 100%); }

.col-fp { width: 130px; min-width: 130px; }

.fp-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }

.fp-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
    border-radius: 8px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    transition: all 0.2s ease; letter-spacing: 0.2px;
}

.fp-badge img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); }

.fp-badge-rede {
    background: #f97316;
    color: #ffffff; border: 1px solid #ea580c;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.fp-badge-blu {
    background: #1e40af;
    color: #ffffff; border: 1px solid #1e3a8a;
    box-shadow: 0 2px 4px rgba(30, 64, 175, 0.3);
}

.fp-badge-pix {
    background: #00b8a9;
    color: #ffffff; border: 1px solid #00897b;
    box-shadow: 0 2px 4px rgba(0, 184, 169, 0.3);
}

.fp-badge-dinheiro {
    background: #10b981;
    color: #ffffff; border: 1px solid #047857;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.fp-badge-outro {
    background: #94a3b8; color: #ffffff; border: 1px solid #64748b;
}

.fp-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

@media (max-width: 768px) {
    .col-fp { width: 100%; min-width: 100%; }
    .fp-badges { flex-wrap: wrap; gap: 6px; }
    .acoes-contabilidade { width: 100%; justify-content: flex-start; }
    .info-grid { grid-template-columns: 1fr; }
    .toast-alert { left: 20px; right: 20px; max-width: none; }
    .abas-contabilidade { flex-wrap: wrap; gap: 2px; }
    .aba-item { padding: 8px 12px; font-size: 0.75rem; flex: 1; justify-content: center; }
    .aba-item .badge-aba { font-size: 0.55rem; padding: 1px 6px; }
}


/* devices.html - grupos/cards de dispositivo, sugestoes de observacao do
   Vendas Caixa e abas de configuracoes. Todas as classes sao exclusivas
   desta pagina. */
/* Estilos específicos para dispositivos */
.device-group-card {
    margin-bottom: 24px;
}
.device-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    flex-wrap: wrap;
}
.device-group-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.device-group-header .badge {
    margin-left: 8px;
}
.select-group-checkbox {
    margin-right: 12px;
}
/* Cards mobile */
.device-cards-container {
    display: none;
}
.device-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
}
.device-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.device-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.device-card-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.device-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.device-card-value {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}
.device-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media (max-width: 768px) {
    .table-container {
        display: none;
    }
    .device-cards-container {
        display: block;
    }
}
/* Sugestões de Observação (Vendas Caixa) */
.sugestoes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.sugestao-coluna h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
}
.sugestao-list {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.sugestao-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
}
.sugestao-item:last-child {
    border-bottom: none;
}
.sugestao-texto {
    flex: 1;
    word-break: break-word;
}
.sugestao-acoes {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.sugestao-vazia {
    color: var(--text-secondary);
    font-style: italic;
    justify-content: center;
}
.sugestao-add-form {
    display: flex;
    gap: 8px;
}
.sugestao-add-form .input-control {
    flex: 1;
}
@media (max-width: 768px) {
    .sugestoes-grid {
        grid-template-columns: 1fr;
    }
}
/* 13/10/2026 (pedido do Junior, "cheio de funcoes tudo junto") --
   a tela (dispositivos + sugestoes de observacao + senhas de
   ativacao) virou abas, pra nao ficar tudo empilhado com rolagem
   enorme. So' organizacao visual -- nenhum formulario/ID mudou. */
.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--glass-border, #e2e8f0);
    margin-bottom: 20px;
    overflow-x: auto;
}
.settings-tab-btn {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-tab-btn:hover {
    color: var(--text-primary);
}
.settings-tab-btn.active {
    color: var(--brand-primary, #1b331a);
    border-bottom-color: var(--brand-primary, #1b331a);
}
.settings-tab-panel {
    display: none;
}
.settings-tab-panel.active {
    display: block;
}


/* ======= users.html (migrado 20/10/2026, fase 4 lote 5) =======
   '.acoes-cell'(+.btn+.btn i) e '.table-container{display:none}' no
   media de 768px eram IDENTICOS ao que ja' existe global (o primeiro
   desde um lote anterior desta limpeza; o segundo desde a migracao de
   devices.html) -- nao movidos, ja' cobertos. '.status-badge' desta
   pagina tinha valores diferentes dos outros 2 que ja' existem global
   (o default historico de montagens.html e o '-ctb' de
   contabilidade_solicitacoes.html) -- renomeado p/ '.status-badge-usr'
   (2 usos no HTML atualizados). */
.recno-badge { display: inline-flex; align-items: center; gap: 6px; background: #f0f4ff; color: var(--brand-primary); padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; border: 1px solid #d0d8e8; }
.recno-badge i { font-size: 0.7rem; color: #6b7280; }
.recno-badge .recno-number { font-family: 'Courier New', monospace; color: var(--brand-primary); font-size: 0.9rem; }

.col-recno { width: 100px; text-align: center; }

.status-badge-usr { padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.status-ativo { background: #d4edda; color: #155724; }
.status-inativo { background: #f8d7da; color: #721c24; }

.btn-toggle-user { padding: 4px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; height: 30px; display: inline-flex; align-items: center; gap: 4px; }
.btn-toggle-user.ativar { background: #28a745; color: white; }
.btn-toggle-user.desativar { background: #dc3545; color: white; }
.btn-toggle-user:hover { opacity: 0.9; transform: translateY(-1px); }

.filter-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.badge-funcao { padding: 4px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

.user-cards-container { display: none; }
.user-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 16px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-card); margin-bottom: 16px; }
.user-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.user-card-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-card-field { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.user-card-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.user-card-value { font-size: 0.85rem; color: var(--text-primary); font-weight: 500; text-align: right; }
.user-card-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); flex-wrap: wrap; justify-content: flex-end; }
.user-card-actions .btn { font-size: 0.75rem; height: 32px; padding: 0 10px; }

.limit-warning { background: #fffbeb; border: 1px solid #f59e0b; color: #92400e; padding: 12px 20px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }

@media (max-width: 768px) {
    .user-cards-container { display: block; }
    .filter-grid-3 { grid-template-columns: 1fr; }
}

/* ======= vendas_caixa.html (migrado 20/10/2026, fase 4 lote 6) =======
   Esta pagina tinha seu PROPRIO conjunto de valores (botoes, tabela,
   modais, badges, alerts, top-bar etc.) um pouco diferente do padrao
   global atual (geralmente mais compacto -- ex: .btn com 36px de altura
   em vez de 38px, .table td com padding 10px em vez de 16px) -- parece
   ser a versao mais antiga/original dessas classes (o doc
   "consolidacao_css_piloto_vendas_caixa_2026-10-15.md" sugere que esta
   pagina foi o PILOTO do redesign, antes de refinamentos posteriores
   adotados no resto do sistema). Pra NAO mudar a aparencia desta tela
   (medo de regressao visual numa tela critica -- caixa/PDV), todas as
   classes genericas/compartilhadas que tinham valor DIFERENTE do global
   (ou so' existiam aqui num breakpoint que o global ainda nao tem pra
   essa classe) foram movidas pro global JA' ESCOPADAS dentro de
   "body.pagina-vendas-caixa" (classe nova no <body> desta pagina) --
   comportamento 100% preservado, sem efeito em nenhuma outra tela.
   Classes que ja' eram identicas ou ja' estavam sem efeito (o global
   usa !important) foram so' descartadas. Classes exclusivas desta pagina
   (sem nome repetido em nenhum outro lugar do sistema) foram movidas
   sem escopo, normalmente. */
.metric-card__actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
.btn-sm i {
            font-size: 0.8rem;
        }
.acao-icon {
            width: 30px;
            height: 30px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            background: var(--bg-surface);
            color: var(--text-secondary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
        }
.acao-icon:hover {
            background: var(--bg-app);
            border-color: var(--brand-primary);
            color: var(--brand-primary);
        }
.status-indicator--info {
            background: #dbeafe;
            color: #1e40af;
        }
.input-group .input-control, .input-group input, .input-group select, .input-group textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.85rem;
            background: var(--bg-surface);
            color: var(--text-primary);
        }
.input-group .input-control:focus, .input-group input:focus, .input-group select:focus, .input-group textarea:focus {
            outline: none;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 2px var(--brand-glow);
        }
.upload-section-card:last-child {
            margin-bottom: 0;
        }
.upload-section-body p {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
.checkbox-label input {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
.obs-checklist {
            display: flex;
            flex-direction: column;
            max-height: 220px;
            overflow-y: auto;
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: var(--radius-sm, 6px);
            padding: 4px 10px;
            margin-top: 4px;
        }
.obs-checklist-item {
            margin: 6px 0 !important;
        }
.obs-checklist:empty::after {
            content: "Nenhuma observação cadastrada em Configurações.";
            font-size: 0.78rem;
            color: var(--text-secondary);
            padding: 6px 0;
        }
.btn-loading {
            position: relative;
            pointer-events: none;
            opacity: 0.7;
        }
.btn-loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            width: 16px;
            height: 16px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
.modal-container.modal-xl { max-width: 900px; }
.modal-container.modal-lg { max-width: 700px; }
.modal-container.modal-md { max-width: 550px; }
.modal-container.modal-sm { max-width: 450px; }
.table .text-right {
            text-align: right;
        }
.linha-enviada td {
            background-color: #f0fdf4 !important;
        }
.text-secondary { color: var(--text-secondary); }
.avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--brand-primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
.anexo-existente { margin-bottom: 10px; }
.anexo-existente .file-item { background: var(--success-bg); border: 1px solid var(--success); }
.search-bar-vendas {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }
.search-bar-vendas .input-group {
            flex: 1;
            min-width: 200px;
        }
.search-bar-vendas .input-group .input-control {
            height: 38px;
        }
.highlight-row {
            background-color: #fef3c7 !important;
            animation: highlightPulse 1.5s ease-in-out;
        }
.titulo-busca {
            display: none;
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }
.titulo-busca.ativo {
            display: inline;
        }
.cliente-empresa-badge {
            font-size: 0.6rem;
            background: var(--brand-glow);
            color: var(--brand-primary);
            padding: 2px 8px;
            border-radius: var(--radius-pill);
            font-weight: 600;
            display: inline-block;
            margin-left: 6px;
        }
.required-field {
            color: var(--danger);
            font-weight: 700;
        }
.radio-option-selected {
            border-color: var(--brand-primary) !important;
            background: var(--brand-glow) !important;
        }
.radio-option-selected input[type="radio"] {
            accent-color: var(--brand-primary);
        }
@media (max-width: 768px) {
    .search-bar-vendas .input-group { min-width: 100%; }
}

/* --- classes/valores exclusivos desta pagina, escopados em body.pagina-vendas-caixa p/ nao afetar outras telas --- */
body.pagina-vendas-caixa .metrics-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
body.pagina-vendas-caixa .metric-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            padding: 16px 20px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-card);
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
            overflow: hidden;
            min-height: 90px;
        }
body.pagina-vendas-caixa .metric-card__icon {
            width: 46px;
            height: 46px;
            background: var(--brand-glow);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--brand-primary);
            font-size: 1.2rem;
            flex-shrink: 0;
        }
body.pagina-vendas-caixa .metric-card__label {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
body.pagina-vendas-caixa .metric-card__value {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -0.3px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
body.pagina-vendas-caixa .metric-card__toggle {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            font-size: 0.9rem;
        }
body.pagina-vendas-caixa .btn {
            height: 36px;
            padding: 0 16px;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: var(--radius-md);
            cursor: pointer;
            border: none;
        }
body.pagina-vendas-caixa .btn i {
            font-size: 0.85rem;
        }
body.pagina-vendas-caixa .btn-sm {
            height: 30px;
            padding: 0 10px;
            font-size: 0.75rem;
        }
body.pagina-vendas-caixa .btn-primary {
            background: var(--brand-primary);
            color: white;
        }
body.pagina-vendas-caixa .btn-primary:hover {
            background: var(--brand-primary-dark);
            color: white;
        }
body.pagina-vendas-caixa .btn-outline {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }
body.pagina-vendas-caixa .btn-text {
            background: transparent;
            border: none;
            color: var(--text-secondary);
        }
body.pagina-vendas-caixa .btn-text:hover {
            color: var(--brand-primary);
        }
body.pagina-vendas-caixa .btn-danger:hover {
            background: var(--danger-dark);
            color: white;
        }
body.pagina-vendas-caixa .acoes-cell {
            display: flex;
            gap: 6px;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
body.pagina-vendas-caixa .acoes-cell .btn {
            font-size: 0.7rem;
            height: 28px;
            padding: 0 8px;
        }
body.pagina-vendas-caixa .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: var(--radius-pill);
            font-size: 0.65rem;
            font-weight: 600;
            white-space: nowrap;
        }
body.pagina-vendas-caixa .cliente-info-panel {
            background: var(--bg-app);
            border-radius: var(--radius-lg);
            padding: 16px;
            margin-top: 16px;
            border: 1px solid var(--border-color);
            display: none;
        }
body.pagina-vendas-caixa .form-row-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
body.pagina-vendas-caixa .form-row-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
body.pagina-vendas-caixa .form-row-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
body.pagina-vendas-caixa .input-group label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
body.pagina-vendas-caixa .input-group small {
            font-size: 0.65rem;
            color: var(--text-secondary);
            margin-top: 2px;
        }
body.pagina-vendas-caixa .endereco-section {
            background: var(--bg-app);
            border-radius: var(--radius-md);
            padding: 16px;
            border: 1px solid var(--border-color);
        }
body.pagina-vendas-caixa .cliente-list {
            max-height: 380px;
            overflow-y: auto;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            background: var(--bg-surface);
        }
body.pagina-vendas-caixa .cliente-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid #f1f5f9;
            gap: 12px;
            flex-wrap: wrap;
        }
body.pagina-vendas-caixa .cliente-list-item:hover {
            background: var(--bg-app);
        }
body.pagina-vendas-caixa .cliente-list-item__info {
            flex: 1;
            min-width: 160px;
        }
body.pagina-vendas-caixa .cliente-list-item__name {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 0.85rem;
            margin-bottom: 3px;
        }
body.pagina-vendas-caixa .cliente-list-item__docs {
            font-size: 0.7rem;
            color: var(--text-secondary);
            margin-top: 3px;
        }
body.pagina-vendas-caixa .upload-section-card {
            background: var(--bg-app);
            border-radius: var(--radius-lg);
            padding: 16px 20px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color);
        }
body.pagina-vendas-caixa .upload-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
body.pagina-vendas-caixa .upload-section-number {
            width: 28px;
            height: 28px;
            background: var(--brand-primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.8rem;
        }
body.pagina-vendas-caixa .upload-section-title {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-primary);
            flex: 1;
        }
body.pagina-vendas-caixa .btn-upload {
            width: 100%;
            padding: 10px;
            border: 2px dashed var(--border-color);
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.8rem;
        }
body.pagina-vendas-caixa .file-list {
            margin-top: 10px;
            list-style: none;
        }
body.pagina-vendas-caixa .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            background: var(--bg-surface);
            border-radius: var(--radius-sm);
            margin-bottom: 5px;
            font-size: 0.75rem;
        }
body.pagina-vendas-caixa .file-item span {
            display: flex;
            align-items: center;
            gap: 6px;
        }
body.pagina-vendas-caixa .file-remove {
            background: none;
            border: none;
            color: var(--danger);
            cursor: pointer;
            padding: 3px;
        }
body.pagina-vendas-caixa .checkbox-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 10px;
            font-size: 0.8rem;
        }
body.pagina-vendas-caixa .toast-alert {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            min-width: 260px;
            max-width: 400px;
            padding: 12px 18px;
            border-radius: var(--radius-lg);
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: toastIn 0.3s ease-out;
            box-shadow: var(--shadow-hover);
            font-weight: 500;
            font-size: 0.85rem;
        }
body.pagina-vendas-caixa .toast-success {
            background: var(--success);
        }
body.pagina-vendas-caixa .toast-error {
            background: var(--danger);
        }
body.pagina-vendas-caixa .empty-state h3 {
            font-size: 1.1rem;
            color: var(--text-primary);
            font-weight: 700;
            margin-bottom: 8px;
        }
body.pagina-vendas-caixa .in-page-notification {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1500;
            max-width: 380px;
            box-shadow: var(--shadow-hover);
            background: #eff6ff;
            border-left: 4px solid #3b82f6;
            padding: 14px 20px;
            border-radius: var(--radius-lg);
        }
body.pagina-vendas-caixa .card-header-clean {
            padding: 14px 20px;
            margin-bottom: 0;
            border-bottom: 1px solid var(--border-color);
            background: #fafbfc;
            display: flex;
            align-items: center;
            gap: 8px;
        }
body.pagina-vendas-caixa .card-header-clean i {
            color: var(--brand-primary);
            font-size: 1rem;
        }
body.pagina-vendas-caixa .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            align-items: flex-start;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }
body.pagina-vendas-caixa .modal-container {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            width: 100%;
            margin: auto;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-hover);
        }
body.pagina-vendas-caixa .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-app);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            flex-shrink: 0;
        }
body.pagina-vendas-caixa .modal-title {
            font-size: 1.1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
            margin: 0;
        }
body.pagina-vendas-caixa .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }
body.pagina-vendas-caixa .modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 14px 20px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-app);
            border-radius: 0 0 var(--radius-xl) var(--radius-xl);
            flex-shrink: 0;
        }
body.pagina-vendas-caixa .details-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px 16px;
            font-size: 0.85rem;
        }
body.pagina-vendas-caixa .details-grid dt {
            font-weight: 700;
            color: var(--text-secondary);
        }
body.pagina-vendas-caixa .details-grid dd {
            color: var(--text-primary);
        }
body.pagina-vendas-caixa .section-header {
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-primary);
        }
body.pagina-vendas-caixa .table-wrapper {
            overflow-x: auto;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
        }
body.pagina-vendas-caixa .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
body.pagina-vendas-caixa .table th {
            text-align: left;
            padding: 10px 12px;
            background: var(--bg-app);
            font-weight: 700;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-color);
            white-space: nowrap;
        }
body.pagina-vendas-caixa .table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
            vertical-align: middle;
        }
body.pagina-vendas-caixa .table td[data-label="Cliente"] {
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
body.pagina-vendas-caixa .linha-enviada {
            background-color: #f0fdf4 !important;
        }
body.pagina-vendas-caixa .badge-mini {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: var(--radius-pill);
            font-size: 0.65rem;
            font-weight: 600;
        }
body.pagina-vendas-caixa .badge-red { background: var(--danger-bg); color: var(--danger); }
body.pagina-vendas-caixa .badge-green { background: var(--success-bg); color: var(--success); }
body.pagina-vendas-caixa .badge-gray { background: #f1f5f9; color: #64748b; }
body.pagina-vendas-caixa .alert {
            padding: 10px 14px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.8rem;
        }
body.pagina-vendas-caixa .alert-info { background: #eff6ff; border-left: 3px solid #3b82f6; color: #1e40af; }
body.pagina-vendas-caixa .alert-warning { background: #fef3c7; border-left: 3px solid #f59e0b; color: #92400e; }
body.pagina-vendas-caixa .alert-danger { background: #fee2e2; border-left: 3px solid #dc2626; color: #991b1b; }
body.pagina-vendas-caixa .alert-success { background: #d1fae5; border-left: 3px solid #10b981; color: #065f46; }
body.pagina-vendas-caixa .btn-container {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 16px;
        }
body.pagina-vendas-caixa .py-4 { padding-top: 16px; padding-bottom: 16px; }
body.pagina-vendas-caixa .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            background: var(--bg-surface);
            border-bottom: 1px solid var(--border-color);
        }
body.pagina-vendas-caixa .top-bar-left, body.pagina-vendas-caixa .top-bar-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
body.pagina-vendas-caixa .page-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0;
            white-space: nowrap;
        }
body.pagina-vendas-caixa .btn-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
        }
body.pagina-vendas-caixa .btn-icon:hover {
            background: var(--bg-app);
            color: var(--brand-primary);
        }
body.pagina-vendas-caixa .user-profile-pill { cursor: pointer; }
body.pagina-vendas-caixa .char-counter {
            font-size: 0.65rem;
            color: var(--text-secondary);
            text-align: right;
            margin-top: 3px;
        }
@media (max-width: 992px) {
    body.pagina-vendas-caixa .form-row-2, body.pagina-vendas-caixa .form-row-3, body.pagina-vendas-caixa .form-row-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    body.pagina-vendas-caixa .metric-card__value { font-size: 1.1rem; }
    body.pagina-vendas-caixa .metrics-strip { grid-template-columns: repeat(2, 1fr); }
    body.pagina-vendas-caixa .page-title { font-size: 0.9rem; white-space: normal; }
}
@media (max-width: 768px) {
    body.pagina-vendas-caixa .form-row-2, body.pagina-vendas-caixa .form-row-3, body.pagina-vendas-caixa .form-row-4 { grid-template-columns: 1fr; gap: 10px; }
    body.pagina-vendas-caixa .modal-body { padding: 12px; }
    body.pagina-vendas-caixa .upload-section-card { padding: 12px; }
    body.pagina-vendas-caixa .metrics-strip { grid-template-columns: 1fr; }
    body.pagina-vendas-caixa .cliente-list-item { flex-direction: column; align-items: flex-start; }
    body.pagina-vendas-caixa .cliente-list-item__actions { width: 100%; justify-content: flex-end; }
    body.pagina-vendas-caixa .cliente-search-bar { flex-direction: column; }
    body.pagina-vendas-caixa .modal-overlay { padding: 10px; }
    body.pagina-vendas-caixa .toast-alert { left: 10px; right: 10px; max-width: none; }
    body.pagina-vendas-caixa .table td { font-size: 0.75rem; padding: 8px 10px; }
    body.pagina-vendas-caixa .table th { padding: 8px 10px; font-size: 0.7rem; }
    body.pagina-vendas-caixa .top-bar { flex-wrap: wrap; }
    body.pagina-vendas-caixa .page-title { white-space: normal; font-size: 0.85rem; }
}

@keyframes toastIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
@keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
@keyframes highlightPulse {
            0% { background-color: #fef3c7; }
            50% { background-color: #fde68a; }
            100% { background-color: #fef3c7; }
        }
/* ======= lancar_entrega.html (migrado 20/10/2026, fase 4 lote 7) =======
   '*' local (reset margin/padding/box-sizing) era subconjunto identico
   do reset global (que so' tem 1 propriedade extra, font-family, que
   esta pagina nao definia) -- descartado, zero mudanca. ':root' local
   so' define variaveis NOVAS (--md-sys-color-*, usadas num card de resumo
   mais abaixo na pagina) que nao existem no :root global -- movidas como
   um segundo bloco ':root' (CSS aceita varios, o navegador funde) em vez
   de tentar "escopar" :root (nao faz sentido, :root e' sempre o <html>,
   nunca descendente de .pagina-lancar-entrega). '.alert'+variantes,
   '.modal-header', '.spinner-circle' e '.fade-in' tinham valores
   DIFERENTES do global (ex: '.alert' aqui e' um toast fixed no canto,
   nao a faixa inline que .alert e' no resto do sistema) -- escopados em
   "body.pagina-lancar-entrega" pra nao mudar aparencia nem afetar outras
   telas. */
:root { --md-sys-color-primary: var(--brand-primary); --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e0f2e0; --md-sys-color-on-primary-container: #002200; --md-sys-color-surface: #f8faf8; --md-sys-color-on-surface: #1a1c1a; --md-sys-color-surface-variant: #e0e6e0; --md-sys-color-outline: #747b74; }
#spinner-overlay {
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(255,255,255,0.9); 
            z-index: 100000; 
            justify-content: center; 
            align-items: center;
            backdrop-filter: blur(3px);
        }
.m3-card-delivery {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 16px;
            margin-bottom: 12px;
            border-left: 5px solid var(--brand-primary);
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.2s;
            gap: 10px;
            flex-wrap: wrap;
        }
.m3-card-delivery:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
.alert-error { background-color: #ba1a1a; }
.obs-venda-lista {
            margin-top: 8px; 
            padding-top: 8px; 
            border-top: 1px dashed #ddd;
            color: #666; 
            font-size: 0.85em; 
            font-style: italic;
        }
.quick-stats {
            display: flex; 
            gap: 15px; 
            margin: 20px 0; 
            flex-wrap: wrap;
        }
.stat-card {
            background: white; 
            padding: 15px 20px; 
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
            flex: 1; 
            min-width: 120px;
            transition: transform 0.2s;
        }
.stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
.stat-value { 
            font-size: 2rem; 
            font-weight: bold; 
            color: var(--brand-primary); 
            line-height: 1.2;
        }
.stat-label { 
            font-size: 0.75rem; 
            color: #666; 
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.modal-content-full {
            width: 95%; 
            max-width: 1400px; 
            height: 90vh; 
            background: #f5f5f5;
            border-radius: 24px; 
            display: flex; 
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
.modal-body-flex { 
            flex: 1; 
            overflow: hidden; 
            display: flex;
            flex-direction: row;
        }
.modal-panel-left { 
            width: 35%; 
            background: white; 
            overflow-y: auto; 
            padding: 20px;
            border-right: 1px solid #e0e0e0;
        }
.modal-panel-right {
            width: 65%;
            height: 100%;
            padding: 20px;
            background: #f5f5f5;
            overflow: hidden;
        }
.modal-panel-right > div:first-child {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            background: white;
            border-radius: 12px;
            overflow: hidden;
        }
.modal-panel-right > div:last-child {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
.iframe-container {
            background: white;
            transition: all 0.2s ease;
        }
.modal-panel-right > div {
            gap: 0 !important; 
        }
.search-box-highlight {
            transition: all 0.3s;
        }
.search-box-ready {
            border-color: #ff9800 !important;
            border-width: 3px !important;
            background-color: #fff3e0 !important;
            box-shadow: 0 0 0 3px rgba(255,152,0,0.2);
        }
.btn-icon-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: #555;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
.btn-icon-circle:hover {
            background: rgba(0,0,0,0.05);
            color: var(--brand-primary);
        }
.btn-icon-circle.danger:hover {
            background: #ffebee;
            color: #ba1a1a;
        }
.delivery-item {
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
.delivery-item:hover {
            background: #f0f7f0;
        }
.delivery-item.selected {
            background: #e0f2e0;
            border-left-color: #ff9800;
            border-left-width: 8px;
        }
.delivery-item.selected-editing {
            background: #fff3e0;
            border-left-color: #ff9800;
            border-left-width: 8px;
            animation: pulse-orange 1.5s infinite;
        }
.badge {
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: bold;
            text-transform: uppercase;
        }
.badge-success {
            background: #e8f5e9;
            color: #2e7d32;
        }
.badge-warning {
            background: #fff3e0;
            color: #e65100;
        }
/* 20/10/2026 (pedido do Junior, item 8 -- tela de NF pendente da
   contabilidade em Configuracoes): faltava uma variante "perigo" pra
   badge-mini, so existia a com prefixo body.pagina-vendas-caixa
   (.badge-red), que nao se aplica fora daquela pagina. */
.badge-danger {
            background: var(--danger-bg);
            color: var(--danger);
        }
/* 22/10/2026 (vistoria por conta propria do cliente): estado
   AGUARDANDO_REVISAO usa essa cor pra nao confundir com warning
   (pendente) nem info (em andamento, que alias nao tem CSS definido
   -- bug cosmetico pre-existente e separado, nao mexi nele). */
.badge-purple {
            background: #ede7f6;
            color: #5e35b1;
        }
.app-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
.main-content {
            flex: 1;
            overflow-y: auto;
            background: #f5f5f5;
        }
.page-content {
            padding: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }
.m3-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
.centered-form {
            max-width: 500px;
            margin: 10px auto;
        }
#driver-selection-view .card.centered-form {
            padding: 16px 24px;
        }
#driver-selection-view .input-group {
            margin-top: 10px !important;
        }
.m3-input-wrapper {
            position: relative;
            margin-bottom: 8px;
        }
.m3-input {
            width: 100%;
            padding: 16px 12px 8px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            background: white;
            transition: all 0.2s;
        }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.switch input:checked + .slider { background-color: var(--brand-primary); }
.switch input:checked + .slider:before { transform: translateX(20px); }
.m3-input:focus {
            outline: none;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(27,51,26,0.1);
        }
.m3-label {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
            transition: all 0.2s;
            pointer-events: none;
            background: white;
            padding: 0 4px;
        }
.m3-input:focus + .m3-label, .m3-input:not(:placeholder-shown) + .m3-label {
            top: 0;
            font-size: 0.75rem;
            color: var(--brand-primary);
        }
.m3-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }
.m3-btn-primary {
            background: var(--brand-primary);
            color: white;
        }
.m3-btn-primary:hover {
            background: #2a4a28;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(27,51,26,0.3);
        }
.m3-btn-tonal {
            background: #e0f2e0;
            color: var(--brand-primary);
        }
.m3-btn-sm {
            padding: 8px 16px;
            font-size: 0.9rem;
        }
#ferramentas-edicao {
            flex-shrink: 0;
            z-index: 10;
        }
.observacoes-rapidas {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid var(--brand-primary);
        }
.aguardando-entrega {
            background: #e8f5e9;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 15px;
            color: #1b5e20;
            border-left: 4px solid #2e7d32;
        }
#modal-baixa-data {
            display: none; 
            position: fixed; 
            top:0; 
            left:0; 
            width:100%; 
            height:100%; 
            background:rgba(0,0,0,0.6); 
            z-index:13000; 
            justify-content:center; 
            align-items:center;
        }
.ts-wrapper.input-control {
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }
.ts-control input {
            font-size: 1rem !important;
        }
.m3-sidebar {
            width: 260px;
            transition: transform 0.3s ease;
        }
.cliente-nome {
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
            word-break: keep-all;
            overflow-wrap: break-word;
            white-space: normal;
            line-height: 1.3;
            display: inline-block;
            max-width: 100%;
        }
.cliente-nome br {
            display: none;
        }
.banner-vn {
            background: #1976d2;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
.ts-control {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 10px 12px;
            min-height: 48px;
            font-size: 1rem;
        }
.ts-control.focus {
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(27,51,26,0.1);
        }
@media (max-width: 768px) {
    .m3-card-delivery {
                flex-direction: column;
                align-items: stretch;
            }
    .m3-card-delivery > div:first-child {
                width: 100%;
            }
    .m3-card-delivery > div:last-child {
                margin-left: 0;
                justify-content: flex-end;
                border-top: 1px solid #eee;
                padding-top: 12px;
                margin-top: 8px;
            }
    .badge {
                font-size: 0.65rem;
                padding: 2px 6px;
            }
    .modal-body-flex {
                flex-direction: column;
            }
    .modal-panel-left, .modal-panel-right {
                width: 100%;
            }
    .modal-panel-left {
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
                max-height: 40%;
            }
    .modal-panel-right {
                max-height: 60%;
            }
    .page-content {
                padding: 16px;
            }
    .m3-sidebar {
                position: fixed;
                left: -260px;
                top: 0;
                bottom: 0;
                z-index: 1000;
                background: white;
                box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            }
    .m3-sidebar.collapsed {
                transform: translateX(260px);
            }
}
@media (max-width: 480px) {
    .m3-card-delivery {
                padding: 12px;
            }
    .m3-card-delivery > div:first-child > div[style*="display: flex; gap: 15px"] {
                flex-direction: column;
                gap: 5px;
            }
    .m3-card {
                padding: 16px;
            }
}

/* --- classes/valores exclusivos desta pagina, escopados em body.pagina-lancar-entrega --- */
body.pagina-lancar-entrega .spinner-circle {
            width: 60px; 
            height: 60px; 
            border: 6px solid #e0e0e0;
            border-top-color: var(--brand-primary); 
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
body.pagina-lancar-entrega .alert {
            position: fixed; 
            top: 20px; 
            right: 20px; 
            padding: 12px 24px;
            border-radius: 8px; 
            color: white; 
            z-index: 10000; 
            display: flex; 
            align-items: center; 
            gap: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideIn-le 0.3s;
            max-width: 90%;
            word-break: break-word;
        }
body.pagina-lancar-entrega .alert-success { background-color: #2e7d32; }
body.pagina-lancar-entrega .alert-warning { background-color: #ed6c02; }
body.pagina-lancar-entrega .alert-info { background-color: #0288d1; }
body.pagina-lancar-entrega .modal-header { 
            padding: 20px 24px; 
            background: white; 
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
            flex-wrap: wrap;
            gap: 10px;
        }
body.pagina-lancar-entrega .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

@keyframes slideIn-le {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
@keyframes pulse-orange {
            0% { box-shadow: 0 0 0 0 rgba(255,152,0,0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255,152,0,0); }
            100% { box-shadow: 0 0 0 0 rgba(255,152,0,0); }
        }
@keyframes slideDown-le {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
/* ======= login.html (migrado 20/10/2026, fase 4 lote 8) =======
   Tela de login tem layout proprio (cartao centralizado em fundo
   escuro), nao usa .app-layout/.sidebar do resto do sistema -- quase
   tudo exclusivo, movido sem escopo. Unica colisao real: o proprio
   seletor "body" (aqui e tela cheia centralizada em verde escuro,
   no resto do sistema e o fundo claro padrao do app) -- em vez de
   "body.pagina-login body" (nao faz sentido, body nao pode ser
   descendente de si mesmo), a classe nova foi direto no proprio
   seletor: "body.pagina-login { ... }". */
.main-wrapper {
            width: 100%;
            max-width: 400px;
        }
.prompt-card {
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        }
.prompt-card .logo {
            max-height: 45px;
            margin-bottom: 20px;
        }
#login-form-card {
            width: 100%;
            padding: 24px;
            background-color: rgba(255, 255, 255, 0.97);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
        }
.user-selector-container {
            position: relative;
            margin-bottom: 16px;
        }
.user-input-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
        }
.user-input-wrapper .m3-select-group {
            flex: 1;
            margin-bottom: 0;
        }
.btn-change-user {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #f0f0f0;
            border: 1px solid #e0e0e0;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            flex-shrink: 0;
        }
.btn-change-user:hover {
            background: #1b331a;
            color: white;
            border-color: #1b331a;
        }
.btn-change-user i {
            font-size: 1.2em;
        }
.m3-select-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            font-size: 16px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
.m3-select-input:focus {
            outline: none;
            border-color: #1b331a;
            box-shadow: 0 0 0 3px rgba(27, 51, 26, 0.1);
        }
.m3-select-input.locked {
            background-color: #f9f9f9;
            color: #333;
            cursor: pointer;
        }
.user-dropdown-container {
            position: relative;
        }
.user-search-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            font-size: 16px;
            background-color: white;
            transition: all 0.3s;
            cursor: pointer;
        }
.user-search-input:focus {
            outline: none;
            border-color: #1b331a;
            box-shadow: 0 0 0 3px rgba(27, 51, 26, 0.1);
        }
.user-search-input.locked {
            background-color: #f9f9f9;
            color: #333;
            cursor: pointer;
        }
.user-options-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 250px;
            overflow-y: auto;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            margin-top: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 1000;
            display: none;
        }
.user-options-list.show {
            display: block;
        }
.user-option {
            padding: 12px 16px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f0f0f0;
        }
.user-option:last-child {
            border-bottom: none;
        }
.user-option:hover {
            background: #f5f5f5;
        }
.user-option.selected {
            background: #1b331a;
            color: white;
        }
.no-results {
            padding: 12px 16px;
            color: #999;
            text-align: center;
            font-style: italic;
        }
.update-banner {
            display: none;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: linear-gradient(135deg, #1b331a 0%, #2e4d2d 100%);
            color: white;
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            width: 100%;
            animation: slideDown-login 0.5s ease;
        }
.update-banner span {
            flex-grow: 1;
            font-size: 0.9em;
            margin-right: 10px;
            font-weight: 500;
        }
.update-banner button {
            background: white;
            color: #1b331a;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            white-space: nowrap;
            margin-left: 8px;
        }
.update-banner button.btn-close-update {
            background: transparent;
            color: white;
            border: 1px solid white;
        }
.pwa-install-banner {
            display: none;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            width: 100%;
            animation: slideDown-login 0.5s ease;
            position: relative;
            overflow: hidden;
        }
.pwa-install-banner span {
            flex-grow: 1;
            font-size: 0.9em;
            margin-right: 10px;
            font-weight: 500;
            z-index: 1;
        }
.pwa-install-banner .btn { min-width: auto; z-index: 1; border: none; cursor: pointer; }
.pwa-install-banner .btn-text {
            color: white;
            background: rgba(255,255,255,0.2);
            border-radius: 8px;
            padding: 8px 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
.pwa-install-banner .btn-text:hover { background: rgba(255,255,255,0.3); }
.pwa-install-banner .btn-icon {
            width: 36px; height: 36px;
            color: white;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            transition: all 0.3s;
            display: flex; align-items: center; justify-content: center;
        }
.pwa-install-banner .btn-icon:hover { background: rgba(255,255,255,0.3); }
.install-badge {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            z-index: 9999;
            animation: bounce 2s infinite;
            transition: all 0.3s;
        }
.btn-biometria {
            width: 100%;
            margin-top: 12px;
            background: linear-gradient(135deg, #2e4d2d 0%, #1b331a 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
        }
.btn-biometria:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
.toast-notification {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.9);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 10002;
            animation: slideUp-login 0.3s ease;
            max-width: 90%;
            text-align: center;
            pointer-events: none;
        }
.toast-notification.success { background: #4caf50; }
.toast-notification.error { background: #f44336; }
.toast-notification.warning { background: #ff9800; }
.biometria-modal {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex; align-items: center; justify-content: center;
            z-index: 20000;
            animation: fadeIn 0.3s ease;
            backdrop-filter: blur(4px);
        }
.biometria-modal-content {
            background: #ffffff;
            border-radius: 24px;
            padding: 32px 24px;
            max-width: 320px;
            width: 90%;
            text-align: center;
            animation: slideUp-login 0.4s ease;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            color: #333;
        }
.fingerprint-animation {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px auto;
            background: #f0fdf4;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.biometria-icon {
            font-size: 36px;
            color: #1b331a;
        }
.biometria-modal-content h2 {
            margin-bottom: 12px;
            font-size: 1.4em;
            color: #1b331a;
            font-weight: 700;
        }
.biometria-modal-content p {
            margin-bottom: 24px;
            font-size: 0.95em;
            color: #666;
            line-height: 1.5;
        }
.biometria-modal-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
.biometria-modal-buttons button {
            padding: 14px;
            border: none;
            border-radius: 12px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            width: 100%;
        }
.btn-cadastrar { background: #1b331a; color: white; }
.btn-cadastrar:hover { background: #2e4d2d; }
.btn-depois { background: transparent; color: #666; border: 1px solid #e0e0e0; }
.btn-depois:hover { background: #f5f5f5; }
.m3-select-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }
.biometric-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #4caf50;
            border-radius: 50%;
            margin-left: 8px;
            animation: pulse-scale 1.5s infinite;
        }
@media (max-width: 480px) {
    .main-wrapper {
                max-width: 100%;
            }
    #login-form-card {
                padding: 20px;
            }
}

/* --- valor exclusivo desta pagina para o seletor "body" --- */
body.pagina-login {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            position: relative;
            overflow-x: hidden;
            background-color: #1b331a;
        }

@keyframes slideDown-login {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
@keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
@keyframes slideUp-login {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
@keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
@keyframes pulse-scale {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
            100% { opacity: 1; transform: scale(1); }
        }
/* ======= limpeza_notas.html (migrado 20/10/2026, fase 4 lote 9 -- ultimo arquivo grande) =======
   Quase tudo exclusivo desta pagina, movido sem escopo. Unica colisao
   real: ".btn-danger"/":hover" tinham vermelho ligeiramente diferente
   do padrao global no hover (#dc2626 vs #b91c1c) -- escopados em
   "body.pagina-limpeza-notas" pra nao mudar o vermelho de ".btn-danger"
   em nenhuma outra tela. */
.stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
.stat-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            padding: 20px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all var(--transition-fast);
        }
.stat-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-2px);
        }
.stat-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }
.stat-info {
            flex: 1;
            min-width: 0;
        }
.stat-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
.stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
        }
.action-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }
.action-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            padding: 24px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            transition: all var(--transition-fast);
        }
.action-card:hover {
            box-shadow: var(--shadow-hover);
        }
.action-card.warning-card {
            border-left: 4px solid #ef4444;
        }
.action-card.success-card {
            border-left: 4px solid #10b981;
        }
.action-card.info-card {
            border-left: 4px solid #f59e0b;
        }
.action-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 2px solid #e2e8f0;
        }
.action-header i {
            font-size: 1.5rem;
        }
.action-header h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.action-description {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }
.action-description strong {
            color: var(--text-primary);
        }
.btn-block {
            width: 100%;
            justify-content: center;
            height: 44px;
        }
.btn-success {
            background: #10b981 !important;
            color: #fff !important;
            border: none !important;
        }
.btn-success:hover {
            background: #059669 !important;
        }
.btn-warning {
            background: #f59e0b !important;
            color: #fff !important;
            border: none !important;
        }
.btn-warning:hover {
            background: #d97706 !important;
        }
.table td.status-cell {
            white-space: nowrap;
        }
.filter-empty-state {
            text-align: center;
            padding: 48px 24px;
        }
.filter-empty-state i {
            font-size: 4rem;
            color: #cbd5e1;
            margin-bottom: 16px;
            display: block;
        }
.filter-empty-state h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
.filter-empty-state p {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
.filter-empty-state .hint {
            font-size: 0.8rem;
            color: #94a3b8;
            margin-top: 12px;
        }
.alert-pendentes {
            background: #fef2f2;
            border-left: 4px solid #ef4444;
            padding: 16px 20px;
            border-radius: var(--radius-lg);
            margin-bottom: 24px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }
.alert-pendentes .alert-content {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            flex: 1;
            min-width: 200px;
        }
.alert-pendentes .alert-content > i {
            font-size: 1.5rem;
            color: #ef4444;
            margin-top: 2px;
        }
.alert-pendentes strong {
            color: #dc2626;
        }
.alert-pendentes .pendentes-list {
            margin-top: 8px;
            font-size: 0.85rem;
        }
.alert-pendentes .pendentes-list .pendente-item {
            margin-bottom: 4px;
            padding: 4px 0;
        }
.alert-pendentes .pendentes-list code {
            background: #fee2e2;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8rem;
        }
.alert-pendentes .btn-corrigir {
            flex-shrink: 0;
            align-self: center;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
.alert-tudo-ok {
            background: #ecfdf5;
            border-left: 4px solid #10b981;
            padding: 14px 20px;
            border-radius: var(--radius-lg);
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
            font-size: 0.938rem;
            color: #059669;
        }
.alert-tudo-ok i {
            font-size: 1.25rem;
        }
@media (max-width: 768px) {
    .action-cards {
                grid-template-columns: 1fr;
            }
    .alert-pendentes {
                flex-direction: column;
                align-items: stretch;
            }
    .alert-pendentes .btn-corrigir {
                align-self: stretch;
                justify-content: center;
            }
}

/* --- valores exclusivos desta pagina, escopados --- */
body.pagina-limpeza-notas .btn-danger {
            background: #ef4444 !important;
            color: #fff !important;
            border: none !important;
        }
body.pagina-limpeza-notas .btn-danger:hover {
            background: #dc2626 !important;
        }
.section-header-row.compacto h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin: 0; display: flex; align-items: center; }

/* --- valores exclusivos desta pagina, escopados em body.pagina-rel-assist --- */
@media (max-width: 768px) {
    body.pagina-rel-assist .table td { font-size: 0.8rem; }
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-relatorio-custos --- */
body.pagina-relatorio-custos { font-family: "Roboto", sans-serif; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none; margin: 0;
      }

/* --- valores exclusivos desta pagina, escopados em body.pagina-pre-pedido-almoxarifado --- */
body.pagina-pre-pedido-almoxarifado .filter-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 767.98px) {
    body.pagina-pre-pedido-almoxarifado .filter-actions { width: 100%; justify-content: flex-end; margin-left: 0; margin-top: 10px; }
}
.totals-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.totals-section p { font-size: 1rem; margin-bottom: 8px; display: flex; justify-content: space-between; }
.totals-section p strong { font-weight: 600; }
.totals-section p.grand-total strong { font-size: 1.2rem; color: var(--brand-primary); }
.form-actions-bar { display: flex; justify-content: flex-end; gap: 12px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border-color); }
.extra-add-grid-full { grid-column: 1 / -1; }
.secao-bloco { margin-bottom: 22px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; overflow: hidden; }
.secao-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-hover, #f8fafc); }
.barra-lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: #eef6ff; border-top: 1px solid #d7e8fb; border-bottom: 1px solid #d7e8fb; }
.barra-lote strong { color: var(--brand-primary); font-size: 0.85rem; white-space: nowrap; }
.chk-lote-linha { width: 16px; height: 16px; cursor: pointer; }
.secao-header h3 { margin: 0; font-size: 1rem; }
.secao-header .pill { margin-left: auto; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; white-space: nowrap; }
table.tabela-pendencias { width: 100%; border-collapse: collapse; }
table.tabela-pendencias th { text-align: left; font-size: 0.72rem; text-transform: uppercase; color: var(--text-secondary); padding: 8px 14px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
table.tabela-pendencias td { padding: 8px 14px; border-bottom: 1px solid var(--border-color, #f1f5f9); font-size: 0.85rem; }
table.tabela-pendencias tr:last-child td { border-bottom: none; }
.empty-state-mini { padding: 20px 16px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
tr.linha-montagem-cancelada td { background: #fef2f2; }
tr.linha-grupo-loja td {
            background: var(--bg-hover, #f8fafc);
            font-weight: 700;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: var(--text-secondary);
        }

/* --- valores exclusivos desta pagina, escopados em body.pagina-pendencias-lancamento --- */
body.pagina-pendencias-lancamento .obs-cell { color: var(--text-secondary); font-size: 0.8rem; max-width: 280px; white-space: pre-line; }
.alert-messages .toast-alert {
            position: relative;
            transform: none;
            left: auto;
            bottom: auto;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
.alert-messages .btn-close-toast {
            background: none;
            border: none;
            color: inherit;
            font-size: 1.2rem;
            padding: 0 0.5rem;
            opacity: 0.7;
            cursor: pointer;
        }
.alert-messages .btn-close-toast:hover { opacity: 1; }
.venda-item-link {
            display: block;
            padding: 10px 15px;
            margin-bottom: 8px;
            background-color: var(--bg-app);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            text-decoration: none;
            color: var(--text-primary);
            transition: background-color var(--transition-fast);
        }
.venda-item-link:hover {
            background-color: var(--brand-glow);
        }
.venda-item-link strong {
            color: var(--brand-primary);
        }

/* --- valores exclusivos desta pagina, escopados em body.pagina-editar-entrega --- */
body.pagina-editar-entrega .alert-messages {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 1050;
            width: auto;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
.form-row-3, .form-row-4, .form-row-6 { display: grid; gap: 16px; margin-bottom: 16px; }
.form-row-6 { grid-template-columns: repeat(6, 1fr); }
.switch-label { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.sugestao-card { background: var(--bg-app); border: 2px dashed var(--brand-primary); border-radius: var(--radius-lg); padding: 20px; text-align: center; cursor: pointer; transition: all var(--transition-fast); margin: 20px 0; }
.sugestao-card:hover { background: var(--brand-glow); border-color: var(--brand-primary); }
.sugestao-label { color: var(--brand-primary); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.sugestao-parcela { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.sugestao-total { font-size: 0.85rem; color: var(--text-secondary); }
.modal-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 24px; }
.select-all-wrapper { margin-bottom: 16px; }
.empresas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; background: var(--bg-app); padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.empresa-item { display: flex; align-items: center; gap: 8px; }
.empresa-item input { width: 18px; height: 18px; accent-color: var(--brand-primary); cursor: pointer; }
.empresa-item label { font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; }
.indices-table { width: 100%; border-collapse: collapse; }
.indices-table th { padding: 12px 16px; text-align: left; background: var(--bg-app); color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; border-bottom: 2px solid var(--border-color); }
.indices-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; }
.indice-input { width: 100px; padding: 8px 12px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.875rem; text-align: center; background: var(--bg-surface); }
.indice-input:focus { outline: none; border-color: var(--brand-primary); }
.modal-body-scroll { max-height: 450px; overflow-y: auto; }
.produtos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.produto-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; transition: all var(--transition-fast); }
.produto-card:hover { box-shadow: var(--shadow-hover); border-color: var(--brand-primary); }
.produto-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.produto-codigo { display: inline-block; background: var(--brand-primary); color: white; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; }
.btn-icon-sm { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-app); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.btn-icon-sm:hover { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
.produto-descricao { font-weight: 600; font-size: 1rem; color: var(--text-primary); margin: 0 0 8px 0; line-height: 1.3; }
.produto-fornecedor { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }
.produto-fornecedor i { margin-right: 6px; color: var(--brand-primary); }
.produto-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border-color); }
.produto-tipo { font-size: 0.75rem; color: var(--text-secondary); }
.produto-preco { font-size: 1.25rem; font-weight: 800; color: var(--success); }
.w-full { width: 100% !important; }
@media (max-width: 992px) {
    .produtos-grid { grid-template-columns: 1fr; }
    .form-row-3, .form-row-4, .form-row-6 { grid-template-columns: 1fr !important; gap: 12px; }
    .modal-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .empresas-grid { grid-template-columns: 1fr; }
    .sugestao-parcela { font-size: 1.25rem; }
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-gerenciar-produto --- */
body.pagina-gerenciar-produto .form-row-3 { grid-template-columns: repeat(3, 1fr); }
body.pagina-gerenciar-produto .form-row-4 { grid-template-columns: repeat(4, 1fr); }
body.pagina-gerenciar-produto .switch-wrapper { display: flex; align-items: center; gap: 8px; height: 100%; padding-top: 4px; }
.small { font-size: 0.85em; }
.metric-card--clickable { cursor: pointer; }
.assistencia-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 1.5rem;
        }
.assistencia-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--glass-border);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }
.assistencia-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card-header-custom {
            padding: 14px 20px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.card-body-custom { padding: 20px; }
.info-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 0.9rem;
            color: var(--text-primary);
        }
.info-row i { width: 20px; color: var(--text-secondary); }
.pecas-preview {
            background: var(--bg-app);
            border-radius: var(--radius-md);
            padding: 12px;
            margin: 12px 0;
            font-size: 0.8rem;
        }
.peca-chip {
            display: inline-block;
            padding: 2px 10px;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-pill);
            font-size: 0.7rem;
            font-weight: 600;
            margin-right: 4px;
        }
.peca-item { background: var(--bg-app); border-left: 3px solid var(--brand-primary); padding: 10px; margin-bottom: 8px; border-radius: 6px; }
.peca-item strong { color: var(--brand-primary); }
.priority-pill {
            padding: 2px 10px;
            border-radius: var(--radius-pill);
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-left: 4px;
        }
.priority-baixa { background: var(--bg-app); color: var(--text-secondary); }
.priority-media { background: #dbeafe; color: #1d4ed8; }
.priority-alta { background: var(--warning-bg); color: var(--warning); }
.priority-urgente { background: var(--danger-bg); color: var(--danger); }
.details-section-title {
            font-size: 0.8rem;
            margin: 20px 0 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 700;
        }
@media (max-width: 768px) {
    .assistencia-cards-container { grid-template-columns: 1fr; gap: 1rem; }
}
.text-dark { color: var(--text-primary); }
.text-primary { color: var(--brand-primary); }
.text-info { color: #2563eb; }
.small { font-size: 0.85em; }
.rounded { border-radius: var(--radius-md); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 0.72rem; font-weight: 700; }
.badge-secondary { background: var(--text-secondary); color: #fff; }
.badge-light { background: var(--bg-app); color: var(--text-primary); }
.badge-dark { background: var(--text-primary); color: #fff; }
.alert-secondary { background: var(--bg-app); color: var(--text-secondary); border-left-color: var(--border-color); }
.assistencia-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 1.5rem;
            padding: 1rem 0;
        }
.status-recebido { background-color: #d1ecf1; color: #0c5460; }
.status-solucionado { background-color: var(--success-bg); color: #155724; }
.assistencia-card { animation: fadeIn-ca 0.3s ease-out; transition: transform 0.2s, box-shadow 0.2s; }
.assistencia-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.btn-action { padding: 6px 12px; font-size: 0.85rem; }
.peca-item { background: var(--bg-app); border-left: 3px solid var(--brand-primary); padding: 10px; margin-bottom: 8px; border-radius: 6px; }
.peca-item strong { color: var(--brand-primary); }
.filter-summary { background: var(--bg-app); border-radius: 8px; padding: 10px 15px; }
.btn-group-action { display: flex; gap: 8px; flex-wrap: wrap; }
.details-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.detail-box { background: var(--bg-app); padding: 8px; border-radius: var(--radius-md); }
.detail-box small { color: var(--text-secondary); display: block; }
.detail-box-warning { background: var(--warning-bg); padding: 8px; border-radius: var(--radius-md); }
.email-suggestion { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-app); border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-size: 0.82rem; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.email-suggestion:hover { background: var(--brand-glow); border-color: var(--brand-primary); }
@media (max-width: 768px) {
    .assistencia-cards-container { grid-template-columns: 1fr; gap: 1rem; }
    .details-row { grid-template-columns: 1fr; }
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-consultar-assistencia --- */
body.pagina-consultar-assistencia .py-4 { padding-top: 24px; padding-bottom: 24px; }
body.pagina-consultar-assistencia .status-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }
body.pagina-consultar-assistencia .status-pendente { background-color: var(--warning-bg); color: #856404; }
@keyframes fadeIn-ca { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.text-dark { color: var(--text-primary); }
.text-primary { color: var(--brand-primary); }
.small { font-size: 0.85em; }
.border { border: 1px solid var(--border-color); }
.rounded { border-radius: var(--radius-md); }
.bg-white { background: #ffffff; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 0.72rem; font-weight: 700; }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-dark { background: var(--text-primary); color: #fff; }
.alert-secondary { background: var(--bg-app); color: var(--text-secondary); border-left-color: var(--border-color); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.info-item { display: flex; align-items: center; gap: 8px; background: var(--bg-app); border-radius: var(--radius-md); padding: 10px 14px; font-size: 0.9rem; }
.info-item i { color: var(--brand-primary); }
.produtos-cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.produto-card { margin-bottom: 0; }
.peca-card { background: var(--bg-app); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 20px; }
.peca-card .card-header { margin-bottom: 12px; padding-bottom: 8px; font-size: 0.95rem; }
.upload-dropzone.dragover { background-color: var(--brand-glow); border-color: var(--brand-primary) !important; }
.upload-preview-item { width: calc(50% - 0.5rem); background: var(--bg-app); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px; position: relative; margin-bottom: 10px; }
.upload-preview-content { display: flex; align-items: center; gap: 10px; }
.upload-thumbnail { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-secondary); }
.upload-file-info { flex-grow: 1; overflow: hidden; }
.upload-filename { font-size: 0.85rem; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-filesize { font-size: 0.75rem; color: var(--text-secondary); }
.upload-remove-btn { position: absolute; top: -8px; right: -8px; background: var(--danger); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.upload-remove-btn:hover { background: #b91c1c; }
.upload-progress-track { width: 100%; height: 20px; border-radius: 10px; background: var(--bg-app); overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--success); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; font-weight: 700; transition: width 0.3s ease; white-space: nowrap; }
@media (max-width: 768px) {
    .upload-preview-item { width: 100%; }
}
.text-left { text-align: left; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.quinzena-info { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; display: block; }
.document-wrapper {
            background: #e2e8f0; padding: 20px; border-radius: 8px; margin-top: 20px;
            overflow-x: auto;
        }
.page {
            background: #fff;
            padding: 8mm 10mm;
            box-sizing: border-box;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            margin: 0 auto 20px auto;
            max-width: 297mm;
            font-size: 10px;
            color: #1e293b;
        }
.page-header {
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 2px solid #1e293b; padding-bottom: 8px; margin-bottom: 10px;
        }
.header-left { display: flex; align-items: center; gap: 10px; }
.logo { height: 35px; width: auto; display: block; }
.title-wrap h1 { font-size: 18px; margin: 0; line-height: 1.1; color: #0f172a; font-weight: 800; letter-spacing: -0.5px; }
.title-wrap .sub { font-size: 11px; margin-top: 2px; color: #64748b; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.header-right { text-align: right; font-size: 10px; line-height: 1.4; color: #334155; }
.info-bar {
            margin: 5px 0 10px 0; font-size: 11px; display: flex; justify-content: space-between; gap: 10px;
            background-color: #f8fafc; padding: 8px 12px; border-radius: 6px; border: 1px solid #cbd5e1;
        }
.doc-table {
            width: 100%; border-collapse: collapse; margin-bottom: 10px;
        }
.doc-table th, .doc-table td {
            border-bottom: 1px solid #cbd5e1; 
            border-left: none; 
            border-right: none; 
            padding: 5px;
            text-align: left;
            vertical-align: middle;
            font-size: 9.5px;
            color: #0f172a;
        }
.doc-table thead th {
            background: #e2e8f0;
            font-weight: 800;
            font-size: 9.5px;
            text-transform: uppercase;
            color: #1e293b;
            text-align: center;
            border-top: none;
            border-bottom: 2px solid #94a3b8;
        }
.whitespace-nowrap { white-space: nowrap !important; }
.bg-white { background-color: #ffffff !important; }
.bg-light-yellow { background-color: #fffae6 !important; }
.row-totals td {
            font-weight: 800;
            background-color: #e2e8f0 !important;
            color: #0f172a;
            font-size: 10.5px;
            padding-top: 6px;
            padding-bottom: 6px;
            border-bottom: none;
        }
.truncate-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.page-footer {
            margin-top: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
        }
.totals { font-size: 14px; font-weight: 800; line-height: 1.4; color: #0f172a; }
.software-credit { font-size: 9px; color: #94a3b8; text-align: right; }
@media print {
    .no-print, .sidebar, aside, .sidebar-overlay, .top-bar { display: none !important; }
    body, html { margin: 0; padding: 0; background: #fff !important; }
    .app-layout, .main-area, .content-wrapper { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; }
    .document-wrapper { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; }
    .page { padding: 0; margin: 0; max-width: 100%; box-shadow: none; border: none; }
    .page-break-before { page-break-before: always; }
    .doc-table { page-break-inside: auto; }
    .doc-table tr { page-break-inside: avoid; page-break-after: auto; }
    .doc-table thead { display: table-header-group; }
    .bg-white { background-color: #ffffff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bg-light-yellow { background-color: #fffae6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .doc-table thead th { background-color: #e2e8f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .row-totals td { background-color: #e2e8f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .info-bar { background-color: #f8fafc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-relatorio-comissao-montagem --- */
body.pagina-relatorio-comissao-montagem .fade-in { animation: fadeIn-ca 0.3s ease-in-out; }
.card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
        }
.image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 8px;
            margin-top: 16px;
        }
.image-gallery img, .image-gallery video {
            width: 100%;
            height: auto;
            border-radius: var(--radius-sm);
            object-fit: cover;
            aspect-ratio: 1 / 1;
            border: 1px solid var(--glass-border);
        }
.venda-expressive-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-top: 24px;
        }
.expressive-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }
.expressive-icon {
            background-color: var(--brand-glow);
            color: var(--brand-primary);
            width: 56px;
            height: 56px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }
.expressive-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.2;
        }
.expressive-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
.info-tile {
            background-color: var(--bg-app);
            padding: 16px;
            border-radius: var(--radius-lg);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
.info-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.info-value {
            font-size: 1.125rem;
            color: var(--text-primary);
            font-weight: 500;
            word-break: break-word;
        }
.info-value.highlight {
            color: var(--brand-primary);
            font-size: 1.5rem;
            font-weight: 700;
        }
.action-bar {
            display: flex;
            flex-wrap: nowrap;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 8px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
.action-bar::-webkit-scrollbar { display: none; }
.action-bar .btn { flex-shrink: 0; border-radius: var(--radius-pill); padding: 0 24px; }
.produto-item {
            background-color: var(--bg-surface);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 20px;
            margin-bottom: 16px;
        }
.produto-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 16px;
        }
.produto-desc {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }
.produto-badge {
            background-color: var(--brand-glow);
            color: var(--brand-primary);
            padding: 4px 12px;
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            font-weight: 600;
            white-space: nowrap;
        }
.produto-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            border-top: 1px dashed var(--border-color);
            padding-top: 16px;
        }
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric-label { font-size: 0.8rem; color: var(--text-secondary); }
.metric-value { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); }
.avaria-container {
            background-color: var(--danger-bg);
            border-radius: var(--radius-md);
            padding: 12px 16px;
            margin-top: 16px;
        }
@media (min-width: 600px) {
    .expressive-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.page-subtitle { display: block; color: var(--text-secondary); font-size: 0.85rem; font-weight: 400; margin-top: 2px; }
.periodo-rapido > label {
            font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
            text-transform: uppercase; letter-spacing: 0.5px;
        }
.periodo-btn i { font-size: 0.9rem; }
.kpi-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px; margin-bottom: 24px;
        }
.kpi-card {
            background: var(--bg-surface); border-radius: var(--radius-xl); padding: 24px;
            box-shadow: var(--shadow-card); border: 1px solid var(--glass-border);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.kpi-label {
            font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px;
            text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px;
        }
.kpi-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.kpi-change { font-size: 0.9rem; display: flex; align-items: center; gap: 5px; }
.kpi-change.positive { color: var(--success); }
.kpi-change.negative { color: var(--danger); }
.kpi-change.neutral { color: var(--text-secondary); }
.progress-container { margin-top: 15px; }
.progress { height: 8px; border-radius: 4px; background: #e9ecef; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.progress-bar--success { background: var(--success); }
.progress-bar--warning { background: var(--warning); }
.progress-bar--danger { background: var(--danger); }
.progress-bar--info { background: #0288d1; }
.progress-info { display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.8rem; color: var(--text-secondary); }
.section-card {
            background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
            border: 1px solid var(--glass-border); margin-bottom: 24px; overflow: hidden;
        }
.section-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.section-body { padding: 24px; }
.section-body.no-padding { padding: 0; }
.badge-rank {
            width: 32px; height: 32px; border-radius: 50%; display: inline-flex;
            align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
        }
.badge-rank.gold { background: #ffd700; color: #333; }
.badge-rank.silver { background: #c0c0c0; color: #333; }
.badge-rank.bronze { background: #cd7f32; color: white; }
.badge-filter {
            background: #fff3cd; color: #856404; font-size: 0.8rem;
            padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 500;
        }
.badge-info-tag {
            background: #e3f2fd; color: #01579b; font-size: 0.8rem;
            padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 500;
        }
.performance-cell { min-width: 120px; }
.performance-cell .progress { height: 6px; margin-bottom: 3px; }
.performance-cell small { font-size: 0.75rem; color: var(--text-secondary); }
.resumo-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px; margin-top: 24px;
        }
.resumo-details.details-grid { grid-template-columns: 1fr auto; row-gap: 12px; }
.resumo-details dt { font-weight: 500; color: var(--text-secondary); font-size: 0.9rem; }
.resumo-details dd { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; text-align: right; }
.alert-empty { text-align: center; padding: 30px; color: var(--text-secondary); }
.alert-empty i { font-size: 2rem; margin-bottom: 10px; display: block; }
:root { --dash-primary-light: #2a4d2a; }
@media (max-width: 992px) {
    .kpi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .kpi-value { font-size: 1.5rem; }
    .filter-actions .btn { width: 100%; justify-content: center; }
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-dashboard --- */
body.pagina-dashboard .periodo-rapido { margin-bottom: 20px; }
body.pagina-dashboard .periodo-btn {
            padding: 8px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-pill);
            background: var(--bg-surface); color: var(--text-primary); cursor: pointer; font-size: 0.85rem;
            font-weight: 500; transition: all var(--transition-fast); display: inline-flex;
            align-items: center; gap: 6px; white-space: nowrap; text-decoration: none;
        }
body.pagina-dashboard .periodo-btn:hover { background: #f0f0f0; border-color: var(--brand-primary); }
body.pagina-dashboard .periodo-btn.active { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
body.pagina-dashboard .benchmark-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; padding: 20px 30px; border-radius: var(--radius-xl); margin-bottom: 24px;
            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
        }
body.pagina-dashboard .benchmark-banner h4 { margin: 0 0 5px 0; font-size: 1.1rem; }
body.pagina-dashboard .section-header {
            padding: 20px 24px; border-bottom: 1px solid var(--border-color);
            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
        }
@media (max-width: 576px) {
    body.pagina-dashboard .filter-actions { flex-direction: column; width: 100%; }
    body.pagina-dashboard .periodo-botoes { flex-direction: column; }
    body.pagina-dashboard .periodo-btn { justify-content: center; }
}
.app-header {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 64px;
            padding: 0 16px;
            background-color: var(--brand-primary);
            color: #ffffff;
        }
.app-header__title {
            font-size: 1.375rem;
            font-weight: 500;
            margin: 0;
        }
.dashboard-menu {
            display: flex;
            gap: 10px;
            padding: 15px 16px;
            background-color: var(--bg-surface);
            border-bottom: 1px solid var(--border-color);
            justify-content: center;
            flex-wrap: wrap;
        }
.menu-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background-color: #ffffff;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: var(--radius-pill);
            font-weight: 600;
            font-size: 0.9rem;
            transition: all var(--transition-fast);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }
.menu-btn.active {
            background-color: var(--brand-primary);
            color: #ffffff;
            border-color: var(--brand-primary);
        }
.menu-btn:hover {
            color: var(--brand-primary);
            border-color: var(--brand-primary);
            text-decoration: none;
        }
.menu-btn.active:hover {
            color: #ffffff;
        }
.app-content {
            max-width: 1100px;
            margin: 0 auto;
            padding: 16px;
        }
.results-header {
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }
.results-header__title {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0 0 4px;
            color: var(--text-primary);
        }
.results-header__count {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
.card-produto {
            border-left: 4px solid var(--brand-primary);
            display: flex;
            flex-direction: column;
        }
.card-produto.saldo-zero {
            border-left-color: var(--danger);
        }
.card-produto__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
.card-produto__descricao {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
.card-produto__codigo {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            background-color: var(--bg-app);
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
        }
.card-produto__body {
            padding: 12px 0;
            flex-grow: 1;
        }
.info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }
.info-item__label { color: var(--text-secondary); }
.info-item__value { font-weight: 600; color: var(--text-primary); }
.card-produto__saldo-area {
            padding-top: 12px;
            margin-top: 12px;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }
.saldo-area__label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.saldo-area__value {
            display: block;
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
            color: var(--brand-primary);
        }
.card-produto.saldo-zero .saldo-area__value {
            color: var(--danger);
        }
.search-bar {
            display: flex;
            gap: 8px;
        }
.search-bar .input-control { flex-grow: 1; }

/* --- valores exclusivos desta pagina, escopados em body.pagina-estoque --- */
body.pagina-estoque .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px;
        }
.badge-orange { background: var(--warning); color: #fff; }
.badge-purple { background: #6a1b9a; color: #fff; }
.badge-yellow { background: #f9a825; color: #000; }
.soft-card:hover {
            box-shadow: var(--shadow-hover);
        }
.placeholder-card {
            border-left: 5px solid var(--warning);
            background: var(--warning-bg);
        }
.entrega-real-card {
            border-left: 5px solid #1976d2;
            background: #e3f2fd;
        }
.entrega-real-card-assistencia {
            border-left: 5px solid #6a1b9a;
            background: #f3e5f5;
        }
.entrega-real-card-prioridade {
            border-left: 5px solid var(--success);
            background: var(--success-bg);
        }
.sincronizar-item {
            cursor: pointer;
            transition: all 0.2s ease;
        }
.sincronizar-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }
.log-item {
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            margin-bottom: 6px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
.log-success {
            background: var(--success-bg);
            color: var(--success);
            border-left: 3px solid var(--success);
        }
.log-error {
            background: var(--danger-bg);
            color: var(--danger);
            border-left: 3px solid var(--danger);
        }
.log-info {
            background: #e3f2fd;
            color: #1976d2;
            border-left: 3px solid #1976d2;
        }
.loading-progress {
            display: none;
            align-items: center;
            gap: 8px;
            color: #1976d2;
            font-weight: bold;
            padding: 8px 12px;
            background: #e3f2fd;
            border-radius: var(--radius-sm);
            margin-top: 8px;
        }
.montagem-aguardando-badge {
            background: var(--warning);
            color: #fff;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: bold;
            animation: pulse-scale 1.5s infinite;
        }

/* --- valores exclusivos desta pagina, escopados em body.pagina-sincronizar-entregas --- */
body.pagina-sincronizar-entregas .badge-blue { background: #1976d2; color: #fff; }
body.pagina-sincronizar-entregas .soft-card {
            padding: 14px;
            border-radius: var(--radius-md);
            background: var(--bg-surface);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--transition-fast);
        }
body.pagina-sincronizar-entregas .info-strip {
            margin-top: 12px;
            padding: 12px 16px;
            border-radius: var(--radius-md);
            border-left: 5px solid #1976d2;
            background: #e3f2fd;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
body.pagina-sincronizar-entregas .contador-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            height: 24px;
            border-radius: var(--radius-pill);
            background: var(--danger);
            color: #fff;
            font-weight: bold;
            font-size: 0.8rem;
            margin-left: 6px;
            padding: 0 8px;
        }
.status-concluido { background: var(--success-bg); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.3); }
.acoes-contabilidade { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.btn-acao-tabela { 
            width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); 
            background: #ffffff; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; 
            cursor: pointer; transition: all 0.2s ease; font-size: 1rem; flex-shrink: 0;
        }
.btn-acao-tabela:hover { background: var(--brand-glow); border-color: var(--brand-primary); color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-acao-tabela.destaque { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); }
.btn-acao-tabela.destaque:hover { background: #10240f; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(27, 51, 26, 0.2); }
.btn-acao-tabela.roxo { color: #7c3aed; border-color: #d8b4fe; background: #faf5ff; }
.btn-acao-tabela.roxo:hover { background: #7c3aed; color: #ffffff; border-color: #7c3aed; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2); }
.col-fp { width: 130px; min-width: 130px; }
.fp-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.fp-badge { 
            display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; 
            border-radius: 8px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; 
            transition: all 0.2s ease; letter-spacing: 0.2px;
        }
.fp-badge img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); }
.fp-badge-rede { 
            background: #f97316; 
            color: #ffffff; border: 1px solid #ea580c;
            box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
        }
.fp-badge-blu { 
            background: #1e40af; 
            color: #ffffff; border: 1px solid #1e3a8a;
            box-shadow: 0 2px 4px rgba(30, 64, 175, 0.3);
        }
.fp-badge-pix { 
            background: #00b8a9; 
            color: #ffffff; border: 1px solid #00897b;
            box-shadow: 0 2px 4px rgba(0, 184, 169, 0.3);
        }
.fp-badge-dinheiro { 
            background: #10b981; 
            color: #ffffff; border: 1px solid #047857;
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
        }
.fp-badge-outro { 
            background: #94a3b8; color: #ffffff; border: 1px solid #64748b; 
        }
.fp-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.info-item { background: #f8fafc; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 4px; transition: all 0.2s; }
.info-item:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); background: #ffffff; }
.info-label { font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); }
.info-value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); word-break: break-word; }
.btn-icon-sm { 
            width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-color); 
            background: #ffffff; color: var(--brand-primary); cursor: pointer; 
            display: flex; align-items: center; justify-content: center; 
            transition: all 0.2s; flex-shrink: 0;
        }
.btn-icon-sm:hover { background: var(--brand-glow); border-color: var(--brand-primary); }
.btn-icon-sm.copiado { background: var(--success-bg) !important; border-color: var(--success) !important; color: var(--success) !important; }
.contador-solicitacoes { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.indicador-online { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; animation: pulse 2s infinite; }
.contador-atualizacao { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-weight: 500; }
@media (max-width: 768px) {
    .table tbody, .table tr, .table td { display: block; width: 100%; }
    .col-fp { width: 100%; min-width: 100%; }
    .fp-badges { flex-wrap: wrap; gap: 6px; }
    .acoes-contabilidade { width: 100%; justify-content: flex-start; }
    .info-grid { grid-template-columns: 1fr; }
}

/* --- valores exclusivos desta pagina, escopados --- */
body.pagina-contabilidade-mostruario .mb-2 { margin-bottom: 0.5rem; }
body.pagina-contabilidade-mostruario .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
body.pagina-contabilidade-mostruario .status-pendente { background: var(--warning-bg); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.3); }
body.pagina-contabilidade-mostruario .toast-alert { position: fixed; top: 20px; right: 20px; padding: 14px 20px; border-radius: var(--radius-lg); color: #fff; font-size: 0.85rem; font-weight: 500; z-index: 9999; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-hover); transition: all 0.3s ease; max-width: 400px; }
body.pagina-contabilidade-mostruario .toast-success { background: linear-gradient(135deg, var(--success) 0%, #146c43 100%); }
body.pagina-contabilidade-mostruario .toast-error { background: linear-gradient(135deg, var(--danger) 0%, #b02a37 100%); }
@media (max-width: 768px) {
    body.pagina-contabilidade-mostruario .table tr { margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; background: #fff; box-shadow: var(--shadow-sm); }
    body.pagina-contabilidade-mostruario .table td { text-align: left !important; padding: 8px 0; border: none; border-bottom: 1px solid #f1f5f9; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    body.pagina-contabilidade-mostruario .table td::before { content: attr(data-label); font-weight: 700; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; }
    body.pagina-contabilidade-mostruario .toast-alert { left: 20px; right: 20px; max-width: none; }
}
.status-concluido { background: var(--success-bg); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.3); }
.acoes-contabilidade { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.btn-acao-tabela { 
            width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); 
            background: #ffffff; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; 
            cursor: pointer; transition: all 0.2s ease; font-size: 1rem; flex-shrink: 0;
        }
.btn-acao-tabela:hover { background: var(--brand-glow); border-color: var(--brand-primary); color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-acao-tabela.destaque { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); }
.btn-acao-tabela.destaque:hover { background: #10240f; }
.btn-acao-tabela.roxo { color: #7c3aed; border-color: #d8b4fe; background: #faf5ff; }
.btn-acao-tabela.roxo:hover { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }
.btn-acao-tabela.laranja { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.btn-acao-tabela.laranja:hover { background: #d97706; color: #ffffff; border-color: #d97706; }
.indicador-online { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; animation: pulse 2s infinite; }
.contador-atualizacao { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.contador-solicitacoes { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
@media (max-width: 768px) {
    .table tbody, .table tr, .table td { display: block; width: 100%; }
    .acoes-contabilidade { width: 100%; justify-content: flex-start; }
}

/* --- valores exclusivos desta pagina, escopados --- */
body.pagina-coordenadora-mostruario .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
body.pagina-coordenadora-mostruario .status-pendente { background: var(--warning-bg); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.3); }
body.pagina-coordenadora-mostruario .toast-alert { position: fixed; top: 20px; right: 20px; padding: 14px 20px; border-radius: var(--radius-lg); color: #fff; font-size: 0.85rem; font-weight: 500; z-index: 9999; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-hover); transition: all 0.3s ease; max-width: 400px; }
body.pagina-coordenadora-mostruario .toast-success { background: linear-gradient(135deg, var(--success) 0%, #146c43 100%); }
body.pagina-coordenadora-mostruario .toast-error { background: linear-gradient(135deg, var(--danger) 0%, #b02a37 100%); }
body.pagina-coordenadora-mostruario .toast-info { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
@media (max-width: 768px) {
    body.pagina-coordenadora-mostruario .table tr { margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; background: #fff; box-shadow: var(--shadow-sm); }
    body.pagina-coordenadora-mostruario .table td { text-align: left !important; padding: 8px 0; border: none; border-bottom: 1px solid #f1f5f9; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    body.pagina-coordenadora-mostruario .table td::before { content: attr(data-label); font-weight: 700; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; }
    body.pagina-coordenadora-mostruario .toast-alert { left: 20px; right: 20px; max-width: none; }
}
.text-primary {color:var(--brand-primary)}
.text-white {color:#fff}
.text-dark {color:#1a202c}
.small {font-size:0.8rem}
.fs-5 {font-size:1.25rem}
.fs-6 {font-size:1rem}
.btn-warning {background:var(--warning);color:#1a202c;border:1px solid transparent}
.btn-warning:hover {background:#d97706;color:#fff}
.pdv-section {border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;background:#f8fafc}
.pdv-top-row {display:grid;grid-template-columns:3fr 1fr;gap:24px}
.pdv-product-row {display:grid;grid-template-columns:2fr 100px auto auto;gap:12px;align-items:end}
.pdv-cliente-actions {display:flex;gap:8px;margin-top:8px}
.pdv-bottom-row {display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:16px}
.pdv-totals-cols {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pdv-footer-buttons {display:flex;flex-direction:column;gap:8px;height:100%;justify-content:flex-end}
.pdv-item-grid-container {max-height:42vh;min-height:220px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:16px;background:#fff}
.pdv-item-table {width:100%;border-collapse:collapse}
.pdv-item-table th,.pdv-item-table td {padding:8px 10px;font-size:0.85rem;border-bottom:1px solid #e2e8f0;vertical-align:middle}
.pdv-item-table thead th {background:#f8fafc;position:sticky;top:0;font-size:0.72rem;text-transform:uppercase;color:var(--text-secondary);z-index:1}
.pdv-item-table tbody tr:hover {background:#f8fafc}
.pdv-totals-area {background:#f8fafc;padding:16px 20px;border-radius:var(--radius-lg);border:1px solid var(--border-color)}
.pdv-totals-area .totals-line {display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
.pdv-totals-area .totals-line dt {font-weight:500;color:var(--text-secondary);font-size:0.9em}
.pdv-totals-area .totals-line dd {font-size:1.05em;font-weight:600;margin:0}
.pdv-grand-total dt {font-size:1.1em;color:var(--text-secondary)}
.pdv-grand-total dd {font-size:clamp(1.25rem,3vw,1.75rem);color:var(--brand-primary);font-weight:800}
.pdv-discount-row {display:flex;gap:8px;margin-bottom:8px;}
.pdv-discount-row .prefix-input {flex:1;}
.pdv-discount-row .prefix-input .input-control {height:36px;font-size:0.85rem;}
.pdv-discount-row .prefix-input__label {font-size:0.75rem;padding:0 8px;}
.payment-section {background:#f8fafc;padding:16px 20px;border-radius:var(--radius-lg);border:1px solid var(--border-color);height:100%;display:flex;flex-direction:column}
.payment-line {border-bottom:1px dashed var(--border-color);padding-bottom:10px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.payment-line:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0}
.payment-method-container {flex-grow:2;flex-basis:150px}
.payment-amount-container {flex-grow:1;flex-basis:100px}
.parcelas-input-container {flex-basis:70px;flex-grow:0}
.payment-remove-container {flex-basis:32px;text-align:right}
.payment-method-select,.payment-amount-input,.parcelas-input {height:36px;font-size:0.85rem;padding:0 8px}
.payment-amount-input {text-align:right}
.parcelas-input {text-align:center}
.pdv-qty-input {max-width:75px;text-align:center;height:32px;padding:0 4px}
.item-discount-percent {height:32px;text-align:center;padding:0 4px}
.search-results-container {position:absolute;background:#fff;border:1px solid var(--border-color);border-top:none;max-height:250px;overflow-y:auto;z-index:1050;width:100%;left:0;box-shadow:var(--shadow-hover);border-radius:0 0 var(--radius-md) var(--radius-md)}
.search-item {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;font-size:0.9rem;border-bottom:1px solid #f1f5f9}
.search-item:last-child {border-bottom:none}
.search-item:hover {background:#f1f5f9}
.search-item small {color:var(--text-secondary);display:block;font-size:0.8em;margin-top:2px}
.search-item--consumidor {background:#f8fafc;justify-content:center}
.local-list-btn {display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:6px;padding:10px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#fff;cursor:pointer;text-align:left}
.local-list-btn:hover {background:#f1f5f9}
.btn-icon-sm {width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--danger);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-icon-sm:hover {background:var(--danger-bg)}
.prefix-input {display:flex;align-items:stretch;border:1.5px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.prefix-input__label {display:flex;align-items:center;padding:0 12px;background:#f1f5f9;font-weight:700;color:var(--text-secondary);font-size:0.85rem;flex-shrink:0}
.prefix-input .input-control {border:none;border-radius:0;height:42px}
.prefix-input .input-control:focus {box-shadow:none}
.pdv-section,.pdv-item-grid-container,.pdv-totals-area,.payment-section {box-shadow:var(--shadow-card)}
.pdv-step-wrap {display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0 2px}
.pdv-step-wrap:not(:first-child) {margin-top:2px}
.pdv-step-num {width:24px;height:24px;border-radius:50%;background:var(--brand-primary);color:#fff;font-size:0.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pdv-step-title {font-size:0.95rem;font-weight:700;color:var(--text-primary);letter-spacing:.01em;margin:0}
.pdv-step-title i {color:var(--brand-primary);margin-right:4px}
.pdv-item-table tbody tr:nth-child(even) {background:#fbfcfd}
.pdv-grand-total {background:var(--brand-glow);border-radius:var(--radius-md);padding:10px 12px;margin-top:2px}
@media (max-width:992px) {
    .pdv-top-row,.pdv-product-row,.pdv-bottom-row,.pdv-totals-cols {grid-template-columns:1fr}
}
@media (max-width:576px) {
    .pdv-section {padding:12px 14px}
    .pdv-item-table th,.pdv-item-table td {padding:6px 8px;font-size:0.8rem}
    .payment-line {flex-direction:column;align-items:stretch}
    .payment-method-container,.payment-amount-container,.parcelas-input-container,.payment-remove-container {flex-basis:100%}
    .payment-remove-container {text-align:right}
    .pdv-discount-row {flex-direction:column}
    .pdv-footer-buttons {flex-direction:column}
    .payment-method-select,.payment-amount-input,.parcelas-input {min-height:40px}
    .pdv-grand-total dd {font-size:1.4rem}
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-caixa --- */
body.pagina-caixa .badge-amber {background:var(--warning);color:#1a202c}
body.pagina-caixa .logradouro-result-item {cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:6px;background:#fff}
body.pagina-caixa .logradouro-result-item:hover {background:#f1f5f9}
body.pagina-caixa .result-details {font-size:0.85em;color:var(--text-secondary)}
.text-primary {color:var(--brand-primary)}
.text-white {color:#fff}
.text-dark {color:#1a202c}
.small {font-size:0.8rem}
.fs-5 {font-size:1.25rem}
.fs-6 {font-size:1rem}
.btn-warning {background:var(--warning);color:#1a202c;border:1px solid transparent}
.btn-warning:hover {background:#d97706;color:#fff}
.pdv-section {border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;background:#f8fafc}
.pdv-top-row {display:grid;grid-template-columns:3fr 1fr;gap:24px}
.pdv-product-row {display:grid;grid-template-columns:2fr 100px auto auto;gap:12px;align-items:end}
.pdv-cliente-actions {display:flex;gap:8px;margin-top:8px}
.pdv-bottom-row {display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:16px}
.pdv-totals-cols {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pdv-footer-buttons {display:flex;flex-direction:column;gap:8px;height:100%;justify-content:flex-end}
.pdv-item-grid-container {max-height:42vh;min-height:220px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:16px;background:#fff}
.pdv-item-table {width:100%;border-collapse:collapse}
.pdv-item-table th,.pdv-item-table td {padding:8px 10px;font-size:0.85rem;border-bottom:1px solid #e2e8f0;vertical-align:middle}
.pdv-item-table thead th {background:#f8fafc;position:sticky;top:0;font-size:0.72rem;text-transform:uppercase;color:var(--text-secondary);z-index:1}
.pdv-item-table tbody tr:hover {background:#f8fafc}
.pdv-totals-area {background:#f8fafc;padding:16px 20px;border-radius:var(--radius-lg);border:1px solid var(--border-color)}
.pdv-totals-area .totals-line {display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
.pdv-totals-area .totals-line dt {font-weight:500;color:var(--text-secondary);font-size:0.9em}
.pdv-totals-area .totals-line dd {font-size:1.05em;font-weight:600;margin:0}
.pdv-grand-total dt {font-size:1.1em;color:var(--text-secondary)}
.pdv-grand-total dd {font-size:clamp(1.25rem,3vw,1.75rem);color:var(--brand-primary);font-weight:800}
.payment-section {background:#f8fafc;padding:16px 20px;border-radius:var(--radius-lg);border:1px solid var(--border-color);height:100%;display:flex;flex-direction:column}
.payment-line {border-bottom:1px dashed var(--border-color);padding-bottom:10px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.payment-line:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0}
.payment-method-container {flex-grow:2;flex-basis:150px}
.payment-amount-container {flex-grow:1;flex-basis:100px}
.parcelas-input-container {flex-basis:70px;flex-grow:0}
.payment-remove-container {flex-basis:32px;text-align:right}
.payment-method-select,.payment-amount-input,.parcelas-input {height:36px;font-size:0.85rem;padding:0 8px}
.payment-amount-input {text-align:right}
.parcelas-input {text-align:center}
.pdv-qty-input {max-width:75px;text-align:center;height:32px;padding:0 4px}
.search-results-container {position:absolute;background:#fff;border:1px solid var(--border-color);border-top:none;max-height:250px;overflow-y:auto;z-index:1050;width:100%;left:0;box-shadow:var(--shadow-hover);border-radius:0 0 var(--radius-md) var(--radius-md)}
.search-item {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;font-size:0.9rem;border-bottom:1px solid #f1f5f9}
.search-item:last-child {border-bottom:none}
.search-item:hover {background:#f1f5f9}
.search-item small {color:var(--text-secondary);display:block;font-size:0.8em;margin-top:2px}
.search-item--consumidor {background:#f8fafc;justify-content:center}
.local-list-btn {display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:6px;padding:10px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#fff;cursor:pointer;text-align:left}
.local-list-btn:hover {background:#f1f5f9}
.btn-icon-sm {width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--danger);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-icon-sm:hover {background:var(--danger-bg)}
.prefix-input {display:flex;align-items:stretch;border:1.5px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.prefix-input__label {display:flex;align-items:center;padding:0 12px;background:#f1f5f9;font-weight:700;color:var(--text-secondary);font-size:0.85rem;flex-shrink:0}
.prefix-input .input-control {border:none;border-radius:0;height:42px}
.prefix-input .input-control:focus {box-shadow:none}
.pdv-section,.pdv-item-grid-container,.pdv-totals-area,.payment-section {box-shadow:var(--shadow-card)}
.pdv-step-wrap {display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0 2px}
.pdv-step-wrap:not(:first-child) {margin-top:2px}
.pdv-step-num {width:24px;height:24px;border-radius:50%;background:var(--brand-primary);color:#fff;font-size:0.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pdv-step-title {font-size:0.95rem;font-weight:700;color:var(--text-primary);letter-spacing:.01em;margin:0}
.pdv-step-title i {color:var(--brand-primary);margin-right:4px}
.pdv-item-table tbody tr:nth-child(even) {background:#fbfcfd}
.pdv-grand-total {background:var(--brand-glow);border-radius:var(--radius-md);padding:10px 12px;margin-top:2px}
@media (max-width:992px) {
    .pdv-top-row,.pdv-product-row,.pdv-bottom-row,.pdv-totals-cols {grid-template-columns:1fr}
}
@media (max-width:576px) {
    .pdv-section {padding:12px 14px}
    .pdv-item-table th,.pdv-item-table td {padding:6px 8px;font-size:0.8rem}
    .payment-line {flex-direction:column;align-items:stretch}
    .payment-method-container,.payment-amount-container,.parcelas-input-container,.payment-remove-container {flex-basis:100%}
    .payment-remove-container {text-align:right}
    .pdv-discount-row {flex-direction:column}
    .pdv-footer-buttons {flex-direction:column}
    .payment-method-select,.payment-amount-input,.parcelas-input {min-height:40px}
    .pdv-grand-total dd {font-size:1.4rem}
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-pdv --- */
body.pagina-pdv .badge-amber {background:var(--warning);color:#1a202c}
body.pagina-pdv .logradouro-result-item {cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:6px;background:#fff}
body.pagina-pdv .logradouro-result-item:hover {background:#f1f5f9}
body.pagina-pdv .result-details {font-size:0.85em;color:var(--text-secondary)}
.border-top { border-top: 1px solid rgba(226, 232, 240, 0.6); }
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; }
.list-group-item { position: relative; display: block; padding: 12px 16px; background-color: transparent; border-bottom: 1px solid rgba(226, 232, 240, 0.6); font-size: 0.85rem; }
.list-group-item:last-child { border-bottom: none; }
.linha-cancelada td { background-color: transparent !important; border-color: rgba(239, 68, 68, 0.2); }
.motivo-cancelamento-destaque { color: var(--danger); font-weight: 700; font-size: 0.95rem; border-left: 4px solid var(--danger); padding: 12px 16px; margin-bottom: 16px; background: rgba(254, 242, 242, 0.9); border-radius: 0 8px 8px 0; }
.badge-cancelamento-mini { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: var(--danger); border-radius: 4px; color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.5px; }
.sidebar-badge { font-size: 0.68rem; transition: all 0.15s ease; min-width: 20px; text-align: center; padding: 2px 7px; }
.badge-nf { background: #7c3aed; color: #fff; }
.nav-item.sidebar-link-empresa { white-space: normal; height: auto; min-height: 44px; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.botao-atualizado { animation: flash-yellow 1s ease-in-out; }
.linha-todos-visualizados { opacity: 0.7; background-color: rgba(236, 253, 245, 0.5) !important; }
.linha-todos-visualizados td { border-color: rgba(16, 185, 129, 0.2) !important; }
.pdf-observation-banner { padding: 12px 20px; width: 100%; text-align: center; font-weight: 600; background: var(--brand-primary); color: #fff; font-size: 0.9rem; border-radius: 12px 12px 0 0; }
.info-envio { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; display: flex; gap: 10px; flex-wrap: wrap; }
.info-envio strong { color: var(--text-primary); font-weight: 600; }
.vn-container { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.botoes-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; }
.botoes-linha.nowrap-cancelamento { flex-wrap: nowrap; overflow-x: auto; }
.btn-icone { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--glass-border); padding: 8px; border-radius: 10px; min-width: 56px; transition: all 0.15s ease-in-out; }
.btn-icone:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-icone .btn { padding: 8px 12px; height: 34px; font-size: 0.95rem; width: 100%; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-icone .visto-por { font-size: 0.65rem; color: var(--text-secondary); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 600; }
#pdf-viewer { background-color: #eef2f6; border-radius: 0 0 16px 16px; }
.toast-notification {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #1e293b;
            color: #fff;
            padding: 14px 20px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            gap: 12px;
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.4s ease;
            z-index: 99999;
            max-width: 420px;
            font-size: 0.85rem;
        }
.toast-notification.show {
            transform: translateY(0);
            opacity: 1;
        }
.toast-notification--success { background: #059669; }
.toast-notification--error { background: #dc2626; }
.toast-notification--info { background: #2563eb; }
@media (max-width: 768px) {
    #tabela-documentos, #tabela-documentos tbody { display: block; width: 100%; }
    #tabela-documentos thead { display: none; }
    #tabela-documentos tr { display: flex; flex-direction: column; margin-bottom: 1.5rem; background: #ffffff; border-radius: 12px; box-shadow: var(--shadow-card); border: 1px solid var(--glass-border); overflow: hidden; }
    #tabela-documentos td { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 16px !important; border-bottom: 1px solid rgba(226, 232, 240, 0.5); text-align: left !important; width: 100%; }
    #tabela-documentos td:last-child { border-bottom: none; background-color: rgba(248, 250, 252, 0.5); }
    #tabela-documentos td::before { content: attr(data-label); font-weight: 700; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
    .vn-container { width: 100%; justify-content: flex-start; }
    .info-envio { flex-direction: column; gap: 4px; }
    .botoes-linha { justify-content: flex-start; width: 100%; gap: 10px; margin-top: 5px; }
    .btn-icone { flex: 1; min-width: 50px; max-width: 80px; }
}

/* --- valores exclusivos desta pagina, escopados --- */
body.pagina-conferencia .linha-cancelada { background-color: rgba(254, 242, 242, 0.8) !important; border-left: 5px solid var(--danger) !important; }
body.pagina-conferencia .linha-cancelada:hover { background-color: rgba(254, 226, 226, 0.9) !important; }
body.pagina-conferencia .linha-nova { animation: slideIn-le 0.3s ease-out, flash-yellow 1.5s ease-in-out; }
body.pagina-conferencia .toast-close-btn {
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.7);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0 4px;
        }
body.pagina-conferencia .toast-close-btn:hover { color: #fff; }
@media (max-width: 768px) {
    body.pagina-conferencia .linha-cancelada { border-left: none !important; border-top: 5px solid var(--danger) !important; }
}
@keyframes flash-yellow { 0% { background-color: transparent; } 50% { background-color: rgba(245,158,11,0.3); } 100% { background-color: transparent; } }
.app-header {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 64px;
            padding: 0 16px;
            background-color: var(--brand-primary);
            color: #ffffff;
        }
.app-header__title {
            font-size: 1.375rem;
            font-weight: 500;
            margin: 0;
        }
.dashboard-menu {
            display: flex;
            gap: 10px;
            padding: 15px 16px;
            background-color: var(--bg-surface);
            border-bottom: 1px solid var(--border-color);
            justify-content: center;
            flex-wrap: wrap;
        }
.menu-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background-color: #ffffff;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: var(--radius-pill);
            font-weight: 600;
            font-size: 0.9rem;
            transition: all var(--transition-fast);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }
.menu-btn.active {
            background-color: var(--brand-primary);
            color: #ffffff;
            border-color: var(--brand-primary);
        }
.menu-btn:hover {
            color: var(--brand-primary);
            border-color: var(--brand-primary);
            text-decoration: none;
        }
.menu-btn.active:hover {
            color: #ffffff;
        }
.container { width: 92%; max-width: 450px; margin: 0 auto; padding-bottom: 40px; }
.card-filtros { background: var(--bg-surface); padding: 20px; margin: 20px 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 15px; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-left: 5px; }
.field-group select, .field-group input[type="date"] { padding: 14px; font-size: 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); outline: none; background: var(--bg-surface); color: var(--text-primary); }
.btn-cam { background: var(--brand-primary); color: #fff; border: none; padding: 16px; font-size: 16px; border-radius: var(--radius-lg); font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-print-romaneio { background: #424242; color: #fff; border: none; padding: 12px; font-size: 14px; border-radius: var(--radius-md); font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 5px; }
.btn-print-romaneio:active { background: #212121; }
#reader-container { position: relative; width: 100%; display: none; margin-bottom: 20px; }
#reader { width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: #000; }
.list-header { font-size: 18px; font-weight: 600; margin: 20px 0 10px 5px; color: var(--brand-primary); }
.item-card { background: var(--bg-surface); padding: 16px; margin-bottom: 12px; border-radius: var(--radius-lg); display: flex; justify-content: space-between; align-items: flex-start; box-shadow: var(--shadow-sm); border-left: 6px solid var(--warning); }
.item-card.done { border-left-color: var(--success); background-color: var(--success-bg); align-items: center; }
.item-content { flex: 1; min-width: 0; }
.item-content b { font-size: 14px; color: var(--brand-primary); display: block; margin-bottom: 3px; }
.item-desc { font-size: 14px; font-weight: 500; display: block; word-break: break-word; color: var(--text-primary); }
.item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 5px; font-weight: 600; }
.badge-p { color: var(--danger); }
.done .badge-p { color: var(--success); }
.btn-falta {
            margin-top: 10px; padding: 10px; background: var(--danger-bg); color: var(--danger);
            border: 1px solid var(--danger); border-radius: var(--radius-sm); font-weight: bold;
            font-size: 11px; cursor: pointer; width: 100%; display: flex;
            align-items: center; justify-content: center; gap: 6px; transition: var(--transition-fast);
        }
.btn-falta:active { background: #ffebee; transform: scale(0.98); }
#modal-exclusao {
            display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
            z-index: 3000; justify-content: center; align-items: center; padding: 20px;
        }
.modal-card {
            background: var(--bg-surface); padding: 24px; border-radius: var(--radius-xl);
            width: 100%; max-width: 350px; text-align: center; box-shadow: var(--shadow-hover);
            animation: popIn 0.3s ease-out;
        }
.modal-icon { font-size: 40px; color: var(--danger); margin-bottom: 15px; }
.modal-text { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
.modal-buttons { display: flex; gap: 10px; }
.modal-btn { flex: 1; padding: 14px; border: none; border-radius: var(--radius-md); font-weight: bold; cursor: pointer; font-size: 14px; transition: var(--transition-fast); }
.modal-btn-cancel { background: #e0e0e0; color: #333; }
.modal-btn-cancel:active { background: #d0d0d0; }
.modal-btn-confirm { background: var(--danger); color: white; }
.modal-btn-confirm:active { background: #8e0018; }
#feedback {
            position: fixed; inset: 0; display: none; flex-direction: column;
            justify-content: center; align-items: center; z-index: 2000;
            color: #fff; text-align: center; padding: 20px; box-sizing: border-box;
        }
.fb-sucesso { background: rgba(27, 94, 32, 0.98); }
.fb-erro { background: rgba(176, 0, 32, 0.98); }
.fb-alerta { background: rgba(255, 143, 0, 0.98); color: #000 !important; }
.fb-icon { font-size: 70px; margin-bottom: 10px; }
.fb-text { font-size: 26px; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.fb-details {
            margin-top: 25px; background: rgba(0,0,0,0.2); padding: 20px; border-radius: var(--radius-lg);
            width: 100%; max-width: 350px; text-align: left; font-size: 18px; font-weight: 600;
            display: flex; flex-direction: column; gap: 12px; border: 2px solid rgba(255,255,255,0.4);
        }

/* --- valores exclusivos desta pagina, escopados em body.pagina-conferencia-box --- */
body.pagina-conferencia-box { background-color: var(--bg-app); }
body.pagina-conferencia-box .modal-title { margin: 0 0 10px 0; color: var(--text-primary); font-size: 20px; }
@keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
.cancelamento-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-pill); color: #ffffff; font-size: 0.7rem; font-weight: 700; white-space: nowrap; animation: pulse-red 2s infinite; }
.linha-nf-disponivel { border-left: 4px solid #7c3aed; }
.nf-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: var(--radius-pill); color: #7c3aed; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.nav-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.nav-pills .nav-link { font-size: 0.85rem; font-weight: 600; padding: 8px 16px; border: 1px solid transparent; color: var(--text-secondary); border-radius: var(--radius-md); background: transparent; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.nav-pills .nav-link.active { color: var(--brand-primary); background: var(--brand-glow); border-color: var(--brand-primary); }
.nav-pills .nav-link:hover:not(.active) { background: rgba(255, 255, 255, 0.5); color: var(--text-primary); }
.acoes-conferencia { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.btn-nf-roxo { background: #7c3aed !important; border-color: #7c3aed !important; color: white !important; }
.btn-nf-roxo:hover { background: #6d28d9 !important; }
.relatorios-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.kanban-container { display: flex; flex-direction: column; gap: 16px; padding: 12px; overflow-y: auto; max-height: 65vh; }
.kanban-column { background: rgba(248, 250, 252, 0.6); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); }
.kanban-column.available-column { background: rgba(255, 243, 224, 0.6); border: 2px dashed #ffb74d; order: -1; }
.kanban-header { padding: 12px 16px; background: rgba(255, 255, 255, 0.8); border-bottom: 1px solid var(--border-color); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: 600; color: var(--brand-primary); display: flex; justify-content: space-between; align-items: center; cursor: pointer; position: sticky; top: 0; z-index: 5; }
.available-column .kanban-header { background: rgba(255, 224, 178, 0.8); color: #e65100; }
.kanban-header .count { background: var(--border-color); color: var(--text-primary); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 0.8rem; }
.kanban-body { padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.kanban-card { background: white; padding: 10px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); cursor: pointer; border: 1px solid var(--border-color); transition: all 0.2s; font-size: 0.85rem; text-align: center; position: relative; padding-right: 30px; }
.kanban-card:hover { box-shadow: var(--shadow-hover); border-color: var(--brand-primary); transform: translateY(-2px); }
.kanban-card.selected { border: 2px solid var(--brand-primary); background: var(--brand-glow); color: var(--brand-primary); font-weight: 600; }
.remove-store-btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--danger-bg); color: var(--danger); cursor: pointer; font-size: 0.7rem; opacity: 0.6; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.remove-store-btn:hover { opacity: 1; background: var(--danger); color: white; }
.available-column .remove-store-btn { display: none; }
.lista-documentos-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--border-color); transition: all 0.2s; }
.lista-documentos-item:hover { background: rgba(255, 255, 255, 0.5); }
.lista-documentos-item:last-child { border-bottom: none; }
.mostruario-table { width: 100%; border-collapse: collapse; }
.mostruario-table th { background: rgba(248, 250, 252, 0.7); padding: 10px 12px; text-align: left; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; border-bottom: 2px solid var(--border-color); }
.mostruario-table td { padding: 10px 12px; border-bottom: 1px solid rgba(226, 232, 240, 0.5); font-size: 0.85rem; }
.mostruario-table tr:hover { background: rgba(255, 255, 255, 0.6); }
@media (max-width: 992px) {
    .acoes-conferencia { justify-content: flex-start; }
    .kanban-body { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .acoes-conferencia { flex-direction: row; width: 100%; }
    .nav-pills { flex-direction: column; gap: 6px; }
    .nav-pills .nav-link { margin-right: 0; text-align: center; justify-content: center; }
    .mostruario-table { font-size: 0.75rem; }
    .mostruario-table th, .mostruario-table td { padding: 6px 8px; }
}

/* --- valores exclusivos desta pagina, escopados em body.pagina-supervisao-conferencia --- */
body.pagina-supervisao-conferencia { overflow: hidden !important; height: 100vh !important; margin: 0; padding: 0; }
html:has(body.pagina-supervisao-conferencia) { overflow: hidden !important; height: 100vh !important; margin: 0; padding: 0; }
body.pagina-supervisao-conferencia .app-layout { height: 100vh !important; overflow: hidden !important; display: flex; width: 100%; }
body.pagina-supervisao-conferencia .main-area { height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; flex: 1; display: flex; flex-direction: column; }
body.pagina-supervisao-conferencia .border-top { border-top: 1px solid var(--border-color); }
body.pagina-supervisao-conferencia .linha-cancelada { background-color: rgba(254, 242, 242, 0.8) !important; border-left: 5px solid var(--danger) !important; }
body.pagina-supervisao-conferencia .linha-cancelada td { color: #b02a37 !important; font-weight: 500; }
body.pagina-supervisao-conferencia .linha-cancelada:hover { background-color: rgba(254, 226, 226, 0.9) !important; }
body.pagina-supervisao-conferencia .info-envio { font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.3; }
body.pagina-supervisao-conferencia .vn-container { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.pagina-supervisao-conferencia .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: 24px; }
body.pagina-supervisao-conferencia .nav-item { flex-shrink: 0 !important; min-height: 42px; padding: 10px 16px !important; margin-bottom: 4px; display: flex; align-items: center; border-radius: 8px; text-decoration: none; line-height: 1.2; }
body.pagina-supervisao-conferencia .nav-item i { margin-right: 12px; font-size: 1.1rem; width: 20px; text-align: center; }
body.pagina-supervisao-conferencia .nav-item.sidebar-link-empresa { white-space: normal; height: auto; line-height: 1.25; }
body.pagina-supervisao-conferencia .sidebar-badge { font-size: 0.68rem; transition: all 0.3s ease; min-width: 20px; text-align: center; padding: 2px 7px; margin-left: auto; }
body.pagina-supervisao-conferencia .botao-atualizado { animation: flash-yellow 1.5s ease-in-out; }
@media (max-width: 576px) {
    body.pagina-supervisao-conferencia .vn-container { flex-direction: column; align-items: flex-start; }
}
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }

/* ==========================================================
   privacidade.html -- Fase 4 lote erro/legal (20/10/2026)
   Pagina publica de politica de privacidade (Google Play), com
   design proprio (cartao branco simples), intencionalmente
   diferente do tema da aplicacao. Tudo escopado em
   body.pagina-privacidade por seguranca (colide com varios
   defaults genericos do sistema: body, .container, a).
   ========================================================== */

        body.pagina-privacidade {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #1A202C;
            background-color: #F5F7FA;
            margin: 0;
            padding: 20px;
        }
        body.pagina-privacidade .container {
            max-width: 800px;
            margin: 0 auto;
            background: #FFFFFF;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border: 1px solid #E2E8F0;
        }
        body.pagina-privacidade h1 {
            color: #1B331A;
            font-size: 28px;
            margin-bottom: 5px;
        }
        body.pagina-privacidade h2 {
            color: #1B331A;
            font-size: 20px;
            margin-top: 30px;
            border-bottom: 2px solid #F5F7FA;
            padding-bottom: 8px;
        }
        body.pagina-privacidade .date {
            color: #64748B;
            font-size: 14px;
            margin-bottom: 30px;
            font-weight: 500;
        }
        body.pagina-privacidade p, body.pagina-privacidade li {
            color: #475569;
            font-size: 15px;
        }
        body.pagina-privacidade ul {
            padding-left: 20px;
        }
        body.pagina-privacidade a {
            color: #1B331A;
            text-decoration: underline;
        }
    


/* ==========================================================
   privacidade.html -- abas (App de Montagem / App de Entrega)
   adicionado 20/10/2026 a pedido do Junior, pois o link da
   politica de privacidade vai para o Google Play dos dois apps.
   ========================================================== */
body.pagina-privacidade .privacy-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid #E2E8F0;
}
body.pagina-privacidade .privacy-tab-btn {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #64748B;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
body.pagina-privacidade .privacy-tab-btn:hover {
    color: #1B331A;
}
body.pagina-privacidade .privacy-tab-btn.active {
    color: #1B331A;
    border-bottom-color: #1B331A;
}
body.pagina-privacidade .privacy-tab-panel {
    display: none;
}
body.pagina-privacidade .privacy-tab-panel.active {
    display: block;
}
@media (max-width: 480px) {
    body.pagina-privacidade .privacy-tabs {
        gap: 0;
    }
    body.pagina-privacidade .privacy-tab-btn {
        flex: 1;
        padding: 10px 8px;
        font-size: 13px;
        text-align: center;
    }
}

/* ==========================================================
   Dashboard de Vendas / Dashboard de Supervisores -- v2 (20/10/2026,
   pedido do Junior: 3 regionais, meta mensal editavel por loja, ranking,
   filtro so' por mes/ano, financeiro dentro do dashboard de vendas).
   Classes com prefixo "dv-" (dashboard-vendas) sao compartilhadas pelas
   2 telas (scopadas em body.pagina-dashboard-vendas E
   body.pagina-dashboard-supervisores juntas, ver seletor combinado
   abaixo) -- nao reaproveitam nada do .kpi-card/.periodo-botoes antigos
   (ficam intocados, mas sem uso nessas 2 telas a partir de agora).
   ========================================================== */

body.pagina-dashboard-vendas .dv-warning-banner,
body.pagina-dashboard-supervisores .dv-warning-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--warning-bg); border: 1px solid var(--warning);
    color: #92400e; border-radius: var(--radius-md);
    padding: 12px 16px; margin-bottom: 16px; font-size: 0.9rem;
}
body.pagina-dashboard-vendas .dv-warning-banner i,
body.pagina-dashboard-supervisores .dv-warning-banner i {
    color: var(--warning); font-size: 1.1rem; flex-shrink: 0;
}

body.pagina-dashboard-vendas .dv-filtro-mes,
body.pagina-dashboard-supervisores .dv-filtro-mes {
    display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
body.pagina-dashboard-vendas .dv-filtro-campo,
body.pagina-dashboard-supervisores .dv-filtro-campo {
    display: flex; flex-direction: column; gap: 4px;
}
body.pagina-dashboard-vendas .dv-filtro-campo label,
body.pagina-dashboard-supervisores .dv-filtro-campo label {
    font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase;
}
body.pagina-dashboard-vendas .dv-filtro-campo select,
body.pagina-dashboard-vendas .dv-filtro-campo input,
body.pagina-dashboard-supervisores .dv-filtro-campo select,
body.pagina-dashboard-supervisores .dv-filtro-campo input {
    min-width: 160px;
}

body.pagina-dashboard-vendas .dv-summary-bar,
body.pagina-dashboard-supervisores .dv-summary-bar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
    background: var(--bg-surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow-card);
}
body.pagina-dashboard-vendas .dv-summary-title h2,
body.pagina-dashboard-supervisores .dv-summary-title h2 {
    margin: 0 0 2px 0; font-size: 1.3rem; font-weight: 800; color: var(--text-primary);
}
body.pagina-dashboard-vendas .dv-summary-title small,
body.pagina-dashboard-supervisores .dv-summary-title small {
    color: var(--text-secondary); font-size: 0.85rem;
}
body.pagina-dashboard-vendas .dv-summary-stats,
body.pagina-dashboard-supervisores .dv-summary-stats {
    display: flex; gap: 32px; flex-wrap: wrap;
}
body.pagina-dashboard-vendas .dv-stat,
body.pagina-dashboard-supervisores .dv-stat {
    text-align: right;
}
body.pagina-dashboard-vendas .dv-stat-value,
body.pagina-dashboard-supervisores .dv-stat-value {
    font-size: 1.4rem; font-weight: 800; color: var(--text-primary); line-height: 1.2;
}
body.pagina-dashboard-vendas .dv-stat-label,
body.pagina-dashboard-supervisores .dv-stat-label {
    font-size: 0.78rem; color: var(--text-secondary); text-transform: lowercase;
}
body.pagina-dashboard-vendas .dv-stat-value.dv-ok,
body.pagina-dashboard-supervisores .dv-stat-value.dv-ok { color: var(--success); }
body.pagina-dashboard-vendas .dv-stat-value.dv-abaixo,
body.pagina-dashboard-supervisores .dv-stat-value.dv-abaixo { color: var(--danger); }

body.pagina-dashboard-vendas .dv-actions-row {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 14px;
}
body.pagina-dashboard-vendas .dv-tabs {
    display: flex; gap: 4px; background: #f1f5f9; border-radius: var(--radius-pill); padding: 4px;
}
body.pagina-dashboard-vendas .dv-tab-btn {
    appearance: none; border: none; background: none; cursor: pointer;
    padding: 7px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.88rem;
    color: var(--text-secondary);
}
body.pagina-dashboard-vendas .dv-tab-btn.active {
    background: var(--bg-surface); color: var(--brand-primary); box-shadow: var(--shadow-sm);
}
body.pagina-dashboard-vendas .dv-actions-right { display: flex; gap: 8px; flex-wrap: wrap; }
body.pagina-dashboard-vendas .dv-tab-panel { display: none; }
body.pagina-dashboard-vendas .dv-tab-panel.active { display: block; }

body.pagina-dashboard-vendas .dv-card-table { padding: 0; overflow: hidden; }
body.pagina-dashboard-vendas .dv-card-table .table-wrapper { border: none; border-radius: 0; }
body.pagina-dashboard-vendas .dv-table,
body.pagina-dashboard-supervisores .dv-table {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
}
body.pagina-dashboard-vendas .dv-table thead th,
body.pagina-dashboard-supervisores .dv-table thead th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); padding: 10px 14px; background: #f8fafc;
    border-bottom: 2px solid var(--border-color); text-align: left; white-space: nowrap;
}
body.pagina-dashboard-vendas .dv-table td,
body.pagina-dashboard-supervisores .dv-table td {
    padding: 10px 14px; border-bottom: 1px solid #f0f0f0; white-space: nowrap;
}
body.pagina-dashboard-vendas .dv-regional-row {
    cursor: pointer; background: #f8fafc; font-weight: 600;
}
body.pagina-dashboard-vendas .dv-regional-row:hover { background: #f1f5f9; }
body.pagina-dashboard-vendas .dv-loja-row:hover { background: #f8fafc; }
body.pagina-dashboard-vendas .dv-loja-nome { padding-left: 32px !important; color: var(--text-secondary); }
body.pagina-dashboard-vendas .dv-loja-nome i { color: var(--text-secondary); font-size: 0.8rem; margin-right: 4px; }
body.pagina-dashboard-vendas .dv-chevron {
    display: inline-block; font-size: 0.75rem; margin-right: 6px; transition: transform 0.15s ease;
    color: var(--text-secondary);
}
body.pagina-dashboard-vendas .dv-chevron.dv-chevron-aberta { transform: rotate(90deg); }
body.pagina-dashboard-vendas .dv-loja-count,
body.pagina-dashboard-supervisores .dv-loja-count { color: var(--text-secondary); font-weight: 400; }
body.pagina-dashboard-vendas .dv-sem-meta { color: var(--text-secondary); font-style: italic; font-size: 0.82rem; }
body.pagina-dashboard-vendas .dv-total-row { background: #f8fafc; border-top: 2px solid var(--border-color); }
body.pagina-dashboard-vendas .dv-total-row td { border-bottom: none; }

body.pagina-dashboard-vendas .dv-ritmo-bar,
body.pagina-dashboard-supervisores .dv-ritmo-bar {
    position: relative; width: 110px; height: 8px; background: #e2e8f0; border-radius: var(--radius-pill);
    overflow: visible;
}
body.pagina-dashboard-supervisores .dv-ritmo-bar-lg { width: 100%; height: 10px; margin: 10px 0 16px 0; }
body.pagina-dashboard-vendas .dv-ritmo-fill,
body.pagina-dashboard-supervisores .dv-ritmo-fill {
    height: 100%; background: var(--brand-primary); border-radius: var(--radius-pill);
}
body.pagina-dashboard-vendas .dv-ritmo-marker,
body.pagina-dashboard-supervisores .dv-ritmo-marker {
    position: absolute; top: -3px; width: 2px; height: 14px; background: var(--text-primary);
}

body.pagina-dashboard-vendas .dv-badge-pct,
body.pagina-dashboard-supervisores .dv-badge-pct {
    display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.82rem;
    background: #f1f5f9; color: var(--text-secondary);
}
body.pagina-dashboard-vendas .dv-badge-pct.dv-ok,
body.pagina-dashboard-supervisores .dv-badge-pct.dv-ok { background: var(--success-bg); color: var(--success); }
body.pagina-dashboard-vendas .dv-badge-pct.dv-abaixo,
body.pagina-dashboard-supervisores .dv-badge-pct.dv-abaixo { background: var(--danger-bg); color: var(--danger); }

body.pagina-dashboard-vendas .dv-table-legend {
    margin: 0; padding: 10px 16px; font-size: 0.78rem; color: var(--text-secondary);
    background: #f8fafc; border-top: 1px solid var(--glass-border);
}

body.pagina-dashboard-vendas .dv-ranking-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;
}

body.pagina-dashboard-vendas .dv-modal-subtitulo {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 18px 0 10px 0;
}
body.pagina-dashboard-vendas .dv-modal-subtitulo:first-child { margin-top: 0; }
body.pagina-dashboard-vendas .dv-regionais-nomes {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}

body.pagina-dashboard-supervisores .dv-regionais-supervisores {
    display: flex; flex-direction: column; gap: 16px;
}
body.pagina-dashboard-supervisores .dv-card-regional { padding: 20px 22px; }
body.pagina-dashboard-supervisores .dv-regional-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 4px;
}
body.pagina-dashboard-supervisores .dv-regional-header h3 {
    margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text-primary);
}
body.pagina-dashboard-supervisores .dv-regional-header h3 i { color: var(--brand-primary); margin-right: 6px; }
body.pagina-dashboard-supervisores .dv-regional-header-stats {
    display: flex; gap: 18px; align-items: center; font-size: 0.88rem; color: var(--text-secondary); flex-wrap: wrap;
}
body.pagina-dashboard-supervisores .dv-regional-header-stats strong { color: var(--text-primary); }
body.pagina-dashboard-supervisores .dv-regional-colunas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px;
}
body.pagina-dashboard-supervisores .dv-regional-coluna h4 {
    font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;
    margin: 0 0 8px 0;
}
body.pagina-dashboard-supervisores .dv-regional-coluna h4 i { color: var(--brand-primary); margin-right: 6px; }

@media (max-width: 768px) {
    body.pagina-dashboard-vendas .dv-summary-bar,
    body.pagina-dashboard-supervisores .dv-summary-bar { flex-direction: column; align-items: flex-start; }
    body.pagina-dashboard-vendas .dv-summary-stats,
    body.pagina-dashboard-supervisores .dv-summary-stats { gap: 18px; width: 100%; justify-content: space-between; }
    body.pagina-dashboard-vendas .dv-stat,
    body.pagina-dashboard-supervisores .dv-stat { text-align: left; }
    body.pagina-dashboard-vendas .dv-ranking-grid { grid-template-columns: 1fr; }
    body.pagina-dashboard-supervisores .dv-regional-colunas { grid-template-columns: 1fr; }
    body.pagina-dashboard-vendas .dv-actions-row { flex-direction: column; align-items: stretch; }
    body.pagina-dashboard-vendas .dv-actions-right { justify-content: stretch; }
    body.pagina-dashboard-vendas .dv-actions-right .btn { flex: 1; }
}

/* 20/10/2026 (pedido do Junior, item 8 -- Configuracoes em abas): layout
   das abas + iframe de cada ferramenta consolidada (Dispositivos, Cor por
   Loja, Usuarios, Limpeza Documentos, Grupos WhatsApp, NF Pendente). Ver
   templates/configuracoes.html + static/js/configuracoes.js. */
body.pagina-configuracoes .content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
}
body.pagina-configuracoes .cfg-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    margin-bottom: 0;
    flex-shrink: 0;
}
body.pagina-configuracoes .cfg-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
body.pagina-configuracoes .cfg-tab-btn:hover {
    color: var(--brand-primary);
}
body.pagina-configuracoes .cfg-tab-btn.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}
body.pagina-configuracoes .cfg-panels {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}
body.pagina-configuracoes .cfg-tab-panel {
    display: none;
    height: 100%;
    min-height: 60vh;
}
body.pagina-configuracoes .cfg-tab-panel.active {
    display: block;
}
body.pagina-configuracoes .cfg-iframe {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    border: none;
    display: block;
}
@media (max-width: 768px) {
    body.pagina-configuracoes .cfg-tab-btn { font-size: 0.8rem; padding: 8px 10px; }
}