/* ==========================================================================
   BI Ergonomia - ElevaLife
   Identidade visual "15 anos" (mesmo padrao do Cockpit Comercial):
   vinho + creme + Montserrat, com paleta de dados validada (categorica e
   de status) por cima, seguindo o metodo do skill de dataviz.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Marca ElevaLife (chrome: cabecalho, cartoes, tipografia) ---- */
  --vinho-escuro: #5E2A30;
  --vinho: #8B3A42;
  --vinho-medio: #A34E56;
  --vinho-suave: #D8B7BB;
  --vinho-suave-2: #C99AA0;
  --creme: #F5EFEA;
  --card: #FFFFFF;
  --texto: #3D2E30;
  --texto-secundario: #6E5C5C;
  --cinza-quente: #8A7A78;
  --teal: #3E7B7E;
  --teal-escuro: #2E5F62;
  --teal-claro: #6FA8AA;
  --linha: #E7DED9;

  /* ---- Paleta de dados (validada - skill dataviz) ----
     Status (fixo, nunca tematizado): severidade de risco / status de acao.
     No claro, "warning" usa um passo mais escuro que o documentado (#c98500
     em vez de #fab219) porque o passo padrao fica abaixo de 3:1 no fundo claro;
     no escuro volta ao passo original (ja valida >=3:1 la). */
  --status-good: #0ca30c;      /* (legado, mantido por compat.) */
  --status-warning: #c98500;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --status-neutral: #8A7A78;

  /* Mapa de Risco (paleta fixa, nunca tematizada por marca - convencao de
     semaforo de risco ocupacional, obrigatoria por definicao de produto):
     Baixo=verde, Moderado=amarelo, Alto=vermelho, Muito Alto=roxo. */
  --risco-baixo: #1a9c4b;
  --risco-muitobaixo: #6fc78b;
  --risco-moderado: #c9960c;
  --risco-alto: #d93636;
  --risco-muitoalto: #7c3aed;

  /* Plano de Acao / Status (paleta fixa, distinta da paleta de risco mesmo
     onde o "verde" se repete - tom deliberadamente diferente do
     --risco-baixo para nao confundir "sem risco" com "acao concluida"):
     Nao iniciado=cinza, Em andamento=azul, Concluida=verde-agua,
     Concluida com atraso=laranja, Atrasada=vermelho. */
  --acao-nao-iniciado: #8A7A78;
  --acao-andamento: #2f6fed;
  --acao-concluida: #0f9d78;
  --acao-atraso: #e2751a;
  --acao-atrasada: #d93636;

  /* Categorica (identidade: Setor, Responsavel, Categoria Acao) - tons
     derivados exclusivamente da marca ElevaLife (vinho + teal), alternando
     as duas familias para maximizar distincao entre categorias vizinhas;
     sem cores fora da marca (nunca rosa/magenta, azul ou amarelo genericos). */
  --cat-1: #2E5F62; /* teal escuro */
  --cat-2: #8B3A42; /* vinho */
  --cat-3: #3E7B7E; /* teal */
  --cat-4: #A34E56; /* vinho medio */
  --cat-5: #6FA8AA; /* teal claro */
  --cat-6: #5E2A30; /* vinho escuro */

  --surface: #fcfcfb;
  --grid: #e7e2dc;
}

/* Tema escuro - segue o "system" (prefers-color-scheme) quando o viewer nao
   fez escolha explicita, e o toggle explicito via [data-theme] nos dois
   sentidos. Todos os tokens acima sao redefinidos aqui, nunca apenas criados
   aqui pela primeira vez. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vinho-escuro: #6b323a;
    --vinho: #a3505a;
    --vinho-medio: #c97a82;
    --vinho-suave: #6b3a40;
    --vinho-suave-2: #7a4048;
    --creme: #201a19;
    --card: #2b2322;
    --texto: #f3eae7;
    --texto-secundario: #cbb9b6;
    --cinza-quente: #a08f8c;
    --teal: #4f9497;
    --teal-escuro: #3a7376;
    --teal-claro: #7dbdbf;
    --linha: #3c3230;

    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;
    --status-critical: #e66767;
    --status-neutral: #a08f8c;

    --risco-baixo: #2fb865;
    --risco-muitobaixo: #7fd9a0;
    --risco-moderado: #f0b429;
    --risco-alto: #e35d5d;
    --risco-muitoalto: #9b71f5;

    --acao-nao-iniciado: #a08f8c;
    --acao-andamento: #5b91ff;
    --acao-concluida: #1fbf95;
    --acao-atraso: #f0883f;
    --acao-atrasada: #e35d5d;

    --cat-1: #3a7376;
    --cat-2: #a3505a;
    --cat-3: #4f9497;
    --cat-4: #c97a82;
    --cat-5: #7dbdbf;
    --cat-6: #6b323a;

    --surface: #1a1a19;
    --grid: #3c3230;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --vinho-escuro: #6b323a;
  --vinho: #a3505a;
  --vinho-medio: #c97a82;
  --vinho-suave: #6b3a40;
  --vinho-suave-2: #7a4048;
  --creme: #201a19;
  --card: #2b2322;
  --texto: #f3eae7;
  --texto-secundario: #cbb9b6;
  --cinza-quente: #a08f8c;
  --teal: #4f9497;
  --teal-escuro: #3a7376;
  --teal-claro: #7dbdbf;
  --linha: #3c3230;

  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #e66767;
  --status-neutral: #a08f8c;

  --risco-baixo: #2fb865;
  --risco-muitobaixo: #7fd9a0;
  --risco-moderado: #f0b429;
  --risco-alto: #e35d5d;
  --risco-muitoalto: #9b71f5;

  --acao-nao-iniciado: #a08f8c;
  --acao-andamento: #5b91ff;
  --acao-concluida: #1fbf95;
  --acao-atraso: #f0883f;
  --acao-atrasada: #e35d5d;

  --cat-1: #3a7376;
  --cat-2: #a3505a;
  --cat-3: #4f9497;
  --cat-4: #c97a82;
  --cat-5: #7dbdbf;
  --cat-6: #6b323a;

  --surface: #1a1a19;
  --grid: #3c3230;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: env(safe-area-inset-bottom, 0px); }

h1, h2, h3, .titulo-marca {
  font-family: 'Montserrat Alternates', 'Montserrat', system-ui, sans-serif;
}

/* ---------------------------- Tela de carregamento (splash inicial) ---------------------------- */
/* Cobre a tela do primeiro instante (sem JS) ate iniciar() em js/app.js
   decidir entre tela de acesso (login) ou app com dados reais - evita o
   "flash" de dados ficticios/estado antigo. Ver index.html. */
