/* ══════════════════════════════════════════════════════════════════
 * BRAPZ — TEMA CLARO ÚNICO · polimento de 04/11/2026
 *
 * Carregado por menu_lateral.php, logo depois do <style> da lateral,
 * em TODAS as telas de gestão (74 telas incluem o menu). Como chega
 * depois do <style> de cada tela, ele vence as variáveis escuras que
 * as telas ainda definem inline (--bg, --bg-2, --bd, --text-3…) sem
 * que nenhuma tela precise ser reescrita.
 *
 * Direção (pedido do dono 04/11): polido, minimalista, como o Plena
 * Menu. Fundo claro, uma cor de marca, texto escuro legível, cartão
 * branco com borda de 1px, sombra quase nenhuma. Sem brilho, sem
 * gradiente decorativo, sem desfoque, sem animação de entrada.
 *
 * Regras de ouro:
 *  - texto colorido pequeno usa as tintas (-ink): a cor pura (#22c55e,
 *    #F29715) não lê em fonte miúda sobre branco;
 *  - sobre o laranja da marca o texto é ESCURO (#1a1205): branco sobre
 *    #F29715 dá 2,3:1, escuro dá 7,9:1;
 *  - [hidden] continua precisando da própria regra em cada gaveta
 *    (não existe reset global de display).
 * ══════════════════════════════════════════════════════════════════ */

