:root {
  --navy: #0F3D6E;
  --navy-dark: #0A2C51;
  --navy-deep: #0B1626;
  --green: #1FA35A;
  --gold: #D8B23C;
  --red: #CE2E3D;
  --text: #1F2430;
  /* 27/08/2026 (auditoria de UX/layout): media 4,50:1 contra --bg
     (#F5F7FA) - exatamente na borda do mínimo WCAG AA pra texto normal
     (a maioria dos usos é < 18px: labels, cabeçalho de tabela, h4).
     Escurecido por margem de segurança - ~5,7:1. Repetido no
     [data-theme=light] abaixo (mesmo padrão dos outros tokens). */
  --muted: #384252;
  --border: #E4E7EB;
  --bg: #F5F7FA;
  --card-bg: #FFFFFF;
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 64px;
  --toast-bg: #1F2430;
  --toast-text: #fff;
  --overlay-bg: rgba(10, 24, 42, .62);

  /* Variáveis do Chat IA (compatíveis com Light & Dark Mode) */
  --msg-user-bg: #0F3D6E;
  --msg-user-text: #FFFFFF;
  --msg-assistant-bg: #F4F6F9;
  --msg-assistant-text: #1F2430;
  --msg-assistant-border: #E4E7EB;
  --banner-info-bg: #EAF1FB;
  --banner-info-text: #0F3D6E;
  --banner-info-border: #C1D8FA;
  --banner-warn-bg: #FFF6E0;
  --banner-warn-text: #8A6D1D;
  --banner-warn-border: #F2DFA0;
  --chip-bg: #FFFFFF;
  --chip-text: #0F3D6E;
  --chip-border: #E4E7EB;
  --chip-hover-bg: #EAF1FB;
  --btn-tab-bg: #F4F6F9;
  --btn-tab-active-bg: #FFFFFF;
  --btn-tab-active-text: #0F3D6E;

  /* 02/08/2026 - aliases usados pelos templates (chat.html usava
     --success/--danger e login.html usava --accent SEM definição nenhuma -
     as cores simplesmente não eram aplicadas) + variáveis pros fundos que
     estavam hard-coded claros e quebravam o dark mode. */
  --ok-text: #157A43;      /* verde de TEXTO no claro - o --green (2,9:1) falha WCAG sobre --ok-bg */
  --danger-text: #B02836;  /* vermelho de TEXTO no claro (4,3:1 -> 5,5:1) */
  --success: var(--ok-text);
  --danger: var(--danger-text);
  --accent: var(--navy);
  /* 07/09/2026 (auditoria dos 4 relatórios web): mesma classe do bloco
     acima, três anos depois. As telas nativas de Radar/Balancete/Contas
     Médicas/Regulação usam --primary em foco de <select>, no topo do
     spinner e em cor de KPI — e a variável NUNCA existiu em CSS nenhum:
     `border-top-color: var(--primary)` resolvia pra currentColor e a
     animação do spinner ficava invisível; o indicador de foco do select
     sumia (isso é acessibilidade, não cosmética). Alias de --accent pra
     ter UMA fonte da verdade, e não uma 4ª cor de destaque. */
  --primary: var(--accent);
  --ok-bg: #E7F6ED;
  --ok-border: #BFE7CE;
  --danger-bg: #FBE7E8;
  --danger-border: #F3C9CB;
  --tag-bg: #EAF1FB;
  --input-alt-bg: #FAFBFC;

  /* Elevação e Profundidade Unificada */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-card: var(--shadow-sm);
  --font-mono-nums: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #3A86C8;
    --navy-dark: #1E508E;
    --navy-deep: #0a1420;
    --green: #2bc96e;
    --gold: #e6c84a;
    --red: #e85563;
    --text: #E4E8EE;
    --muted: #A3B1C2;
    --border: #2D3540;
    --bg: #111820;
    --card-bg: #19212B;
    --toast-bg: #E4E8EE;
    --toast-text: #111820;
    --overlay-bg: rgba(0, 0, 0, .7);

    /* Override Dark Mode do Chat IA */
    --msg-user-bg: #1A5A9E;
    --msg-user-text: #FFFFFF;
    --msg-assistant-bg: #212B37;
    --msg-assistant-text: #E4E8EE;
    --msg-assistant-border: #333F4E;
    --banner-info-bg: rgba(26, 90, 158, 0.25);
    --banner-info-text: #70B0FF;
    --banner-info-border: rgba(112, 176, 255, 0.3);
    --banner-warn-bg: rgba(216, 178, 60, 0.18);
    --banner-warn-text: #F2DFA0;
    --banner-warn-border: rgba(242, 223, 160, 0.3);
    --chip-bg: #212B37;
    --chip-text: #E4E8EE;
    --chip-border: #333F4E;
    --chip-hover-bg: #2C3847;
    --btn-tab-bg: #19212B;
    --btn-tab-active-bg: #212B37;
    --btn-tab-active-text: #E4E8EE;

    --ok-bg: rgba(43, 201, 110, 0.14);
    --ok-border: rgba(43, 201, 110, 0.35);
    --danger-bg: rgba(232, 85, 99, 0.14);
    --danger-border: rgba(232, 85, 99, 0.35);
    --tag-bg: rgba(58, 134, 200, 0.18);
    --input-alt-bg: #19212B;
    --ok-text: #2bc96e;
    --danger-text: #e85563;
  }
}

