/*
 * N35 Branding
 * Ajustes responsive para la pantalla de acceso
 * Versi車n 0.1.1
 */

/* Permitir desplazamiento cuando la altura disponible sea reducida. */
body.bodylogin .n35-login-brand {
	width: 100% !important;
	max-width: 380px !important;
	margin: 0 auto 5px !important;
	padding: 0 0 5px !important;
	border-right: 0 !important;
	border-bottom: 1px solid #e2e7ed !important;
}

/* Evitar que paddings y bordes ensanchen la tarjeta. */
body.bodylogin *,
body.bodylogin *::before,
body.bodylogin *::after {
	box-sizing: border-box;
}

body.bodylogin .n35-login-brand,
body.bodylogin .n35-login-footer {
	width: 100%;
	max-width: 100% !important;
}


/*
 * Tabletas, DollyDroid y pantallas estrechas
 */
@media screen and (max-width: 900px) {

body.bodylogin .login_center.center {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;

	display: block !important;
	float: none !important;
	clear: both !important;

	width: calc(100% - 20px) !important;
	max-width: 620px !important;
	margin: 4px auto 8px !important;
}

	body.bodylogin form#login {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	body.bodylogin .login_table_title {
		margin: 0 auto 8px !important;
		padding: 0 8px !important;
		font-size: 12px !important;
		line-height: 1.3 !important;
	}

	body.bodylogin .login_table {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 20px 18px 14px !important;
	}

	body.bodylogin #login_line1,
	body.bodylogin #login_line2,
	body.bodylogin #login_left,
	body.bodylogin #login_right {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.bodylogin #login_left,
	body.bodylogin #login_right {
		float: none !important;
	}

	body.bodylogin #login_left {
		margin: 0 auto 12px !important;
		text-align: center !important;
	}

	body.bodylogin #login_left + br {
		display: none;
	}

	body.bodylogin #img_logo {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 160px !important;
	max-height: 38px !important;
	margin: 0 auto !important;
}

    body.bodylogin #login_right {
    	max-width: 380px !important;
    	margin: 0 auto !important;
    }

	body.bodylogin #login_right .tagtable {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.bodylogin .tdinputlogin {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;

		width: 100% !important;
		max-width: 100% !important;
	}

body.bodylogin #username,
body.bodylogin #password {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 290px !important;
	height: 36px !important;
}

	body.bodylogin .login_table input[type="text"],
	body.bodylogin .login_table input[type="password"] {
		max-width: 100%;
	}

	body.bodylogin #login-submit-wrapper {
	margin-top: 0 !important;
}

	body.bodylogin .n35-login-brand {
		margin-bottom: 14px !important;
		padding-right: 0 !important;
		padding-bottom: 12px !important;
		padding-left: 0 !important;
	}

	body.bodylogin .n35-login-footer {
    	width: 100% !important;
    	max-width: 380px !important;
    	margin: 4px auto 0 !important;
    	padding: 5px 0 0 !important;
    }
}


/*
 * Telè°·fonos y ventanas especialmente estrechas
 */
@media screen and (max-width: 480px) {

	body.bodylogin .login_center.center {
		width: calc(100% - 12px) !important;
		margin-top: 6px !important;
	}

	body.bodylogin .login_table {
		padding: 17px 13px 12px !important;
		border-radius: 10px !important;
	}

	body.bodylogin .n35-login-brand > div:first-child {
		flex-wrap: wrap;
		gap: 6px !important;
	}

	body.bodylogin .n35-login-brand span:first-child {
		font-size: 26px !important;
	}

	body.bodylogin #img_logo {
		max-width: min(200px, 70vw) !important;
		max-height: 66px !important;
	}

	body.bodylogin .n35-login-footer {
		font-size: 10.5px !important;
	}
}


/*
 * DollyDroid, tabletas horizontales y pantallas de poca altura
 */
@media screen and (max-height: 720px) and (max-width: 1000px) {

	body.bodylogin .login_center.center {
		margin-top: 4px !important;
		margin-bottom: 10px !important;
	}

	body.bodylogin .login_table {
		padding-top: 13px !important;
		padding-bottom: 9px !important;
	}

	body.bodylogin .login_table_title {
		margin-bottom: 5px !important;
	}

	body.bodylogin .n35-login-brand {
		margin-bottom: 9px !important;
		padding-bottom: 9px !important;
	}

	body.bodylogin #login_left {
		margin-bottom: 5px !important;
	}

	body.bodylogin #img_logo {
		max-height: 56px !important;
	}

	body.bodylogin .trinputlogin {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	body.bodylogin #login-submit-wrapper {
		margin-top: 0 !important;
	}

	body.bodylogin .n35-login-footer {
		margin-top: 9px !important;
		padding-top: 8px !important;
	}
}

/*
/*
 * Tabletas horizontales y DollyDroid.
 * Mantiene una sola columna, pero reduce alturas y espacios
 * para que la acci¨®n principal quede visible sin desplazamiento.
 */
