/* ============================================================
   CRM Advanced — campos que se escolhem (calendário, parcelas, hora)
   ------------------------------------------------------------
   Estilo dos componentes de `ds-campos.js`. Tudo sob .ds-advanced
   ou dentro da caixa flutuante `.adv-pop`, que nasce no <body>.
   ============================================================ */

/* ── campo com botão à direita ───────────────────────────── */
.adv-campo-com-botao { position: relative; display: block; width: 100%; }
.ds-advanced .adv-campo-com-botao > input { width: 100%; padding-right: 40px !important; cursor: pointer; }
.adv-campo-botao {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ds-texto-meta); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
}
.adv-campo-botao:hover { background: var(--ds-brand-50); color: var(--ds-brand-700); }
.adv-campo-botao:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 1px; }

/* ── caixa flutuante ─────────────────────────────────────── */
.adv-pop {
  position: absolute; z-index: 120; background: var(--card, #fff);
  border: 1px solid var(--borda, #e2e8f0); border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(16, 26, 43, .28), 0 2px 6px rgba(16, 26, 43, .08);
  padding: 12px; font-family: var(--ds-fonte); color: var(--texto, #0f172a);
  animation: adv-pop-entra .12s ease-out;
}
@keyframes adv-pop-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .adv-pop { animation: none; } }

/* ── calendário ──────────────────────────────────────────── */
.adv-pop-cal { width: 292px; }
.adv-cal-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.adv-cal-titulo { flex: 1; display: flex; gap: 6px; align-items: center; justify-content: center; }
.adv-cal-mes, .adv-cal-ano {
  height: 32px !important; border: 1px solid var(--borda, #e2e8f0) !important; border-radius: 7px !important;
  background: var(--card, #fff) !important; color: var(--texto, #0f172a) !important;
  font-size: 13.5px !important; font-weight: 600 !important; padding: 0 6px !important;
  font-family: inherit; text-transform: capitalize;
}
.adv-cal-mes { flex: 1; min-width: 0; cursor: pointer; }
.adv-cal-ano { width: 68px; text-align: center; }
.adv-cal-nav {
  width: 30px; height: 30px; flex: none; border: 1px solid var(--borda, #e2e8f0);
  border-radius: 7px; background: var(--card, #fff); color: var(--ds-texto-sec, #475569);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.adv-cal-nav:hover { background: var(--ds-brand-50); color: var(--ds-brand-700); border-color: var(--ds-brand-300); }

.adv-cal-semana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
}
.adv-cal-semana span {
  text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ds-texto-meta, #64748b); padding: 4px 0;
}
.adv-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.adv-cal-dia {
  height: 34px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--texto, #0f172a);
  font-variant-numeric: tabular-nums;
}
.adv-cal-dia:hover { background: var(--ds-brand-50, #ECEEFB); color: var(--ds-brand-700); }
.adv-cal-dia.fora { color: var(--ds-n-400, #94a3b8); font-weight: 400; }
.adv-cal-dia.hoje { box-shadow: inset 0 0 0 1.5px var(--ds-brand-400, #7D87DC); font-weight: 700; }
.adv-cal-dia.escolhido { background: var(--ds-grad-marca); color: #fff; font-weight: 700; }
.adv-cal-dia.escolhido:hover { background: var(--ds-grad-marca-hover); color: #fff; }
.adv-cal-dia:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: -2px; }

.adv-cal-rodape {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--borda, #e2e8f0);
}
.adv-cal-atalho {
  border: 1px solid var(--borda, #e2e8f0); background: var(--card, #fff); border-radius: 999px;
  padding: 4px 11px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ds-texto-sec, #475569); cursor: pointer;
}
.adv-cal-atalho:hover { background: var(--ds-brand-50); border-color: var(--ds-brand-300); color: var(--ds-brand-700); }
.adv-cal-atalho.limpar { margin-left: auto; color: var(--adv-erro, #b91c1c); }
.adv-cal-atalho.limpar:hover { background: var(--adv-erro-fundo, #fee2e2); border-color: var(--adv-erro, #b91c1c); color: var(--adv-erro, #b91c1c); }

/* ── horários ────────────────────────────────────────────── */
.adv-horas { width: 232px; }
.adv-horas-grade {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  max-height: 236px; overflow-y: auto; padding-right: 4px;
}
.adv-hora {
  height: 32px; border: 1px solid var(--borda, #e2e8f0); border-radius: 7px;
  background: var(--card, #fff); font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--texto, #0f172a); cursor: pointer; font-variant-numeric: tabular-nums;
}
.adv-hora:hover { background: var(--ds-brand-50); border-color: var(--ds-brand-300); color: var(--ds-brand-700); }
.adv-hora.ativa { background: var(--ds-grad-marca); border-color: transparent; color: #fff; font-weight: 700; }
.adv-horas-rodape { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda, #e2e8f0); display: flex; }
.adv-horas-rodape .adv-cal-atalho { margin-left: 0; }

/* ── parcelas ────────────────────────────────────────────── */
.adv-parcelas { display: flex; flex-direction: column; gap: 6px; }
.adv-parcelas-trilho { display: flex; flex-wrap: wrap; gap: 5px; }
.adv-parcela {
  min-width: 42px; height: 34px; padding: 0 8px; border: 1px solid var(--ds-n-300, #cbd5e1);
  border-radius: 8px; background: var(--card, #fff); font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--ds-texto-sec, #475569); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.adv-parcela:hover { border-color: var(--ds-brand-400); color: var(--ds-brand-700); background: var(--ds-brand-50); }
.adv-parcela.ativa { background: var(--ds-grad-marca); border-color: transparent; color: #fff; }
.adv-parcela:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }
.adv-parcelas-nota { font-size: 12.5px; color: var(--ds-texto-meta, #64748b); font-variant-numeric: tabular-nums; }

/* ── celular ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .adv-pop-cal { width: min(292px, calc(100vw - 24px)); }
  .adv-horas { width: min(232px, calc(100vw - 24px)); }
  .adv-parcela { min-width: 38px; height: 32px; }
}