/* =========================================================================
 * data-nascimento.css — campo de data de nascimento e o seu aviso de erro
 * Clínica Dr. Reges Jr. · pacote datas-nascimento (26/10/2026)
 * -------------------------------------------------------------------------
 * Vale só para o campo marcado com `data-redp-nascimento` (ou
 * `data-redp-aviso`): o RegesDatePicker 1.2.0 põe `data-com-aviso="1"` no
 * invólucro `.redp` e cria o `<span class="redp-aviso">` logo abaixo dos
 * segmentos. Os outros campos de data do ERP (Financeiro, Agenda, RH) não
 * mudam.
 *
 * Identidade dos campos de dado estrutural, a mesma de acesso-seguro.css e
 * sessao-unica.css: preto absoluto, dourado #FFD700 e caramelo #D4A373, vidro
 * jateado PLANO (translucidez + desfoque, sem gradiente de brilho), retângulo
 * fino de cantos 8–12 px, sans-serif do sistema. Quiche Sans não entra.
 *
 * Fora de /css/ de propósito (como /visual-crm/): a folha já traz o escuro E
 * o claro, e o gerador da camada clara (que só lê /css/) não deve tocá-la.
 * Carregada DEPOIS de visual-crm.css, a última folha da página — por isso os
 * seletores levam `html … body`, o mesmo peso que aquela folha usa.
 *
 * Contraste (WCAG AA pede 4,5:1 para texto de 12,5 px), medido em 26/10/2026:
 * no escuro, #D4A373 sobre o vidro do modal dá 7,3:1. No claro, #FFD700 sobre
 * branco dá 1,4:1 — ilegível — e por isso o claro troca o texto para o
 * caramelo escuro #7A4A14 (6,8:1 sobre o vidro claro, 6,6:1 no balão #F1F1F1)
 * e deixa o dourado só na borda.
 * ========================================================================= */

.redp[data-com-aviso="1"] {
  --dn-dourado: #FFD700;
  --dn-caramelo: #D4A373;
  --dn-texto: #D4A373;
  --dn-icone-fundo: #000000;
  --dn-vidro: rgba(255, 255, 255, 0.045);
  --dn-vidro-borda: rgba(255, 215, 0, 0.30);
  --dn-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html.tema-claro .redp[data-com-aviso="1"] {
  --dn-texto: #7A4A14;
  --dn-icone-fundo: #FFFFFF;
  --dn-vidro: rgba(212, 163, 115, 0.12);
  --dn-vidro-borda: rgba(154, 107, 47, 0.55);
}

/* Segmentos em sans do sistema, algarismos de largura fixa: DD/MM/AAAA não
   "respira" enquanto se digita. */
html body .redp[data-com-aviso="1"] .redp-seg,
html body .redp[data-com-aviso="1"] .redp-sep {
  font-family: var(--dn-fonte);
  font-variant-numeric: tabular-nums;
}

/* Campo inválido: contorno caramelo, anel dourado discreto. O ícone e a frase
   do aviso dizem "erro" sem depender da cor. */
html body .redp[data-com-aviso="1"][data-invalido="1"] > .redp-campo {
  border-color: var(--dn-caramelo);
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(212, 163, 115, 0.22);
}
html body .redp[data-com-aviso="1"][data-invalido="1"] > .redp-campo:focus-within {
  border-color: var(--dn-dourado);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.28);
}
html.tema-claro body .redp[data-com-aviso="1"][data-invalido="1"] > .redp-campo {
  border-color: #9A6B2F;
  box-shadow: 0 0 0 2px rgba(212, 163, 115, 0.30);
}
html.tema-claro body .redp[data-com-aviso="1"][data-invalido="1"] > .redp-campo:focus-within {
  border-color: #7A4A14;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.45);
}

/* O aviso: retângulo fino de vidro jateado plano, logo abaixo do campo. */
html body .redp[data-com-aviso="1"] > .redp-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--dn-vidro-borda);
  border-radius: 10px;
  background: var(--dn-vidro);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  color: var(--dn-texto);
  font-family: var(--dn-fonte);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}
html body .redp[data-com-aviso="1"] > .redp-aviso::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--dn-dourado);
  border-radius: 4px;
  background: var(--dn-icone-fundo);
  color: var(--dn-dourado);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
html.tema-claro body .redp[data-com-aviso="1"] > .redp-aviso::before {
  border-color: #9A6B2F;
  color: #7A4A14;
}
html body .redp[data-com-aviso="1"] > .redp-aviso[hidden] { display: none; }

/* O balão do calendário é um só por página, filho do <body> — fora do
   `.redp`. Quando o dono é um campo de nascimento, o RegesDatePicker marca
   `data-nascimento="1"` nele, e a frase de erro sai do vermelho genérico para
   a mesma paleta do aviso. No claro o balão é #F1F1F1: caramelo escuro. */
html body .redp-pop[data-nascimento="1"] .redp-erro {
  color: #D4A373;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 500;
}
html.tema-claro body .redp-pop[data-nascimento="1"] .redp-erro { color: #7A4A14; }

/* Valor antigo ilegível no cadastro (ficha e formulário de Pacientes). */
.dn-legado {
  display: block;
  margin-top: 6px;
  color: #D4A373;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.dn-legado code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #FFD700; }
html.tema-claro .dn-legado { color: #7A4A14; }
html.tema-claro .dn-legado code { color: #5C3A0E; }

@media (prefers-reduced-transparency: reduce) {
  html body .redp[data-com-aviso="1"] > .redp-aviso { -webkit-backdrop-filter: none; backdrop-filter: none; }
}