/* Telas de decisão e o cadastro do quadro: Aprovações, Analisar registro,
   Ocorrências, Horas extras, Registros do contrato e Colaboradores.

   Revisão visual da operação de teste OPTESTE (27/09/2026, frente
   "decisões"). Aqui, e não em classe do Tailwind, pelo motivo de sempre: o
   CSS do Dash 4 entra sem camada e vence as utilidades em camada do
   Tailwind 4 da imagem, e classe nova só existe no ar depois de recompilar
   (ver assets/30-campo-data.css e assets/36-tabela.css). As regras levam mais
   de uma classe para vencer também o CDN do Tailwind 3 do desenvolvimento.

   Tudo aqui é escopado por uma classe ou um id das próprias telas: nada vale
   para as páginas do colaborador nem para os componentes gerais. */

/* --------------------------------------------------------------------------
   Ação da linha com texto (aprovar, rejeitar, recusar, devolver, nova senha,
   desligar). Era um ícone de 16 px, com o texto só no `title`, que o celular
   não mostra, e com os dois ícones colados. 44 px de altura no celular, 32
   do `sm` para cima.
   -------------------------------------------------------------------------- */
.acoes-da-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.acoes-da-linha .acao-linha,
.acao-linha.acao-linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 0.5rem;
  background: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  color: #404040;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.acao-linha.acao-linha:hover {
  background: #fafafa;
}

