/* Campos, seletores, caixinhas e botões com uma cara só.

   Revisão visual da operação de teste OPTESTE (28/09/2026), com o CSS da
   imagem publicada. O Dash 4 põe o próprio CSS dos componentes num <style>
   no começo da página, SEM camada; o Tailwind 4 da imagem mora em camada e
   perde para ele em tudo o que os dois dizem. Por isso a classe do token
   (`rounded-lg`, `border-border-subtle`, `text-sm`) não valia no campo nem no
   seletor, e cada um saía com o desenho do Dash:
   - o seletor com a borda azul-escura e o texto azulado do Dash, em 16 px, e
     o campo de texto em 14 px, com 20 px de recuo (os 12 do token mais os 8
     do Dash) contra os 12 do seletor;
   - campo e seletor com 34 px e cantos de 4 px, e os botões ao lado com 40
     e 42 px e cantos de 8 px: o topo não alinhava ("Limpar", "Reabrir
     período", "Adicionar" nos feriados);
   - o roxo do Dash (#7f4bc4) na borda do campo focado, na caixinha marcada
     e no rótulo dela, fora da paleta azul e dourado;
   - o campo de data em meia largura no celular com o fim de "dd/mm/aaaa"
     embaixo do ícone do calendário.

   Este arquivo vem depois do <style> do Dash (os assets entram no fim do
   <head>), e regra sem camada que vem depois vence a de mesmo peso. Onde o
   Dash é mais específico, a regra aqui repete as classes dele. Nada aqui
   depende de classe nova do Tailwind: vale no ar sem recompilar o CSS. */

/* ------------------------------------------------------------------ cores
   As variáveis do próprio Dash, trocadas pelas da paleta: a borda, o foco, a
   caixinha marcada e o texto de exemplo passam a ser os mesmos em todo campo. */
:root {
  --Dash-Fill-Interactive-Strong: #1f3b6e;
  --Dash-Fill-Interactive-Weak: #eef2f9;
  --Dash-Stroke-Strong: #d1d5db;
  --Dash-Stroke-Weak: #e5e7eb;
  --Dash-Text-Primary: #1f2937;
  --Dash-Text-Strong: #1f2937;
  --Dash-Text-Weak: #6b7280;
  --Dash-Text-Disabled: #9ca3af;
  --Dash-Fill-Primary-Hover: #f5f6f7;
  --Dash-Fill-Primary-Active: #eef2f9;
}

/* ------------------------------------------------ campo, seletor e texto
   Mesma borda, mesmo canto, mesma letra e mesmo recuo. */
div.dash-input-container,
button.dash-dropdown,
textarea.dash-textarea {
  border-radius: 0.5rem;
  border-color: var(--Dash-Stroke-Strong);
  background-color: #ffffff;
  color: #1f2937;
}

/* O recuo é o do <input>, e não o do invólucro: o toque em qualquer ponto
   da caixa cai no campo, e o texto começa a 12 px da borda, como no seletor. */
div.dash-input-container.px-3 {
  padding-left: 0;
  padding-right: 0;
}

div.dash-input-container.px-3 > .dash-input-element {
  padding: 0 0.75rem;
}

/* Exemplo que não cabe termina em reticências, e não cortado no meio da
   palavra ("Ex: vale-transp", "Motivo da recusa (obrigatório para re"). */
.dash-input-element {
  text-overflow: ellipsis;
}

.dash-input-element::placeholder,
textarea.dash-textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* O rótulo das telas já traz `mb-1`, e o CAMPO somava `mt-1`: o campo de
   texto ficava 4 px abaixo do seletor da mesma linha (Localidade x Início,
   Conselho x Nº do registro). O seletor não tem a margem, e o campo passa a
   não ter também quando o rótulo já dá o espaço. */
.mb-1 + div.dash-input-container.mt-1,
.mb-1 + textarea.mt-1 {
  margin-top: 0;
}

/* Foco: a borda na cor da marca, sem o contorno duplo do Dash. */
div.dash-input-container:focus-within,
button.dash-dropdown:focus,
textarea.dash-textarea:focus-within {
  border-color: #1f3b6e;
}

div.dash-input-container:has(:focus-visible),
button.dash-dropdown:focus,
textarea.dash-textarea:focus-visible {
  outline: 2px solid rgba(31, 59, 110, 0.18);
  outline-offset: 0;
}

/* Altura: 38 px do `sm` para cima, a mesma do botão (abaixo). No celular a
   regra de 44 px está em 10-marca.css. */
@media (min-width: 640px) {
  div.dash-input-container {
    height: 2.375rem;
  }

  button.dash-dropdown .dash-dropdown-trigger {
    min-height: calc(2.375rem - 2px);
  }

  div.dash-input-container,
  .dash-input-element,
  button.dash-dropdown,
  textarea.dash-textarea,
  .dash-dropdown-content {
    font-size: 0.875rem;
  }
}

