/* =============================================================
 * ORIENTE PORTAL · pele 2026 (07/10/2026) — Fase 1 da nova identidade
 * -------------------------------------------------------------
 * Carregado por ÚLTIMO. É só aparência, por cima do styles.css, do
 * liquid-glass.css (og.glass, legado a descontinuar) e da casca.css:
 *  - fundo chapado claro, sem gradientes nem anéis;
 *  - barra superior CLARA (branca) como no protótipo "Oriente CRM no centro";
 *  - cartões/painéis brancos de borda suave (sem vidro, sem blur, sem brilho);
 *  - botões, campos, pílulas, tabelas e abas no desenho do e-mail/Equipe novos;
 *  - cabeçalho de título das telas some: fica só a linha de ações.
 * Os tokens --og-* são redefinidos aqui para o og.glass virar "plano" em
 * todas as 120 telas de uma vez, sem mexer no markup. Fase 2 ajusta tela a tela.
 * ============================================================= */

:root{
  --bg:#f7f8f7; --panel:#ffffff; --card:#ffffff;
  /* 21/10/2026 (D9, decisão do Pablo às 23h: os tokens de contraste valem para o portal inteiro): o cinza fraco --ink-3 era #8a9893 (3,0:1 no branco) e passa a
     #647370 (5,0:1); o cinza antigo fica em --ink-deco, só para separadores e enfeites (nunca texto). O botão
     principal usa --brand-strong #077c7a (5,0:1 com branco; o --accent dava 3,7:1). --good escurece para o selo
     verde sobre --good-soft (5,2:1). No escuro nada muda. */
  --ink:#17221e; --ink-2:#5b6b65; --ink-3:#647370; --ink-deco:#8a9893; --muted:#5b6b65;
  --line:#e4e8e6; --line-soft:#eef1f0; --line-2:#d3dcd9;
  --bg-2:#f7faf9; --hover:#f1f5f4; --chip:#f1f4f3; --input:#ffffff; --search:#f3f6f5; --photo:#ffffff; --on-accent:#ffffff;
  --accent:#0a9492; --brand-strong:#077c7a; --accent-deep:#06716f; --accent-ink:#06716f; --accent-soft:#e0f5f4; --accent-50:#effaf9; --accent-line:#cfe6e4; --accent-line-2:#b9dedc;
  --lime:#bbe52a; --marca:#01b3b2;
  --estq-zona-critico:#057F6F; --estq-zona-atencao:#60A161; --estq-zona-bom:#99B758; --estq-zona-otimo:#CFCC51;
  --side:#ffffff; --side-sel:#e3f3ee; --side-ink:#2c3e38;
  --red:#c43d3d; --red-soft:#fdeeee; --red-line:#f0c9c9; --amber:#c47a16; --amber-soft:#fff4e3; --good:#18703e; --good-soft:#ddf1e4;
  --shadow:0 10px 30px -14px rgba(14,35,29,.18); --shadow-soft:0 1px 2px rgba(14,35,29,.05),0 6px 18px -10px rgba(14,35,29,.12);
  --r:12px; --r-lg:14px; --r-pill:999px;
  --font-body:'Manrope',system-ui,sans-serif; --font-display:'Manrope',system-ui,sans-serif;
  /* elementos gráficos da identidade (Consulta técnica, 21/10/2026; valem para qualquer tela):
     --ring = assinatura do anel (lima só na ponta: "agora"); --plate-* = placa escura da máquina e da peça;
     --e1/--e2/--e3 = elevação (cartão, hover, o que cobre a tela); --stage = palco das fotos de máquina;
     --hatch = hachura do que está desligado; --desk-dot = mesa pontilhada atrás do desenho; --ilu-* = ilustrações */
  --ring:conic-gradient(from 210deg,var(--marca),var(--lime) 34%,var(--marca) 62%,var(--accent) 100%);
  --plate-bg:linear-gradient(105deg,#0d1f1c 0%,#0f2a26 55%,#0d3531 100%); --plate-solid:#0f2522;
  --t-hero:26px; --t-code:13px; --t-kpi:19px; --t-over:9.5px; --ease:cubic-bezier(.2,.8,.2,1);
  --e1:0 1px 0 rgba(14,35,29,.04),0 1px 3px rgba(14,35,29,.07); --e2:0 1px 2px rgba(14,35,29,.06),0 10px 24px -10px rgba(14,35,29,.22); --e3:0 24px 60px -18px rgba(14,35,29,.45);
  --stage:#f3f1ec; --stage-2:#e9e6df; --stage-line:#e2ded5; --hatch:rgba(14,35,29,.07); --desk-dot:rgba(14,35,29,.09);
  --ilu-f:var(--accent-50); --ilu-f2:var(--accent-soft); --ilu-s:var(--accent-ink); --ilu-g:var(--line-2);

  /* og.glass vira plano: sem vidro, sem blur, sem gradiente de marca */
  --og-bg:#ffffff; --og-bg-strong:#ffffff; --og-bg-input:#ffffff; --og-bg-dark:#0b2b26;
  --og-border:var(--line); --og-border-soft:var(--line);
  --og-blur:none; --og-blur-strong:none;
  --og-shadow:var(--shadow-soft); --og-shadow-hover:var(--shadow); --og-shadow-modal:0 30px 80px -30px rgba(0,0,0,.45);
  --og-inset:0 0 0 0 transparent; --og-inset-dark:0 0 0 0 transparent;
  --og-topbar-grad:var(--accent); --og-brand-grad:var(--accent);
  --og-green:var(--accent);
}

/* ---------- fundo da página: chapado, sem anéis ---------- */
/* 21/10/2026: o styles.css antigo redefine --og-green (#2a9a3a, verde) e --og-shadow em
   :root[data-theme="light"], :root:not([data-theme]) — seletor mais forte que o :root daqui — e o verde antigo vazava
   em 37 telas (Busca Chassi, botões og-*). Mesma força de seletor, carregado depois: vale a identidade (teal). */
:root[data-theme="light"], :root:not([data-theme]){ --og-green:var(--accent); --og-shadow:var(--shadow-soft); }
html, body{ background:var(--bg) !important; background-image:none !important; }
body::before, body::after{ display:none !important; content:none !important; }
body, .app, .main, .content{ font-family:var(--font-body) !important; color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--font-display) !important; letter-spacing:-.01em; }

