/* Viki — estilos globais (sem dependências externas)
   Paleta/estilo "Apple flat" portado do Zaki: navy/gold/lightblue, tipografia
   -apple-system, radius/shadow em camadas. Estrutura de navegação (menu
   lateral de 3 níveis) inalterada — só recoloração/retoque visual. */

:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-border: #e3e6ea;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --text-faint: #97a1ad;
  --color-primary: #15397f;
  --color-primary-dark: #0e2856;
  --color-primary-bg: #eef1f9;
  --color-gold: #ffc72c;
  --color-lightblue: #39a8e8;
  --color-danger: #d64545;
  --color-danger-bg: #fde3e3;
  --color-danger-bg-strong: #f9d0d0;
  --color-warning: #c9882a;
  --color-success: #1fa855;

  --color-bg-alt: #eef0f4;
  --color-neutral-bg: #f0f0f0;
  --color-hover: #f7f9fd;
  --color-hover-strong: #eef1f7;

  --status-novo: #579bfc;
  --status-em_processo: #fdab3d;
  --status-executado: #00c875;
  --status-aguardando_retorno: #a25ddc;
  --status-reaberto: #ff642e;
  --status-cancelado: #9699a6;

  --prio-alta: #e2445c;
  --prio-media: #fdab3d;
  --prio-baixa: #579bfc;
  --prio-urgente: #c4136b;

  --status-pendente: #9699a6;
  --status-aguardando: #a25ddc;
  --status-em_andamento: #fdab3d;
  --status-finalizado: #00c875;
  --status-resolvido: #00c875;

  --status-nova: #579bfc;
  --status-em_avaliacao: #fdab3d;
  --status-aprovada: #00c875;
  --status-arquivada: #9699a6;

  --conf-bom: #00c875;
  --conf-medio: #fdab3d;
  --conf-quebrado: #e2445c;
  --conf-necessita_analise: #a25ddc;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.12);
}

/* ---------- Modo noturno ----------
   Só redefine os tokens neutros/estruturais (fundo, superfície, borda,
   texto, primária) — os acentos de marca (gold/lightblue) e as cores
   semânticas de status/prioridade ficam saturadas o bastante pra
   continuar legíveis em ambos os temas, sem precisar de par escuro.
   Duas formas de ativar: automática (segue o SO, a menos que o usuário já
   tenha escolhido "claro" manualmente) e explícita (troca no .theme-toggle,
   grava em localStorage, aplica data-theme na tag <html> ANTES do primeiro
   paint — ver o <script> inline no <head> do index.html — pra nunca piscar
   claro→escuro na carga da página). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-bg: #14161b;
    --color-surface: #1d2026;
    --color-bg-alt: #1a1d23;
    --color-border: #2c3038;
    --color-text: #e7e9ec;
    --color-text-muted: #9aa1ac;
    --text-faint: #6b7280;
    --color-primary: #5b8def;
    --color-primary-dark: #82abf5;
    --color-primary-bg: rgba(91, 141, 239, 0.16);
    --color-danger: #ef6a6a;
    --color-danger-bg: #3a1f22;
    --color-danger-bg-strong: #4a262a;
    --color-warning: #e0a955;
    --color-success: #33c96f;
    --color-neutral-bg: #2a2d34;
    --color-hover: rgba(255, 255, 255, 0.045);
    --color-hover-strong: rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
}
html[data-theme="dark"] {
  --color-bg: #14161b;
  --color-surface: #1d2026;
  --color-bg-alt: #1a1d23;
  --color-border: #2c3038;
  --color-text: #e7e9ec;
  --color-text-muted: #9aa1ac;
  --text-faint: #6b7280;
  --color-primary: #5b8def;
  --color-primary-dark: #82abf5;
  --color-primary-bg: rgba(91, 141, 239, 0.16);
  --color-danger: #ef6a6a;
  --color-danger-bg: #3a1f22;
  --color-danger-bg-strong: #4a262a;
  --color-warning: #e0a955;
  --color-success: #33c96f;
  --color-neutral-bg: #2a2d34;
  --color-hover: rgba(255, 255, 255, 0.045);
  --color-hover-strong: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: 14px;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login page ---------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  width: 360px;
}
.login-card .login-logo {
  display: block;
  height: 46px;
  width: auto;
  margin: 0 0 10px;
}
.login-card p.subtitle {
  margin: 0 0 24px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.login-card label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
}
.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.login-card button {
  width: 100%;
  padding: 11px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
}
.login-card button:hover { background: var(--color-primary-dark); }
.login-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  display: none;
}
.login-hint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- App shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.password-warning-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--color-danger);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.password-warning-banner.hidden { display: none; }
.password-warning-banner button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.password-warning-banner button:hover { background: rgba(255, 255, 255, 0.32); }
body:has(.password-warning-banner:not(.hidden)) .app-shell { padding-top: 34px; }

.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar h1 { font-size: 19px; margin: 0; }
.topbar .actions { display: flex; gap: 10px; align-items: center; }
.topbar-left { display: flex; align-items: center; gap: 6px; }
/* Voltar/Home no topbar (29/09) — únicos botões de navegação sempre visíveis agora que a
   doca lateral está escondida (ver .dock acima). */
.topbar-nav-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 4px;
}
.topbar-nav-btn:hover { background: var(--color-bg); color: var(--color-text); }
.topbar-nav-btn.hidden { display: none; }
.topbar-logo { height: 28px; width: auto; flex-shrink: 0; cursor: pointer; margin-right: 6px; }

/* Tema/avatar/Sair no topbar (29/09) — mesmo visual que tinham no rodapé da doca lateral. */
.topbar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.topbar-theme-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.topbar-theme-btn.active { background: var(--color-primary); color: #fff; }
.topbar-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- VIKI: assistente flutuante (29/09) ---------- */
.viki-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
}
/* Sem círculo de fundo (pedido do usuário) — só a logo reduzida flutuando; drop-shadow (não
   box-shadow, que só faria sentido numa forma sólida) garante que ela continue visível em cima
   de qualquer conteúdo da página por baixo. Cresce suavemente no hover. */