:root[data-theme="dark"] {
  --navy: #3A86C8;
  --navy-dark: #1E508E;
  --navy-deep: #0a1420;
  --green: #2bc96e;
  --gold: #e6c84a;
  --red: #e85563;
  --text: #E4E8EE;
  --muted: #A3B1C2;
  --border: #2D3540;
  --bg: #111820;
  --card-bg: #19212B;
  --toast-bg: #E4E8EE;
  --toast-text: #111820;
  --overlay-bg: rgba(0, 0, 0, .7);
  --ok-bg: rgba(43, 201, 110, 0.14);
  --ok-border: rgba(43, 201, 110, 0.35);
  --danger-bg: rgba(232, 85, 99, 0.14);
  --danger-border: rgba(232, 85, 99, 0.35);
  --tag-bg: rgba(58, 134, 200, 0.18);
  --input-alt-bg: #19212B;
  --ok-text: #2bc96e;
  --danger-text: #e85563;

  --msg-user-bg: #1A5A9E;
  --msg-user-text: #FFFFFF;
  --msg-assistant-bg: #212B37;
  --msg-assistant-text: #E4E8EE;
  --msg-assistant-border: #333F4E;
  --banner-info-bg: rgba(26, 90, 158, 0.25);
  --banner-info-text: #70B0FF;
  --banner-info-border: rgba(112, 176, 255, 0.3);
  --banner-warn-bg: rgba(216, 178, 60, 0.18);
  --banner-warn-text: #F2DFA0;
  --banner-warn-border: rgba(242, 223, 160, 0.3);
  --chip-bg: #212B37;
  --chip-text: #E4E8EE;
  --chip-border: #333F4E;
  --chip-hover-bg: #2C3847;
  --btn-tab-bg: #19212B;
  --btn-tab-active-bg: #212B37;
  --btn-tab-active-text: #E4E8EE;
}

:root[data-theme="light"] {
  --navy: #0F3D6E;
  --navy-dark: #0A2C51;
  --navy-deep: #0B1626;
  --green: #1FA35A;
  --gold: #D8B23C;
  --red: #CE2E3D;
  --text: #1F2430;
  --muted: #384252;
  --border: #E4E7EB;
  --bg: #F5F7FA;
  --card-bg: #FFFFFF;
  --toast-bg: #1F2430;
  --toast-text: #fff;
  --overlay-bg: rgba(10, 24, 42, .62);

  --msg-user-bg: #0F3D6E;
  --msg-user-text: #FFFFFF;
  --msg-assistant-bg: #F4F6F9;
  --msg-assistant-text: #1F2430;
  --msg-assistant-border: #E4E7EB;
  --banner-info-bg: #EAF1FB;
  --banner-info-text: #0F3D6E;
  --banner-info-border: #C1D8FA;
  --banner-warn-bg: #FFF6E0;
  --banner-warn-text: #8A6D1D;
  --banner-warn-border: #F2DFA0;
  --chip-bg: #FFFFFF;
  --chip-text: #0F3D6E;
  --chip-border: #E4E7EB;
  --chip-hover-bg: #EAF1FB;
  --btn-tab-bg: #F4F6F9;
  --btn-tab-active-bg: #FFFFFF;
  --btn-tab-active-text: #0F3D6E;
}


