/* SAEMPA — Modern datetimepicker overrides */
:root {
	--dp-primary: #0f2d5c;
	--dp-primary-light: #1a4a8a;
	--dp-accent: #f59e0b;
	--dp-accent-soft: rgba(245, 158, 11, 0.15);
	--dp-radius: 12px;
	--dp-cell-radius: 8px;
}

/* ── Popover container ── */
.datetimepicker.dropdown-menu {
	padding: 0;
	margin-top: 6px;
	border: 1px solid #e2e8f0;
	border-radius: var(--dp-radius);
	box-shadow: 0 16px 48px rgba(15, 45, 92, 0.16), 0 4px 12px rgba(15, 45, 92, 0.08);
	background: #fff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	z-index: 10050 !important;
	overflow: hidden;
	min-width: 280px;
}

.datetimepicker {
	padding: 0;
	direction: ltr;
}

/* Hide legacy triangle caret */
[class*="datetimepicker-dropdown"]:before,
[class*="datetimepicker-dropdown"]:after {
	display: none !important;
}

/* ── Header (navigation) ── */
.datetimepicker thead tr:first-child th {
	background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 6px;
	border: none;
	transition: background 0.2s;
}

.datetimepicker thead tr:first-child th:hover {
	background: linear-gradient(135deg, var(--dp-primary-light), #2563b0);
}

.datetimepicker thead tr:first-child th.prev,
.datetimepicker thead tr:first-child th.next {
	width: 36px;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
}

.datetimepicker thead tr:first-child th.prev:hover,
.datetimepicker thead tr:first-child th.next:hover {
	color: #fff;
}

.datetimepicker thead tr:first-child th.switch {
	font-size: 14px;
	letter-spacing: 0.2px;
}

/* Day-of-week labels */
.datetimepicker thead tr:nth-child(2) th,
.datetimepicker.days thead tr:last-child th {
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 8px 2px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

/* ── Table layout ── */
.datetimepicker table {
	margin: 0;
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
}

.datetimepicker table.table-condensed {
	padding: 8px 10px 12px;
}

.datetimepicker td,
.datetimepicker th {
	text-align: center;
	border: none;
}

.datetimepicker table tr td,
.datetimepicker table tr th {
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--dp-cell-radius);
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* ── Day cells ── */
.datetimepicker table tr td.day {
	color: #1e293b;
	cursor: pointer;
}

.datetimepicker table tr td.day:hover {
	background: #f1f5f9 !important;
	color: var(--dp-primary);
}

.datetimepicker table tr td.old,
.datetimepicker table tr td.new {
	color: #cbd5e1;
}

.datetimepicker table tr td.disabled,
.datetimepicker table tr td.disabled:hover {
	color: #e2e8f0;
	cursor: not-allowed;
	background: none !important;
}

/* Today — days */
.datetimepicker table tr td.today,
.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover {
	background-color: var(--dp-accent-soft) !important;
	filter: none !important;
	border: none;
	color: #b45309 !important;
	font-weight: 700;
	text-shadow: none;
}

.datetimepicker table tr td.today.active,
.datetimepicker table tr td.today.active:hover {
	background-color: #d97706 !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* Selected day / year / month */
.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active.disabled,
.datetimepicker table tr td span.active.disabled:hover,
.datetimepicker table tr td span.year.active,
.datetimepicker table tr td span.month.active {
	background-color: var(--dp-primary) !important;
	filter: none !important;
	border: none !important;
	border-color: transparent !important;
	color: #fff !important;
	text-shadow: none !important;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(15, 45, 92, 0.3);
}

/* ── Month / year grid ── */
.datetimepicker table tr td span {
	display: block;
	width: 23%;
	height: 46px;
	line-height: 46px;
	float: left;
	margin: 1%;
	cursor: pointer;
	border-radius: var(--dp-cell-radius);
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.datetimepicker table tr td span:hover {
	background: #f1f5f9 !important;
	color: var(--dp-primary);
}

.datetimepicker table tr td span.disabled,
.datetimepicker table tr td span.disabled:hover {
	color: #e2e8f0;
	cursor: not-allowed;
	background: none !important;
}

.datetimepicker table tr td span.old {
	color: #cbd5e1;
}

/* ── Hours / minutes ── */
.datetimepicker .datetimepicker-hours span,
.datetimepicker .datetimepicker-minutes span {
	height: 32px;
	line-height: 32px;
	width: 23%;
	border-radius: var(--dp-cell-radius);
}

.datetimepicker table tr td.hour:hover,
.datetimepicker table tr td.minute:hover {
	background: #f1f5f9 !important;
	border-radius: var(--dp-cell-radius);
}

/* ── Footer (today / clear) ── */
.datetimepicker tfoot th {
	padding: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--dp-primary-light);
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.datetimepicker tfoot th:hover {
	background: #f1f5f9;
	color: var(--dp-primary);
}

/* ── Date inputs ── */
[data-toggle="datepicker"],
[data-toggle="timepicker"],
.dashboard_datetimepicker,
.fecha_inicio_certificados,
.fecha_fin_certificados {
	cursor: pointer;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 34px !important;
}

[data-toggle="timepicker"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

[data-toggle="datepicker"]:focus,
.dashboard_datetimepicker:focus,
.fecha_inicio_certificados:focus,
.fecha_fin_certificados:focus {
	border-color: var(--dp-primary-light) !important;
	box-shadow: 0 0 0 3px rgba(26, 74, 138, 0.12) !important;
	outline: none;
}