/* ─────────────────────────────────────────────────────────────────────────────
   Real Connect - Design System v4.0
   Fonts: Poppins (display + UI / enterprise body)
   Stack: Bootstrap 5 + Bootstrap Icons
   2026 · Premium SaaS Dashboard
───────────────────────────────────────────────────────────────────────────── */

/* Fontes self-hosted (LGPD, sem envio de IP ao Google): fonts.css e linkado
   direto nos templates base (base.html e mural/_embed_base.html). @import
   aqui serializava o download: style.css -> fonts.css -> woff2. */

/* ── Tokens ── */
:root {
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Brand palette - Real Connect (Midnight Blue #061F76 + Pumpkin Spice #FF6A0F) */
  --blue-50:  #eef1fb;
  --blue-100: #dde3f7;
  --blue-200: #b9c5ef;
  --blue-400: #5b7fe6;
  --blue-500: #1e46b0;
  --blue-600: #061f76;
  --blue-700: #041559;
  --blue-900: #030f42;

  --orange-50:  #fff2ea;
  --orange-100: #ffe1cf;
  --orange-400: #ff8a45;
  --orange-500: #ff6a0f;
  --orange-600: #d9540a;

  /* Semantic - Light */
  --cor-primaria:       #061f76;
  --cor-primaria-light: #eef1fb;
  --cor-primaria-mid:   #1e46b0;
  --cor-primaria-dark:  #041559;
  --cor-destaque:       #ff6a0f;
  --cor-destaque-mid:   #ff8a45;
  --cor-destaque-dark:  #d9540a;
  --cor-destaque-light: #fff2ea;

  /* Reações da Comunidade Real - tons sóbrios (corporativo clean),
     no lugar dos hex vibrantes cravados que existiam no feed. */
  --cor-reacao-like: var(--cor-primaria);
  --cor-reacao-amei: #c2476b;
  --cor-reacao-fogo: var(--cor-destaque);
  --cor-reacao-top:  #c08a1e;
  --cor-reacao-amei-bg: #fbeef2;
  --cor-reacao-fogo-bg: var(--cor-destaque-light);
  --cor-reacao-top-bg:  #fbf3df;

  /* Avatares por iniciais - 6 tons sólidos dessaturados (família navy/slate),
     texto branco. Substituem os gradientes vibrantes. */
  --cor-av-0: #3b5b8c;
  --cor-av-1: #4a6f6b;
  --cor-av-2: #6b5b82;
  --cor-av-3: #8a6a4c;
  --cor-av-4: #4f6388;
  --cor-av-5: #417a6c;

  /* Refined neutrals - v4 upgrade */
  --cor-surface:        #ffffff;
  --cor-surface-raised: #f6f8fd;
  --cor-surface-overlay:#edf1fa;
  --cor-body:           #edf1f7;          /* was #c8d3e8 - too saturated */
  --cor-border:         #e2e8f4;          /* was #d0d9ec - lighter */
  --cor-border-focus:   #5b8ff5;
  --cor-text:           #0c1a36;
  --cor-text-muted:     #4a5674;
  --cor-text-subtle:    #8e9ab5;          /* slightly lighter */

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #061f76 0%, #1e46b0 100%);
  --gradient-destaque: linear-gradient(135deg, #ff6a0f 0%, #ff8a45 100%);
  --gradient-brand:    linear-gradient(135deg, #061f76 0%, #ff6a0f 160%);
  --gradient-surface:  linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  --gradient-hero:     linear-gradient(125deg, #0c1a36 0%, #061f76 55%, #ff6a0f 140%);

  /* v4 - premium elevation */
  --shadow-xs: 0 1px 2px rgba(12,26,54,.04);
  --shadow-sm: 0 1px 4px rgba(12,26,54,.06), 0 1px 2px rgba(12,26,54,.04);
  --shadow-md: 0 4px 16px rgba(12,26,54,.09), 0 2px 4px rgba(12,26,54,.05);
  --shadow-lg: 0 14px 36px rgba(12,26,54,.11), 0 4px 8px rgba(12,26,54,.05);
  --shadow-xl: 0 28px 64px rgba(12,26,54,.13), 0 8px 18px rgba(12,26,54,.06);
  --shadow-card: 0 2px 8px rgba(12,26,54,.06), 0 1px 3px rgba(12,26,54,.04);
  --shadow-primary:  0 4px 16px rgba(27,70,150,.28);
  --shadow-destaque: 0 4px 16px rgba(255,85,33,.30);

  /* Layout */
  --sidebar-width:     264px;
  --sidebar-collapsed: 66px;
  --topbar-height:     60px;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Type scale - 8 degraus fixos (fim do font-size na mao) */
  --fs-2xs: .6875rem;   /* 11px - micro-labels, badges */
  --fs-xs:  .75rem;     /* 12px - meta, captions */
  --fs-sm:  .875rem;    /* 14px - corpo secundario, tabelas */
  --fs-md:  1rem;       /* 16px - corpo padrao */
  --fs-lg:  1.125rem;   /* 18px - subtitulo */
  --fs-xl:  1.375rem;   /* 22px - titulo de secao */
  --fs-2xl: 1.75rem;    /* 28px - titulo de pagina */
  --fs-3xl: 2.25rem;    /* 36px - display */

  /* Space scale - base 4px, ritmo unico */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-8: 3rem;

  /* Motion */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    350ms;
  --transition:  var(--dur-base) var(--ease-out);
  --transition-spring: var(--dur-slow) var(--ease-spring);
}

/* ── Dark ── */
[data-theme="dark"] {
  --cor-body:           #080c17;
  --cor-surface:        #0f1624;
  --cor-surface-raised: #172035;
  --cor-surface-overlay:#1e2840;
  --cor-border:         #232f48;
  --cor-border-focus:   #5b8ff5;
  --cor-text:           #e6ecf8;
  --cor-text-muted:     #7f8fa8;
  --cor-text-subtle:    #3a4a62;
  /* Azul de marca CLAREADO no dark: como texto/icone, o navy #061f76 ficava
     invisivel sobre os chips escuros (--cor-primaria-light #131f3a) - seta dos
     cards do hub, badge-bot, .text-primary, tabs, hovers. O gradiente de marca
     (--gradient-primary) e token separado e NAO muda. Fundos solidos primarios
     (btn-primary/badges) ficam um tom mais vivos, com texto branco legivel. */
  --cor-primaria:       #6f8fe6;
  --cor-primaria-light: #131f3a;
  --cor-destaque-light: #271208;
  /* Reações: rosa/ouro um pouco mais claros pra contraste no escuro. */
  --cor-reacao-amei: #e07a98;
  --cor-reacao-top:  #d9b24a;
  --cor-reacao-amei-bg: #2a1620;
  --cor-reacao-fogo-bg: #271208;
  --cor-reacao-top-bg:  #2a2310;
  --gradient-surface:   linear-gradient(180deg, #0f1624 0%, #131d30 100%);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.22);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.32);
  --shadow-md: 0 4px 18px rgba(0,0,0,.40);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.52);
  --shadow-xl: 0 28px 64px rgba(0,0,0,.64);
  --shadow-card: 0 2px 12px rgba(0,0,0,.36), 0 1px 4px rgba(0,0,0,.22);
  --bs-body-color: #e6ecf8;
  --bs-body-bg:    #080c17;
  /* Vars neutras do Bootstrap: sem remap, utilitários como .bg-body-secondary,
     .bg-body-tertiary e bordas var(--bs-border-color) caíam no cinza CLARO do
     Bootstrap dentro do dark (ex.: bloco Endereço da discadora, trilho de
     barra), virando bloco lavado. Mapeadas pros tokens de superfície. */
  --bs-secondary-bg:    var(--cor-surface-raised);
  --bs-tertiary-bg:     var(--cor-surface-overlay);
  --bs-secondary-color: var(--cor-text-muted);
  --bs-tertiary-color:  var(--cor-text-subtle);
  --bs-border-color:    var(--cor-border);
  color-scheme: dark;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* Transição só em quem tem estado interativo. A versão universal (*:not(...))
   punha transition em CADA elemento: numa tela grande (chat, tabelas longas)
   qualquer troca de classe disparava recálculo de estilo na página inteira e
   travava o celular. Elemento fora da lista muda seco, e tá certo assim. */
a, button, input, select, textarea, label, summary, tr, td, th,
.form-control, .form-select, .form-check-input, .badge, .dropdown-item,
.dropdown-menu, .nav-link, .page-link, .list-group-item, .toast, .alert,
.modal-content, .card-header, .accordion-button, .periodo-chip,
.topbar-toggle, .theme-toggle, .topbar-moedas, .nov-sino-btn, .nov-sino-item,
.sidebar-group-toggle, .sidebar-modulo-item, .sidebar-modulo-toggle,
.bottom-nav-link, .status-plataforma-badge, .chat-opcao-chip, .chat-trocar-btn {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out),
    opacity          var(--dur-fast) var(--ease-out);
}

/* Troca de página em fade no lugar do branco entre uma tela e outra. Só onde o
   navegador tem a API; nos demais, navegação normal. */
@view-transition { navigation: auto; }
/* O cross-fade padrão dura 250ms e segurava a tela nova na mão: com 150ms a
   troca cobre o branco sem dar sensação de espera. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Linha de tabela longa: o navegador só desenha o que está perto da tela. Em
   lista de centenas de clientes é o que segura o custo da primeira pintura. */
.table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 56px; }

/* ── Base ── */
/* Shell fixo: o documento não rola; sidebar/topbar/fundo ficam travados e
   só a área de conteúdo (.main-content) rola de verdade. */
/* A cor de fundo também no <html>: com viewport-fit=cover o body fixo não
   alcança a faixa do indicador de gestos do iPhone, e o que sobrava ali era o
   branco do navegador — a "faixa vazia" embaixo da barra inferior. Pintado
   aqui, o que sobra tem a cor da página e some da vista. */
html { height: 100%; background-color: var(--cor-body); }
body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--cor-body);
  background-image:
    radial-gradient(ellipse 1000px 700px at 100% -5%,  rgba(255,85,33,.12) 0%, transparent 60%),
    radial-gradient(ellipse 1200px 900px at -5% 105%, rgba(27,70,150,.18) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--cor-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv11","kern";
  font-variant-ligatures: common-ligatures;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 1200px 800px at 100% 0%, rgba(27,70,150,.12) 0%, transparent 65%),
    radial-gradient(ellipse 900px 700px at 0% 100%, rgba(255,85,33,.08) 0%, transparent 65%),
    linear-gradient(rgba(59,111,216,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,111,216,.025) 1px, transparent 1px);
  background-size: auto auto, auto auto, 48px 48px, 48px 48px;
  background-color: var(--cor-body);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.25;
  font-variation-settings: "opsz" 64;
  color: var(--cor-text);
}

.text-num,
.kpi-value,
.table td,
.table th,
code,
pre {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Dark: o rosa padrao do Bootstrap (#d63384) fica baixo contraste no escuro */
[data-theme="dark"] code { color: #f48fb1; }

/* ── Colour utilities ── */
.bg-primary, .navbar.bg-primary { background: var(--gradient-primary) !important; }
.text-primary  { color: var(--cor-primaria) !important; }
.text-destaque { color: var(--cor-destaque) !important; }
[data-theme="dark"] .text-primary { color: #7eb3ff !important; }
[data-theme="dark"] .text-success { color: #4ade80 !important; }
.text-success  { color: #16a34a !important; }

/* Tooltip no modo escuro: o Bootstrap 5.3 usa --bs-tooltip-color: var(--bs-body-bg),
   que no tema escuro fica escuro -> texto some no fundo escuro ("tudo preto").
   Força cores legíveis. */
[data-theme="dark"] .tooltip {
  --bs-tooltip-bg: #2d3340;
  --bs-tooltip-color: #f0f4fb;
}
[data-theme="dark"] .tooltip-inner {
  background-color: #2d3340;
  color: #f0f4fb;
}

/* Tooltip do card "Cancelados" (relatórios): lista valor + status + motivo */
.tt-cancelados .tooltip-inner { max-width: 340px; text-align: left; }
.tt-cancel-item { padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.tt-cancel-item:last-child { border-bottom: none; }
.tt-cancel-motivo { font-size: .78em; opacity: .8; }

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(226,232,244,.9);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  box-shadow: 1px 0 0 rgba(226,232,244,.9), 4px 0 24px rgba(12,26,54,.05);
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #0f1624 0%, #0d1320 100%);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 1px 0 0 rgba(35,47,72,.8), 6px 0 40px rgba(0,0,0,.6);
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.125rem;
  height: var(--topbar-height);
  border-bottom: 1px solid var(--cor-border);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.025em;
  white-space: nowrap;
  background: linear-gradient(135deg, #0e2d6b 0%, #061f76 45%, #2c5bbf 70%, #061f76 100%);
  background-size: 280% 280%;
  animation: brandShimmer 14s ease infinite;
  color: #fff;
  position: relative;
}
.sidebar-brand::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.sidebar-brand i {
  font-size: 1.3rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.3));
}
@keyframes brandShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.sidebar-brand-text {
  transition: opacity var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.sidebar.collapsed .sidebar-brand-text { opacity: 0; width: 0; overflow: hidden; }

/* Logo oficial branca (o .sidebar-brand tem fundo navy nos dois temas) */
.sidebar-brand-logo {
  width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  margin: 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sidebar.collapsed .sidebar-brand-logo { display: none; }
/* colapsada mostra só o símbolo (elo). Largura fixa cabe nos 66px (o elo é
   largo, ~1.46:1; travar por altura estourava e cortava). */
.sidebar-brand-simbolo { display: none; width: 36px; height: auto; max-width: 100%; object-fit: contain; }
.sidebar.collapsed .sidebar-brand { padding-left: 0; padding-right: 0; justify-content: center; }
.sidebar.collapsed .sidebar-brand-simbolo { display: block; margin: 0 auto; }

/* Nav area */
.sidebar-nav {
  flex: 1;
  /* min-height: 0 é o que FAZ o overflow-y funcionar. Item de coluna flex
     nasce com min-height:auto e não encolhe abaixo do próprio conteúdo: com o
     menu cheio, o nav ficava do tamanho da lista inteira, o overflow:hidden da
     sidebar cortava o excesso e o scroll nunca chegava a existir. Era por isso
     que o menu não descia no celular, e não por causa do gesto. */
  min-height: 0;
  padding: .5rem .5rem .625rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--cor-border) transparent;
}

/* ── Seletor de módulo (topo da sidebar) ── */
.sidebar-modulo { position: relative; margin: var(--sp-3) var(--sp-2) var(--sp-3); }
.sidebar-modulo-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  background: var(--cor-surface-raised);
  border: 1px solid var(--cor-border);
  border-radius: 10px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--cor-text);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sidebar-modulo-toggle:hover { border-color: var(--cor-primaria); }
.sidebar-modulo-label {
  position: absolute;
  top: -7px;
  left: 12px;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cor-text-subtle);
  background: var(--cor-sidebar, var(--cor-surface));
  padding: 0 4px;
  border-radius: 4px;
}
.sidebar-modulo-atual {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.sidebar-modulo-atual i { color: var(--cor-primaria); }
.sidebar-modulo-chevron { color: var(--cor-text-subtle); font-size: .8rem; flex-shrink: 0; }
.sidebar-modulo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(13, 23, 51, .18);
  padding: 4px;
}
.sidebar-modulo-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--cor-text);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-modulo-item:hover { background: var(--cor-primaria-light); color: var(--cor-primaria); }
.sidebar-modulo-item.ativo { color: var(--cor-primaria); font-weight: 700; }
.sidebar-modulo-item i:first-child { width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-modulo-check { margin-left: auto; font-size: .8rem; }
.sidebar-modulo-hub {
  border-top: 1px solid var(--cor-border);
  margin-top: 4px;
  padding-top: calc(var(--sp-2) + 4px);
  color: var(--cor-text-muted);
}
/* Rail colapsado: esconde o seletor (sem espaço útil) */
.sidebar.collapsed .sidebar-modulo { display: none; }

/* ── Department groups ── */
.sidebar-group { margin-bottom: 2px; }

.sidebar-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cor-text-subtle);
  white-space: nowrap;
  gap: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.sidebar-group-toggle:hover { color: var(--cor-primaria); }
/* Grupo aberto: ancora visual - voce sabe em que secao esta */
.sidebar-group.open > .sidebar-group-toggle { color: var(--cor-primaria); }
.sidebar-group-toggle span:not(.badge) { flex: 1; text-align: left; }
.sidebar-group-toggle .badge { flex: 0 0 auto; }

/* Dept icon pill */
.sidebar-group-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
  background: var(--cor-surface-raised);
  border: 1px solid var(--cor-border);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sidebar-group.open .sidebar-group-icon {
  background: var(--cor-primaria-light);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}
[data-theme="dark"] .sidebar-group-icon {
  background: rgba(93,140,255,.15);
  border-color: rgba(93,140,255,.30);
  color: #93b4ff;
}
[data-theme="dark"] .sidebar-group.open .sidebar-group-icon {
  background: rgba(59,111,216,.30);
  border-color: rgba(93,140,255,.60);
  color: #b8d0ff;
}

.sidebar-group-chevron {
  font-size: .58rem;
  opacity: .5;
  transition: transform .22s ease, opacity .22s ease;
  flex-shrink: 0;
}
.sidebar-group.open .sidebar-group-chevron {
  transform: rotate(180deg);
  opacity: .9;
}

.sidebar-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.sidebar-group.open .sidebar-group-items { max-height: 800px; }

/* Sub-rótulo de seção dentro de um grupo da sidebar (ex.: RealChat:
   Operação / Disparos / Administração). */
.sidebar-sublabel {
  display: block;
  padding: .55rem .7rem .15rem 1.85rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cor-text-subtle);
  white-space: nowrap;
}
.sidebar.collapsed .sidebar-sublabel { display: none; }

.sidebar.collapsed .sidebar-group-toggle {
  display: flex;
  justify-content: center;
  /* Mesma caixa 44px centrada dos .sidebar-link (comunidade/ajuda/perfil), pra
     TODOS os ícones do rail alinharem no mesmo eixo. Antes o toggle usava
     padding e caía num x diferente dos links. */
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 1px auto;
  box-sizing: border-box;
  /* Rail colapsado: o toggle vira atalho clicável pro tab principal do depto
     (a expansão do accordion não faz sentido sem os itens visíveis). */
  pointer-events: auto;
  cursor: pointer;
}
/* Ícone da Comunidade é um .sidebar-link (não um toggle), então herdava
   .sidebar-link i (1rem/20px) e saía maior e mais estreito que os ícones de
   depto. Força o mesmo tratamento do pill de depto nos dois estados. */
.sidebar-link .sidebar-group-icon { font-size: .72rem; width: 20px; height: 20px; }
.sidebar.collapsed .sidebar-link .sidebar-group-icon {
  width: 36px; height: 36px; font-size: 1.05rem;
}
.sidebar.collapsed .sidebar-group-toggle span,
.sidebar.collapsed .sidebar-group-chevron { display: none; }
.sidebar.collapsed .sidebar-group-items { max-height: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-group-icon {
  width: 36px;
  height: 36px;
  font-size: 1.05rem;
  border-radius: 8px;
}
/* Colapsada: badge some - sinaliza tarefa atrasada deixando o ícone do depto vermelho */
.sidebar.collapsed .sidebar-group-toggle:has(.badge) .sidebar-group-icon {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

[data-theme="dark"] .sidebar-group-toggle { color: #8aaad6; }
[data-theme="dark"] .sidebar-group-toggle:hover { color: #c8deff; }

/* ── Nav links ── */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .44rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--cor-text-muted);
  text-decoration: none;
  font-size: .828rem;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 1px;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out),
    transform  var(--dur-fast) var(--ease-out);
}
.sidebar-link:hover {
  background: rgba(27,70,150,.06);
  color: var(--cor-primaria);
}

.sidebar-group-items .sidebar-link {
  padding-left: 1.85rem;
  margin-left: .35rem;
}
.sidebar-group-items .sidebar-link::after {
  content: '';
  position: absolute;
  left: .85rem;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--cor-border);
  opacity: .6;
}
[data-theme="dark"] .sidebar-group-items .sidebar-link::after {
  background: rgba(93,140,255,.35);
}
.sidebar-link.active {
  background: linear-gradient(135deg, rgba(27,70,150,.12) 0%, rgba(59,111,216,.08) 100%);
  color: var(--cor-primaria);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(27,70,150,.12);
}
.sidebar-link.active i { color: var(--cor-destaque); }
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2.5px;
  border-radius: 0 3px 3px 0;
  background: var(--cor-destaque);
}

[data-theme="dark"] .sidebar-link:hover {
  background: rgba(59,111,216,.09) !important;
  color: #93b4ff !important;
}
[data-theme="dark"] .sidebar-link.active {
  background: rgba(59,111,216,.14) !important;
  color: #a8c4ff !important;
  box-shadow: inset 0 0 0 1px rgba(59,111,216,.16), 0 0 18px rgba(59,111,216,.06) !important;
}
[data-theme="dark"] .sidebar-link.active i { color: #7eb3ff; }
[data-theme="dark"] .sidebar-link.active::before { background: #5b8ff5; }

.sidebar-link i {
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.sidebar-link:hover i { transform: scale(1.1); }
.sidebar-link span { transition: opacity var(--dur-fast) var(--ease-out); }
.sidebar.collapsed .sidebar-link span { display: none; }
.sidebar.collapsed .sidebar-link {
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  margin: 1px auto;
}
.sidebar.collapsed .sidebar-link i {
  font-size: 1.15rem;
  width: 24px;
}
.sidebar.collapsed .sidebar-link::before { display: none; }
.sidebar.collapsed .sidebar-group-items .sidebar-link::after { display: none; }

/* Footer */
.sidebar-footer {
  border-top: 1px solid var(--cor-border);
  padding: .5rem;
}
[data-theme="dark"] .sidebar-footer { border-top-color: rgba(35,47,72,.8) !important; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--cor-text);
  transition: background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.sidebar-user:hover { background: rgba(27,70,150,.06); }
[data-theme="dark"] .sidebar-user:hover { background: rgba(59,111,216,.09) !important; }

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(27,70,150,.32);
}
[data-theme="dark"] .sidebar-avatar {
  box-shadow: 0 2px 10px rgba(59,111,216,.55), 0 0 18px rgba(59,111,216,.18) !important;
}
.sidebar-user-info {
  overflow: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.sidebar-user-name { font-size: .78rem; font-weight: 600; }
.sidebar-user-role { font-size: .67rem; color: var(--cor-text-subtle); }
.sidebar.collapsed .sidebar-user-info { opacity: 0; width: 0; }

/* ── Overlay ── */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(8,12,22,.6);
  backdrop-filter: blur(4px);
  z-index: 1035;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOPBAR
───────────────────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: rgba(250,251,255,.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--cor-border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  z-index: 1030;
  transition: left var(--dur-base) var(--ease-out);
  gap: .75rem;
  box-shadow: 0 1px 0 rgba(12,26,54,.04), 0 2px 14px rgba(12,26,54,.04);
}
.sidebar.collapsed ~ .topbar { left: var(--sidebar-collapsed); }

[data-theme="dark"] .topbar {
  background: rgba(8,12,22,.88) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom-color: rgba(35,47,72,.9) !important;
  box-shadow: 0 1px 0 rgba(35,47,72,.7), 0 4px 24px rgba(0,0,0,.45) !important;
}

.topbar-toggle {
  background: none;
  border: none;
  color: var(--cor-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: .375rem;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  display: flex;
  align-items: center;
  line-height: 1;
}
.topbar-toggle:hover { background: var(--cor-primaria-light); color: var(--cor-primaria); }
.topbar-toggle i { transition: transform var(--dur-base) var(--ease-spring); display: inline-block; }
.topbar-toggle:hover i { transform: scale(1.15); }
[data-theme="dark"] .topbar-toggle:hover { background: rgba(59,111,216,.12); color: #7eb3ff; }

.topbar-title {
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.05);
}
[data-theme="dark"] .topbar-title {
  background: linear-gradient(125deg, #7eb3ff, #c4d9ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  /* Sem isto o bloco de ações não encolhe e empurra o menu do usuário pra fora
     da tela: em 320px o dropdown do perfil ficava quase todo fora da direita,
     e não dava pra abrir. */
  min-width: 0;
}

/* Celular: as ações da topbar ficam em forma compacta pra caber. O que sai é
   rótulo, nunca função — moedas, status, novidades, tema e perfil continuam
   todos lá. Sem isto, tela com título longo ("Dashboard de Comissões...")
   empurrava o tema e o menu do usuário pra fora da direita. */
@media (max-width: 575.98px) {
  .topbar { padding: 0 .5rem; }
  .topbar-actions { gap: .3rem; }
  /* "Online" vira só a bolinha: a cor já diz o estado, e o seletor continua
     abrindo com todos os status escritos. */
  .topbar-actions .status-plataforma-badge span:not(.status-dot),
  .topbar-actions .topbar-moedas span { display: none; }
  /* Sem o rótulo do lado, a bolinha É o status: ganha um pouco de corpo pra
     continuar legível sozinha. Cor e forma vêm da regra base. */
  .topbar-actions .status-plataforma-badge .status-dot { width: 10px; height: 10px; }
  .topbar-actions .topbar-moedas { padding: 0 .5rem; }
  /* O título da topbar sai: toda tela repete esse mesmo nome no cabeçalho do
     conteúdo, e era ele que empurrava o menu do usuário pra fora da direita. */
  .topbar-title { display: none; }
  /* Ação da topbar não encolhe nem se deforma: ou cabe inteira, ou o toque
     acerta o botão errado. */
  .topbar-actions > * { flex: 0 0 auto; }
  .topbar-actions .btn { padding-left: .45rem; padding-right: .45rem; }
}

/* Contador de moedas na topbar (link pra Recompensas) */
.topbar-moedas {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 34px;
  padding: 0 .75rem;
  border-radius: var(--radius-pill);
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  color: var(--cor-text);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.topbar-moedas i { color: var(--cor-destaque); font-size: .95rem; }
.topbar-moedas:hover {
  background: var(--cor-primaria-light);
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.theme-toggle {
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  color: var(--cor-text-muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--cor-primaria-light);
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
[data-theme="dark"] .theme-toggle {
  background: rgba(15,22,36,.9) !important;
  border-color: rgba(35,47,72,.9) !important;
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(59,111,216,.18) !important;
  border-color: rgba(93,140,255,.5) !important;
  box-shadow: 0 0 16px rgba(59,111,216,.35) !important;
  color: #93b4ff !important;
}
[data-theme="dark"] .topbar .btn {
  background: rgba(15,22,36,.9) !important;
  border-color: rgba(35,47,72,.9) !important;
}
[data-theme="dark"] .topbar .btn:hover { border-color: rgba(93,140,255,.45) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADER - new in v4 ───────────────────────────────────────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cor-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header-left {}
.page-header-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--cor-text);
  margin: 0 0 .2rem;
  font-variation-settings: "opsz" 72;
}
/* Sobrou só onde o cabeçalho mostra DADO do registro (telefone, arquivo).
   Frase descritiva embaixo do título saiu de todas as telas. */
.page-header-sub {
  font-size: .8rem;
  color: var(--cor-text-muted);
  margin: 0;
}
/* Aviso operacional no cabeçalho (risco real, não descrição da tela) */
.page-header-aviso {
  font-size: .8rem;
  color: var(--cor-destaque);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   KPI E BARRA DE META (padrão nascido no Check-in Cliente, hoje usado também
   pelo Chat - manter aqui para as telas não divergirem de desenho)
───────────────────────────────────────────────────────────────────────────── */
.ci-kpi { position: relative; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--cor-border); background: var(--cor-surface); height: 100%; }
.ci-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ci-accent, var(--cor-primaria)); }
.ci-kpi .bd { padding: 1rem 1.1rem 1rem 1.25rem; }
.ci-kpi .ci-top { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-text-muted); }
.ci-kpi .ci-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: .5rem; background: color-mix(in srgb, var(--ci-accent, var(--cor-primaria)) 16%, transparent); color: var(--ci-accent, var(--cor-primaria)); font-size: .9rem; }
.ci-kpi .ci-val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1.05; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.ci-kpi .ci-sub { font-size: .72rem; color: var(--cor-text-muted); margin-top: .1rem; }
.ci-delta { display: inline-flex; align-items: center; gap: .15rem; font-size: .72rem; font-weight: 700; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.ci-delta.up { color: var(--st-ok); }
.ci-delta.down { color: var(--st-acao); }
.ci-delta.flat { color: var(--cor-text-muted); }

.ci-meta { border: 1px solid var(--cor-border); border-radius: var(--radius-md); background: var(--cor-surface); padding: .9rem 1.1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ci-meta.ok { border-color: color-mix(in srgb, var(--st-ok) 45%, var(--cor-border)); }
.ci-meta .rot { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-text-muted); white-space: nowrap; }
.ci-meta .rot i { color: var(--st-warn); font-size: 1.05rem; }
.ci-meta.ok .rot i { color: var(--st-ok); }
.ci-meta .track { flex: 1; min-width: 140px; height: .7rem; background: var(--cor-surface-overlay); border-radius: .5rem; overflow: hidden; }
.ci-meta .fill { height: 100%; border-radius: .5rem; background: linear-gradient(90deg, var(--st-warn), var(--st-ok)); }
.ci-meta.ok .fill { background: var(--st-ok); }
.ci-meta .val { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT
───────────────────────────────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  height: 100vh;
  height: 100dvh;            /* acompanha barra do navegador/teclado no mobile */
  overflow-y: auto;
  overflow-x: hidden;
  /* Coluna flex: conteúdo no topo, rodapé empurrado para a base
     (.app-footer margin-top:auto) - elimina o vão de fundo em páginas curtas. */
  display: flex;
  flex-direction: column;
  transition: margin-left var(--dur-base) var(--ease-out);
  animation: pageIn var(--dur-base) var(--ease-out) both;
}
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); }

/* Encosta o conteúdo no rodapé: corta o respiro inferior do wrapper antes dele
   (vence o .py-* !important do Bootstrap). Estilo do rodapé fica na seção FOOTER. */
.main-content > .container-fluid,
.main-content > .container { padding-bottom: .2rem !important; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .845rem;
  padding: .46rem 1.05rem;
  font-family: var(--font-body);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  letter-spacing: -.01em;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .3rem .72rem; font-size: .78rem; }
.btn-lg { padding: .62rem 1.5rem; font-size: .96rem; }

.btn-acao {
  padding: 0 !important;
  width: 2rem !important; height: 2rem !important;
  min-width: 2rem !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: .82rem !important;
  flex-shrink: 0 !important;
}
td form, .flex-acoes form { display: contents !important; }

.btn-primary {
  background: var(--cor-primaria) !important;
  border: none !important;
  box-shadow: var(--shadow-sm);
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--cor-primaria-mid) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-primary:active { transform: translateY(0) scale(.97); }

.btn-success {
  background: var(--cor-destaque) !important;
  border: none !important;
  box-shadow: var(--shadow-sm);
  color: #fff !important;
}
.btn-success:hover {
  background: var(--cor-destaque-mid) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: #fff !important;
}

/* Botão de contorno usa fundo tonal da própria cor (padrão do sistema, como
   o Exportar do Check-in), nunca transparente: sobre fundo cinza o
   transparente sumia e o botão virava só um texto com borda. */
.btn-outline-primary {
  color: var(--cor-primaria);
  border-color: color-mix(in srgb, var(--cor-primaria) 30%, transparent);
  background: color-mix(in srgb, var(--cor-primaria) 10%, var(--cor-surface));
}
.btn-outline-primary:hover {
  background: var(--cor-primaria-light);
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
[data-theme="dark"] .btn-outline-primary {
  color: #7eb3ff;
  border-color: rgba(126,179,255,.35);
  background: rgba(126,179,255,.12);
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(126,179,255,.1);
  color: #7eb3ff;
}

.btn-outline-secondary {
  color: var(--cor-text);
  border-color: var(--cor-border);
  background: var(--cor-surface-raised);
}
.btn-outline-secondary:hover {
  background: var(--cor-surface-raised);
  color: var(--cor-text);
}
[data-theme="dark"] .btn-outline-secondary { color: var(--cor-text); border-color: var(--cor-border); background: var(--cor-surface-raised); }
[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255,255,255,.05); color: var(--cor-text); }

.btn-outline-light {
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.42);
  color: #fff;
}

.btn-outline-warning { color: #d97706; border-color: color-mix(in srgb, #d97706 30%, transparent); background: color-mix(in srgb, #d97706 10%, var(--cor-surface)); }
.btn-outline-warning:hover { background: #fffbeb; }
.btn-outline-success { color: #16a34a; border-color: color-mix(in srgb, #16a34a 30%, transparent); background: color-mix(in srgb, #16a34a 10%, var(--cor-surface)); }
.btn-outline-success:hover { background: #f0fdf4; }
.btn-outline-danger  { color: #dc2626; border-color: color-mix(in srgb, #dc2626 30%, transparent); background: color-mix(in srgb, #dc2626 10%, var(--cor-surface)); }
.btn-outline-danger:hover  { background: #fef2f2; }

[data-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.12); }
[data-theme="dark"] .btn-outline-warning:hover { background: rgba(251,191,36,.1); }
[data-theme="dark"] .btn-outline-success { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.12); }
[data-theme="dark"] .btn-outline-success:hover { background: rgba(74,222,128,.1); }
[data-theme="dark"] .btn-outline-danger  { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.12); }
[data-theme="dark"] .btn-outline-danger:hover  { background: rgba(248,113,113,.1); }

.btn-check:checked + .btn-outline-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}
[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

[data-theme="dark"] .btn-primary:hover  { box-shadow: 0 6px 22px rgba(59,111,216,.55), 0 0 32px rgba(59,111,216,.22) !important; }
[data-theme="dark"] .btn-success:hover  { box-shadow: 0 6px 22px rgba(240,78,35,.5), 0 0 26px rgba(240,78,35,.18) !important; }
.progress-bar.bg-primary { background: var(--gradient-primary) !important; }
.badge.bg-primary        { background: var(--gradient-primary) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   CARDS - v4: highlight line + glassmorphism light ───────────────────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-md);
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
/* Subtle top shimmer line */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  pointer-events: none;
}
[data-theme="dark"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
.card-header {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  border-bottom: 1px solid var(--cor-border);
  background: var(--cor-surface) !important;
  padding: .85rem 1.25rem;
}
.card-body { padding: 1.25rem; }

[data-theme="dark"] .card {
  background: rgba(15,22,36,.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(35,47,72,.9) !important;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
[data-theme="dark"] .card-header {
  background: rgba(15,22,36,.95) !important;
  border-bottom-color: rgba(35,47,72,.8) !important;
}
[data-theme="dark"] .bg-white  { background: var(--cor-surface) !important; }
[data-theme="dark"] .bg-light  { background: var(--cor-surface-raised) !important; }
[data-theme="dark"] .card-header.bg-white { background: var(--cor-surface) !important; }
[data-theme="dark"] .text-dark  { color: var(--cor-text) !important; }
[data-theme="dark"] .text-muted { color: var(--cor-text-muted) !important; }
[data-theme="dark"] .text-body  { color: var(--cor-text) !important; }
/* Dark: peças que a fundação não cobria e sumiam no escuro (auditoria) */
[data-theme="dark"] .form-text { color: var(--cor-text-muted); }
/* Placeholder dos campos: o padrao do Bootstrap (cinza escuro) sumia no fundo
   escuro. Cor muted legivel em TODO input/textarea da plataforma. */
[data-theme="dark"] ::placeholder,
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--cor-text-muted) !important; opacity: 1 !important; }
[data-theme="dark"] .btn-outline-dark { color: var(--cor-text); border-color: var(--cor-border); }
[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .btn-outline-dark:focus { background: var(--cor-surface-raised); color: var(--cor-text); border-color: var(--cor-border); }
/* Botão nativo do input[type=file] ficava branco no dark */
/* Botao nativo do input[type=file]: no dark ficava branco (normal e no HOVER).
   O Bootstrap tem `.form-control:hover::file-selector-button` com especificidade
   maior que a nossa, entao precisa de !important e cobrir o :hover. surface-overlay
   (mais claro que o input) da contorno pro botao ser visivel. */
[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] .form-control[type="file"]::file-selector-button,
[data-theme="dark"] .form-control:hover::file-selector-button,
[data-theme="dark"] input[type="file"]:hover::file-selector-button { background: var(--cor-surface-overlay) !important; color: var(--cor-text) !important; border: 0 !important; }
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button,
[data-theme="dark"] input[type="file"]:hover::-webkit-file-upload-button { background: var(--cor-surface-overlay) !important; color: var(--cor-text) !important; border: 0 !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 { color: var(--cor-text); }
[data-theme="dark"] .fw-bold, [data-theme="dark"] .fw-semibold { color: var(--cor-text); }
[data-theme="dark"] label, [data-theme="dark"] p, [data-theme="dark"] strong { color: var(--cor-text); }

/* ─────────────────────────────────────────────────────────────────────────────
   KPI CARDS - v4: icon container + gradient value + glow hover ───────────────────────────────────────────────────────────────────────────── */
.kpi-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  animation: fadeInUp var(--dur-base) var(--ease-out) both;
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  box-shadow: var(--shadow-card);
  position: relative;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
/* Animated top accent line */
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Alternating accent colors */
.row > div:nth-child(odd)  .kpi-card::after { background: var(--gradient-primary); }
.row > div:nth-child(even) .kpi-card::after { background: var(--gradient-destaque); }

.row > div:nth-child(1) .kpi-card { animation-delay:  0ms; }
.row > div:nth-child(2) .kpi-card { animation-delay: 45ms; }
.row > div:nth-child(3) .kpi-card { animation-delay: 90ms; }
.row > div:nth-child(4) .kpi-card { animation-delay:135ms; }
.row > div:nth-child(5) .kpi-card { animation-delay:180ms; }
.row > div:nth-child(6) .kpi-card { animation-delay:225ms; }
.row > div:nth-child(7) .kpi-card { animation-delay:270ms; }
.row > div:nth-child(8) .kpi-card { animation-delay:315ms; }

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(27,70,150,.2);
}
[data-theme="dark"] .kpi-card {
  background: rgba(15,22,36,.85) !important;
  border-color: rgba(35,47,72,.9) !important;
  backdrop-filter: blur(16px) !important;
}
[data-theme="dark"] .kpi-card:hover {
  border-color: rgba(59,111,216,.3) !important;
  box-shadow: var(--shadow-md), 0 0 28px rgba(59,111,216,.1) !important;
}

/* Handle both .kpi-card.card and .kpi-card > .card patterns */
.kpi-card.card::before { display: none; } /* remove shimmer - ::after is accent line */
.kpi-card .card {
  background: transparent;
  border: none;
  box-shadow: none;
}
.kpi-card .card::before { display: none; }

/* KPI icon container */
.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: .5rem;
  flex-shrink: 0;
}
.kpi-icon-primary {
  background: linear-gradient(135deg, var(--cor-primaria-light), rgba(27,70,150,.08));
  color: var(--cor-primaria);
  border: 1px solid rgba(27,70,150,.12);
}
.kpi-icon-destaque {
  background: linear-gradient(135deg, var(--cor-destaque-light), rgba(255,85,33,.08));
  color: var(--cor-destaque);
  border: 1px solid rgba(255,85,33,.12);
}
[data-theme="dark"] .kpi-icon-primary {
  background: rgba(27,70,150,.22) !important;
  border-color: rgba(59,111,216,.2) !important;
  color: #7eb3ff !important;
}
[data-theme="dark"] .kpi-icon-destaque {
  background: rgba(255,85,33,.15) !important;
  border-color: rgba(255,85,33,.18) !important;
  color: #ff8a65 !important;
}

.kpi-label {
  font-size: .65rem;
  color: var(--cor-text-subtle);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.kpi-label i { font-size: .75rem; }
.kpi-value {
  font-size: clamp(0.82rem, 1.4vw, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
  font-family: var(--font-body);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Gradient text on KPI values */
.kpi-value[style*="cor-primaria"] {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-value[style*="cor-destaque"] {
  background: var(--gradient-destaque);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
───────────────────────────────────────────────────────────────────────────── */
.table th {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cor-text-muted);
  font-weight: 700;
  border-bottom: 2px solid var(--cor-border);
  padding: .62rem .8rem;
  background: transparent;
  white-space: nowrap;
}
.table td {
  font-size: .838rem;
  padding: .58rem .8rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--cor-border);
}
.table > tbody > tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.table > tbody > tr:hover { background: rgba(27,70,150,.035); }
[data-theme="dark"] .table > tbody > tr:hover { background: rgba(59,111,216,.06) !important; }
[data-theme="dark"] .table {
  --bs-table-color: var(--cor-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--cor-border);
  --bs-table-hover-bg: rgba(91,143,245,.12);
  --bs-table-hover-color: var(--cor-text);
  --bs-table-striped-bg: rgba(255,255,255,.012);
  color: var(--cor-text);
}
[data-theme="dark"] .table th  { color: var(--cor-text-muted); border-color: var(--cor-border); }
[data-theme="dark"] .table td  { border-color: var(--cor-border); color: var(--cor-text); }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td,
[data-theme="dark"] .table-light tr {
  --bs-table-color: var(--cor-text) !important;
  --bs-table-bg: var(--cor-surface-raised) !important;
  --bs-table-border-color: var(--cor-border);
  background-color: var(--cor-surface-raised) !important;
  color: var(--cor-text) !important;
}
/* Linha "secundária" (ex.: reunião cancelada): no dark o cinza claro do
   Bootstrap virava bloco lavado e destacado. Aqui vira surface recuado +
   texto muted pra ler como DES-enfatizado, não realçado. */
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary th,
[data-theme="dark"] .table-secondary td,
[data-theme="dark"] .table-secondary tr {
  --bs-table-color: var(--cor-text-muted) !important;
  --bs-table-bg: var(--cor-surface-raised) !important;
  --bs-table-border-color: var(--cor-border);
  background-color: var(--cor-surface-raised) !important;
  color: var(--cor-text-muted) !important;
}
[data-theme="dark"] tfoot th, [data-theme="dark"] tfoot td { color: var(--cor-text) !important; }
/* Utilitários de fundo neutro do Bootstrap: no dark caíam no cinza CLARO
   (.bg-body-secondary usa --bs-secondary-bg-RGB, que o remap de var sozinho não
   alcança). Ex.: bloco Endereço da discadora virava painel lavado. */
[data-theme="dark"] .bg-body-secondary { background-color: var(--cor-surface-raised) !important; }
[data-theme="dark"] .bg-body-tertiary  { background-color: var(--cor-surface-overlay) !important; }
[data-theme="dark"] .bg-light          { background-color: var(--cor-surface-raised) !important; }
/* Chips/badges "subtle" do Bootstrap no dark. O -bg-subtle padrão era lavanda
   quase branca (saltava lavado); um navy sólido some no card (ex.: badge
   "principal" ficava igual à superfície). Tints TRANSLÚCIDOS pintam por cima de
   qualquer surface e garantem contraste do chip + texto na cor viva. */
[data-theme="dark"] .bg-primary-subtle   { background-color: rgba(111,143,230,.16) !important; }
[data-theme="dark"] .bg-success-subtle   { background-color: rgba(74,222,128,.15) !important; }
[data-theme="dark"] .bg-danger-subtle    { background-color: rgba(248,113,113,.15) !important; }
[data-theme="dark"] .bg-warning-subtle   { background-color: rgba(217,178,74,.16) !important; }
[data-theme="dark"] .bg-info-subtle      { background-color: rgba(96,165,250,.15) !important; }
[data-theme="dark"] .bg-secondary-subtle { background-color: rgba(127,143,168,.16) !important; }
[data-theme="dark"] .text-primary-emphasis   { color: var(--cor-primaria) !important; }
[data-theme="dark"] .text-success-emphasis   { color: #4ade80 !important; }
[data-theme="dark"] .text-danger-emphasis    { color: #f87171 !important; }
[data-theme="dark"] .text-warning-emphasis   { color: #e6b84a !important; }
[data-theme="dark"] .text-info-emphasis      { color: #7eb3ff !important; }
[data-theme="dark"] .text-secondary-emphasis { color: var(--cor-text-muted) !important; }

/* ── Discadora (dark): cards/stats/kpi usam var(--bs-body-bg) inline, que no
   escuro é a MESMA cor da página → cards chapados, sem elevação ("mal feito").
   Aqui recebem surface + sombra pra separar do fundo e ganhar profundidade.
   Não toca o modo claro (que já está aprovado). ── */
[data-theme="dark"] .disc-scope .disc-card,
[data-theme="dark"] .disc-scope .kpi {
  background: var(--cor-surface-raised) !important;
  border-color: var(--cor-border) !important;
}
/* Stat aninhado dentro do card (tela Atender): fica na surface base pra
   recuar em relação ao card elevado (hierarquia de profundidade). */
[data-theme="dark"] .disc-scope .disc-stat {
  background: var(--cor-surface) !important;
  border-color: var(--cor-border) !important;
}
[data-theme="dark"] .disc-scope .disc-card {
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .disc-scope .disc-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--cor-primaria) !important;
}
[data-theme="dark"] .disc-scope .disc-stat.hi {
  border-color: var(--cor-destaque) !important;
  background: var(--cor-destaque-light) !important;
}

/* DataTables */
.dataTables_wrapper { padding: .7rem .875rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--cor-border);
  border-radius: var(--radius-sm);
  padding: .3rem .65rem;
  font-size: .82rem;
  background: var(--cor-surface);
  color: var(--cor-text);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: .55rem; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { margin-top: .55rem; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length { font-size: .78rem; color: var(--cor-text-muted); }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin-bottom: 0; }
.dataTables_wrapper .dataTables_paginate .page-link {
  border-radius: var(--radius-sm);
  margin: 0 2px;
  font-size: .8rem;
  border-color: var(--cor-border);
  color: var(--cor-text-muted);
  background: var(--cor-surface);
  transition: all var(--dur-fast) var(--ease-out);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--gradient-primary);
  border-color: var(--cor-primaria);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--cor-surface-raised); border-color: var(--cor-border); color: var(--cor-text);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length { color: var(--cor-text-muted); }
[data-theme="dark"] .dataTables_wrapper .dataTables_empty  { color: var(--cor-text-muted); }
[data-theme="dark"] .dataTables_wrapper .dataTables_processing { background: var(--cor-surface); color: var(--cor-text); }
[data-theme="dark"] .page-link { background: var(--cor-surface); border-color: var(--cor-border); color: var(--cor-text-muted); }
[data-theme="dark"] .page-item.active .page-link { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────────
   FORMS
───────────────────────────────────────────────────────────────────────────── */
.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--cor-border);
  padding: .575rem .9rem;
  font-size: .875rem;
  font-family: var(--font-body);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
  background: var(--cor-surface);
  color: var(--cor-text);
}
.form-control:focus {
  border-color: var(--cor-border-focus);
  box-shadow: 0 0 0 3px rgba(91,143,245,.15);
  background: var(--cor-surface);
  color: var(--cor-text);
}
.input-group-text {
  background: var(--cor-surface-raised);
  border-color: var(--cor-border);
  color: var(--cor-text-muted);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: var(--font-body);
}
.input-group:focus-within .input-group-text {
  color: var(--cor-destaque);
  border-color: var(--cor-border-focus);
  background: var(--cor-destaque-light);
}
.form-select {
  border-radius: var(--radius-sm);
  border-color: var(--cor-border);
  padding: .525rem 2.4rem .525rem .85rem;
  font-size: .875rem;
  font-family: var(--font-body);
  background-color: var(--cor-surface);
  color: var(--cor-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-select:focus {
  border-color: var(--cor-border-focus);
  box-shadow: 0 0 0 3px rgba(91,143,245,.15);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--cor-surface-raised);
  border-color: var(--cor-border);
  color: var(--cor-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: rgba(93,140,255,.65) !important;
  box-shadow: 0 0 0 3px rgba(59,111,216,.2), 0 0 16px rgba(59,111,216,.1) !important;
}
[data-theme="dark"] .form-label { color: var(--cor-text); }
[data-theme="dark"] .input-group-text { background: var(--cor-surface-raised); border-color: var(--cor-border); color: var(--cor-text-muted); }
[data-theme="dark"] .form-check-label { color: var(--cor-text); }

/* ─────────────────────────────────────────────────────────────────────────────
   NAV TABS
───────────────────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--cor-border);
  gap: .2rem;
}
.nav-tabs .nav-link {
  color: var(--cor-text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 600;
  font-size: .82rem;
  padding: .56rem .95rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  position: relative;
}
.nav-tabs .nav-link:hover { color: var(--cor-primaria); background: var(--cor-primaria-light); }
.nav-tabs .nav-link.active {
  color: var(--cor-primaria);
  font-weight: 700;
  background: transparent;
  border-bottom-color: var(--cor-primaria);
}
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--cor-border); }
[data-theme="dark"] .nav-tabs .nav-link:hover { background: rgba(59,111,216,.08); color: #7eb3ff; }
[data-theme="dark"] .nav-tabs .nav-link.active { color: #7eb3ff; border-bottom-color: #7eb3ff; }

/* ─────────────────────────────────────────────────────────────────────────────
   BADGES + ALERTS + MISC
───────────────────────────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .68rem;
  padding: .28em .6em;
  letter-spacing: .015em;
  font-family: var(--font-body);
}

.progress { border-radius: var(--radius-pill); height: 7px; }
.progress-bar { border-radius: var(--radius-pill); }
[data-theme="dark"] .progress-bar.bg-primary { box-shadow: 0 0 8px rgba(59,111,216,.5); }
[data-theme="dark"] .badge.bg-primary        { box-shadow: 0 0 10px rgba(59,111,216,.38); }

[data-theme="dark"] .badge.bg-info      { background-color: #1e3a5f !important; color: #7dd3fc !important; }
[data-theme="dark"] .badge.bg-secondary { background-color: #374151 !important; }
[data-theme="dark"] .badge.bg-warning   { background-color: #78350f !important; color: #fcd34d !important; }
[data-theme="dark"] .badge.bg-success   { background-color: #14532d !important; color: #86efac !important; }
[data-theme="dark"] .badge.bg-danger    { background-color: #7f1d1d !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge.bg-light     { background-color: rgba(255,255,255,.06) !important; color: var(--cor-text) !important; border: 1px solid var(--cor-border); }

[data-theme="dark"] .alert             { background: var(--cor-surface); border-color: var(--cor-border); color: var(--cor-text); }
[data-theme="dark"] .alert-info        { background-color: #1e3a5f !important; border-color: #2d4a6f !important; color: #93c5fd !important; }
[data-theme="dark"] .alert-success     { background-color: #14532d !important; border-color: #166534 !important; color: #86efac !important; }
[data-theme="dark"] .alert-warning     { background-color: #78350f !important; border-color: #92400e !important; color: #fcd34d !important; }
[data-theme="dark"] .alert-danger      { background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fca5a5 !important; }

[data-theme="dark"] .modal-content     { background: var(--cor-surface); border-color: var(--cor-border); color: var(--cor-text); }

[data-theme="dark"] .dropdown-menu {
  background: rgba(8,14,26,.97) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(35,47,72,.9) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 24px rgba(59,111,216,.08) !important;
}
[data-theme="dark"] .dropdown-menu { color: var(--cor-text); }
[data-theme="dark"] .dropdown-item { color: var(--cor-text); }
[data-theme="dark"] .dropdown-item:hover { background: rgba(59,111,216,.12) !important; }
[data-theme="dark"] .dropdown-item-text { color: var(--cor-text-muted) !important; }

[data-theme="dark"] .list-group-item { background: var(--cor-surface); border-color: var(--cor-border); color: var(--cor-text); }
[data-theme="dark"] .offcanvas        { background: var(--cor-surface); color: var(--cor-text); }
[data-theme="dark"] .border-top    { border-color: var(--cor-border) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--cor-border) !important; }
[data-theme="dark"] .breadcrumb-item a { color: var(--cor-text-muted); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--cor-text); }

/* ─────────────────────────────────────────────────────────────────────────────
   HUB - Department cards
───────────────────────────────────────────────────────────────────────────── */
.hub-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--cor-border);
  background: var(--cor-surface);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  animation: hub-fade var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 60ms);
  cursor: pointer;
}
.hub-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.hub-card:hover {
  transform: translateY(-7px) scale(1.005);
  box-shadow: 0 20px 48px rgba(12,26,54,.14), 0 6px 12px rgba(255,85,33,.1);
  border-color: transparent;
  background: var(--gradient-brand) !important;
}
.hub-card:hover::after { transform: scaleX(1); }
.hub-card:hover * { color: #fff !important; }
.hub-card:hover .hub-card-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset;
}
.hub-card:hover .hub-card-arrow { background: rgba(255,255,255,.2); color: #fff; transform: translateX(5px); }

.hub-card-icon {
  width: 62px; height: 62px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--cor-primaria-light), #fff);
  color: var(--cor-primaria);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto;
  box-shadow: inset 0 0 0 1px var(--cor-border);
  transition:
    transform var(--dur-slow) var(--ease-spring),
    background var(--dur-base) var(--ease-out),
    box-shadow  var(--dur-base) var(--ease-out);
}
.hub-card-icon i,
.hub-card-icon .bi {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1;
}
.hub-card-icon i::before,
.hub-card-icon .bi::before { vertical-align: 0 !important; }
.hub-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.022em;
  color: var(--cor-text);
  margin-bottom: .3rem;
}
.hub-card-desc {
  color: var(--cor-text-muted);
  font-size: .8rem;
  line-height: 1.5;
  margin-bottom: .875rem;
}
.hub-card-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cor-primaria-light);
  color: var(--cor-primaria);
  font-size: .85rem;
  transition:
    transform var(--dur-base) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
}

[data-theme="dark"] .hub-card {
  background: rgba(15,22,36,.88) !important;
  border-color: rgba(35,47,72,.8) !important;
}
[data-theme="dark"] .hub-card:hover {
  border-color: rgba(59,111,216,.35) !important;
  box-shadow: var(--shadow-lg), 0 0 48px rgba(59,111,216,.18) !important;
}

@keyframes hub-fade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CAMPAIGN CARDS
───────────────────────────────────────────────────────────────────────────── */
.campaign-card {
  border-radius: var(--radius-md);
  transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
  cursor: pointer;
  border: 1px solid var(--cor-border);
  overflow: hidden;
}
.campaign-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.campaign-thumb { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.campaign-thumb-placeholder {
  width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--cor-primaria-light), var(--cor-body));
  display: flex; align-items: center; justify-content: center;
}
.campaign-table-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: var(--radius-sm); }
.campaign-table-thumb-placeholder {
  width: 38px; height: 38px;
  background: var(--cor-primaria-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UPLOAD ZONES
───────────────────────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--cor-border);
  transition: all var(--dur-fast) var(--ease-out);
  background: var(--cor-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-light);
  transform: scale(1.004);
}
.upload-zone.active { border-color: var(--cor-destaque); background: var(--cor-destaque-light); }
[data-theme="dark"] .upload-zone {
  background: rgba(15,22,36,.7) !important;
  border-color: rgba(35,47,72,.9) !important;
}
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.dragover {
  border-color: rgba(93,140,255,.55) !important;
  background: rgba(59,111,216,.07) !important;
  box-shadow: 0 0 22px rgba(59,111,216,.12) !important;
}

.ref-upload-zone {
  border: 2px dashed var(--cor-border);
  border-radius: var(--radius-md);
  transition: all var(--dur-fast) var(--ease-out);
  background: var(--cor-surface);
  cursor: pointer;
}
.ref-upload-zone:hover, .ref-upload-zone.dragover { border-color: var(--cor-primaria); background: var(--cor-primaria-light); }
[data-theme="dark"] .ref-upload-zone { background: var(--cor-surface-raised); border-color: rgba(35,47,72,.9); }

.ref-preview-thumb { width: 78px; height: 78px; object-fit: cover; border-radius: var(--radius-sm); }
.ref-image-card { border-radius: var(--radius-md); overflow: hidden; }
.ref-thumb { width: 100%; height: 138px; object-fit: cover; }
.ref-option {
  width: 78px; height: 78px;
  border: 2px solid var(--cor-border);
  border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.ref-option:hover { border-color: var(--cor-primaria); }
.ref-option.selected { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-light); }
.ref-option-img { width: 100%; height: 100%; object-fit: cover; }
.ref-option-inner { font-size: .68rem; color: var(--cor-text-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   CHAT / IA
───────────────────────────────────────────────────────────────────────────── */
.ia-chat-card { height: calc(100vh - 160px); min-height: 500px; display: flex; flex-direction: column; }
.ia-chat-card .card-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.ia-chat-area { flex: 1; overflow-y: auto; padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; }

.ia-chat-welcome-icon {
  width: 76px; height: 76px; border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.9rem;
  box-shadow: var(--shadow-primary);
}
.ia-msg { display: flex; gap: .7rem; max-width: 84%; animation: iaFadeIn var(--dur-fast) var(--ease-out); }
.ia-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.ia-msg-ai   { align-self: flex-start; }
.ia-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: .88rem; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.ia-msg-bubble {
  background: var(--gradient-primary); color: #fff;
  border-radius: 1rem 1rem 0 1rem;
  padding: .7rem .95rem; font-size: .875rem; line-height: 1.55;
  box-shadow: var(--shadow-primary);
}
.ia-msg-bubble-ai {
  background: var(--cor-surface); color: var(--cor-text);
  border: 1px solid var(--cor-border);
  border-radius: 1rem 1rem 1rem 0;
  box-shadow: var(--shadow-sm);
}
.ia-msg-image-wrapper { margin: -.25rem -.25rem .25rem; }
.ia-msg-image { width: 100%; max-width: 480px; border-radius: var(--radius-sm); display: block; }
.ia-msg-ref-thumb { width: 58px; height: 58px; object-fit: cover; border-radius: var(--radius-xs); }
.ia-msg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.ia-panel { position: sticky; top: 70px; }

.ia-fab {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition-spring), box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none; z-index: 1000;
}
.ia-fab:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(27,70,150,.44); color: #fff; }

.ai-gen-btn { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ai-gen-btn:hover { background: var(--cor-primaria-light); color: var(--cor-primaria); }
[data-theme="dark"] .ai-gen-btn:hover { background: rgba(123,179,255,.1); }

@keyframes iaFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
───────────────────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: calc(var(--topbar-height) + .75rem);
  right: 1rem; z-index: 1080;
  display: flex; flex-direction: column;
  gap: .5rem; max-width: 400px;
}
.toast-msg {
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: .8rem 1.2rem;
  display: flex; align-items: center;
  gap: .75rem; animation: toastIn var(--dur-slow) var(--ease-spring);
  font-size: .868rem;
}
.toast-msg.toast-error   { border-left: 4px solid #ef4444; }
.toast-msg.toast-success { border-left: 4px solid #22c55e; }
.toast-msg .btn-close { font-size: .58rem; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOGIN PAGE
───────────────────────────────────────────────────────────────────────────── */
body.login-page {
  background: #edf1f7;
  min-height: 100vh; margin: 0; padding: 0;
}
[data-theme="dark"] body.login-page { background: #080c17; }
.login-wrapper {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  position: relative; overflow: hidden;
}
.login-wrapper::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,111,216,.5) 0%, transparent 65%);
  top: -360px; right: -280px;
  animation: orb1 16s ease-in-out infinite;
  filter: blur(22px);
}
.login-wrapper::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,85,33,.42) 0%, transparent 65%);
  bottom: -200px; left: -200px;
  animation: orb2 20s ease-in-out infinite;
  filter: blur(22px);
}
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-55px,38px) scale(1.1)} 66%{transform:translate(38px,-55px) scale(.92)} }
@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(48px,-36px) scale(1.14)} }