.viki-fab-icon {
  height: 62px;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(14, 40, 86, .45));
  transition: transform .15s ease;
}
.viki-fab:hover .viki-fab-icon { transform: scale(1.12); }
.viki-panel {
  position: fixed;
  right: 22px;
  bottom: 88px;
  width: 340px;
  max-width: calc(100vw - 44px);
  max-height: min(520px, calc(100vh - 120px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 201;
}
.viki-panel.hidden { display: none; }
.viki-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}
.viki-panel-header-left { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.viki-avatar {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
.viki-panel-close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; }
.viki-disclaimer {
  padding: 9px 14px;
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.viki-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}
.viki-msg { max-width: 84%; border-radius: 12px; padding: 8px 12px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.viki-msg-assistant { align-self: flex-start; background: var(--color-bg-alt); color: var(--color-text); }
.viki-msg-user { align-self: flex-end; background: var(--color-primary); color: #fff; }
.viki-msg code { font-family: monospace; font-size: 12px; background: rgba(0,0,0,.08); border-radius: 4px; padding: 1px 4px; }
.viki-msg-user code { background: rgba(255,255,255,.18); }
.viki-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.viki-input-row input {
  flex-grow: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}
.viki-input-row button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 9px;
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 640px) {
  .viki-fab { right: 16px; bottom: 16px; }
  .viki-panel { right: 12px; bottom: 80px; }
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
/* Avatar/tema do usuário: ver .dock-avatar / .dock-theme-toggle mais abaixo — moraram no
   rodapé da doca (rail), não são mais um widget flutuante separado no canto da tela. */

.content { flex: 1; padding: 24px 28px; overflow-y: auto; }

/* Modo fullscreen para o iframe do Zaki */
.content.zaki-fullscreen {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.content.zaki-fullscreen #view-zakiChat.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}
.content.zaki-fullscreen #zakiChatContainer {
  flex: 1 !important;
  min-height: 0 !important;
}
.content.zaki-fullscreen #zakiChatContainer iframe {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.view { display: none; }
.view.active { display: block; }

/* ---------- Doca de navegação (rail fino, só ícone, lateral esquerda) ----------
   "Inativada" (29/09, pedido do usuário: "vamos inativar os botões da lateral da tela normal
   e deixar só os módulos e os menus dentro dos módulos") — Home + barra do módulo cobrem
   100% do que a doca fazia (ver home.js/renderModuleSidebar), então ela fica sempre
   escondida agora. O JS (renderDock/applyScreenPermissions/NAV_TREE) continua existindo sem
   mudança nenhuma — só não é mais exibido — de propósito, pra não arriscar remover código
   ainda referenciado em outros pontos do app sob pressão de tempo. */
.dock { display: none !important; }
.dock {
  position: fixed;
  left: 18px;
  top: 18px;
  bottom: 18px;
  transform: none;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 14px 8px;
  box-shadow: var(--shadow-md);
  z-index: 40;
}
.dock-icons { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.dock-btn {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.dock-btn .dock-icon { display: flex; line-height: 1; flex-shrink: 0; }
.dock-btn .dock-icon svg { display: block; }
.dock-btn .dock-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.dock-btn:hover { background: var(--color-bg); }
/* "open" = o painel deste grupo está aberto (estado transitório, só enquanto o
   flyout estiver visível) — não pinta o fundo, só o ícone, pra não parecer
   uma seleção de tela. "active" = esta é a tela realmente exibida agora; é o
   único estado que pinta o fundo do botão, e só muda como resultado direto de
   navegar pra uma tela (ver highlightDockGroup). */
.dock-btn.open { color: var(--color-primary); }
.dock-btn.active { background: var(--color-primary); color: #fff; }

/* Logo da marca, primeiro item da doca — clicável (abre busca/favoritos, ver
   openSearchPanel em dock-nav.js), por isso ganha cursor/hover mesmo sem ter a classe
   .dock-btn (não participa do active/open, que é só de navegação). */
.dock-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}
.dock-logo:hover, .dock-logo:focus-visible { background: var(--color-bg); }
.dock-logo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.dock-logo img { display: block; height: 22px; width: auto; max-width: 100%; object-fit: contain; }

/* Rodapé da doca: avatar (abre nome/cargo/Sair) + toggle de tema segmentado — substitui o
   antigo widget flutuante separado no canto inferior direito. */
.dock-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* auto empurra o rodapé pro final de verdade do .dock (flex column) — antes ficava logo
     depois do último ícone, colado, em vez de fixo embaixo com o espaço vazio entre os dois. */
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.dock-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: default;
}
/* Sempre visível no rodapé (não é mais um painel que abre ao clicar) — mesma largura da doca,
   ícone + rótulo pequeno, em vermelho pra se diferenciar visualmente dos itens de navegação. */
.dock-logout-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 7px 4px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.dock-logout-btn:hover { background: var(--color-danger-bg); }
.dock-logout-btn svg { display: block; }
.dock-theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
}
.dock-theme-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.dock-theme-btn.active { background: var(--color-primary); color: #fff; }

/* ---------- Barra do módulo (29/09) — substitui a doca global inteira enquanto a tela
   atual pertence a um setor (SETOR_MODULES); ver renderModuleSidebar em dock-nav.js e o
   toggle .module-active em router.js#switchView. Mesma posição/z-index da doca, só mais
   larga (precisa caber rótulo de texto, não só ícone). ---------- */
.module-sidebar {
  display: none;
  position: fixed;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 250px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 14px 10px;
  box-shadow: var(--shadow-md);
  z-index: 40;
}
.app-shell.module-active .dock { display: none; }
.app-shell.module-active .module-sidebar { display: flex; }
.app-shell.module-active .content { padding-left: 290px; }
/* Tema escuro ("Liquid Glass"): o topbar é um card flutuante com margem própria (não confia
   em z-index sobre a doca, como o tema claro faz) — precisa abrir espaço pra barra do módulo
   também. Sem efeito no tema claro (lá .topbar não tem margin-left nenhuma). */
.app-shell.module-active .topbar { margin-left: 290px; }
.module-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 10px 12px;
  flex-shrink: 0;
}
.module-sidebar-head-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-sidebar-rows { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
/* Grupos com rótulo (RH/DP/Pessoas etc., 29/09) viram um botão que expande/recolhe um submenu
   — ver renderModuleSidebar em dock-nav.js. */
.module-sidebar-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  border: none;
  border-top: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: 12px 10px 2px;
  margin-top: 8px;
}
.module-sidebar-group-btn:first-child { border-top: none; margin-top: 4px; padding-top: 10px; }
.module-sidebar-group-btn svg { flex-shrink: 0; transform: rotate(-90deg); transition: transform .15s ease; }
.module-sidebar-group-btn.open svg { transform: rotate(90deg); }
.module-sidebar-submenu { display: none; flex-direction: column; gap: 2px; }
.module-sidebar-submenu.open { display: flex; }
.module-sidebar-row {
  text-align: left;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.module-sidebar-row:hover { background: var(--color-bg); }
.module-sidebar-row.active { background: var(--color-primary-bg); color: var(--color-primary-dark); font-weight: 600; }
/* Itens auto-injetados em todo setor (Auditoria/Quadro Digital) — mesmo tratamento mais
   discreto que o protótipo usava, mas continuam clicáveis normalmente (não é "em breve"). */
.module-sidebar-row-aux { color: var(--color-text-muted); }
.module-sidebar-row-muted { color: var(--color-text-muted); font-style: italic; cursor: default; }
.module-sidebar-row-muted:hover { background: transparent; }
/* Topo da barra: Voltar + botão de recolher (01/10). */
.module-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-shrink: 0; }
.module-sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: none; background: transparent; color: var(--color-text-muted);
  border-radius: var(--radius-sm); cursor: pointer;
}
.module-sidebar-toggle:hover { background: var(--color-bg); color: var(--color-text); }
/* Logo da Viki no menu (01/10) — horizontal com o menu aberto, a do favicon com ele recolhido. A
   logo do topbar some enquanto há menu (ela "mudou" pra cá); na Home, sem menu, continua no topbar. */
.module-sidebar-logo {
  display: flex; align-items: center; border: none; background: transparent;
  padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; min-width: 0;
}
.module-sidebar-logo:hover { background: var(--color-bg); }
.module-sidebar-logo-full { height: 30px; width: auto; display: block; }
.module-sidebar-logo-mini { height: 34px; width: auto; display: none; }
.app-shell.module-sidebar-compact .module-sidebar-logo { padding: 4px 0; justify-content: center; }
.app-shell.module-sidebar-compact .module-sidebar-logo-full { display: none; }
.app-shell.module-sidebar-compact .module-sidebar-logo-mini { display: block; }
.app-shell.module-active .topbar-logo { display: none; }
.module-sidebar-row { display: flex; align-items: center; gap: 10px; }
.module-sidebar-row-icon { display: flex; flex-shrink: 0; color: var(--color-text-muted); }
.module-sidebar-row.active .module-sidebar-row-icon { color: var(--color-primary-dark); }
.module-sidebar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-sidebar, .app-shell.module-active .content, .app-shell.module-active .topbar {
  transition: width .18s ease, padding-left .18s ease, margin-left .18s ease;
}

/* Menu recolhido — só ícones (01/10, ver aplicarMenuCompacto em dock-nav.js). Nome de cada item
   fica no tooltip; grupos (Chamados, RH, Pessoas...) viram uma linha divisória com os itens
   sempre visíveis, já que não dá pra abrir submenu sem rótulo. */
.app-shell.module-sidebar-compact .module-sidebar { width: 68px; padding: 14px 8px; }
.app-shell.module-active.module-sidebar-compact .content { padding-left: 106px; }
.app-shell.module-active.module-sidebar-compact .topbar { margin-left: 106px; }
.app-shell.module-sidebar-compact .module-sidebar-label { display: none; }
.app-shell.module-sidebar-compact .module-sidebar-top { flex-direction: column; gap: 6px; }
.app-shell.module-sidebar-compact .module-sidebar-row { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.module-sidebar-compact .module-sidebar-toggle svg { transform: scaleX(-1); }
.app-shell.module-sidebar-compact .module-sidebar-head { justify-content: center; padding: 8px 0 10px; }
.app-shell.module-sidebar-compact .module-sidebar-group-btn { display: none; }
.app-shell.module-sidebar-compact .module-sidebar-submenu { display: flex; border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 6px; }

/* ---------- Home (29/09) — 1 bloco por setor/módulo + atalhos de chamado (home.js) -------
   Mesmo design/disposição do protótipo mostrado ao usuário (Artifact): saudação no topo,
   linha de atalhos de chamado, card "Seu setor" em destaque, depois a grade com todos os
   módulos. Cores/tokens são os MESMOS var(--color-*) do resto do app (já eram os mesmos do
   protótipo — paleta "Apple flat" navy/gold/lightblue), só a composição é nova. */
.home-wrap { display: flex; flex-direction: column; gap: 28px; max-width: 1600px; }
.home-greeting h1 { font-size: clamp(21px, 3vw, 26px); margin: 0; }
.home-greeting-sub { color: var(--color-text-muted); font-size: 14.5px; margin-top: 4px; }
.home-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.home-hub-row { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hub-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.home-hub-btn:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.home-hub-icon { font-size: 15px; line-height: 1; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.home-tile {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 16px;
  padding: 22px 24px;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font-family: inherit;
}
.home-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cbd5e8; }
.home-tile-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-tile-icon svg { width: 26px; height: 26px; }
.home-tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-tile-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-tile-label { font-size: 17px; font-weight: 600; }
.home-tile-caption { color: var(--color-text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-tile-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--color-gold);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* Card "Seu setor" — mesma linha do protótipo: maior, borda navy, ícone em destaque,
   max-width pra não esticar a largura da tela inteira num monitor grande. */
.home-tile-hero {
  border: 1.5px solid var(--color-primary);
  max-width: 560px;
  padding: 20px clamp(16px, 3vw, 26px);
}
.home-tile-hero .home-tile-icon { width: 56px; height: 56px; background: var(--color-primary-bg); color: var(--color-primary-dark); }
.home-tile-hero .home-tile-label { font-size: 19px; }
.home-tile-hero .home-tile-caption { white-space: normal; }

@media (max-width: 900px) {
  .app-shell.module-active .content { padding-left: 210px; }
  .app-shell.module-active .topbar { margin-left: 210px; }
  .module-sidebar { width: 180px; }
  .app-shell.module-active.module-sidebar-compact .content { padding-left: 96px; }
  .app-shell.module-active.module-sidebar-compact .topbar { margin-left: 96px; }
}

/* Painéis flutuantes (submenu): abrem à DIREITA do botão/painel anterior
   (era acima, quando a doca ficava embaixo — ver positionDockPanel em
   dock-nav.js) — cascata horizontal em vez de vertical. Podem sobrepor
   qualquer conteúdo: são transitórios, somem no clique seguinte
   (closeDockFlyouts), então não precisam reservar espaço em .content. */
.dock-panel {
  position: fixed;
  min-width: 220px;
  max-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 41;
}
.dock-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text);
  cursor: pointer;
}
.dock-panel-row:hover { background: var(--color-primary-bg); }
.dock-panel-row .chevron { color: var(--color-text-muted); font-size: 13px; flex-shrink: 0; }
.dock-panel-row-muted {
  color: var(--color-text-muted);
  cursor: default;
  font-style: italic;
}
.dock-panel-row-muted:hover { background: transparent; }
.dock-panel-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Seletor de setor dentro do painel "Meu Setor" (só admin) — ver openMeuSetorPanel em
   dock-nav.js. Cores escuras explícitas (não var(--color-bg)) porque um <select> nativo
   ignora background customizado em vários navegadores a menos que appearance:none também
   seja aplicado — sem isso ele renderiza com o cinza-claro padrão do SO, destoando do
   painel escuro fixo. Seta desenhada via ::after no wrapper (appearance:none remove a nativa). */
.meu-setor-select-row { padding: 2px 12px 8px; position: relative; }
.meu-setor-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 9px 32px 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #2f70e6;
  background: #2f70e6;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
/* Cor do texto por tema (14/07) — claro pede texto escuro, escuro pede texto claro. Mesmo
   padrão data-theme já usado no resto do arquivo (ver linha ~75). */
html[data-theme="light"] .meu-setor-select { color: #0f1c2e; }
html:not([data-theme="light"]) .meu-setor-select { color: #ffffff; }
.meu-setor-select:hover { background: #3b7bee; }
.meu-setor-select:focus { outline: 2px solid #8db3f7; outline-offset: 1px; }
.meu-setor-select option { background: #0f1c2e; color: #f3f7fc; }
.meu-setor-select-row::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid #ffffff;
  border-bottom: 1.6px solid #ffffff;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Estrela de favorito — só aparece em linhas-folha (ver makeDockPanelRow em dock-nav.js).
   Opacidade baixa por padrão pra não competir com o texto; acende (cor + fill) quando
   favoritada, sempre em amarelo-marca independente do tema. */
.dock-panel-fav {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--color-text-muted);
  opacity: .55;
  cursor: pointer;
}
.dock-panel-fav:hover { opacity: 1; background: var(--color-hover-strong); }
.dock-panel-fav.active { opacity: 1; color: var(--color-gold); }
.dock-panel-fav.active svg { fill: currentColor; }

/* Painel de busca/favoritos (aberto pelo logo ou Ctrl/Cmd+K) — mais largo que os
   painéis de submenu comuns, pra caber o breadcrumb dos resultados. */
.dock-panel-search { min-width: 300px; max-width: 340px; }
.dock-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: none;
  border-radius: var(--radius-sm);
  /* Mesmo fundo do painel (.dock-panel = rgba(7,18,30,.82)) — antes usava um overlay branco
     translúcido que destoava, parecendo uma caixa clara em cima do painel escuro. */
  background: rgba(7, 18, 30, .82);
}
.dock-search-icon { display: flex; flex-shrink: 0; opacity: .7; color: #f3f7fc; }
.dock-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: #f3f7fc;
}
.dock-search-input::placeholder { color: #9fb0c4; opacity: .85;background: #0f1c2e; }
.dock-search-results { max-height: 340px; overflow-y: auto; }
.dock-search-heading {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  padding: 4px 10px 6px;
}
.dock-search-kbd {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 1px 5px;
  opacity: .8;
}

/* Cabeçalho padrão de painel (título + subtítulo + voltar) — todo painel de submenu/busca
   agora abre com esse cabeçalho, ver makePanelHeader em dock-nav.js. */
.dock-panel { min-width: 240px; max-width: 280px; }
.dock-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px 10px;
}
.dock-panel-header-text { min-width: 0; }
.dock-panel-title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.dock-panel-subtitle { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }
.dock-panel-back {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.dock-panel-back:hover { background: var(--color-hover-strong); }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: 13px;
}
.btn:hover { background: var(--color-hover-strong); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text-muted); }
.btn-secondary:hover { background: var(--color-hover-strong); }
.btn-danger { background: var(--color-danger-bg); border-color: var(--color-danger-bg); color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-bg-strong); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px 8px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards / stat tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.stat-card .label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.stat-card .value { font-size: 26px; font-weight: 700; }
.stat-card.accent-danger .value { color: var(--color-danger); }
.stat-card.accent-success .value { color: var(--color-success); }

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.panel h2 { font-size: 15px; margin: 0 0 14px; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.bar-row .bar-label { width: 150px; flex-shrink: 0; color: var(--color-text-muted); }
.bar-track { flex: 1; background: var(--color-bg); border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--color-primary); }
.bar-row .bar-count { width: 36px; text-align: right; font-weight: 600; flex-shrink: 0; }

table.simple-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple-table th {
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}
table.simple-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); }
table.simple-table tr:last-child td { border-bottom: none; }
table.simple-table tr.clickable { cursor: pointer; }
table.simple-table tr.clickable:hover { background: var(--color-hover); }

.pill.neutral { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* ===== Tela de Tabela (Demandas) — 15/07 ===== */
.table-scroll { overflow-x: auto; }
.module-table th, .module-table td { white-space: nowrap; }
.module-table .col-check { width: 34px; text-align: center; }

.module-table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius);
}
.module-table-filters .field { display: flex; flex-direction: column; gap: 4px; }
.module-table-filters label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.module-table-filters input, .module-table-filters select {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--color-surface);
  color: var(--color-text);
}

.bulk-bar {
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
}
.bulk-bar-count { font-size: 13px; font-weight: 600; margin-right: 4px; }
.bulk-bar select {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--color-surface);
  color: var(--color-text);
}

select.dash-select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: 600;
}

/* ---------- Boards layout ---------- */
.boards-layout { display: flex; gap: 20px; align-items: flex-start; }
.boards-list {
  width: 210px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}
.boards-list .board-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 2px;
}
.boards-list .board-item:hover { background: var(--color-hover); }
.boards-list .board-item.active { background: var(--color-primary-bg); color: var(--color-primary-dark); font-weight: 600; }
.boards-list .board-item .count {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}
.boards-list .board-item.active .count { background: var(--color-surface); }

.board-main { flex: 1; min-width: 0; }
.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.board-header h2 { margin: 0; font-size: 17px; }
.board-types { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.badge-type { background: var(--color-bg); color: var(--color-text-muted); }

/* Colaboradores (24/08): grade simples de campo/valor usada na aba Pessoal/Profissional. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 20px; }
.detail-row label { display: block; font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.detail-row div { font-size: 14px; }

.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kanban-col {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 230px);
}
.kanban-col-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: 3px solid var(--col-color, var(--color-primary));
  border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-col-header .count { font-size: 11px; color: var(--color-text-muted); font-weight: 600; }
.kanban-col-body { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.kanban-col.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -2px; }

/* Kanban em swimlanes: uma linha por prioridade, mesmas colunas de status
   (ver public/js/modules/kanban-swimlanes.js). Filhos ficam todos no mesmo
   nível (sem wrapper por linha) e o grid-template-columns definido inline
   por render controla o número de colunas — o fluxo do grid já organiza tudo
   em linhas automaticamente. */
.kanban-swimlanes {
  display: grid;
  gap: 10px;
  width: 100%;
  /* Preenche toda a altura disponível da tela (mesmo cálculo de folga do
     .kanban-col de linha única) — as linhas de prioridade, definidas como
     1fr no grid-template-rows (ver kanban-swimlanes.js), dividem esse
     espaço em partes iguais entre si, vazias ou não. */
  height: calc(100dvh - 210px); /* mesma folga de topbar/dock usada em .kanban-col */
}
.swim-corner { position: sticky; top: 0; left: 0; z-index: 1; }
.swim-col-header {
  background: var(--color-bg-alt);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: 3px solid var(--col-color, var(--color-primary));
  position: sticky;
  top: 0;
}
.swim-col-header .count { font-size: 11px; color: var(--color-text-muted); font-weight: 600; }
.swim-row-label {
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 10px;
  border-left: 3px solid var(--prio-color, var(--color-primary));
  position: sticky;
  left: 0;
  background: var(--color-bg);
}
.swim-cell {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 6px 8px 4px;
  /* A linha (1fr no grid-template-rows) já divide a altura total disponível
     em partes iguais entre Alta/Média/Baixa — a célula preenche 100% dessa
     fatia, vazia ou não. min-height:0 é necessário pro grid não deixar a
     célula crescer além da fatia por causa do conteúdo (senão o overflow
     abaixo nunca entraria em ação); o excesso de atendimentos rola por
     dentro em vez de esticar a linha e desalinhar a grade. */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.swim-cell.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.swim-cell .card { margin-bottom: 8px; }
.swim-cell-locked { background: var(--color-bg); }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 11px 12px;
  margin-bottom: 8px;
  cursor: grab;
  border-left: 3px solid var(--card-color, var(--color-border));
}
.card:active { cursor: grabbing; }
.card.dragging { opacity: 0.4; }
.card .card-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; line-height: 1.3; }
.card .card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.card .card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); }
.card .deadline.overdue { color: var(--color-danger); font-weight: 700; }

.pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  color: #fff;
}

.empty-state {
  text-align: center;
  color: var(--text-faint);
  padding: 40px 10px;
  font-size: 13px;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 300;
  padding: 24px 24px 140px;
  overflow-y: auto;
}
.modal-overlay.hidden { display: none; }
/* #confirmModalOverlay is used to confirm destructive actions (ex.: excluir)
   triggered from INSIDE another already-open .modal-overlay (ex.: o modal de
   edição de registro) — precisa ficar por cima dele. Como os dois só têm a
   classe .modal-overlay (mesmo z-index: 300), o desempate cai pra ordem no
   DOM, e #moduleModalOverlay vem depois de #confirmModalOverlay no HTML —
   isso fazia o modal de edição capturar os cliques destinados ao botão
   "Confirmar", travando a exclusão de registros em qualquer módulo. */
#confirmModalOverlay { z-index: 350; }
/* Mesmo problema do #confirmModalOverlay acima: #avFotoModal abre a partir de dentro do
   #avConversaModal (clique numa miniatura de imagem da conversa do Fluctus), mas como os dois só
   têm a classe .modal-overlay (z-index: 300), o empate ia pra ordem no DOM — #avFotoModal vem
   ANTES de #avConversaModal no HTML, então a foto abria atrás do chat em vez de na frente. */
#avFotoModal { z-index: 350; }
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  margin: 24px 0;
  overflow: hidden;
}
.modal.modal-sm { max-width: 420px; }
.modal.modal-lg { max-width: 880px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--color-text-muted); padding: 2px 6px; }
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  z-index: 1;
}
.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: 6px;
  color: var(--color-text);
}
.form-row .hint { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.form-row textarea { resize: vertical; min-height: 80px; }
.form-row input[readonly] { background: var(--color-bg); color: var(--color-text-muted); }

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-group button {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}
.chip-group button.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.checkbox-group {
  display: grid;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--color-border);
}
.checkbox-group label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--color-surface);
}
.checkbox-group input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
}
.checkbox-title {
  font-weight: 600;
  font-size: 13px;
}
.checkbox-description {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.checklist-editor .checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.checklist-editor .checklist-row input[type="text"] { flex: 1; padding: 7px 10px; }
.checklist-editor .checklist-row button { background: none; border: none; color: var(--text-faint); font-size: 16px; padding: 2px 6px; }
.checklist-editor .checklist-row button:hover { color: var(--color-danger); }
.checklist-editor .add-item-btn {
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  width: 100%;
  padding: 7px;
  font-size: 12.5px;
  text-align: left;
}
.checklist-editor .add-item-btn:hover { background: var(--color-bg); }

.attachments-list { margin-bottom: 10px; }
.attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 12.5px;
}
.attachment-row .name { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-row .actions { display: flex; gap: 8px; flex-shrink: 0; }
.attachment-row .actions button { background: none; border: none; color: var(--text-faint); font-size: 13px; }
.attachment-row .actions button:hover { color: var(--color-danger); }
.file-input-label {
  display: inline-block;
  padding: 8px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12.5px;
}
.file-input-label:hover { background: var(--color-bg); }

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--color-text);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow-md);
  min-width: 220px;
}
.toast.error { background: var(--color-danger); }
.toast.success { background: var(--color-success); }

.settings-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.settings-tab {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.settings-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.inline-form { display: flex; gap: 8px; margin-bottom: 16px; }
.inline-form input { flex: 1; padding: 8px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

.checkbox-list { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px; }
.checkbox-list label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; }

.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }

/* ---------- Topbar: filtros/ações extra ---------- */
.topbar .toggle-group { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.topbar .toggle-group button {
  border: none;
  border-radius: 0;
  background: var(--color-surface);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
}
.topbar .toggle-group button:last-child { border-right: none; }
.topbar .toggle-group button.active { background: var(--color-primary); color: #fff; }

/* ---------- Solicitação: launcher central ---------- */
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.launcher-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.launcher-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.launcher-card .icon { font-size: 28px; margin-bottom: 10px; }
.launcher-card .title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.launcher-card .desc { font-size: 12.5px; color: var(--color-text-muted); }

/* ---------- Calendário ---------- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.calendar-grid .cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding-bottom: 4px;
}
.calendar-grid .cal-day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 92px;
  padding: 6px;
  font-size: 11px;
}
.calendar-grid .cal-day.empty { background: transparent; border-color: transparent; }
.calendar-grid .cal-day.today { border-color: var(--color-primary); border-width: 2px; }
.calendar-grid .cal-day .day-num { font-weight: 700; margin-bottom: 4px; color: var(--color-text-muted); }
.calendar-grid .cal-day .cal-event {
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  border-radius: 4px;
  padding: 2px 5px;
  margin-bottom: 3px;
  font-size: 10.5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-grid .cal-event:hover { filter: brightness(0.85); cursor: pointer; }
.calendar-grid .cal-event[style]:hover { filter: brightness(0.82); color: #fff; }
.calendar-grid .cal-event.overdue { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---------- Conferência (registros) ---------- */
.conf-item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 6px;
}

/* Lista de conferências: tabela em telas normais, cards em celular (ver
   .conf-mobile-cards no breakpoint de 600px abaixo e renderConferenciaList()
   em conferencia.js — os dois ficam sempre no DOM, o CSS só escolhe qual
   mostrar). */
.conf-mobile-cards { display: none; }
.conf-mobile-card { gap: 6px; }
.conf-mobile-card .audit-card-meta { justify-content: space-between; }
.conf-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  background: var(--text-faint);
}

.archived-row td { opacity: 0.62; }
.archived-tag {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 6px;
}

/* ---------- Fase 4: Visão Geral (hub multi-seção) ---------- */
.hub-section { margin-bottom: 30px; }
.hub-section:last-child { margin-bottom: 0; }
.hub-section-title {
  font-size: 16px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Fase 4: Início (dashboard pessoal) ---------- */
.inicio-welcome { margin-bottom: 20px; }
.inicio-welcome h2 { margin: 0 0 4px; font-size: 19px; }
.inicio-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.inicio-source-card .source-title { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.inicio-source-card .source-title .total-pill {
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- Fase 4: Permissões (Grupos) — árvore expansível (22/07) ---------- */
.screens-checklist {
  display: block;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}
.screens-checklist label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 12.5px; cursor: pointer; }
.pg-tree-row { padding: 6px 0; }
.pg-tree-standalone { border-bottom: 1px solid var(--color-border); }
.pg-tree-standalone:last-child { border-bottom: none; }
.pg-tree-group { border-bottom: 1px solid var(--color-border); }
.pg-tree-group:last-child { border-bottom: none; }
.pg-tree-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.pg-tree-arrow {
  background: none;
  border: none;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.pg-tree-group.expanded > .pg-tree-group-header > .pg-tree-arrow { transform: rotate(90deg); }
.pg-tree-group-name { font-weight: 700; font-size: 13px; }
.pg-tree-children {
  display: none;
  flex-direction: column;
  padding-left: 26px;
  border-left: 1px dashed var(--color-border);
  margin: 4px 0 6px 7px;
}
.pg-tree-group.expanded > .pg-tree-children { display: flex; }
.pg-tree-child { padding: 4px 0; }
.pg-tree-child label { font-size: 12px; }

/* ---------- Fase 4: LDAP / Setor (tela Usuários) ---------- */
.ldap-status-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.ldap-status-box .ldap-info { font-size: 12.5px; color: var(--color-text-muted); }
.ldap-status-box .ldap-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  margin-left: 8px;
}
.ldap-pill.on { background: var(--color-success); color: #fff; }
.ldap-pill.off { background: var(--text-faint); color: #fff; }

/* =====================================================================
   Módulo Auditoria
   ===================================================================== */

/* --- Grid de cards de relatórios --- */
.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 4px 0;
}
.audit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.audit-card-title { font-size: 14.5px; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.audit-card-meta { font-size: 12px; color: var(--color-text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.audit-card-footer { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.audit-status-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.audit-status-badge.rascunho { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.audit-status-badge.publicado { background: var(--color-primary-bg); color: var(--color-primary); }
.audit-status-badge.fechado { background: #2e2e2e; color: #fff; text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 3px 10px; }
.audit-setor-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--color-gold);
  color: #fff;
}
.audit-grid-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 48px 0;
}

/* --- Filtro por setor (tabs no topo da lista) --- */
.audit-sector-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.audit-sector-tab {
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.audit-sector-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.audit-sector-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* --- Detalhe do relatório --- */
.audit-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.audit-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 14px;
}
.audit-detail-back:hover { text-decoration: underline; }
.audit-detail-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  flex: 1;
  min-width: 200px;
  border: none;
  outline: none;
  background: transparent;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.audit-detail-title:focus { border-bottom-color: var(--color-primary); }
.audit-detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Checklist estruturado de auditoria --- */
.audit-checklist { margin-bottom: 20px; }
.audit-checklist h4 { margin: 0 0 8px; font-size: 13.5px; }
.audit-checklist-list { display: flex; flex-direction: column; }
.audit-checklist-text { border: none; border-bottom: 1px solid transparent; background: transparent; color: var(--color-text); padding: 2px 0; }
.audit-checklist-text:not(:disabled):hover, .audit-checklist-text:not(:disabled):focus { border-bottom-color: var(--color-border); outline: none; }
.audit-checklist-resposta { font-size: 12.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.audit-checklist-obs { border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 8px; background: var(--color-surface); color: var(--color-text); }

/* --- Seções do relatório --- */
.audit-sections { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* Gestão · resumo dos quadros agrupado por nível (14/07) — 3 grupos (Baixa/Média/Alta), cada
   quadro com uma tag de cor indicando o nível (ver NIVEL_BAR/NIVEL_BG em gestao.js). */
.gestao-board-group { margin-bottom: 22px; }
.gestao-board-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.gestao-board-group-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nivel-bar, var(--color-text-muted)); flex-shrink: 0; }
.gestao-nivel-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.gestao-nivel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nivel-bar, var(--color-text-muted)); flex-shrink: 0; }
.audit-card.gestao-card { border-left: 3px solid var(--nivel-bar, transparent); position: relative; }
.gestao-card-check { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; cursor: pointer; }

.gestao-section-responsible-row { padding: 6px 16px; border-top: 1px solid var(--color-border); }
.gestao-responsible-select {
  width: 100%;
  font-size: 12.5px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.gestao-responsible-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 13px;
}
.gestao-responsible-label { color: var(--color-text-muted); flex-shrink: 0; }
.gestao-responsible-box .gestao-responsible-select { width: auto; min-width: 220px; }
.gestao-nivel-select { width: auto; min-width: 140px; }
.audit-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.audit-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.audit-section-header:hover { background: var(--color-bg); }
.audit-section-chevron {
  font-size: 13px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.audit-section.expanded .audit-section-chevron { transform: rotate(90deg); }
.audit-section-title-input {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.audit-section-title-input:focus { cursor: text; }
.audit-section-actions { display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; }
.audit-section-header:hover .audit-section-actions { opacity: 1; }
.audit-section-body { display: none; padding: 0 16px 16px; }
.audit-section.expanded .audit-section-body { display: block; }
.audit-section-detalhar {
  font-size: 12px;
  color: var(--color-primary);
  margin-left: auto;
  font-weight: 500;
  flex-shrink: 0;
}

/* --- Rich-text editor --- */
.audit-rte-wrap { margin-top: 10px; }
.audit-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.rte-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.rte-btn:hover { background: var(--color-border); }
.rte-btn.active { background: var(--color-primary); color: #fff; }
.rte-sep { width: 1px; background: var(--color-border); margin: 4px 3px; align-self: stretch; }
.rte-color-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rte-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.15);
  display: inline-block;
}
.rte-color-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.audit-rte-editor {
  min-height: 180px;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  overflow-y: auto;
}
.audit-rte-editor h1 { font-size: 22px; font-weight: 800; margin: 8px 0; }
.audit-rte-editor h2 { font-size: 18px; font-weight: 700; margin: 7px 0; }
.audit-rte-editor h3 { font-size: 15px; font-weight: 600; margin: 6px 0; }
.audit-rte-editor ul, .audit-rte-editor ol { padding-left: 20px; }
.audit-rte-editor blockquote { border-left: 3px solid var(--color-border); margin: 6px 0; padding-left: 12px; color: var(--color-text-muted); }
/* view mode (non-editable): same styles, no border */
.audit-section-html-view {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text);
  padding: 4px 0;
}
.audit-section-html-view h1 { font-size: 22px; font-weight: 800; margin: 8px 0; }
.audit-section-html-view h2 { font-size: 18px; font-weight: 700; margin: 7px 0; }
.audit-section-html-view h3 { font-size: 15px; font-weight: 600; margin: 6px 0; }

/* --- Anexos --- */
.audit-attachments-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 16px;
}
.audit-attachments-panel h4 { font-size: 13px; font-weight: 700; margin: 0 0 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.audit-attach-list { display: flex; flex-direction: column; gap: 6px; }
.audit-attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.audit-attach-name { flex: 1; color: var(--color-primary); cursor: pointer; font-weight: 500; }
.audit-attach-name:hover { text-decoration: underline; }
.audit-attach-size { font-size: 11.5px; color: var(--color-text-muted); }

/* --- Ticket kanban de auditoria --- */
.audit-ticket-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .audit-ticket-kanban { grid-template-columns: repeat(2, 1fr); }
}
.audit-ticket-col {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
}
.audit-ticket-col-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.audit-ticket-col-header .count { background: var(--color-border); color: var(--color-text-muted); font-size: 11px; padding: 1px 7px; border-radius: 9px; }
.audit-ticket-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
  font-size: 13px;
}
.audit-ticket-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary); }
.audit-ticket-card-title { font-weight: 600; color: var(--color-text); margin-bottom: 5px; line-height: 1.3; }
.audit-ticket-card-meta { font-size: 11.5px; color: var(--color-text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.audit-priority-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.audit-priority-dot.alta { background: var(--color-danger); }
.audit-priority-dot.media { background: var(--color-gold); }
.audit-priority-dot.baixa { background: var(--color-success); }

/* =====================================================================
   Auditoria · Qualificação Operacional
   ===================================================================== */

.qualif-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1.5px solid var(--color-border);
  padding-bottom: 0;
}
.qualif-tab {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  margin-bottom: -1.5px;
  transition: color 0.15s, border-color 0.15s;
}
.qualif-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.qualif-tab:hover:not(.active) { color: var(--color-text); }

.qualif-panel { }
.qualif-panel.hidden { display: none; }

/* Upload card */
.qualif-upload-card {
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qualif-upload-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
.qualif-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px auto;
  gap: 10px;
  align-items: end;
}

/* Planilhas list */
.qualif-planilha-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qualif-planilha-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.qualif-planilha-icon { font-size: 22px; flex-shrink: 0; }
.qualif-planilha-info { flex: 1; }
.qualif-planilha-name { font-weight: 600; font-size: 13.5px; }
.qualif-planilha-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.qualif-planilha-badge {
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Gerador de relatório */
.qualif-gerar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 680px;
}
.qualif-gerar-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
}
.qualif-gerar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.qualif-gerar-grid .field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qualif-employee-select { width: 100%; }
.qualif-progress {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 14px;
}
.qualif-progress.success { border-color: var(--color-success); color: var(--color-success); }
.qualif-progress.error   { border-color: var(--color-danger);  color: var(--color-danger);  }

