/* ============================================================
   Espelho de Ponto — Grupo Seday
   Paleta multi-marca (preto, azul Seday, vermelho Innomach,
   amarelo Avapex, cinza neutro) — mas o FORMATO (cantos quase
   retos, cards com borda superior de destaque, rótulos em
   caixa alta com tracking, tipografia condensada nos títulos/
   números) segue o padrão já estabelecido no site institucional
   da Avapex (projeto irmão), para os dois produtos lerem como
   a mesma casa visual.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap");

:root {
  /* Paleta de marca — extraída das logos oficiais em docs/LOGOS/ */
  --preto: #000000;
  --azul-seday: #245C95;
  --azul-seday-escuro: #163f69;
  --azul-seday-claro: #e8f0f8;
  --vermelho-innomach: #E30613;
  --amarelo-avapex: #FDCB2A;
  --amarelo-avapex-texto: #8a6a00; /* variante escurecida do amarelo p/ texto legível sobre fundo claro */
  --cinza: #4D4D4D;
  --cinza-claro: #8b8b8b;
  --cinza-borda: #e2e5eb;

  /* Superfície escura — tom "navy" (não preto puro) e cantos quase retos,
     mesmo vocabulário formal do site institucional (que é Avapex-only na
     cor); aqui a cor de acento continua sendo o azul Seday, não o amarelo. */
  --navy: #0d1526;
  --navy-claro: #16223b;

  --bg: #f4f6f9;
  --painel: #ffffff;
  --texto: var(--preto);
  --texto-suave: var(--cinza);

  --sev-alto: var(--vermelho-innomach);
  --sev-medio: var(--amarelo-avapex-texto);
  --sev-baixo: var(--cinza);
  --sev-alto-bg: #fdeaec;
  --sev-medio-bg: #fff6de;
  --sev-baixo-bg: #eef0f2;

  /* Cantos quase retos (rounded-sm/none), não os 10px/999px arredondados
     de um dashboard genérico — mesma linguagem "industrial" do site. */
  --raio: 3px;
  --raio-sm: 2px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .07);
  --sombra-media: 0 6px 20px rgba(0, 0, 0, .12);

  --fonte: "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-destaque: "Barlow Condensed", var(--fonte);

  /* Escala tipográfica — piso de .95rem (15,2px) pra qualquer texto que
     carregue informação real (rótulo, dado, botão, badge). Abaixo disso
     só metadado decorativo mesmo (--fs-2xs), tipo o timestamp da última
     execução na sidebar. Cada seletor abaixo referencia um degrau daqui
     em vez de um valor solto, pra crescer tudo junto da próxima vez. */
  --fs-2xs: .8rem;    /* metadado decorativo (nunca informação real) */
  --fs-xs: .95rem;    /* piso: badge, botão, cabeçalho de tabela, rótulo de filtro, paginação, chip */
  --fs-sm: 1rem;      /* legenda de KPI, tooltip, tabela aninhada, avisos */
  --fs-base: 1.05rem; /* corpo padrão: linha de tabela, input, select, autocomplete */
  --fs-md: 1.2rem;    /* título de gráfico */
  --fs-lg: 1.55rem;   /* subtítulo de seção */
  --fs-xl: 1.85rem;   /* título no topo da página */
  --fs-kpi: 2.6rem;   /* número grande do card de KPI */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--bg);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--fonte-destaque); font-weight: 800; letter-spacing: -.01em; }

/* ── Tela de login ────────────────────────────────────────────────────────── */

#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-claro) 55%, var(--azul-seday-escuro) 100%);
  padding: 1rem;
}

#login-box {
  background: var(--painel);
  padding: 2.5rem 2.5rem 2rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-media);
  width: 340px;
  text-align: center;
  border-top: 4px solid var(--azul-seday);
}

#login-box img.logo-login {
  height: 56px;
  margin-bottom: 1.2rem;
}

