/*
 * fx-datepicker.css
 * Estilos del calendario vanilla. Neutros y themeables vía custom properties
 */

.fx-datepicker {
	/* Anula el centrado por defecto que el user-agent aplica a [popover]. */
	position: fixed;
	inset: auto;
	margin: 0;

	z-index: 2000;
	width: 15rem;
	padding: .5rem;
	border: 1px solid var(--fx-dp-border, #d0d5dd);
	border-radius: .5rem;
	background: var(--fx-dp-bg, #fff);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
	color: var(--fx-dp-fg, #1f2937);
	font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	user-select: none;
}

/* --- Header: navegación de mes --- */

.fx-dp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .4rem;
}

.fx-dp-label {
	font-weight: 600;
}

.fx-dp-nav {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: .375rem;
	background: transparent;
	color: inherit;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.fx-dp-nav:hover {
	background: var(--fx-dp-hover, #f2f4f7);
}

/* --- Encabezado de días de la semana --- */

.fx-dp-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: .15rem;
}

.fx-dp-week span {
	padding: .15rem 0;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-dp-muted, #98a2b3);
}

/* --- Grilla de días --- */

.fx-dp-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
}

.fx-dp-day {
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: .375rem;
	background: transparent;
	color: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.fx-dp-day:hover {
	background: var(--fx-dp-hover, #f2f4f7);
}

.fx-dp-other {
	color: var(--fx-dp-muted, #c4c9d4);
}

.fx-dp-today {
	font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--fx-dp-border, #d0d5dd);
}

.fx-dp-selected,
.fx-dp-selected:hover {
	background: var(--fx-dp-accent, #2563eb);
	color: #fff;
}