/* Report generation preview table */
.qualif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 10px;
}
.qualif-table th, .qualif-table td {
  border: 1px solid var(--color-border);
  padding: 5px 9px;
  text-align: left;
}
.qualif-table th { background: var(--color-bg); font-weight: 700; }
.qualif-table tr:nth-child(even) td { background: var(--color-surface); }

/* =====================================================================
   Gestão · Monitor — badge de setor nos cards e referências cruzadas
   ===================================================================== */

/* Demandas vinculadas a uma sessão (ver kanban-swimlanes... não, ver
   renderGestaoDemandLinks em gestao.js) — status ao vivo, lido da tabela do
   fluxo real do setor de destino. */
.gestao-section-demands { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 6px; }
.gestao-demand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.gestao-demand-setor { color: var(--color-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.gestao-demand-title { flex: 1; }
.gestao-demand-row .btn-sm { padding: 1px 7px; }

/* Controle de status/arquivamento do quadro (ver renderGestaoDetail em gestao.js) */
.gestao-status-box { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gestao-status-select { font-size: 12.5px; }

/* Badge de setor exibido nos cards do monitor (visível apenas para admin) */
.gestao-setor-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Título da seção de referências cruzadas */
.gestao-cross-refs-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--color-border);
}

/* Card de uma referência cruzada */
.gestao-cross-ref-block {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

/* Cabeçalho da referência: badge de setor + título do quadro + botão remover */
.gestao-cross-ref-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Badge colorido do setor de origem dentro do header da referência */
.gestao-cross-ref-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Nome do quadro de origem */
.gestao-cross-ref-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

/* Conteúdo da referência (sessões ou conteúdo único) */
.gestao-cross-ref-body {
  padding: 12px 16px;
}
/* Sessões dentro do body ficam levemente recuadas */
.gestao-cross-ref-body .audit-section {
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  margin-bottom: 6px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Filtro do Monitor ───────────────────────────────────────────────────── */
.gestao-filter-select {
  font-size: 13px;
  padding: 5px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.fluxo-responsible-filter {
  font-size: 13px;
  padding: 5px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

/* ── Cards mencionados (de outro setor) ──────────────────────────────────── */
.gestao-card-mentioned {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

/* Badge "📌 Setor X" em cards mencionados */
.gestao-badge-mentioned {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
}

/* Tag menor de detalhe do mencionado (Quadro completo / Sessão: X) */
.gestao-mentioned-tag {
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle, #f4f4f5);
  padding: 1px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Contador de compartilhamentos nos cards próprios */
.gestao-shared-tag {
  font-size: 11px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 1px 7px;
  border-radius: 20px;
  cursor: default;
  white-space: nowrap;
}

/* ── Modal dinâmico (injeção de HTML via openModal) ─────────────────────── */
.modal-inner {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
  max-height: 85vh;
  overflow: hidden;
}

/* REMOVIDO 27/08 — "overflow:hidden" em todo filho direto do modal fazia o navegador tratar
   min-width/min-height desses filhos como 0 (regra do spec de flex/grid pra itens com overflow
   != visible), então uma tabela/formulário largo era ESPREMIDO pra caber em vez de rolar —
   era essa a causa real do "campos bugados/cortando" reportado várias vezes, não o scroll
   aninhado (já corrigido antes) nem o backdrop-filter (também já corrigido antes). Quem
   realmente deve rolar é o .modal-inner (ver bloco "D. Modals", mais abaixo, overflow-y:auto). */

.modal-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.modal-close-btn:hover { background: var(--color-bg); color: var(--color-text); }

/* ── Botão secundário (btn.secondary) ───────────────────────────────────── */
.btn.secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn.secondary:hover { background: var(--color-border); }

/* ── Read-only fields (Hub de Acessos modal somente-leitura) ────────────── */
.ro-fields { display: flex; flex-direction: column; gap: 10px; }
.ro-field  { display: flex; flex-direction: column; gap: 2px; }
.ro-label  { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ro-value  { font-size: 13.5px; color: var(--color-text); }

/* ── Table simples (Histórico de Estoque) ───────────────────────────────── */
.table-simple { border-collapse: collapse; }
.table-simple th,
.table-simple td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 12.5px;
}
.table-simple thead th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  font-size: 11.5px;
}

/* ── Hub de Acessos — lista de atendimentos ─────────────────────────────── */
.hub-atend-list { display: flex; flex-direction: column; gap: 8px; }
.hub-atend-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.hub-atend-row:hover { border-color: var(--color-primary); box-shadow: var(--shadow); }
.hub-atend-info  { flex: 1; min-width: 0; }
.hub-atend-tipo  { font-size: 11px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.hub-atend-titulo { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-atend-proto  { font-size: 11.5px; color: var(--color-primary); font-family: monospace; white-space: nowrap; }
.hub-atend-meta   { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }

/* ── Estoque — banner de alerta ─────────────────────────────────────────── */
.estoque-alert-banner {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
  color: var(--color-warning);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* ── Estoque — grid de cards ────────────────────────────────────────────── */
.estoque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.estoque-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.estoque-card-alerta { border-color: var(--color-warning); }
.estoque-card-cat    { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.estoque-card-nome   { font-size: 14px; font-weight: 700; color: var(--color-text); }
.estoque-card-qtd    { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.estoque-qtd-disp    { font-size: 28px; font-weight: 700; color: var(--color-primary); line-height: 1; }
.estoque-qtd-label   { font-size: 12px; color: var(--color-text-muted); }
.estoque-qtd-res     { font-size: 11.5px; color: var(--color-text-muted); }
.estoque-alerta-tag  { font-size: 11px; color: var(--color-warning); font-weight: 600; }
.estoque-card-unit   { font-size: 11px; color: var(--color-text-muted); text-transform: capitalize; }
.estoque-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.estoque-card-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 4px;
  background: var(--color-bg);
}
.estoque-card-img-placeholder {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--color-bg);
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 4px;
  color: var(--color-text-muted);
}
.estoque-img-preview {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: block;
}

/* ── Eventos — card ─────────────────────────────────────────────────────── */
.evento-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: var(--shadow);
}
.evento-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.evento-card-left  { flex: 1; min-width: 0; }
.evento-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.evento-card-titulo { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 3px; }
.evento-proto  { font-size: 11.5px; color: var(--color-primary); font-family: monospace; }
.evento-meta   { font-size: 12px; color: var(--color-text-muted); }
.evento-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--color-text-muted);
}
.evento-mat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border);
}

/* ── Rastro de usuário (Criado por / Editado por) ──────────────────────── */
.user-trail {
  margin-top: 14px;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ─── Color picker para eventos de calendário ─────────────────────── */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}
.color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  outline: none;
  padding: 0;
}
.color-swatch:hover { transform: scale(1.18); }
.color-swatch.selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text);
  transform: scale(1.1);
}

/* cal-events with custom color: ensure text readable */
.calendar-grid .cal-event[style] {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ── SLA Timer badge ─────────────────────────────────────────────────────── */
.sla-timer-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  font-size: 13px;
}
.sla-timer-label { color: var(--color-text-muted); font-size: 12px; }
.sla-timer-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.sla-green  { background: #d1fae5; color: #065f46; }
.sla-yellow { background: #fef3c7; color: #92400e; }
.sla-red    { background: #fee2e2; color: #991b1b; }

/* ── Mensagens inline no modal ───────────────────────────────────────────── */
.messages-thread {
  border-top: 1px solid var(--color-border);
  margin-top: 18px;
  padding-top: 14px;
}
.messages-thread-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.messages-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding-right: 2px;
}
.msg-bubble {
  background: var(--color-surface-alt);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
}
.msg-meta { font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.msg-content { white-space: pre-wrap; word-break: break-word; }
.msg-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.msg-bubble:hover .msg-actions { opacity: 1; }
.msg-actions button {
  border: none; background: transparent; color: var(--color-text-muted); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 4px;
}
.msg-actions button:hover { background: var(--color-surface); color: var(--color-text); }
.msg-edit-textarea {
  width: 100%; min-height: 44px; resize: vertical; padding: 6px 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: 13px; font-family: inherit; background: var(--color-surface);
  color: var(--color-text);
}
.msg-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
.message-composer { display: flex; gap: 8px; align-items: flex-end; }
.message-composer textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Hub elapsed time ────────────────────────────────────────────────────── */
.hub-atend-elapsed {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Tipo chips (Configurações > Tipos Chamados) ────────────────────────── */
.tipo-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tipo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: 20px; padding: 4px 10px; font-size: 13px;
}
.tipo-chip-del {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 15px; padding: 0 2px; line-height: 1;
}
.tipo-chip-del:hover { color: var(--color-danger, #e74c3c); }
.tipo-add-btn {
  background: none; border: 1px dashed var(--color-border);
  border-radius: 20px; padding: 4px 12px; font-size: 13px;
  cursor: pointer; color: var(--color-text-muted);
}
.tipo-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* =====================================================================
   === RESPONSIVE LAYOUT (v32) ===
   Fixes:
   - Dock always fully visible (no cut-off)
   - Content area fills and scrolls independently
   - No horizontal scrollbar on the main page
   - Kanban boards scroll only horizontally within their container
   - Tables, modals, cards adapt to viewport width
   - Works on 1280×768, 1920×1080, 2560×1440+
   ===================================================================== */

/* ── A. Root: prevent body-level scroll — only .content scrolls ─────────── */

html, body {
  height: 100%;
  /* No overflow here — we control it per element below */
}

/* Main SPA body (index.html has no .login-page class on body) — páginas standalone fora do
   app shell (login.html, denuncia.html, processo-seletivo-portal.html, updates.html,
   acesso.html) ficam de fora de propósito: elas não têm um .content interno que role sozinho,
   então "só .content rola" travaria a página inteira (bug real achado em denuncia.html: "não
   consigo rolar a tela de denúncia" — a página tinha mais conteúdo que a viewport e
   overflow:hidden no body impedia o scroll normal). portal-page (processo-seletivo-portal.html)
   e updates-page (updates.html) tiveram o mesmo bug, só que ficaram de fora dessa exceção na
   hora de serem criadas — acesso-page (01/09) já nasce na lista, de propósito. */
body:not(.login-page):not(.denuncia-page):not(.portal-page):not(.updates-page):not(.acesso-page) {
  overflow: hidden;
}

/* App shell: fixed to exact viewport height with dvh fallback */
.app-shell {
  min-height: unset;          /* override the existing min-height: 100vh */
  height: 100vh;              /* fallback */
  height: 100dvh;             /* dvh = dynamic viewport height (accounts for mobile browser chrome) */
  overflow: hidden;
}

/* .main is a flex column — must not overflow */
.main {
  overflow: hidden;
}

/* Content: only this scrolls — critical for dock to never be pushed off-screen */
.content {
  flex: 1 1 0;
  min-height: 0;              /* critical: allows flex child to shrink below its natural size */
  overflow-y: auto;
  overflow-x: hidden;         /* no horizontal scrollbar on the page itself */
}

/* ── B. Kanban: horizontal scroll ONLY within the board, never on main page ─ */

/* Board layout: board-main must contain its own overflow */
.board-main {
  min-width: 0;
  overflow: hidden;
}

.kanban {
  display: flex;
  flex-direction: row;
  gap: 14px;
  overflow-x: auto;           /* horizontal scroll here only */
  overflow-y: hidden;
  min-height: 0;
  padding-bottom: 12px;
}

/* Kanban columns: fixed width, never shrink, cap height with viewport-relative value */
.kanban-col {
  flex: 0 0 250px;
  min-width: 220px;
  max-width: 300px;
  max-height: calc(100dvh - 210px); /* dynamic: adjust for topbar + dock clearance */
}

/* ── C. Tables: horizontal scroll in a container, not the whole page ────── */

/* Wrap tables injected by JS in a scroll container */
.table-wrap,
.module-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.simple-table {
  min-width: 560px;            /* force horizontal scroll before squishing */
}

table.simple-table th,
table.simple-table td {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .table-simple (nome invertido — usado por colaboradores/cargosConfig/pesquisas/estoque)
   ganha o mesmo tratamento de .simple-table acima: sem isso essas tabelas mais novas só
   espremiam as colunas em tela estreita, sem forma de rolar (achado do usuário: "nos
   usuários não consigo rolar para a lateral" — mesma causa-raiz nessas 4 telas). */
table.table-simple {
  min-width: 560px;
}

table.table-simple th,
table.table-simple td {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── D. Modals: always within viewport ──────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  /* flex-start (27/08): um modal mais alto que a tela junto com align-items:center empurra o
     topo do conteúdo pra fora da área visível — melhor ancorar no topo. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  /* SEM overflow/scroll aqui (27/08, era "overflow-y: auto") — rolar a TELA INTEIRA ao mesmo
     tempo que .modal-inner rola por dentro criava scroll aninhado (2 camadas rolando juntas),
     o que quebrava visualmente os campos durante o scroll (texto fantasma/duplicado, achado
     real reportado pelo usuário). Só .modal-inner deve rolar — o overlay fica parado, encostado
     no topo, e o conteúdo que exceder max-height rola por dentro da caixa do modal mesmo.
     -webkit-overflow-scrolling removido junto (só fazia sentido com scroll aqui). */
  overflow: hidden;
  z-index: 300;
}

.modal {
  width: min(640px, 95vw);   /* never wider than 95% of viewport */
  max-height: 90vh;          /* already set, but reinforce */
  max-height: 90dvh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.modal.modal-sm {
  width: min(420px, 95vw);
}

/* modal-inner (dynamic modals): ensure max height */
.modal-inner {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  /* overflow-y:auto (27/08, era "hidden") — um formulário mais alto que 88vh simplesmente
     cortava o resto do conteúdo (sem rolagem nenhuma), em vez de rolar. Achado real: modal de
     Empresa cortando campos depois que ganhou as seções de Convenia/TiqueTaque; mesmo problema
     valeria pra qualquer modal comprido (Colaborador, etc.). */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 88vh;
  max-height: 88dvh;
}

/* ── E. Dock: raised z-index, scrolls internally if taller than viewport ── */

.dock {
  z-index: 100;
}

/* Flyout panels: must not extend below viewport */
.dock-panel {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── F. Boards layout: stack on narrow screens ──────────────────────────── */

@media (max-width: 960px) {
  .boards-layout {
    flex-direction: column;
    gap: 12px;
  }
  .boards-list {
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
  }
}

/* ── G. Cards and grids: responsive wrap ────────────────────────────────── */

.stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.launcher-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.inicio-source-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.estoque-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.audit-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ── H. Audit ticket kanban: also allow horizontal scroll ───────────────── */

#auditTicketKanban {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.audit-ticket-kanban {
  min-width: 720px;          /* 4 cols × ~180px; triggers scroll below that */
}

/* ── I. Text overflow in list/card items ────────────────────────────────── */

.hub-atend-titulo,
.card .card-title,
.evento-card-titulo,
.audit-card-title,
.estoque-card-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flex parents need min-width: 0 so children can actually shrink */
.hub-atend-info,
.evento-card-left {
  min-width: 0;
}

/* ── J. Calendar: don't squish columns on small screens ─────────────────── */

#calendarGrid,
#genericCalendarGrid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.calendar-grid {
  min-width: 560px;          /* 7 cols won't shrink below ~80px each */
}

/* ── K. Topbar actions: wrap on narrow screens ──────────────────────────── */

.topbar {
  flex-wrap: wrap;
  gap: 10px;
}

.topbar .actions {
  flex-wrap: wrap;
}

/* ── L. Form grid: stack on small modals ────────────────────────────────── */

@media (max-width: 600px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
  .qualif-upload-row {
    grid-template-columns: 1fr 1fr;
  }
  .conf-item-grid {
    grid-template-columns: 1fr;
  }
  /* Almoxarifado > Conferência: cards em vez de tabela (ver renderConferenciaList
     em conferencia.js) — tabela de 5 colunas não cabe numa tela de celular. */
  .conf-table-view { display: none; }
  .conf-mobile-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── M. Media queries: 1280px and narrower ──────────────────────────────── */

@media (max-width: 1280px) {
  .kanban-col {
    flex: 0 0 230px;
    min-width: 200px;
  }
  .modal        { width: min(600px, 98vw); }
  .modal.modal-sm { width: min(400px, 98vw); }
  .content { padding-left: 116px; padding-right: 20px; }
}

@media (max-width: 900px) {
  .kanban-col {
    flex: 0 0 200px;
    min-width: 180px;
  }
  /* Tela estreita: volta a ser só-ícone (sem o label embaixo), rail mais fino — sobra mais
     espaço de conteúdo; content reserva o equivalente (rail + gap). */
  .content {
    padding: 16px 14px 16px 78px;
  }
  .dock {
    width: 52px;
    left: 12px;
  }
  .dock-btn, .dock-logout-btn {
    min-height: 44px;
    padding: 8px 4px;
  }
  .dock-btn .dock-label, .dock-logout-btn .dock-label {
    display: none;
  }
  .audit-ticket-kanban {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── N. Zaki iframe fullscreen: ensure it fills remaining space ─────────── */

/* (zaki-fullscreen overrides already use !important — just reinforce height chain) */
#view-zakiChat.active {
  height: 100%;
}

/* ── O. Scrollbar styling: thin scrollbars everywhere for polish ─────────── */

.content,
.kanban,
.kanban-col-body,
.swim-cell,
.modal-body,
.dock,
.dock-panel,
.messages-list {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.content::-webkit-scrollbar,
.kanban::-webkit-scrollbar,
.kanban-col-body::-webkit-scrollbar,
.swim-cell::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dock::-webkit-scrollbar,
.dock-panel::-webkit-scrollbar,
.messages-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.content::-webkit-scrollbar-thumb,
.kanban::-webkit-scrollbar-thumb,
.kanban-col-body::-webkit-scrollbar-thumb,
.swim-cell::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.dock::-webkit-scrollbar-thumb,
.dock-panel::-webkit-scrollbar-thumb,
.messages-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* .dock especificamente: a barra é um rail estreito de 84px — mesmo scrollbar fino de 6px
   dos outros painéis ainda comia espaço horizontal perceptível aqui. Reduzido pra 4px só
   pra esse elemento, e o thumb fica transparente até o hover pra não ficar uma listra visível
   o tempo todo quando o rail nem está sendo rolado. */
.dock::-webkit-scrollbar { width: 4px; }
.dock::-webkit-scrollbar-thumb { background: transparent; }
.dock:hover::-webkit-scrollbar-thumb { background: var(--color-border); }

/* Alertas TI (v33) */
.alerta-row td { vertical-align: top; padding: 10px 8px; }
.alerta-row:hover { background: var(--color-bg); }
.btn-success { background: #22c55e !important; color: #fff !important; border-color: #22c55e !important; }

/* ======================================================================
   Viki Liquid Glass — identidade visual 2026
   O background é propositalmente comprimido e suavizado pelas camadas
   abaixo; o conteúdo continua opaco o bastante para leitura prolongada.
   ====================================================================== */
:root {
  --glass-page-overlay: rgba(244, 248, 255, .86);
  --glass-surface: rgba(255, 255, 255, .75);
  --glass-surface-strong: rgba(255, 255, 255, .83);
  --glass-surface-soft: rgba(248, 251, 255, .70);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-shadow: 0 18px 44px rgba(15, 35, 75, .12), inset 0 1px 0 rgba(255,255,255,.82);
  --glass-blur: blur(24px) saturate(118%);
  --color-primary: #2563d9;
  --color-primary-dark: #1648a8;
  --color-primary-bg: rgba(45, 106, 226, .13);
  --color-bg: rgba(239, 245, 253, .78);
  --color-surface: var(--glass-surface);
  --color-border: rgba(47, 82, 133, .16);
  --shadow: 0 8px 24px rgba(15, 35, 75, .09);
  --shadow-md: var(--glass-shadow);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --glass-page-overlay: rgba(2, 13, 29, .78);
    --glass-surface: rgba(6, 29, 55, .78);
    --glass-surface-strong: rgba(5, 24, 45, .85);
    --glass-surface-soft: rgba(8, 38, 70, .74);
    --glass-border: rgba(107, 176, 255, .24);
    --glass-shadow: 0 18px 52px rgba(0, 7, 20, .42), inset 0 1px 0 rgba(140, 197, 255, .13);
    --glass-blur: blur(24px) saturate(118%);
    --color-bg: rgba(3, 17, 34, .76);
    --color-surface: var(--glass-surface);
    --color-bg-alt: rgba(7, 28, 50, .76);
    --color-border: rgba(100, 164, 235, .22);
    --color-text: #f3f7fc;
    --color-text-muted: #aab9cb;
    --text-faint: #7f91a7;
    --color-primary: #4d8df5;
    --color-primary-dark: #82b1ff;
    --color-primary-bg: rgba(70, 133, 239, .22);
    --shadow: 0 8px 24px rgba(0, 7, 20, .32);
    --shadow-md: var(--glass-shadow);
  }
}
html[data-theme="dark"] {
  --glass-page-overlay: rgba(2, 13, 29, .78);
  --glass-surface: rgba(6, 29, 55, .78);
  --glass-surface-strong: rgba(5, 24, 45, .85);
  --glass-surface-soft: rgba(8, 38, 70, .74);
  --glass-border: rgba(107, 176, 255, .24);
  --glass-shadow: 0 18px 52px rgba(0, 7, 20, .42), inset 0 1px 0 rgba(140, 197, 255, .13);
  --glass-blur: blur(24px) saturate(118%);
  --color-bg: rgba(3, 17, 34, .76);
  --color-surface: var(--glass-surface);
  --color-bg-alt: rgba(7, 28, 50, .76);
  --color-border: rgba(100, 164, 235, .22);
  --color-text: #f3f7fc;
  --color-text-muted: #aab9cb;
  --text-faint: #7f91a7;
  --color-primary: #4d8df5;
  --color-primary-dark: #82b1ff;
  --color-primary-bg: rgba(70, 133, 239, .22);
  --shadow: 0 8px 24px rgba(0, 7, 20, .32);
  --shadow-md: var(--glass-shadow);
}

html { min-height: 100%; background: #071a31; }
body {
  min-height: 100%;
  background: #071a31;
  position: relative;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: -36px;
  z-index: -2;
  background: url("../img/viki-ambient-bg.jpg") center / cover no-repeat;
  /* Só o suficiente pra perceber o amarelo/azul da marca sem dar pra distinguir a forma
     da imagem — prioriza opacidade das superfícies acima (--glass-*) pra legibilidade,
     não blur/saturação forte aqui, que deixa "leitoso" e pesa mais no rendering. */
  filter: blur(24px) saturate(.58) brightness(.68);
  transform: scale(1.06);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--glass-page-overlay);
  pointer-events: none;
}

.app-shell, .main {
  position: relative;
  z-index: 0;
  background: transparent;
}
.topbar {
  margin: 16px 18px 0 18px;
  padding: 13px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.content { padding-top: 20px; }

/* Sombra de texto bem discreta em títulos — só o suficiente pra separar o texto do
   fundo translúcido/ambiente atrás dele, sem virar um efeito visível por si só. */
.topbar h1, .board-header h2 { text-shadow: 0 1px 2px rgba(15, 35, 75, .10); }
html[data-theme="dark"] .topbar h1, html[data-theme="dark"] .board-header h2 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .topbar h1,
  html:not([data-theme="light"]) .board-header h2 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  }
}

.dock {
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass-surface-strong) 90%, #1557ad 10%), var(--glass-surface-strong));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(255,199,44,.05);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.dock-btn { transition: background .18s ease, color .18s ease, transform .18s ease; }
.dock-btn:hover { background: var(--color-primary-bg); transform: translateX(2px); }
.dock-btn.active {
  background: linear-gradient(135deg, #2f70e6, #4f8df1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 7px 18px rgba(34, 100, 218, .22);
}
/* Painéis contextuais (flyouts de submenu/busca) ficam sempre escuros, mesmo no tema
   claro — diferente da doca principal, que continua acompanhando o tema (ver .dock acima).
   Redefine os tokens neutros só dentro do escopo de .dock-panel: qualquer var(--color-*)
   usada pelos filhos (.dock-panel-row, .dock-search-*, .dock-panel-fav etc.) resolve pro
   valor escuro fixo abaixo, sem precisar duplicar cor em cada seletor filho. */
.dock-panel {
  min-width: 230px;
  --color-text: #f3f7fc;
  --color-text-muted: #9fb0c4;
  --color-border: rgba(255, 255, 255, .14);
  --color-bg: rgba(255, 255, 255, .07);
  --color-primary-bg: rgba(93, 156, 255, .24);
  --color-hover-strong: rgba(255, 255, 255, .10);
  background: rgba(7, 18, 30, .82);
  border-color: var(--color-border);
  box-shadow: 0 18px 44px rgba(0, 7, 20, .42), inset 0 1px 0 rgba(140, 197, 255, .10);
  backdrop-filter: blur(28px) saturate(115%);
  -webkit-backdrop-filter: blur(28px) saturate(115%);
}
.dock-panel-row { transition: background .15s ease, transform .15s ease; }
.dock-panel-row:not(.dock-panel-row-muted):hover { transform: translateX(2px); }

.panel, .stat-card, .boards-list, .kanban-col, .card, .launcher-card,
.hub-atend-row, .calendar-grid, .audit-card, .modal, .modal-inner, .viki-panel {
  background: var(--glass-surface);
  border-color: var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
}
.panel, .stat-card, .boards-list, .kanban-col { border-width: 1px; border-style: solid; }
.kanban-col { background: var(--glass-surface-soft); }
.card { background: var(--glass-surface-strong); }

input, select, textarea, .dash-select {
  background: var(--glass-surface-strong) !important;
  color: var(--color-text);
  border-color: var(--color-border) !important;
  /* SEM backdrop-filter aqui (27/08, era "blur(12px)") — o modal em volta (.modal-inner) JÁ
     tem o próprio blur; um campo de formulário com blur PRÓPRIO, dentro de um modal que rola
     por dentro, empilha dois efeitos de desfoque um em cima do outro sobre conteúdo em
     movimento — isso é o que causava o texto "fantasma"/cortado reportado pelo usuário
     durante o scroll (blur aninhado sobre área rolável é um bug conhecido de renderização).
     --glass-surface-strong já é ~83-85% opaco (ver definição da variável), então o campo
     continua com a aparência "vidro" sem precisar do backdrop-filter próprio. */
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.btn {
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.password-warning-banner {
  left: auto;
  right: 28px;
  top: 27px;
  width: auto;
  max-width: min(560px, calc(100vw - 300px));
  border: 1px solid rgba(239,106,106,.32);
  border-radius: 12px;
  background: rgba(72, 24, 31, .86);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
body:has(.password-warning-banner:not(.hidden)) .app-shell { padding-top: 0; }

.login-page { background: transparent; }
.login-card {
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px) saturate(115%);
  -webkit-backdrop-filter: blur(28px) saturate(115%);
}

@media (max-width: 900px) {
  .topbar { margin-left: 78px; margin-right: 12px; }
  .password-warning-banner { right: 12px; top: 12px; max-width: calc(100vw - 24px); }
  /* Em telas largas o banner cabe à direita da doca/topbar (reserva 300px, ver regra
     acima) sem sobrepor nada. Aqui ele quase sempre é largo o bastante pra cobrir a tela
     inteira — empurra o topbar pra baixo dele em vez de deixar o título escondido atrás.
     A doca não precisa do mesmo tratamento: é centralizada verticalmente e bem mais curta
     agora (pílula, não mais um rail quase full-height), então dificilmente chega perto do
     banner no topo. */
  body:has(.password-warning-banner:not(.hidden)) .topbar { margin-top: 64px; }
}

/* ===== Meu Dia (mesmo formato visual do mockup ponto-meu-dia.html) ===== */
.meudia-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.meudia-side { display: flex; flex-direction: column; gap: 14px; }
.meudia-side-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 16px;
}
.meudia-side-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.meudia-today-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.meudia-today-stat { flex: 1; text-align: center; }
.meudia-today-stat .n { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; line-height: 1; }
.meudia-today-stat .l { font-size: 10.5px; color: var(--color-text-muted); margin-top: 4px; }
.meudia-stackbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--color-bg); }
.meudia-stackbar span { height: 100%; }
.meudia-bar-row { margin-bottom: 12px; }
.meudia-bar-row:last-child { margin-bottom: 0; }
.meudia-bar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 5px; }
.meudia-bar-top .l { color: var(--color-text-muted); }
.meudia-bar-top .v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meudia-bar-track { height: 7px; border-radius: 4px; background: var(--color-bg); overflow: hidden; }
.meudia-bar-fill { height: 100%; border-radius: 4px; }
.meudia-month-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.meudia-month-stat { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 6px; text-align: center; }
.meudia-month-stat .n { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; line-height: 1; }
.meudia-month-stat .l { font-size: 9.5px; color: var(--color-text-muted); margin-top: 4px; }
.meudia-side-note { font-size: 11px; color: var(--text-faint); margin-top: 10px; line-height: 1.4; }
.meudia-goal-row { margin-top: 12px; }
.meudia-goal-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); margin-bottom: 5px; }
.meudia-donut-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 14px; }
.meudia-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.meudia-donut-center .n { font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 800; line-height: 1; }
.meudia-donut-center .l { font-size: 9.5px; color: var(--color-text-muted); margin-top: 2px; }
.meudia-legend { display: flex; flex-direction: column; gap: 7px; }
.meudia-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.meudia-legend-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.meudia-legend-row .lbl { color: var(--color-text-muted); }
.meudia-legend-row .num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 1180px) {
  .meudia-layout { grid-template-columns: 1fr 1fr; }
  #meuDiaSidePanel { grid-column: 1; grid-row: 1; }
  #meuDiaSidePanelB { grid-column: 2; grid-row: 1; }
  .meudia-main { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 700px) {
  .meudia-layout { grid-template-columns: 1fr; }
  #meuDiaSidePanel, #meuDiaSidePanelB, .meudia-main { grid-column: auto; grid-row: auto; }
  .meudia-side { flex-direction: row; flex-wrap: wrap; }
  .meudia-side-card { flex: 1 1 220px; }
}

.meudia-daynav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.meudia-daynav-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.meudia-daynav-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.meudia-daynav-btn:disabled { opacity: .35; cursor: default; border-color: var(--color-border); color: var(--color-text-muted); }
.meudia-readonly-note {
  background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 14px;
}

.meudia-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; flex-wrap: wrap; }
.meudia-tabs button {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 10px 4px; margin: 0 18px 0 0; margin-bottom: -1px;
  font-size: 13px; font-weight: 700; color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.meudia-tabs button:hover { color: var(--color-text); }
.meudia-tabs button.selected { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.meudia-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.meudia-toolbar > .meudia-spacer { flex: 1; }
.meudia-new-row { display: none; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.meudia-new-row.show { display: flex; }
.meudia-new-row input[type="text"] {
  flex: 1; min-width: 200px; padding: 9px 11px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
}
.meudia-new-row select {
  padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.meudia-list { display: flex; flex-direction: column; gap: 8px; }
.meudia-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); transition: border-color .12s;
}
.meudia-row:hover { border-color: var(--color-primary); }
.meudia-row.is-resolvido { opacity: .6; }
.meudia-row.is-readonly { cursor: default; }
.meudia-row.is-readonly:hover { border-color: var(--color-border); }
.meudia-source-tag {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.meudia-source-tag svg { width: 15px; height: 15px; }
.meudia-row-main { flex: 1; min-width: 0; }
.meudia-row-title-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.meudia-row-title { font-weight: 700; font-size: 13.5px; }
.meudia-row-title.strike { text-decoration: line-through; color: var(--color-text-muted); }
.meudia-item-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; color: var(--text-faint); flex-shrink: 0; }
.meudia-row-ref { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }
.meudia-row-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.meudia-row-prazo { font-size: 10.5px; color: var(--color-text-muted); }
.meudia-row-prazo.overdue { color: var(--color-danger); font-weight: 700; }
.meudia-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.meudia-drag-handle { cursor: grab; color: var(--color-text-muted); flex-shrink: 0; display: flex; align-items: center; }
.meudia-row.dragging-row { opacity: .4; }
.meudia-row.drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg) inset; }
.meudia-status-select {
  appearance: none; -webkit-appearance: none; border: none; border-radius: 99px; color: #fff;
  padding: 6px 24px 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
  background-repeat: no-repeat; background-position: right 8px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
}
.meudia-section-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); margin: 18px 0 8px;
}
.meudia-section-title:first-child { margin-top: 0; }
.meudia-comment { background: var(--color-bg); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; }
.meudia-comment .who { font-weight: 700; font-size: 11.5px; }
.meudia-comment .when { font-size: 10.5px; color: var(--text-faint); margin-left: 6px; }
.meudia-comment .txt { font-size: 12.5px; margin-top: 3px; }
.meudia-comment-row { display: flex; gap: 8px; margin-top: 8px; }
.meudia-comment-row input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.meudia-attach {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--color-bg); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12px; margin-bottom: 6px;
}
.meudia-detail-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* ===== Central de notificações (sino) ===== */
.notif-bell-wrap { position: relative; }
.notif-bell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--color-border); border-radius: 50%;
  background: var(--color-bg); color: var(--color-text);
  font-size: 16px; cursor: pointer;
}
.notif-bell:hover { border-color: var(--color-primary); }
#favStarBtn.hidden { display: none; }
#favStarBtn.active { color: #f5a623; border-color: #f5a623; }
.notif-bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--color-danger, #c0392b); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
.notif-bell-badge.hidden { display: none; }
.notif-bell-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-md);
  /* 260 (27/08, achado real: "quando clica no sininho, a notificação está ficando por
     trás") — 200 empatava com .toast-container (mesmo z-index, mesma seção do arquivo),
     e dependendo da ordem de pintura o toast (ou outro elemento nessa faixa) vencia o
     desempate. Sobe pra uma faixa isolada, só abaixo dos modais (300+). */
  z-index: 260;
}
.notif-bell-panel.hidden { display: none; }
.notif-bell-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--color-border);
  font-size: 13px; font-weight: 700; position: sticky; top: 0; background: var(--color-surface);
}
.notif-bell-panel-list { display: flex; flex-direction: column; }
.notif-bell-item {
  padding: 10px 12px; border-bottom: 1px solid var(--color-border);
  cursor: pointer; font-size: 12.5px;
}
.notif-bell-item:hover { background: var(--color-bg); }
.notif-bell-item.unread { background: var(--color-primary-bg); }
.notif-bell-item-title { font-weight: 700; margin-bottom: 2px; }
.notif-bell-item-body { color: var(--color-text-muted); }
.notif-bell-item-time { color: var(--color-text-muted); font-size: 11px; margin-top: 4px; }
.notif-bell-empty { padding: 24px 12px; text-align: center; color: var(--color-text-muted); font-size: 12.5px; }

