#ui-datepicker-div {
	z-index: 80 !important;
}

.ui-datepicker {
	width: 18rem;
	max-width: calc(100vw - 2rem);
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 0.75rem;
	background: #ffffff;
	box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.15), 0 8px 10px -6px rgb(15 23 42 / 0.15);
	font-family: inherit;
}

.ui-datepicker .ui-datepicker-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
	border-radius: 0.75rem;
	background: #eef2ff;
	padding: 0.75rem 2.5rem;
	color: #312e81;
	font-weight: 600;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 50%;
	display: flex;
	height: 2rem;
	width: 2rem;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	border-radius: 9999px;
	color: #4338ca;
	text-decoration: none;
	cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: #e0e7ff;
}

.ui-datepicker .ui-datepicker-prev {
	left: 0.5rem;
}

.ui-datepicker .ui-datepicker-next {
	right: 0.5rem;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: none;
}

.ui-datepicker .ui-datepicker-prev::before {
	content: "‹";
	font-size: 1.25rem;
	line-height: 1;
}

.ui-datepicker .ui-datepicker-next::before {
	content: "›";
	font-size: 1.25rem;
	line-height: 1;
}

.ui-datepicker .ui-datepicker-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	background: #ffffff;
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	color: #1f2937;
}

.ui-datepicker table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0.25rem;
}

.ui-datepicker th {
	padding-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #6b7280;
}

.ui-datepicker td {
	padding: 0;
}

.ui-datepicker td span,
.ui-datepicker td a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	border-radius: 0.625rem;
	font-size: 0.875rem;
	text-decoration: none;
}

.ui-datepicker td a {
	border: 1px solid #e5e7eb;
	background: #f8fafc;
	color: #111827;
}

.ui-datepicker td a:hover {
	background: #e0e7ff;
	border-color: #c7d2fe;
	color: #312e81;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-datepicker-current-day a {
	border-color: #4f46e5;
	background: #4f46e5;
	color: #ffffff;
}

.ui-datepicker .ui-state-disabled span {
	color: #cbd5e1;
	background: #f8fafc;
}

.unsubscribe-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	width: 2.5rem;
	border: 1px solid #fecaca;
	border-radius: 0.75rem;
	background: #fef2f2;
	color: #dc2626;
	box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.08);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
	cursor: pointer;
}

.unsubscribe-action:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #b91c1c;
	transform: translateY(-1px);
	box-shadow: 0 10px 15px -3px rgb(220 38 38 / 0.12), 0 4px 6px -4px rgb(220 38 38 / 0.12);
}

.unsubscribe-action:focus-visible {
	outline: 2px solid #fca5a5;
	outline-offset: 2px;
}

.unsubscribe-action svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.check-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	user-select: none;
}

.check-toggle-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.check-toggle-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	background: #ffffff;
	color: transparent;
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.05);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.check-toggle:hover .check-toggle-indicator {
	border-color: #9ca3af;
	background: #f9fafb;
}

.check-toggle-input:checked+.check-toggle-indicator {
	border-color: #4f46e5;
	background: #4f46e5;
	color: #ffffff;
	box-shadow: 0 0 0 3px rgb(199 210 254 / 0.7);
}

.check-toggle-input:focus-visible+.check-toggle-indicator {
	outline: 2px solid #c7d2fe;
	outline-offset: 2px;
}

.check-toggle-input:disabled+.check-toggle-indicator {
	cursor: not-allowed;
	border-color: #e5e7eb;
	background: #f3f4f6;
	color: #9ca3af;
	box-shadow: none;
}

.check-toggle-input:disabled~span {
	color: #9ca3af;
}

.radio-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	user-select: none;
}

.radio-toggle-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.radio-toggle-indicator {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid #d1d5db;
	border-radius: 9999px;
	background: #ffffff;
	box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.05);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.radio-toggle-indicator::after {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
	background: transparent;
	transform: scale(0.6);
	transition: background-color .15s ease, transform .15s ease;
}

