/* ============================================================ MdpdDateRangePicker — combo check-in/check-out (estilo Booking) Prefijo .mdpd-drp-*. Portable: no depende de WordPress. Toda la marca se controla por custom properties --mdpd-drp-*. ============================================================ */ .mdpd-drp { --mdpd-drp-h: 3.25rem; --mdpd-drp-radius: 0.5rem; --mdpd-drp-bg: #ffffff; --mdpd-drp-border: #cab080; --mdpd-drp-border-focus: #d0ab69; --mdpd-drp-text: #222222; --mdpd-drp-muted: #8a8a8a; --mdpd-drp-accent: #d0ab69; --mdpd-drp-accent-hover: #bc8c37; --mdpd-drp-range-bg: #f3ead7; --mdpd-drp-range-text: #222222; position: relative; font: inherit; width: 100%; } .mdpd-drp-anchor { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none !important; left: 0; bottom: 0; } .mdpd-drp-trigger { display: flex; align-items: stretch; width: 100%; height: var(--mdpd-drp-h); background: var(--mdpd-drp-bg); border: 1px solid var(--mdpd-drp-border); border-radius: var(--mdpd-drp-radius); cursor: pointer; font: inherit; color: var(--mdpd-drp-text); padding: 0; text-align: left; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .mdpd-drp-trigger:hover, .mdpd-drp.mdpd-drp-open .mdpd-drp-trigger { border-color: var(--mdpd-drp-border-focus); } .mdpd-drp.mdpd-drp-open .mdpd-drp-trigger { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdpd-drp-accent) 22%, transparent); } .mdpd-drp-seg { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 0 0.9rem 0 2.35rem; min-width: 0; position: relative; } .mdpd-drp-seg:first-child::before { content: ""; position: absolute; left: 0.75rem; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); background-color: var(--mdpd-drp-border-focus); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat; } .mdpd-drp-seg-label { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mdpd-drp-muted); white-space: nowrap; } .mdpd-drp-seg-value { font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mdpd-drp-muted); } .mdpd-drp-has-checkin .mdpd-drp-seg[data-drp-seg="checkin"] .mdpd-drp-seg-value, .mdpd-drp-has-checkout .mdpd-drp-seg[data-drp-seg="checkout"] .mdpd-drp-seg-value { color: var(--mdpd-drp-text); } .mdpd-drp-divider { width: 1px; align-self: center; height: 60%; background: var(--mdpd-drp-border); } /* ---- Popup del calendario (vive en , fuera de .mdpd-drp) ---- */ .flatpickr-calendar.mdpd-drp-calendar { font: inherit; font-size: 0.9rem; border-radius: 0.65rem; box-shadow: 0 16px 40px rgba(20, 15, 5, 0.18), 0 2px 8px rgba(20, 15, 5, 0.08); width: auto; padding: 0.85rem 0.9rem 0.6rem; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-innerContainer { gap: 1.35rem; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-month { position: relative; margin-bottom: 0.15rem; } /* Rango: día seleccionado (extremos). Fondo = color de marca, texto se mantiene oscuro igual que los días no iluminados (a pedido). */ .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.selected, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.selected:hover, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.startRange, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.endRange, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.endRange:hover { background: var(--mdpd-drp-accent) !important; border-color: transparent !important; color: var(--mdpd-drp-range-text) !important; } /* Rango: días intermedios iluminados de FONDO (sin borde) conectando in/out */ .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.inRange, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.prevMonthDay.inRange, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.nextMonthDay.inRange { background: var(--mdpd-drp-range-bg) !important; border-color: transparent !important; color: var(--mdpd-drp-range-text) !important; box-shadow: -6px 0 0 var(--mdpd-drp-range-bg), 6px 0 0 var(--mdpd-drp-range-bg) !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day:hover, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day:focus { background: var(--mdpd-drp-range-bg) !important; border-color: transparent !important; color: var(--mdpd-drp-range-text) !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.today { border-color: var(--mdpd-drp-accent) !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month { fill: var(--mdpd-drp-accent) !important; color: var(--mdpd-drp-accent) !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month:hover { fill: var(--mdpd-drp-accent-hover) !important; color: var(--mdpd-drp-accent-hover) !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-current-month .cur-month, .flatpickr-calendar.mdpd-drp-calendar .flatpickr-current-month .cur-year { font-weight: 700 !important; } /* ---------------------------------------------------------------- Mobile: los dos meses apilados, cada uno con su propio título arriba de su grilla. No se mueve NINGÚN nodo de Flatpickr entre contenedores: Flatpickr vacía y reconstruye .flatpickr-days por completo en cada cambio de mes (confirmado en su código fuente), así que mover un título ahí adentro lo borraría al primer click en "mes siguiente". En cambio, los títulos (.flatpickr-month, que Flatpickr nunca destruye, solo les actualiza el texto) se posicionan con position:absolute justo arriba de su .dayContainer correspondiente: - El título del 1er mes es siempre top:0 (fijo, sin JS). - Los siguientes se miden por JS (positionStackedMonthTitles en mdpd-date-range-picker.js) porque la altura de cada grilla varía según tenga 5 o 6 semanas. - Cada .dayContainer (salvo el primero) reserva ese espacio con padding-top para que el título no tape los números. ---------------------------------------------------------------- */ @media (max-width: 639px) { .flatpickr-calendar.mdpd-drp-calendar { --mdpd-drp-month-title-h: 2.35rem; width: min(94vw, 320px) !important; padding: 0.75rem 0.75rem 0.5rem; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-rContainer { position: relative; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months { position: absolute; top: 0; left: 0; width: 100%; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-month { position: absolute; left: 0; width: 100%; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-month:first-child { top: 0; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdays { margin-top: var(--mdpd-drp-month-title-h); } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdaycontainer ~ .flatpickr-weekdaycontainer { display: none !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdaycontainer:first-child { flex: 1 1 100% !important; } .flatpickr-calendar.mdpd-drp-calendar .flatpickr-days { flex-wrap: wrap !important; width: 100% !important; } .flatpickr-calendar.mdpd-drp-calendar .dayContainer { flex: 1 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .flatpickr-calendar.mdpd-drp-calendar .dayContainer + .dayContainer { box-shadow: none !important; margin-top: 0.5rem; padding-top: calc(0.5rem + var(--mdpd-drp-month-title-h)); border-top: 1px solid var(--mdpd-drp-border, #e6e6e6); } }