/* ===== Ponto ===== */
.ponto-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 99px;
  padding: 6px 12px 6px 10px;
}
.ponto-badge .ponto-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); animation: ponto-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.ponto-badge.paused .ponto-dot { background: var(--color-text-muted); animation: none; }
@keyframes ponto-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ponto-badge .ponto-dot { animation: none; } }
.ponto-time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 800; line-height: 1.2; }
.ponto-lbl { font-size: 10px; color: var(--color-text-muted); }

.ponto-gate-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ponto-gate-overlay.hidden { display: none; }
.ponto-gate-card {
  width: min(380px, 100%); background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 32px 28px; text-align: center;
}
.ponto-gate-avatar {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; background: var(--color-primary);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; font-weight: 800;
}
.ponto-gate-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.ponto-gate-card .sub { margin: 0 0 20px; font-size: 12.5px; color: var(--color-text-muted); }
.ponto-gate-clock { font-variant-numeric: tabular-nums; font-size: 38px; font-weight: 800; letter-spacing: .02em; margin: 6px 0 2px; }
.ponto-gate-date { font-size: 12px; color: var(--color-text-muted); text-transform: capitalize; margin-bottom: 22px; }
.ponto-gate-card .btn-primary { width: 100%; padding: 13px; font-size: 14px; }
.ponto-gate-card .hint { margin-top: 14px; font-size: 11px; color: var(--text-faint); }

