/* CALENDÁRIO PADRÃO (04/11/2026, pedido do usuário) — nas cores da Vencer. Comportamento: static/js/data_picker.js.
   Vale para todo input[type=date] (fora: data-data-nativa). */
:root {
  --dp-cor: var(--brand, #008080);
  --dp-cor-escura: #0f5f5f;
  --dp-cor-clara: #e6f4f3;
  --dp-texto: #1e293b;
  --dp-apagado: #cbd5e1;
}

/* o campo: ícone de calendário da Vencer no lugar do ícone do navegador */
input[type="date"]:not([data-data-nativa]) {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Ccircle cx='8.5' cy='14.5' r='1' fill='%23008080'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px 18px;
  cursor: pointer;
}
input[type="date"]:not([data-data-nativa])::-webkit-calendar-picker-indicator { display: none; }
input[type="date"]:not([data-data-nativa])::-webkit-datetime-edit-fields-wrapper { color: var(--dp-texto); }
input[type="date"]:not([data-data-nativa]):invalid::-webkit-datetime-edit,
input[type="date"]:not([data-data-nativa])[value=""]::-webkit-datetime-edit { color: #94a3b8; }

/* a janelinha */
.dp-pop {
  position: fixed; z-index: 21000; width: 300px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px 12px 10px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  font-size: .9rem; color: var(--dp-texto); user-select: none;
  animation: dp-entra .14s ease-out;
}
@keyframes dp-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dp-pop { animation: none; } }

.dp-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.dp-nav {
  width: 34px; height: 34px; border-radius: 10px; border: 0; background: #f1f5f9; color: var(--dp-cor-escura);
  font-size: 1.15rem; line-height: 1; font-weight: 700; cursor: pointer;
}
.dp-nav:hover, .dp-nav:focus-visible { background: var(--dp-cor-clara); color: var(--dp-cor); outline: none; }
.dp-titulo { flex: 1; text-align: center; font-weight: 800; font-size: 1.02rem; color: var(--dp-cor-escura); }
.dp-titulo-clica {
  border: 0; background: transparent; border-radius: 10px; padding: 6px 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.dp-titulo-clica:hover, .dp-titulo-clica:focus-visible { background: var(--dp-cor-clara); color: var(--dp-cor); outline: none; }
.dp-seta { font-size: .8rem; opacity: .7; }

.dp-grade { display: grid; gap: 4px; }
.dp-dias { grid-template-columns: repeat(7, 1fr); }
.dp-meses, .dp-anos { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; }
.dp-sem { text-align: center; font-size: .7rem; font-weight: 700; color: #94a3b8; padding: 4px 0; }
.dp-dia, .dp-mes, .dp-ano {
  border: 0; background: transparent; border-radius: 10px; color: var(--dp-texto); cursor: pointer; font-weight: 500;
}
.dp-dia { height: 36px; }
.dp-mes, .dp-ano { height: 44px; font-weight: 600; }
.dp-dia:hover:not(:disabled), .dp-mes:hover:not(:disabled), .dp-ano:hover:not(:disabled),
.dp-dia:focus-visible, .dp-mes:focus-visible, .dp-ano:focus-visible { background: var(--dp-cor-clara); color: var(--dp-cor); outline: none; }
.dp-hoje { box-shadow: inset 0 0 0 1.5px var(--dp-cor); color: var(--dp-cor); font-weight: 700; }
.dp-sel, .dp-sel:hover:not(:disabled) {
  background: var(--dp-cor) !important; color: #fff !important; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 128, 128, .3);
}
.dp-fora { color: var(--dp-apagado) !important; text-decoration: line-through; cursor: not-allowed; }

.dp-rodape { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed #e2e8f0; margin-top: 8px; padding-top: 8px; }
.dp-acao {
  border: 0; background: var(--dp-cor-clara); color: var(--dp-cor-escura); font-weight: 700; font-size: .8rem;
  border-radius: 999px; padding: 5px 14px; cursor: pointer;
}
.dp-acao:hover:not(:disabled), .dp-acao:focus-visible { background: var(--dp-cor); color: #fff; outline: none; }
.dp-acao:disabled { opacity: .45; cursor: not-allowed; }
.dp-limpar { background: transparent; color: #64748b; }
