/* =========================================================================
 * reges-datepicker.css — folha do componente RegesDatePicker
 * -------------------------------------------------------------------------
 * Par de `assets/reges-datepicker.js`.
 *
 * ═════════════════════════════════════════════════════════════════════════
 *  Por que isto é ARQUIVO, e não <style> criado pelo JavaScript
 * ═════════════════════════════════════════════════════════════════════════
 * Nenhuma das quatro superfícies (site, blog, ERP, CRM) declara CSP hoje —
 * mas o site embute o tema Liquid Glass em BUILD TIME (`embutir-tema.mjs`),
 * não em runtime, e este componente segue a mesma convenção por
 * consistência, em vez de reintroduzir ~30 KB de CSS dentro de cada página a
 * cada carregamento.
 *
 * ═════════════════════════════════════════════════════════════════════════
 *  Paleta — reaproveita os tokens do núcleo Liquid Glass, não inventa cor
 * ═════════════════════════════════════════════════════════════════════════
 * Este arquivo NÃO declara nenhum valor de cor próprio: tudo sai de
 * `assets/liquid-glass.css` (--lg-acento, --lg-abismo, --lg-tinta, --lg-fonte
 * etc.), que já embute nas 10 páginas do site e é espelhado no ERP/CRM. O
 * gradiente dourado→caramelo pedido para o destaque do dia ativo É o mesmo
 * gradiente do brasão RJ (#F3E5AB → #CBA730 → #AA8A2A) já usado em
 * `.lg-botao-acento` — não existe token "caramelo" separado no projeto; as
 * 3 paradas do dourado já cobrem esse papel.
 *
 * Se `reges-datepicker.css` for carregado numa página SEM o tema Liquid
 * Glass embutido (não deveria acontecer, mas por segurança), os `var(...)`
 * abaixo têm um segundo argumento de fallback com os mesmos valores.
 * ========================================================================= */