.ponto-summary-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ponto-summary-overlay.hidden { display: none; }
.ponto-summary-card {
  width: min(400px, 100%); background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 26px 24px; text-align: center;
}
.ponto-summary-card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.ponto-summary-card .sub { margin: 0 0 18px; font-size: 12px; color: var(--color-text-muted); }
.ponto-summary-time { font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800; margin-bottom: 4px; }
.ponto-summary-time-lbl { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 20px; }
.ponto-summary-grid { display: flex; gap: 8px; margin-bottom: 22px; }
.ponto-summary-stat { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 8px; }
.ponto-summary-stat .n { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; }
.ponto-summary-stat .l { font-size: 10.5px; color: var(--color-text-muted); margin-top: 2px; }
.ponto-summary-origem { font-size: 11.5px; color: var(--color-text-muted); margin: -12px 0 18px; text-align: center; }
.ponto-summary-card .btn-primary { width: 100%; padding: 12px; }

/* ===== Equipe ===== */
.equipe-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.equipe-toolbar select {
  padding: 8px 30px 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.equipe-search {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 7px 10px; background: var(--color-bg); min-width: 200px;
}
.equipe-search svg { color: var(--text-faint); flex-shrink: 0; }
.equipe-search input { border: none; background: transparent; outline: none; color: var(--color-text); font-size: 13px; width: 100%; }
.equipe-search input::placeholder { color: var(--text-faint); }
@media (max-width: 560px) { .equipe-search { margin-left: 0; width: 100%; } }
.equipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.equipe-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.equipe-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.equipe-card-top { display: flex; align-items: center; gap: 10px; }
.equipe-avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.equipe-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.equipe-card-name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.equipe-card-role { font-size: 11.5px; color: var(--color-text-muted); }
.equipe-card-num { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 800; line-height: 1; margin-top: 12px; letter-spacing: -.01em; }
.equipe-card-lbl { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.equipe-card-retry {
  appearance: none; border: none; background: none; padding: 0; margin-left: 4px;
  color: var(--color-primary); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline;
}
.equipe-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.equipe-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.equipe-badge-high { background: rgba(214,69,69,.12); color: var(--color-danger); }
.equipe-badge-low { background: rgba(31,168,85,.14); color: var(--color-success); }
.equipe-badge-idle { background: rgba(201,136,42,.14); color: var(--color-warning); }
.equipe-meta-row {
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--color-border); font-size: 11.5px; color: var(--color-text-muted);
}
.equipe-overdue { color: var(--color-danger); font-weight: 700; }
.equipe-card-pager { position: relative; overflow: hidden; }
.equipe-card-pages { display: flex; transition: transform .25s ease; }
.equipe-card-page { flex: 0 0 100%; min-width: 100%; }
.equipe-card-nav {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); box-shadow: var(--shadow); color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.equipe-card:hover .equipe-card-nav { opacity: 1; }
.equipe-card-nav:hover { color: var(--color-primary); border-color: var(--color-primary); }
.equipe-card-nav-prev { left: 2px; }
.equipe-card-nav-next { right: 2px; }
.equipe-card-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.equipe-card-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--color-border); transition: width .15s, background-color .15s; }
.equipe-card-dots span.on { background: var(--color-primary); width: 14px; border-radius: 3px; }
.equipe-page2-total { display: flex; align-items: baseline; gap: 6px; }
.equipe-page2-total .n { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; }
.equipe-page2-total .t { font-size: 11.5px; color: var(--color-text-muted); }
.equipe-stackbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 10px; background: var(--color-bg); }
.equipe-stackbar span { height: 100%; }
.equipe-status-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; max-height: 140px; overflow-y: auto; }
.equipe-status-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.equipe-status-row .swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.equipe-status-row .lbl { color: var(--color-text-muted); }
.equipe-status-row .num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.equipe-card-sparkline { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.equipe-card-sparkline-lbl { display: block; margin-top: 4px; font-size: 10px; color: var(--color-text-muted); }
.equipe-modal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin: -20px -22px 16px; padding: 0 22px; }
.equipe-modal-tabs button {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 12px 4px; margin: 0 18px 0 0; margin-bottom: -1px;
  font-size: 13px; font-weight: 700; color: var(--color-text-muted); border-bottom: 2px solid transparent;
}
.equipe-modal-tabs button:hover { color: var(--color-text); }
.equipe-modal-tabs button.selected { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.equipe-summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.equipe-summary-stat { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 8px; text-align: center; }
.equipe-summary-stat .n { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; }
.equipe-summary-stat .l { font-size: 10.5px; color: var(--color-text-muted); margin-top: 2px; }
.equipe-reassign-select { font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); max-width: 150px; }

.equipe-table-wrap { overflow-x: auto; }
.equipe-demand-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.equipe-demand-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); padding: 8px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.equipe-demand-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.equipe-demand-table tr:last-child td { border-bottom: none; }
.equipe-demand-table .dt-titulo { font-weight: 600; }
.equipe-demand-table .dt-tipo { color: var(--color-text-muted); white-space: nowrap; }
.equipe-demand-table .dt-updated { color: var(--color-text-muted); white-space: nowrap; }
.equipe-demand-table .dt-action { white-space: nowrap; text-align: right; }

.equipe-tipo-groups { display: flex; flex-direction: column; gap: 10px; }
.equipe-tipo-group { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; }
.equipe-tipo-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.equipe-tipo-group-head .name { font-size: 13px; font-weight: 700; }
.equipe-tipo-group-head .count { font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); background: var(--color-bg); border-radius: 99px; padding: 2px 9px; flex-shrink: 0; }
.equipe-tipo-list { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }

