/* Paso 1 de viaje para banners (peticion-banner.php): lo propio de viaje encima de salud-reducido-banner.css. */

.tvjb [hidden] { display: none !important; }

/* ---------- Opciones en botones (destino, motivo, uno o varios viajes) ---------- */
.tvjb-opciones { margin: 14px 0 0; }
.tvjb .tvjb-opciones .tsr-chips { flex-wrap: nowrap; gap: 6px; }
.tvjb .tvjb-opciones .tsr-chip { flex: 1 1 0; min-width: 0; }
.tvjb .tvjb-opciones .tsr-chip span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 4px 8px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.15;
	text-align: center;
}
.tvjb .tvjb-opciones.con-error .tsr-chip span { border-color: var(--rojo); }

/* Motivo y uno o varios viajes, uno al lado del otro (con estudios el segundo se oculta y el primero ocupa todo) */
.tvjb-dos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 var(--hueco); }
.tvjb-dos > [hidden] + *, .tvjb-dos > :only-child { grid-column: 1 / -1; }
.tvjb-dos:has(#tvjCubre[hidden]) { grid-template-columns: 1fr; }

/* ---------- Fechas y viajeros ---------- */
.tvjb-fechas { margin-top: 14px; }
.tvjb input[type="date"],
.tvjb input[type="number"] {
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--linea-fuerte);
	border-radius: 10px;
	background: var(--fondo-campo);
	color: var(--texto);
	font: inherit;
	font-size: 15px;
	box-shadow: none;
}
.tvjb input[type="date"]:focus { outline: none; border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(29, 74, 139, .15); }
.tvjb input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.tvjb .con-error input[type="date"] { border-color: var(--rojo); background: #fffafa; }
/* Dias del viaje, debajo de la fecha de vuelta (no dentro del campo, como la edad en salud) */
.tvjb .tvjb-dias { position: static; transform: none; display: block; margin: 3px 0 0; }
.tvjb .tvjb-dias:empty { display: none; }

.tvjb-contador { display: flex; align-items: stretch; height: 42px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: #fff; overflow: hidden; }
.tvjb-contador button { flex: none; width: 40px; padding: 0; border: 0; background: var(--azul-suave); color: var(--azul); font-size: 20px; font-weight: 700; cursor: pointer; }
.tvjb-contador button:hover { background: var(--azul); color: #fff; }
.tvjb .tvjb-contador input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: #fff; text-align: center; font-size: 16px; font-weight: 700; -moz-appearance: textfield; }
.tvjb-contador input::-webkit-outer-spin-button, .tvjb-contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tvjb .con-error .tvjb-contador { border-color: var(--rojo); }

.tvjb-ayuda { margin: 8px 0 0; color: var(--texto-suave); font-size: 12.5px; line-height: 1.35; }

/* ---------- Hueco estrecho (columna de un banner, movil) ---------- */
@container (max-width: 520px) {
	.tvjb-dos { grid-template-columns: 1fr; }
	/* Ida y vuelta arriba, viajeros debajo en toda la fila */
	.tvjb-fechas > .tsr-campo:last-child { flex-basis: 100%; }
}
@container (max-width: 360px) {
	.tvjb .tvjb-opciones .tsr-chips { flex-wrap: wrap; }
	.tvjb .tvjb-opciones .tsr-chip { flex: 1 1 30%; }
	/* Motivo (cuatro): de dos en dos */
	.tvjb .tvjb-opciones[data-grupo="motivo"] .tsr-chip { flex-basis: 40%; }
}

/* Movil: campos con letra de 16px (ver el final de salud-reducido-banner.css): con menos, el iPhone amplia la
   pantalla al tocar un campo. */
@media (max-width: 767.98px) {
	.tvjb input:not([type="checkbox"]):not([type="radio"]),
	.tvjb select { font-size: 16px; }
}