.carregando-app {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(165deg, var(--vinho-escuro), var(--vinho));
}
.carregando-app .logo-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.14);
  object-fit: contain;
  padding: 11px;
  box-sizing: border-box;
}
.carregando-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: girar-carregando 0.8s linear infinite;
}
@keyframes girar-carregando {
  to { transform: rotate(360deg); }
}

/* ---------------------------- Tela de acesso (login/bloqueado) ---------------------------- */

.tela-acesso {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--vinho-escuro), var(--vinho));
  padding: 24px;
}
.tela-acesso-cartao {
  background: var(--card);
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  text-align: center;
}
.tela-acesso-marca { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 28px; }
.tela-acesso-marca .logo-mark {
  height: 56px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}
.tela-acesso-marca .produto { font-weight: 700; font-size: 19px; color: var(--texto); }
.tela-acesso-marca .tagline { font-size: 12px; color: var(--texto-secundario); text-align: center; }
#tela-acesso-conteudo h2 { font-size: 17px; margin: 0 0 10px; color: var(--texto); }
#tela-acesso-conteudo p { font-size: 14px; color: var(--texto-secundario); line-height: 1.55; margin: 0 0 22px; }
.tela-acesso-email { font-weight: 600; color: var(--texto); }
.btn-entrar-microsoft, .btn-trocar-conta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  background: var(--vinho);
  color: #fff;
  transition: background .15s ease;
}
.btn-entrar-microsoft:hover { background: var(--vinho-escuro); }
.btn-entrar-microsoft:disabled { opacity: 0.7; cursor: default; }
.btn-entrar-microsoft + .btn-trocar-conta,
.btn-entrar-microsoft + .btn-entrar-microsoft { margin-top: 10px; }
.btn-trocar-conta {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--texto);
  margin-top: 10px;
}
.btn-trocar-conta:hover { background: var(--creme); }

/* Formulario de login/primeiro-acesso/redefinicao de senha (substitui o
   antigo "Entrar com Microsoft" - pedido do Leo, 28-29/09/2026). */
.form-acesso { text-align: left; }
.campo-acesso { margin-bottom: 14px; }
.campo-acesso label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); margin-bottom: 5px; }
.campo-acesso input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--creme);
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
}
.campo-acesso input:focus { outline: none; border-color: var(--vinho); background: var(--card); }
.erro-acesso { color: var(--status-critical); font-size: 13px; line-height: 1.5; margin: -4px 0 14px; }
.link-esqueci-senha {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--vinho);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 14px;
  padding: 4px;
}
.link-esqueci-senha:hover { text-decoration: underline; }

/* ---------------------------- Layout geral (shell + menu lateral) ---------------------------- */

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  width: 254px;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--vinho-escuro), var(--vinho));
  color: #fff;
  transition: width .18s ease;
  position: sticky;
  top: 0;
  z-index: 100;
}
.sidebar.recolhido { width: 68px; }

.sidebar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 16px;
}

.sidebar .marca { display: flex; align-items: center; gap: 12px; overflow: hidden; min-width: 0; }

.sidebar .logo-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  object-fit: contain;
  padding: 7px;
  box-sizing: border-box;
}

.sidebar .titulos { line-height: 1.25; overflow: hidden; white-space: nowrap; }
.sidebar .titulos .produto { font-weight: 700; font-size: 17px; }
.sidebar .titulos .tagline { font-size: 12.5px; opacity: 0.85; font-weight: 400; white-space: normal; }