#login-box h1 { font-size: 1.7rem; margin: 0 0 .3rem; color: var(--preto); text-transform: uppercase; letter-spacing: .02em; }
#login-box p.sub { color: var(--texto-suave); font-size: var(--fs-base); margin: 0 0 1.6rem; font-family: var(--fonte); }
#login-box label { display: block; font-size: var(--fs-xs); font-weight: 700; margin: .8rem 0 .3rem; text-align: left; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; }
#login-box input {
  width: 100%; padding: .65rem .75rem; border: 1.5px solid var(--cinza-borda);
  border-radius: var(--raio-sm); font-size: 1.1rem; font-family: var(--fonte);
  transition: border-color .15s ease;
}
#login-box input:focus { outline: none; border-color: var(--azul-seday); }
#login-box button {
  margin-top: 1.4rem; width: 100%; padding: .85rem; border: none; border-radius: var(--raio-sm);
  background: var(--azul-seday); color: #fff; font-size: 1.05rem; font-weight: 800; cursor: pointer;
  font-family: var(--fonte); transition: background .15s ease; text-transform: uppercase; letter-spacing: .04em;
}
#login-box button:hover { background: var(--azul-seday-escuro); }
#login-erro { color: var(--vermelho-innomach); font-size: var(--fs-xs); margin-top: .7rem; min-height: 1em; font-weight: 700; }

/* ── Layout geral ─────────────────────────────────────────────────────────── */

#app { display: none; min-height: 100vh; }
#app.ativo { display: flex; }

#sidebar {
  width: 280px; flex-shrink: 0; background: var(--navy); color: #fff;
  padding: 0 0 1.2rem; display: flex; flex-direction: column;
  position: relative;
}

#sidebar-header {
  /* Fundo branco atrás da logo — a logo combinada do Grupo Seday (PNG) já
     vem com fundo branco embutido, então ela precisa de um respiro claro
     mesmo dentro da sidebar escura (mesma solução usada no dashboard
     Streamlit original para o mesmo problema). */
  padding: 1.1rem 1.2rem;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 4px solid var(--amarelo-avapex);
}
#sidebar-header img.logo-sidebar { max-height: 46px; max-width: 100%; object-fit: contain; }

#sidebar-body { padding: 1rem 1.2rem; overflow-y: auto; flex: 1; }

#sidebar .usuario-bloco {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); opacity: .9; margin-bottom: 1rem;
}
#sidebar button.sair {
  background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  padding: .35rem .75rem; border-radius: var(--raio-sm); cursor: pointer; font-size: var(--fs-xs);
  font-family: var(--fonte); transition: all .15s ease; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
#sidebar button.sair:hover { background: var(--vermelho-innomach); border-color: var(--vermelho-innomach); }

#sidebar .bloco { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1rem; margin-top: 1rem; }
#sidebar .bloco:first-child { border-top: none; padding-top: 0; margin-top: 0; }
#sidebar .bloco h3 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .6;
  margin: 0 0 .7rem; font-weight: 700; font-family: var(--fonte);
}
/* Único lugar que fica abaixo do piso de .85rem — timestamp/contador da
   última execução do ETL, o exemplo de "metadado decorativo" citado
   explicitamente como exceção (não é um dado que o usuário precisa ler
   linha a linha, é só um carimbo de confiança em segundo plano). */
#sidebar .exec-item { font-size: var(--fs-2xs); opacity: .85; margin-bottom: .55rem; line-height: 1.5; }
#sidebar .exec-item b { color: var(--amarelo-avapex); font-weight: 700; font-family: var(--fonte-destaque); letter-spacing: .02em; }

#sidebar label.campo-label { display: block; font-size: var(--fs-xs); margin: .7rem 0 .3rem; opacity: .85; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#sidebar input[type="date"], #sidebar input[type="text"] {
  width: 100%; padding: .5rem .6rem; border-radius: var(--raio-sm); border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: #fff; font-size: var(--fs-base); font-family: var(--fonte);
}
#sidebar input::placeholder { color: rgba(255, 255, 255, .4); }
#sidebar input:focus { outline: none; border-color: var(--azul-seday); background: rgba(255, 255, 255, .1); }

.periodo-atalhos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.periodo-atalhos button {
  flex: 1; min-width: 104px; padding: .4rem .5rem; border-radius: var(--raio-sm);
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: #fff;
  font-size: var(--fs-xs); cursor: pointer; font-family: var(--fonte); transition: background .15s ease;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
}
.periodo-atalhos button:hover { background: var(--azul-seday); border-color: var(--azul-seday); }

#sidebar button.aplicar {
  margin-top: 1rem; width: 100%; padding: .7rem; border: none; border-radius: var(--raio-sm);
  background: var(--amarelo-avapex); color: var(--preto); font-weight: 800; cursor: pointer;
  font-size: var(--fs-xs); font-family: var(--fonte); transition: filter .15s ease;
  text-transform: uppercase; letter-spacing: .04em;
}
#sidebar button.aplicar:hover { filter: brightness(.92); }