:root{
    /* superfícies */
    --bg:        #f5f6f8;   /* fundo da página            */
    --bg-1:      #f8f9fb;
    --bg2:       #ffffff;   /* cartões                    */
    --bg-2:      #ffffff;
    --bg3:       #f3f4f7;   /* cabeçalhos, wells, hover   */
    --bg-3:      #f3f4f7;
    --bg4:       #e9ebf0;   /* hover forte                */
    --bg-4:      #e9ebf0;
    --bg-elev:   #ffffff;
    --bg-glass:  #ffffff;
    --bg-glass-2:#ffffff;
    --sidebar-bg:#ffffff;
    --surface:   #ffffff;
    --surface2:  #f3f4f7;

    /* texto */
    --text:      #14161b;
    --text-2:    #3c4256;
    --text-3:    #5c6472;
    --muted:     #5c6472;   /* 4,5:1 sobre branco (AA)    */
    --muted-2:   #8b91a0;
    --tx:        #14161b;
    --tx2:       #5c6472;
    --mu:        #5c6472;

    /* bordas */
    --border:    rgba(17, 21, 30, .08);
    --border2:   rgba(17, 21, 30, .14);
    --border-2:  rgba(17, 21, 30, .14);
    --border3:   rgba(17, 21, 30, .22);
    --border-3:  rgba(17, 21, 30, .22);
    --bd:        rgba(17, 21, 30, .08);
    --bd2:       rgba(17, 21, 30, .14);
    --bd3:       rgba(17, 21, 30, .22);
    --line:      rgba(17, 21, 30, .08);

    /* marca Big Massas */
    --brand:       #F29715;
    --brand-light: #F4B037;
    --brand-dark:  #d68410;
    --brand-deep:  #c97808;
    --brand-glow:  #F4B037;
    --brand-fire:  #e8590c;
    --brand-bg:    rgba(242, 151, 21, .10);
    --brand-bg-2:  rgba(242, 151, 21, .16);
    --brand-b:     rgba(242, 151, 21, .30);
    --brand-b-2:   rgba(242, 151, 21, .45);
    --brand-ink:   #a35f04;  /* laranja legível em texto pequeno */
    --on-brand:    #1a1205;  /* texto sobre a cor da marca       */
    --br:  #F29715; --brl: #F4B037; --brd: #d68410; --brg: #F4B037;
    --accent:      #F29715;

    /* compat nomes antigos */
    --yellow:    #F29715;  --yellow-bg: rgba(242,151,21,.10); --yellow-b: rgba(242,151,21,.30); --yellow-ink:#a35f04;
    --orange:    #ea7c12;  --orange-bg: rgba(234,124,18,.10); --orange-b: rgba(234,124,18,.30); --orange-ink:#9a4e07;
    --or:        #9a4e07;  --yl: #a35f04;

    /* semânticas (cor pura para fundo/ícone grande; -ink para texto) */
    --green:     #16a34a; --green-light:#15803d; --green-bg: rgba(22,163,74,.10); --green-b: rgba(22,163,74,.30); --green-ink:#15803d; --gn:#15803d;
    --red:       #dc2626; --red-light:  #b91c1c; --red-bg:   rgba(220,38,38,.08);  --red-b:   rgba(220,38,38,.28);  --red-ink:  #b91c1c; --rd:#b91c1c;
    --blue:      #F29715; --blue-bg:    rgba(242,151,21,.10); --blue-b: rgba(242,151,21,.30); --blue-ink: #a35f04; --bl:#a35f04;   /* a marca não usa azul */
    --purple:    #9333ea; --purple-bg:  rgba(147,51,234,.09); --purple-b: rgba(147,51,234,.28); --purple-ink:#7e22ce; --pu:#7e22ce; --pp:#7e22ce;
    --teal:      #0d9488; --teal-bg:    rgba(13,148,136,.09); --teal-b: rgba(13,148,136,.28); --teal-ink:#0f766e; --tl:#0f766e; --tll:#0d9488; --tlb:rgba(13,148,136,.28);
    --danger:    #dc2626; --success: #16a34a; --warn: #d97706;

    /* aliases do app do funcionário */
    --bg-1: #f8f9fb; --bg-2: #ffffff; --bg-3: #f3f4f7; --bg-4: #e9ebf0;
    --brand-bg-2: rgba(242,151,21,.16);

    /* esquema de 3 letras das telas de estoque/cotação/transferência:
       xx = cor, xxl = tinta (texto), xxb = fundo, xxbb = borda. No escuro o
       "l" era a cor clara (#4ade80); no claro é a tinta, senão o texto some. */
    --gnl: #15803d; --gnb: rgba(22,163,74,.10);  --gnbb: rgba(22,163,74,.30);  --gb: rgba(22,163,74,.10);  --gbd: rgba(22,163,74,.30);  --gn-bg: rgba(22,163,74,.10);  --gn-bd: rgba(22,163,74,.30);
    --rdl: #b91c1c; --rdb: rgba(220,38,38,.08);   --rdbb: rgba(220,38,38,.28);   --rb: rgba(220,38,38,.08);   --rbd: rgba(220,38,38,.28);   --rd-bg: rgba(220,38,38,.08);   --rd-bd: rgba(220,38,38,.28);
    --yll: #a35f04; --ylb: rgba(242,151,21,.10);  --ylbb: rgba(242,151,21,.30);
    --yw: #F29715;  --ywl: #a35f04; --ywb: rgba(242,151,21,.10); --ywbb: rgba(242,151,21,.30);
    --orl: #9a4e07; --orb: rgba(234,124,18,.10);  --orbb: rgba(234,124,18,.30);
    --bll: #a35f04; --blb: rgba(242,151,21,.10);  --blbb: rgba(242,151,21,.30); --bl-bg: rgba(242,151,21,.10); --bl-bd: rgba(242,151,21,.30);
    --tlbb: rgba(13,148,136,.28);
    --pul: #7e22ce; --pub: rgba(147,51,234,.09);  --pubb: rgba(147,51,234,.28);
    --ppl: #7e22ce; --ppb: rgba(147,51,234,.09);  --ppbb: rgba(147,51,234,.28);
    --brb: rgba(242,151,21,.10); --brbb: rgba(242,151,21,.30);
    --amber: #d97706; --amber2: #f59e0b; --amber-d: #b45309; --amber-bg: rgba(217,119,6,.10); --amber-b: rgba(217,119,6,.30);
    --cyan: #0891b2; --cyan-light: #0e7490; --purple-light: #7e22ce; --fire: #e8590c; --accent-alert: #b91c1c;
    --gr: #5c6472; --mut: #5c6472; --mu2: #8b91a0; --tx3: #5c6472; --bd4: rgba(17,21,30,.30);
    --card: #ffffff; --card2: #f8f9fb; --card3: #f3f4f7; --card-bg: #ffffff;
    --surface-0: #f5f6f8; --surface-1: #ffffff; --surface-2: #f3f4f7; --surface-3: #e9ebf0;
    --radius: 14px; --radius-sm: 10px;
    /* largura da lateral: telas como Lançamentos usam var(--sb-w) sem definir */
    --sb-w: 240px; --sb: 240px; --sidebar: 240px;
    --sh-card: 0 1px 2px rgba(17,21,30,.04); --sh-1: 0 1px 2px rgba(17,21,30,.04); --sh-brasa: none;
    --rd-glow: none; --gn-glow: none; --aglow: none; --asoft: rgba(242,151,21,.10);

    /* sombras: quase nenhuma — a borda de 1px faz o trabalho */
    --shadow-sm:  0 1px 2px rgba(17,21,30,.04);
    --shadow:     0 1px 2px rgba(17,21,30,.04), 0 6px 18px -12px rgba(17,21,30,.14);
    --shadow-md:  0 4px 12px -6px rgba(17,21,30,.14);
    --shadow-lg:  0 12px 30px -16px rgba(17,21,30,.22);
    --shadow-1:   0 1px 2px rgba(17,21,30,.04);
    --shadow-2:   0 1px 2px rgba(17,21,30,.04), 0 6px 18px -12px rgba(17,21,30,.14);
    --shadow-3:   0 4px 12px -6px rgba(17,21,30,.14);
    --shadow-4:   0 12px 30px -16px rgba(17,21,30,.22);
    --shadow-cinema: 0 12px 30px -16px rgba(17,21,30,.22);
    --shadow-brand:  none;
    --glow-brand: none; --glow-brand-strong: none; --glow-red: none; --glow-green: none;

    /* tipografia: uma família só */
    --font-body:    'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --t-fast: .12s; --t: .15s; --t-slow: .2s;
    --ease: cubic-bezier(.2, .7, .25, 1);
}

