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

/* ── Fallback variables (sobreescritas por helpers.php) ── */
:root {
	--vr-primario:       #2563eb;
	--vr-primario-hover: #1d4ed8;
	--vr-primario-texto: #ffffff;
	--vr-primario-alfa:  rgba(37,99,235,.12);
	--vr-acento:         #0ea5e9;
	--vr-fondo:          #f1f5f9;
	--vr-borde:          #e2e8f0;
	--vr-borde-fuerte:   #cbd5e1;
	--vr-texto:          #0f172a;
	--vr-texto-suave:    #64748b;
	--vr-texto-muted:    #94a3b8;
}

/* ==========================================================================
   TRIGGER — el "input" visible
   ========================================================================== */
.vr-dp-wrap { position: relative; }

.vr-dp-trigger {
	width:          100%;
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        14px 16px;
	background:     #f8fafc;
	border:         1.5px solid var(--vr-borde);
	border-radius:  10px;
	cursor:         pointer;
	font-family:    inherit;
	font-size:      15px;
	color:          var(--vr-texto-muted);
	text-align:     left;
	transition:     border-color .18s, box-shadow .18s, background .18s, color .18s;
	outline:        none;
	position:       relative;
}

/* Icono izquierdo */
.vr-dp-trig-icon {
	flex-shrink: 0;
	color:       var(--vr-primario);
	display:     flex;
	align-items: center;
}

/* Texto del trigger */
.vr-dp-display { flex: 1; font-weight: 500; }

/* Chevron derecho */
.vr-dp-trig-chev {
	flex-shrink: 0;
	color:       var(--vr-texto-muted);
	display:     flex;
	align-items: center;
	transition:  transform .22s;
}
.vr-dp-trigger--focus .vr-dp-trig-chev  { transform: rotate(180deg); }

/* Con valor seleccionado */
.vr-dp-trigger--ok {
	color:      var(--vr-texto);
	background: #fff;
}

/* Focus / hover */
.vr-dp-trigger:hover,
.vr-dp-trigger--focus {
	background:   #fff;
	border-color: var(--vr-primario);
	box-shadow:   0 0 0 3px var(--vr-primario-alfa);
}

/* Error */
.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
   ========================================================================== */
.vr-dp-popup {
	position:       fixed;      /* posicionado por JS con getBoundingClientRect */
	z-index:        99900;
	background:     #ffffff;
	border-radius:  20px;
	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);
	padding:        22px;
	width:          340px;
	font-family:    inherit;

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

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

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

.vr-dp-ym {
	display:   flex;
	gap:       6px;
	font-size: 16px;
}
.vr-dp-mes {
	font-weight: 800;
	color:       var(--vr-texto);
}
.vr-dp-yr {
	font-weight: 500;
	color:       var(--vr-texto-suave);
}

/* Botones prev / next */
.vr-dp-nav {
	width:       34px;
	height:      34px;
	flex-shrink: 0;
	border:      none;
	background:  transparent;
	border-radius: 8px;
	display:     flex;
	align-items: center;
	justify-content: center;
	cursor:      pointer;
	color:       var(--vr-texto-suave);
	transition:  background .14s, color .14s;
	padding:     0;
}
.vr-dp-nav:hover:not([disabled]) {
	background: var(--vr-fondo);
	color:      var(--vr-texto);
}
.vr-dp-nav[disabled] { opacity: .3; cursor: not-allowed; }

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

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

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

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

/* Día pasado / deshabilitado */
.vr-dp-d--off {
	color:  var(--vr-texto-muted);
	cursor: not-allowed;
	opacity: .38;
}

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

/* Seleccionado */
.vr-dp-d--sel {
	background: var(--vr-primario) !important;
	color:      var(--vr-primario-texto) !important;
	font-weight: 800;
	box-shadow: 0 4px 12px var(--vr-primario-alfa);
}
.vr-dp-d--sel::after { display: none; } /* ocultar punto de "hoy" si también es el seleccionado */

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

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

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

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

/* Separador ":" */
.vr-dp-colon {
	font-size:   18px;
	font-weight: 800;
	color:       var(--vr-texto-suave);
	flex-shrink: 0;
	line-height: 1;
}

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

/* Botón de minuto */
.vr-dp-mi {
	flex:          1;
	padding:       10px 4px;
	border:        1.5px solid var(--vr-borde);
	border-radius: 8px;
	background:    #f8fafc;
	font-size:     14px;
	font-weight:   700;
	color:         var(--vr-texto);
	cursor:        pointer;
	text-align:    center;
	transition:    background .12s, border-color .12s, color .12s, transform .1s;
}
.vr-dp-mi:hover:not(.vr-dp-mi--off) {
	background:   var(--vr-primario-alfa);
	border-color: var(--vr-primario);
	color:        var(--vr-primario);
}
.vr-dp-mi:active:not(.vr-dp-mi--off) { transform: scale(.92); }

/* Minuto seleccionado */
.vr-dp-mi--sel {
	background:   var(--vr-primario) !important;
	border-color: var(--vr-primario) !important;
	color:        var(--vr-primario-texto) !important;
	box-shadow:   0 2px 8px var(--vr-primario-alfa);
}

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

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

.vr-dp-footer-txt { flex: 1; min-width: 0; }

.vr-dp-resumen {
	font-size:   13px;
	font-weight: 700;
	color:       var(--vr-texto);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
	display:     block;
}

.vr-dp-hint {
	font-size:  12px;
	color:      var(--vr-texto-muted);
	font-style: italic;
}

/* Botón confirmar */
.vr-dp-ok {
	flex-shrink:   0;
	padding:       11px 22px;
	background:    linear-gradient(135deg, var(--vr-primario) 0%, var(--vr-primario-hover) 100%);
	color:         var(--vr-primario-texto);
	border:        none;
	border-radius: 10px;
	font-size:     14px;
	font-weight:   700;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    filter .15s, box-shadow .15s, transform .1s;
}
.vr-dp-ok:not([disabled]):hover {
	filter:     brightness(1.08);
	box-shadow: 0 4px 14px var(--vr-primario-alfa);
}
.vr-dp-ok:not([disabled]):active { transform: scale(.96); }
.vr-dp-ok[disabled] {
	background:  var(--vr-borde);
	color:       var(--vr-texto-muted);
	cursor:      not-allowed;
	box-shadow:  none;
}

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