* {
	box-sizing: border-box;
}

body {
	margin: 0; padding: 0px; width: 100%; background-color: #fff;
	font-family: "Roboto"; font-size: 16px; line-height: 23px;
}

a { color: darkblue; }
a:hover { color: blue; }

input, button { font-size: 16px; }
input { padding: 6px 8px; border: 1px solid #999; border-radius: 5px; }

input[type=text],
input[type=password] { width: 100%; }

input[type=text],
input[type=password],
button,
select { min-height: 37px; }

button { padding: 6px 10px; letter-spacing: .6px; }

select { padding: 5px 6px; }

input[type=text],
input[type=password],
input[type=email],
textarea,
button,
select { border: 1px solid #9f9f9f; border-radius: 4px; }

.visually-hidden { display: none; }

body {
	> * {
		max-width: 100%;
	}
}

#encabezado {
	display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: stretch;
	min-height: 76px;
	
	> * {
		display: flex; align-items: center;
	}
	> *:first-child,
	> *:last-child	{
		padding: 0px 12px;
	}
	
	#logotipo {
		img {
			height: 47px;
		}
	}
	
	.navbar.navbar-expand-md {
		
	}
	
	.navbar-toggler {
		/* button
		class="navbar-toggler navbar-toggler-right" */
		display: none; justify-content: center; align-items: center;
		padding: 0px 7px;
		> span {
			display: inline-block; font-size: 20px;
		}
		> span:after {
			content: "\2630";
		}
	}
	
	.collapse.navbar-collapse {
		
	}
	
	#mod-menu1 {
		/* ul class="mod-menu mod-list nav" */
		display: flex;
		margin: 0px; padding: 0px; list-style-type: none;
		> li { font-size: 18px; color: #000; }
		a { text-decoration: none; }
		a:hover { }
	}
}

.breadcrumb {
	display: flex; flex-wrap: wrap;
	margin: 0px 12px; padding: 0px; list-style-type: none;
	.breadcrumb-item { }
	.breadcrumb-item:not(:nth-child(2)):before {
		content: "\276F";
	}
	.breadcrumb-item span { margin: 0px 4px; }
	.breadcrumb-item:nth-child(2) span {
		margin-left: 0px;
	}
}

#principal {
	display: grid; grid-template-columns: 230px auto 230px;
	> aside {
		padding: 6px;
		> * {
			padding: 6px; break-inside: avoid;
		}
		
		.mod-login {
			button { width: 100%; }
		}

		.form-group > * {
			margin-bottom: 12px;
		}

		.input-password-toggle {
			margin-top: 12px;
			> span.visually-hidden { display: inline; }
		}

		.plg_system_webauthn_login_button {
			display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
			svg { width: 30px; margin-right: 9px; }
		}
	}
	main {
		padding: 0px 12px;

		/* Listado de Categorías */

		.com-content-categories__item
			> img { width: auto; max-height: 67px; }
		}

		/* Categoría Superior */

		.category-desc.clearfix {
			> img {
				float: left; margin: 0px 12px 0px 0px;
				width: auto; max-height: 67px;
			}
		}

		/* Categoría Blog */

		.com-content-category-blog__items {
			clear: both; padding-top: 12px;
			h2 {
				> a {
					font-size: 29px; line-height: 33px; text-decoration: none;
				}
			}
			
			.item-image {
				float: left;
				margin: 0px; margin-right: 12px;
				img {
					width: 100px; height: auto;
				}
			}

			.article-info {
				display: none;
			}
		}
		
		/* Artículo */

		.item-content > p,
		.com-content-article__body {
			font-family: "Domine"; font-size: 18px; line-height: 29px;
		}

		.com-content-article .item-image {
			margin: 0px;
			img { width: auto; max-width: 100%; max-height: 70px; }
		}

		.article-info {
			display: flex; flex-wrap: wrap;
			line-height: 23px;
			> * { margin: 0px 2px; padding: 0px; }
			> *:not(:last-child):after { content: "|"; }
		}

		/* .item-content {
			.article-info {
				display: none;
			}
		} */
	}
}

@media ( min-width: 450px ){
	
	#principal {
		main {
			
		}
	}
}

@media (max-width: 1250px){
	#encabezado {
		.navbar-toggler {
			display: flex;
		}
		.navbar.navbar-expand-md{
			position: relative;
		}
		.collapse.navbar-collapse {
			display: none; position: absolute; top: 100%; right: 0;
			> ul {
				background-color: #eee; border: 1px solide #ccc;
				> li {
					display: block; padding: 10px;
				}
			}
		}
		.collapse.navbar-collapse.show {
			display: block;
		}
	}
	#principal { grid-template-columns: 240px auto;
		
	}	
}

@media (max-width: 950px){
	#principal { grid-template-columns: auto;
		> aside { columns: 2; }
	}
}

@media (max-width: 650px){
	#principal {
		> aside { columns: 1; }
	}
}