/*!
 * Calendarios desplegables con aspecto moderno.
 *
 * Una sola piel para los selectores de fecha que conviven en la aplicacion, sin tocar su
 * JavaScript (opciones, formatos, eventos y API siguen siendo los de cada libreria):
 *   1. jQuery UI Datepicker (.ui-datepicker): formularios del portal del paciente y de las
 *      paginas publicas (treeboleforms/formfill.phtml) y pantallas sueltas de la aplicacion.
 *   2. Bootstrap Datetimepicker 4 de Eonasdan (.bootstrap-datetimepicker-widget): el selector de
 *      fecha y fecha/hora de la aplicacion (toDatePicker / toDatetimePicker de hpc-view.js) y la
 *      fecha de nacimiento del portal v1.
 *   3. MonthPicker de KidSysco (.month-picker): el salto de mes de la agenda.
 *
 * Los temas de jQuery UI y las hojas de las librerias viven fuera del repositorio
 * (/v5.0/external, /v3.0/plugins) y cambian por instalacion, asi que esta hoja no depende de ellos:
 * cada regla lleva el prefijo del widget dos veces (.ui-datepicker.ui-widget, ...) para ganar al
 * tema y al modo noche clasico (body.theme-mode-night .ui-widget-content .ui-state-default) sin
 * usar !important (salvo la flecha de los desplegables de mes y año de noche, ver alli). El contenedor lleva ademas «body» delante: el modo noche (hpc3.0-night.css) y la
 * interfaz moderna (hpc-ui.css) pintan .ui-widget-content, .ui-datepicker y .dropdown-menu con
 * body.theme-mode-night[.ui-modern] y, a igual peso, gana esta hoja porque se carga despues.
 *
 * Colores: con la interfaz moderna (body.ui-modern carga hpc-ui.css) salen de sus tokens --ui-*,
 * asi que siguen el acento de la instalacion y el modo noche. Sin ella (tema clasico, portal del
 * paciente, paginas publicas) mandan --hpc-dp-accent[-strong|-soft] si la hoja de la instalacion
 * los define (hpc3.0.css, la de Treebole Clinicas, los pone en teal) y si no, el indigo de Nubidoc
 * de este fichero. Contrastes (WCAG AA): texto blanco sobre el dia elegido 6,3:1 (#4f46e5) y
 * 4,8:1 (#0f7f7a); de noche, texto #0f172a sobre #818cf8 6:1.
 * Guia: docs/technical/systems/ui-style-guide.md (seccion «Calendario desplegable»).
 */

/* ------------------------------------------------------------------------------------------
 * Variables comunes a los tres widgets
 * ------------------------------------------------------------------------------------------ */

