:root {
	--body-width: 100vw;
	--body-height: 100vh;
	--content-width: 100%;
	--content-height: 100%;
	--zoom: 1;
}
meta[name="viewport"] {
    width: device-width;
    initial-scale: 1.0;
}

html, body {
	overscroll-behavior: none;	/* prevent reload page on scroll-y em navegadores modernos */
	-webkit-overflow-scrolling: touch;	/* prevent reload page on scroll-y em navegadores modernos no iOS 15 não resolveu */
}

/* força INPUTs padrão para iOS */
@supports (-webkit-touch-callout: none) {

	button,
	input[type=button],
	input[type=submit] {
		background-color: #DDD;
		height: 24px;
		border: 1px solid #777; 
		border-radius: 4px !important;
		padding: 0 5px 0 5px;
		cursor: pointer;
		font-weight: normal;
		-webkit-text-fill-color: #000;
	}
	
	input[type=button]:hover:not([disabled]),
	input[type=submit]:hover:not([disabled]) {
		background-color: #CCC;
		border: 1px solid #444 ;
		border-radius: 4px !important;
		color: #000;
	}
	
	button:disabled,
	input[type=button]:disabled,
	input[type=submit]:disabled {
		-webkit-text-fill-color: #777;
	}
	
	input {
		appearance: none;
		-webkit-text-fill-color: #000; /* Override iOS / Android font color change */
	}
	
	input[type=text],
	input[type=password],
	input[type=search] {
		border-radius: 0;
	}
	
	input:disabled,
	input[readonly],
	select:disabled,
	select[readonly],
	textarea:disabled,
	textarea[readonly] {
		background-color: #DDD;
		-webkit-text-fill-color: #777; /* Override iOS / Android font color change */
		opacity:1;
	}
}

/* Comum para qualquer orientação CONSIDERA DYSPLAY DE 800X600 como DESKTOP */
@media screen and (hover:none),
			 screen and (any-pointer:coarse),
			 screen and (max-width: 799px),
			 screen and (max-height: 599){

	.mobile body {
		display: block;
/*		width: var(--body-width); 
		height: var(--body-height);*/
	}
	.mobile input {
		border: 1px solid #000;
		color: #000;
	}
	.mobile .forceLandscape {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.mobile .full {
		position: relative;
	}
	
	.mobile .center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.mobile .tableDetalhes textarea {
		padding: 1vh 1vw;
	}

}
/* Orientação Paisagem */
@media screen and (orientation:landscape) and (hover:none),
			 screen and (orientation:landscape) and (any-pointer:coarse),
			 screen and (orientation:landscape) and (max-width: 799px){

	.mobile body {
		overflow-x: hidden;
		overflow-y: auto;
		touch-action: pan-y;
		padding: 1vw 2vh;
	}
	
	.mobile .forceLandscape {
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	.mobile .full {
		width: var(--content-width); 
		height: var(--content-height);
	}

	.mobile .center {
		width: 100vw;
		height: 100vh;
	}
	
	.mobile .full .rotated {
		position: static;
		transform: scale(var(--zoom));
		transform-origin: top left;
	}
	
	.mobile .center .rotated {
		transform: scale(calc(var(--zoom) * 0.8));
	}
	
	.mobile .divModal {
		align-items: flex-start;
		flex-direction: row;
		width: 98vw; 
		height: fit-content;
		margin: 2vh 1vw;
	}
	
	.mobile .divModal table {
		width: 100%;
	}
	
	.mobile .tableDetalhes td {
		padding: 0 0.75vw 0.75vw 0.75vw;
	}
	
	.mobile .tableDetalhes textarea {
		display: inline-block;
		height: calc(68px * var(--zoom));
		width: calc((98vw - 1.5vw - 2px) * 0.79); /* Menos padding do td menos border do textarea */
		margin: 0;
		float: left;
		font-size: 1rem;
	}
	
	.mobile #divComandos {
		width: calc((98vw - 1.5vw - 2px) * 0.20); 
		float: right;
	}
	
	.mobile #divComandos input[type=button],
	.mobile #divComandos input[type=submit] {
		height: auto;
		width: 100%;
		padding: 1vh 2vw;
		font-size: 1.2rem;
		margin-bottom: 1vh;
	}
}

/* Orientação Retrato */
@media screen and (orientation: portrait) and (hover: none),
       screen and (orientation: portrait) and (any-pointer: coarse),
       screen and (orientation: portrait) and (max-width: 599px) {
			 
	.mobile body {
		overflow-x: auto;
		overflow-y: hidden;
		touch-action: pan-x;
		padding: 2vw;
	}
	
	.mobile .forceLandscape {
		overflow-x: auto;
		overflow-y: hidden;
	}
	
	.mobile .full,
	.mobile .center {
		width: var(--content-width); 
		height: var(--content-height);
	}

	.mobile .full .rotated {
		position: absolute;
		top: 0;
		left: 100%;
		transform: rotate(90deg) scale(var(--zoom));
		transform-origin: top left;
	}
	
	.mobile .center .rotated {
		transform: rotate(90deg) scale(calc(var(--zoom) * 0.8));
	}
	
	.mobile .details {
		display: block;
		width: 96vw; 
		height: 98vh;
		margin: 1vh 2vw;
	}
	
	.mobile .tableDetalhes {
		width: 100%;
	}
	
	.mobile .tableDetalhes textarea {
		height: calc(98vh * 0.4);
		font-size: 1.2rem;
	}

	.mobile .tableDetalhes input[type=button],
	.mobile .tableDetalhes input[type=submit] {
		height: auto;
		padding: 0.7vh 2vw;
		font-size: 1.3rem;
	}
}