/* Calendario de fechas (partials/datepicker). Los colores son variables --dp-* que define el diseño de cada pantalla (panel y web de canje). */
.datefield { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:start; cursor:pointer; font:inherit; }
.datefield:disabled { opacity:.55; cursor:not-allowed; }
.datefield__text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.datefield.is-empty .datefield__text { opacity:.6; }
.datefield svg { flex:none; width:18px; height:18px; opacity:.7; }
.cal { position:fixed; z-index:200; width:max-content; max-width:calc(100vw - 24px); padding:24px 24px 20px; border:1px solid var(--dp-line); border-radius:24px; background:var(--dp-bg); color:var(--dp-text); box-shadow:0 10px 38px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.16); font-family:inherit; font-size:14px; line-height:20px; text-align:start; }
.cal[hidden] { display:none; }
.cal__months { display:flex; gap:32px; }
.cal__month { width:308px; }
.cal__head { display:flex; align-items:center; justify-content:space-between; height:36px; margin-bottom:8px; }
.cal__title { flex:1; text-align:center; font-weight:600; font-size:15px; line-height:20px; }
.cal__nav { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--dp-text); cursor:pointer; }
.cal__nav:hover:not(:disabled) { background:var(--dp-hover); }
.cal__nav:disabled { opacity:.25; cursor:default; }
.cal__nav svg { width:16px; height:16px; }
[dir="rtl"] .cal__nav svg { transform:scaleX(-1); }
.cal__nav.is-hidden { visibility:hidden; }
.cal__grid { display:grid; grid-template-columns:repeat(7, 44px); row-gap:2px; }
.cal__dow { display:flex; align-items:center; justify-content:center; height:32px; font-size:12px; line-height:16px; font-weight:400; color:var(--dp-muted); }
.cal__day { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--dp-text); font:inherit; font-weight:400; font-size:14px; line-height:20px; cursor:pointer; }
.cal__day:hover:not(:disabled):not(.is-selected) { border-color:var(--dp-text); }
.cal__day:disabled { color:var(--dp-muted); text-decoration:line-through; cursor:default; opacity:.55; }
.cal__day.is-today { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.cal__day.is-selected { background:var(--dp-sel-bg); color:var(--dp-sel-fg); border-color:var(--dp-sel-bg); font-weight:600; }
.cal__day:focus-visible { outline:2px solid var(--dp-accent); outline-offset:2px; }
.cal__body { display:flex; gap:28px; align-items:flex-start; }
.cal__presets { display:flex; flex-direction:column; gap:2px; min-width:158px; padding-inline-end:22px; border-inline-end:1px solid var(--dp-line); }
.cal__preset { display:block; width:100%; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--dp-text); font:inherit; text-align:start; cursor:pointer; }
.cal__preset:hover:not(:disabled) { background:var(--dp-hover); }
.cal__preset:focus-visible { outline:2px solid var(--dp-accent); outline-offset:1px; }
.cal__preset:disabled { opacity:.35; cursor:default; }
@media (max-width:819px) {
    .cal__body { flex-direction:column; gap:12px; }
    .cal__presets { flex-direction:row; flex-wrap:wrap; min-width:0; padding:0; border:0; }
    .cal__preset { width:auto; padding:5px 10px; border:1px solid var(--dp-line); border-radius:999px; font-size:13px; }
    .cal { padding:16px 12px 12px; border-radius:20px; }
    .cal__month { width:calc(7 * 40px); }
    .cal__grid { grid-template-columns:repeat(7, 40px); }
    .cal__day { width:40px; height:40px; }
}