.btn-fechar-sidebar {
  display: none;
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-fechar-sidebar svg { width: 18px; height: 18px; display: block; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.78);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-nav button .icone { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.sidebar-nav button .icone svg { width: 20px; height: 20px; display: block; }
.sidebar-nav button .rotulo { overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav button:hover { color: #fff; background: rgba(255,255,255,0.10); }
.sidebar-nav button.ativa { background: #fff; color: var(--vinho-escuro); }
.sidebar-nav button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Botao "Filtros" no topo do menu - mesma pinta dos outros itens, so com
   um badge de contagem de filtros ativos e uma linha separando ele das
   abas (Gestao de Risco/Absenteismo/Restritos etc.). */
#btn-abrir-filtros { position: relative; }
#btn-abrir-filtros .badge-filtros {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--vinho);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar.recolhido #btn-abrir-filtros .badge-filtros {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
}
.sidebar-nav-divisor { height: 1px; background: rgba(255,255,255,0.14); margin: 6px 10px 8px; flex-shrink: 0; }

.btn-recolher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 8px auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: rgba(255,255,255,0.75);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-recolher .icone svg { width: 14px; height: 14px; transition: transform .18s ease; display: block; }
.btn-recolher:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.4); }
.sidebar.recolhido .btn-recolher .icone svg { transform: rotate(180deg); }
.sidebar.recolhido .sidebar-topo,
.sidebar.recolhido .sidebar-nav button { justify-content: center; }
.sidebar.recolhido .titulos,
.sidebar.recolhido .sidebar-nav .rotulo { display: none; }

/* Menu lateral reclinavel: "Cadastro" e "Registro" abrem, dentro do
   proprio menu, a lista das entidades/tabelas que tem por baixo -
   mesmo padrao de arvore em cascata do menu do Cockpit Comercial
   (ex.: "Comercial" abre e revela "Cadastro", que abre e revela
   "Empresa/Contato/Oportunidade"). So um bloco por vez fica visivel
   dentro de Cadastro/Registro (accordion), sem caixas de selecao aqui -
   isso ja existe nos filtros. */
.sidebar-nav-grupo { display: flex; flex-direction: column; }
.sidebar-nav-pai { position: relative; width: 100%; }
.sidebar-nav-pai .seta-sub { flex-shrink: 0; margin-left: auto; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; opacity: 0.75; }
.sidebar-nav-pai .seta-sub svg { width: 14px; height: 14px; display: block; transition: transform .15s ease; }
.sidebar-nav-grupo.expandido .sidebar-nav-pai .seta-sub svg { transform: rotate(90deg); }

.sidebar-subnav-lateral {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-left: 14px;
}
.sidebar-nav-grupo.expandido .sidebar-subnav-lateral { display: flex; }
.sidebar-subnav-lateral button {
  display: flex;
  align-items: center;
  gap: 10px;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  border-left: 2px solid rgba(255,255,255,0.18);
  margin: 1px 0 1px 4px;
}
.sidebar-subnav-lateral button .icone { flex-shrink: 0; font-size: 12px; }
.sidebar-subnav-lateral button .rotulo { overflow: hidden; text-overflow: ellipsis; }
.sidebar-subnav-lateral button:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sidebar-subnav-lateral button.ativa { color: #fff; background: rgba(255,255,255,0.16); border-left-color: #fff; }
.sidebar.recolhido .sidebar-subnav-lateral,
.sidebar.recolhido .sidebar-nav-pai .seta-sub { display: none; }

.sidebar-overlay { display: none; }

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

.barra-superior {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(14px, 3vw, 32px);
  background: var(--card);
  border-bottom: 1px solid var(--linha);
}

.btn-hamburguer {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha);
  background: var(--card);
  color: var(--texto);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-hamburguer svg { width: 20px; height: 20px; display: block; }

.btn-icone-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 1px solid var(--linha);
  background: var(--card);
  color: var(--texto-secundario);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-icone-topo .icone { width: 15px; height: 15px; display: flex; flex-shrink: 0; }
.btn-icone-topo .icone svg { width: 15px; height: 15px; display: block; }
.btn-icone-topo:hover { border-color: var(--teal-escuro); color: var(--teal-escuro); background: var(--creme); }
.btn-icone-topo[aria-expanded="false"] { background: var(--creme); border-color: var(--cinza-quente); }

/* Logo do cliente filtrado (barra superior) - ver atualizarTemaCliente em
   js/app.js. A borda usa a mesma variavel --cor-cliente-ativa aplicada aos
   cartoes, pra reforcar visualmente que o tema do cliente esta ativo. */
.logo-cliente-ativo {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--cor-cliente-ativa, var(--linha));
  background: var(--card);
  transition: border-color .2s ease;
}
.logo-cliente-ativo img {
  height: 100%;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
}

.barra-export {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.btn-exportar {
  appearance: none;
  border: 1px solid var(--linha);
  background: var(--card);
  color: var(--texto);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, opacity .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-exportar:hover:not(:disabled) { background: var(--creme); border-color: var(--teal-escuro); color: var(--teal-escuro); }
.btn-exportar:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.aberto-mobile { transform: translateX(0); box-shadow: 2px 0 24px rgba(0,0,0,0.25); }
  .sidebar.recolhido { width: 250px; }
  .sidebar.recolhido .titulos { display: block; }
  .sidebar.recolhido .sidebar-nav .rotulo { display: inline; }
  .sidebar.recolhido .sidebar-topo,
  .sidebar.recolhido .sidebar-nav button { justify-content: flex-start; }
  .btn-recolher { display: none; }
  .btn-fechar-sidebar { display: flex; }
  .sidebar-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20,10,10,0.45);
    z-index: 90;
  }
  .btn-hamburguer { display: inline-flex; }
  .btn-icone-topo .rotulo-topo { display: none; }
  .btn-icone-topo { padding: 8px; }
}

/* ---------------------------- Filtros ---------------------------- */

/* Painel de Filtros: aberto pelo botao "Filtros" do menu lateral, com um
   overlay escurecendo o resto da tela pra focar (pedido do Leo, mesmo
   padrao mais novo do menu do Cockpit Comercial). Antes disso era uma
   barra fixa no topo que so recolhia/expandia no lugar. */
.overlay-filtros {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,10,10,0.45);
  z-index: 190;
}
.overlay-filtros:not([hidden]) { display: block; }

.painel-filtros {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 88vw;
  background: var(--card);
  box-shadow: 6px 0 28px rgba(0,0,0,0.22);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
}
.painel-filtros.aberto { transform: translateX(0); }

.painel-filtros-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(14px, 3vw, 24px);
  border-bottom: 1px solid var(--linha);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--card);
}
.painel-filtros-titulo { font-weight: 700; font-size: 16px; color: var(--texto); }
.btn-fechar-painel {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
}
.btn-fechar-painel svg { width: 18px; height: 18px; display: block; }
.btn-fechar-painel:hover { background: var(--creme); color: var(--texto); }