/* ── Multi-select customizado (Seção/Divisão/Ocorrência/Local/Escala/etc.) ── */

.ms {
  position: relative; font-size: var(--fs-base);
}
.ms-controle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .5rem .6rem; border-radius: var(--raio-sm); border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font-family: var(--fonte); font-size: var(--fs-base);
  text-align: left;
}
.ms-controle .ms-resumo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .95; }
.ms-controle .ms-seta { opacity: .6; flex-shrink: 0; font-size: .82rem; transition: transform .15s ease; }
.ms.aberto .ms-controle .ms-seta { transform: rotate(180deg); }
.ms-controle:hover { border-color: var(--azul-seday); }

.ms-painel {
  /* display:none aqui é o estado de repouso — só .ms.aberto .ms-painel
     (regra abaixo) vira display:flex. Antes havia um "display: flex"
     duplicado nesta mesma regra, que sobrescrevia o "none" e deixava
     todo painel sempre visível, aberto ou não (por isso Severidade/
     Regra/Categoria apareciam todas abertas ao mesmo tempo). */
  display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: max(100%, 220px);
  background: #fff; color: var(--texto); border-radius: var(--raio-sm); box-shadow: var(--sombra-media);
  border: 1px solid var(--cinza-borda); max-height: 280px; overflow: hidden; flex-direction: column;
}
.ms.aberto .ms-painel { display: flex; }
.ms-busca { padding: .5rem; border-bottom: 1px solid var(--cinza-borda); }
.ms-busca input {
  width: 100%; padding: .45rem .55rem; border: 1px solid var(--cinza-borda); border-radius: var(--raio-sm);
  font-size: var(--fs-base); font-family: var(--fonte);
}
.ms-busca input:focus { outline: none; border-color: var(--azul-seday); }
.ms-lista { overflow-y: auto; padding: .3rem 0; }
.ms-opcao {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; cursor: pointer; font-size: var(--fs-base);
}
.ms-opcao:hover { background: var(--azul-seday-claro); }
.ms-opcao input { accent-color: var(--azul-seday); margin: 0; }
.ms-opcao .ponto-cor { width: 9px; height: 9px; border-radius: var(--raio-sm); flex-shrink: 0; }
.ms-vazio { padding: .6rem .7rem; color: var(--texto-suave); font-size: var(--fs-xs); }
.ms-rodape { display: flex; justify-content: space-between; padding: .4rem .6rem; border-top: 1px solid var(--cinza-borda); }
.ms-rodape button {
  background: none; border: none; color: var(--azul-seday); font-size: var(--fs-xs); cursor: pointer; font-family: var(--fonte);
  font-weight: 700; padding: .25rem .3rem; text-transform: uppercase; letter-spacing: .03em;
}

/* Autocomplete de funcionário */
.ac { position: relative; }
.ac-lista {
  display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; color: var(--texto); border-radius: var(--raio-sm); box-shadow: var(--sombra-media);
  border: 1px solid var(--cinza-borda); max-height: 220px; overflow-y: auto;
}
.ac.aberto .ac-lista { display: block; }
.ac-item { padding: .5rem .7rem; font-size: var(--fs-base); cursor: pointer; }
.ac-item:hover, .ac-item.destaque { background: var(--azul-seday-claro); }
.ac-vazio { padding: .5rem .7rem; font-size: var(--fs-xs); color: var(--texto-suave); }

/* ── Conteúdo principal ───────────────────────────────────────────────────── */

#main { flex: 1; padding: 1.6rem 2.2rem 3rem; overflow-x: hidden; min-width: 0; }

#topo-main {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; gap: 1rem;
  flex-wrap: wrap;
}
#topo-main h1 { margin: 0; font-size: var(--fs-xl); color: var(--preto); display: flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .01em; }
#topo-main img.logo-topo { height: 34px; }
#btn-menu-mobile {
  display: none; background: var(--preto); color: #fff; border: none; border-radius: var(--raio-sm);
  padding: .55rem .75rem; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

.tabs { display: flex; gap: .2rem; border-bottom: 2px solid var(--cinza-borda); margin-bottom: 1.4rem; flex-wrap: wrap; }
.tab-btn {
  padding: .7rem 1.2rem; border: none; background: none; cursor: pointer;
  font-size: var(--fs-base); font-weight: 700; color: var(--texto-suave); border-bottom: 3px solid transparent;
  margin-bottom: -2px; font-family: var(--fonte); transition: color .15s ease;
  text-transform: uppercase; letter-spacing: .03em;
}
.tab-btn.ativa { color: var(--azul-seday); border-bottom-color: var(--azul-seday); }
.tab-btn:hover:not(.ativa) { color: var(--preto); }