.equipe-summary-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.equipe-summary-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; background: var(--color-bg); }
.equipe-summary-card-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.equipe-summary-stat.warn .n { color: var(--color-danger); }
@media (max-width: 560px) { .equipe-summary-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Quadro Digital (14/08) ---------- */
/* Prefixo "qd-" pra não colidir com .card/.note já usados em outro lugar do app. Canvas maior
   que a viewport de propósito (2400x1600) — sem pan/zoom de verdade nesta v1, só um scroll
   comum dentro de .qd-canvas-wrap (mais simples e confiável que reimplementar zoom/pan em
   coordenadas próprias). */
.qd-shell { display: flex; flex-direction: column; height: calc(100vh - 160px); min-height: 480px; }
.qd-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow); flex: none;
}
.qd-toolbar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qd-toolbar-div { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 2px; }

/* Seletor de quadro (14/08, pedido do usuário: "várias quadros brancos... um dropdown pra
   selecionar") — select comum + botões de ícone pra criar/renomear/excluir o quadro atual. */
.qd-board-picker { display: flex; align-items: center; gap: 4px; }
.qd-board-select {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 6px 8px; max-width: 160px;
}
.qd-icon-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-text-muted); cursor: pointer; flex: none;
}
.qd-icon-btn:hover { background: var(--color-hover-strong); }
.qd-icon-btn-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-bg); }
.qd-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 5px 10px 5px 8px; border-radius: 20px;
}
.qd-badge svg { width: 12px; height: 12px; color: var(--color-lightblue); flex: none; }
.qd-canvas-wrap {
  flex: 1; min-height: 0; overflow: auto; position: relative;
  background-color: var(--color-bg-alt);
  background-image: radial-gradient(rgba(31, 41, 55, 0.10) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .qd-canvas-wrap { background-image: radial-gradient(rgba(255,255,255,0.08) 1.3px, transparent 1.3px); }
}
html[data-theme="dark"] .qd-canvas-wrap { background-image: radial-gradient(rgba(255,255,255,0.08) 1.3px, transparent 1.3px); }
.qd-canvas { position: relative; width: 2400px; height: 1600px; }

.qd-item { position: absolute; cursor: grab; user-select: none; }
.qd-item:active { cursor: grabbing; }
.qd-item.qd-selected { outline: 2px solid var(--color-lightblue); outline-offset: 3px; }

/* Notas — cantinho de "fita" no topo (::before) e cor de fundo por --color-*, igual ao mockup
   aprovado. Layout em coluna: etiqueta opcional, texto (cresce), rodapé com avatar+alça. */
.qd-note {
  padding: 14px 13px 10px; border-radius: 3px 3px var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px; overflow: visible;
}
.qd-note::before {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 44px; height: 15px; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(16,24,40,0.12); pointer-events: none;
}
html[data-theme="dark"] .qd-note::before { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.18); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .qd-note::before { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.18); }
}
.qd-note-tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,0.55); color: var(--color-text-muted);
  outline: none; cursor: text; min-width: 10px;
}
html[data-theme="dark"] .qd-note-tag { background: rgba(255,255,255,0.12); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .qd-note-tag { background: rgba(255,255,255,0.12); } }
.qd-note-tag:empty:before { content: attr(data-placeholder); opacity: 0.55; }
.qd-note-text {
  font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--color-text);
  outline: none; width: 100%; flex: 1; overflow-y: auto; cursor: text; user-select: text;
}
.qd-note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.qd-avatar {
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; background: rgba(255,255,255,0.6); color: var(--color-primary-dark);
}
html[data-theme="dark"] .qd-avatar { background: rgba(255,255,255,0.14); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .qd-avatar { background: rgba(255,255,255,0.14); } }
.qd-drag-handle { width: 14px; height: 14px; color: var(--color-text-muted); opacity: 0.5; }
.qd-drag-handle svg { width: 100%; height: 100%; }