.barra-filtros {
  padding: 16px clamp(14px, 3vw, 24px) 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.painel-filtros .campo-filtro { min-width: 0; flex: none; max-width: none; width: 100%; }

@media (max-width: 480px) {
  .painel-filtros { width: 100vw; max-width: 100vw; }
}

.campo-filtro {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 132px;
  flex: 1 1 132px;
  max-width: 220px;
}

.campo-filtro label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cinza-quente);
  font-weight: 700;
}

.campo-filtro select {
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--linha);
  background: var(--creme);
  color: var(--texto);
  cursor: pointer;
}
.campo-filtro select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ---- Multi-select (dropdown com caixas de selecao embutidas) ---- */

.multi-select { position: relative; }

.multi-select-botao {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--linha);
  background: var(--creme);
  color: var(--texto);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
}
.multi-select-botao:hover { border-color: var(--teal); }
.multi-select-botao:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.multi-select-botao .multi-select-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select-botao .multi-select-seta { flex: none; font-size: 10px; color: var(--cinza-quente); transition: transform .12s; }
.multi-select-botao[aria-expanded="true"] .multi-select-seta { transform: rotate(180deg); }

.multi-select-painel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  z-index: 40;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.multi-select-topo {
  display: flex;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--linha);
}
.multi-select-topo button {
  flex: 1;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--teal-escuro);
  background: var(--creme);
  border: none;
  border-radius: 6px;
  padding: 5px 6px;
  cursor: pointer;
}
.multi-select-topo button:hover { background: var(--vinho-suave); color: #fff; }

.multi-select-lista {
  max-height: 230px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.multi-select-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--texto);
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.multi-select-item:hover { background: var(--creme); }
.multi-select-item input[type="checkbox"] { flex: none; accent-color: var(--teal-escuro); cursor: pointer; width: 14px; height: 14px; }

.btn-limpar-filtros {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--vinho);
  background: transparent;
  border: 1px solid var(--vinho-suave);
  border-radius: 7px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-limpar-filtros:hover { background: var(--vinho-suave-2); color: #fff; }
.painel-filtros .btn-limpar-filtros { width: 100%; text-align: center; margin-top: 6px; }
.painel-filtros .chip-contagem { padding-bottom: 0; text-align: center; }

/* Filtros de pagina (so na aba Compativeis - Status Restricao, Turno) -
   mesmo visual dos filtros globais, mas nao fixos (nao sticky) e dentro
   do fluxo do conteudo, para deixar claro que valem so para esta aba. */
.barra-filtros-pagina {
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-end;
}
.barra-filtros-pagina .campo-filtro select,
.barra-filtros-pagina .multi-select-botao { background: var(--card); }

.chip-contagem {
  font-size: 12px;
  color: var(--cinza-quente);
  padding-bottom: 8px;
  white-space: nowrap;
}
.chip-contagem strong { color: var(--vinho); }

/* ---------------------------- Layout de conteudo ---------------------------- */

/* 1600px (era 1400px) - pedido do Leo pra dar mais largura pras tabelas
   de Registro/Cadastro, que tem bastante coluna. */
main { padding: 16px clamp(14px, 3vw, 32px) 40px; max-width: 1600px; margin: 0 auto; }

.grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.cartao {
  background: var(--card);
  border-radius: 12px;
  /* --cor-cliente-ativa: definida via JS (atualizarTemaCliente, js/app.js)
     quando exatamente 1 Cliente com Logotipo esta filtrado - lida a cor
     dominante do logotipo e tematiza a borda dos cartoes com ela. Sem
     cliente filtrado (ou mais de 1), cai no --linha padrao de sempre. */
  border: 1px solid var(--cor-cliente-ativa, var(--linha));
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color .2s ease;
}

.cartao .cartao-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 2px;
}
.cartao .cartao-sub {
  font-size: 11.5px;
  color: var(--cinza-quente);
  margin-bottom: 8px;
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}

@media (max-width: 480px) {
  .sidebar-topo { padding: 14px clamp(12px, 4vw, 20px); gap: 8px; }
  .barra-superior { padding: 8px clamp(12px, 4vw, 20px); }
  .btn-exportar { padding: 6px 10px; font-size: 11px; }
}

/* Titulo separando um grupo de cartoes dentro da mesma grade (ex.: os novos
   indicadores do pacote "Sistema de Gestao Integrada" dentro da aba Gestao
   de Risco) - so texto, sem cartao/fundo proprio, pra marcar o inicio de um
   bloco sem pesar visualmente. */
.titulo-secao-grade {
  margin: 6px 2px -2px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto);
  padding-top: 14px;
  border-top: 1px dashed var(--linha);
}
.titulo-secao-grade span { font-weight: 500; text-transform: none; color: var(--cinza-quente); letter-spacing: 0; }

/* Separacao visual AEP x AET (pedido do Leo, 28/09/2026) - mesma tipografia
   de .titulo-secao-grade, so troca a cor/borda de cima pra marcar de qual
   trilha os cartoes daquele bloco sao, sem precisar reler o rotulo. */
.titulo-secao-grade--aep { border-top-color: var(--vinho-medio); color: var(--vinho-escuro); }
.titulo-secao-grade--aet { border-top-color: var(--teal-escuro); color: var(--teal-escuro); margin-top: 22px; }

.altura-chart { position: relative; height: 230px; }
.altura-chart.alta { height: 300px; }
.altura-chart.baixa { height: 150px; }

/* ---------------------------- Stat tiles (meter de risco) ---------------------------- */

.grade-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .grade-status { grid-template-columns: repeat(2, 1fr); } }