/* O seletor do Dash traz um campo invisível, só para receber o foco, com
   215 px de largura fixa e posição absoluta. Num seletor estreito, na segunda
   coluna de uma grade no celular (Linha de serviço, em Solicitações de
   posto), ele passava 31 px da borda da tela, e a página inteira rolava de
   lado (revisão de 01/10/2026). Nunca mais largo que o seletor. */
.dash-dropdown-focus-target {
  max-width: 100%;
}

/* Número com os botões de menos e mais: o valor no meio dos dois. */
.dash-input-container:has(.dash-input-stepper) > .dash-input-element {
  text-align: center;
}

/* ---------------------------------------------------------- campo de data
   O <input type="date"> do navegador reserva 24 px antes do ícone do
   calendário, e o invólucro somava o recuo dele ao do Dash: em meia largura
   no celular (158 px) o fim de "dd/mm/aaaa" passava por baixo do ícone. */
div.dash-input-container.campo-data > .dash-input-element {
  padding-right: 0.5rem;
}

.campo-data input::-webkit-calendar-picker-indicator {
  margin-inline-start: 0.25rem;
  cursor: pointer;
}

/* Campo mais estreito que a data (o invólucro do Dash é um container): o
   ícone sai, a data aparece inteira, e o clique no campo abre o calendário
   (assets/30-campo-data.js). */
@container (max-width: 7.5rem) {
  .dash-input-element[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }

  .dash-input-element[type="date"] {
    padding-left: 0.5rem;
    padding-right: 0.25rem;
  }
}

/* De e até (`componentes.intervalo_datas`): as duas datas dividem a largura
   e nunca passam do pai. No celular o filtro ocupa a linha inteira, mesmo
   quando a tela pediu largura mínima para ele no computador (os 340 px do
   Período de Atividades passavam da borda interna do cartão, que tem 324). */
.intervalo-datas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 639px) {
  div:has(> .intervalo-datas) {
    min-width: 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------- caixinhas
   A caixinha marcada na cor da marca, e o rótulo não fica colorido depois do
   clique (o Dash o pintava enquanto a caixinha tinha o foco). A linha inteira
   é o alvo do toque. */
.dash-options-list-option {
  color: #374151;
  align-items: center;
}

.dash-options-list-option:not(:has(input[disabled])):focus-within {
  color: #374151;
}

.dash-options-list-option:not(:has(input[disabled])):hover {
  color: #1f3b6e;
}

.dash-options-list-option-checkbox {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Em linha (os dias presenciais): a tela já dá o espaço entre as opções, e os
   16 px do Dash somados a ele jogavam o "Sex" sozinho na linha de baixo. */
.dash-options-list-option.dash-checklist-inline,
.dash-options-list-option.dash-radioitems-inline {
  margin-right: 0;
}

@media (max-width: 639px) {
  .dash-options-list-option {
    min-height: 2.75rem;
    align-items: center;
  }
}

/* ------------------------------------------------------- área de envio
   `upload.area`: o ícone centrado acima do texto, e não à esquerda dele. */
.area-de-envio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  text-align: center;
}

.area-de-envio > svg {
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------------ botões
   `botao` está em todo botão dos tokens (BOTAO_*): 44 px no celular e 38 no
   computador, a altura do campo ao lado. */
.botao {
  min-height: 2.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

@media (min-width: 640px) {
  .botao {
    min-height: 2.375rem;
  }
}

/* A linha do botão que envia o formulário (`componentes.acoes_do_formulario`):
   à direita no computador, com a largura toda no celular. */
.acoes-do-formulario {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (max-width: 639px) {
  .acoes-do-formulario > .botao {
    flex: 1 1 100%;
  }
}

/* Desabilitado: um desenho só, legível. Era texto branco sobre cinza no botão
   cheio ("Exportar BM", "Registrar entrada") e contorno claro no secundário
   ("Baixar RAs aprovados em PDF"). */
.botao:disabled,
.botao-ponto:disabled {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  box-shadow: none;
  opacity: 1;
}

/* Aviso de status que ainda não disse nada não ocupa lugar: vazio, o
   "ponto-atuacao-status" somava o `gap` da linha e o seletor Atuação do dia
   terminava 12 px antes dos blocos de cima. */
span[id$="-status"]:empty {
  display: none;
}

/* O botão que vai dentro de uma caixa (o "Cancelar" que some fora da
   correção, o "Excluir" com a pergunta antes): no celular a caixa ocupa a
   linha e o botão, a caixa, como os botões soltos acima. Auditorias de SMS e
   IDF do período, 01/10/2026. */
@media (max-width: 639px) {
  .acoes-do-formulario > .botao-caixa {
    flex: 1 1 100%;
  }

  .acoes-do-formulario > .botao-caixa .botao {
    width: 100%;
  }
}