.ui-datepicker.ui-widget,
.bootstrap-datetimepicker-widget.dropdown-menu,
.month-picker.ui-widget {
	--dp-accent: var(--ui-accent, var(--hpc-dp-accent, #4f46e5));
	--dp-accent-strong: var(--ui-accent-strong, var(--hpc-dp-accent-strong, #4338ca));
	--dp-accent-soft: var(--ui-accent-soft, var(--hpc-dp-accent-soft, #eef2ff));
	--dp-on-accent: var(--ui-on-accent, #ffffff);
	--dp-surface: var(--ui-surface, #ffffff);
	--dp-hover: var(--ui-hover, #f1f5f9);
	--dp-border: var(--ui-border, #e2e8f0);
	--dp-border-soft: var(--ui-border-soft, #eef2f6);
	/* Contorno de un control (desplegables de mes/año, botones del pie): >= 3:1 (WCAG 1.4.11). */
	--dp-border-control: var(--ui-border-control, #818ea3);
	--dp-text: var(--ui-text, #1e293b);
	--dp-muted: var(--ui-muted, #64748b);
	--dp-faint: var(--ui-faint, #cbd5e1);
	--dp-radius: var(--ui-radius-lg, 12px);
	--dp-cell-radius: var(--ui-radius, 8px);
	--dp-shadow: var(--ui-shadow-pop, 0 10px 30px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08));
	/* Foco de teclado: anillo solido separado 2px, como los botones de la interfaz moderna. */
	--dp-focus-ring: 0 0 0 2px var(--dp-surface), 0 0 0 4px var(--dp-accent);
	--dp-cell: 34px;
	--dp-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10 3.5 5.5 8l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--dp-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--dp-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Modo noche (clasico o moderno). Con la interfaz moderna mandan los --ui-* de noche. */
body.theme-mode-night .ui-datepicker.ui-widget,
body.theme-mode-night .bootstrap-datetimepicker-widget.dropdown-menu,
body.theme-mode-night .month-picker.ui-widget {
	--dp-accent: var(--ui-accent, var(--hpc-dp-accent, #818cf8));
	--dp-accent-strong: var(--ui-accent-strong, var(--hpc-dp-accent-strong, #a5b4fc));
	--dp-accent-soft: var(--ui-accent-soft, var(--hpc-dp-accent-soft, rgba(129, 140, 248, .16)));
	--dp-on-accent: var(--ui-on-accent, #0f172a);
	--dp-surface: var(--ui-surface, #1f2937);
	--dp-hover: var(--ui-hover, #273449);
	--dp-border: var(--ui-border, #334155);
	--dp-border-soft: var(--ui-border-soft, #2b3648);
	--dp-border-control: var(--ui-border-control, #64748b);
	--dp-text: var(--ui-text, #e2e8f0);
	--dp-muted: var(--ui-muted, #94a3b8);
	--dp-faint: var(--ui-faint, #475569);
	--dp-shadow: var(--ui-shadow-pop, 0 12px 34px rgba(0, 0, 0, .5));
	--dp-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes hpc-dp-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------------------------------
 * 1. jQuery UI Datepicker
 *    Marcado: div.ui-datepicker > .ui-datepicker-header (prev, next, title) +
 *    table.ui-datepicker-calendar (th = dias de la semana; td > a|span.ui-state-default) +
 *    .ui-datepicker-buttonpane opcional. #ui-datepicker-div es el desplegable compartido;
 *    .ui-datepicker-inline, un calendario pintado dentro de la pagina.
 * ------------------------------------------------------------------------------------------ */

body .ui-datepicker.ui-widget {
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
	color: var(--dp-text);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
}

.ui-datepicker.ui-widget *,
.ui-datepicker.ui-widget *::before,
.ui-datepicker.ui-widget *::after {
	box-sizing: border-box;
}

/* El desplegable (no los calendarios en linea ni los de varios meses, que fijan su ancho). */
#ui-datepicker-div.ui-datepicker.ui-widget:not(.ui-datepicker-multi) {
	width: 288px;
}

#ui-datepicker-div.ui-datepicker.ui-widget {
	animation: hpc-dp-in .14s ease-out;
}

.ui-datepicker.ui-widget.ui-datepicker-inline {
	box-shadow: none;
}

/* Cabecera: mes y año en el centro, flechas redondeadas a los lados. */
.ui-datepicker.ui-widget .ui-datepicker-header {
	position: relative;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--dp-text);
	font-weight: 600;
}

.ui-datepicker.ui-widget .ui-datepicker-title {
	margin: 0 40px;
	line-height: 32px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-transform: capitalize;
	color: var(--dp-text);
}

.ui-datepicker.ui-widget .ui-datepicker-prev,
.ui-datepicker.ui-widget .ui-datepicker-next,
.ui-datepicker.ui-widget .ui-datepicker-prev.ui-state-hover,
.ui-datepicker.ui-widget .ui-datepicker-next.ui-state-hover {
	position: absolute;
	top: 0;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 0;
	border-radius: var(--dp-cell-radius);
	background: transparent;
	color: var(--dp-muted);
	cursor: pointer;
	opacity: 1;
	transition: background-color .12s, color .12s;
}

.ui-datepicker.ui-widget .ui-datepicker-prev,
.ui-datepicker.ui-widget .ui-datepicker-prev.ui-state-hover {
	left: 0;
	right: auto;
}

.ui-datepicker.ui-widget .ui-datepicker-next,
.ui-datepicker.ui-widget .ui-datepicker-next.ui-state-hover {
	left: auto;
	right: 0;
}

.ui-datepicker.ui-widget .ui-datepicker-prev:hover,
.ui-datepicker.ui-widget .ui-datepicker-next:hover,
.ui-datepicker.ui-widget .ui-datepicker-prev.ui-state-hover,
.ui-datepicker.ui-widget .ui-datepicker-next.ui-state-hover {
	background: var(--dp-hover);
	color: var(--dp-text);
}

.ui-datepicker.ui-widget .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker.ui-widget .ui-datepicker-next.ui-state-disabled {
	background: transparent;
	color: var(--dp-faint);
	cursor: default;
	opacity: 1;
}

/* La flecha: el icono del sprite del tema se sustituye por un chevron que toma el color. */
.ui-datepicker.ui-widget .ui-datepicker-prev .ui-icon,
.ui-datepicker.ui-widget .ui-datepicker-next .ui-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	overflow: hidden;
	text-indent: -99999px;
	background: currentColor;
	-webkit-mask: var(--dp-chevron-left) center / 16px 16px no-repeat;
	mask: var(--dp-chevron-left) center / 16px 16px no-repeat;
}

.ui-datepicker.ui-widget .ui-datepicker-next .ui-icon,
.ui-datepicker.ui-widget.ui-datepicker-rtl .ui-datepicker-prev .ui-icon {
	-webkit-mask-image: var(--dp-chevron-right);
	mask-image: var(--dp-chevron-right);
}

.ui-datepicker.ui-widget.ui-datepicker-rtl .ui-datepicker-next .ui-icon {
	-webkit-mask-image: var(--dp-chevron-left);
	mask-image: var(--dp-chevron-left);
}

.ui-datepicker.ui-widget.ui-datepicker-rtl .ui-datepicker-prev,
.ui-datepicker.ui-widget.ui-datepicker-rtl .ui-datepicker-prev.ui-state-hover {
	left: auto;
	right: 0;
}

.ui-datepicker.ui-widget.ui-datepicker-rtl .ui-datepicker-next,
.ui-datepicker.ui-widget.ui-datepicker-rtl .ui-datepicker-next.ui-state-hover {
	left: 0;
	right: auto;
}

/* Desplegables de mes y año (changeMonth / changeYear). */
.ui-datepicker.ui-widget .ui-datepicker-title select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: auto;
	max-width: 48%;
	height: 30px;
	margin: 1px 2px;
	padding: 0 24px 0 8px;
	border: 1px solid var(--dp-border-control);
	border-radius: var(--dp-cell-radius);
	background: var(--dp-surface) var(--dp-chevron-down) no-repeat right 8px center;
	color: var(--dp-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 28px;
	text-transform: capitalize;
	vertical-align: middle;
	cursor: pointer;
}

/* UNICA excepcion a «sin !important» de esta hoja: hpc3.0-night.css quita el fondo de TODOS los
   <select> con «background-image: none !important» y solo otro !important devuelve la flecha
   (hpc-ui.css hace lo mismo con los suyos). Lo fija UI-datepicker-skin-contract.php. */
body.theme-mode-night .ui-datepicker.ui-widget .ui-datepicker-title select {
	background-color: var(--dp-surface) !important;
	background-image: var(--dp-chevron-down) !important;
}

.ui-datepicker.ui-widget .ui-datepicker-title select:focus {
	border-color: var(--dp-accent);
	outline: 0;
	box-shadow: 0 0 0 1px var(--dp-accent);
}

.ui-datepicker.ui-widget .ui-datepicker-title select option {
	background: var(--dp-surface);
	color: var(--dp-text);
}

/* Rejilla de dias. */
.ui-datepicker.ui-widget table.ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
	background: transparent;
	font-size: 13px;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar th {
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dp-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar th span {
	display: inline;
	padding: 0;
	border: 0;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar td {
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	vertical-align: middle;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar td .ui-state-default {
	display: block;
	height: var(--dp-cell);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--dp-cell-radius);
	background: transparent;
	color: var(--dp-text);
	font-weight: 400;
	line-height: var(--dp-cell);
	text-align: center;
	text-decoration: none;
	opacity: 1;
	filter: none;
	transition: background-color .12s, color .12s, box-shadow .12s;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar td a.ui-state-default:hover,
.ui-datepicker.ui-widget table.ui-datepicker-calendar td a.ui-state-default.ui-state-hover {
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

/* Hoy: numero en acento con anillo fino. */
.ui-datepicker.ui-widget table.ui-datepicker-calendar td .ui-state-default.ui-state-highlight {
	background: transparent;
	color: var(--dp-accent);
	font-weight: 600;
	box-shadow: inset 0 0 0 1.5px var(--dp-accent);
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar td a.ui-state-default.ui-state-highlight:hover,
.ui-datepicker.ui-widget table.ui-datepicker-calendar td a.ui-state-default.ui-state-highlight.ui-state-hover {
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

/* Dia elegido: relleno de acento (gana a «hoy» y al «sobre»). */
.ui-datepicker.ui-widget table.ui-datepicker-calendar td .ui-state-default.ui-state-active,
.ui-datepicker.ui-widget table.ui-datepicker-calendar td a.ui-state-default.ui-state-active:hover,
.ui-datepicker.ui-widget table.ui-datepicker-calendar td a.ui-state-default.ui-state-active.ui-state-hover {
	background: var(--dp-accent);
	color: var(--dp-on-accent);
	font-weight: 600;
	box-shadow: none;
}

/* Dias de otros meses (showOtherMonths) y dias no seleccionables (minDate, maxDate, beforeShowDay). */
.ui-datepicker.ui-widget table.ui-datepicker-calendar td.ui-datepicker-other-month .ui-state-default,
.ui-datepicker.ui-widget table.ui-datepicker-calendar td .ui-state-default.ui-priority-secondary {
	color: var(--dp-muted);
	opacity: .7;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar td.ui-datepicker-unselectable .ui-state-default,
.ui-datepicker.ui-widget table.ui-datepicker-calendar td.ui-state-disabled .ui-state-default {
	background: transparent;
	color: var(--dp-faint);
	box-shadow: none;
	cursor: default;
	opacity: 1;
}

.ui-datepicker.ui-widget table.ui-datepicker-calendar td.ui-state-disabled {
	opacity: 1;
}

/* Columna de semana (showWeek). */
.ui-datepicker.ui-widget table.ui-datepicker-calendar .ui-datepicker-week-col {
	color: var(--dp-faint);
	font-size: 11px;
}

/* Foco de teclado visible. */
.ui-datepicker.ui-widget a:focus-visible,
.ui-datepicker.ui-widget button:focus-visible {
	outline: 0;
	box-shadow: var(--dp-focus-ring);
}

/* Pie con «Hoy» y «Cerrar» (showButtonPanel). */
.ui-datepicker.ui-widget .ui-datepicker-buttonpane {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 8px 0 0;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--dp-border-soft);
	border-radius: 0;
	background: transparent;
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button,
.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-state-default,
.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-state-hover {
	float: none;
	height: 28px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--dp-border-control);
	border-radius: var(--ui-radius-sm, 6px);
	background: var(--dp-surface);
	color: var(--dp-text);
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 26px;
	opacity: 1;
	cursor: pointer;
	transition: background-color .12s, border-color .12s, color .12s;
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button:hover,
.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-state-hover {
	border-color: var(--dp-muted);
	background: var(--dp-hover);
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-datepicker-current {
	margin-right: auto;
	border-color: transparent;
	background: transparent;
	color: var(--dp-accent);
	font-weight: 600;
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-datepicker-current:hover,
.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-datepicker-current.ui-state-hover {
	border-color: transparent;
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

/* Varios meses (numberOfMonths > 1): un hueco entre meses en vez de bordes. jQuery UI fija el
   ancho en linea (17em por mes), asi que las celdas se bajan para que sigan siendo cuadradas. */
.ui-datepicker.ui-widget.ui-datepicker-multi {
	--dp-cell: 28px;
}

.ui-datepicker.ui-widget.ui-datepicker-multi .ui-datepicker-group {
	padding: 0 6px;
}

.ui-datepicker.ui-widget.ui-datepicker-multi .ui-datepicker-group table {
	width: 100%;
	margin: 0;
}

.ui-datepicker.ui-widget.ui-datepicker-multi .ui-datepicker-group .ui-datepicker-header {
	border: 0;
}

/* ------------------------------------------------------------------------------------------
 * 2. Bootstrap Datetimepicker 4 (Eonasdan): .bootstrap-datetimepicker-widget.dropdown-menu
 *    Vistas: .datepicker-days/-months/-years/-decades y .timepicker (con sideBySide, en dos
 *    columnas). Las flechas y los botones usan glyphicons, que se dejan como estan.
 * ------------------------------------------------------------------------------------------ */

body .bootstrap-datetimepicker-widget.dropdown-menu,
body.theme-mode-night.ui-modern .bootstrap-datetimepicker-widget.dropdown-menu {
	/* Con sideBySide cada columna de dias mide ~30px: celdas cuadradas. */
	--dp-cell: 30px;
	padding: 10px;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
	color: var(--dp-text);
	font-size: 13px;
	animation: hpc-dp-in .14s ease-out;
}

/* Las pestañas de la burbuja apuntan al campo: mismo color que el borde y el fondo. */
.bootstrap-datetimepicker-widget.dropdown-menu.bottom::before {
	border-bottom-color: var(--dp-border);
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom::after {
	border-bottom-color: var(--dp-surface);
}

.bootstrap-datetimepicker-widget.dropdown-menu.top::before {
	border-top-color: var(--dp-border);
}

.bootstrap-datetimepicker-widget.dropdown-menu.top::after {
	border-top-color: var(--dp-surface);
}

.bootstrap-datetimepicker-widget.dropdown-menu table {
	border-collapse: separate;
	border-spacing: 2px;
}

.bootstrap-datetimepicker-widget.dropdown-menu table th,
.bootstrap-datetimepicker-widget.dropdown-menu table td {
	border: 0;
	border-radius: var(--dp-cell-radius);
	background: transparent;
	text-shadow: none;
}

/* Cabecera: flechas y «mes año» (que cambia de vista). */
.bootstrap-datetimepicker-widget.dropdown-menu table thead tr:first-child th {
	height: 32px;
	line-height: 32px;
	color: var(--dp-muted);
	transition: background-color .12s, color .12s;
}

.bootstrap-datetimepicker-widget.dropdown-menu table thead tr:first-child th.picker-switch {
	color: var(--dp-text);
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
}

.bootstrap-datetimepicker-widget.dropdown-menu table thead tr:first-child th:hover {
	background: var(--dp-hover);
	color: var(--dp-text);
}

.bootstrap-datetimepicker-widget.dropdown-menu table thead tr:first-child th.disabled,
.bootstrap-datetimepicker-widget.dropdown-menu table thead tr:first-child th.disabled:hover {
	background: transparent;
	color: var(--dp-faint);
}

/* Dias de la semana. */
.bootstrap-datetimepicker-widget.dropdown-menu table th.dow {
	height: 28px;
	line-height: 28px;
	color: var(--dp-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.day {
	height: var(--dp-cell);
	line-height: var(--dp-cell);
	color: var(--dp-text);
	transition: background-color .12s, color .12s, box-shadow .12s;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.day:hover,
.bootstrap-datetimepicker-widget.dropdown-menu table td.hour:hover,
.bootstrap-datetimepicker-widget.dropdown-menu table td.minute:hover,
.bootstrap-datetimepicker-widget.dropdown-menu table td.second:hover,
.bootstrap-datetimepicker-widget.dropdown-menu table td span:hover {
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.old,
.bootstrap-datetimepicker-widget.dropdown-menu table td.new,
.bootstrap-datetimepicker-widget.dropdown-menu table td span.old {
	color: var(--dp-muted);
	opacity: .7;
}

/* Hoy: el triangulo de la esquina pasa a anillo de acento. */
.bootstrap-datetimepicker-widget.dropdown-menu table td.today {
	color: var(--dp-accent);
	font-weight: 600;
	box-shadow: inset 0 0 0 1.5px var(--dp-accent);
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.today::before {
	display: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.active,
.bootstrap-datetimepicker-widget.dropdown-menu table td.active:hover,
.bootstrap-datetimepicker-widget.dropdown-menu table td span.active,
.bootstrap-datetimepicker-widget.dropdown-menu table td span.active:hover {
	background: var(--dp-accent);
	color: var(--dp-on-accent);
	font-weight: 600;
	box-shadow: none;
	opacity: 1;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.disabled,
.bootstrap-datetimepicker-widget.dropdown-menu table td.disabled:hover,
.bootstrap-datetimepicker-widget.dropdown-menu table td span.disabled,
.bootstrap-datetimepicker-widget.dropdown-menu table td span.disabled:hover {
	background: transparent;
	color: var(--dp-faint);
	box-shadow: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu table td.cw {
	color: var(--dp-faint);
}

/* Meses, años, decadas, horas y minutos: celdas redondeadas como los dias. */
.bootstrap-datetimepicker-widget.dropdown-menu table td span {
	border-radius: var(--dp-cell-radius);
	color: var(--dp-text);
	transition: background-color .12s, color .12s;
}

/* Reloj (timepicker): flechas y numeros sin el aspecto de boton de Bootstrap. */
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker a[data-action],
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker .btn[data-action] {
	border: 0;
	border-radius: var(--dp-cell-radius);
	background: transparent;
	color: var(--dp-muted);
	box-shadow: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu .timepicker a[data-action]:hover,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker .btn[data-action]:hover {
	background: var(--dp-hover);
	color: var(--dp-text);
}

/* El glifo de la flecha es un <span> dentro de la celda: sin el «sobre» de las casillas. */
.bootstrap-datetimepicker-widget.dropdown-menu table td a[data-action] span,
.bootstrap-datetimepicker-widget.dropdown-menu table td a[data-action] span:hover {
	background: transparent;
	color: inherit;
}

.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-hour,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-minute,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-second {
	color: var(--dp-text);
	font-size: 20px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-hour:hover,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-minute:hover,
.bootstrap-datetimepicker-widget.dropdown-menu .timepicker-second:hover {
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

/* Fecha y hora lado a lado (sideBySide): una linea fina separa el reloj del calendario. */
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs .row > .timepicker {
	border-left: 1px solid var(--dp-border-soft);
}

/* Barra de botones (Hoy, Borrar, Cerrar, cambiar a la hora). */
.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch.accordion-toggle {
	border-top: 1px solid var(--dp-border-soft);
}

.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td span,
.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td a {
	border-radius: var(--dp-cell-radius);
	color: var(--dp-muted);
}

.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td span:hover,
.bootstrap-datetimepicker-widget.dropdown-menu .picker-switch td a:hover {
	background: var(--dp-hover);
	color: var(--dp-accent);
}

/* ------------------------------------------------------------------------------------------
 * 3. MonthPicker de KidSysco 3 (botones .ui-button de jQuery UI): div.month-picker >
 *    .month-picker-header (anterior, «Año 2026» que abre el salto de años, siguiente) +
 *    table.month-picker-month-table (12 meses, o 12 años en el salto). Mes actual =
 *    .ui-state-highlight; mes elegido = .ui-state-active.
 * ------------------------------------------------------------------------------------------ */

body .month-picker.ui-widget {
	box-sizing: border-box;
	width: 260px;
	padding: 10px;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow);
	color: var(--dp-text);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	animation: hpc-dp-in .14s ease-out;
}

.month-picker.ui-widget .month-picker-header {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--dp-text);
}

.month-picker.ui-widget .month-picker-year-table {
	width: 100%;
	border-spacing: 0;
}

.month-picker.ui-widget .month-picker-year-table td {
	padding: 0;
}

.month-picker.ui-widget .month-picker-year-table .ui-button {
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--dp-cell-radius);
	background: transparent;
	color: var(--dp-muted);
	font-size: 13px;
	box-shadow: none;
	cursor: pointer;
	opacity: 1;
	transition: background-color .12s, color .12s;
}

.month-picker.ui-widget .month-picker-year-table .month-picker-title .ui-button {
	width: 100%;
	color: var(--dp-text);
	font-size: 14px;
	font-weight: 600;
}

.month-picker.ui-widget .month-picker-year-table .ui-button-text {
	padding: 0;
	line-height: 32px;
}

.month-picker.ui-widget .month-picker-year-table .ui-button:hover,
.month-picker.ui-widget .month-picker-year-table .ui-button.ui-state-hover,
.month-picker.ui-widget .month-picker-year-table .ui-button.ui-state-focus {
	background: var(--dp-hover);
	color: var(--dp-text);
}

.month-picker.ui-widget .month-picker-year-table .ui-button.ui-state-disabled {
	background: transparent;
	color: var(--dp-faint);
	cursor: default;
}

.month-picker.ui-widget .month-picker-year-table .ui-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	overflow: hidden;
	text-indent: -99999px;
	background: currentColor;
	-webkit-mask: var(--dp-chevron-left) center / 16px 16px no-repeat;
	mask: var(--dp-chevron-left) center / 16px 16px no-repeat;
}

.month-picker.ui-widget .month-picker-year-table .month-picker-next .ui-icon {
	-webkit-mask-image: var(--dp-chevron-right);
	mask-image: var(--dp-chevron-right);
}

.month-picker.ui-widget .month-picker-month-table {
	width: 100%;
	border-spacing: 4px;
}

.month-picker.ui-widget .month-picker-month-table td {
	height: auto;
	padding: 0;
}

.month-picker.ui-widget .month-picker-month-table td .ui-button {
	display: block;
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--dp-cell-radius);
	background: transparent;
	color: var(--dp-text);
	font-size: 13px;
	font-weight: 500;
	box-shadow: none;
	opacity: 1;
	transition: background-color .12s, color .12s, box-shadow .12s;
}

.month-picker.ui-widget .month-picker-month-table td .ui-button .ui-button-text {
	padding: 0;
	line-height: 36px;
}

.month-picker.ui-widget .month-picker-month-table td .ui-button:hover,
.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-hover,
.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-focus {
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-highlight {
	background: transparent;
	color: var(--dp-accent);
	font-weight: 600;
	box-shadow: inset 0 0 0 1.5px var(--dp-accent);
}

.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-highlight:hover,
.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-highlight.ui-state-hover {
	background: var(--dp-accent-soft);
	color: var(--dp-accent-strong);
}

.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-active,
.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-active:hover,
.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-active.ui-state-hover {
	background: var(--dp-accent);
	color: var(--dp-on-accent);
	font-weight: 600;
	box-shadow: none;
}

.month-picker.ui-widget .month-picker-month-table td .ui-button.ui-state-disabled {
	background: transparent;
	color: var(--dp-faint);
	box-shadow: none;
	cursor: default;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	#ui-datepicker-div.ui-datepicker.ui-widget,
	body .bootstrap-datetimepicker-widget.dropdown-menu,
	body.theme-mode-night.ui-modern .bootstrap-datetimepicker-widget.dropdown-menu,
	body .month-picker.ui-widget {
		animation: none;
	}
}