.redp {
  position: relative;
  display: block;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────── o campo ── */

/* Dois níveis de classe (`.redp > .redp-campo`) de propósito: o invólucro
   herda as classes do `<input>` original — no ERP e no CRM o modal captura
   `.modal-body .input` para focar o primeiro campo do formulário. */
.redp > .redp-campo {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1px;
  width: 100%;
  padding: 0.85em 1.15em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--lg-seixo-1, 8px);
  color: var(--lg-tinta, #eef4ff);
  font-family: var(--lg-fonte, "Urbanist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  font-size: 0.95rem;
  font-weight: var(--lg-peso-medio, 500);
  font-variant-numeric: tabular-nums;
  background-color: rgba(14, 14, 14, 0.42);
  background-image: linear-gradient(180deg, rgba(14, 14, 14, 0.35), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20);
  cursor: text;
  transition: border-color 0.22s, box-shadow 0.22s;
}

.redp > .redp-campo:hover { border-color: rgba(203, 167, 48, 0.45); }

.redp-campo:focus-within {
  outline: none;
  border-color: var(--lg-acento, #CBA730);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(203, 167, 48, 0.22),
    0 0 24px -4px rgba(203, 167, 48, 0.45);
}

.redp[data-invalido="1"] > .redp-campo {
  border-color: rgba(255, 108, 108, 0.6);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(255, 108, 108, 0.12);
}

.redp[data-desativado="1"] { opacity: 0.55; pointer-events: none; }

/* Segmentos DD / MM / YYYY. Largura em `ch` sobre fonte tabular: dois dígitos
   ocupam sempre a mesma caixa, o campo não "respira" enquanto se digita.

   `box-sizing: content-box` é OBRIGATÓRIO: o ERP e o CRM declaram
   `*{box-sizing:border-box}`; com border-box a largura em `ch` passaria a
   incluir o recuo de cada lado e "DD" apareceria cortado como "DE" — sintoma
   que parece fonte errada, não caixa errada. */
.redp-seg {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: content-box;
  min-width: 0;
  padding: 2px 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0.5px;
  outline: none;
  transition: background-color 0.16s, color 0.16s;
}

.redp-seg::placeholder { color: var(--lg-tinta-fraca, rgba(210, 224, 250, 0.52)); letter-spacing: 0.5px; }
.redp-seg::-webkit-outer-spin-button,
.redp-seg::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Medidas com folga para os MARCADORES ("DD"/"YYYY" são letras proporcionais
   e ocupam mais que "00"/"0000" em fonte tabular) — não para os dígitos. */
.redp-seg-dia,
.redp-seg-mes,
.redp-seg-hora,
.redp-seg-minuto { width: 2.9ch; }
.redp-seg-ano { width: 5.1ch; }

.redp-divisor {
  flex: 0 0 1px;
  width: 1px;
  height: 16px;
  margin: 0 9px;
  background: rgba(203, 167, 48, 0.55);
}

.redp-seg:focus {
  background: rgba(203, 167, 48, 0.16);
  color: var(--lg-acento-claro, #F3E5AB);
}

.redp-seg::selection { background: rgba(203, 167, 48, 0.32); color: #F4F4F4; }
.redp-seg::-moz-selection { background: rgba(203, 167, 48, 0.32); color: #F4F4F4; }

.redp-sep {
  padding: 0 2px;
  color: var(--lg-tinta-fraca, rgba(210, 224, 250, 0.52));
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.redp-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lg-tinta-fraca, rgba(210, 224, 250, 0.52));
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

.redp-botao:hover,
.redp-botao:focus-visible {
  background: rgba(203, 167, 48, 0.22);
  color: var(--lg-acento-claro, #F3E5AB);
  outline: none;
}

.redp-botao svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* ─────────────────────────────────────────────────── o mini-calendário ──
   Frosted Glass de verdade: mesma receita de `.lg-vidro.lg-denso` do núcleo
   (desfoque + gradiente em camadas + luz de borda), em vez de uma cor chapada
   — é essa distinção que separa "vidro" de "retângulo escuro". */

.redp-pop {
  position: fixed;
  z-index: 2147482000;
  width: 292px;
  padding: 0;
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.22));
  border-radius: var(--lg-gota-1, 10px);
  background-color: var(--lg-abismo, #000000);
  background-image:
    var(--lg-vidro-denso,
      linear-gradient(155deg, rgba(14, 14, 14, 0.82), rgba(14, 14, 14, 0.86) 45%, rgba(14, 14, 14, 0.88)));
  -webkit-backdrop-filter: var(--lg-refracao-densa, blur(40px) saturate(200%) brightness(1.05));
  backdrop-filter: var(--lg-refracao-densa, blur(40px) saturate(200%) brightness(1.05));
  color: var(--lg-tinta, #eef4ff);
  font-family: var(--lg-fonte, "Urbanist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  font-size: 13px;
  overflow: hidden;
  box-shadow:
    var(--lg-sombra-3,
      0 4px 10px rgba(0, 0, 0, 0.38), 0 34px 90px -22px rgba(0, 0, 0, 0.68)),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  visibility: hidden;
}

.redp-pop[data-aberto="1"] { opacity: 1; transform: translateY(0); visibility: visible; }

.redp-pop[data-acima="1"] { transform: translateY(6px); }
.redp-pop[data-acima="1"][data-aberto="1"] { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .redp-pop,
  .redp > .redp-campo,
  .redp-seg,
  .redp-botao,
  .redp-nav,
  .redp-dia,
  .redp-acao { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .redp-pop {
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #0a0a0a;
  }
}

/* Cabeçalho do mês — gradiente dourado→caramelo do brasão, texto escuro por
   cima (mesma regra do resto do sistema: texto sobre dourado claro é
   sempre quase-preto, nunca branco — ver .lg-botao-acento). */
.redp-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px;
  background-image: linear-gradient(150deg,
    var(--lg-acento-claro, #F3E5AB),
    var(--lg-acento, #CBA730) 55%,
    var(--lg-acento-fundo, #AA8A2A));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.redp-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.10);
  color: #14110a;
  cursor: pointer;
  transition: background-color 0.18s, transform 0.18s;
}

.redp-nav:hover { background: rgba(0, 0, 0, 0.20); }
.redp-nav:active { transform: scale(0.92); }
.redp-nav:focus-visible { outline: 2px solid #14110a; outline-offset: 1px; }
.redp-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.redp-titulo {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  font-weight: var(--lg-peso-forte, 700);
  letter-spacing: var(--lg-tracking-titulo, 0.02em);
  color: #14110a;
}

.redp-titulo::first-letter { text-transform: uppercase; }

.redp-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 8px 8px 4px;
  border-bottom: 1px solid rgba(203, 167, 48, 0.35);
}

.redp-semana span {
  text-align: center;
  font-size: 10.5px;
  font-weight: var(--lg-peso-medio, 500);
  letter-spacing: var(--lg-tracking-amplo, 0.055em);
  color: var(--lg-tinta-fraca, rgba(210, 224, 250, 0.52));
  text-transform: uppercase;
}

.redp-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 6px 8px 8px;
}

.redp-dia {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--lg-tinta, #eef4ff);
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--lg-peso-normal, 400);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.redp-dia[data-fora="1"] { color: var(--lg-tinta-fraca, rgba(210, 224, 250, 0.52)); }
.redp-dia[disabled] { color: rgba(210, 224, 250, 0.25); cursor: not-allowed; }

/* Hoje: anel dourado claro — presença sem competir com o dia selecionado. */
.redp-dia[data-hoje="1"] { box-shadow: inset 0 0 0 1px var(--lg-acento-claro, #F3E5AB); }

.redp-dia:not([disabled]):hover,
.redp-dia:not([disabled]):focus-visible {
  background: rgba(203, 167, 48, 0.18);
  color: var(--lg-acento-claro, #F3E5AB);
  box-shadow: 0 0 0 1px rgba(203, 167, 48, 0.55), 0 0 12px rgba(203, 167, 48, 0.30);
  outline: none;
}

/* Selecionado: preenchido com o gradiente dourado→caramelo do brasão, texto
   quase-preto — mesma regra de contraste do resto do ecossistema. */
.redp-dia[data-sel="1"],
.redp-dia[data-sel="1"]:hover {
  background-image: linear-gradient(150deg,
    var(--lg-acento-claro, #F3E5AB),
    var(--lg-acento, #CBA730) 60%,
    var(--lg-acento-fundo, #AA8A2A));
  color: #14110a;
  font-weight: var(--lg-peso-forte, 700);
  box-shadow: 0 0 0 1px rgba(203, 167, 48, 0.85), 0 0 16px rgba(203, 167, 48, 0.45);
}

.redp-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(203, 167, 48, 0.35);
}

.redp-acao {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid rgba(203, 167, 48, 0.55);
  border-radius: 9px;
  background: transparent;
  color: var(--lg-tinta, #eef4ff);
  font: inherit;
  font-size: 12px;
  font-weight: var(--lg-peso-medio, 500);
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.redp-acao:hover,
.redp-acao:focus-visible {
  border-color: var(--lg-acento, #CBA730);
  color: var(--lg-acento-claro, #F3E5AB);
  box-shadow: 0 0 10px rgba(203, 167, 48, 0.22);
  outline: none;
}

.redp-erro {
  display: none;
  padding: 0 10px 9px;
  color: #ff6c6c;
  font-size: 11.5px;
  line-height: 1.45;
}

.redp-pop[data-erro="1"] .redp-erro { display: block; }

@media (max-width: 360px) {
  .redp-pop { width: 270px; }
  .redp-dia { height: 30px; }
}