/* 07/09/2026 (bug real: sidebar "sumia" ao rolar relatório longo — print do
   Pedro): `height: 100%` prende a caixa do body em EXATAMENTE 1 viewport
   (100vh), mesmo quando o conteúdo de `.content` é mais alto — overflow
   visível deixa o conteúdo "vazar" visualmente sem esticar a caixa do body.
   `.sidebar` é `position:sticky` DENTRO dessa caixa (body é o flex container
   dela, display:flex) — sticky só consegue prender o item enquanto a caixa
   que o contém ainda intersecta o viewport. Passado 1 viewport de scroll, a
   caixa do body (100vh) já saiu inteira por cima, e a sidebar "solta" com
   ela, parecendo estática (mostra só o trecho que por acaso ficou nos
   últimos 100vh de conteúdo, com fundo vazio embaixo). `min-height: 100vh`
   deixa o body crescer até a altura real da página em conteúdo longo (tela
   cheia continua em página curta, via flex `align-items:stretch`), e a
   sidebar então gruda no topo do scroll a página inteira, como devia. */
html, body { min-height: 100vh; }

/* 27/08/2026 (auditoria de UX/layout, achados 1.2/7.1): nenhum elemento
   focável tinha estado de foco por TECLADO - só `:hover`. Usuário de
   teclado navegava sem nenhuma pista visual de onde estava. `:focus-visible`
   (não `:focus`) evita o anel aparecer em clique de mouse, só em Tab/teclado.
   `var(--navy)` funciona bem contra fundos claros (--bg/--card-bg nos dois
   temas); dentro da sidebar (fundo navy escuro) e do seletor de tema, o
   mesmo azul ficaria pouco visível - usa `--gold` ali, o mesmo tom já usado
   pro item de menu ativo (nav-active). */
:focus-visible { border-radius: 4px; }


body { margin: 0; }

/* ============ Sidebar ============ */
.sidebar { inset: 0 auto 0 0; }
.content { transition: margin-left .15s ease; }
/* Recolher menu lateral (pedido do Rodrigo, 24/08/2026): classe no <html>
   (mesmo padrão do tema, aplicada ANTES do paint pra não piscar) - largura
   estreita mostra só os ícones, e o botão-alça na borda alterna o estado. */





html.sidebar-collapsed .content { margin-left: var(--sidebar-w-collapsed); }
html.sidebar-collapsed .side-brand { padding-left: 0; padding-right: 0; }

html.sidebar-collapsed .side-brand .brand-sub { display: none; }
html.sidebar-collapsed .side-nav a {
  width: 38px; overflow: hidden; white-space: nowrap; padding: 10px; gap: 0;
  justify-content: center;
}
html.sidebar-collapsed .side-nav a .nav-label { display: none; }




html.sidebar-collapsed .theme-switcher .theme-btn { width: 34px; overflow: hidden; white-space: nowrap; text-align: center; }

.side-brand {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 14px; border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.08));
  flex-shrink: 0;
}
.side-brand .brand-logo { width: 132px; height: auto; display: block; transition: width .15s ease; border-radius: 10px; margin-bottom: 6px; }
.side-brand .brand-icon { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); flex-shrink: 0; }
.side-brand .brand-mark { color: var(--text); font-weight: 800; letter-spacing: .05em; font-size: 18px; }
.side-brand .brand-title { color: var(--text); font-size: 20px; font-weight: 700; margin-bottom: 2px; }

.side-brand .brand-sub { margin-top: 1px; }

.side-nav {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; flex: 1 1 0px; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 12px 10px;
}
.side-nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid transparent; transition: all .13s ease;
}
.side-nav a svg { flex-shrink: 0; opacity: .85; }
.side-nav a:hover { color: var(--text); background: var(--surface-2, rgba(0,0,0,.04)); }
.side-nav a.nav-active {
  color: var(--text); background: var(--surface-2, rgba(216,178,60,.12)); border-left-color: var(--gold);
}