.tab-conteudo { display: none; }
.tab-conteudo.ativa { display: block; animation: aparecer .18s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Cards de KPI — hierarquia visual forte ──────────────────────────────── */
/* Mesmo padrão de card do site institucional (MVV.jsx): fundo claro, borda
   fina neutra, borda SUPERIOR de 4px na cor de destaque, cantos quase retos,
   sombra sutil que cresce no hover — só a cor de acento muda por contexto
   (azul Seday por padrão, vermelho/amarelo/cinza quando é severidade). */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card {
  background: var(--painel); border-radius: var(--raio); padding: 1.25rem 1.4rem;
  border: 1px solid var(--cinza-borda); border-top: 4px solid var(--azul-seday);
  box-shadow: var(--sombra); transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
.card .valor {
  font-family: var(--fonte-destaque); font-size: var(--fs-kpi); font-weight: 800; color: var(--azul-seday);
  line-height: 1.05; letter-spacing: -.01em;
}
.card .valor.sev-ALTO { color: var(--sev-alto); }
.card .valor.sev-MEDIO { color: var(--sev-medio); }
.card .valor.sev-BAIXO { color: var(--sev-baixo); }
.card.sev-ALTO { border-top-color: var(--sev-alto); }
.card.sev-MEDIO { border-top-color: var(--sev-medio); }
.card.sev-BAIXO { border-top-color: var(--sev-baixo); }
.card .rotulo {
  /* Sem uppercase: "FUNCIONÁRIOS AUDITADOS" cansa de ler; em texto normal
     continua claramente um rótulo por causa do peso/cor, sem o esforço
     extra de decodificar caixa alta numa frase de 2-3 palavras. */
  font-size: var(--fs-sm); color: var(--texto-suave); margin-top: .45rem; font-weight: 700;
  display: flex; align-items: center; gap: .35rem;
}
/* Texto solto como item flex direto não quebra linha certo em alguns
   navegadores (ignora min-width:0, empurra o card pra fora) — o span
   próprio com min-width:0 deixa ele encolher/quebrar como texto normal,
   reservando espaço fixo só pro ícone ao lado. Usado no rótulo do card
   de KPI e no título de gráfico (tituloGrafico() em app.js). */
.rotulo-texto { min-width: 0; overflow-wrap: break-word; }

/* ── Gráficos ─────────────────────────────────────────────────────────────── */

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; margin-bottom: 1.5rem; }
.grafico-box {
  background: var(--painel); border-radius: var(--raio); padding: 1.1rem;
  border: 1px solid var(--cinza-borda); box-shadow: var(--sombra); transition: box-shadow .15s ease;
}
.grafico-box:hover { box-shadow: var(--sombra-media); }
.grafico-box h4 {
  margin: 0 0 .7rem; font-size: var(--fs-md); font-weight: 700; color: var(--preto); font-family: var(--fonte-destaque);
  display: flex; align-items: center; gap: .4rem; letter-spacing: 0;
}
/* Altura do gráfico é fixada aqui, no WRAPPER do canvas (não no canvas
   em si) — o valor vem de _alturaGrafico() em app.js (blocoGrafico()),
   inline via style="height:...". Varia com o número de categorias: uma
   barra horizontal com 20 itens precisa de bem mais que 260px pra não
   espremer o eixo. Precisa ser o wrapper (position:relative + altura
   própria) e não o canvas porque Chart.js com responsive:true mede o
   PAI do canvas a cada resize — se o canvas tenta se auto-dimensionar
   sem um pai de altura fixa, vira um loop (cresce a cada redraw). */
.grafico-canvas-wrap { position: relative; width: 100%; }
.grafico-box.full { grid-column: 1 / -1; }

/* Alternativa a um gráfico de barra única/dupla (ver blocoGrafico() em
   app.js) — com 1-2 categorias, uma barra ocupando a largura toda do
   card não comunica mais do que um par "rótulo — valor" direto. */
.lista-compacta { display: flex; flex-direction: column; gap: .5rem; }
.lista-compacta-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .65rem .85rem; background: var(--bg); border-radius: var(--raio-sm); font-size: var(--fs-sm);
}
.lista-compacta-item span { color: var(--texto-suave); font-weight: 500; }
.lista-compacta-item b { font-family: var(--fonte-destaque); font-size: 1.4rem; color: var(--azul-seday); font-weight: 800; }

