html, body{
	font-size: 16px;
	background:#F9F9F9;
	color:#000;
	font-family: 'Roboto Condensed', sans-serif;
}

.contenedor{
	min-height:100dvh;
	display: grid;
	grid-template-columns: minmax(163px, 200px) auto;
	grid-template-rows: 100%;
	/*
	font-family: 'Segoe UI', sans-serif;
	*/
}

.lateral{
	min-height:100dvh;
	max-height:100dvh;
	position:sticky;
	top:0px;
	border-right:0px solid #63C7C1;
	
	display: grid;
	grid-template-rows: min-content 1fr min-content;
	align-items: start;
	
	background-image: linear-gradient(0deg, rgba(192, 235, 228, 0.9) 0%, rgba(98, 199, 193, 0.9) 100%);
	color:#fff;
	/*
	*/
}

.logolateral{
	padding:10px 20px;
}

.logo_lateral{
	max-height:148px;
	max-width:88px;
	width:100%;
	aspect-ratio: 22 / 37;
	margin: 0px auto;
	background-image:url('../imgs/logo_login.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 50%;
}

.menulateral{
	background-color:rgba(0,0,0,0.125);
	border-radius:10px;
	margin:0px 10px;
	padding:10px;
}

.menulateral .fas{
	font-size:1.25rem;
}

.item_menu{
	color:#fff;
	text-decoration:none;
	display:block;
	padding:10px;
	white-space:nowrap;
}

.inferiorlateral{
	padding:10px 20px;
}

.principal{
	display: grid;
	grid-template-rows: min-content 1fr;
}

.barrasuperior{
	display: grid;
	grid-template-columns: 1fr min-content;
	align-items: center;
	gap:20px;
	
	border-bottom:2px solid #63C7C1;
	padding:20px;
	transition: all 0.3s ease;
}

.barrasuperior > :first-child{
	font-weight:bold;
	font-size:1.4rem;
	transition: all 0.3s ease;
}

.barrasuperior :last-child {
}

.contenido{
	padding:20px;
	transition: all 0.3s ease;
}

#breadcrumb{
	margin-bottom:20px;
}


/******************************************/
/******************************************/
/******************************************/

/**/

/* El contenedor del switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

/* Ocultamos el checkbox original */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* La base del switch (el fondo) */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

/* El círculo que se mueve */
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Color de fondo cuando está activado */
input:checked + .slider {
  background-color: #35db35;
}

/* Movimiento del círculo al activar */
input:checked + .slider:before {
  transform: translateX(24px);
}

/**/

/******************************************/
/******************************************/
/******************************************/