/* ==========================================================================
   vr-datepicker.css — Calendario Airbnb-style
   Usa CSS variables del admin: --vr-primario, --vr-primario-alfa, etc.
   ========================================================================== */


/* ==========================================================================
   TRIGGER — el "input" visible
   Prefijo body + !important en propiedades visuales clave para ganar
   a cualquier regla button{} del tema de WordPress.
   ========================================================================== */
.vr-dp-wrap { position: relative; }

body .vr-dp-wrap .vr-dp-trigger,
body .vr-dp-trigger {
	/* Reset completo frente al tema */
	-webkit-appearance: none !important;
	appearance:         none !important;
	margin:             0 !important;
	text-decoration:    none !important;
	letter-spacing:     normal !important;
	text-transform:     none !important;
	line-height:        1.4 !important;

	/* Layout */
	width:          100% !important;
	display:        flex !important;
	align-items:    center !important;
	gap:            10px !important;
	padding:        14px 16px !important;
	box-sizing:     border-box !important;

	/* Visual */
	background:     var(--vr-fondo, #f8fafc) !important;
	border:         1.5px solid var(--vr-borde, #e2e8f0) !important;
	border-radius:  10px !important;
	box-shadow:     none !important;
	outline:        none !important;

	/* Tipografía */
	font-family:    var(--vr-fuente, inherit) !important;
	font-size:      15px !important;
	font-weight:    400 !important;
	color:          var(--vr-texto-muted, #94a3b8) !important;
	text-align:     left !important;

	cursor:         pointer !important;
	position:       relative !important;
	transition:     border-color .18s, box-shadow .18s, background .18s, color .18s !important;
}

/* Icono izquierdo */
body .vr-dp-wrap .vr-dp-trigger .vr-dp-trig-icon,
body .vr-dp-trigger .vr-dp-trig-icon {
	flex-shrink: 0 !important;
	color:       var(--vr-primario, #2563eb) !important;
	display:     flex !important;
	align-items: center !important;
}

/* Texto del trigger */
body .vr-dp-wrap .vr-dp-trigger .vr-dp-display,
body .vr-dp-trigger .vr-dp-display {
	flex:        1 !important;
	font-weight: 500 !important;
	color:       inherit !important;
}

/* Chevron derecho */
body .vr-dp-wrap .vr-dp-trigger .vr-dp-trig-chev,
body .vr-dp-trigger .vr-dp-trig-chev {
	flex-shrink: 0 !important;
	color:       var(--vr-texto-muted, #94a3b8) !important;
	display:     flex !important;
	align-items: center !important;
	transition:  transform .22s !important;
}

body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--focus .vr-dp-trig-chev,
body .vr-dp-trigger.vr-dp-trigger--focus .vr-dp-trig-chev {
	transform: rotate(180deg) !important;
}

/* ── Con valor seleccionado ── */
body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--ok,
body .vr-dp-trigger.vr-dp-trigger--ok {
	color:      var(--vr-texto, #0f172a) !important;
	background: var(--vr-fondo-card, #fff) !important;
}

/* ── Focus / hover ── */
body .vr-dp-wrap .vr-dp-trigger:hover,
body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--focus,
body .vr-dp-trigger:hover,
body .vr-dp-trigger.vr-dp-trigger--focus {
	background:   var(--vr-fondo-card, #fff) !important;
	border-color: var(--vr-primario, #2563eb) !important;
	box-shadow:   0 0 0 3px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}

/* ── Error ── */
body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--err,
body .vr-dp-trigger.vr-dp-trigger--err {
	border-color: var(--vr-error, #dc2626) !important;
	box-shadow:   0 0 0 3px rgba(220,38,38,.12) !important;
}

/* ==========================================================================
   POPUP — ventana flotante
   ========================================================================== */
body .vr-dp-popup {
	position:       fixed !important;
	z-index:        99900 !important;
	background:     #ffffff !important;
	border-radius:  20px !important;
	box-shadow:
		0 2px 4px   rgba(0,0,0,.04),
		0 8px 24px  rgba(0,0,0,.10),
		0 24px 56px rgba(0,0,0,.14) !important;
	padding:        22px !important;
	width:          340px !important;
	font-family:    var(--vr-fuente, inherit) !important;
	border:         none !important;
	margin:         0 !important;

	/* Estado oculto */
	opacity:         0 !important;
	transform:       translateY(-10px) scale(.97) !important;
	pointer-events:  none !important;
	transition:      opacity .2s cubic-bezier(.4,0,.2,1),
	                 transform .2s cubic-bezier(.4,0,.2,1) !important;
}

/* Visible */
body .vr-dp-popup.vr-dp-popup--vis {
	opacity:        1 !important;
	transform:      none !important;
	pointer-events: auto !important;
}

/* ==========================================================================
   CABECERA DE MES
   ========================================================================== */
body .vr-dp-popup .vr-dp-header {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	margin-bottom:   18px !important;
}

body .vr-dp-popup .vr-dp-ym {
	display:   flex !important;
	gap:       6px !important;
	font-size: 16px !important;
}
body .vr-dp-popup .vr-dp-mes {
	font-weight: 800 !important;
	color:       var(--vr-texto, #0f172a) !important;
}
body .vr-dp-popup .vr-dp-yr {
	font-weight: 500 !important;
	color:       var(--vr-texto-suave, #64748b) !important;
}

/* Botones prev / next — reset total frente al tema */
body .vr-dp-popup .vr-dp-nav {
	-webkit-appearance: none !important;
	appearance:         none !important;
	width:         34px !important;
	height:        34px !important;
	min-width:     0 !important;
	min-height:    0 !important;
	flex-shrink:   0 !important;
	border:        none !important;
	background:    transparent !important;
	border-radius: 8px !important;
	display:       flex !important;
	align-items:   center !important;
	justify-content: center !important;
	cursor:        pointer !important;
	color:         var(--vr-texto-suave, #64748b) !important;
	transition:    background .14s, color .14s !important;
	padding:       0 !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1 !important;
	font-size:     inherit !important;
}
body .vr-dp-popup .vr-dp-nav:hover:not([disabled]) {
	background: var(--vr-fondo, #f1f5f9) !important;
	color:      var(--vr-texto, #0f172a) !important;
}
body .vr-dp-popup .vr-dp-nav[disabled] {
	opacity: .3 !important;
	cursor:  not-allowed !important;
}

/* ==========================================================================
   DÍAS DE LA SEMANA
   ========================================================================== */
body .vr-dp-popup .vr-dp-wkd {
	display:               grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap:                   2px !important;
	margin-bottom:         8px !important;
}
body .vr-dp-popup .vr-dp-wkd span {
	text-align:     center !important;
	font-size:      11px !important;
	font-weight:    700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	color:          var(--vr-texto-muted, #94a3b8) !important;
	padding:        4px 0 !important;
}

/* ==========================================================================
   GRID DE DÍAS
   ========================================================================== */
body .vr-dp-popup .vr-dp-grid {
	display:               grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap:                   3px !important;
}

/* Celda vacía de relleno */
body .vr-dp-popup .vr-dp-blank { aspect-ratio: 1; }

/* Botón día — reset total */
body .vr-dp-popup .vr-dp-d {
	-webkit-appearance: none !important;
	appearance:         none !important;
	aspect-ratio:  1 !important;
	min-height:    38px !important;
	border:        none !important;
	background:    transparent !important;
	border-radius: 50% !important;
	font-size:     14px !important;
	font-weight:   500 !important;
	color:         var(--vr-texto, #0f172a) !important;
	cursor:        pointer !important;
	display:       flex !important;
	align-items:   center !important;
	justify-content: center !important;
	padding:       0 !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1 !important;
	transition:    background .12s, color .12s, transform .1s !important;
	position:      relative !important;
}
body .vr-dp-popup .vr-dp-d:hover:not(.vr-dp-d--off):not(.vr-dp-d--sel) {
	background: var(--vr-fondo, #f1f5f9) !important;
}
body .vr-dp-popup .vr-dp-d:active:not(.vr-dp-d--off) { transform: scale(.88) !important; }

/* Día pasado / deshabilitado */
body .vr-dp-popup .vr-dp-d.vr-dp-d--off {
	color:   var(--vr-texto-muted, #94a3b8) !important;
	cursor:  not-allowed !important;
	opacity: .38 !important;
}

/* Hoy */
body .vr-dp-popup .vr-dp-d.vr-dp-d--today {
	font-weight: 800 !important;
	color:       var(--vr-primario, #2563eb) !important;
}
body .vr-dp-popup .vr-dp-d.vr-dp-d--today::after {
	content:       '' !important;
	position:      absolute !important;
	bottom:        4px !important;
	left:          50% !important;
	transform:     translateX(-50%) !important;
	width:         4px !important;
	height:        4px !important;
	border-radius: 50% !important;
	background:    var(--vr-primario, #2563eb) !important;
}

/* Seleccionado */
body .vr-dp-popup .vr-dp-d.vr-dp-d--sel {
	background:  var(--vr-primario, #2563eb) !important;
	color:       var(--vr-primario-texto, #ffffff) !important;
	font-weight: 800 !important;
	box-shadow:  0 4px 12px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}
body .vr-dp-popup .vr-dp-d.vr-dp-d--sel::after { display: none !important; }

/* ==========================================================================
   TIME PICKER
   ========================================================================== */
body .vr-dp-popup .vr-dp-time {
	overflow:   hidden !important;
	max-height: 0 !important;
	opacity:    0 !important;
	transition: max-height .28s ease, opacity .22s ease !important;
}
body .vr-dp-popup .vr-dp-time.vr-dp-time--vis {
	max-height: 160px !important;
	opacity:    1 !important;
}

/* Encabezado de la sección time */
body .vr-dp-popup .vr-dp-time-hd {
	display:        flex !important;
	align-items:    center !important;
	gap:            6px !important;
	font-size:      11px !important;
	font-weight:    800 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color:          var(--vr-texto-muted, #94a3b8) !important;
	margin:         16px 0 12px !important;
	padding-top:    14px !important;
	border-top:     1px solid var(--vr-borde, #e2e8f0) !important;
}

/* Fila hora + minutos */
body .vr-dp-popup .vr-dp-time-row {
	display:     flex !important;
	align-items: center !important;
	gap:         10px !important;
}

/* Select de hora */
body .vr-dp-popup .vr-dp-hr {
	padding:          10px 12px !important;
	border:           1.5px solid var(--vr-borde, #e2e8f0) !important;
	border-radius:    10px !important;
	font-size:        15px !important;
	font-weight:      700 !important;
	color:            var(--vr-texto, #0f172a) !important;
	background:       #f8fafc !important;
	cursor:           pointer !important;
	outline:          none !important;
	-webkit-appearance: none !important;
	appearance:       none !important;
	min-width:        90px !important;
	transition:       border-color .15s, box-shadow .15s !important;
	box-shadow:       none !important;
}
body .vr-dp-popup .vr-dp-hr:focus {
	border-color: var(--vr-primario, #2563eb) !important;
	box-shadow:   0 0 0 3px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
	background:   #fff !important;
}
body .vr-dp-popup .vr-dp-hr option:disabled {
	color: var(--vr-texto-muted, #94a3b8) !important;
}

/* Separador ":" */
body .vr-dp-popup .vr-dp-colon {
	font-size:   18px !important;
	font-weight: 800 !important;
	color:       var(--vr-texto-suave, #64748b) !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
}

/* Contenedor de botones de minuto */
body .vr-dp-popup .vr-dp-mins {
	display: flex !important;
	gap:     6px !important;
	flex:    1 !important;
}

/* Botón de minuto — reset total */
body .vr-dp-popup .vr-dp-mi {
	-webkit-appearance: none !important;
	appearance:         none !important;
	flex:          1 !important;
	padding:       10px 4px !important;
	border:        1.5px solid var(--vr-borde, #e2e8f0) !important;
	border-radius: 8px !important;
	background:    #f8fafc !important;
	font-size:     14px !important;
	font-weight:   700 !important;
	color:         var(--vr-texto, #0f172a) !important;
	cursor:        pointer !important;
	text-align:    center !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1 !important;
	transition:    background .12s, border-color .12s, color .12s, transform .1s !important;
}
body .vr-dp-popup .vr-dp-mi:hover:not(.vr-dp-mi--off) {
	background:   var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
	border-color: var(--vr-primario, #2563eb) !important;
	color:        var(--vr-primario, #2563eb) !important;
}
body .vr-dp-popup .vr-dp-mi:active:not(.vr-dp-mi--off) { transform: scale(.92) !important; }

/* Minuto seleccionado */
body .vr-dp-popup .vr-dp-mi.vr-dp-mi--sel {
	background:   var(--vr-primario, #2563eb) !important;
	border-color: var(--vr-primario, #2563eb) !important;
	color:        var(--vr-primario-texto, #ffffff) !important;
	box-shadow:   0 2px 8px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}

/* Minuto deshabilitado */
body .vr-dp-popup .vr-dp-mi.vr-dp-mi--off {
	opacity: .32 !important;
	cursor:  not-allowed !important;
}

/* ==========================================================================
   FOOTER — resumen + botón confirmar
   ========================================================================== */
body .vr-dp-popup .vr-dp-footer {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	gap:             12px !important;
	margin-top:      16px !important;
	padding-top:     14px !important;
	border-top:      1px solid var(--vr-borde, #e2e8f0) !important;
}

body .vr-dp-popup .vr-dp-footer-txt { flex: 1 !important; min-width: 0 !important; }

body .vr-dp-popup .vr-dp-resumen {
	font-size:     13px !important;
	font-weight:   700 !important;
	color:         var(--vr-texto, #0f172a) !important;
	white-space:   nowrap !important;
	overflow:      hidden !important;
	text-overflow: ellipsis !important;
	display:       block !important;
}

body .vr-dp-popup .vr-dp-hint {
	font-size:  12px !important;
	color:      var(--vr-texto-muted, #94a3b8) !important;
	font-style: italic !important;
}

/* Botón confirmar — reset total */
body .vr-dp-popup .vr-dp-ok {
	-webkit-appearance: none !important;
	appearance:         none !important;
	flex-shrink:   0 !important;
	padding:       11px 22px !important;
	background:    linear-gradient(135deg, var(--vr-primario, #2563eb) 0%, var(--vr-primario-hover, #1d4ed8) 100%) !important;
	color:         var(--vr-primario-texto, #ffffff) !important;
	border:        none !important;
	border-radius: 10px !important;
	font-size:     14px !important;
	font-weight:   700 !important;
	cursor:        pointer !important;
	white-space:   nowrap !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1.4 !important;
	text-decoration: none !important;
	text-transform:  none !important;
	letter-spacing:  normal !important;
	transition:    filter .15s, box-shadow .15s, transform .1s !important;
}
body .vr-dp-popup .vr-dp-ok:not([disabled]):hover {
	filter:     brightness(1.08) !important;
	box-shadow: 0 4px 14px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}
body .vr-dp-popup .vr-dp-ok:not([disabled]):active { transform: scale(.96) !important; }
body .vr-dp-popup .vr-dp-ok[disabled] {
	background:  var(--vr-borde, #e2e8f0) !important;
	color:       var(--vr-texto-muted, #94a3b8) !important;
	cursor:      not-allowed !important;
	box-shadow:  none !important;
}

/* ==========================================================================
   RESPONSIVE — móvil
   ========================================================================== */
@media (max-width: 560px) {
	body .vr-dp-popup             { border-radius: 16px !important; padding: 18px !important; }
	body .vr-dp-popup .vr-dp-d   { min-height: 40px !important; font-size: 13px !important; }
	body .vr-dp-popup .vr-dp-hr  { font-size: 14px !important; min-width: 80px !important; }
	body .vr-dp-popup .vr-dp-mi  { font-size: 13px !important; padding: 9px 2px !important; }
}