/**
 * Barra Search — estilos del campo de fechas.
 * Pensado para calzar visualmente con los widgets de Estatik ya existentes
 * (fondo gris claro, inputs blancos redondeados, acento naranja).
 */

.es-field__barra-dates {
	margin-bottom: 16px;
	flex: 0 0 auto; /* que no se estire para ocupar todo el ancho del nav horizontal */
	width: 100%;
	max-width: 320px;
}

.barra-dates__label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: 14px;
}

.barra-dates__inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border-radius: 8px;
	padding: 4px;
}

.barra-dates__inputs input[type="date"],
.barra-dates__inputs input[type="text"] {
	flex: 1 1 0;
	min-width: 0;
	border: none;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 12px; /* -1pt adicional, texto seguía viéndose grande en sidebars angostos */
	background: transparent;
	color: #1a1a1a;
}

.barra-dates__inputs input:focus {
	outline: 2px solid #f5891f;
	outline-offset: -2px;
}

.barra-dates__inputs input::placeholder,
.barra-dates__inputs .flatpickr-alt-input::placeholder {
	color: #9aa1a8;
}

.barra-dates__sep {
	color: #9aa1a8;
	flex: 0 0 auto;
}

/* Layout horizontal (widget de home): el campo entra como un item más del nav */
.es-search-nav--dropdowns .es-field__barra-dates {
	margin-bottom: 0;
}

/* flatpickr: el altInput que generamos hereda el mismo estilo que el input original */
.barra-dates__inputs .flatpickr-alt-input {
	flex: 1 1 0;
	min-width: 0;
	border: none;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 12px;
	background: transparent;
	color: #1a1a1a;
}

@media (max-width: 480px) {
	.barra-dates__inputs input[type="date"],
	.barra-dates__inputs input[type="text"],
	.barra-dates__inputs .flatpickr-alt-input {
		/* 16px evita el auto-zoom de iOS Safari al hacer foco en el input */
		font-size: 16px;
	}
}