@media screen
	and (orientation: landscape)
	and (min-width: 600px)
	and (max-height: 760px) {

	body.bodylogin .login_center.center {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;

		width: calc(100% - 24px) !important;
		max-width: 620px !important;
		margin: 4px auto 10px !important;
	}

	body.bodylogin .login_table_title {
		margin: 0 auto 4px !important;
		padding: 0 !important;
		font-size: 11px !important;
		line-height: 1.2 !important;
	}

	body.bodylogin .login_table {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 680px !important;
		margin: 0 !important;
		padding: 8px 18px 6px !important;
	}

	body.bodylogin .n35-login-brand {
		width: 100% !important;
		max-width: 420px !important;
		margin: 0 auto 8px !important;
		padding: 0 0 8px !important;
		border-right: 0 !important;
		border-bottom: 1px solid #e2e7ed !important;
	}

	body.bodylogin .n35-login-brand > div:first-child {
		margin-bottom: 4px !important;
	}

	body.bodylogin .n35-login-brand span:first-child {
		font-size: 26px !important;
	}

	body.bodylogin #login_line1,
	body.bodylogin #login_line2 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.bodylogin #login_left,
	body.bodylogin #login_right {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.bodylogin #login_left {
		margin: 0 auto 3px !important;
		text-align: center !important;
	}

	body.bodylogin #login_left + br {
		display: none !important;
	}

	body.bodylogin #img_logo {
		display: block !important;
		width: auto !important;
		height: auto !important;
		max-width: 175px !important;
		max-height: 43px !important;
		margin: 0 auto !important;
	}

	body.bodylogin #login_right {
		max-width: 420px !important;
		margin: 0 auto !important;
	}

	body.bodylogin #login_right .tagtable {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.bodylogin .trinputlogin {
		margin-top: 2px !important;
		margin-bottom: 2px !important;
	}

	body.bodylogin .tdinputlogin {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 7px !important;
		width: 100% !important;
	}

	body.bodylogin #username,
	body.bodylogin #password {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 320px !important;
		height: 38px !important;
	}

	body.bodylogin #login-submit-wrapper {
		margin-top: 2px !important;
	}

	body.bodylogin .butActionLogin {
		min-height: 36px !important;
		padding: 6px 16px !important;
	}

	body.bodylogin .aloginpasswordforgotten {
		font-size: 11.5px !important;
	}

	body.bodylogin .n35-login-footer {
		width: 100% !important;
		max-width: 420px !important;
		margin: 6px auto 0 !important;
		padding: 7px 0 0 !important;
	}

	body.bodylogin .n35-login-footer > div {
		margin-bottom: 3px !important;
		line-height: 1.25 !important;
	}

	body.bodylogin .n35-login-footer > div:last-child {
		margin-bottom: 0 !important;
	}
}

/*
 * Modo horizontal compacto para tabletas y DollyDroid.
 * Prioriza el acceso y centra la tarjeta en pantallas de poca altura.
 */
@media screen
	and (orientation: landscape)
	and (min-width: 600px)
	and (max-height: 760px) {

	body.bodylogin .login_center.center {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: 50% !important;

		display: block !important;
		float: none !important;
		clear: both !important;

		width: calc(100% - 20px) !important;
		max-width: 520px !important;

		margin: 2px 0 6px !important;
		transform: translateX(-50%) !important;
	}

	body.bodylogin .login_table_title {
		margin: 0 auto 3px !important;
		padding: 0 !important;
		font-size: 10.5px !important;
		line-height: 1.1 !important;
	}

	body.bodylogin .login_table {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 520px !important;

		margin: 0 !important;
		padding: 7px 16px 6px !important;
	}

	body.bodylogin .n35-login-brand {
		width: 100% !important;
		max-width: 350px !important;

		margin: 0 auto 4px !important;
		padding: 0 0 4px !important;

		border-right: 0 !important;
		border-bottom: 1px solid #e2e7ed !important;
	}

	body.bodylogin .n35-login-brand > div:first-child {
		margin-bottom: 3px !important;
	}

	body.bodylogin .n35-login-brand > div:last-child {
		display: none !important;
	}

	body.bodylogin .n35-login-brand span:first-child {
		font-size: 24px !important;
	}

	body.bodylogin #login_left {
		margin: 0 auto 1px !important;
	}

	body.bodylogin #login_left + br {
		display: none !important;
	}

	body.bodylogin #img_logo {
		display: block !important;
		width: auto !important;
		height: auto !important;

		max-width: 150px !important;
		max-height: 34px !important;

		margin: 0 auto !important;
	}

	body.bodylogin #login_right {
		width: 100% !important;
		max-width: 350px !important;
		margin: 0 auto !important;
	}

	body.bodylogin .trinputlogin {
		margin-top: 1px !important;
		margin-bottom: 1px !important;
	}

	body.bodylogin .tdinputlogin {
		gap: 6px !important;
	}

	body.bodylogin #username,
	body.bodylogin #password {
		max-width: 275px !important;
		height: 34px !important;
	}

	body.bodylogin #login_line2 > br {
		display: none !important;
	}

	body.bodylogin #login-submit-wrapper {
		margin-top: 1px !important;
	}

	body.bodylogin .butActionLogin {
		min-height: 34px !important;
		padding: 5px 14px !important;
	}

	body.bodylogin #login_line2 > .center {
		margin-top: 2px !important;
	}

	body.bodylogin .aloginpasswordforgotten {
		font-size: 11px !important;
	}

	body.bodylogin .n35-login-footer {
		width: 100% !important;
		max-width: 350px !important;

		margin: 3px auto 0 !important;
		padding: 4px 0 0 !important;
	}

	body.bodylogin .n35-login-footer > div:first-child {
		display: none !important;
	}

	body.bodylogin .n35-login-footer > div {
		margin-bottom: 2px !important;
		line-height: 1.2 !important;
	}

	body.bodylogin .n35-login-footer > div:last-child {
		margin-bottom: 0 !important;
	}
}