.tile-status {
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--creme);
  border-left: 5px solid var(--status-neutral);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-status.tile-clicavel { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.tile-status.tile-clicavel:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.10); transform: translateY(-1px); }
.tile-status .rotulo { font-size: 12px; font-weight: 700; color: var(--texto-secundario); display: flex; align-items: center; gap: 6px; }
.tile-status .rotulo .ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tile-status .valor { font-size: 24px; font-weight: 700; color: var(--texto); }
.tile-status .pct { font-size: 12px; color: var(--cinza-quente); }

/* Versao "destaque" - usada quando o card ocupa a largura toda (ex.: Mapa
   de Risco Global), pra tile parar de ficar achatado/apertado. */
.grade-status--destaque { gap: 16px; }
.grade-status--destaque .tile-status { padding: 18px 20px; border-radius: 12px; gap: 6px; }
.grade-status--destaque .tile-status .rotulo { font-size: 13.5px; }
.grade-status--destaque .tile-status .rotulo .ponto { width: 11px; height: 11px; }
.grade-status--destaque .tile-status .valor { font-size: 34px; }
.grade-status--destaque .tile-status .pct { font-size: 13px; }
@media (max-width: 700px) { .grade-status--destaque { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------- Stat tiles (totais Med Ocup) ---------------------------- */

.grade-totais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .grade-totais { grid-template-columns: 1fr; } }

.tile-total {
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--creme);
  border-left: 5px solid var(--teal);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-total .rotulo { font-size: 12px; font-weight: 700; color: var(--texto-secundario); }
.tile-total .valor { font-size: 26px; font-weight: 700; color: var(--texto); }
.tile-total .sub { font-size: 12px; color: var(--cinza-quente); }

/* ---------------------------- Diagramas corporais (SVG) ---------------------------- */

.figura-diagrama {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.figura-diagrama > div { width: 100%; max-width: 500px; }
.figura-diagrama figcaption {
  font-size: 11.5px;
  color: var(--cinza-quente);
  text-align: center;
}
.figura-diagrama .bi-diagrama-regiao { cursor: pointer; }
.figura-diagrama .bi-diagrama-regiao:hover rect,
.figura-diagrama .bi-diagrama-regiao:focus-visible rect { stroke-width: 2; opacity: 1; }
.figura-diagrama .bi-diagrama-regiao:focus-visible { outline: none; }

/* ---------------------------- Legendas customizadas ---------------------------- */

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11.5px;
  color: var(--texto-secundario);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--linha);
}
.legenda .item { display: flex; align-items: center; gap: 5px; }
.legenda .marca-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legenda .marca-linha { width: 14px; height: 2px; border-radius: 2px; flex: none; }

/* ---------------------------- Tooltip customizado (Chart.js externa) ---------------------------- */

.tooltip-chart {
  position: absolute;
  pointer-events: none;
  background: var(--vinho-escuro);
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translate(-50%, calc(-100% - 10px));
  z-index: 50;
  transition: opacity .08s;
  max-width: 240px;
}
.tooltip-chart .tt-titulo { font-weight: 700; margin-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 3px; }
.tooltip-chart .tt-linha { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tooltip-chart .tt-chave { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.tooltip-chart .tt-valor { font-weight: 700; margin-left: auto; padding-left: 10px; }
.tooltip-chart .tt-linha-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.25); font-weight: 700; }

/* ---------------------------- Estados vazios / carregando ---------------------------- */

.carregando, .sem-dados {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--cinza-quente);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ---------------------------- Aba "Dados" (tabelas de input) ---------------------------- */

.dados-intro {
  font-size: 13px;
  color: var(--texto-secundario);
  max-width: 900px;
  margin: 0 0 14px;
  line-height: 1.5;
}

.bloco-tabela { display: flex; flex-direction: column; }

.tabela-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tabela-controles input[type="search"] {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--linha);
  background: var(--creme);
  color: var(--texto);
  min-width: 180px;
}
.tabela-controles input[type="search"]:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

.contagem-tabela { font-weight: 400; color: var(--cinza-quente); font-size: 12px; }

.tabela-scroll { overflow-x: auto; border: 1px solid var(--linha); border-radius: 8px; }

table.tabela-dados {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  white-space: nowrap;
}
table.tabela-dados th, table.tabela-dados td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--linha);
}
table.tabela-dados thead th {
  background: var(--creme);
  color: var(--texto-secundario);
  font-weight: 700;
  cursor: pointer;
  position: sticky;
  top: 0;
  user-select: none;
}
table.tabela-dados thead th .seta { opacity: 0.5; margin-left: 3px; }
table.tabela-dados thead th.ordenada-por { color: var(--teal-escuro); }
table.tabela-dados thead th.ordenada-por .seta { opacity: 1; }
table.tabela-dados tbody tr:hover { background: var(--creme); }
table.tabela-dados tbody td { color: var(--texto); font-variant-numeric: tabular-nums; }

/* "Pill" de classificacao/status nas tabelas (Cadastro/Registro e
   detalhamento) - mesma cor ja usada nos graficos do dashboard para aquele
   valor (Calc.corStatus), pra classificacao ficar visualmente conectada em
   qualquer tela onde aparece (pedido do Leo). */
.celula-status { display: inline-flex; align-items: center; gap: 6px; }
.celula-status .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Coluna Acoes (Editar/Excluir) fixa na borda direita da area com scroll -
   antes ficava "escondida" la no fim de uma tabela larga, so aparecendo
   depois de rolar horizontalmente ate o fim. Pedido do Leo pra dar mais
   visibilidade/espaco pros botoes. */
