/*
 * Ajustes minimos para el movil (docs/12-PLAN-MEJORA-UX.md, bloque 7).
 * Lo carga WEB-INF/jspf/movil.jspf, junto con el viewport al ancho del movil, en el login y en el listado de reservas.
 * Todo va en pantallas de menos de 900 px: el escritorio no cambia. Sirve con el tema y sin el.
 * Fichero en ASCII: style.css esta en ISO-8859-1.
 */
@media (max-width: 900px) {

	/* ---------- Base ---------- */
	/* Campos de 16 px: con menos, Safari en el iPhone amplia la pagina al tocarlos */
	input[type=text], input[type=password], input:not([type]), select, textarea {
		font-size: 16px;
	}
	body {
		margin: 0;
	}
	.container {
		min-width: 0;
		margin-top: 8px;
		padding: 4px 8px 12px;
	}

	/* ---------- Login ---------- */
	body.pagina_login {
		background-size: 420px 420px, auto;
	}
	.form_login {
		box-sizing: border-box;
		width: calc(100% - 32px);
		max-width: 400px;
		margin: 5vh auto 24px;
		padding: 24px 20px 22px;
	}
	.form_login .login_logo img {
		max-width: 100%;
		height: auto;
	}
	.form_login .loginForm {
		width: auto;
	}
	.form_login .loginForm label {
		font-size: 14px;
	}
	.form_login .loginForm input.login-input {
		box-sizing: border-box;
		width: 100%;
		height: 46px;
		font-size: 16px;
	}
	.form_login .login_ayuda {
		font-size: 13px;
	}
	.form_login .loginForm .login_recordar label {
		font-size: 14px;
	}
	.form_login .loginForm .login_recordar input {
		width: 20px;
		height: 20px;
	}
	.form_login input.btn_login, .form_login input.btn_login:hover {
		width: 100%;
		height: 48px;
		font-size: 16px;
	}

	/* ---------- Cabecera: logotipo y usuario en una linea; debajo, la busqueda por localizador ---------- */
	#head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		height: auto;
		min-height: 0;
		padding: 8px 8px 0;
	}
	#head .logo {
		float: none;
		height: 30px;
		width: auto;
		margin: 0;
	}
	#header_banner, #head br, .div_calculadora {
		display: none;
	}
	#head .login {
		float: none;
		width: auto;
		height: auto;
		margin-left: auto;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	#head .login form {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	#head .login_usuario {
		float: none;
		width: auto;
		padding: 0;
		max-width: 38vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* El formulario lleva float y margen en linea */
	#head .busqueda_localizador {
		float: none !important;
		flex: 1 1 100%;
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0 !important;
	}
	#head .busqueda_localizador label {
		margin: 0;
		padding: 0;
	}
	#head .busqueda_localizador input[type=text] {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* ---------- Menu: pestanas en varias lineas y el submenu debajo, a todo el ancho ---------- */
	#divnav {
		height: auto;
		margin-top: 8px;
	}
	#nav {
		display: flex;
		flex-wrap: wrap;
		min-width: 0;
		height: auto;
		padding: 0 4px;
	}
	#nav li {
		padding-right: 2px;
	}
	#nav li a, #nav li.on a, #nav li.off a {
		min-width: 0;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	/* La pestana activa se deshace para que su submenu sea otra linea del menu */
	#nav li.on {
		display: contents;
	}
	#nav li.on > ul {
		display: block;
		position: static;
		order: 99;
		flex: 0 0 100%;
		height: auto;
		padding: 4px 0;
		overflow: hidden;
	}
	#nav li.on > ul li a {
		height: auto;
		padding: 4px 10px;
		line-height: 20px;
	}
	/* Sin raton, los submenus de las demas pestanas solo estorban */
	#nav li.off ul {
		display: none !important;
	}

	/* ---------- Listado de reservas ---------- */
	#reserva_busqueda {
		float: none;
		width: auto;
	}
	#reserva_busqueda .filtros_fila {
		margin-left: 0;
		gap: 8px 12px;
	}
	#reserva_busqueda .filtro {
		flex-wrap: wrap;
		white-space: normal;
		max-width: 100%;
	}
	#reserva_busqueda select, #reserva_busqueda #functioninput_hotel {
		max-width: 100%;
		margin-left: 0;
	}
	#reserva_busqueda .filtro_buscar {
		margin-left: 0;
	}
	/* Cada reserva en una linea: el grid se desplaza en horizontal dentro de su caja, con el localizador fijo a la
	   izquierda y la paginacion a la derecha */
	#reserva_listado {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#reserva_listado td {
		white-space: nowrap;
	}
	#reserva_listado > tbody > tr[class^="lin"] > td:first-child, #reserva_listado > tbody > tr.head > td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
	}
	#reserva_listado > tbody > tr[class^="lin"] > td:first-child {
		background-color: #ffffff;
	}
	#reserva_listado > tbody > tr[class^="lin1"] > td:first-child {
		background-color: #f7f9fb;
	}
	/* La celda de las flechas es ancha: sin fondo, para no tapar el texto; el fondo va solo tras los controles */
	#reserva_listado > tbody > tr.paginado > td:last-child {
		position: sticky;
		right: 0;
		z-index: 1;
		background: transparent;
	}
	#reserva_listado > tbody > tr.paginado > td:last-child > table {
		margin-left: auto;
		background-color: #f7f9fb;
	}
	/* El rango y el total, en dos lineas si hace falta, para que no los tapen las flechas */
	#reserva_listado .paginado .paginado_texto {
		display: inline-block;
		max-width: 190px;
		white-space: normal;
	}
}