.radio-toggle:hover .radio-toggle-indicator {
	border-color: #9ca3af;
	background: #f9fafb;
}

.radio-toggle-input:checked+.radio-toggle-indicator {
	border-color: #4f46e5;
	background: #eef2ff;
	box-shadow: 0 0 0 3px rgb(199 210 254 / 0.7);
}

.radio-toggle-input:checked+.radio-toggle-indicator::after {
	background: #4f46e5;
	transform: scale(1);
}

.radio-toggle-input:focus-visible+.radio-toggle-indicator {
	outline: 2px solid #c7d2fe;
	outline-offset: 2px;
}

.radio-toggle-input:disabled+.radio-toggle-indicator {
	cursor: not-allowed;
	border-color: #e5e7eb;
	background: #f3f4f6;
	box-shadow: none;
}

.radio-toggle-input:disabled~span {
	color: #9ca3af;
}

/* =========================
   jQuery UI Dialog styling
   ========================= */

.ui-widget-overlay {
	background: rgba(15, 23, 42, 0.55) !important;
	opacity: 1 !important;
}

.ui-dialog {
	border: 1px solid #e5e7eb !important;
	border-radius: 1rem !important;
	background: #ffffff !important;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.ui-dialog .ui-dialog-titlebar {
	border: 0 !important;
	border-bottom: 1px solid #e5e7eb !important;
	background: linear-gradient(to right, #eef2ff, #ffffff, #ecfeff) !important;
	padding: 1rem 1.25rem !important;
	border-radius: 0 !important;
}

.ui-dialog .ui-dialog-title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #111827 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close {
	display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
	background: #f3f4f6 !important;
	border-color: #d1d5db !important;
}

.ui-dialog .ui-dialog-titlebar-close:focus-visible {
	outline: 2px solid #c7d2fe !important;
	outline-offset: 2px !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	background-image: none !important;
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	text-indent: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-button-icon::before,
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
	content: "×";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.25rem;
	font-weight: 700;
	color: #4b5563;
	line-height: 1;
}

.ui-dialog .ui-dialog-titlebar-close .ui-button-text,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text-only,
.ui-dialog .ui-dialog-titlebar-close span:not(.ui-icon):not(.ui-button-icon) {
	display: none !important;
}

.ui-dialog .ui-dialog-content {
	padding: 1.25rem !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: #4b5563 !important;
	background: #ffffff !important;
}

.ui-dialog .ui-dialog-content a {
	color: #4338ca !important;
	font-weight: 600;
	text-decoration: none;
}

.ui-dialog .ui-dialog-content a:hover {
	text-decoration: underline;
}

.ui-dialog .ui-dialog-buttonpane {
	margin: 0 !important;
	border: 0 !important;
	border-top: 1px solid #e5e7eb !important;
	background: #ffffff !important;
	padding: 1rem 1.25rem !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none !important;
	display: flex !important;
	justify-content: flex-end !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
}

.ui-dialog .ui-dialog-buttonpane button {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0.75rem !important;
	padding: 0.65rem 1rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	background: #4f46e5 !important;
	color: #ffffff !important;
	box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08) !important;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
	background: #4338ca !important;
	transform: translateY(-1px);
}

.ui-dialog .ui-dialog-buttonpane button:focus-visible {
	outline: 2px solid #c7d2fe !important;
	outline-offset: 2px !important;
}

/* Botón secundario tipo Cancel */
.ui-dialog .ui-dialog-buttonpane button:last-child,
.ui-dialog .ui-dialog-buttonpane button.ui-state-default:last-child {
	background: #f3f4f6 !important;
	color: #374151 !important;
}

.ui-dialog .ui-dialog-buttonpane button:last-child:hover,
.ui-dialog .ui-dialog-buttonpane button.ui-state-default:last-child:hover {
	background: #e5e7eb !important;
}

/* Dialogs de error / aviso */
#dialog-message,
#dialog-confirm,
#dialog {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
}