/**
 * Jet Travel Buscador.
 */

.jt-buscador {
	background: var(--jt-surface, #fff);
	border: 1px solid var(--jt-line, #dbe6e8);
	border-radius: 22px;
	padding: 22px;
	box-shadow: 0 40px 70px -50px rgba(44, 53, 56, .5);
}

.jt-buscador__titulo {
	font-family: var(--jt-fuente-titulo, "Archivo"), sans-serif;
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 16px;
	color: var(--jt-ink, #2c3538);
}

/* ----------------------------------------------------------- Pestanas */
.jt-buscador__pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--jt-line, #dbe6e8);
}

.jt-buscador__pestana {
	font-family: var(--jt-fuente-texto, inherit);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jt-muted, #5d6a6e);
	background: transparent;
	border: 1px solid transparent;
	padding: 9px 15px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, color .2s;
	white-space: nowrap;
}
.jt-buscador__pestana:hover { background: var(--jt-soft, #e4f2f4); color: var(--jt-ink, #2c3538); }
.jt-buscador__pestana.is-activa {
	background: var(--jt-primary, #12879b);
	color: #fff;
}
/* Misma especificidad que ".jt-buscador__pestana:hover" (2 puntos cada una):
   sin esta regla, pasar el mouse sobre la pestana activa dependeria del
   orden de declaracion para no volverse texto oscuro. La dejamos explicita. */
.jt-buscador__pestana.is-activa:hover {
	background: var(--jt-primary-dark, #0b6577);
	color: #fff;
}

/* ------------------------------------------------------------- Campos */
.jt-buscador__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	align-items: end;
}

.jt-buscador__campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}
/* Antes ocupaba 2 columnas del grid; se deja del mismo ancho que los demas
   campos para que el formulario se vea mas compacto en conjunto. */
.jt-buscador__campo--ancho { grid-column: span 1; }
.jt-buscador__campo[hidden] { display: none; }

.jt-buscador__campo > span {
	font-family: var(--jt-fuente-mono, monospace);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jt-subtle, #7c8b8f);
}

.jt-buscador input[type="text"],
.jt-buscador input[type="date"],
.jt-buscador select {
	font-family: var(--jt-fuente-texto, inherit);
	font-size: 15px;
	font-weight: 500;
	color: var(--jt-ink, #2c3538);
	padding: 14px 12px;
	border: 1px solid var(--jt-line-3, #d5e1e3);
	border-radius: var(--jt-r-field, 12px);
	background: var(--jt-field, #f8fbfb);
	width: 100%;
	min-width: 0;
}
.jt-buscador input[type="text"] { font-size: 15.5px; font-weight: 600; }

/* Fechas de ida y regreso: mismo alto que los demas campos pero mas
   angostas, ya que dd/mm/aaaa no necesita tanto espacio como el resto. */
.jt-buscador input[type="date"] {
	font-size: 13.5px;
	padding: 14px 8px;
}

.jt-buscador__acciones {
	/* Es hijo directo de .jt-buscador__campos (un grid): sin esto, el grid
	   lo trata como una celda mas (1fr) en vez de una fila completa, y los
	   botones de adentro no tienen espacio para ir uno al lado del otro. */
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	align-items: end;
}
.jt-buscador__acciones .jt-btn {
	/* Ancho fijo e igual para los dos botones (el que necesita "Enviar por
	   WhatsApp"), sin crecer para llenar la fila: quedan del mismo tamano y
	   alineados a la izquierda, con el resto del ancho vacio a su derecha. */
	flex: 0 0 auto;
	width: 195px;
	max-width: 100%;
	border-radius: var(--jt-r-field, 12px);
	padding: 16px 10px;
	font-size: 14.5px;
	height: 51px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	box-shadow: none;
	white-space: nowrap;
}
.jt-buscador__wa {
	background: transparent;
	border: 1px solid var(--jt-ink, #2c3538) !important;
	color: var(--jt-ink, #2c3538);
	font-size: 13.5px !important;
}
.jt-buscador__wa:hover { background: var(--jt-ink, #2c3538); color: #fff; }

/* ------------------------------------------------------------ Compacto */
.jt-buscador--compacto {
	box-shadow: none;
	padding: 18px;
	border-radius: var(--jt-r-card, 20px);
}
.jt-buscador--compacto .jt-buscador__campos { gap: 12px; }
.jt-buscador--compacto .jt-buscador__acciones .jt-btn { height: 47px; padding: 14px 12px; }

/* ---------------------------------------------------------- Resultados */
.jt-resultados { padding-block: 10px 40px; }

.jt-resultados__resumen {
	font-family: var(--jt-fuente-mono, monospace);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jt-subtle, #7c8b8f);
	margin: 0 0 26px;
}

.jt-resultados__vacio {
	background: var(--jt-surface, #fff);
	border: 1px solid var(--jt-line, #dbe6e8);
	border-radius: var(--jt-r-card, 20px);
	padding: 34px 28px;
	max-width: 640px;
}

.jt-resultados__paginacion { margin-top: 40px; }

@media (max-width: 700px) {
	.jt-buscador { padding: 18px; }
	.jt-buscador__campo--ancho { grid-column: 1 / -1; }
	.jt-buscador__campos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.jt-buscador__acciones { grid-column: 1 / -1; }
	.jt-buscador__acciones .jt-btn { flex: 1 1 auto; }
	.jt-buscador__pestanas { overflow-x: auto; flex-wrap: nowrap; }
}