.info-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 50%; cursor: pointer;
  color: #fff; background: var(--azul-seday); font-size: .85rem; font-style: normal;
  position: relative; flex-shrink: 0;
}
.info-icone::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: 145%;
  background: var(--preto); color: #fff; padding: .75rem .95rem; border-radius: var(--raio-sm);
  font-size: var(--fs-sm); line-height: 1.55; width: 300px; max-width: 80vw; white-space: normal; font-family: var(--fonte);
  box-shadow: var(--sombra-media); opacity: 0; visibility: hidden;
  transition: opacity .12s ease; z-index: 30; text-align: left; font-weight: 400;
  pointer-events: none;
}
/* :hover funciona em desktop; .aberta é o fallback pra toque/clique (ver
   listener delegado em app.js) — sem ele, celular/tablet nunca veem a
   explicação, já que não existe :hover em touchscreen. */
.info-icone:hover::after, .info-icone.aberta::after { opacity: 1; visibility: visible; }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */

.tabela-wrap {
  max-height: 440px; overflow: auto; border-radius: var(--raio); box-shadow: var(--sombra);
  margin-bottom: .9rem; background: var(--painel); border: 1px solid var(--cinza-borda);
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); font-family: var(--fonte); }
thead th {
  background: var(--navy); color: #fff; text-align: left; padding: .65rem .75rem;
  position: sticky; top: 0; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
}
tbody td { padding: .55rem .75rem; border-bottom: 1px solid var(--cinza-borda); }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: var(--azul-seday-claro); }

/* Linhas expansíveis (drill-down) — clique numa linha "pai" revela uma
   sub-tabela com o detalhe, sem sair da tabela principal nem recarregar. */
tr.linha-expansivel { cursor: pointer; }
tr.linha-expansivel:hover { background: var(--azul-seday-claro); }
tr.linha-expansivel .seta-expand { display: inline-block; width: 1em; color: var(--azul-seday); font-weight: 700; }
tr.linha-detalhe { display: none; background: #fafbfc; }
tr.linha-detalhe.aberta { display: table-row; }
tr.linha-detalhe td { padding: .85rem 1rem 1rem 2.2rem; border-bottom: 2px solid var(--cinza-borda); }
table.subtabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); box-shadow: none; }
table.subtabela thead th {
  background: var(--cinza-borda); color: var(--texto); position: static; font-size: var(--fs-xs);
}
table.subtabela tbody tr:hover { background: transparent; }

.badge-sev {
  display: inline-block; padding: .25rem .55rem; border-radius: var(--raio-sm); font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; border: 1px solid currentColor;
}
.badge-sev.sev-ALTO { background: var(--sev-alto-bg); color: var(--sev-alto); }
.badge-sev.sev-MEDIO { background: var(--sev-medio-bg); color: var(--sev-medio); }
.badge-sev.sev-BAIXO { background: var(--sev-baixo-bg); color: var(--sev-baixo); }

.paginacao { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-xs); margin-bottom: 1.4rem; color: var(--texto-suave); }
.paginacao button {
  padding: .4rem .85rem; border: 1px solid var(--cinza-borda); background: #fff; border-radius: var(--raio-sm);
  cursor: pointer; font-family: var(--fonte); font-weight: 700; color: var(--preto); transition: all .12s ease;
}
.paginacao button:hover:not(:disabled) { border-color: var(--azul-seday); color: var(--azul-seday); }
.paginacao button:disabled { opacity: .35; cursor: default; }

/* ── Filtros locais de aba (Auditoria de Folha / Escalas / filtros de alerta) ── */

.filtro-mini {
  background: var(--painel); border-radius: var(--raio); padding: 1.1rem; margin-bottom: 1.3rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; box-shadow: var(--sombra);
  border: 1px solid var(--cinza-borda); border-top: 4px solid var(--azul-seday);
}
.filtro-mini .campo { display: flex; flex-direction: column; gap: .35rem; font-size: var(--fs-base); min-width: 195px; }
/* Sem uppercase aqui: rótulos como "Competência início"/"Buscar
   funcionário" têm 2-3 palavras — em caixa alta cansam mais do que ajudam. */
