/* ══════════════════════════════════════════════════════════════════════════
   ABAS DOS SETORES: Patrimonial, Saúde e Gestão Saúde (24/09/2026)

   Pedro: "sinto que tudo muito em cima do outro" e "design premium com animação
   premium". As três barras eram abas sublinhadas com 2 a 4px de folga, que quebravam
   em linhas coladas (o Patrimonial tem 18 abas). Viraram UM kit:
     - trilho em cartão, 6px de folga entre as abas e entre as linhas;
     - cada aba com o ícone numa pastilha da cor do módulo (a mesma cor do hero da tela);
     - seleção no azul da casa, igual às abas do Financeiro e do Calendário. O azul é a
       cor de seleção do painel (DESIGN.md), e branco sobre âmbar não passa de 4,5:1.
   E três movimentos, todos em pages/abas-setor.js:
     1. o realce da aba aberta DESLIZA da aba anterior até a nova;
     2. a lente acompanha o mouse entre as abas, como na barra de cima;
     3. a entrada em cascata roda só quando se ENTRA no setor, não a cada troca de aba.
   Realce e lente são UM elemento absoluto cada (translate e width), não lista.

   Folha separada do painel.css porque outras sessões mexem nele o tempo todo. Ela
   carrega DEPOIS dele e ganha por ordem ou por ter uma classe a mais.

   Desde 08/10/2026 as barras GRANDES dos três setores saíram (o menu de cima leva de um
   assunto a outro, com as cores destas abas: ver o fim da folha). O kit segue vestindo as
   sub-abas da Saúde e as abas da ficha do estipulante.
   ══════════════════════════════════════════════════════════════════════════ */

.abas-setor {
  --aba-alt: 34px;
  --aba-raio: 10px;
  --aba-txt: color-mix(in srgb, var(--text-muted) 72%, var(--text-main));
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 28px -22px rgba(15,23,42,.45);
}
body.dark .abas-setor { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 30px -20px rgba(0,0,0,.75); }

/* A aba. `border:0` apaga o sublinhado antigo; `animation:none` desliga a cascata
   antiga, que rodava a cada clique porque as telas redesenham a barra inteira. */