.acao-linha.acao-linha:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.acao-linha.acao-aprovar {
  border-color: #bbe5c8;
  color: var(--color-status-success-text, #15803d);
}

.acao-linha.acao-aprovar:hover {
  background: var(--color-status-success-bg, #e7f6ec);
}

.acao-linha.acao-recusar {
  border-color: #fbcaca;
  color: var(--color-status-danger-text, #dc2626);
}

.acao-linha.acao-recusar:hover {
  background: var(--color-status-danger-bg, #fee2e2);
}

@media (min-width: 640px) {
  .acoes-da-linha .acao-linha,
  .acao-linha.acao-linha {
    min-height: 2rem;
    padding: 0 0.625rem;
  }
}

/* No celular a linha da tabela vira cartão e a ação ocupa a largura toda:
   os botões dividem a linha, em vez de ficarem encolhidos à esquerda. A
   coluna da ação tem título no computador ("Ações", "Decisão"), e no cartão
   ela dispensa o rótulo ao lado, como a coluna sem título. */
@media (max-width: 639px) {
  .tabela-caixa .tabela > tbody > tr > td:has(> .acoes-da-linha),
  .tabela-caixa .tabela > tbody > tr > td:has(> .decisao-da-linha) {
    padding-left: 0;
  }
  .tabela-caixa .tabela > tbody > tr > td:has(> .acoes-da-linha)::before,
  .tabela-caixa .tabela > tbody > tr > td:has(> .decisao-da-linha)::before {
    content: none;
  }
  .tabela-caixa .acoes-da-linha > .acao-linha,
  .tabela-caixa .acoes-da-linha > * {
    flex: 1 1 0;
  }
  .tabela-caixa .acoes-da-linha > * > .acao-linha {
    width: 100%;
  }

  /* A linha de quem cadastrou o aplicativo autenticador, no quadro de
     Colaboradores, tem três ações (Nova senha, Redefinir verificação e
     Desligar). Em linha, o "Redefinir verificação" ficava mais largo e o
     Desligar descia sozinho (revisão de 04/10/2026). Meio a meio, o
     "Redefinir verificação" não cabe numa linha no celular e o ícone se
     separava do texto: as três empilhadas, na largura toda, cada uma com o
     nome inteiro. */
  #colab-miolo .tabela-caixa .acoes-da-linha:has(> :nth-child(3)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  #colab-miolo .tabela-caixa .acoes-da-linha:has(> :nth-child(3)) .acao-linha {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Horas extras: o motivo da recusa mora na linha do pedido, junto do Recusar.
   -------------------------------------------------------------------------- */
.decisao-da-linha {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 13rem;
}

.decisao-da-linha textarea {
  width: 100%;
  min-height: 2.75rem;
  resize: vertical;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.5rem 0.625rem;
  font-size: 1rem;
  line-height: 1.25rem;
  color: #262626;
}

@media (min-width: 640px) {
  .decisao-da-linha textarea {
    font-size: 0.8125rem;
  }
}

.decisao-da-linha textarea:focus {
  outline: none;
  border-color: var(--color-brand-600, #1f3b6e);
}

@media (max-width: 639px) {
  .decisao-da-linha {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Analisar registro: os seis indicadores do topo.
   Em seis colunas a 1366 px cada cartão tinha 165 px, e o número quebrava
   ("21 de / 31", "170h / 15m"). Três por linha no computador, dois no
   tablet e no celular, com o ícone escondido no celular para o número caber.
   -------------------------------------------------------------------------- */
.analisar-kpis {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/* O topo do texto alinha entre os cartões da mesma linha, e o número não
   quebra no meio. O último cartão é o do preposto: um nome, que quebra. */
.analisar-kpis > div {
  align-items: flex-start;
}

.analisar-kpis > div:not(:last-child) > div:last-child > p:nth-child(2) {
  white-space: nowrap;
}

.analisar-kpis > div:last-child > div:last-child > p:nth-child(2) {
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .analisar-kpis > div {
    padding: 0.75rem;
  }
  .analisar-kpis > div > div:first-child {
    display: none;
  }
  /* O nome do preposto em meia coluna: menor que os números, para não
     virar três linhas de letra grande. */
  .analisar-kpis > div:last-child > div:last-child > p:nth-child(2) {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

/* --------------------------------------------------------------------------
   Analisar registro: a Especificação Técnica recolhida.
   A lista de 50 a 70 funções vinha sempre aberta e empurrava o dia a dia
   1.800 px para baixo no computador (7.500 no celular).
   -------------------------------------------------------------------------- */
.et-recolhida > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-600, #1f3b6e);
}

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

.et-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;
}

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

/* --------------------------------------------------------------------------
   Analisar registro: as marcações do ponto em colunas.
   A lista é a de `ui.ponto.lista_de_batidas`; aqui só o alinhamento, dentro
   do dia do Analisar (`batidas-alinhadas`). "Entrada" é mais larga que
   "Saída", e a hora, as coordenadas e o "Ver no mapa" começavam em x
   diferentes; a marcação sem foto (o ajuste, a de mídia descartada) começava
   na margem, no lugar da selfie.
   -------------------------------------------------------------------------- */
.batidas-alinhadas .divide-y > .flex {
  font-variant-numeric: tabular-nums;
}

/* O selo do tipo é o 1º filho (sem foto) ou o 2º (com a foto antes). */
.batidas-alinhadas .divide-y > .flex > span.rounded-md:nth-child(-n + 2) {
  min-width: 3.75rem;
  text-align: center;
}

/* A hora logo depois do selo. */
.batidas-alinhadas .divide-y > .flex > span.rounded-md:nth-child(-n + 2) + span {
  min-width: 2.75rem;
}

/* Sem a foto, o selo começa onde começaria com ela: a miniatura (40 px) e o
   espaço entre as colunas (12 px). */
.batidas-alinhadas.com-foto .divide-y > .flex > span.rounded-md:first-child {
  margin-left: 3.25rem;
}

/* Sem permissão de ver a foto, a coluna da frase restrita tem 7 rem. */
.batidas-alinhadas.sem-foto .divide-y > .flex > span.rounded-md:first-child {
  margin-left: 7.75rem;
}

/* No celular: foto, selo e hora na primeira linha; coordenada, mapa e
   precisão na de baixo, iguais na entrada e na saída. Antes cada uma quebrava
   num ponto diferente, conforme a largura das peças. */
@media (max-width: 639px) {
  .batidas-alinhadas .divide-y > .flex::before {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }
  .batidas-alinhadas .divide-y > .flex > * {
    order: 2;
  }
  .batidas-alinhadas .divide-y > .flex > a:first-child,
  .batidas-alinhadas .divide-y > .flex > span.w-28:first-child,
  .batidas-alinhadas .divide-y > .flex > span.rounded-md:nth-child(-n + 2),
  .batidas-alinhadas .divide-y > .flex > span.rounded-md:nth-child(-n + 2) + span,
  .batidas-alinhadas .divide-y > .flex > span.rounded-md:nth-child(-n + 2) + span + span.rounded-md {
    order: 0;
  }
  .batidas-alinhadas.sem-foto .divide-y > .flex > span.rounded-md:first-child {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Colaboradores: as seções da página. Os atalhos de âncora do topo viraram
   a barra de abas (assets/42-abas.css, 01/10/2026); as âncoras continuam.
   -------------------------------------------------------------------------- */

/* A âncora da seção para com uma folga em cima, e não colada na borda. */
.secao-com-ancora {
  scroll-margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Colaboradores: quadro por linha de serviço, com o nome da linha.
   O gráfico mostrava só o código (1.3, 1.4) em letra de 10 px, e com uma
   pessoa só a barra ocupava a largura toda, num eixo de 0 a 1.
   -------------------------------------------------------------------------- */
.barras-das-linhas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Contrato com muitas linhas de serviço (o maior tem nove): no computador as
   barras vão em duas colunas, de cima para baixo e depois ao lado, na ordem
   do código. Numa coluna só, o resumo empurrava a barra de abas para o fim da
   primeira tela, e o conteúdo da aba para fora dela (revisão de 01/10/2026).
   `--fileiras` é a metade das linhas, que a tela calcula (`_quadro_por_linha`). */
@media (min-width: 1024px) {
  .barras-das-linhas.em-duas-colunas {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--fileiras, 1), auto);
    column-gap: 2rem;
    align-items: end;
  }
}

.barras-das-linhas .barra-rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: #404040;
}

.barras-das-linhas .barra-rotulo > span:last-child {
  flex-shrink: 0;
  font-weight: 700;
  color: #171717;
}

.barras-das-linhas .barra-trilho {
  margin-top: 0.25rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--color-neutral-100, #f5f5f5);
  overflow: hidden;
}

.barras-das-linhas .barra-cheia {
  height: 100%;
  border-radius: 9999px;
  background: var(--color-brand-600, #1f3b6e);
}

/* --------------------------------------------------------------------------
   Colaboradores: campos do cadastro.
   -------------------------------------------------------------------------- */

/* Quantidade da solicitação de posto: o número no meio, entre o menos e o
   mais, e não colado no menos. */
#sp-quantidade {
  text-align: center;
}

/* Dias presenciais: caixinhas de 13 px eram pequenas para o dedo. */
#aloc-dias .dash-options-list-option,
#cond-dias .dash-options-list-option {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-right: 0.25rem;
  cursor: pointer;
}

#aloc-dias input[type="checkbox"],
#cond-dias input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  accent-color: var(--color-brand-600, #1f3b6e);
}

@media (min-width: 640px) {
  #aloc-dias .dash-options-list-option,
  #cond-dias .dash-options-list-option {
    min-height: 2rem;
  }
  #aloc-dias input[type="checkbox"],
  #cond-dias input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
  }
}

/* A justificativa da solicitação de posto, em várias linhas. */
#sp-justificativa {
  min-height: 4.5rem;
}

/* O ofício escolhido na linha do pedido, antes do "Anexar ao pedido"
   (revisão de 28/09/2026). Na largura da célula, e não na do nome do
   arquivo: com o nome longo, o cartão do celular passava da tela e o botão
   de anexar ficava fora dela. Vazia, não soma o espaço da coluna. */
.oficio-a-confirmar {
  align-self: stretch;
  min-width: 0;
  max-width: 18rem;
}

.oficio-a-confirmar:empty {
  display: none;
}

/* O nome inteiro, quebrando onde precisar: é por ele que se confere. */
.oficio-a-confirmar .nome-do-oficio {
  overflow-wrap: anywhere;
}

/* No computador a tabela estreitava a coluna até o nome sair uma palavra por
   linha e os dois botões, um embaixo do outro. */
@media (min-width: 640px) {
  .oficio-a-confirmar {
    min-width: 15rem;
  }
}

/* --------------------------------------------------------------------------
   Colaboradores: a janela Responder e Concluir da solicitação de posto.
   No celular o rodapé quebrava em duas linhas desalinhadas (Cancelar sozinho
   em cima), e o corpo rolava sem sinal nenhum: a caixa do anexo ficava
   cortada pelo rodapé. A sombra presa ao pé do corpo diz que há mais
   embaixo, e some no fim da rolagem: quem a acende é a própria rolagem
   (`animation-timeline`), sem script. Sem rolagem, ou no navegador sem esse
   recurso, ela não aparece, como antes. E a área do anexo fica mais baixa no
   celular.
   -------------------------------------------------------------------------- */
#sp-janela .janela-corpo::after {
  content: "";
  position: sticky;
  bottom: -1rem;
  display: block;
  height: 1.5rem;
  margin: -1.5rem -1.25rem 0;
  background: linear-gradient(to top, rgba(12, 26, 51, 0.22), rgba(12, 26, 51, 0));
  pointer-events: none;
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  #sp-janela .janela-corpo::after {
    animation: sombra-de-quem-rola linear both;
    animation-timeline: scroll();
  }
}

@keyframes sombra-de-quem-rola {
  0%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 639px) {
  #sp-janela .janela-corpo #sp-janela-arquivo {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  #sp-janela .janela-painel > footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #sp-janela .janela-painel > footer > * {
    width: 100%;
  }
  #sp-janela .janela-painel > footer > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #sp-janela .janela-painel > footer button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Analisar registro: o rodapé da Assinatura no portal.
   -------------------------------------------------------------------------- */

/* A frase ("Assinado por ... em ...") com base própria: com a base zero do
   `flex-1`, ela nunca descia de linha e ficava espremida ao lado do botão
   no celular, uma palavra por linha. */
.assinatura-rodape > span {
  flex: 1 1 14rem;
}