table.tabela-dados th.col-acoes, table.tabela-dados td.col-acoes {
  position: sticky;
  right: 0;
  background: var(--card);
  box-shadow: -8px 0 8px -8px rgba(0,0,0,0.25);
  white-space: nowrap;
}
table.tabela-dados thead th.col-acoes { background: var(--creme); z-index: 2; cursor: default; }
table.tabela-dados tbody tr:hover td.col-acoes { background: var(--creme); }

/* Coluna de checkbox (selecao em bloco) - mesma ideia da col-acoes, so que
   fixa na borda ESQUERDA (pedido do Leo 02/10/2026: "Inclua caixas de
   selecao e a opcao de excluir dados em bloco... estou levando muito tempo
   para excluir informacoes do sistema"). */
table.tabela-dados th.col-selecao, table.tabela-dados td.col-selecao {
  position: sticky;
  left: 0;
  background: var(--card);
  box-shadow: 8px 0 8px -8px rgba(0,0,0,0.25);
  width: 1%;
  white-space: nowrap;
  cursor: default;
  text-align: center;
}
table.tabela-dados thead th.col-selecao { background: var(--creme); z-index: 2; }
table.tabela-dados tbody tr:hover td.col-selecao { background: var(--creme); }
table.tabela-dados td.col-selecao input[type="checkbox"],
table.tabela-dados th.col-selecao input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  vertical-align: middle;
}
table.tabela-dados td.col-selecao input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }

/* Barra de selecao em bloco - some quando nada esta marcado
   (barraSelecao.hidden, ver renderizarListaCadastro/atualizarBarraSelecao). */
.barra-selecao {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--creme);
  border: 1px solid var(--linha);
}
.barra-selecao-contagem { font-size: 12.5px; font-weight: 700; color: var(--texto); margin-right: 2px; }
.btn-excluir-selecionados { background: var(--status-critical) !important; }
.btn-excluir-selecionados:hover { filter: brightness(0.92); }

/* ---------------------------- Drill-down (clique nos graficos) ---------------------------- */

/* Painel de detalhamento (drill-down) - pedido do Leo: em vez do popover
   pequeno colado no ponto do clique, um painel bem maior deslizando da
   DIREITA pra esquerda, mesmo padrao visual/interacao do painel de
   Filtros (overlay escurecido atras, ESC ou clique fora fecha). */
.overlay-drilldown {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,10,10,0.45);
  z-index: 190;
}
.overlay-drilldown:not([hidden]) { display: block; }

.drilldown-painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 92vw);
  background: var(--card);
  box-shadow: -6px 0 28px rgba(0,0,0,0.22);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
  overflow: hidden;
}
.drilldown-painel.aberto { transform: translateX(0); }
/* Tela cheia (pedido do Leo 28/09/2026: "a area de visualizacao esta
   ruim... aparecer em tela cheia para minimizar o uso da barra ou do
   scroll do mouse") - alterna so a largura (mesma animacao/lado direito),
   pra tabelas/graficos largos precisarem de bem menos scroll horizontal. */
.drilldown-painel.tela-cheia { width: 100vw; }
.drilldown-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px clamp(14px, 3vw, 24px);
  border-bottom: 1px solid var(--linha);
  background: var(--creme);
  flex-shrink: 0;
}
.drilldown-cabecalho .drilldown-titulos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drilldown-cabecalho .titulo { font-size: 16px; font-weight: 700; color: var(--texto); }
.drilldown-cabecalho .sub { font-size: 12.5px; color: var(--cinza-quente); }
.drilldown-cabecalho .drilldown-acoes { flex: none; display: flex; align-items: center; gap: 2px; }
.drilldown-expandir,
.drilldown-fechar {
  flex: none;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--cinza-quente);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.drilldown-fechar { font-size: 20px; }
.drilldown-expandir:hover,
.drilldown-fechar:hover { background: var(--vinho-suave); color: #fff; }
.drilldown-corpo { overflow: auto; padding: 12px clamp(14px, 3vw, 24px) 20px; flex: 1; }
.drilldown-corpo table.tabela-dados { font-size: 13px; }
.drilldown-corpo table.tabela-dados th, .drilldown-corpo table.tabela-dados td { padding: 7px 10px; }
.drilldown-nota { font-size: 12px; color: var(--cinza-quente); padding: 10px 2px 2px; text-align: center; }
.drilldown-vazio { font-size: 13px; color: var(--cinza-quente); padding: 20px 4px; text-align: center; }
/* Em tela cheia, a tabela ganha mais respiro (menos "espremida") -
   aproveita a largura extra em vez de so esticar as colunas. */
.drilldown-painel.tela-cheia .drilldown-corpo table.tabela-dados { font-size: 14px; }
.drilldown-painel.tela-cheia .drilldown-corpo table.tabela-dados th,
.drilldown-painel.tela-cheia .drilldown-corpo table.tabela-dados td { padding: 9px 14px; }
@media (max-width: 480px) {
  .drilldown-painel { width: 100vw; }
  .drilldown-expandir { display: none; }
}

/* ------------------ Checklist de Inventario de Riscos ------------------ */
/* Painel de checklist (pedido do Leo 28/09: "abre uma tela com caixas de
   selecao... nao queria uma copia do outro sistema") - mesmo padrao visual
   de slide-in do painel de drill-down (.drilldown-painel), so que mais
   largo (tem selects inline por linha) e com um rodape fixo de acoes
   (Cancelar/Salvar), que o drill-down (so leitura) nao precisa. */
.checklist-painel { width: min(760px, 94vw); }
.checklist-corpo { padding-bottom: 8px; }
.checklist-aviso-matriz {
  font-size: 12px;
  color: var(--cinza-quente);
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.checklist-grupo-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--teal-escuro);
  margin: 18px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha);
}
.checklist-grupo-titulo:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.checklist-fator-linha {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--card);
  transition: border-color 0.15s, background 0.15s;
}
.checklist-fator-linha.checklist-fator-com-erro {
  border-color: var(--status-critical);
  background: color-mix(in srgb, var(--status-critical) 8%, var(--card));
}
.checklist-fator-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checklist-fator-cabecalho input[type="checkbox"] { margin-top: 2px; flex: none; }
.checklist-fator-detalhes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 12px;
  margin: 10px 0 2px 24px;
}
.checklist-fator-detalhes .campo-form label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--cinza-quente);
  font-weight: 700;
}
.checklist-fator-detalhes select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 7px;
  border-radius: 7px;
  border: 1px solid var(--linha);
  background: var(--card);
}
.checklist-badge-graduacao { font-weight: 700; font-size: 13.5px; }
.checklist-erro {
  padding: 0 clamp(14px, 3vw, 24px);
  flex-shrink: 0;
}
.checklist-rodape {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px clamp(14px, 3vw, 24px);
  border-top: 1px solid var(--linha);
  background: var(--creme);
  flex-shrink: 0;
}
.btn-acao-linha-checklist { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-acao-linha-checklist:hover { background: var(--teal-escuro); border-color: var(--teal-escuro); }
@media (max-width: 480px) {
  .checklist-painel { width: 100vw; }
}

/* Canvas de grafico clicavel - cursor muda via JS (onHover), mas o estado
   base ja sinaliza interatividade para quem passa o mouse rapido. */
canvas.grafico-interativo { cursor: default; }

.tabela-paginacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--cinza-quente);
}
.tabela-paginacao button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--vinho);
  background: transparent;
  border: 1px solid var(--vinho-suave);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.tabela-paginacao button:disabled { opacity: 0.35; cursor: not-allowed; }
