/* Telas do administrativo de gestão: Painel, SMS, Documentos & Conformidade,
   Exportação BM e Relatórios (revisão da operação de teste OPTESTE,
   27/09/2026).

   CSS próprio, e não classe nova do Tailwind: o CSS do Dash 4 entra sem camada
   e vence as utilidades em camada do Tailwind 4, e classe nova só existe no ar
   depois de recompilar o CSS da imagem. Pelo mesmo motivo, estas regras (sem
   camada) vencem as utilidades dos componentes onde precisam mudar algo. */

/* ------------------------------------------------ Painel: os sete indicadores

   `dashboard._faixa_de_indicadores`. A 1366 px os sete ficavam numa linha,
   com 140 px cada: a seta do canto cobria o título e "A aprovar" quebrava.
   Aqui são quatro por linha no computador e dois no celular, e o último
   (Diárias) ocupa duas colunas: fecha a linha de baixo nos dois tamanhos
   (no computador, quatro em cima e 1 + 1 + 2 embaixo; no celular, três
   linhas de dois e Diárias na largura toda), sem cartão sozinho. */
.painel-kpis {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.painel-kpis > :last-child {
  grid-column: span 2 / span 2;
}

@media (min-width: 1024px) {
  .painel-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* O título no alto, em todos os cartões da linha: centrado na vertical, o
   cartão com rodapé de duas linhas descia o título dos vizinhos. */
.painel-kpis > * {
  align-items: flex-start;
}

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

/* No celular o ícone sobe e o texto ganha a largura do cartão: ao lado do
   ícone, sobravam 80 px e a seta cortava "Colaboradc", "Ocorrência:". */
@media (max-width: 639.98px) {
  .painel-kpis > :not(:last-child) {
    flex-direction: column;
    gap: 0.5rem;
  }

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

/* ------------------------------------------------ Painel: o nome do contrato

   O nome inteiro, cortado com reticências (uma linha no computador, duas no
   celular) e com o texto todo no `title`. Antes era cortado em 60 letras,
   no meio da palavra e sem reticências. */
.painel-contrato {
  flex: 1 1 300px;
  min-width: 0;
}

.painel-contrato-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .painel-contrato-nome {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
}

/* ------------------------------------------------ Roscas de conformidade

   Painel e SMS. O gráfico tem largura fixa e a legenda fica logo ao lado,
   os dois no centro do cartão: com o gráfico ocupando a largura que sobrava,
   a legenda ia para a borda direita, longe da rosca. Sem espaço, a legenda
   desce para baixo da rosca. */
.gestao-rosca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2rem;
}

.gestao-rosca-grafico {
  flex: 0 0 180px;
  width: 180px;
}

.gestao-rosca-ponto {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
}

/* ------------------------------------------------ "Não há nada" curto

   Exportação BM e Documentos & Conformidade: a frase de vazio numa faixa
   baixa, e não num cartão de 200 px com uma frase no meio. */
.gestao-vazio-curto {
  margin: 0;
  border-radius: 0.5rem;
  background-color: var(--color-neutral-50, #fafafa);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-neutral-500, #737373);
}

/* ------------------------------------------------ Exportação BM: o período

   A frase que diz por que a tela abriu num período que não é o do Painel,
   ao lado do seletor (embaixo dele no celular). */
.gestao-nota-do-periodo {
  flex: 1 1 260px;
  align-self: center;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--color-neutral-500, #737373);
}

/* ------------------------------------------------ Área de anexar

   SMS e Documentos & Conformidade. O ícone de envio é bloco (o Tailwind põe
   todo `svg` como bloco) e ficava na borda esquerda do texto centrado. */
.gestao-anexo svg {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------ Exportação BM: a caixinha

   "Conta como dia útil neste contrato" tinha 13 x 13 px, pequena para o dedo. */
#feriado-util input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

/* Os dois botões do cadastro de feriado na largura toda no celular: à direita,
   com larguras diferentes, um ficava embaixo do outro, desencontrados. */
@media (max-width: 639.98px) {
  #feriado-importar,
  #feriado-salvar {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------ Conformidade: o arquivo

   `documentos_conformidade._abrir`. O link não passa da célula. No celular a
   linha vira cartão e sobram uns 200 px ao lado do rótulo: com o "(2 KB)"
   que não quebra, o link pedia 230 px, e a tabela inteira rolava de lado
   dentro do cartão, cortando o tamanho e o nome do documento na borda. O
   nome do arquivo encolhe com reticências (o nome inteiro fica no `title`);
   o clipe e o tamanho ficam inteiros. */
.gestao-arquivo {
  max-width: 100%;
}

.gestao-arquivo > .gestao-arquivo-nome {
  min-width: 0;
}

.gestao-arquivo > svg,
.gestao-arquivo > .gestao-arquivo-tamanho {
  flex-shrink: 0;
}

/* ------------------------------------------------ Notas: auditorias de SMS e IDF

   As seções de 01/10/2026: Auditorias (SMS), IDF do período (Exportação BM) e
   IDF do contrato (Painel). Grades próprias, pelo motivo do topo do arquivo, e
   todas com `minmax(0, 1fr)`: nenhuma coluna empurra a seção para fora da
   largura do cartão, no computador nem no celular. */

/* A última nota e a média do ano: lado a lado no computador, uma por linha no celular. */
.gestao-notas {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .gestao-notas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dois campos na mesma linha, um curto e um longo (a data e o tipo; o auditor
   e a nota). Em duas colunas iguais o seletor cortava "Auditoria de SMS da
   Petrobras". No celular, um por linha. */
.gestao-curto-e-longo,
.gestao-longo-e-curto {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .gestao-curto-e-longo {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .gestao-longo-e-curto {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* A nota global à esquerda e os macrocritérios à direita; no celular, um embaixo do outro. */
.gestao-idf {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .gestao-idf {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

.gestao-idf-nota {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

/* A nota em destaque, e a frase que fica no lugar dos macrocritérios quando
   eles não foram informados. */
.gestao-idf-numero {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--color-neutral-900, #171717);
}

.gestao-idf-sem-macrocriterios {
  align-self: center;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--color-neutral-500, #737373);
}

/* Gestão, Prazo, Qualidade e SMS: quatro numa linha no computador, dois por
   linha no celular. Serve à nota lançada e aos campos do formulário. */
.gestao-macrocriterios {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .gestao-macrocriterios {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A série dos últimos períodos: o nome, a barra na proporção da nota máxima
   e a nota. No celular o nome e a nota ficam em cima e a barra embaixo, na
   largura toda. */
.gestao-idf-serie {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gestao-idf-serie > li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.gestao-idf-periodo {
  color: var(--color-neutral-600, #525252);
}

.gestao-idf-trilho {
  display: block;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--color-brand-50, #eef2f9);
}

.gestao-idf-barra {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-brand-600, #1f3b6e);
}

.gestao-idf-valor {
  text-align: right;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
}

/* O "Lançar" do período sem nota: no lugar da nota, com a cor de link. */
.gestao-idf-acao {
  text-align: right;
}

.gestao-idf-falta {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--color-neutral-500, #737373);
}

@media (max-width: 639.98px) {
  .gestao-idf-serie > li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .gestao-idf-serie > li > .gestao-idf-periodo {
    grid-column: 1;
    grid-row: 1;
  }

  .gestao-idf-serie > li > .gestao-idf-valor,
  .gestao-idf-serie > li > .gestao-idf-acao {
    grid-column: 2;
    grid-row: 1;
  }

  .gestao-idf-serie > li > .gestao-idf-trilho,
  .gestao-idf-serie > li > .gestao-idf-falta {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* A auditoria que está no formulário de correção (revisão de 01/10/2026): a
   linha inteira com o fundo de destaque. `:has()` porque a `tabela()` não dá
   classe à linha; a marca é o "Em correção" que fica no lugar das ações
   (`sms._em_correcao`). No computador a célula das ações fica presa à direita
   e tem fundo próprio (assets/36-tabela.css), e por isso entra aqui pelo nome. */
.tabela > tbody > tr:has(.gestao-em-correcao),
.tabela > tbody > tr:has(.gestao-em-correcao) > td,
.tabela.tabela-com-acao > tbody > tr:has(.gestao-em-correcao) > td:last-child,
.tabela.tabela-com-acao > tbody > tr:has(.gestao-em-correcao):hover > td:last-child {
  background-color: var(--color-brand-50, #eef2f9);
}

/* No celular a linha é um bloco: o fundo ganha margem por dentro e canto
   arredondado, para o texto não encostar na borda da cor. */
@media (max-width: 639px) {
  .tabela-caixa .tabela > tbody > tr:has(.gestao-em-correcao) {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    border-radius: 0.5rem;
  }
}

/* "Ver auditorias anteriores": as mais antigas ficam recolhidas, para a
   tabela não empurrar o formulário para o fim de uma tela sem fim. O mesmo
   desenho da Especificação Técnica recolhida (assets/56-decisoes.css). */
.gestao-recolhida > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand-600, #1f3b6e);
}

.gestao-recolhida > summary::-webkit-details-marker {
  display: none;
}

.gestao-recolhida > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease-out;
}

.gestao-recolhida[open] > summary::before {
  transform: rotate(45deg);
}