/* Abas dentro da tela (barra de navegação) e seletor segmentado.
   `c.abas`, `c.painel_da_aba` e `c.segmentado` em src/portal/ui/componentes.py;
   o clique, o teclado e o endereço estão em 42-abas.js.

   Pedido do Riquelme em 01/10/2026, para a tela Colaboradores: no lugar da
   fileira de atalhos de âncora, uma barra em que cada aba mostra uma parte
   da tela.

   Em CSS próprio, e não em classe do Tailwind, como a janela e a tabela: o
   que esconde os painéis não pode depender do CSS gerado. */

/* --------------------------------------------------------------------------
   A barra. No celular as quatro abas dividem a largura; se não couberem, a
   barra desliza de lado, e a página não.
   -------------------------------------------------------------------------- */
.abas {
  display: flex;
  gap: 0.125rem;
  max-width: 100%;
  padding: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Quando 42-abas.js rola até a barra, ela para com uma folga em cima. */
  scroll-margin-top: 1rem;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 0.75rem;
  background: var(--color-surface-card, #ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.abas::-webkit-scrollbar {
  display: none;
}

.aba {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: #525252;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.aba:hover {
  background: var(--color-brand-50, #eef2f9);
  color: var(--color-brand-700, #182f58);
}

/* A aba aberta, como o item aberto do menu lateral. */
.aba[aria-selected="true"],
.aba[aria-selected="true"]:hover {
  background: var(--color-brand-600, #1f3b6e);
  color: #ffffff;
}

.aba:focus-visible,
.segmento:focus-visible {
  outline: 2px solid var(--color-brand-600, #1f3b6e);
  outline-offset: 2px;
}

/* O ícone só do `sm` para cima: no celular as quatro abas cabem sem ele. */
.aba .aba-icone {
  display: none;
  flex-shrink: 0;
}

/* Quantos esperam ação, na própria aba. */
.aba .aba-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--color-status-warning-bg, #fef3c7);
  color: var(--color-status-warning-text, #b45309);
  font-size: 0.6875rem;
  font-weight: 700;
}

.aba[aria-selected="true"] .aba-contagem {
  background: #ffffff;
  color: var(--color-brand-600, #1f3b6e);
}

@media (min-width: 640px) {
  .abas {
    gap: 0.25rem;
  }

  .aba {
    flex: 0 0 auto;
    gap: 0.5rem;
    min-width: 8.5rem;
    min-height: 2.5rem;
    padding: 0 1.125rem;
    font-size: 0.875rem;
  }

  .aba .aba-icone {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Os painéis. Todos ficam no DOM, e a casca da tela diz qual aparece: os
   callbacks do Dash precisam dos componentes de todas as abas, e o atributo
   da casca fica fora do miolo que eles redesenham.

   Uma regra por valor: o CSS não compara dois atributos. Aba ou modo novo
   entra aqui também (tests/test_colaboradores_em_abas.py confere).
   -------------------------------------------------------------------------- */
.painel-da-aba > * + * {
  margin-top: 1.25rem;
}

[data-abas][data-aba="quadro"] .painel-da-aba:not([data-painel-aba="quadro"]),
[data-abas][data-aba="alocar"] .painel-da-aba:not([data-painel-aba="alocar"]),
[data-abas][data-aba="dados"] .painel-da-aba:not([data-painel-aba="dados"]),
[data-abas][data-aba="solicitacoes"] .painel-da-aba:not([data-painel-aba="solicitacoes"]),
[data-abas][data-modo="um"] .painel-do-modo:not([data-painel-modo="um"]),
[data-abas][data-modo="lote"] .painel-do-modo:not([data-painel-modo="lote"]) {
  display: none;
}

/* --------------------------------------------------------------------------
   Seletor segmentado: duas ou três opções do mesmo formulário, lado a lado.
   Mais leve que a barra de abas, que é a navegação da tela.

   O recuo de 4 px é o do contorno de foco (2 px de espessura e 2 de folga):
   com 3, o grupo, que corta o que passa dele, comia o contorno em cima,
   embaixo e na borda de fora (revisão de 01/10/2026).
   -------------------------------------------------------------------------- */
.segmentado {
  display: flex;
  gap: 0.125rem;
  max-width: 100%;
  padding: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 0.625rem;
  background: #f5f5f5;
}

.segmentado::-webkit-scrollbar {
  display: none;
}

/* 44 px no celular, como os botões, os campos e as abas ao lado
   (12-formulario.css); 34 do `sm` para cima. */
.segmento {
  flex: 1 0 auto;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0.4375rem;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #525252;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.segmento:hover {
  color: var(--color-brand-700, #182f58);
}

.segmento[aria-checked="true"] {
  background: #ffffff;
  color: var(--color-brand-600, #1f3b6e);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

@media (min-width: 640px) {
  .segmentado {
    display: inline-flex;
  }

  .segmento {
    min-height: 2.125rem;
  }
}