.tabela-paginacao button:not(:disabled):hover { background: var(--vinho-suave-2); color: #fff; }

/* ---------------------------- Sub-menu Cadastro/Registro (pills) ---------------------------- */
/* Uma aba por entidade dentro de "Cadastro" (Cliente/Unidade/Setor/Cargo/
   Posto de Trabalho/Atividade) e dentro de "Registro" (Mapa Risco/Plano
   Acao/Absenteismo/Compativeis) - so um bloco fica visivel por vez, no
   mesmo padrao da aba Cadastro do Cockpit Comercial. */
.subnav-cadastro {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.subnav-cadastro-item {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 1px solid var(--linha);
  background: var(--card);
  color: var(--texto-secundario);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.subnav-cadastro-item .icone { font-size: 13px; line-height: 1; }
.subnav-cadastro-item:hover { border-color: var(--teal-escuro); color: var(--teal-escuro); }
.subnav-cadastro-item.ativa { background: var(--vinho); border-color: var(--vinho); color: #fff; }

/* ---------------------------- Cadastros (CRUD real) ---------------------------- */

.aviso-somente-leitura {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--status-warning);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
}

.bloco-cadastro { display: flex; flex-direction: column; }

.cadastro-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.btn-novo-registro, .btn-cad-primario, .btn-cad-secundario {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-novo-registro, .btn-cad-primario {
  background: var(--teal);
  color: #fff;
}
.btn-novo-registro:hover, .btn-cad-primario:hover { background: var(--teal-escuro); }
.btn-cad-secundario {
  background: transparent;
  color: var(--texto-secundario);
  border-color: var(--linha);
}
.btn-cad-secundario:hover { background: var(--creme); }
.btn-novo-registro:disabled, .btn-cad-primario:disabled {
  opacity: 0.45; cursor: not-allowed; background: var(--cinza-quente);
}

/* Botoes maiores e com contorno visivel (pedido do Leo - antes eram so
   texto sem fundo/borda, quase invisiveis, principalmente numa tabela
   larga com muita coluna). */
.btn-acao-linha {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 5px 12px;
  margin-right: 6px;
  cursor: pointer;
  background: var(--card);
  color: var(--teal-escuro);
}
.btn-acao-linha:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-acao-linha.excluir { color: var(--status-critical); border-color: var(--status-critical); }
.btn-acao-linha.excluir:hover { background: var(--status-critical); color: #fff; }
.btn-acao-linha:disabled { opacity: 0.35; cursor: not-allowed; background: var(--card); color: var(--texto-secundario); border-color: var(--linha); }
/* "Baixar/Imprimir" (Laudos ja gerados - ver campoArquivoPrincipal em
   CADASTROS_CONFIG) - preenchido, pra se destacar como a acao mais comum
   nessa tela (nao e so mais um botao igual Editar/Excluir). */
.btn-acao-linha-baixar { background: var(--teal-escuro); border-color: var(--teal-escuro); color: #fff; }
.btn-acao-linha-baixar:hover { background: var(--teal); border-color: var(--teal); }
.btn-acao-linha-baixar:disabled { background: var(--card); border-color: var(--linha); color: var(--texto-secundario); }

.form-cadastro {
  border: 1px solid var(--teal);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.form-cadastro .form-titulo { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; color: var(--teal-escuro); }

.form-cadastro-corpo { display: flex; flex-direction: column; }

.form-cadastro-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 12px;
}

/* Titulo de secao dentro do formulario (pedido do Leo: telas do pacote
   "Sistema de Gestao Integrada" organizadas em blocos, em vez de uma unica
   grade longa de campos) - so aparece quando o cadastro usa "secao" nos
   campos (ver montarFormulario). Sem borda/fundo proprios: so um titulo +
   um traco separando do bloco anterior, pra nao pesar visualmente. */
.form-cadastro-secao-titulo {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--teal-escuro);
  margin: 0 0 10px;
}
.form-cadastro-grade + .form-cadastro-secao-titulo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--linha);
}

/* Modo "abas" do formulario (pedido do Leo 28/09: "achei muito longa a
   tela, tem que ficar rolando a tela... faz varias abas") - mesmas secoes
   de sempre (comSecao), so que em vez de ficarem empilhadas viram um menu
   de abas clicaveis (ver montarFormulario/cfg.emAbas). Só entra quando o
   cadastro tem cfg.emAbas: true. */
.form-cadastro-abas-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
  order: -1;
}
.form-cadastro-aba-botao {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--card);
  color: var(--cinza-quente);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.form-cadastro-aba-botao:hover { border-color: var(--teal); color: var(--teal-escuro); }
.form-cadastro-aba-botao.ativa {
  background: var(--teal-escuro);
  border-color: var(--teal-escuro);
  color: #fff;
}

.campo-form { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo-form label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--cinza-quente);
  font-weight: 700;
}
.campo-form input, .campo-form select, .campo-form textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--linha);
  background: var(--card);
  color: var(--texto);
  width: 100%;
}
.campo-form textarea { resize: vertical; min-height: 60px; }
.campo-form input:focus, .campo-form select:focus, .campo-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.campo-form input:disabled, .campo-form select:disabled, .campo-form textarea:disabled { opacity: 0.6; background: var(--creme); }

