@CHARSET "UTF-8";

* {
  box-sizing: border-box;
}

/* ── Page grid (home layout) ── */
#PageWrapper {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"content"
		"footer";
	margin: 0;
	min-width: 320px;
	min-height: 100vh;
}

/* ── Header ── */
#HeaderWrapper {
	grid-area: header;
	margin: 0;
	padding: 0 1rem;
}

#PageHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 3.5rem;
	width: 100%;
}

#ViasLogoPanel {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0.3rem;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

#ViasLogoPanel #ViasLogoImg {
	height: 2.4rem;
	width: auto;
}

#ViasLogoPanel #ViasLabel {
	font-size: 1.6rem;
	font-family: Verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	white-space: nowrap;
}

#UserFormPanel {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: flex-end;
	flex-shrink: 0;
}

/* ── Content ── */
#ContentWrapper {
	grid-area: content;
	width: 100%;
	max-width: 100vw;
	padding: 1.5rem 1.5rem 2rem;
}

#PageTittle {
	color: white;
	font-weight: bold;
	text-decoration: underline yellow;
	margin-bottom: 0.5rem;
}

/* ── Footer ── */
#FooterWrapper {
	grid-area: footer;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
}

#PageFooter {
	font-size: 0.8em;
	max-width: 100vw;
	width: 100%;
}

#PageFooter div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

#PageFooter > #Empresa {
	display: block;
}

#PageFooter > #Version {
	display: block;
	text-align: left;
	padding-left: 1em;
}

/* ── Messages ── */
body .ui-messages > div {
	padding: .5em;
}

body .ui-messages .ui-messages-close {
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	right: -1.5rem;
	top: 0rem;
}

/* ── Buscador ── */
.buscador {
	margin: 2rem auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	align-content: center;
}

.buscador h2 {
	font-weight: bolder;
}

.buscador input {
	box-sizing: border-box;
	width: 100%;
}

.buscador > .form-row {
	min-width: 33%;
}

.buscador > .form-row > span {
	flex-grow: 1;
}

/* ── Misc ── */
.ui-selection-column.checkbox-column {
	width: 1em;
	text-align: center;
}

.botonera {
	text-align: center;
	margin: 2em 10%;
}

.botonera .ui-button {
	margin: 0 0.75em;
}

.botones {
	padding: 1em 0 0 0;
	text-align: center;
}

.mainform {
	width: 100%;
	text-align: center;
}

table td.small-data {
	text-align: center;
}

/* ── Responsive ── */
@media screen and (max-width: 768px) {
	#ContentWrapper {
		padding: 1rem 0.75rem 1.5rem;
	}

	#HeaderWrapper {
		padding: 0 0.5rem;
	}

	#PageHeader {
		height: 3rem;
	}

	#ViasLogoPanel #ViasLogoImg {
		height: 2rem;
	}
}

@media screen and (max-width: 480px) {
	#ViasLogoPanel #ViasLabel {
		display: none;
	}

	#ContentWrapper {
		padding: 0.75rem 0.5rem 1rem;
	}
}