.side-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 0; }
.side-user .who { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user a { color: var(--violet, var(--navy)); font-size: 13px; font-weight: 700; text-decoration: none; }
.side-user a:hover { color: var(--text); }

/* ============ Conteúdo ============ */
.content { margin-left: var(--sidebar-w); min-height: 100vh; }
main { max-width: 1080px; margin: 0 auto; padding: 34px 28px 70px; }

h1 { font-size: 24px; font-weight: 800; margin: 4px 0 22px; color: var(--text); letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
h4 { font-size: 13px; font-weight: 700; margin: 20px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ============ Tabelas ============ */
table { background: var(--card-bg); box-shadow: 0 1px 3px rgba(16,24,40,.07); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { text-transform: uppercase; }

tbody tr { transition: background .1s ease; }
tbody tr:hover { background: rgba(0,0,0,.02); }

/* ============ Botões ============ */
.btn { cursor: pointer; }
.btn:hover { filter: brightness(1.07); }


/* 27/08/2026 (auditoria de UX/layout, achado 7.2): não é problema de
   contraste de TEXTO (texto escuro sobre --border já é bem legível) - é
   --border ficar visualmente quase igual a --card-bg (a superfície do
   card), então o botão "não parece botão". A borda com --muted separa as
   duas superfícies sem mudar a paleta. */




/* ============ Cards ============ */
.card { margin-bottom: 20px; }
.card > h3 { margin-bottom: 2px; }
.card > p { margin-top: 4px; }

/* ============ Formulários ============ */
label { opacity: .8; }
input[type=text], input[type=email], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box;
  font-size: 14px; background: var(--card-bg); color: var(--text); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,61,110,.12);
}
.filter-row { display: grid; grid-template-columns: 1fr 1fr 120px 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
form.inline { display: inline; }

/* ============ Tags / Pills ============ */
.tag { font-weight: 600; margin: 0 4px 4px 0; }

.status-ok, .pill-ok { color: var(--ok-text); background: rgba(31,163,90,.12); }
.status-off, .pill-off { color: var(--muted); background: rgba(110,114,120,.12); }

.status-ok, .status-off { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }

/* ============ Quadro da Visão geral: Personalizar + indicadores do assistente (28/09/2026) ============ */
.quadro-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.quadro-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--card-bg); }
.quadro-item.is-arrastando { opacity: .45; }
.quadro-alca { cursor: grab; color: var(--muted); font-size: 12px; letter-spacing: -2px; user-select: none; }
.quadro-rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; flex: 1 1 220px; }
.quadro-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--tag-bg); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.quadro-desc { font-size: 12px; color: var(--muted); flex: 1 1 200px; }
.quadro-botoes { display: inline-flex; gap: 4px; margin-left: auto; }
.quadro-botoes .btn-mini { margin-top: 0; min-width: 26px; padding: 2px 7px; font-size: 12px; border-radius: 6px; }
.quadro-marcador { height: 3px; border-radius: 2px; background: var(--accent); list-style: none; }
.quadro-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kpi-usuario .kpi-contexto { margin-top: 6px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Histórico recente (Insights e relatórios, 28/09/2026) ============ */
.hist-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hist-cab h3 { margin: 0; }
.hist-tabela td { vertical-align: top; }
.hist-quando { white-space: nowrap; }
.hist-arquivos { list-style: none; margin: 6px 0 0; padding: 0; }
.hist-arquivos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 3px 0; }
.hist-arquivos li span { flex: 1 1 220px; }
.hist-arquivos a { font-size: 12px; font-weight: 600; white-space: nowrap; }
.hist-mais summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ============ Busy overlay ============ */
#busy-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--overlay-bg); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
.busy-box {
  background: var(--card-bg); border-radius: 14px; padding: 30px 38px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); max-width: 420px; margin: 0 16px;
}
.busy-spinner {
  width: 42px; height: 42px; margin: 0 auto;
  border: 4px solid var(--border); border-top-color: var(--navy); border-radius: 50%;
  animation: busy-spin .9s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* ============ Toast notifications ============ */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 99999;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--toast-bg); color: var(--toast-text);
  padding: 14px 18px; border-radius: 11px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 10px;
  animation: toast-in .3s ease;
  max-width: 380px;
}
.toast.toast-success { border-left: 4px solid var(--green); }
.toast.toast-error { border-left: 4px solid var(--red); }
/* 27/08/2026 (auditoria de UX/layout, achado 3.3): a única pista visual do
   tipo era a faixa lateral de 4px - fácil de não notar. `::before` não
   mexe no `el.textContent` que o JS já usa (o ícone é conteúdo GERADO,
   nunca faz parte do texto lido). `.toast` já é `display:flex`, então o
   pseudo-elemento entra como o 1º item da fileira, com o `gap` existente. */
