/* ==========================================================================
   ESTILOS COMUNES - Compartidos entre todas las resoluciones
   ========================================================================== */

/* Reset CSS y configuración base */
html, body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100%;
	/* overflow-x: hidden; */
}

*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
}

/* Variables CSS */
:root {
	--color-primary: rgb(1, 86, 145);
}

/* Configuración de fuentes */
body {
	font-family: "Roboto Condensed", sans-serif;
	/*height: 100vh;*/
}

/* Layout principal con Grid */
.container-fluid {
	display: grid;
	grid-template: 55px 1fr 50px / 1fr;
	grid-gap: 0px;
	height: 100%;
	grid-template-areas:
		"header"
		"container"
		"footer";
}

/* Áreas del grid */
.header {
	grid-area: header;
	width: 100vw;
	margin: 0 auto;
}

.contenido {
	grid-area: container;
	height: calc(100vh - 105px);
	width: 100vw;
}

/* Footer común */
.footer {
	grid-area: footer;
	position: absolute;
	bottom: 0;
	width: 100vw;

	border-top: 5px solid rgb(252, 173, 060);
	color: rgb(000, 077, 139);
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.25em;
	font-weight: bolder;
	/* padding: 10px; */
	background-color: rgb(240, 240, 240);

	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer .icon-whatsapp {
	color: green;
	font-weight: bolder;
}

.footer .icon-instagram,
.footer .icon-location2 {
	color: red;
	font-weight: bolder;
}

.footer .icon-facebook2 {
	color: blue;
	font-weight: bolder;
	margin-left: 10px; /* Separación del ícono de Instagram */
}

/* Estilos de login */
.login {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
}

.card {	
	width: 400px;
}

.container.login {
	/* background-color: rgba(128, 128, 128, 0.1); */
	padding: 20px;
	border-radius: 8px;
}