/* Checklist dentro da nota (14/08) */
.qd-checklist { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.qd-checklist-row { display: flex; align-items: flex-start; gap: 6px; }
.qd-checklist-check { margin-top: 2px; flex: none; cursor: pointer; width: 14px; height: 14px; accent-color: var(--color-primary); }
.qd-checklist-text { flex: 1; font-size: 12.5px; line-height: 1.35; outline: none; cursor: text; color: var(--color-text); min-width: 10px; }
.qd-checklist-done { text-decoration: line-through; opacity: 0.6; }
.qd-checklist-remove { flex: none; border: none; background: transparent; color: var(--color-text-muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0.5; padding: 0 2px; }
.qd-checklist-remove:hover { opacity: 1; color: var(--color-danger); }
.qd-checklist-add { align-self: flex-start; border: none; background: transparent; color: var(--color-text-muted); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 2px 0; }
.qd-checklist-add:hover { text-decoration: underline; }
.qd-checklist-ghost {
  align-self: flex-start; border: 1px dashed var(--color-border); background: transparent;
  color: var(--color-text-muted); font-size: 11px; font-weight: 600; border-radius: 6px;
  padding: 3px 8px; cursor: pointer;
}
.qd-checklist-ghost:hover { background: rgba(255,255,255,0.3); }
html[data-theme="dark"] .qd-checklist-ghost:hover { background: rgba(255,255,255,0.1); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .qd-checklist-ghost:hover { background: rgba(255,255,255,0.1); } }
.qd-color-blue   { background: #eaf3ff; border-top: 3px solid #579bfc; }
.qd-color-amber  { background: #fff6e0; border-top: 3px solid #fdab3d; }
.qd-color-green  { background: #e9fbf1; border-top: 3px solid #00c875; }
.qd-color-purple { background: #f5edfb; border-top: 3px solid #a25ddc; }
.qd-color-neutral { background: var(--color-surface); border-top: 3px solid var(--color-border); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .qd-color-blue   { background: #1c2a3d; }
  html:not([data-theme="light"]) .qd-color-amber  { background: #332813; }
  html:not([data-theme="light"]) .qd-color-green  { background: #12271d; }
  html:not([data-theme="light"]) .qd-color-purple { background: #271e33; }
}
html[data-theme="dark"] .qd-color-blue   { background: #1c2a3d; }
html[data-theme="dark"] .qd-color-amber  { background: #332813; }
html[data-theme="dark"] .qd-color-green  { background: #12271d; }
html[data-theme="dark"] .qd-color-purple { background: #271e33; }

/* Texto livre — sem moldura, só o texto. */
.qd-text { display: flex; align-items: center; }
.qd-text-content {
  font-size: 15px; font-weight: 700; color: var(--color-text); line-height: 1.35;
  outline: none; width: 100%; cursor: text; user-select: text;
}

/* Formas */
.qd-shape { background: rgba(57, 168, 232, 0.09); border: 2px solid var(--color-lightblue); }
.qd-shape.qd-color-blue   { border-color: #579bfc; background: rgba(87,155,252,0.12); }
.qd-shape.qd-color-amber  { border-color: #fdab3d; background: rgba(253,171,61,0.12); }
.qd-shape.qd-color-green  { border-color: #00c875; background: rgba(0,200,117,0.12); }
.qd-shape.qd-color-purple { border-color: #a25ddc; background: rgba(162,93,220,0.12); }
.qd-shape.qd-color-neutral { border-color: var(--color-text-muted); background: rgba(107,114,128,0.10); }
.qd-shape-rect { border-radius: 10px; }
.qd-shape-circle { border-radius: 50%; }

/* Tabela */
.qd-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: auto; }
.qd-table-el { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.qd-table-el td { padding: 6px 9px; border: 1px solid var(--color-border); color: var(--color-text); outline: none; cursor: text; user-select: text; min-width: 48px; }

/* Imagem — thumb (cresce) + barra de legenda com o nome do arquivo embaixo, igual ao mockup. */
.qd-image {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column;
}
.qd-image-thumb { flex: 1; min-height: 0; overflow: hidden; }
.qd-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.qd-image-cap {
  flex: none; display: flex; align-items: center; padding: 8px 11px; font-size: 11.5px; font-weight: 600;
  color: var(--color-text-muted); border-top: 1px solid var(--color-border);
}
.qd-image-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-image-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 12px; }

/* Botão com link */
.qd-link { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.qd-link-pill {
  display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 20px;
  background: var(--color-primary); color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-md); text-decoration: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qd-link-url { font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Card de referência (tarefa/demanda) — 14/08 */
.qd-tarefa {
  padding: 12px 13px; border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 6px; justify-content: center; overflow: hidden;
}
.qd-tarefa-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.qd-tarefa-title { font-size: 13px; font-weight: 700; color: var(--color-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qd-tarefa-status {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: rgba(255,255,255,0.55); color: var(--color-text-muted);
}
html[data-theme="dark"] .qd-tarefa-status { background: rgba(255,255,255,0.12); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .qd-tarefa-status { background: rgba(255,255,255,0.12); } }
.qd-tarefa-missing { opacity: 0.55; }
.qd-tarefa-missing .qd-tarefa-title { text-decoration: line-through; }

/* Dropdown de "+ Tarefa" / "+ Demanda" — flutua abaixo do botão que abriu. */
.qd-ref-wrap { position: relative; }
.qd-ref-picker {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 260px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 10px;
}
.qd-ref-select { width: 100%; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); }
.qd-ref-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.qd-ref-empty { font-size: 12.5px; color: var(--color-text-muted); padding: 4px 2px; }

/* Barra de formatação flutuante (aparece acima do item selecionado) */
.qd-format-toolbar {
  position: absolute; z-index: 9999; display: flex; align-items: center; gap: 3px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 5px;
}
.qd-swatch { width: 16px; height: 16px; border-radius: 50%; border: none; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--color-border); }
.qd-swatch-blue { background: #579bfc; } .qd-swatch-amber { background: #fdab3d; }
.qd-swatch-green { background: #00c875; } .qd-swatch-purple { background: #a25ddc; }
.qd-swatch-neutral { background: var(--color-text-muted); }
.qd-swatch-on { box-shadow: 0 0 0 2px var(--color-lightblue); }
.qd-fmt-div { width: 1px; align-self: stretch; background: var(--color-border); margin: 2px 3px; }
.qd-fmt-btn { border: none; background: transparent; border-radius: 6px; padding: 5px 8px; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; }
.qd-fmt-btn:hover { background: var(--color-hover-strong); }
.qd-fmt-danger { color: var(--color-danger); }
.qd-fmt-danger:hover { background: var(--color-danger-bg); }

/* Alça de redimensionar — desenhada em coordenadas do canvas (ver resizeHandleHtml em
   quadro-digital.js), não filha do item, pra não ser cortada pelo overflow:hidden de
   imagem/tabela. Só existe enquanto o item está selecionado. */
.qd-resize-handle {
  position: absolute; z-index: 9998; width: 14px; height: 14px; border-radius: 4px;
  background: var(--color-surface); border: 2px solid var(--color-lightblue);
  cursor: nwse-resize;
}

@media (max-width: 720px) {
  .qd-toolbar { flex-direction: column; align-items: stretch; }
  .qd-badge { display: none; }
}

/* ---------- Mini calendário (27/08) — filtros de data com navegação de mês ---------- */
/* Pedido do usuário: "nos filtros de datas do sistema, abrisse um mini calendário para poder
   navegar entre as datas e selecionar" — só nos filtros De/Até, não no resto dos campos de
   data do sistema (ver mini-calendar.js). */
.mini-cal-input {
  cursor: pointer;
  background: var(--glass-surface-strong);
  color: var(--color-text);
  border-color: var(--color-border);
}
.mini-cal-popover {
  position: absolute;
  z-index: 400;
  width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 10px;
  font-size: 13px;
}
.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mini-cal-title { font-weight: 600; font-size: 13px; }
.mini-cal-nav {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.mini-cal-nav:hover { background: var(--color-bg); color: var(--color-text); }
.mini-cal-weekdays, .mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.mini-cal-weekdays { font-size: 10.5px; color: var(--color-text-muted); margin-bottom: 4px; }
.mini-cal-day {
  padding: 5px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mini-cal-day:hover { background: var(--color-bg); }
.mini-cal-empty { cursor: default; }
.mini-cal-today { font-weight: 700; color: var(--color-primary); }
.mini-cal-selected { background: var(--color-primary); color: #fff; }
.mini-cal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.mini-cal-footer button {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.mini-cal-footer button:hover { text-decoration: underline; }

/* ---------- Impressão / Exportar PDF ---------- */
/* Usado pelo botão "Imprimir / PDF" nos detalhes de Auditoria e Gestão —
   o navegador já oferece "Salvar como PDF" no diálogo de impressão, então
   não precisamos gerar PDF no servidor. Esconde a doca/topbar/modais e
   deixa o conteúdo do relatório ocupar a página inteira. */
@media print {
  .dock, .topbar, .password-warning-banner, .modal-overlay, .toast, .toast-container,
  .emoji-picker-popup, #topbarActions { display: none !important; }
  body, .app-shell, .main, .content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .view { display: none !important; }
  .view.active { display: block !important; }
  .panel, .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ---------- Dashboard da Avaliação (02/10, ver avaliacaoDashboard.js) ----------
   Positiva x negativa = polaridade -> par divergente azul/vermelho; cores validadas (claro #fff,
   escuro #1d2026 e escuro "glass") com o validador de paleta do guia de visualização. --viz-seq é
   série única sem polaridade (Qualificação) — violeta, pra não ser lida como "positiva". */
:root {
  --viz-pos: #2a78d6; --viz-neg: #e34948; --viz-neg-rgb: 227, 73, 72; --viz-seq: #4a3aa7;
  --viz-grid: rgba(0, 0, 0, .08);
}
:root[data-theme="dark"] {
  --viz-pos: #3987e5; --viz-neg: #e66767; --viz-neg-rgb: 230, 103, 103; --viz-seq: #9085e9;
  --viz-grid: rgba(255, 255, 255, .10);
}
.viz-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.viz-filtros .form-row { min-width: 150px; }
.viz-aba-n { font-size: 11px; font-weight: 700; color: var(--color-text-muted); margin-left: 4px; }
.viz-h3 { margin: 0 0 12px; font-size: 15px; }
.viz-h4 { margin: 0 0 8px; font-size: 13px; color: var(--color-text-muted); }
.viz-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.viz-grid2 > .panel { margin: 0; }
.viz-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.viz-tile { flex: 1 1 130px; padding: 10px 14px; border-radius: 12px; background: var(--color-bg); }
.viz-tile-l { font-size: 12px; color: var(--color-text-muted); }
.viz-tile-v { font-size: 24px; font-weight: 700; margin-top: 2px; }
.viz-tile-s { font-size: 12px; color: var(--color-text-muted); }
.viz-tile-hero { flex: 1.6 1 200px; }
.viz-tile-hero .viz-tile-v { font-size: 48px; line-height: 1.05; }
.viz-legend { display: flex; gap: 14px; font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.viz-legend > span, .viz-res { display: inline-flex; align-items: center; gap: 6px; }
.viz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* Colunas empilhadas: base comum, topo arredondado 4px, 2px de superfície entre segmentos. */
.viz-cols { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 16px 0 22px; border-bottom: 1px solid var(--viz-grid); }
.viz-cols-max { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--color-text-muted); }
.viz-col { position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 3px; cursor: default; }
.viz-col:hover { background: var(--viz-grid); border-radius: 4px 4px 0 0; }
.viz-col-stack { display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.viz-col-x { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap; }
.viz-seg { min-height: 2px; }
.viz-seg-pos { background: var(--viz-pos); }
.viz-seg-neg { background: var(--viz-neg); }
.viz-hbars { display: flex; flex-direction: column; gap: 6px; }
.viz-hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.viz-hbar:hover { background: var(--viz-grid); border-radius: 6px; }
.viz-hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-hbar-track { height: 12px; }
.viz-hbar-fill, .viz-hbar-stack { height: 12px; border-radius: 0 4px 4px 0; min-width: 2px; }
.viz-hbar-stack { display: flex; gap: 2px; overflow: hidden; }
.viz-hbar-v { font-variant-numeric: tabular-nums; color: var(--color-text-muted); min-width: 28px; text-align: right; }
.viz-mini { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.viz-mini-bar { display: inline-flex; gap: 2px; width: 56px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--viz-grid); }
.viz-mini-bar i { display: block; height: 100%; }
.viz-heat th { font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-heat-c { text-align: center; background: rgba(var(--viz-neg-rgb), var(--a)); font-variant-numeric: tabular-nums; }
.viz-heat-forte { color: #fff; font-weight: 700; }
/* Tabela de funcionários: rola por dentro, cabeçalho fixo (61+ pessoas não empurram o resto). */
.viz-func-wrap { max-height: 460px; overflow: auto; }
.viz-func-wrap thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.viz-tooltip {
  position: fixed; z-index: 9999; display: none; pointer-events: none; max-width: 280px;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 8px 10px; font-size: 12px;
}
.viz-tip-t { font-weight: 700; margin-bottom: 4px; }
.viz-tip-l { display: flex; align-items: center; gap: 6px; }
.viz-tip-l b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
/* Pendente de fechamento (02/10) — aviso com ícone + texto (nunca só cor). */
.viz-pendente { margin-left: 4px; cursor: help; }
.viz-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; font-size: 13px;
  background: rgba(253, 171, 61, .14); border: 1px solid rgba(253, 171, 61, .45); }
.viz-aviso-neutro { background: var(--color-bg); border-color: var(--color-border); }
.viz-aviso-ok { background: rgba(42, 120, 214, .08); border-color: rgba(42, 120, 214, .3); }

/* Painel Avaliação | Atendimento | O.S. (03/10 — Auditoria e Revisão do Gestor). Empilha em tela estreita. */
.av-painel-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .av-painel-cols { grid-template-columns: 1fr; } .av-painel-cols > div { border-left: none !important; border-top: 1px solid var(--color-border); } }
.aud-av-linha.aud-av-ativa td { background: var(--color-primary-bg); }
/* ---------- Relatórios dos setores (07/10, ver relatorios.js) ---------- */
.rel-filtros .form-row { min-width: 140px; flex: 0 1 170px; }
.rel-filtros input, .rel-filtros select { width: 100%; }
.rel-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.rel-cabecalho { margin: 2px 0 12px; }
.rel-h3-nota { font-weight: 400; color: var(--color-text-muted); font-size: 13px; }
.rel-num, table.simple-table.rel-tabela th.rel-num { text-align: right; font-variant-numeric: tabular-nums; }
.rel-tabela td.rel-texto { max-width: 340px; }
table.simple-table.rel-tabela td.rel-pessoa { white-space: normal; max-width: none; }
.rel-registros { max-height: 560px; overflow: auto; }
.rel-cols .viz-col { min-width: 22px; }
.rel-col-v { text-align: center; line-height: 14px; margin-bottom: 2px; font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rel-cols .viz-col-stack { flex-shrink: 0; max-height: calc(100% - 16px); }
.rel-print-only { display: none; }
@media (max-width: 640px) {
  .rel-filtros .form-row { flex: 1 1 calc(50% - 12px); min-width: 0; }
}
@media print {
  .rel-no-print, .module-sidebar, .viz-tip { display: none !important; }
  .rel-print-only { display: inline; }
  div.rel-print-only { display: block; }
  .rel-registros { max-height: none; overflow: visible; }
  .rel-tabela th, .rel-tabela td { white-space: normal !important; max-width: none !important; font-size: 10.5px; }
  table.simple-table.rel-tabela { min-width: 0; }
  .viz-grid2 { display: block; }
  .viz-grid2 > .panel { margin-bottom: 12px; }
  .panel { break-inside: avoid; }
  .rel-registros { break-inside: auto; }
}
/* Espaço entre os quadros do relatório (08/10, pedido do usuário: "precisa de mais espaço entre os
   quadrados da dashboard, está um em cima do outro") — painéis da grade tinham margin 0 e a grade
   nenhuma margem, então as linhas encostavam umas nas outras. */
.rel-corpo { display: flex; flex-direction: column; gap: 18px; }
.rel-corpo > .panel, .rel-corpo .viz-grid2 > .panel, .rel-corpo > .rel-cabecalho { margin: 0; }
.rel-corpo .viz-grid2 { gap: 18px; }
.rel-corpo .viz-tiles { gap: 14px; }
@media print {
  .rel-corpo { gap: 12px; }
  .rel-corpo .viz-grid2 { display: flex; flex-direction: column; gap: 12px; }
}
/* Checklist do atendimento/O.S. na Avaliação e na Revisão do Gestor (08/10, pedido do usuário:
   "corrigir uma quebra de texto na parte do checklist"). A resposta tinha white-space:nowrap — resposta
   longa (campo textual) virava uma linha só e estourava a coluna. Agora quebra e mantém as linhas
   digitadas (pre-line); resposta curta ("Sim") continua encostada à direita. */
.av-check-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.av-check-q { flex: 1 1 50%; min-width: 0; overflow-wrap: anywhere; }
.av-check-a { flex: 0 1 auto; max-width: 55%; min-width: 0; font-weight: 700; color: var(--color-text-muted); text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
/* ---------- Roteirizador de O.S. (Operacional › Operação, 09/10 — ver roteirizador.js) ---------- */
.rz { --rz-l: 42%; display: flex; flex-direction: column; gap: 14px; }
html[data-theme="dark"] .rz { --rz-l: 64%; }
.rz [hidden] { display: none !important; }
.rz-controles { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; }
.rz-controles.rz-sem-borda { border: none; padding: 0; background: none; }
.rz-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rz-campo label, .rz-rot { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.rz-campo input[type="number"] { width: 76px; }
.rz-grow { flex: 1 1 auto; }
.rz-nota { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.rz-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11.5px; color: var(--color-text-muted); }
.rz-erro { color: var(--color-danger); font-size: 11.5px; }
.rz-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rz-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rz-kpi b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rz-kpi span { font-size: 12px; color: var(--color-text-muted); }
.rz-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.rz-aba { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; cursor: pointer; font: inherit; font-weight: 600; }
.rz-aba[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); }
.rz-quadro { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; align-items: flex-start; }
.rz-col { flex: 0 0 270px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; display: flex; flex-direction: column; max-height: 78vh; }
.rz-col.rz-alvo { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.rz-col-cab { padding: 10px 12px 8px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--rz-cor); border-radius: 10px 10px 0 0; }
.rz-col-cab select { width: 100%; font-size: 13px; }
.rz-col-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rz-col-tit strong { font-size: 16px; }
.rz-col-met { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rz-col-met b { color: var(--color-text); }
.rz-col-add { padding: 8px 8px 0; }
.rz-btn-add { width: 100%; border: 1px dashed var(--color-border); background: transparent; color: var(--color-primary); border-radius: 8px; padding: 6px; font: inherit; font-size: 13px; cursor: pointer; }
.rz-btn-add:hover { border-color: var(--color-primary); }
.rz-lista { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 60px; }
.rz-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 9px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; cursor: grab; }
.rz-ord { grid-row: span 3; font: 600 12px/22px ui-monospace, Menlo, monospace; text-align: center; border-radius: 50%; width: 22px; height: 22px; background: var(--rz-cor); color: var(--color-surface); }
.rz-t1 { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.rz-t2 { font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.rz-t3 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--color-text-muted); }
.rz-t4 { grid-column: 2; display: flex; gap: 8px; align-items: flex-end; justify-content: space-between; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--color-border); font-size: 11.5px; }
.rz-dif { color: var(--color-text-muted); min-width: 0; overflow-wrap: anywhere; }
.rz-dif b { color: var(--color-text); }
.rz-acoes { display: flex; gap: 4px; flex: none; }
.rz-mover { font-size: 11px; padding: 1px 4px; margin-left: auto; }
.rz-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.rz-urg { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; }
.rz-alta { color: var(--color-warning); border-color: var(--color-warning); }
.rz-atr { color: var(--color-danger); border-color: var(--color-danger); }
.rz-nova { background: var(--color-primary); color: var(--color-surface); border-color: transparent; }
.rz-ok { color: var(--color-success); border-color: var(--color-success); }
.rz-per { color: var(--color-text); }
.rz-col-pe { padding: 6px 8px 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.rz-mapa-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; }
@media (max-width: 760px) { .rz-mapa-box { grid-template-columns: 1fr; } }
.rz-mapa { width: 100%; height: auto; max-height: 76vh; background: var(--color-bg); border-radius: 8px; }
.rz-mapa.rz-marcando { cursor: crosshair; }
.rz-legenda-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rz-legenda { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; font-size: 12.5px; }
.rz-legenda button { display: flex; gap: 8px; align-items: center; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; color: var(--color-text); cursor: pointer; font: inherit; font-size: 12.5px; }
.rz-legenda button:hover, .rz-legenda button.rz-on { border-color: var(--color-border); background: var(--color-bg); }
.rz-sw { width: 14px; height: 4px; border-radius: 2px; background: var(--rz-cor); flex: none; }
.rz-tab-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.rz-tabela { border-collapse: collapse; width: 100%; font-size: 13px; }
.rz-tabela th, .rz-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.rz-tabela th { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg); position: sticky; top: 0; cursor: pointer; white-space: nowrap; }
.rz-num { text-align: right; font-variant-numeric: tabular-nums; }
.rz-bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rz-cor); margin-right: 6px; }
.rz-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.rz-painel { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.rz-painel h2 { margin: 0; font-size: 17px; }
.rz-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rz-check { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.rz-zona { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 110px; border: 2px dashed var(--color-border); border-radius: 10px; cursor: pointer; text-align: center; padding: 14px; }
.rz-zona.rz-sobre, .rz-zona:hover { border-color: var(--color-primary); }
.rz-zona:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rz-sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rz-apelidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rz-apelido { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; }
.rz-apelido.rz-falta { border-color: var(--color-danger); }
.rz-duplas { display: flex; flex-direction: column; gap: 6px; }
.rz-dupla { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px; align-items: center; }
.rz-dupla select { min-width: 0; width: 100%; }
/* Linha genérica de 2 blocos lado a lado (Conferência de rota, Veículos (Cobli)) — diferente de
   .rz-dupla (grid de 3 colunas fixas pra número+2 selects): aqui é flex, cresce/quebra livre. */
.rz-linha-flex { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.rz-linha-flex:last-child { border-bottom: none; }
.rz-linha-flex > span:first-child { flex: 1 1 280px; min-width: 0; }
.rz-rod td.rz-pos { text-align: center; }
.rz-rod td.rz-pos span { display: inline-block; min-width: 28px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--color-primary) calc(var(--p) * 1%), transparent); }
.rz-sobrepor { position: fixed; inset: 0; background: rgba(10, 16, 24, .45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 900; overflow-y: auto; }
.rz-modal { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; width: min(1100px, 100%); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rz-modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rz-modal-cab h2 { margin: 2px 0 0; font-size: 19px; }
.rz-modal input[type="search"] { width: 100%; }
.rz-aviso { font-size: 13px; padding: 10px 12px; border-radius: 8px; background: var(--color-primary-bg); border: 1px solid var(--color-border); margin-bottom: 8px; }
.rz-mapa { width: 100%; height: 72vh; min-height: 420px; max-height: none; border-radius: 8px; z-index: 0; }
.rz-pin { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 600 11px/1 ui-monospace, Menlo, monospace; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.rz-pin-base { display: block; width: 18px; height: 18px; margin: 4px; transform: rotate(45deg); background: #1f2937; border: 3px solid #fff; border-radius: 3px; box-shadow: 0 1px 5px rgba(0, 0, 0, .45); }
.rz-setor { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; letter-spacing: .06em; }
.rz-setor-fibra { background: var(--color-primary-bg); color: var(--color-primary); }
.rz-setor-reparo { background: var(--color-danger-bg); color: var(--color-danger); }
.rz-setor-rdo { background: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.rz-setor-quissama { background: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.rz-editor td { vertical-align: middle; }
.rz-editor select, .rz-editor input[type="text"] { font-size: 13px; padding: 4px 6px; max-width: 100%; }
.rz-editor select { min-width: 170px; }
.rz-secao { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--color-border); border-radius: 8px; }
.rz-publicar { border: 2px solid var(--color-primary); }
.rz-pub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .rz-pub-grid { grid-template-columns: 1fr; } }
.rz-previa-box { max-height: 70vh; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; }
.rz-previa-box canvas { display: block; width: 100%; height: auto; }
.rz-pub-lado { display: flex; flex-direction: column; gap: 8px; }
.rz-pub-lado textarea { width: 100%; font: inherit; }