/* Campos de texto longo (Jornada de Trabalho, Circunstancia Geradora etc.,
   ver docs/bi-ergonomia-manual.md) ocupam a grade inteira em vez de uma
   celula estreita - senao um textarea de 3 linhas fica ilegivel espremido
   em ~160px. */
.campo-form-largo { grid-column: 1 / -1; }

/* Upload de arquivo (Fotos da Avaliacao Ergonomica, Arquivo do Laudo - ver
   docs/bi-ergonomia-manual.md e construirCampoArquivo em js/app.js). Ocupa
   a grade inteira igual um textarea longo - uma lista de miniaturas/chips
   fica apertada demais numa celula estreita de ~160px. */
.campo-arquivo { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.campo-arquivo-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.campo-arquivo-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--creme);
  font-size: 12px;
  max-width: 220px;
}
.campo-arquivo-chip img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.campo-arquivo-chip a { color: var(--teal-escuro); text-decoration: none; word-break: break-all; }
.campo-arquivo-chip a:hover { text-decoration: underline; }
.campo-arquivo-remover {
  border: none;
  background: transparent;
  color: var(--cinza-quente);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.campo-arquivo-remover:hover { color: var(--vinho); }
.campo-arquivo-aviso { font-size: 12px; color: var(--cinza-quente); font-style: italic; }
.campo-arquivo input[type="file"] { font-size: 12.5px; }
/* Select de classificacao por conteudo (AET - ver js/app.js/construirCampoArquivo
   e docs/bi-ergonomia-manual.md, secao AET): o chip do arquivo cresce e quebra
   linha pra caber o select detectado/confirmado abaixo do nome do arquivo. */
.campo-arquivo-chip:has(.campo-arquivo-classificacao) { max-width: 260px; flex-wrap: wrap; }
.campo-arquivo-classificacao {
  flex: 1 1 100%;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--linha);
  background: #fff;
}

/* Seletor hierarquico de CID (Capitulo > Grupo > Categoria) - pedido do
   Leo pra achar o codigo certo sem rolar uma lista unica desordenada de
   CIDs. As 3 selects empilhadas herdam o estilo padrao de .campo-form
   select acima; so precisam do espacamento vertical entre elas. */
.campo-cid-cascata { display: flex; flex-direction: column; gap: 5px; }
.campo-form .valor-calculado {
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--creme);
  border: 1px dashed var(--linha);
}

.form-cadastro-acoes {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

.form-cadastro-erro {
  font-size: 12.5px;
  color: var(--status-critical);
  margin-top: 8px;
}

/* ---------------------------- Aviso de erro ---------------------------- */

.aviso-erro {
  margin: 16px clamp(14px, 3vw, 32px);
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--status-critical);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
}
.aviso-erro strong { display: block; margin-bottom: 4px; }

/* Aviso de convite (tela de Usuarios) - aparece depois de criar um usuario
   ou reenviar um convite, com o link de primeiro acesso pra repassar na mao
   se o e-mail automatico (Microsoft Graph) nao chegar - ver
   mostrarAvisoConvite em js/app.js. */
.aviso-convite {
  position: relative;
  margin: 0 0 16px;
  padding: 14px 44px 14px 16px;
  border-radius: 10px;
  background: var(--creme);
  border: 1px solid var(--linha);
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto);
}
.aviso-convite strong { display: block; margin-bottom: 6px; }
.aviso-convite a { color: var(--teal-escuro); word-break: break-all; }
.aviso-convite-erro { color: var(--status-critical); margin: 0 0 6px; }
.btn-fechar-aviso-convite {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-secundario);
  cursor: pointer;
  padding: 4px 6px;
}
.btn-fechar-aviso-convite:hover { color: var(--texto); }

/* Badge de Status da Conta (tela de Usuarios) - "Ativo" (ja concluiu o
   primeiro acesso) vs "Convite pendente" (ainda nao definiu senha). */
.badge-status-conta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-status-ativo { background: var(--status-good); color: #fff; }
.badge-status-convidado { background: var(--status-warning); color: #fff; }

footer.rodape {
  text-align: center;
  font-size: 11.5px;
  color: var(--cinza-quente);
  padding: 18px 16px 30px;
}

.link-referencia {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--teal-escuro);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}