.login-card {
  width: 100%; max-width: 432px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,244,.9);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 72px rgba(12,26,54,.14), 0 4px 16px rgba(12,26,54,.06);
  padding: 2.625rem 2.375rem 2.125rem;
  position: relative; z-index: 1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: loginIn var(--dur-slow) var(--ease-spring) both;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #061f76, #ff6a0f);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .login-card {
  background: rgba(12,18,32,.92);
  border: 1px solid rgba(35,47,72,.9);
  box-shadow: 0 28px 72px rgba(0,0,0,.72), 0 0 72px rgba(59,111,216,.12);
}
.login-logo { display: flex; align-items: center; justify-content: center; width: 100%; }
.login-brand-logo { height: 108px; max-width: 240px; width: auto; object-fit: contain; }
[data-theme="dark"] .login-brand-logo { filter: brightness(0) invert(1); }

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────────────────── */
footer.app-footer, footer {
  margin-top: auto;          /* ancora o rodapé no fim da página (sem vão abaixo) */
  align-self: center;        /* encolhe à largura do texto e centraliza */
  flex-shrink: 0;
  color: var(--cor-text-muted);
  border-top: 1px solid var(--cor-border) !important;
  font-size: .7rem;
  padding: .2rem 1.1rem;
  text-align: center;
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cor-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cor-text-subtle); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(35,47,72,.8); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(93,140,255,.6); }

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR - legacy label (kept for backward compat)
───────────────────────────────────────────────────────────────────────────── */
.sidebar-nav-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--cor-text-subtle);
  padding: .75rem .7rem .22rem;
  white-space: nowrap;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    height  var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out);
}
.sidebar.collapsed .sidebar-nav-label {
  opacity: 0; height: 0; padding: 0; overflow: hidden;
}
[data-theme="dark"] .sidebar-nav-label { color: rgba(93,140,255,.38) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; box-shadow: none; }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 6px 0 32px rgba(8,12,22,.2); }
  .sidebar-overlay { display: block; }
  .sidebar.mobile-open ~ .sidebar-overlay { opacity: 1; pointer-events: auto; }
  .topbar { left: 0 !important; }
  .main-content { margin-left: 0 !important; }
  /* 100vh no iOS conta a barra de URL: o rodapé da sidebar (perfil) ficava
     debaixo da barra do Safari e o menu parecia terminar cortado. */
  .sidebar {
    height: 100dvh;
    /* Fundo sólido e SEM backdrop-filter: o drawer cobre a tela, não tem o que
       borrar atrás, e no WebKit o filtro no ancestral é conhecido por travar a
       rolagem do scroller de dentro (que é justamente o menu). */
    background: var(--cor-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-theme="dark"] .sidebar { background: #0f1624; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sidebar-nav {
    padding-bottom: 1rem;
    /* O menu é o scroller que sobra na tela quando o drawer está aberto: declara
       o eixo do pan e segura a rolagem dentro dele. */
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* No celular quem rola é o DOCUMENTO, não um scroller interno.
     Com o shell fixo (body position:fixed + overflow:hidden) e o conteúdo
     dentro do .main-content, o iOS 18 dava touchstart e NENHUM touchmove: o
     gesto ia pro documento travado e morria ali (sonda 01/08 no iPhone 18.7 ->
     mc.scrollHeight 7162, scrollTop 0, toques {start:1, move:0}, scroll
     programático funcionando). Documento rolando é o que todo navegador
     entrega de graça, e devolve a retração da barra de URL. Topbar, sidebar e
     barra inferior seguem fixas. */
  html { height: auto; }
  body {
    position: static; inset: auto; width: auto; height: auto; min-height: 100dvh;
    overflow: visible;
    /* Fundo fixo no iOS congela a rolagem: no celular o fundo rola junto. */
    background-attachment: scroll;
  }
  .main-content {
    height: auto; min-height: 100dvh; overflow: visible;
    /* pageIn (fill both) deixa transform residual, e transform em ancestral de
       elemento fixo quebra a topbar no iOS. Sem animação no mobile. */
    animation: none;
  }
  /* Drawer aberto NÃO trava o documento: travar era exatamente o que matava o
     gesto no iOS. O menu segura a rolagem dele com overscroll-behavior, e o
     overlay por cima impede o toque de vazar pro conteúdo. */
  .sidebar, .sidebar-nav { overscroll-behavior: contain; }
  /* O drawer anima transform toda hora no celular: camada pronta de antemão
     tira o soluço do primeiro frame em aparelho fraco. */
  .sidebar { will-change: transform; }

  /* Toque com resposta: sem o retângulo cinza do WebKit, e o item tocado
     acende/encolhe NA HORA, mesmo que a tela nova demore a vir. */
  a, button, .btn, .sidebar-link, .sidebar-group-toggle { -webkit-tap-highlight-color: transparent; }
  .sidebar-link:active, .sidebar-group-toggle:active,
  .sidebar-modulo-item:active, .dropdown-item:active { background: var(--cor-primaria-light); }
  .btn:active { transform: scale(.97); }
  .hub-card:active { transform: scale(.98); }
}

@media (max-width: 575.98px) {
  .container-fluid.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
  .container-fluid.py-4 { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .kpi-value { font-size: 0.85rem !important; }
  .kpi-label { font-size: .6rem; }
  .kpi-card .card-body, .kpi-card.card-body, .kpi-card > .card-body { padding: .65rem .75rem; }
  .topbar { padding: 0 .75rem; }
  /* O título fica escondido no celular (regra das ações compactas, acima):
     toda tela repete o mesmo nome no cabeçalho do conteúdo e era ele que
     empurrava as ações pra fora. As propriedades ficam pro caso de alguma tela
     voltar a exibi-lo. */
  .topbar-title { font-size: .82rem; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-tabs .nav-link { font-size: .76rem; padding: .48rem .65rem; }
  .table th { font-size: .62rem; padding: .42rem .5rem; }
  .table td { font-size: .75rem; padding: .42rem .5rem; }
  .card-header { font-size: .82rem; padding: .6rem .75rem; }
  .card-body { padding: .75rem; }
  .upload-zone { padding: 1.25rem .75rem !important; }
  .toast-container { left: .75rem; right: .75rem; max-width: none; }
  .toast-msg { font-size: .78rem; padding: .62rem .85rem; }
  .login-card { padding: 1.75rem 1.25rem; margin: 1rem; max-width: calc(100vw - 2rem); }
  .login-brand-logo { height: 136px; max-width: 280px; }
  .hub-card .card-body { padding: 1.4rem .875rem; }
  .hub-card-icon { width: 50px; height: 50px; font-size: 1.7rem; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* 34px era menor que o alvo de toque confortável (44px): errar o botão de
     ação da linha e acertar a linha inteira acontecia o tempo todo. */
  .btn-sm { min-height: 38px; }
  td .btn-sm, th .btn-sm { min-height: 36px; min-width: 36px; }
  .btn-lg { min-height: 48px; }
  .mes-selector-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mes-selector-scroll::-webkit-scrollbar { display: none; }
  .mes-selector-scroll .d-flex { flex-wrap: nowrap !important; }
  .d-flex.justify-content-between { flex-direction: column; gap: .75rem; align-items: flex-start !important; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left !important; margin-bottom: .5rem; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; margin-top: .25rem; }
  .dataTables_wrapper .dataTables_paginate .page-link { padding: .32rem .52rem; font-size: .72rem; }
  .ia-chat-card { height: calc(100vh - 200px); min-height: 350px; }
  .ia-msg { max-width: 95%; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .kpi-value { font-size: 1.0rem !important; }
  .topbar-title { font-size: .88rem; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ia-chat-card { height: calc(100vh - 180px); }
}

/* ── Aviso de versão nova ─────────────────────────────────────────────────
   Só aparece quando a recarga automática foi adiada porque havia formulário
   preenchido: quem escolhe a hora é quem está escrevendo. */
/* Faixa de versão: recado curto, uma linha só. Em três linhas ela virava um
   bloco no meio da tela e ainda batia no botão do chat. */
.versao-nova {
  position: fixed; z-index: 1085; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .5rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: .35rem .35rem .35rem .75rem;
  background: var(--cor-text); color: var(--cor-surface);
  border-radius: var(--radius-pill); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
  font-size: .76rem; font-weight: 600; line-height: 1.25;
}
.versao-nova > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.versao-nova > .btn {
  flex: 0 0 auto; min-height: 0; padding: .2rem .6rem; font-size: .72rem; font-weight: 700;
  border-radius: var(--radius-pill);
}
@media (max-width: 991.98px) {
  /* Acima da barra inferior e à esquerda do botão do chat, que fica na quina
     direita: centralizada, a faixa cobria o botão. */
  .versao-nova {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: .75rem; right: 4.75rem; transform: none;
    max-width: none; justify-content: space-between;
  }
}

/* ── Convite de instalação (só no celular, acima da barra inferior) ──────── */
.pwa-convite { display: none; }
/* Faixa de versão na tela = convite espera a próxima página: os dois juntos
   empilhavam três flutuantes (faixa, convite, bolha) no mesmo canto. */
body:has(.versao-nova) .pwa-convite { display: none !important; }
@media (max-width: 991.98px) {
  .pwa-convite {
    display: flex; align-items: center; gap: .7rem;
    position: fixed; left: .75rem; right: .75rem;
    /* Acima da barra inferior E da bolha do chat (56px + folga): as três
       coisas moram no mesmo canto de baixo. */
    bottom: calc(142px + env(safe-area-inset-bottom, 0px));
    z-index: 1051; padding: .7rem .85rem;
    background: var(--cor-surface); border: 1px solid var(--cor-border);
    border-radius: var(--radius-md); box-shadow: 0 .5rem 1.5rem rgba(8,12,22,.18);
  }
  .pwa-convite[hidden] { display: none; }
  .pwa-convite .icone { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
  .pwa-convite .texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .pwa-convite .texto strong { font-size: .84rem; line-height: 1.2; }
  .pwa-convite .texto span { font-size: .74rem; color: var(--cor-text-muted); line-height: 1.3; }
  .pwa-convite .fechar {
    border: 0; background: none; color: var(--cor-text-subtle);
    font-size: .8rem; padding: .2rem; cursor: pointer; flex-shrink: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODO APP (PWA instalado)
   A classe entra no <html> quando display-mode é standalone. Aqui fica só o
   que muda por NÃO existir navegador em volta: sem barra de URL, o topo é a
   borda da tela, e o rodapé de site perde a função.
───────────────────────────────────────────────────────────────────────────── */
.modo-app footer.app-footer { display: none; }
/* Aplicativo não dá zoom por duplo toque: o toque duplo em botão ou linha de
   tabela deixava a tela ampliada e torta, com a topbar fora do lugar.
   manipulation mantém rolagem e pinça a cargo do resto (a pinça é barrada no
   JS do <head>), e mata só o duplo toque. No navegador nada muda. */
.modo-app, .modo-app body { touch-action: manipulation; }
/* Nada de padding no topo: com status-bar-style "default" quem reserva a faixa
   do relógio é o iOS. Ao fazer isso no CSS (o que translucent exigia), sobrava
   uma faixa vazia entre os ícones do sistema e a topbar. */

/* ─────────────────────────────────────────────────────────────────────────────
   BOTTOM NAV (mobile)
───────────────────────────────────────────────────────────────────────────── */
.bottom-nav { display: none; }
@media (max-width: 991.98px) {
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    /* A altura CRESCE com a faixa de gestos do iPhone. Com height fixo, o
       padding-bottom comia por dentro dos 62px (box-sizing: border-box): os
       ícones subiam espremidos e sobrava uma faixa branca embaixo deles. */
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding: 0 .5rem env(safe-area-inset-bottom, 0px);
    /* Vidro nos dois temas: a barra chapada parecia um bloco colado por cima
       do conteúdo; com transparência + blur ela vira parte da tela. */
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid rgba(226,232,244,.75);
    z-index: 1050; align-items: center; justify-content: space-around;
    box-shadow: 0 -6px 24px rgba(8,12,22,.06);
  }
  /* Drawer aberto é modal: a barra por cima dele escondia os últimos itens do
     menu e disputava o toque com a rolagem. O convite de instalação e a bolha
     do chat flutuam acima do overlay (z 1050/1051) e apareciam POR CIMA do
     menu aberto: somem junto. */
  .drawer-aberto .bottom-nav,
  .drawer-aberto .pwa-convite,
  .drawer-aberto .dm-bolha { display: none; }
  .bottom-nav-link {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-decoration: none;
    color: var(--cor-text-muted); font-size: .64rem; font-weight: 600;
    letter-spacing: .01em;
    /* Colunas iguais: com a largura saindo do texto, o realce do item ativo
       ficava de um tamanho em "Início" e de outro em "Comunidade". */
    flex: 1 1 0; min-width: 0; max-width: 9rem;
    margin: .35rem .15rem; padding: .25rem .3rem;
    border-radius: var(--radius-md);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  /* O realce ativo é uma pílula SÓ atrás do ícone (padrão de app nativo): o
     bloco inteiro pintado tinha cara de botão e crescia junto com o rótulo. */
  .bottom-nav-link i {
    font-size: 1.28rem; line-height: 1;
    padding: .16rem .9rem; border-radius: var(--radius-pill);
    background: transparent;
    transition: background var(--dur-base) var(--ease-spring),
                transform var(--dur-base) var(--ease-spring);
  }
  .bottom-nav-link.active { color: var(--cor-primaria); font-weight: 700; }
  .bottom-nav-link.active i { background: var(--cor-primaria-light); }
  /* Resposta imediata ao dedo: o item encolhe no toque, antes de a navegação
     sequer começar. */
  .bottom-nav-link:active { transform: scale(.92); }
  @media (hover: hover) {
    .bottom-nav-link:hover { color: var(--cor-primaria); }
    .bottom-nav-link:hover i { background: var(--cor-primaria-light); }
  }
  /* "Menu" é <button> (abre o drawer, não navega): tira a cara de botão. */
  button.bottom-nav-link { border: 0; background: none; font-family: inherit; cursor: pointer; }
  /* Enquanto a próxima tela vem: o item tocado pisca de leve. Sem isso a barra
     ficava idêntica durante a navegação inteira e parecia que o toque não
     tinha pegado (aí a pessoa toca de novo, e piora). */
  .bottom-nav-link.carregando { animation: bnCarregando 1s ease-in-out infinite; }
  @keyframes bnCarregando { 50% { opacity: .45; } }
  @media (prefers-reduced-motion: reduce) {
    .bottom-nav-link.carregando { animation: none; opacity: .6; }
    .bottom-nav-link, .bottom-nav-link i { transition: none; }
  }
  /* A barra encosta no fundo da tela: a altura dela cresce com a faixa de
     gestos do iPhone, e o conteúdo tem que folgar o mesmo tanto. */
  .main-content { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
  footer.app-footer { margin-bottom: 62px; }

  [data-theme="dark"] .bottom-nav {
    background: rgba(8,12,22,.82) !important;
    border-top-color: rgba(35,47,72,.7) !important;
  }
  [data-theme="dark"] .bottom-nav-link.active { color: #93b4ff !important; }
  [data-theme="dark"] .bottom-nav-link.active i { background: rgba(59,111,216,.16); }
  @media (hover: hover) {
    [data-theme="dark"] .bottom-nav-link:hover { color: #93b4ff !important; }
    [data-theme="dark"] .bottom-nav-link:hover i { background: rgba(59,111,216,.16); }
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLABLE NAV TABS
───────────────────────────────────────────────────────────────────────────── */
.nav-tabs-scroll {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-tabs-scroll::-webkit-scrollbar { display: none; }
.nav-tabs-scroll .nav-tabs { flex-wrap: nowrap; white-space: nowrap; min-width: max-content; }

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────────────────────────────────────── */
.text-destaque  { color: var(--cor-destaque) !important; }
.badge-cargo    { background: var(--cor-primaria); color: #fff; }
[data-theme="dark"] .badge-cargo { background: rgba(27,70,150,.4); color: #93b4ff; }

/* ─────────────────────────────────────────────────────────────────────────────
   PERIOD / MONTH SELECTOR BAR
───────────────────────────────────────────────────────────────────────────── */
.periodo-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  border-radius: var(--radius-md);
  padding: .6rem 1rem;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.periodo-bar-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cor-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}
.periodo-bar-chips {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding-bottom: 1px;
}
.periodo-bar-chips::-webkit-scrollbar { display: none; }
.periodo-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .28rem .72rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
  color: var(--cor-text-muted);
  background: var(--cor-surface-raised);
  border: 1px solid var(--cor-border);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}
.periodo-chip:hover {
  background: var(--cor-primaria-light);
  color: var(--cor-primaria);
  border-color: rgba(27,70,150,.2);
}
.periodo-chip-active {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-primary);
}
[data-theme="dark"] .periodo-bar {
  background: rgba(15,22,36,.85);
  border-color: rgba(35,47,72,.9);
}
[data-theme="dark"] .periodo-chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(35,47,72,.8);
  color: var(--cor-text-muted);
}
[data-theme="dark"] .periodo-chip:hover {
  background: rgba(59,111,216,.12);
  color: #93b4ff;
  border-color: rgba(93,140,255,.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   KPI CARD - icon spacing
───────────────────────────────────────────────────────────────────────────── */
.kpi-card .card-body { padding: 1rem 1.1rem; }
.kpi-card .kpi-icon  { margin-bottom: .6rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sidebar-brand { animation: none !important; }
  .hub-card { animation: none !important; }
  .kpi-card { animation: none !important; }
}

/* Semantic tokens for macros */
:root {
  --rp-danger: #c62828;
  --rp-danger-dark: #a31f1f;
  --rp-danger-bg: #fde7e7;
  --rp-danger-text: #8a1d1d;
  --rp-danger-border: #f4b2b2;

  --rp-success: #2e7d32;
  --rp-success-dark: #1b5e20;
  --rp-success-bg: #e6f6ec;
  --rp-success-text: #1b5e20;
  --rp-success-border: #b7e3c1;

  --rp-warning-bg: #fff5d9;
  --rp-warning-text: #7a5b00;
  --rp-warning-border: #f4dd92;

  --rp-info-bg: #eaf2ff;
  --rp-info-text: #001a47;
  --rp-info-border: #c4dafd;
}

/* ─────────────────────────────────────────────────────────────────
   Macros (Foundation v1) - usam tokens já definidos no design system v4
─────────────────────────────────────────────────────────────────── */

/* Button macro */
.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.rp-btn:active { transform: translateY(1px); }
.rp-btn[disabled], .rp-btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}
.rp-btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.rp-btn-md { padding: .55rem 1.1rem; font-size: .95rem; }
.rp-btn-lg { padding: .75rem 1.4rem; font-size: 1.05rem; }

.rp-btn-primary  { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.rp-btn-primary:hover { background: var(--cor-primaria-dark); border-color: var(--cor-primaria-dark); }

.rp-btn-secondary { background: var(--cor-surface-overlay); color: var(--cor-text); border-color: var(--cor-border); }
.rp-btn-secondary:hover { background: var(--cor-surface-raised); }

.rp-btn-outline   { background: transparent; color: var(--cor-primaria); border-color: var(--cor-primaria); }
.rp-btn-outline:hover { background: var(--cor-primaria-light); }

.rp-btn-ghost     { background: transparent; color: var(--cor-text); border-color: transparent; }
.rp-btn-ghost:hover { background: var(--cor-surface-overlay); }

.rp-btn-danger    { background: var(--rp-danger); color: #fff; border-color: var(--rp-danger); }
.rp-btn-danger:hover { background: var(--rp-danger-dark); }

.rp-btn-success   { background: var(--rp-success); color: #fff; border-color: var(--rp-success); }
.rp-btn-success:hover { background: var(--rp-success-dark); }

/* Alert macro */
.rp-alert {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem; border-radius: 10px;
  border: 1px solid transparent; margin-bottom: 1rem;
  font-family: var(--font-body);
}
.rp-alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.rp-alert-body { flex: 1; line-height: 1.45; }
.rp-alert-close { background: transparent; border: 0; color: inherit; cursor: pointer; padding: .2rem .4rem; border-radius: 6px; opacity: .7; }
.rp-alert-close:hover { opacity: 1; background: rgba(0,0,0,.05); }
.rp-alert-info    { background: var(--rp-info-bg); color: var(--rp-info-text); border-color: var(--rp-info-border); }
.rp-alert-success { background: var(--rp-success-bg); color: var(--rp-success-text); border-color: var(--rp-success-border); }
.rp-alert-warning { background: var(--rp-warning-bg); color: var(--rp-warning-text); border-color: var(--rp-warning-border); }
.rp-alert-danger  { background: var(--rp-danger-bg); color: var(--rp-danger-text); border-color: var(--rp-danger-border); }

/* Card macro */
.rp-card {
  background: var(--cor-surface);
  border: 1px solid var(--cor-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 25, 60, .04);
}
.rp-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cor-border);
  display: flex; align-items: center; gap: .75rem;
}
.rp-card-icon { font-size: 1.4rem; color: var(--cor-primaria); }
.rp-card-titles { flex: 1; }
.rp-card-title { margin: 0; font: 600 1.05rem/1.2 var(--font-body); color: var(--cor-text); }
.rp-card-subtitle { margin: .15rem 0 0; font-size: .85rem; color: var(--cor-text-muted); }
.rp-card-body { padding: 1.25rem; }
.rp-card-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--cor-border); background: var(--cor-surface-raised); border-radius: 0 0 14px 14px; }

/* Empty state */
.rp-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 3rem 1rem; text-align: center; color: var(--cor-text-muted);
}
.rp-empty-icon { font-size: 3rem; color: var(--cor-border-focus); opacity: .7; }
.rp-empty-title { margin: 0; font: 600 1.15rem/1.2 var(--font-body); color: var(--cor-text); }
.rp-empty-msg { margin: 0; max-width: 40ch; line-height: 1.5; }

/* Skeleton / spinner */
.rp-skeleton-group { display: flex; flex-direction: column; gap: .6rem; }
.rp-skeleton-row {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cor-surface-overlay) 0%, var(--cor-border) 50%, var(--cor-surface-overlay) 100%);
  background-size: 200% 100%;
  animation: rp-skel 1.4s ease-in-out infinite;
}
@keyframes rp-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.rp-spinner { display: inline-flex; align-items: center; }
.rp-spinner-circle {
  width: 1.2em; height: 1.2em; border-radius: 50%;
  border: 2px solid var(--cor-border);
  border-top-color: var(--cor-primaria);
  animation: rp-spin 1s linear infinite;
}
.rp-spinner-sm .rp-spinner-circle { width: .9em; height: .9em; border-width: 2px; }
.rp-spinner-md .rp-spinner-circle { width: 1.4em; height: 1.4em; border-width: 2px; }
.rp-spinner-lg .rp-spinner-circle { width: 2em; height: 2em; border-width: 3px; }
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* List row - nome à esquerda + meta à direita, sem depender de .justify-content-between
   (a regra global empilha aquela classe em coluna no mobile). O item principal cresce e
   empurra a meta; min-width:0 garante truncagem do texto longo em vez de estourar a linha. */
.rp-list-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.rp-list-row > .rp-list-main { flex: 1 1 auto; min-width: 0; }
.rp-list-row .rp-list-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 575.98px) {
  .rp-list-row { flex-direction: row !important; align-items: center; }
}

/* Chip de metadado neutro (categoria/idioma/tag) - coerente com tokens, sem cinza-sobre-cinza */
.rp-chip-meta {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; border-radius: var(--radius-pill, 999px);
  background: var(--cor-surface-overlay); color: var(--cor-text-muted);
  border: 1px solid var(--cor-border); font-size: var(--fs-2xs, .6875rem);
  font-weight: 600; line-height: 1.4; white-space: nowrap;
}

/* Utilitário: preserva quebras de texto sem style inline repetido */
.pre-wrap { white-space: pre-wrap; }

/* Stat card */
.rp-stat-card {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226,232,244,.8);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  color: var(--cor-text); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}
.rp-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.rp-kpis .rp-stat-card:nth-child(odd)::before  { background: var(--gradient-primary); }
.rp-kpis .rp-stat-card:nth-child(even)::before { background: var(--gradient-destaque); }
.rp-stat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 25, 60, .08); }
.rp-stat-icon { font-size: 1.6rem; color: var(--cor-primaria); flex-shrink: 0; }
.rp-stat-body { flex: 1; min-width: 0; }
.rp-stat-value { font: 800 1.75rem/1 var(--font-body); letter-spacing: -.02em; }
.rp-kpis .rp-stat-card:nth-child(odd)  .rp-stat-value { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rp-kpis .rp-stat-card:nth-child(even) .rp-stat-value { background: var(--gradient-destaque); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rp-stat-label { font-size: .85rem; color: var(--cor-text-muted); margin-top: .15rem; }
.rp-stat-delta { font-size: .78rem; font-weight: 700; margin-top: .3rem; }
.rp-stat-delta-up    { color: #16a34a; }
.rp-stat-delta-down  { color: #dc2626; }
.rp-stat-delta-neutral { color: var(--cor-text-muted); }
[data-theme="dark"] .rp-stat-card {
  background: rgba(15,22,36,.85);
  border-color: rgba(35,47,72,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .rp-kpis .rp-stat-card:nth-child(odd)  .rp-stat-value { background: linear-gradient(135deg,#5b8ff5,#7eb3ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="dark"] .rp-kpis .rp-stat-card:nth-child(even) .rp-stat-value { background: linear-gradient(135deg,#ff8a45,#ffaa88); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Table wrap */
.rp-table-wrap {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226,232,244,.9);
  border-radius: var(--radius-md);
  overflow: hidden;
}
[data-theme="dark"] .rp-table-wrap {
  background: rgba(15,22,36,.85);
  border-color: rgba(35,47,72,.9);
}
.rp-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(226,232,244,.6);
  gap: .75rem;
}
[data-theme="dark"] .rp-table-toolbar { border-bottom-color: rgba(35,47,72,.6); }
.rp-table-toolbar-title { font-size: .88rem; font-weight: 800; color: var(--cor-text); }
.rp-table-toolbar-count {
  font-size: .72rem; color: var(--cor-text-muted);
  background: var(--cor-primaria-light); padding: .15rem .55rem;
  border-radius: var(--radius-pill);
}
table.dataTable thead th {
  font-size: .72rem !important; font-weight: 700 !important; color: var(--cor-text-subtle) !important;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--cor-surface-raised) !important;
  border-bottom: 1px solid var(--cor-border) !important;
  padding: .65rem 1rem !important;
}
table.dataTable tbody tr { border-bottom: 1px solid rgba(226,232,244,.4); }
table.dataTable tbody tr:hover td { background: rgba(238,243,255,.5); }
[data-theme="dark"] table.dataTable tbody tr:hover td { background: rgba(27,70,150,.08); }
table.dataTable tbody td { padding: .6rem 1rem !important; font-size: .855rem !important; }

/* Form field */
.rp-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.rp-label { font-size: .72rem; font-weight: 700; color: var(--cor-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.rp-label-required { color: var(--cor-destaque); margin-left: .2rem; }
.rp-input {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--cor-border);
  border-radius: 8px;
  background: var(--cor-surface);
  font: 400 .95rem/1.4 var(--font-body);
  color: var(--cor-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rp-input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-light);
  box-shadow: 0 0 0 3px rgba(27,70,150,.1);
}
.rp-field-invalid .rp-input { border-color: var(--rp-danger); }
.rp-field-invalid .rp-input:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .18); }
.rp-field-hint  { font-size: .8rem; color: var(--cor-text-muted); }
.rp-field-error { font-size: .8rem; color: var(--rp-danger-text); display: flex; align-items: center; gap: .25rem; }

/* ─────────────────────────────────────────────────────────────────
   Hero Header
─────────────────────────────────────────────────────────────────── */
.rp-hero {
  background: linear-gradient(135deg, #061f76 0%, #1e46b0 55%, rgba(255,85,33,.6) 140%);
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
.rp-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.rp-hero-eyebrow { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.rp-hero-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 800; color: #fff; letter-spacing: -.04em; margin: 0 0 .35rem; }
.rp-hero-meta { font-size: .78rem; color: rgba(255,255,255,.6); display: flex; flex-wrap: wrap; gap: .75rem; }
.rp-hero-meta-strong { color: rgba(255,255,255,.9); }
.rp-hero-actions { margin-top: .75rem; display: flex; gap: .5rem; flex-wrap: wrap; }
[data-theme="dark"] .rp-hero {
  background: linear-gradient(135deg, #030f42 0%, #061f76 50%, rgba(255,85,33,.2) 140%);
  border-bottom: 1px solid rgba(59,111,216,.15);
}

/* ─────────────────────────────────────────────────────────────────
   Page layouts (Foundation v1)
─────────────────────────────────────────────────────────────────── */
.rp-page { padding: 1.5rem clamp(1rem, 3vw, 2.5rem); max-width: 1400px; margin: 0 auto; }
.rp-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.rp-page-title-wrap { min-width: 0; flex: 1; }
.rp-page-title { font: 700 1.6rem/1.2 var(--font-display); margin: 0; color: var(--cor-text); }
.rp-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.rp-page-body { background: var(--cor-surface); border: 1px solid var(--cor-border); border-radius: 16px; padding: 1.25rem; }
.rp-page-body-form { max-width: 720px; }

.rp-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
.rp-detail-main, .rp-detail-side { min-width: 0; }

.rp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.rp-charts { display: grid; gap: 1.5rem; }

@media (max-width: 1024px) {
  .rp-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rp-page { padding: 1rem; }
  .rp-page-title { font-size: 1.35rem; }
}

/* Empty state - ícone quadrado */
.rp-empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cor-primaria-light), rgba(27,70,150,.05));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 1rem;
  color: var(--cor-primaria);
}

/* Card dot indicator */
.rp-card-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-right: .25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLE SKELETON LOADER
   Uso: <div class="rp-table-skeleton" data-rows="8" data-cols="5"></div>
   JS em base.html gera as linhas automaticamente ao detectar [data-datatable]
───────────────────────────────────────────────────────────────────────────── */
.rp-table-skeleton {
  width: 100%;
  border-radius: var(--radius-md, .75rem);
  overflow: hidden;
  border: 1px solid var(--cor-border);
}
.rp-table-skeleton-header {
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--cor-surface-raised);
  border-bottom: 1px solid var(--cor-border);
}
.rp-table-skeleton-header .rp-skel-cell {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cor-border) 0%, var(--cor-surface-overlay) 50%, var(--cor-border) 100%);
  background-size: 200% 100%;
  animation: rp-skel 1.4s ease-in-out infinite;
}
.rp-table-skeleton-row {
  display: flex;
  gap: .75rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--cor-border);
}
.rp-table-skeleton-row:last-child { border-bottom: none; }
.rp-table-skeleton-row .rp-skel-cell {
  flex: 1;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cor-surface-overlay) 0%, var(--cor-border) 50%, var(--cor-surface-overlay) 100%);
  background-size: 200% 100%;
  animation: rp-skel 1.4s ease-in-out infinite;
}
.rp-table-skeleton-row .rp-skel-cell:nth-child(odd)  { animation-delay: .15s; }
.rp-table-skeleton-row .rp-skel-cell:nth-child(even) { animation-delay: .3s;  }

/* Tabela oculta enquanto skeleton visível */
table[data-datatable].rp-loading { visibility: hidden; position: absolute; }

/* ── Skeleton loading (percepção de velocidade nas listas) ── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--cor-surface-overlay);
  border-radius: .5rem;
  min-height: .85rem;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: skeleton-varre 1.2s infinite;
}
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}
@keyframes skeleton-varre { 100% { transform: translateX(100%); } }
.skeleton-circulo { border-radius: 50%; flex-shrink: 0; }
.skeleton-item { display: flex; gap: .65rem; padding: .6rem .75rem; align-items: center; }

/* ── Estado vazio com a marca ── */
.estado-vazio {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--cor-text-muted);
}
.estado-vazio::before {
  content: '';
  display: block;
  width: 110px; height: 110px;
  margin: 0 auto .85rem;
  /* Marca em silhueta de cor única. Usa marca-simbolo.png (símbolo íntegro
     extraído do logo): o favicon-192 vinha CORTADO no topo/base no próprio
     arquivo, então nenhum object-fit resolvia. Mask + cor pinta o infinito
     inteiro num tom só, lendo como marca completa. */
  background-color: var(--cor-text-subtle);
  -webkit-mask: url("/static/marca-simbolo.png") center/contain no-repeat;
  mask: url("/static/marca-simbolo.png") center/contain no-repeat;
  opacity: .3;
}
.estado-vazio p { font-size: .85rem; margin: 0; }

/* ── DataTables com o tema da marca ── */
table.dataTable thead th {
  background: var(--cor-primaria) !important;
  color: #fff !important;
  border-bottom: none !important;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after { color: #fff !important; opacity: .55; }
table.dataTable tbody tr:hover { background: var(--cor-destaque-light) !important; }
[data-theme="dark"] table.dataTable tbody tr:hover { background: rgba(255,85,33,.08) !important; }
.page-link { color: var(--cor-primaria); }
.page-item.active .page-link {
  background: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  color: #fff !important;
}

/* ── Transição suave de página ── */
@media (prefers-reduced-motion: no-preference) {
  .main-content { animation: pagina-entra .28s var(--ease-out, ease); }
  @keyframes pagina-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Comissões: faixas (metais) + utilitários de tabela ──
   Substituem os hex cravados no JS/HTML do dashboard de comissões. */
:root {
  --faixa-ferro:    #808080;
  --faixa-bronze:   #CD7F32;
  --faixa-prata:    #C0C0C0;
  --faixa-ouro:     #FFD700;
  --faixa-diamante: #00CED1;
}
.faixa-badge { background: #999; color: #fff; }
.faixa-badge.faixa-ferro    { background: var(--faixa-ferro); }
.faixa-badge.faixa-bronze   { background: var(--faixa-bronze); }
.faixa-badge.faixa-prata    { background: var(--faixa-prata);    color: #333; }
.faixa-badge.faixa-ouro     { background: var(--faixa-ouro);     color: #333; }
.faixa-badge.faixa-diamante { background: var(--faixa-diamante); color: #333; }
.faixa-badge.faixa-sem      { background: #dc3545; }

.table-scroll-x { overflow-x: auto; }
.badge-funcao { background: var(--cor-primaria-light); color: var(--cor-primaria-mid); }
.val-destaque { color: var(--cor-destaque); }

/* ── Sub-nav de departamento (compartilhada) ─────────────────────────────── */
.dept-nav {
  display: flex; gap: .35rem; flex-wrap: wrap;
  margin: 0 0 1.25rem; padding: .3rem;
  background: rgba(0,34,92,.07); border-radius: var(--radius-pill);
}
[data-theme="dark"] .dept-nav { background: rgba(93,140,255,.14); }
.dept-nav a {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
  padding: .5rem .9rem; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--cor-text-muted); transition: color .18s ease, background .18s ease;
}
.dept-nav a:hover { color: var(--cor-text); background: rgba(255,255,255,.55); }
[data-theme="dark"] .dept-nav a:hover { background: rgba(255,255,255,.06); }
.dept-nav a.on { color: #fff; background: var(--cor-primaria); box-shadow: var(--shadow-primary); }
.dept-nav a.on:hover { color: #fff; }
.dept-nav a i { margin-right: .35rem; }
/* Quando as abas quebram em duas linhas, o raio de pílula do fundo vira um
   oval alto e as bordas dele entram por baixo do primeiro item (o azul do
   Painel ficava "fora do círculo"). Em duas linhas o fundo é retangular. */
@media (max-width: 767.98px) {
  .dept-nav { border-radius: var(--radius-lg); gap: .25rem; padding: .25rem; }
  .dept-nav a { flex: 1 1 6rem; padding: .5rem .5rem; font-size: .76rem; }
  .dept-nav a i { margin-right: .25rem; }
}

/* ── Escopo de departamento: tokens de status + chip semantico ───────────── */
.dept-scope {
  --st-ok:      #12805c;  --st-ok-bg:   rgba(18,128,92,.12);   /* ok / presente */
  --st-warn:    #b7791f;  --st-warn-bg: rgba(214,158,46,.16);  /* atencao / atraso */
  --st-muted:   var(--cor-text-muted); --st-muted-bg: rgba(140,147,162,.14);
  --st-acao:    var(--cor-destaque);   --st-acao-bg:  var(--cor-destaque-light);
  --st-base:    var(--cor-primaria);   --st-base-bg:  rgba(0,34,92,.07);
  max-width: 760px; margin: 0 auto;
}
.dept-scope.dept-wide { max-width: 1100px; }
[data-theme="dark"] .dept-scope {
  --st-ok:   #34d399; --st-ok-bg:   rgba(52,211,153,.14);
  --st-warn: #fbbf5a; --st-warn-bg: rgba(251,191,90,.16);
  --st-base-bg: rgba(93,140,255,.14);
  --st-acao-bg: rgba(255,85,33,.16);
}
.dept-scope .status-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700; padding: .18rem .55rem;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--st-muted-bg); color: var(--st-muted);
}
.dept-scope .status-chip--ok    { background: var(--st-ok-bg);    color: var(--st-ok); }
.dept-scope .status-chip--warn  { background: var(--st-warn-bg);  color: var(--st-warn); }
.dept-scope .status-chip--muted { background: var(--st-muted-bg); color: var(--st-muted); }
.dept-scope .status-chip--acao  { background: var(--st-acao-bg);  color: var(--st-acao); }
.dept-scope .status-chip--base  { background: var(--st-base-bg);  color: var(--st-base); }

/* ── Monitoria: esteira kanban + dashboard de KPIs ───────────────────────── */
.mo-scope .mo-esteira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.mo-scope .mo-col {
  background: var(--st-muted-bg);
  border-radius: var(--radius-lg);
  padding: .6rem;
}
.mo-scope .mo-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .1rem .35rem .55rem;
  font-weight: 700; font-size: .82rem;
}
.mo-scope .mo-col--aberta    .mo-col-title { color: var(--st-muted); }
.mo-scope .mo-col--em_analise .mo-col-title { color: var(--st-warn); }
.mo-scope .mo-col--concluida .mo-col-title { color: var(--st-ok); }
.mo-scope .mo-col-count {
  background: var(--cor-surface, #fff); color: var(--cor-text-muted);
  border-radius: var(--radius-pill); padding: .05rem .5rem;
  font-size: .72rem; min-width: 1.6rem; text-align: center;
}
.mo-scope .mo-col-body { display: flex; flex-direction: column; gap: .55rem; }
.mo-scope .mo-card {
  background: var(--cor-surface, #fff);
  border: 1px solid rgba(140,147,162,.16);
  border-radius: var(--radius-md); padding: .65rem .7rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
}
.mo-scope .mo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Realce por severidade do tipo (a cor do tipo, quando definida, sobrepoe via
   style inline no border-left-color). */
.mo-scope .mo-card { border-left-width: 3px; }
.mo-scope .mo-card--grave { border-left-color: var(--st-acao); }
.mo-scope .mo-card--leve  { border-left-color: rgba(140,147,162,.35); }
.mo-scope .mo-card-chips { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.mo-scope .mo-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.mo-scope .mo-card-id { font-weight: 700; font-size: .78rem; color: var(--cor-text-muted); }
.mo-scope .mo-card-nome { font-weight: 600; margin: .3rem 0 .15rem; line-height: 1.25; }
.mo-scope .mo-card-meta { font-size: .76rem; color: var(--cor-text-muted); }
.mo-scope .mo-card-sep { margin: 0 .25rem; opacity: .6; }
.mo-scope .mo-card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin-top: .6rem;
}
.mo-scope .mo-card-actions form { margin: 0; }
.mo-scope .mo-col-empty { padding: .4rem .35rem; margin: 0; }
[data-theme="dark"] .mo-scope .mo-card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .mo-scope .mo-col-count { background: rgba(255,255,255,.06); }

.mo-scope .mo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem; margin-bottom: 1.2rem;
}
.mo-scope .mo-kpi {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .9rem 1rem; border-radius: var(--radius-lg);
  background: var(--st-muted-bg); border-left: 4px solid var(--st-muted);
}
.mo-scope .mo-kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.mo-scope .mo-kpi-lbl { font-size: .78rem; color: var(--cor-text-muted); font-weight: 600; }
.mo-scope a.mo-kpi-link { text-decoration: none; color: inherit; transition: transform .15s var(--ease-out, ease-out), box-shadow .15s var(--ease-out, ease-out); }
.mo-scope a.mo-kpi-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* formulários centralizados (nova ocorrência / configurações) */
.mo-scope .mo-form-wrap { max-width: 640px; margin: 0 auto; }
.mo-scope .mo-form-wrap--lg { max-width: 760px; }
/* input de data nunca corta o dd/mm/aaaa (coluna md-1 espremia) */
.mo-scope .mo-input-data { width: 9.4rem; }
.mo-scope .mo-select-compacto { width: 8rem; }

/* estado vazio padrão do departamento */
.mo-scope .mo-vazio { text-align: center; padding: 2.5rem 1rem; }
.mo-scope .mo-vazio > i { display: block; font-size: 2.2rem; color: var(--cor-text-subtle); margin-bottom: .5rem; }
.mo-scope .mo-vazio--sm { padding: 1rem .5rem; }
.mo-scope .mo-vazio--sm > i { font-size: 1.4rem; margin-bottom: .25rem; }

/* card da esteira: avatar, idade e SLA estourado */
.mo-scope .mo-card-nome { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.mo-scope .mo-card-avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .02em;
}
.mo-scope .mo-av-0 { background: var(--cor-av-0); }
.mo-scope .mo-av-1 { background: var(--cor-av-1); }
.mo-scope .mo-av-2 { background: var(--cor-av-2); }
.mo-scope .mo-av-3 { background: var(--cor-av-3); }
.mo-scope .mo-av-4 { background: var(--cor-av-4); }
.mo-scope .mo-av-5 { background: var(--cor-av-5); }
.mo-scope .mo-card-idade { white-space: nowrap; }
.mo-scope .mo-card--sla { box-shadow: 0 0 0 1px var(--st-acao, #d64545); }
.mo-scope .mo-col-hint { font-size: .68rem; color: var(--cor-text-subtle); margin-left: .35rem; }
.mo-scope .mo-chip-x { margin-left: .35rem; color: inherit; text-decoration: none; font-weight: 700; }

/* preview da cadeia de alerta (nova ocorrência) */
.mo-scope .mo-cadeia { margin-top: .6rem; padding: .6rem .75rem; border-radius: var(--radius-md, 10px); background: var(--cor-surface-overlay); }
.mo-scope .mo-cadeia-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mo-scope .mo-cadeia-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .6rem; border-radius: var(--radius-pill, 999px);
  background: var(--cor-surface-raised, #fff); border: 1px solid var(--cor-border);
  font-size: .72rem;
}
.mo-scope .mo-cadeia-chip b { text-transform: capitalize; font-weight: 600; color: var(--cor-text-muted); }

/* dropzone das provas */
.mo-scope .mo-dropzone {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .8rem; border: 2px dashed var(--cor-border); border-radius: var(--radius-md, 10px);
  color: var(--cor-text-muted); font-size: .82rem;
  transition: border-color .15s ease, background .15s ease;
}
.mo-scope .mo-dropzone.is-drag { border-color: var(--cor-destaque); background: var(--cor-destaque-light); }
.mo-scope .mo-dropzone-input { flex: 1 1 220px; }
.mo-scope .mo-kpi--base  { background: var(--st-base-bg); border-left-color: var(--st-base); }
.mo-scope .mo-kpi--warn  { background: var(--st-warn-bg); border-left-color: var(--st-warn); }
.mo-scope .mo-kpi--warn  .mo-kpi-num { color: var(--st-warn); }
.mo-scope .mo-kpi--ok    { background: var(--st-ok-bg); border-left-color: var(--st-ok); }
.mo-scope .mo-kpi--ok    .mo-kpi-num { color: var(--st-ok); }
.mo-scope .mo-kpi--alert { background: var(--st-acao-bg); border-left-color: var(--st-acao); }
.mo-scope .mo-kpi--alert .mo-kpi-num { color: var(--st-acao); }

.mo-scope .mo-dash-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start;
}
.mo-scope .mo-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.mo-scope .mo-bar-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: .6rem; }
.mo-scope .mo-bar-lbl { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-scope .mo-bar-track { background: var(--st-muted-bg); border-radius: var(--radius-pill); height: .55rem; overflow: hidden; }
.mo-scope .mo-bar-fill { display: block; height: 100%; background: var(--st-base); border-radius: var(--radius-pill); }
.mo-scope .mo-bar-val { font-size: .82rem; font-weight: 700; color: var(--cor-text-muted); min-width: 1.5rem; text-align: right; }
.mo-scope .mo-30d-num { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--st-base); }

/* Mini-grafico de barras da serie semanal (sem lib externa). */
.mo-scope .mo-serie {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: .5rem; min-height: 160px; padding-top: .5rem;
}
.mo-scope .mo-serie-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: .3rem; height: 140px;
}
.mo-scope .mo-serie-val { font-size: .74rem; font-weight: 700; color: var(--cor-text-muted); }
.mo-scope .mo-serie-bar {
  width: 60%; max-width: 2.4rem; min-height: 3px;
  background: var(--st-base); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height var(--duration-normal, 300ms) var(--ease-out-expo, ease);
}
.mo-scope .mo-serie-lbl { font-size: .68rem; color: var(--cor-text-muted); white-space: nowrap; }

@media (max-width: 820px) {
  .mo-scope .mo-esteira { grid-template-columns: 1fr; }
  .mo-scope .mo-dash-grid { grid-template-columns: 1fr; }
  .mo-scope .mo-serie-lbl { font-size: .6rem; }
}

/* ── Home de departamento: hero de status + métricas + CTA + atalhos ──────── */
.dept-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); padding: 1.6rem 1.5rem;
  color: #fff; background: var(--gradient-brand);
  box-shadow: var(--shadow-lg); margin-bottom: 1rem;
}
.dept-hero::after {
  content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  top: -120px; right: -80px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.dept-hero__eyebrow { font-size: .82rem; opacity: .82; letter-spacing: .02em; }
.dept-hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin: .15rem 0 .1rem;
}
.dept-hero__sub { font-size: .85rem; opacity: .85; text-transform: capitalize; }
.dept-state {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
  padding: .4rem .8rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16); font-size: .84rem; font-weight: 600; backdrop-filter: blur(4px);
}
.dept-state .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }
.dept-state--ok    .dot { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.28); }
.dept-state--muted .dot { background: #cbd5e1; }
.dept-state--warn  .dot { background: #fbbf5a; }

.dept-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.dept-metric {
  background: var(--cor-surface); border: 1px solid var(--cor-border);
  border-radius: var(--radius-lg); padding: .8rem .7rem; text-align: center;
}
.dept-metric .v {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  color: var(--cor-text); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.dept-metric .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-text-muted); margin-top: .1rem; }

.dept-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: 1rem; border: 0; border-radius: var(--radius-lg); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #fff;
  text-decoration: none; background: var(--gradient-destaque);
  box-shadow: var(--shadow-destaque); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dept-cta:hover { transform: translateY(-2px); color: #fff; }
.dept-cta:active { transform: translateY(0); }
.dept-cta--base { background: linear-gradient(135deg, var(--cor-primaria), #123a86); box-shadow: var(--shadow-primary); }

.dept-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-top: 1rem; }
.dept-link {
  display: flex; align-items: center; gap: .6rem; padding: .85rem .9rem;
  background: var(--cor-surface); border: 1px solid var(--cor-border); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--cor-text); transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.dept-link:hover { border-color: var(--st-acao); transform: translateY(-2px); color: var(--cor-text); }
.dept-link i { font-size: 1.25rem; color: var(--st-acao); }
.dept-link .t { font-weight: 600; font-size: .9rem; }
.dept-link .s { font-size: .72rem; color: var(--cor-text-muted); }

@media (max-width: 575.98px) {
  .dept-metrics { gap: .4rem; }
  .dept-metric { padding: .65rem .4rem; }
  .dept-metric .v { font-size: 1.1rem; }
}

/* ── Utilitários token-backed (cor/superfície) - matam style="" inline ────── */
.u-muted   { color: var(--cor-text-muted) !important; }
.u-subtle  { color: var(--cor-text-subtle) !important; }
.u-accent  { color: var(--cor-destaque) !important; }
.u-primary { color: var(--cor-primaria) !important; }
.u-surface        { background: var(--cor-surface) !important; }
.u-surface-raised { background: var(--cor-surface-raised) !important; }
.u-border  { border: 1px solid var(--cor-border) !important; }

.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700; padding: .18rem .55rem;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--st-muted-bg, rgba(140,147,162,.14)); color: var(--st-muted, var(--cor-text-muted));
}
.chip--ok   { background: var(--st-ok-bg);   color: var(--st-ok); }
.chip--warn { background: var(--st-warn-bg); color: var(--st-warn); }
.chip--acao { background: var(--st-acao-bg); color: var(--st-acao); }

.stat { text-align: center; }
.stat .v { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--cor-text); font-variant-numeric: tabular-nums; }
.stat .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-text-muted); }

/* Barra de progresso: valor via style="--val:73%" (dado, não estilo) */
.progress-token { height: .5rem; border-radius: var(--radius-pill); background: var(--cor-surface-overlay); overflow: hidden; }
.progress-token::after { content: ''; display: block; height: 100%; width: var(--val, 0%); background: var(--gradient-destaque); border-radius: inherit; }

/* ── Status de plataforma (Controle Interno) ─────────────────────────────── */
/* Bolinha colorida por status (sem emoji): cor via --st-cor por classe. */
.status-plataforma-badge { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.status-plataforma-badge .status-dot,
.status-plataforma-opcao .status-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  background: var(--st-cor, #6c757d); flex-shrink: 0;
}
.status-plataforma-opcao { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.status-online     { --st-cor: #22c55e; }
.status-pausa      { --st-cor: #eab308; }
.status-almoco     { --st-cor: #fd7e14; }
.status-banheiro   { --st-cor: #38bdf8; }
.status-negociacao { --st-cor: #8b5cf6; }
.status-acao_externa { --st-cor: #14b8a6; }
.status-saida_justificada { --st-cor: #f43f5e; }
.status-offline    { --st-cor: #94a3b8; }

/* ── Pop-up da justificativa da saída (seletor de status, topbar) ─────────
   Fica fora do fluxo do dropdown porque o seletor é global: aparece por cima
   de qualquer tela, inclusive as que não carregam modal do Bootstrap. */
.rc-just-caixa {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(6, 31, 118, .35);
}
.rc-just-caixa[hidden] { display: none; }
.rc-just-cartao {
  width: min(26rem, 100%);
  background: var(--cor-surface); color: var(--cor-text);
  border: 1px solid var(--cor-border); border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(6, 31, 118, .28);
  padding: 1rem 1.1rem 1.1rem;
}
.rc-just-cartao h6 { margin: 0 0 .3rem; font-weight: 700; font-size: .95rem; }
.rc-just-cartao p { margin: 0 0 .7rem; font-size: .8rem; color: var(--cor-text-muted); }
.rc-just-acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }