/**
 * Tema Ecología — bootstrap-datepicker 1.10
 * Debe cargarse DESPUÉS de bootstrap-datepicker.min.css
 */

:root {
	--ec-dp-accent: #0d6efd;
	--ec-dp-accent-mid: #3b8afd;
	--ec-dp-accent-dark: #0a58ca;
	--ec-dp-surface: #ffffff;
	--ec-dp-border: #e5e7eb;
	--ec-dp-muted: #9ca3af;
	--ec-dp-text: #1f2937;
	--ec-dp-switch-bg: #f3f4f6;
}

/* Contenedor flotante */
.datepicker.datepicker-dropdown,
.datepicker.dropdown-menu {
	padding: 14px 16px 16px !important;
	margin-top: 8px !important;
	border: 1px solid var(--ec-dp-border) !important;
	border-radius: 12px !important;
	box-shadow:
		0 4px 6px -1px rgba(15, 23, 42, 0.06),
		0 12px 32px -6px rgba(15, 23, 42, 0.14) !important;
	background: var(--ec-dp-surface) !important;
	background-image: none !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 13px;
	color: var(--ec-dp-text);
	min-width: 268px;
	z-index: 2060 !important;
}

/* Careta hacia el input */
.datepicker-dropdown.datepicker-orient-bottom:before {
	border-bottom-color: rgba(15, 23, 42, 0.1) !important;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
	border-bottom-color: #fff !important;
}
.datepicker-dropdown.datepicker-orient-top:before {
	border-top-color: rgba(15, 23, 42, 0.1) !important;
}
.datepicker-dropdown.datepicker-orient-top:after {
	border-top-color: #fff !important;
}

.datepicker table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 2px;
}

/* Navegación: anterior / mes / siguiente */
.datepicker table thead tr:first-child th {
	border: none !important;
	vertical-align: middle;
	padding: 4px 2px 12px;
	background: transparent !important;
	background-image: none !important;
	font-weight: 600;
	color: var(--ec-dp-text);
}

.datepicker table thead tr:first-child th.prev,
.datepicker table thead tr:first-child th.next {
	width: 38px;
	height: 38px;
	line-height: 34px;
	font-size: 1.1rem;
	color: #4b5563;
	border-radius: 8px !important;
}

.datepicker table thead tr:first-child th.prev:hover,
.datepicker table thead tr:first-child th.next:hover {
	background: var(--ec-dp-switch-bg) !important;
	background-image: none !important;
}

.datepicker .datepicker-switch,
.datepicker table thead tr:first-child th.datepicker-switch {
	width: auto !important;
	min-width: 140px;
	padding: 8px 14px !important;
	margin: 0 4px;
	border-radius: 8px !important;
	background: var(--ec-dp-switch-bg) !important;
	background-image: none !important;
	border: none !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: var(--ec-dp-text) !important;
}

.datepicker .datepicker-switch:hover,
.datepicker table thead tr:first-child th.datepicker-switch:hover {
	background: #e5e7eb !important;
	background-image: none !important;
}

/* Días de la semana */
.datepicker table thead tr:last-child th,
.datepicker table thead tr th.dow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #6b7280;
	text-transform: uppercase;
	padding: 6px 0 8px !important;
	border: none !important;
	height: auto !important;
	background: transparent !important;
}

/* Celdas de día */
.datepicker table tr td.day {
	border-radius: 8px !important;
	padding: 0 !important;
	min-width: 36px;
	height: 36px !important;
	line-height: 36px !important;
	font-weight: 500;
	border: none !important;
	color: var(--ec-dp-text);
	background: transparent !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
	background: #f3f4f6 !important;
	background-image: none !important;
	cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
	color: var(--ec-dp-muted) !important;
	font-weight: 400;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	color: #d1d5db !important;
	background: transparent !important;
	background-image: none !important;
	cursor: not-allowed;
}

/* “Hoy” — resaltado suave */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
	background: #eff6ff !important;
	background-image: none !important;
	color: var(--ec-dp-accent) !important;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.35);
}

.datepicker table tr td.today:hover {
	background: #dbeafe !important;
}

/* Fecha seleccionada */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover,
.datepicker table tr td.today.active.disabled,
.datepicker table tr td.today.active.disabled:hover {
	background: linear-gradient(180deg, var(--ec-dp-accent-mid) 0%, var(--ec-dp-accent) 55%, var(--ec-dp-accent-dark) 100%) !important;
	background-image: linear-gradient(180deg, var(--ec-dp-accent-mid) 0%, var(--ec-dp-accent) 55%, var(--ec-dp-accent-dark) 100%) !important;
	color: #fff !important;
	text-shadow: none !important;
	border: none !important;
	font-weight: 600;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active.active:active {
	background: var(--ec-dp-accent-dark) !important;
	background-image: none !important;
}

.datepicker table tr td.highlighted {
	background: #f3f4f6 !important;
	background-image: none !important;
	border-radius: 0 !important;
}

.datepicker table tr td.range {
	background: #f3f4f6 !important;
	background-image: none !important;
}

/* Meses / años (vista alternativa) */
.datepicker table tr td span {
	border-radius: 8px !important;
	font-weight: 500;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
	background: #f3f4f6 !important;
	background-image: none !important;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
	background: linear-gradient(180deg, var(--ec-dp-accent-mid) 0%, var(--ec-dp-accent) 100%) !important;
	background-image: none !important;
	color: #fff !important;
}

.datepicker tfoot tr th,
.datepicker .datepicker-buttons .btn {
	border-radius: 8px;
	font-size: 12px;
}

/* Campos de fecha en formularios (cédulas, reportes) */
.vl-datepicker:focus,
input.vl-input.vl-datepicker:focus,
.rpt-input.vl-datepicker:focus,
.form-control.vl-datepicker:focus {
	border-color: var(--ec-dp-accent);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}