/* Painel da fiscalização (pedido de 30/09/2026): a primeira tela de quem
   acompanha o contrato pelo cliente.

   CSS próprio, e não classe nova do Tailwind, pelo mesmo motivo de
   54-gestao.css: classe nova só existe no ar depois de recompilar o CSS da
   imagem. O resto da tela usa as classes e os componentes que o portal já
   tinha (indicadores, seção, selo, rosca). */

/* ------------------------------------------------ Competência

   O seletor da competência, no Painel e em Registros do contrato: a largura
   que cabe a maior opção numa linha ("fevereiro/2026, de 26/01 a 25/02,
   exportado"), e nunca mais que a seção. Com largura mínima fixa
   (`min-w-[320px]`), a tela rolava de lado no celular de 360 px: 320 do
   seletor, 40 da seção e 32 da página, menos os 10 px da barra de rolagem. E
   a 320 px "setembro/2026, de 26/08 a 25/09, aberto" já saía cortada. */
.fisc-competencia {
  width: 380px;
  max-width: 100%;
}

/* ------------------------------------------------ Indicadores

   Os três, na largura toda da tela, como os do Painel do administrativo
   (`.painel-kpis`, em 54-gestao.css). Com a faixa comum eles paravam na
   metade da linha no monitor largo e eram três blocos empilhados no celular,
   que empurravam os pontos de atenção para a segunda tela. Aqui: no celular,
   dois lado a lado e o terceiro na largura toda; de 640 px para cima, três
   colunas. O título fica no alto em todos, e o ícone sobe para cima do texto
   enquanto a coluna é estreita. */
.fisc-indicadores {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fisc-indicadores > * {
  align-items: flex-start;
}

.fisc-indicadores > :last-child {
  grid-column: span 2 / span 2;
}

/* O texto para antes da seta do canto (24 px, a 12 px da borda). */
.fisc-indicadores > a > .min-w-0 {
  padding-right: 1.25rem;
}

@media (max-width: 639.98px) {
  .fisc-indicadores {
    gap: 0.75rem;
  }

  .fisc-indicadores > :not(:last-child) {
    flex-direction: column;
    gap: 0.5rem;
  }

  .fisc-indicadores > :not(:last-child) > .min-w-0 {
    padding-right: 0;
  }
}

@media (min-width: 640px) {
  .fisc-indicadores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fisc-indicadores > :last-child {
    grid-column: auto;
  }
}

@media (min-width: 640px) and (max-width: 1099.98px) {
  .fisc-indicadores > * {
    flex-direction: column;
    gap: 0.5rem;
  }

  .fisc-indicadores > a > .min-w-0 {
    padding-right: 0;
  }
}

/* ------------------------------------------------ Pontos de atenção

   A seção em destaque: a faixa na borda esquerda. Âmbar, a cor do alerta,
   quando há o que olhar; verde quando os quatro pontos estão zerados. */
.fisc-destaque {
  border-left: 4px solid var(--color-status-warning-text, #b45309);
}

.fisc-destaque.fisc-destaque-calmo {
  border-left-color: var(--color-status-success-text, #15803d);
}

/* O número de cada ponto de atenção, com o que ele conta ao lado
   ("3 no período", "1 de férias hoje"). Se não couber, a frase desce. */
.fisc-ponto-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  margin: 0.125rem 0 0.25rem;
}

.fisc-ponto-numero {
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--color-neutral-900, #171717);
}

/* Cada pessoa da lista de um ponto de atenção: o nome e o que aconteceu de um
   lado, o selo do outro. Sem largura para os dois, o selo desce para baixo do
   texto, alinhado com ele, e o nome fica com a linha inteira. */
.fisc-linha {
  display: flex;
  flex: 1 1 0%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.375rem 0.75rem;
  min-width: 0;
}

.fisc-linha-texto {
  flex: 1 1 12rem;
  min-width: 0;
}

/* As duas listas das férias, uma embaixo da outra, e o nome de cada uma. */
.fisc-sublistas > * + * {
  margin-top: 0.875rem;
}

.fisc-sublista-titulo {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--color-neutral-600, #525252);
}

/* "Ver mais": as pessoas além das cinco primeiras, no `<details>` do
   navegador. Abre e fecha sem callback. A seta do navegador sai, e entra a do
   portal, que vira quando a lista está aberta. */
.fisc-mais {
  margin-top: 0.5rem;
}

.fisc-mais > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--color-brand-600, #1f3b6e);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.fisc-mais > summary::-webkit-details-marker {
  display: none;
}

.fisc-mais > summary:hover {
  background-color: var(--color-neutral-100, #f5f5f5);
}

.fisc-mais > summary:focus-visible {
  outline: 2px solid var(--color-brand-600, #1f3b6e);
  outline-offset: 2px;
}

.fisc-mais > summary > svg {
  transition: transform 150ms ease;
}

.fisc-mais[open] > summary {
  margin-bottom: 0.5rem;
}

.fisc-mais[open] > summary > svg {
  transform: rotate(180deg);
}

.fisc-mais:not([open]) .fisc-mais-aberto,
.fisc-mais[open] .fisc-mais-fechado {
  display: none;
}

/* O bloco fica dentro da seção: no celular as duas margens internas somadas
   deixavam 220 px para o texto. */
@media (max-width: 639.98px) {
  .fisc-bloco {
    padding: 0.75rem;
  }
}

/* ------------------------------------------------ Documentação do quadro

   As três roscas. Uma por linha até 1200 px, com a rosca e a legenda lado a
   lado; três colunas daí para cima. Em três colunas num notebook de 1024 a
   1100 px cada bloco ficava com 215 a 240 px, e a legenda quebrava em duas
   linhas ("A vencer em / 30 dias"), com o número fora do lugar. */
.fisc-roscas {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
  .fisc-roscas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------ Gráfico de linhas

   A legenda de `componentes.linhas_no_tempo`: as séries lado a lado, com
   espaço entre elas, e uma embaixo da outra quando não cabem. */
.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}