/*
 * LHDS date picker.
 * Estilos neutros para que funcione tanto dentro de .lhds-form-wrap (front)
 * como en la tabla .form-table de wp-admin.
 */

.lhds-dp {
	/* Algunos navegadores (Chrome/Android en particular) repintan en oscuro
	 * los controles de formulario "sin estilo" cuando el sistema está en modo
	 * oscuro, aunque el resto de la página sea clara. Declarar el esquema de
	 * color evita que el calendario se vea con botones negros inesperados. */
	color-scheme: light;
	position: relative;
	display: block;
	max-width: 22rem;
}

/* En el formulario público el campo ocupa el mismo ancho que los demás. */
.lhds-form-wrap .lhds-dp {
	max-width: none;
}

.lhds-dp .lhds-dp-input {
	width: 100%;
	padding-right: 2.75rem !important;
	font-variant-numeric: tabular-nums;
}

.lhds-dp-toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: #4b5563;
	cursor: pointer;
	border-radius: 0 6px 6px 0;
}

.lhds-dp-toggle:hover,
.lhds-dp-toggle:focus-visible {
	color: #111827;
}

.lhds-dp-toggle svg {
	width: 1.15rem;
	height: 1.15rem;
}

.lhds-dp-panel {
	position: absolute;
	z-index: 9999;
	top: calc(100% + 6px);
	left: 0;
	width: 19.5rem;
	max-width: 100%;
	box-sizing: border-box;
	padding: .75rem;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
	font-size: 14px;
	line-height: 1.4;
	color: #111827;
	text-align: center;
}

.lhds-dp-panel[hidden] {
	display: none;
}

/* --- Cabecera: ‹ [mes] [año] › ------------------------- */
.lhds-dp-head {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: .6rem;
}

.lhds-dp-nav {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #111827;
	cursor: pointer;
}

.lhds-dp-nav:hover:not(:disabled) {
	background: #f3f4f6;
}

.lhds-dp-nav:disabled {
	opacity: .35;
	cursor: default;
}

/*
 * Mes / año: botón + lista propia, NO un <select>. Un <select> real es
 * blanco fácil para cualquier script del sitio que "mejora" los selects de
 * la página (Select2, Chosen, etc.) — en producción eso dejaba el
 * calendario congelado en la primera opción porque ese plugin redibuja su
 * propio widget y nunca ve los cambios que este script le hace al <select>
 * por debajo. Un botón normal no le interesa a esos plugins.
 */
.lhds-dp-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.lhds-dp-field:last-of-type {
	flex: 0 0 5.5rem;
}

.lhds-dp-select {
	width: 100%;
	min-height: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #111827;
	cursor: pointer;
}

.lhds-dp-select:hover {
	background: #f9fafb;
}

.lhds-dp-select[aria-expanded="true"] {
	border-color: var(--lhds-primary, #1a56db);
}

.lhds-dp-optionlist {
	position: absolute;
	z-index: 1;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 13rem;
	overflow-y: auto;
	margin: 0;
	padding: .25rem;
	list-style: none;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
	text-align: left;
}

.lhds-dp-optionlist[hidden] {
	display: none;
}

.lhds-dp-optionlist li {
	padding: .35rem .5rem;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
}

.lhds-dp-optionlist li:hover {
	background: #eef2ff;
}

.lhds-dp-optionlist li.is-selected {
	background: var(--lhds-primary, #1a56db);
	color: #fff;
	font-weight: 600;
}

/* --- Rejilla de días ---------------------------------- */
.lhds-dp-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	background: none;
}

.lhds-dp-grid th,
.lhds-dp-grid td {
	padding: 1px;
	border: 0;
	text-align: center;
	background: none;
}

.lhds-dp-grid th {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b7280;
	padding-bottom: .3rem;
}

.lhds-dp-day {
	width: 100%;
	min-width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	font-size: 13px;
	line-height: 1;
	color: #111827;
	cursor: pointer;
}

.lhds-dp-day:hover:not(:disabled) {
	background: #eef2ff;
}

.lhds-dp-day.is-selected {
	background: #1a56db;
	color: #fff;
	font-weight: 600;
}

.lhds-form-wrap .lhds-dp-day.is-selected {
	background: var(--lhds-primary, #1a56db);
}

.lhds-dp-day.is-disabled,
.lhds-dp-day:disabled {
	color: #c7cbd1;
	cursor: default;
}

/* --- Pie ---------------------------------------------- */
.lhds-dp-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid #eef0f3;
}

.lhds-dp-clear {
	padding: .2rem .5rem;
	border: 0;
	background: none;
	font-size: 13px;
	color: #4b5563;
	text-decoration: underline;
	cursor: pointer;
}

.lhds-dp-clear:hover {
	color: #111827;
}

/* --- País fijo (no seleccionable) --------------------- */
.lhds-static-value {
	margin: 0 0 .25rem;
	padding: .625rem .875rem;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #f9fafb;
	color: #374151;
	font-weight: 500;
}

.lhds-form-wrap .lhds-static-value {
	font-size: var(--lhds-size, 16px);
	font-family: var(--lhds-font, inherit);
	line-height: 1.5;
}