.toast.toast-success::before { content: "✅"; flex-shrink: 0; }
.toast.toast-error::before { content: "⚠️"; flex-shrink: 0; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Modal de confirmação ============ */
#confirm-modal {
  display: none; position: fixed; inset: 0; z-index: 99998;
  background: var(--overlay-bg); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
.confirm-box {
  background: var(--card-bg); border-radius: 14px; padding: 28px 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); max-width: 440px; margin: 0 16px;
  text-align: center;
}
.confirm-box h3 { margin: 0 0 6px; }
.confirm-box p { margin: 6px 0 18px; color: var(--muted); font-size: 14px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }

/* ============ Seletor de Tema ============ */
.theme-switcher {
  display: flex; align-items: center; justify-content: space-around; gap: 4px;
  margin-top: 10px; padding: 4px; background: var(--surface-2, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.12)); border-radius: 999px;
}
.theme-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .12s ease; display: inline-flex; align-items: center; gap: 3px;
}
.theme-btn:hover { color: var(--text); background: var(--surface-2, rgba(0, 0, 0, 0.05)); }
.theme-btn.active { color: var(--text); background: var(--card-bg, #ffffff); border-color: var(--border-soft); font-weight: 700; }

/* ============ Tablet em paisagem (27/08/2026, auditoria de UX/layout,
   achado 6.1) ============
   Antes só existia UM corte em 900px: entre isso e ~1120px (tablet em
   paisagem, janela desktop estreita) a sidebar de 236px ainda fixa deixava
   o conteúdo espremido. Reduz só a LARGURA da sidebar (a variável que já
   governa `.sidebar{width}` e `.content{margin-left}`) - não precisa
   duplicar nenhuma regra de layout. */
@media (max-width: 1120px) and (min-width: 901px) {
  :root { --sidebar-w: 190px; }
  .side-nav a { font-size: 13px; padding: 9px 10px; gap: 8px; }
  .side-brand .brand-logo { width: 104px; }
}

/* ============ Mobile ============ */
@media (max-width: 900px) {
  /* 13/08/2026: no celular a barra lateral vira um cabeçalho no topo. Tudo
     empilhado e CENTRADO - a versão anterior deixava a marca encostada à
     esquerda enquanto o menu vinha centrado logo abaixo, e o desencontro dos
     dois eixos era o que fazia o cabeçalho parecer quebrado. A logo também
     encolhe: 132px domina uma tela de 375px. */
  .sidebar, html.sidebar-collapsed .sidebar { position: static; width: auto; flex-direction: column; align-items: center; padding: 12px 14px; gap: 10px; }
  .side-brand { border: none; padding: 0; gap: 2px; }
  .side-brand .brand-logo, html.sidebar-collapsed .side-brand .brand-logo { width: 96px; }
  .side-brand .brand-sub { display: none; }
  .side-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; width: 100%; gap: 2px 4px; }
  .side-nav a, html.sidebar-collapsed .side-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 7px 9px; font-size: 12px; white-space: nowrap; width: auto; overflow: visible; }
  .side-nav a.nav-active { border-left: none; border-bottom-color: var(--gold); background: none; }
  .side-actions, .side-user .who { display: none; }
  /* No celular a barra lateral vira cabeçalho fixo no topo - recolher não faz
     sentido nesse layout, e a alça (posicionada pro modo desktop) sairia
     fora do lugar. */
  .sidebar-toggle-btn { display: none; }
  /* o espaçamento já vem do `gap` da barra; sem isto o botão de tema fica
     descolado do menu. */
  .theme-switcher, html.sidebar-collapsed .theme-switcher { margin-top: 0; flex-direction: row; }
  .theme-switcher .theme-btn, html.sidebar-collapsed .theme-switcher .theme-btn { width: auto; overflow: visible; }
  .content, html.sidebar-collapsed .content { margin-left: 0; }
  main { padding: 20px 14px 50px; }
  /* 27/08/2026 (auditoria de UX/layout, achado 6.2): scroll horizontal
     SILENCIOSO - nada indicava que colunas continuavam fora da tela.
     Sombra fixa na borda direita interna, sempre visível (não depende de
     JS rastreando a posição do scroll) - dica de "tem mais pra cá". */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; box-shadow: inset -14px 0 10px -10px rgba(0,0,0,.22); }
  /* 27/08/2026 (auditoria de UX/layout, achado 6.4): empilhado em 1 coluna,
     o `gap:8px` da base fica apertado sem nenhuma margem extra entre os
     campos. */
  .filter-row { grid-template-columns: 1fr; gap: 14px; }
  /* 27/08/2026 (achado 6.5): no rodapé (bottom:16px) o toast podia cobrir o
     botão "Baixar" de tabelas de relatório perto do fim da tela - no
     celular a área útil é curta o bastante pra isso ser comum. Topo é mais
     seguro: sobra tela abaixo pra qualquer ação de rodapé continuar clicável. */
  #toast-container { top: 16px; right: 16px; left: 16px; bottom: auto; flex-direction: column; }
  .toast { max-width: 100%; }
}