/* ─── base ───────────────────────────────────────────────────────── */
html{ color-scheme: light; }
body{
    background: var(--bg) !important;
    background-image: none !important;
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
/* halos e "calor ambiente" desenhados em pseudo-elementos do body */
body::before, body::after{ display: none !important; }
::selection{ background: var(--brand); color: #1a1205; }

/* títulos: Sora, sem a Fredoka arredondada */
h1, h2, h3, h4, .f-heading, .display, .titulo-marca{
    font-family: var(--font-body) !important;
    font-weight: 700;
    letter-spacing: -.01em;
}
.f-mono, [class*="mono"]{ font-family: var(--font-body) !important; font-variant-numeric: tabular-nums; }

/* ─── efeitos fora ───────────────────────────────────────────────── */
/* animações de entrada, pulsos, varreduras, flutuações: todas param.
   O que gira para dizer "carregando" continua (spinner/loader). */
*:not([class*="spin"]):not([class*="load"]):not(.bm-ico--loader-circle),
*:not([class*="spin"]):not([class*="load"])::before,
*:not([class*="spin"]):not([class*="load"])::after{
    animation: none !important;
}
*, *::before, *::after{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
}
/* partículas, brasas, órbitas, varreduras de luz, linhas de varredura */
#canvas-bg, canvas.bg, .particles, .brasas,
[class*="particle"], [class*="orbit"], [class*="ember"], [class*="brasa"],
[class*="scanline"], [class*="sweep"], [class*="shimmer"], [class*="glow-"],
.brz-fire, .brz-fogo, .brz-linha-fogo, .logo-pulse{
    display: none !important;
}
/* gradientes decorativos em superfícies viram cor chapada */
body, .main, .content, .wrap, .topbar, .card, .kpi, .panel, .box, .widget, .tile, .stat,
.mod, .qa, .hero, .exec-card, .command-card, .insight,
[class*="hero"], [class*="banner"], [class*="topbar"], [class*="-card"], [class*="card-"],
[class*="kpi"], [class*="panel"], [class*="header"]{
    background-image: none !important;
}
.card, .kpi, .panel, .box, .widget, .mod, .qa, .insight, .command-card,
[class*="-card"]:not(.card-h), [class*="card-"]:not(.card-h):not(.card-hd){
    box-shadow: var(--shadow-sm) !important;
    filter: none !important;
}
.card:hover, .kpi:hover, .mod:hover, .qa:hover, .insight:hover, .command-card:hover,
[class*="-card"]:hover{ transform: none !important; }

/* ─── botões da marca: chapados, texto escuro ───────────────────── */
.btn-primary, .btn-cta, .btn-novo, .btn-salvar, .bn2, .btn-brand, .btn.primary,
.exec-btn:not(.secondary), .btn-additem{
    background: var(--brand) !important;
    background-image: none !important;
    color: #1a1205 !important;
    border-color: var(--brand) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.btn-primary:hover, .btn-cta:hover, .btn-novo:hover, .btn-salvar:hover, .bn2:hover, .btn-brand:hover, .btn.primary:hover{
    filter: brightness(.96) !important;
    transform: none !important;
}
.btn-primary::before, .btn-primary::after, .btn-cta::before, .btn-cta::after,
.bn2::before, .bn2::after{ display: none !important; }

/* ─── campos e tabelas: linha de base (classe da tela vence) ──────── */
input, select, textarea, button{ font-family: var(--font-body); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea{
    color-scheme: light;
    background-color: #fff;
    border: 1px solid var(--border2);
    border-radius: 10px;
    color: var(--text);
}
:is(a, button, input, select, textarea, summary):focus-visible{
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
table{ border-collapse: collapse; }
th{ color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
th, td{ border-bottom: 1px solid var(--border); }
tr:hover td{ background: var(--bg3); }

/* ─── rolagem discreta ───────────────────────────────────────────── */
*{ scrollbar-width: thin; scrollbar-color: rgba(17,21,30,.18) transparent; }
*::-webkit-scrollbar{ width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb{ background: rgba(17,21,30,.18); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(17,21,30,.32); }
*::-webkit-scrollbar-track{ background: transparent; }

/* ─── avisos e toasts: uma cor só, sem tarja lateral ─────────────── */
.toast{ background: #fff; border: 1px solid var(--border2); color: var(--text); box-shadow: var(--shadow-lg); }
.alert, .aviso, .msg, .flash{ border-left-width: 1px !important; }

/* ─── sobras escuras conhecidas (fundo fixo que a tela não puxa de variável) ── */
.topbar{ background: var(--bg) !important; border-color: var(--border) !important; }
.card-header, .card-hd{ background: var(--bg3) !important; color: var(--text) !important; }
.fa-panel, .panel, .blk.sub, .palv-card, .cal-cell, .summary-box, .user-stats, .perm-cat-header,
.rsm-card, .rsm-stat, .resumo-parc, .forn-drop, .dropnota, .pc, .cc-fatura, .cc-anu, .cc-melhor,
.ing-combo-list, .prio-popover, .jrn-box, .ac-hint, .tcat-bar{ background-color: #fff !important; color: var(--text) !important; }
.dia-sep td{ background: var(--bg3) !important; color: var(--text-2) !important; }
.modal-overlay, .modal-bg, .modal-ov, .mnf-bg, .jrn-bg, .cfe-bg{ background: rgba(17,21,30,.45) !important; backdrop-filter: none !important; }
.modal, .modal-content, .modal-box, .modal-card, .dialog{ background-color: #fff !important; color: var(--text) !important; }

/* avisos: o texto claro do tema escuro (#4ade80) vira tinta legível */
.alert.ok, .msg-box.ok, .toast.ok, .rh-toast.ok, .alert.success, .alert-success{ color: var(--green-ink) !important; }
.alert.err, .alert.erro, .alert.error, .msg-box.erro, .toast.err, .rh-toast.err, .alert-danger{ color: var(--red-ink) !important; }
.alert.warn, .alert.aviso, .alert-warning{ color: var(--brand-ink) !important; }
.alert.info, .alert-info{ color: var(--text-2) !important; }

/* botões coloridos: chapados, sem gradiente nem brilho */
.btn-yellow, .btn-blue, .btn-laranja, .btn-marca{ background: var(--brand) !important; background-image: none !important; color: #1a1205 !important; border-color: var(--brand) !important; box-shadow: none !important; }
.btn-green, .btn-success, .btn-verde, .btn-ok{ background: var(--green) !important; background-image: none !important; color: #fff !important; border-color: var(--green) !important; box-shadow: none !important; }
.btn-red, .btn-vermelho, .btn-excluir{ background: var(--red) !important; background-image: none !important; color: #fff !important; border-color: var(--red) !important; box-shadow: none !important; }
.btn-yellow:hover, .btn-blue:hover, .btn-green:hover, .btn-success:hover, .btn-red:hover{ filter: brightness(.95) !important; transform: none !important; }

/* a barrinha vertical colorida (border-left) está vetada pelo dono em aviso,
   toast, cartão e linha de status — vira a mesma borda fina do resto */
.toast, .rh-toast, .msg-box, .alert, .aviso, .aviso-pago, .flash, .notice, .callout,
.sol-card, .sol-row, .ff-card, .cfe-av, .hist-item, .secao-cat, .razao, .kp, .cc-row,
.assinatura-display, .dia-sep.hoje td, [class*="alert-"], [class*="toast-"]{ border-left-width: 1px !important; }

/* ─── celular (polimento 04/11): o que toda tela precisa e poucas fazem ─── */
@media (max-width: 960px){
    /* a lateral vira gaveta: o conteúdo ocupa a tela inteira, sem herdar a largura do desktop */
    .main{ margin-left: 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; }
    .content, .wrap, .container, .page, .conteudo{ max-width: 100% !important; min-width: 0 !important; }
    /* barra do topo com vários botões: quebra linha em vez de vazar */
    .topbar{ height: auto !important; min-height: 0 !important; flex-wrap: wrap !important; row-gap: 8px; }
    .topbar h1, .topbar .tb-titulo{ font-size: 19px !important; }
}
@media (max-width: 760px){
    /* iPhone não dá zoom ao focar o campo: 16px é o mínimo que o Safari aceita */
    /* :not(#brz-a) só sobe a especificidade (2,0,1): vence o ".tela select{font-size:13px!important}" das telas */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not(#brz-a):not(#brz-b),
    select:not(#brz-a):not(#brz-b), textarea:not(#brz-a):not(#brz-b){ font-size: 16px !important; }
    .main *{ box-sizing: border-box; }
    img, video, canvas, iframe{ max-width: 100%; }
    pre, code{ white-space: pre-wrap; word-break: break-word; }
    /* tabela larga rola dentro dela mesma, não arrasta a página */
    table{ display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .modal, .modal-content, .modal-box, .modal-card, .dialog{ max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; }
    /* alvo de toque digno em botão e link de ação */
    .btn, button:not(.ml-toggle):not(.sfooter), a.btn, input[type=submit]{ min-height: 42px; }
}

/* ─── impressão ──────────────────────────────────────────────────── */
@media print{
    body{ background: #fff !important; color: #000 !important; }
    .sidebar, .topbar, .ml-toggle, .ml-backdrop, .nav-bottom, .nav-bottom-mobile, .no-print{ display: none !important; }
    .main{ margin-left: 0 !important; }
    .card, .kpi, .grade, .holerite{ box-shadow: none !important; }
}

/* botão flutuante "Menu" do config.php nas telas sem lateral: era preto */
.bm-fab-menu{background:#fff !important;color:var(--brand-ink) !important;border-color:var(--border2) !important;box-shadow:var(--shadow-md) !important}