.abas-setor .aba {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--aba-alt); padding: 0 13px 0 5px; margin: 0;
  border: 0; border-radius: var(--aba-raio);
  background: transparent; box-shadow: none;
  color: var(--aba-txt);
  font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1;
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  animation: none; opacity: 1;
  transition: color .22s var(--pt-ease), background-color .22s var(--pt-ease), transform .18s var(--pt-ease);
}
.abas-setor .aba > svg:first-child {
  width: 14px; height: 14px; padding: 5px; box-sizing: content-box; flex: none;
  border-radius: 7px;
  color: var(--aba-cor, #1A4F9C);
  background: color-mix(in srgb, var(--aba-cor, #1A4F9C) 12%, transparent);
  opacity: 1;
  transition: color .22s var(--pt-ease), background-color .22s var(--pt-ease), transform .3s var(--pt-ease);
}
body.dark .abas-setor .aba > svg:first-child {
  color: color-mix(in srgb, var(--aba-cor, #60A5FA) 62%, #fff);
  background: color-mix(in srgb, var(--aba-cor, #60A5FA) 22%, transparent);
}

.abas-setor .aba:hover { color: var(--text-main); background: var(--bg-hover); }
.abas-setor.lente-viva .aba:hover { background: transparent; }     /* quem acende é a lente */
.abas-setor .aba:hover > svg:first-child {
  background: color-mix(in srgb, var(--aba-cor, #1A4F9C) 20%, transparent);
  transform: scale(1.06);
}
body.dark .abas-setor .aba:hover > svg:first-child { background: color-mix(in srgb, var(--aba-cor, #60A5FA) 32%, transparent); }
.abas-setor .aba:active { transform: scale(.97); }
.abas-setor .aba:focus-visible { outline: 2px solid #1A4F9C; outline-offset: 2px; }
body.dark .abas-setor .aba:focus-visible { outline-color: #60A5FA; }

/* Aberta. Sem o script (ou antes dele), o fundo azul é da própria aba; com o
   realce vivo, quem pinta é o realce, e a aba fica transparente por cima dele. */
.abas-setor .aba.active,
.abas-setor .aba.active:hover {
  color: #fff;
  background: linear-gradient(135deg, #2563EB 0%, #1A4F9C 100%);
  box-shadow: 0 8px 18px -10px rgba(26,79,156,.75);
}
.abas-setor.realce-vivo .aba.active,
.abas-setor.realce-vivo .aba.active:hover { background: transparent; box-shadow: none; }
.abas-setor .aba.active > svg:first-child,
body.dark .abas-setor .aba.active > svg:first-child { color: #fff; background: rgba(255,255,255,.18); transform: none; }
.abas-setor .aba.active .saude-tab-caret { color: #fff; stroke: #fff; opacity: .85; }
/* Enquanto o realce ainda está a caminho, a aba nova fica com a cor de sempre:
   texto branco sobre o trilho branco sumiria. */
.abas-setor.realce-vivo .aba.active.chegando { color: var(--text-main); }
.abas-setor.realce-vivo .aba.active.chegando > svg:first-child {
  color: var(--aba-cor, #1A4F9C);
  background: color-mix(in srgb, var(--aba-cor, #1A4F9C) 12%, transparent);
}
.abas-setor.realce-vivo .aba.active.chegando .saude-tab-caret { color: inherit; stroke: currentColor; }

/* Realce da aba aberta e lente do mouse: um elemento absoluto cada, atrás das abas. */
.abas-setor > .abas-realce,
.abas-setor > .abas-lente {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 0; height: var(--aba-alt);
  border-radius: var(--aba-raio);
  pointer-events: none;
  translate: 0 0;
  will-change: translate, width;
}
.abas-setor > .abas-realce {
  overflow: hidden;
  background: linear-gradient(135deg, #2563EB 0%, #1A4F9C 100%);
  box-shadow: 0 8px 18px -10px rgba(26,79,156,.75), inset 0 1px 0 rgba(255,255,255,.18);
  opacity: 0;
  transition: translate .42s var(--pt-ease), width .42s var(--pt-ease), height .42s var(--pt-ease), opacity .2s ease;
}
.abas-setor.realce-vivo > .abas-realce { opacity: 1; }
.abas-setor > .abas-lente {
  background: var(--bg-hover);
  opacity: 0;
  transition: translate .28s var(--pt-ease), width .28s var(--pt-ease), height .28s var(--pt-ease), opacity .16s ease;
}
.abas-setor.lente-acesa > .abas-lente { opacity: 1; }
.abas-setor > .sem-transicao { transition: none !important; }

/* Brilho que atravessa o realce quando ele chega na aba (a "animação premium" do
   DESIGN.md é cascata e brilho, não carrossel). */
.abas-setor > .abas-realce::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%);
  transform: translateX(-110%);
}
.abas-setor > .abas-realce.brilha::after { animation: abasBrilho .45s var(--pt-ease); }
@keyframes abasBrilho { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* Primeira vez que a barra aparece no setor: o realce surge no lugar (escala
   individual, que não mexe na posição do translate) e as abas entram em cascata,
   em passos de 30ms travados no 6º item. */
.abas-setor > .abas-realce.surge { animation: abasSurge .38s var(--pt-ease) backwards; }
@keyframes abasSurge { from { opacity: 0; scale: .9; } }
.abas-setor.abas-entrando .aba {
  animation: abasEntra .34s var(--pt-ease) backwards;
  animation-delay: calc(min(var(--i, 0), 5) * 30ms);
}
@keyframes abasEntra { from { opacity: 0; transform: translateY(6px); } }

/* ── Segundo nível (sub-abas da Saúde) ───────────────────────────────────────
   Mais baixo e mais calmo que a barra de cima: bandeja cinza e a aba aberta em
   cartão branco com texto azul. Dois realces azuis empilhados não diriam qual é o
   grupo e qual é o item. */
.abas-setor.abas-sub {
  --aba-alt: 30px;
  --aba-raio: 9px;
  gap: 5px; padding: 5px;
  background: var(--bg-page);
  box-shadow: none;
  animation: none;
}
.abas-setor.abas-sub.abas-entrando { animation: saudeSubIn .28s var(--pt-ease) backwards; }
.abas-setor.abas-sub .aba { font-size: 12px; padding: 0 12px 0 4px; gap: 7px; }
.abas-setor.abas-sub .aba > svg:first-child { width: 13px; height: 13px; padding: 4px; border-radius: 6px; }
.abas-setor.abas-sub .aba.active,
.abas-setor.abas-sub .aba.active:hover {
  color: #1A4F9C;
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px -6px rgba(15,23,42,.28);
}
body.dark .abas-setor.abas-sub .aba.active,
body.dark .abas-setor.abas-sub .aba.active:hover { color: #93C5FD; }
.abas-setor.abas-sub.realce-vivo .aba.active,
.abas-setor.abas-sub.realce-vivo .aba.active:hover { background: transparent; box-shadow: none; }
.abas-setor.abas-sub .aba.active > svg:first-child { color: #fff; background: var(--aba-cor, #1A4F9C); }
.abas-setor.abas-sub .aba.active .saude-tab-caret { color: inherit; stroke: currentColor; }
.abas-setor.abas-sub > .abas-realce {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px -6px rgba(15,23,42,.28);
}
body.dark .abas-setor.abas-sub > .abas-realce { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 14px -6px rgba(0,0,0,.6); }
.abas-setor.abas-sub > .abas-realce::after { background: linear-gradient(105deg, transparent 30%, rgba(37,99,235,.10) 50%, transparent 70%); }
.abas-setor.abas-sub > .abas-lente { background: color-mix(in srgb, var(--bg-card) 70%, transparent); }

/* Grade alinhada (24/09/2026, "consegue alinhar eles e formatar?"). Quem decide as colunas
   é o script, medindo a largura real das abas (`repeat(N, minmax(max-content, 1fr))`):
   as colunas esticam até a borda do cartão e cada aba ocupa a célula inteira, com ícone e
   nome alinhados à esquerda, então os ícones formam colunas retas. */
.abas-setor.abas-grade { display: grid; align-items: stretch; justify-content: stretch; }
.abas-setor.abas-grade .aba { justify-content: flex-start; min-width: 0; }
.abas-setor.abas-grade > .saude-tab-wrap { display: flex; min-width: 0; }
.abas-setor.abas-grade > .saude-tab-wrap > .aba { flex: 1 1 auto; }

/* Celular e janela estreita: uma faixa que rola de lado, como o painel.css já fazia
   (esta folha carrega depois dele e o `flex-wrap:wrap` de cima desfazia isso: no
   celular o Patrimonial virava 11 linhas de aba). A aba aberta vem para a vista pelo
   script. */
@media (max-width: 900px) {
  .abas-setor {
    flex-wrap: nowrap; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 5px; padding: 5px;
  }
  .abas-setor.abas-grade { display: flex; }        /* a grade é só de tela larga */
  .abas-setor::-webkit-scrollbar { height: 0; width: 0; }
  .abas-setor > * { flex-shrink: 0; white-space: nowrap; }
  .abas-setor .aba { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .abas-setor .aba,
  .abas-setor .aba > svg:first-child { transition: color .12s linear, background-color .12s linear; }
  .abas-setor .aba:active,
  .abas-setor .aba:hover > svg:first-child { transform: none; }
  .abas-setor.abas-entrando .aba,
  .abas-setor.abas-sub.abas-entrando,
  .abas-setor > .abas-realce.surge,
  .abas-setor > .abas-realce.brilha::after { animation: none; }
  .abas-setor > .abas-realce,
  .abas-setor > .abas-lente { transition: opacity .12s linear; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEM A BARRA GRANDE: o menu de cima com as cores das abas (08/10/2026)

   Rafaella: "seria melhor remover esse painel com as abas para clicar e seguir, e deixar
   apenas o do menu cascata em cima de tudo", mantendo "as cores dos ícones e as animações,
   pq cada um tem sua cor em específico". Pedro: "faça em todos, patrimonial e gestão".
   As barras grandes do Operacional, do Patrimonial e da Gestão Saúde saíram; as sub-abas
   (a segunda linha da Movimentação, de E-mails...) continuam.

   Cada item do menu desses setores ganha a pastilha da aba: o ícone na cor do módulo sobre
   o fundo da mesma cor a 12%, a mesma receita de `.abas-setor .aba > svg`. A cor vem em
   `--ic`, posta por pages/abas-setor.js a partir das listas de cada setor, com `.nav-cor`
   (item sem cor resolvida fica como era). O item da tela aberta fica marcado (`.aqui`, o
   papel do realce azul da barra) e os pais no caminho até ele, com a pastilha cheia
   (`.aqui-dentro`). Movimento: as pastilhas entram em cascata quando o menu abre, e no
   mouse a pastilha acende e cresce um pouco, como na barra. O ITEM não se mexe: a cascata
   dos itens do menu foi desligada de propósito (painel.css, "itens inclicáveis ao mover o
   mouse"), e aqui só a pastilha anima.

   No mesmo dia ("pode fazer sim"): os menus Gestão, Acompanhamento e Ferramentas ganharam
   as pastilhas, na cor da própria tela, e o item aceso deles (o `.active` que o navTo põe)
   ficou com a pastilha cheia como o `.aqui`. E o Patrimonial ganhou sub-abas para os grupos
   do menu (Cadastros, Cotações, Material de Apoio), no kit `abas-sub` (pages/patrimonial.js).
   ══════════════════════════════════════════════════════════════════════════ */

/* Agora a sub-aba é a primeira coisa da tela. A margem de -12px do painel.css a puxava
   para baixo da barra grande; sem ela, subia por cima do topo da página. */
.abas-setor.abas-sub[data-abas^="saude:sub:"] { margin-top: 0; }

.nav-dropdown .nav-item.nav-cor { gap: 9px; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; }
.nav-dropdown .nav-item.nav-cor > .icon {
  width: 24px; height: 24px; border-radius: 7px;
  background: color-mix(in srgb, var(--ic) 12%, transparent);
  transition: background-color .22s var(--pt-ease), transform .3s var(--pt-ease);
}
/* `:hover` do pai vale para os filhos do submenu dele (moram dentro do pai): sem a
   regra própria, cada ícone de dentro ficaria azul enquanto o mouse está no submenu. */
.nav-dropdown .nav-item.nav-cor > .icon .nav-svg,
.nav-dropdown .nav-item.nav-cor:hover > .icon .nav-svg { color: var(--ic); }
body.dark .nav-dropdown .nav-item.nav-cor > .icon { background: color-mix(in srgb, var(--ic) 22%, transparent); }
body.dark .nav-dropdown .nav-item.nav-cor > .icon .nav-svg,
body.dark .nav-dropdown .nav-item.nav-cor:hover > .icon .nav-svg { color: color-mix(in srgb, var(--ic) 62%, #fff); }

.nav-dropdown .nav-item.nav-cor:hover > .icon {
  background: color-mix(in srgb, var(--ic) 20%, transparent);
  transform: scale(1.06);
}
body.dark .nav-dropdown .nav-item.nav-cor:hover > .icon { background: color-mix(in srgb, var(--ic) 32%, transparent); }

/* Onde a pessoa está. A linha no azul de seleção da casa (o mesmo `.active` dos itens
   do menu Gestão) e a pastilha cheia, como a sub-aba aberta. */
.nav-dropdown .nav-item.nav-cor.aqui { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.nav-dropdown .nav-item.nav-cor.active { font-weight: 600; }   /* o fundo e a cor já vêm do painel.css */
/* No escuro o `--blue-light` vira azul-marinho e o `--blue` não muda: o texto sumia
   (#1A4F9C sobre #1e3a5f). O azul claro é o da sub-aba aberta no escuro. Vale também
   para o item aceso dos outros menus (Gestão, Ferramentas), que tinha o mesmo defeito. */
body.dark .nav-dropdown .nav-item.nav-cor.aqui,
body.dark .nav-dropdown .nav-item.active { color: #93C5FD; }
.nav-dropdown .nav-item.nav-cor.aqui > .icon,
.nav-dropdown .nav-item.nav-cor.active > .icon,
.nav-dropdown .nav-item.nav-cor.aqui-dentro > .icon,
body.dark .nav-dropdown .nav-item.nav-cor.aqui > .icon,
body.dark .nav-dropdown .nav-item.nav-cor.active > .icon,
body.dark .nav-dropdown .nav-item.nav-cor.aqui-dentro > .icon { background: var(--ic); }
.nav-dropdown .nav-item.nav-cor.aqui > .icon .nav-svg,
.nav-dropdown .nav-item.nav-cor.active > .icon .nav-svg,
.nav-dropdown .nav-item.nav-cor.aqui-dentro > .icon .nav-svg,
body.dark .nav-dropdown .nav-item.nav-cor.aqui > .icon .nav-svg,
body.dark .nav-dropdown .nav-item.nav-cor.active > .icon .nav-svg,
body.dark .nav-dropdown .nav-item.nav-cor.aqui-dentro > .icon .nav-svg { color: #fff; }

/* Entrada: as pastilhas do nível que acabou de abrir surgem em cascata, em passos de 30ms
   travados no 6º item (DESIGN.md). Só com mouse de verdade e fora da gaveta do celular. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  #navbar-nav .nav-group:hover > .nav-dropdown > .nav-item.nav-cor > .icon,
  #navbar-nav .nav-pai:hover > .nav-flyout > .nav-item.nav-cor > .icon,
  #navbar-nav .nav-pai.aberto > .nav-flyout > .nav-item.nav-cor > .icon {
    animation: navCorEntra .3s var(--pt-ease) backwards;
    animation-delay: calc(min(var(--i, 0), 5) * 30ms);
  }
}
@keyframes navCorEntra { from { opacity: 0; scale: .6; } }

/* Gaveta do celular: o menu é escuro (azul da barra), então a pastilha usa a mesma receita
   do tema escuro, e a linha da tela aberta acende como o item ativo da gaveta. */
@media (max-width: 900px) {
  #navbar-nav .nav-dropdown .nav-item.nav-cor { padding-top: 8px; padding-bottom: 8px; padding-left: 8px; }
  #navbar-nav .nav-dropdown .nav-item.nav-cor > .icon { background: color-mix(in srgb, var(--ic) 26%, transparent); }
  #navbar-nav .nav-dropdown .nav-item.nav-cor > .icon .nav-svg,
  #navbar-nav .nav-dropdown .nav-item.nav-cor:hover > .icon .nav-svg { color: color-mix(in srgb, var(--ic) 55%, #fff); }
  #navbar-nav .nav-dropdown .nav-item.nav-cor.aqui { background: rgba(255,255,255,.14); color: #fff; }
  #navbar-nav .nav-dropdown .nav-item.nav-cor.aqui > .icon,
  #navbar-nav .nav-dropdown .nav-item.nav-cor.active > .icon,
  #navbar-nav .nav-dropdown .nav-item.nav-cor.aqui-dentro > .icon { background: var(--ic); }
  #navbar-nav .nav-dropdown .nav-item.nav-cor.aqui > .icon .nav-svg,
  #navbar-nav .nav-dropdown .nav-item.nav-cor.active > .icon .nav-svg,
  #navbar-nav .nav-dropdown .nav-item.nav-cor.aqui-dentro > .icon .nav-svg { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown .nav-item.nav-cor > .icon { transition: background-color .12s linear; }
  .nav-dropdown .nav-item.nav-cor:hover > .icon { transform: none; }
  #navbar-nav .nav-dropdown .nav-item.nav-cor > .icon { animation: none !important; }
}