/* 27/08/2026 (auditoria de UX/layout, achado 6.3): o menu mobile usa
   `flex-wrap` com `white-space: nowrap` por item - em telas MUITO estreitas
   (ex: iPhone SE, 375px), um rótulo longo como "Meus Insights e Relatórios"
   (perfil leitor) sozinho já ocupa boa parte da largura, empurrando o resto
   pra uma 2ª linha desalinhada. Reduz fonte/padding só abaixo de 400px, sem
   quebrar o texto do item em si (permitir quebra faria o pill de cada item
   crescer em altura de forma desigual). */
@media (max-width: 400px) {
  .side-nav a, html.sidebar-collapsed .side-nav a { font-size: 11px; padding: 6px 7px; }
}

/* ---------------------------------------------------------------------------
   Relatório Dinâmico (ad hoc) — 15/08/2026.
   Tema-aware por construção: só usa as variáveis já definidas no :root e no
   bloco dark (nunca cor fixa clara — lição da auditoria de 02/08).
   --------------------------------------------------------------------------- */
.adhoc-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.adhoc-hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

/* Montagem em áreas, como a tabela dinâmica do Excel (28/09/2026, pedido do
   Pedro): campos à esquerda; Linhas, Valores e Filtros à direita. Os botões
   de cada campo fazem o mesmo que arrastar (teclado e celular). Botão
   "na lista" só aparece em Campos; botão "na área", só dentro de uma área. */
.pivot { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.6fr); gap: 16px; margin-top: 12px; align-items: start; }
.pivot h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pivot-campos { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--input-alt-bg, transparent); }
.pivot-grupo { font-size: 11px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.pivot-lista { display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.pivot-areas { display: flex; flex-direction: column; gap: 12px; }
.pivot-area { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; }
.pivot-area.is-alvo { border-color: var(--accent); background: var(--tag-bg); }
.pivot-area.is-recusa { opacity: .55; }
.pivot-drop { display: flex; flex-direction: column; gap: 6px; min-height: 38px; }
.pivot-vazio { margin: 0; padding: 9px 4px; font-size: 12px; color: var(--muted); }
.pivot-chip { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--card-bg); }
.pivot-chip.is-arrastando { opacity: .45; }
.pivot-chip-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: grab; }
.pivot-alca { color: var(--muted); font-size: 12px; letter-spacing: -2px; user-select: none; }
.pivot-nome { flex: 1 1 auto; font-size: 13px; font-weight: 600; }
.pivot-botoes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pivot-botoes .btn-mini { margin-top: 0; min-width: 26px; padding: 2px 7px; font-size: 12px; line-height: 1.4; border-radius: 6px; }
.pivot-lista .js-na-area, .pivot-drop .js-na-lista { display: none; }
.pivot-marcador { height: 3px; border-radius: 2px; background: var(--accent); }
/* No celular as áreas vêm antes da lista de campos: o resultado da montagem fica à vista. */
@media (max-width: 760px) { .pivot { grid-template-columns: 1fr; } .pivot-areas { order: -1; } }
.adhoc-filtro-resumo { display: block; font-size: 11px; color: var(--accent); margin-top: 4px; }
.adhoc-filtro-box { margin-top: 8px; }
.adhoc-filtro-box input[type="search"] { width: 100%; padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); }
.adhoc-valores { max-height: 190px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
/* Duas classes de propósito: os valores da lista não podem herdar o estilo
   do título do campo (saíam grandes e em negrito — Pedro, 15/08/2026). */
.adhoc-valores .check-valor {
  display: flex; align-items: center; gap: 7px; padding: 3px 2px; cursor: pointer;
  font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--text);
  border-radius: 4px;
}
.adhoc-valores .check-valor:hover { background: var(--tag-bg); }
.adhoc-valores .check-valor input { flex: 0 0 auto; margin: 0; }
.adhoc-valores .check-valor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-mini { margin-top: 6px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; }
.btn-mini:hover { border-color: var(--accent); color: var(--accent); }