.filtro-mini .campo label { font-weight: 700; color: var(--cinza); font-size: var(--fs-xs); }
.filtro-mini input[type="text"], .filtro-mini input[type="date"] {
  padding: .5rem .6rem; border: 1px solid var(--cinza-borda); border-radius: var(--raio-sm); font-size: var(--fs-base);
  font-family: var(--fonte);
}
.filtro-mini input:focus { outline: none; border-color: var(--azul-seday); }
.filtro-mini .ms-controle, .filtro-mini .ms-painel { color: var(--texto); }
.filtro-mini .ms-controle {
  background: #fff; border: 1px solid var(--cinza-borda); color: var(--texto);
}
.filtro-mini .ms-controle:hover { border-color: var(--azul-seday); }
.filtro-mini button.aplicar-mini {
  padding: .6rem 1.25rem; border: none; border-radius: var(--raio-sm); background: var(--azul-seday); color: #fff;
  font-weight: 800; cursor: pointer; font-size: var(--fs-sm); height: fit-content; font-family: var(--fonte);
  text-transform: uppercase; letter-spacing: .04em;
}
.filtro-mini button.aplicar-mini:hover { background: var(--azul-seday-escuro); }

/* ── Avisos / estados vazios / carregando ─────────────────────────────────── */

.aviso {
  background: #fff8e8; border: 1px solid var(--amarelo-avapex); border-radius: var(--raio); padding: 1.1rem;
  font-size: var(--fs-base); color: #5c4700; font-family: var(--fonte);
}
.aviso code { background: #00000012; padding: .2rem .5rem; border-radius: var(--raio-sm); font-size: var(--fs-sm); }
.sucesso {
  background: #eaf7ee; border: 1px solid #8ecf9f; border-radius: var(--raio); padding: 1.1rem;
  font-size: var(--fs-base); color: #1a5c30; font-weight: 500; font-family: var(--fonte);
}

.skeleton-linha {
  height: 14px; border-radius: var(--raio-sm); margin-bottom: .5rem;
  background: linear-gradient(90deg, #eceef1 25%, #f5f6f8 37%, #eceef1 63%);
  background-size: 400% 100%; animation: brilho 1.3s ease infinite;
}
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-card { height: 78px; border-radius: var(--raio); background: var(--painel); box-shadow: var(--sombra); padding: 1rem; border: 1px solid var(--cinza-borda); }
.skeleton-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.skeleton-grafico { height: 260px; border-radius: var(--raio); background: var(--painel); box-shadow: var(--sombra); border: 1px solid var(--cinza-borda); }

/* ── Exportação ───────────────────────────────────────────────────────────── */

.exportar { margin: .3rem 0 1.4rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.exportar select {
  padding: .5rem .6rem; border-radius: var(--raio-sm); border: 1px solid var(--cinza-borda); font-size: var(--fs-base);
  font-family: var(--fonte);
}
.exportar button {
  padding: .55rem 1.05rem; border-radius: var(--raio-sm); border: none; font-size: var(--fs-sm);
  background: var(--preto); color: #fff; cursor: pointer; font-weight: 700; font-family: var(--fonte);
  transition: background .15s ease; text-transform: uppercase; letter-spacing: .03em;
}
.exportar button:hover { background: var(--azul-seday); }
.exportar label.chk { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--texto-suave); }

.texto-apoio { font-size: var(--fs-base); color: var(--texto-suave); margin: -.6rem 0 1rem; max-width: 70ch; }

h3.subtitulo {
  font-size: var(--fs-lg); margin: 1.8rem 0 .8rem; color: var(--preto); font-weight: 800;
  font-family: var(--fonte-destaque); padding-bottom: .4rem; border-bottom: 3px solid var(--amarelo-avapex);
  display: inline-block;
}

details.regras {
  background: var(--painel); border-radius: var(--raio); padding: .8rem 1.1rem; margin-bottom: 1.1rem;
  font-size: var(--fs-base); box-shadow: var(--sombra); border: 1px solid var(--cinza-borda);
}
details.regras summary { cursor: pointer; font-weight: 700; color: var(--preto); font-family: var(--fonte); }
details.regras table { margin-top: .7rem; }

/* ── Responsividade ───────────────────────────────────────────────────────── */

@media (max-width: 920px) {
  #btn-menu-mobile { display: inline-flex; }
  #app { flex-direction: column; }
  #sidebar {
    width: 100%; position: fixed; inset: 0 0 0 0; z-index: 100; transform: translateX(-100%);
    transition: transform .2s ease; overflow-y: auto;
  }
  #sidebar.aberta { transform: translateX(0); }
  #main { padding: 1.1rem 1rem 3rem; }
  #topo-main h1 { font-size: 1.5rem; }
  .card .valor { font-size: 2.2rem; }
}