/* ---------- barra superior clara ---------- */
.topbar{
  background:var(--panel) !important; background-image:none !important;
  border-bottom:1px solid var(--line) !important; box-shadow:none !important;
  color:var(--ink) !important;
}
.topbar .breadcrumb{ color:var(--ink-3) !important; }
.topbar .page-title{ color:var(--ink) !important; }
.topbar .topbar-search{ background:var(--search) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:var(--r-pill) !important; }
.topbar .topbar-search:hover{ box-shadow:none !important; border-color:var(--line-2) !important; }
.topbar .topbar-search:focus-within{ background:var(--input) !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
.topbar .topbar-search-input{ color:var(--ink) !important; }
.topbar .topbar-search-input::placeholder{ color:var(--ink-3) !important; }
.topbar .topbar-search-icone{ color:var(--ink-3) !important; }
.topbar .topbar-icon-btn, .topbar .sidebar-toggle{
  background:var(--panel) !important; border:1px solid var(--line) !important; color:var(--ink-2) !important; box-shadow:none !important; border-radius:10px !important;
}
.topbar .topbar-icon-btn:hover, .topbar .sidebar-toggle:hover{ background:var(--accent-50) !important; border-color:var(--accent-line) !important; color:var(--accent-ink) !important; }
/* seletor de módulo (#moduloSwitcher) e o dropdown: desenho 2026 direto na casca.css */
.topbar-perfil{ background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:12px !important; }
.topbar-perfil:hover{ background:var(--accent-50) !important; }
.topbar-perfil-who strong{ color:var(--ink) !important; }
.topbar-perfil-who small{ color:var(--ink-3) !important; }
.topbar-perfil-chev{ color:var(--ink-3) !important; }
.topbar .logo-img{ filter:none !important; }

/* ---------- cabeçalhos de título (Fase 2, 08/10/2026) ----------
   Telas que ainda tinham o título dentro da barra de ações (.prod-toolbar > div > h2.prod-title):
   o título e o subtítulo somem; se a barra só tinha isso, some inteira. Cabeçalhos gerados por JS
   nas telas de Operações idem (Comodato, Campanhas, Análise de Vendas). */
.prod-toolbar .prod-title, .prod-toolbar .prod-sub, .prod-toolbar h2.prod-title + .prod-sub{ display:none !important; }
.prod-toolbar:has(> div:only-child > .prod-title){ display:none !important; }
#comodatoApp .panel-body > h2:first-child{ display:none !important; }
#campanhasContent > .panel > .panel-header > div:first-child:has(> .panel-title){ display:none !important; }
/* Dashboard Diretoria: KPIs planos (sem gradiente, faixa verde nem sombra) */
.dir-kpi{ background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.dir-kpi::before, .dir-kpi::after{ display:none !important; }
.dir-kpi:hover{ transform:none !important; box-shadow:none !important; border-color:var(--accent-line) !important; }
.dir-panel{ background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.dir-panel::before{ display:none !important; } .dir-panel:hover{ transform:none !important; box-shadow:none !important; }
#campanhasContent > .panel > .panel-header{ justify-content:flex-end !important; }

/* ---------- Catálogo · Vitrine de produtos (Fase 2, 08/10/2026: "arrume a vitrine") ----------
   Barra de filtros em pílulas, solta sobre o fundo (sem cartão de vidro, sem título, sem botão
   Buscar — a busca é automática ao digitar); cartões brancos planos de borda fina, foto quadrada
   em fundo branco, nome em destaque e etiquetas discretas; ficha (modal) no mesmo desenho. */
#catVitrineApp .cat-vit-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
#catVitrineApp .cat-vit-busca-wrap{ flex:1 1 320px; min-width:240px; }
#catVitrineApp .cat-vit-busca-ico{ left:14px; color:var(--ink-3); }
#catVitrineApp .cat-vit-input{ height:36px; padding:0 12px; border-radius:var(--r-pill) !important; background:var(--input) !important; border:1px solid var(--line) !important; font-size:13px; color:var(--ink) !important; box-shadow:none !important; }
#catVitrineApp .cat-vit-input-busca{ padding-left:38px; }
#catVitrineApp .cat-vit-input-modelo{ min-width:200px; flex:0 1 220px; }
#catVitrineApp .cat-vit-input:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
#catVitrineApp .ns-btn.cat-vit-select{ height:36px; padding:0 12px 0 14px !important; color:var(--ink-2) !important; font-weight:600; font-size:12.5px; max-width:260px; }
#catVitrineApp .cat-vit-btn{ height:36px; padding:0 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; background:var(--panel); border:1px solid var(--line); color:var(--ink-2); box-shadow:none; }
#catVitrineApp .cat-vit-btn:hover{ background:var(--accent-50); border-color:var(--accent-line); color:var(--accent-ink); transform:none; }
#catVitrineApp .cat-vit-total{ margin-left:auto; font-size:12px; color:var(--ink-3); font-weight:600; white-space:nowrap; padding-right:4px; }
#catVitrineApp .cat-vit-grid{ grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:12px; }
#catVitrineApp .cat-vit-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; transition:border-color .16s ease, box-shadow .16s ease; }
#catVitrineApp .cat-vit-card::before{ display:none; }
#catVitrineApp .cat-vit-card:hover{ transform:none; border-color:var(--accent-line-2); box-shadow:var(--shadow-soft); }
#catVitrineApp .cat-vit-card-foto{ background:var(--photo); border-bottom:1px solid var(--line-soft); }
#catVitrineApp .cat-vit-card-foto img{ padding:14px; }
#catVitrineApp .cat-vit-sem-imagem{ color:#66756f; opacity:1; font-size:10.5px; letter-spacing:.08em; font-weight:700; }
#catVitrineApp .cat-vit-foto-count{ background:var(--panel); border:1px solid var(--line); color:var(--ink-2); font-size:10px; font-weight:700; backdrop-filter:none; bottom:8px; right:8px; }
#catVitrineApp .cat-vit-card-body{ padding:11px 12px 12px; gap:4px; }
#catVitrineApp .cat-vit-card-codigo{ font-family:ui-monospace, 'JetBrains Mono', monospace; font-size:10.5px; color:var(--ink-3); font-weight:600; letter-spacing:.03em; }
#catVitrineApp .cat-vit-card-nome{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.35; }
#catVitrineApp .cat-vit-card-pn{ font-size:11px; color:var(--ink-2); }
#catVitrineApp .cat-vit-card-pn strong{ font-weight:600; color:var(--ink-3); }
#catVitrineApp .cat-vit-card-tags{ gap:4px; padding-top:8px; }
#catVitrineApp .cat-vit-tag{ font-size:10px; font-weight:600; padding:2px 8px; border:0; letter-spacing:0; }
#catVitrineApp .cat-vit-tag-aps{ background:var(--accent-soft); color:var(--accent-ink); }
#catVitrineApp .cat-vit-tag-ref{ background:var(--amber-soft); color:var(--amber); }
#catVitrineApp .cat-vit-tag-peso{ background:var(--chip); color:var(--ink-2); }
#catVitrineApp .cat-vit-empty{ background:var(--panel); border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--ink-3); }
#catVitrineApp .cat-vit-loading, #catVitrineApp .cat-vit-erro{ grid-column:1 / -1; padding:48px 20px; }
#catVitrineApp .cat-vit-loading{ color:var(--ink-3); }
#catVitrineApp .cat-vit-sentinela{ padding:18px 0 8px; text-align:center; }
#catVitrineApp .cat-vit-rodape{ font-size:12px; color:var(--ink-3); }
/* ficha do produto: redesenhada direto no styles.css (bloco "Ficha do produto (vitrine)") */

/* ---------- rail / barra lateral (08/10/2026: no desenho novo) ----------
   Faixa da marca em cima vira BRANCA como o topbar (símbolo colorido fechado, logotipo
   teal aberto); rail com ícones planos e ativo em pílula teal; barra aberta com linhas
   planas (ícone solto, sem azulejo), hover cinza-claro e ativo em teal suave — igual
   às listas do e-mail e da Equipe. Dock "Acesso rápido" plano, sem sombra. */
.sidebar, .rail, .drawer{ background:var(--side) !important; border-color:var(--line) !important; box-shadow:none !important; }
.nav-item{ border-radius:10px !important; color:var(--side-ink) !important; }
.nav-item:hover{ background:var(--hover) !important; }
.nav-item.active, .nav-item[aria-current="page"]{ background:var(--side-sel) !important; color:var(--accent-ink) !important; }
.nav-module{ color:var(--ink-3) !important; font-size:10.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-weight:700 !important; }
.nav-divisor{ border-color:var(--line) !important; }

.app.casca-rail{ --rail-green:var(--accent); --rail-teal:var(--accent-deep); }
/* abrir/recolher mais suave (Pablo 08/10/2026: "recolhimento muito rápido"): a coluna do grid
   leva 0,34 s com curva desacelerada e, ao recolher, espera 0,18 s — sair do mouse por um instante
   não faz a barra bater fechada. Abrir continua imediato. */
@media (min-width:1367px){
  /* recolher: 0,2 s de espera + 0,55 s com curva suave (entra e sai devagar); abrir: 0,35 s */
  .app.casca-rail{ transition:grid-template-columns .55s cubic-bezier(.45,.05,.2,1) .2s !important; }
  .app.casca-rail:has(.sidebar:is(:hover, .rail-fixa *)){ transition-delay:0s !important; transition-duration:.35s !important; }
  .app.casca-rail .nav-item, .app.casca-rail .nav-item-meupainel{ transition:background .16s ease, color .16s ease, width .55s cubic-bezier(.45,.05,.2,1) .2s, padding .55s cubic-bezier(.45,.05,.2,1) .2s, font-size 0s .45s !important; }
  .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel{ transition:background .16s ease, color .16s ease, width .35s cubic-bezier(.45,.05,.2,1), padding .35s cubic-bezier(.45,.05,.2,1), font-size 0s 0s !important; }
  .app.casca-rail .sidebar{ transition:box-shadow .4s ease .2s !important; }
  .app.casca-rail .sidebar:is(:hover, .rail-fixa *){ transition-delay:0s !important; }
}
.app.casca-rail .sidebar{ background:var(--side) !important; border-right:0 !important; }
/* a linha da borda fica no .nav e no botão do pé — na faixa da marca ela "riscava" o logotipo fixo
   entre o símbolo e a palavra (Pablo 08/10/2026); aberta, a faixa ganha a linha porque o logotipo
   termina bem antes da borda */
.app.casca-rail .nav, .app.casca-rail .rail-pin{ border-right:1px solid var(--line) !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .logo{ border-right:1px solid var(--line) !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *){ box-shadow:12px 0 30px -18px rgba(14,35,29,.22) !important; }
/* fixa = parte do layout, não flutua */
.rail-fixa .app.casca-rail .sidebar{ box-shadow:none !important; }
/* faixa da marca: branca, mesma linha do topbar. Logotipo "oriente portal" FIXO e maior no canto
   superior esquerdo (Pablo 08/10/2026): não troca pelo símbolo quando a barra recolhe — fica
   ancorado por cima do rail + começo do topbar, e o topbar reserva o espaço. */
.app.casca-rail .logo{ background:var(--side) !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; overflow:visible !important; position:relative; }
.app.casca-rail .logo-img, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .logo-img{ display:none !important; }
.app.casca-rail .logo::before{ content:''; position:fixed; left:16px; top:0; height:var(--topbar-height,71px); width:176px; z-index:41; cursor:pointer;
  background:url('../../img/logo-oriente-portal.png?v=portal-2026-10') left center / contain no-repeat; }
.app.casca-rail .topbar{ padding-left:140px !important; }
.app.casca-rail:has(.sidebar:is(:hover, .rail-fixa *)) .topbar{ padding-left:28px !important; }
/* rail fechado: ícones planos; ativo = pílula teal sólida (contraste no rail estreito) */
.app.casca-rail .nav-item, .app.casca-rail .nav-item-meupainel{ color:var(--side-ink) !important; box-shadow:none !important; }
.app.casca-rail .nav-item:hover, .app.casca-rail .nav-item-meupainel:hover{ background:var(--hover) !important; color:var(--accent-ink) !important; box-shadow:none !important; transform:none !important; }
.app.casca-rail .nav-item.active, .app.casca-rail .nav-item.ativo,
.app.casca-rail .nav-item-meupainel.active, .app.casca-rail .nav-item-meupainel.ativo{ background:var(--accent) !important; color:var(--on-accent) !important; box-shadow:none !important; }
.app.casca-rail .nav-item.active::before, .app.casca-rail .nav-item.ativo::before,
.app.casca-rail .nav-item-meupainel.active::before, .app.casca-rail .nav-item-meupainel.ativo::before{ display:none !important; }
.app.casca-rail .nav-fixos{ background:var(--bg) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:12px !important; }
/* barra aberta: linhas planas, ícone solto, ativo em teal suave */
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-fixos{ box-shadow:none !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-fixos::after{ display:none !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-fixos::before{ color:var(--ink-3) !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel{ height:38px !important; border-radius:10px !important; padding:0 10px !important; gap:10px !important; font-size:13px !important; font-weight:600 !important; color:var(--side-ink) !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item svg, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel svg{ width:18px !important; height:18px !important; padding:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; color:var(--ink-3) !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item:hover, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel:hover{ background:var(--hover) !important; color:var(--ink) !important; transform:none !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item:hover svg, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel:hover svg{ background:none !important; color:var(--accent-ink) !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.active, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.ativo,
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.active, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.ativo{ background:var(--accent-soft) !important; color:var(--accent-ink) !important; font-weight:700 !important; box-shadow:none !important; }
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.active svg, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item.ativo svg,
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.active svg, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-item-meupainel.ativo svg{ background:none !important; color:var(--accent-ink) !important; box-shadow:none !important; }
.app.casca-rail .nav-module{ color:var(--ink-3) !important; }
/* os grupos do módulo são blocos dentro de um flex centralizado: sem largura cheia, encolhem e ficam
   recuados em relação ao dock "Acesso rápido" */
.app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-module-items, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-section, .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .nav-module{ width:100% !important; align-self:stretch !important; }
/* badges (WhatsApp / Tarefas / E-mail): vermelho chapado, sem brilho */
.app.casca-rail .nav-item span#navCntWhatsapp, .app.casca-rail .nav-item span#navCntTarefas, .app.casca-rail .nav-item span#navCntEmail{ background:var(--red) !important; box-shadow:none !important; }
/* botão do pé da barra (#railPin): "Recolher" com a barra fixa; "Manter aberta" quando ela só
   está aberta pelo mouse; no rail fechado mostra só o ícone, como os itens */
.rail-pin{ display:none; }
@media (min-width:1367px){
  .app.casca-rail .rail-pin{ display:flex; align-items:center; justify-content:center; gap:10px; flex:none; width:100%; height:44px; margin:0; padding:0; box-sizing:border-box;
    border:0; border-top:1px solid var(--line); background:var(--side); color:var(--ink-3); cursor:pointer; font-family:inherit; font-size:0; font-weight:600; line-height:1; white-space:nowrap;
    transition:background .16s ease, color .16s ease, padding .35s cubic-bezier(.45,.05,.2,1), font-size 0s .45s; }
  .app.casca-rail .rail-pin:hover{ background:var(--hover); color:var(--accent-ink); }
  .app.casca-rail .rail-pin svg{ width:18px; height:18px; flex:none; }
  .app.casca-rail .sidebar:is(:hover, .rail-fixa *) .rail-pin{ justify-content:flex-start; padding:0 18px; font-size:12.5px; transition:background .16s ease, color .16s ease, padding .35s cubic-bezier(.45,.05,.2,1), font-size 0s 0s; }
  .app.casca-rail .rail-pin-fechar, .app.casca-rail .rail-pin-rec, .rail-fixa .app.casca-rail .rail-pin-abrir, .rail-fixa .app.casca-rail .rail-pin-fix{ display:none; }
  .rail-fixa .app.casca-rail .rail-pin-fechar, .rail-fixa .app.casca-rail .rail-pin-rec{ display:block; }
}
/* gaveta (notebook ≤1366px) */
.app:not(.casca-rail) .sidebar .logo{ background:var(--side) !important; border-bottom:1px solid var(--line) !important; }

/* ---------- abas da casca (Início | Produtos ×) ---------- */
.tabs-bar, .tabsbar, #tabsBar{ background:var(--panel) !important; border-bottom:1px solid var(--line) !important; }
.tabs-bar .tab, .tabsbar .tab{ border-radius:10px 10px 0 0 !important; font-weight:600; color:var(--ink-2); }
.tabs-bar .tab.active, .tabsbar .tab.active{ color:var(--accent-ink) !important; border-bottom-color:var(--accent) !important; }

/* ---------- títulos de tela: somem; sobra a linha de ações ---------- */
.prod-header .prod-titulo, .prod-header .prod-sub, .page-title, .page-header h1, .page-header .sub, .page-header p,
section.page > h1, section.page > div:first-child > h1, section.page > div:first-child > div:first-child > h1,
section.page > div:first-child > div:first-child > p:first-of-type:not(.muted):not([class*="aviso"]):not([class*="fb"]),
.cat-vit-titulo, .cat-mat-titulo, .kn-titulo, .tm-titulo, .ph-titulo, .cmv-titulo, .mk-title, .cp-page-titulo,
#tarefasApp > div:first-child > div:first-child > h2{ display:none !important; }
/* Tarefas: os modos (Meu Dia, Kanban…) viram pílulas, sem o verde escuro */
.tar-modos .tar-modo{ border-radius:var(--r-pill) !important; border:1px solid var(--line) !important; background:var(--panel) !important; color:var(--ink-2) !important; font-weight:600 !important; box-shadow:none !important; }
.tar-modos .tar-modo.on{ background:var(--accent) !important; border-color:var(--accent) !important; color:var(--on-accent) !important; }
.prod-header{ margin-bottom:10px !important; padding:0 !important; min-height:0 !important; justify-content:flex-end !important; }
.prod-header:empty{ display:none !important; }
.prod-header > div:first-child:empty{ display:none; }
.prod-det-voltar{ border-radius:var(--r-pill) !important; }

/* ---------- cartões e painéis ---------- */
.panel, .card, .kpi, .ed-card, .sgc-painel, .orc-sk-card, .cat-kpi, .cred-card, .serie-card, .compras-card, .cot-card, .audit-card,
.prod-kpi-card, .mod-card, .dash-card, .og-glass, .prod-det-secao, .painel{
  background:var(--panel) !important; background-image:none !important;
  border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-soft) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.kpi::before, .panel::before, .card::before{ display:none !important; }
.kpi:hover{ transform:none !important; box-shadow:var(--shadow-soft) !important; }
.panel-header, .ed-card-head, .sgc-painel-head, .orc-sk-card-head, .painel-head{ background:transparent !important; border-bottom:1px solid var(--line-soft) !important; }
.panel-title, .painel-head h3{ font-size:14px !important; font-weight:700 !important; color:var(--ink) !important; }
.kpi .kpi-label, .kpi span:first-child, .kpi small{ color:var(--ink-3) !important; font-size:11px !important; letter-spacing:.04em; text-transform:uppercase; font-weight:600; }

/* ---------- botões ---------- */
.btn, .og-btn, .kn-btn, button.btn{
  border-radius:10px !important; font-weight:600 !important; font-family:var(--font-body) !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not([style*="background"]), .og-btn:not(.og-btn--primary), .kn-btn:not(.kn-btn--primary){
  background:var(--panel) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not([style*="background"]):hover, .og-btn:not(.og-btn--primary):hover, .kn-btn:not(.kn-btn--primary):hover{
  background:var(--accent-50) !important; border-color:var(--accent-line) !important; color:var(--accent-ink) !important; box-shadow:none !important;
}
.btn-primary, .og-btn--primary, .kn-btn--primary{
  background:var(--brand-strong) !important; background-image:none !important; border:1px solid var(--brand-strong) !important; color:var(--on-accent) !important; box-shadow:none !important; filter:none !important;
}
.btn-primary:hover, .og-btn--primary:hover, .kn-btn--primary:hover{ background:var(--accent-ink) !important; border-color:var(--accent-ink) !important; filter:none !important; box-shadow:none !important; }
.btn-primary:active{ transform:none !important; }
.btn-secondary{ background:var(--accent-soft) !important; border:1px solid transparent !important; color:var(--accent-ink) !important; }
.btn-danger{ background:var(--red-soft) !important; border:1px solid var(--red-line) !important; color:var(--red) !important; }
.btn-xs{ border-radius:8px !important; }
.kn-btn{ border-radius:var(--r-pill) !important; }

/* ---------- campos ---------- */
.field-input, .input, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="tel"], select, textarea{
  background:var(--input) !important; border:1px solid var(--line) !important; border-radius:10px !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:var(--ink) !important; font-family:var(--font-body) !important;
}
.field-input:focus, .input:focus, input:focus, select:focus, textarea:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; outline:none !important; }
::placeholder{ color:var(--ink-3) !important; }
.field-label, label.field-label{ color:var(--ink-2) !important; font-size:11px !important; letter-spacing:.04em; text-transform:uppercase; font-weight:600 !important; }

/* ---------- barra de ferramentas do painel: pílulas ---------- */
.prod-toolbar{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; gap:8px !important; margin-bottom:12px !important; }
.prod-toolbar-input, .prod-toolbar input[type="text"], .prod-toolbar input[type="search"]{ border-radius:var(--r-pill) !important; background:var(--input) !important; border:1px solid var(--line) !important; height:36px; }
.prod-toolbar-select, .prod-toolbar select, .prod-toolbar .kn-btn, .prod-toolbar .og-dropdown-btn{ border-radius:var(--r-pill) !important; background:var(--panel) !important; border:1px solid var(--line) !important; color:var(--ink-2) !important; font-weight:600 !important; height:36px; }
.prod-toolbar-icon{ color:var(--ink-3) !important; }

/* ---------- tabelas ---------- */
.prod-tabela-wrap{ border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; background:var(--panel) !important; box-shadow:var(--shadow-soft) !important; overflow:hidden; }
.prod-tabela thead{ background:var(--bg-2) !important; border-bottom:1px solid var(--line) !important; }
.prod-tabela th{ color:var(--ink-3) !important; font-size:11px !important; letter-spacing:.06em !important; text-transform:uppercase !important; font-weight:700 !important; }
.prod-tabela td{ font-size:13px !important; color:var(--ink); border-bottom:1px solid var(--line-soft) !important; }
.prod-tabela tbody tr:hover td{ background:var(--accent-50) !important; }
table.tabela, table.data{ border-color:var(--line) !important; }

/* ---------- tabela com cabeçalho fixo + paginação (OGPaginacao) ----------
   O wrapper rola por dentro; o thead fica colado no topo para sempre saber qual coluna se olha.
   --og-tab-off = altura que sobra acima/abaixo da tabela (barra, abas, título, busca, paginação). */
.og-tab-rolagem{ --og-tab-off:300px; overflow:auto !important; max-height:max(280px, calc(100vh - var(--og-tab-off))); border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.og-tab-rolagem > table{ border-collapse:separate !important; border-spacing:0; }
.page .og-tab-rolagem table thead th, .og-tab-rolagem thead th{ position:sticky; top:0; z-index:2; background:var(--bg-2) !important; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:inset 0 -1px 0 var(--line); }
.og-pag{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--shadow-soft); font-size:12.5px; color:var(--ink-3); }
.og-pag-info{ font-weight:600; }
.og-pag-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.og-pag-btn{ min-width:32px; height:32px; padding:0 8px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel); color:var(--ink-2); font:inherit; font-weight:600; cursor:pointer; }
.og-pag-btn:hover:not(:disabled):not(.ativo){ background:var(--hover); }
.og-pag-btn.ativo{ background:var(--accent-50); border-color:var(--accent); color:var(--ink); }
.og-pag-btn:disabled{ opacity:.4; cursor:default; }
.og-pag-gap{ padding:0 4px; color:var(--ink-3); }
.og-pag-tam{ display:flex; align-items:center; gap:8px; margin:0; font-weight:600; }
.og-pag-tam .ns-btn{ height:32px !important; min-width:64px; }

/* ---------- abas internas (detalhe) ---------- */
.prod-det-tabs{ background:transparent !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; padding:0 !important; gap:18px !important; box-shadow:none !important; }
.prod-det-tab{ background:transparent !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; color:var(--ink-2) !important; font-weight:600 !important; font-size:12.5px !important; letter-spacing:.02em; padding:8px 2px 10px !important; text-transform:none !important; box-shadow:none !important; }
.prod-det-tab.active{ color:var(--accent-ink) !important; border-bottom-color:var(--accent) !important; background:transparent !important; }

/* ---------- pílulas e selos ---------- */
.badge, .badge-status, .pill, .tag, .chip, .rk, .tg{ border-radius:var(--r-pill) !important; font-weight:600 !important; box-shadow:none !important; }

/* ---------- modais e dropdowns (og) ---------- */
.og-modal, .modal-overlay .modal, .modal-content, .popup, .dialog, .og-dropdown, .og-pop, .cmv-pop{
  background:var(--panel) !important; background-image:none !important; border:1px solid var(--line) !important; border-radius:16px !important;
  box-shadow:var(--og-shadow-modal) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.og-modal-overlay, .modal-overlay{ background:rgba(23,34,30,.42) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.og-modal-head, .modal-header{ border-bottom:1px solid var(--line-soft) !important; background:transparent !important; }
.og-modal-foot, .modal-footer{ border-top:1px solid var(--line-soft) !important; background:transparent !important; }
.og-modal-title, .modal-title{ font-size:16px !important; font-weight:700 !important; }

/* ---------- empty states / avisos ---------- */
.empty, .vazio, .sem-dados{ color:var(--ink-3) !important; }

/* ---------- login/splash não entram aqui (têm identidade própria) ---------- */
#appSplash, .splash{ font-family:var(--font-body); }

/* ============================================================
   MODO ESCURO (08/10/2026, Pablo: "modo escuro não está funcionando")
   Paleta própria, não inversão: neutros puxados pro verde-petróleo da marca,
   texto quase-branco (não #fff, pra não ofuscar), teal mais claro pra manter
   contraste sobre o escuro, texto escuro sobre botões teal.
   Contrastes (WCAG AA, sobre --panel #172120): ink 13:1 · ink-2 8:1 · ink-3 4,7:1 ·
   accent-ink 9:1 · on-accent sobre accent 7:1. Mesma especificidade do bloco
   :root[data-theme="dark"] do styles.css — este arquivo carrega depois e vence.
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1513; --bg-2:#131b19; --panel:#172120; --card:#172120; --hover:#1e2a28; --chip:#243230;
  --input:#111917; --search:#111917; --photo:#ffffff;
  --ink:#e6ecea; --ink-2:#aebbb7; --ink-3:#86958f; --ink-deco:#5c6b66; --muted:#aebbb7;
  --line:#26322f; --line-soft:#1f2a27; --line-2:#334240;
  --accent:#2cc0bd; --brand-strong:#2cc0bd; --accent-deep:#1ea9a6; --accent-ink:#6fd9d4; --accent-soft:rgba(44,192,189,.16); --accent-50:rgba(44,192,189,.09);
  --accent-line:rgba(44,192,189,.38); --accent-line-2:rgba(44,192,189,.5); --on-accent:#06201f;
  --lime:#c9ef4a; --marca:#01b3b2;
  --side:#121a18; --side-sel:rgba(44,192,189,.16); --side-ink:#c6d1cd;
  --red:#ff8080; --red-soft:rgba(255,107,107,.16); --red-line:rgba(255,107,107,.4);
  --amber:#f0b454; --amber-soft:rgba(240,180,84,.16); --good:#5fd68a; --good-soft:rgba(95,214,138,.16);
  --shadow:0 10px 30px -14px rgba(0,0,0,.6); --shadow-soft:0 1px 2px rgba(0,0,0,.3),0 6px 18px -10px rgba(0,0,0,.5);
  /* tokens legados (styles.css) */
  --bg-soft:#131b19; --ink-soft:#aebbb7; --line-strong:#334240; --brand-soft:rgba(44,192,189,.16);
  --green-soft:rgba(95,214,138,.16); --gold-soft:rgba(201,239,74,.14); --olive-soft:rgba(154,184,89,.16); --blue-soft:rgba(79,141,255,.16); --yellow-soft:rgba(201,239,74,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-card:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.35); --shadow-card-hover:0 2px 4px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.5); --shadow-modal:0 20px 60px rgba(0,0,0,.7);
  /* og.glass continua plano, só que escuro */
  --og-bg:#172120; --og-bg-strong:#1c2725; --og-bg-input:#111917; --og-bg-dark:#0b2b26; --og-border:var(--line); --og-border-soft:var(--line-soft);
  --og-glass:#172120; --og-glass-strong:#1c2725; --og-glass-deep:#111917; --og-glass-deeper:#0e1513; --og-hairline:var(--line); --og-hairline-soft:var(--line-soft);
  --og-ink:#e6ecea; --og-ink-2:#aebbb7; --og-ink-3:#7d8c88; --og-green:var(--accent); --og-red:var(--red); --og-amber:var(--amber); --og-teal:#2cc0bd; --og-blue:#6ea4ff;
  --og-shadow:var(--shadow-soft); --og-shadow-hover:var(--shadow); --og-shadow-modal:0 30px 80px -30px rgba(0,0,0,.8);
  --estq-zona-critico:#4fd0c0; --estq-zona-atencao:#7fc981; --estq-zona-bom:#b5d16f; --estq-zona-otimo:#e0dc6a;
  --plate-bg:linear-gradient(105deg,#0a1614 0%,#0c211e 55%,#0b2a27 100%); --plate-solid:#0b1b19;
  --e1:0 1px 0 rgba(255,255,255,.03) inset,0 1px 3px rgba(0,0,0,.35); --e2:0 1px 2px rgba(0,0,0,.4),0 12px 28px -10px rgba(0,0,0,.7); --e3:0 24px 60px -18px rgba(0,0,0,.85);
  --stage:#1d2725; --stage-2:#16201e; --stage-line:#2b3836; --hatch:rgba(255,255,255,.06); --desk-dot:rgba(14,35,29,.13);
}
/* botões cheios: ganham do fundo claro que o CSS antigo põe em .btn (regra mais específica que .btn-primary) */
:root[data-theme="dark"] :is(.btn-primary, .og-btn--primary, .kn-btn--primary, button.btn-primary){ background:var(--accent) !important; border-color:var(--accent) !important; color:var(--on-accent) !important; }
:root[data-theme="dark"] :is(.btn-primary, .og-btn--primary, .kn-btn--primary):hover{ background:var(--accent-deep) !important; border-color:var(--accent-deep) !important; }
:root[data-theme="dark"] .btn-secondary{ background:var(--accent-soft) !important; color:var(--accent-ink) !important; }
:root[data-theme="dark"] .btn-danger{ background:var(--red-soft) !important; border-color:var(--red-line) !important; color:var(--red) !important; }
:root[data-theme="dark"] body{ background:var(--bg) !important; background-image:none !important; }
/* fotos de catálogo são em fundo branco: a caixa da foto continua branca (como uma foto impressa) */
:root[data-theme="dark"] .cat-vit-modal-foto-principal, :root[data-theme="dark"] .cat-vit-modal-thumb{ background:var(--photo) !important; }
/* cores fixas dos CSS antigos e dos estilos inline: portal-2026-dark.css (gerado por scripts/gerar_dark_css.py) */

/* ---------- paginação automática das tabelas (tabelas-auto-ui.js) ---------- */
tr.og-pag-oculta{ display:none !important; }
.og-tab-rolagem.og-auto{ --og-tab-off:220px; border-radius:0 !important; max-width:100%; min-width:0; }
.og-tab-bloco{ display:block; min-width:0; max-width:100%; }
.og-tab-rolagem.og-auto > table{ margin:0; border-collapse:collapse !important; }
.og-tab-rolagem.og-sem-sticky thead th{ position:static !important; }
.og-pag.og-pag-auto{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:8px 4px 0; margin-top:2px; }
@media print{
  .og-tab-rolagem{ max-height:none !important; overflow:visible !important; }
  tr.og-pag-oculta{ display:table-row !important; }
  .og-pag{ display:none !important; }
}