.adhoc-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.tabela-scroll { overflow-x: auto; margin-top: 10px; }
#previa-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#previa-tabela tr.linha-total td { font-weight: 700; border-top: 2px solid var(--border); background: var(--tag-bg, transparent); }

/* .feedback vivia só dentro de actions.html (15/08/2026): qualquer tela nova
   que usasse a classe saía SEM ESTILO. Promovido ao CSS global; o bloco do
   actions.html continua lá, inofensivo (mesmas regras). A variante -alerta é
   nova, pro aviso de volume alto do Relatório Dinâmico. */
.feedback { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.feedback-ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.feedback-erro { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }
.feedback-alerta { background: var(--tag-bg); color: var(--text); border: 1px solid var(--accent); }
/* 27/08/2026 (achado MEDIUM de auditoria): #busy-msg.is-error substitui um
   hex fixo (#c0392b) aplicado via JS, que não respeitava o tema escuro. */
#busy-msg.is-error { color: var(--danger-text); }
.adhoc-periodo { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.adhoc-periodo label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.adhoc-periodo select { padding: 7px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); min-width: 160px; }
.adhoc-valores-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding: 0 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* Biblioteca de relatórios (16/08/2026) — no celular a tabela não cabe e o
   botão "Baixar", que é a AÇÃO da tela, ficava fora do viewport: só aparecia
   para quem descobrisse a rolagem horizontal. Abaixo de 640px as colunas de
   apoio saem; a competência já está no filtro do topo e o canal é secundário. */
.col-hora { white-space: nowrap; color: var(--text-muted, var(--muted)); font-size: 13px; }

/* 09/09/2026 (pedido do Pedro): a hora do envio precisa continuar visível
   no celular - por isso NÃO tem a classe `.col-apoio` (que soma abaixo). É
   só um horário curto ("14:08"), não empurra o botão "Baixar" pra fora
   como Competência/Enviado por empurravam. */
@media (max-width: 640px) {
  .col-apoio { display: none; }
  /* Só esconder as colunas não bastou: o nome do documento não quebrava e
     continuava empurrando o botão para fora. */
  .tabela-relatorios th, .tabela-relatorios td { padding: 10px; font-size: 13px; }
  .tabela-relatorios .col-nome { white-space: normal; overflow-wrap: anywhere; }
}

/* Tooltips instantâneos no menu lateral recolhido */
html.sidebar-collapsed .side-nav a {
  position: relative;
}
html.sidebar-collapsed .side-nav a::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--toast-bg);
  color: var(--toast-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
html.sidebar-collapsed .side-nav a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(12px);
}

/* Dígitos Tabulares para alinhamento profissional de moedas e métricas */
.tabular-nums, .kpi-value, .kpi-sub, .unit-real, .unit-pct, .unit-meta, table td, table th {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* Glassmorphism Toolbar no Power BI */
.bi-toolbar-glass {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(15, 61, 110, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(15, 61, 110, 0.08) !important;
  padding: 6px 12px !important;
}
html[data-theme="dark"] .bi-toolbar-glass {
  background: rgba(26, 38, 57, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Sparklines SVG em Cards de KPI */
.sparkline-wrap {
  width: 100%;
  height: 34px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.sparkline-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Wizard, etapa 7 (29/09/2026): formato Tabela não usa rótulos nem cores */
form:has(input[name="valor"][value="table"]:checked) .wg-opcoes-visuais { display: none; }