/* ═══════════════════════════════════════════════════════════════════════════
   date-field.css: a caixa que o iPhone não consegue deformar.

   O <input type="date"> nativo do iOS nasce cinza, vazio sem nada escrito (sem
   placeholder, sem valor, sem ícone) e mais largo que o cartão: o controle mede
   `width:100%` como content-box e soma padding e borda por fora (foto real de iPhone,
   2026-10-03: passou ~27px CSS do cartão, e 24 de padding mais 4 de borda são 28).

   Aqui o layout é NOSSO: uma caixa de altura fixa, fundo branco, borda, ícone e o texto
   formatado (date-field.js o mantém em dia). No celular e no tablet (modo SOBREPOSTO,
   o padrão) o <input> de verdade fica por cima, transparente, com padding 0 e borda 0,
   então não sobra nada para o iOS somar por fora; o toque nele abre o seletor nativo,
   e o rótulo, o valor, `min`/`max` e os eventos continuam sendo dele. No desktop (modo
   NATIVO, `.date-field--native`, posto pelo date-field.js) o mesmo input aparece, com
   os segmentos e o calendário do navegador, dentro da mesma caixa. O embrulho CORTA qualquer excesso com `overflow:clip`
   (e `overflow:hidden` de reserva, para o iOS 15 e antes): `hidden` faz do embrulho um
   contêiner de ROLAGEM, e foco, `scrollIntoView` ou "buscar na página" empurravam o
   texto e o ícone para cima dentro da caixa (medido em Chromium e WebKit, e sob o
   modelo do iOS, controle maior que a caixa, o texto SAÍA dela). `clip` não rola.

   As cores NÃO são da marca: tudo passa por variáveis --df-* com um padrão neutro. A
   página mapeia para os tokens dela, por exemplo (CDS):
     #reserva-form { --df-border: var(--beige-dark); --df-focus: var(--ambar-500); }

   Variáveis: --df-height (44px) --df-pad-x (12px) --df-radius (12px) --df-bg --df-border
   --df-focus --df-error --df-text --df-placeholder --df-icon

   Marcação e comportamento: js/date-field.js. Há duas cópias idênticas (public/ e
   cds-public/); __tests__/dateField.markup.test.mjs falha se divergirem.
   ═══════════════════════════════════════════════════════════════════════════ */

.date-field {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--df-height, 44px);
  min-height: var(--df-height, 44px);
  padding: 0 var(--df-pad-x, 12px);
  background-color: var(--df-bg, #fff);
  border: 2px solid var(--df-border, #d1d5db);
  border-radius: var(--df-radius, 12px);
  color: var(--df-text, inherit);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  overflow: hidden; /* reserva: navegador sem `clip` (iOS 15 e antes) */
  overflow: clip;   /* não é contêiner de rolagem: nada move o texto dentro da caixa */
  -webkit-tap-highlight-color: transparent;
}

/* O foco é desenhado no embrulho, porque o input de verdade é transparente. O contorno
   transparente só aparece em cores forçadas (Alto Contraste do Windows), onde o sistema
   troca a cor da borda e o foco, sem ele, some. */
.date-field:focus-within {
  border-color: var(--df-focus, #2563eb);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Depois do foco, na ordem: inválido vence o foco (mesma especificidade). */
.date-field--invalid,
.date-field--invalid:focus-within { border-color: var(--df-error, #b42318); }

.date-field--disabled { opacity: .55; }

/* O texto formatado: não rouba o toque (pointer-events), não estoura (reticências). */
.date-field__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  pointer-events: none;
}
.date-field--empty .date-field__value { color: var(--df-placeholder, #9ca3af); }

.date-field__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  color: var(--df-icon, currentColor);
  pointer-events: none;
}

/* O input DE VERDADE: cobre o embrulho inteiro, transparente, sem aparência nativa, sem
   padding nem borda. Nunca `display:none`, `visibility:hidden`, `pointer-events:none`,
   tamanho zero nem fora da tela: ele tem que continuar na árvore de acessibilidade,
   focável e tocável. Dois seletores de classe (0,2,0) para vencer a rede de segurança
   `input[type="date"]` (0,1,1) das folhas de design. 16px: abaixo disso o Safari do
   iPhone dá zoom ao focar.
   `min-height:0` e `max-height:100%` são explícitos: o input é 100% do MIOLO do embrulho
   (44 menos 2x2 de borda, 40), e uma regra de página `input { min-height:44px }` o
   deixava 4px mais alto que o miolo. As regras de página e as redes de segurança
   excluem `.date-field__input` com `:not()`; este `min-height:0` é o cinto, o `:not()`
   é o suspensório (__tests__/dateField.cascade.test.mjs mede o valor efetivo). */
.date-field .date-field__input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
/* MODO NATIVO: desktop de verdade (o date-field.js põe a classe; sem o script, ou em
   celular e tablet, vale o modo sobreposto acima, o seguro). Aqui o input real é o que
   se VÊ: opacity 1, com os segmentos, a digitação e o botão de calendário do próprio
   navegador na ordem do idioma dele, dentro da MESMA caixa branca de 44px (cortada por
   ela: nada passa da caixa). Num desktop o input transparente deixava a digitação
   invisível e dependente do idioma (12102026 num Chrome em inglês guardava 2026-12-10
   enquanto a caixa dizia "Escolha a data"). O texto e o ícone do embrulho se escondem:
   o controle nativo já tem os dele. O padding é o da caixa (--df-pad-x) só aqui: não é
   iOS, e o input segue border-box com largura 100%, então não sobra nada para somar por
   fora. O mesmo elemento nos dois modos: nada é recriado e o foco não se perde. */
.date-field--native .date-field__input {
  opacity: 1;
  padding: 0 var(--df-pad-x, 12px);
  color: var(--df-text, inherit);
  cursor: auto;
}
.date-field--native .date-field__value,
.date-field--native .date-field__icon { visibility: hidden; }

.date-field--disabled .date-field__input { cursor: not-allowed; }

/* Se o date-field.js não rodar (falhou o download, erro de script), ou AINDA não rodou (o
   instante antes do primeiro pintar), o embrulho não tem `data-date-field-ready`. Aí o texto
   da caixa nunca seria atualizado e ficaria mostrando o placeholder por cima de uma data
   escolhida. Sem o "pronto", o input de verdade aparece (o controle nativo, cortado pela
   caixa de 44px), com o padding da caixa como no modo nativo (senão o texto cola na borda),
   e o texto E o ícone do embrulho se calam (o controle nativo tem os dele; senão são dois
   ícones de calendário e dois textos um por cima do outro). O campo continua funcionando,
   só sem o desenho. (0,3,0): vence a regra do input. */
.date-field:not([data-date-field-ready]) .date-field__input {
  opacity: 1;
  padding: 0 var(--df-pad-x, 12px);
}
.date-field:not([data-date-field-ready]) .date-field__value,
.date-field:not([data-date-field-ready]) .date-field__icon { visibility: hidden; }