* {
	margin:0;
	padding:0;
	border:0;
	position: relative;
	box-sizing: border-box;
}

html {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-weight: 300;
}

body {
	overflow-y: auto;
	background: #225;
	color: #225;
	display: flex;
	flex-direction: column;
	min-height: 90vh;
}

header {
	height: auto;
	display: flex;
	background: #999;
	font-size: 2vw;
	padding: 1rem;
	align-items: center;
	gap: 15px;
	z-index: 5;
	width: 100%;
	box-shadow: 0px 2px 10px 1px rgba(130, 130, 130);
}

main{
	flex-direction: column;
	display: flex;
}

.sumario {
	display: none;
	flex-direction: column;
	padding-left: 1.5rem;
	color: #fff;
	transition: 2.5s;
	overflow-x: hidden;
	overflow-y: visible;
	background-color: #225;
	z-index: 5;
	box-shadow: 0px 2px 10px 1px rgba(130, 130, 130);
}

article{
	background-color: #ebebeb;
	width: 100%;
}

.topic-container{
	scroll-behavior: smooth;
	padding-inline:  2rem;
	height: max-content;
	overflow: visible;
	width: 100%;
}

h1 {
	margin: auto;
	font-weight: 500;
	text-align: center;
	padding-inline: 25px;
}

h2 {
	font-weight: 400;
	color: #444;
	margin-block: 0.5em;
	text-align: center;
}

h2 ~ h2 {
	margin-top: 1.5rem;
}

h4,
h3 {
	margin-top: .5rem;
	margin-bottom: .5rem;
}

h4{
	font-size: 1.1rem;
	margin-block: 1.5em;
	font-weight: 500;
}

h3 {
	font-weight: 700;
	margin-top: 2em;
	font-size: 1.4rem;
}

p {
	padding-left: 1rem;
	transition: .5s .3s;
	margin-bottom: 1em;
}

/* el primer p del li del ul, que tiene mas de un p */
ul li:has(p:nth-of-type(2)) p:first-of-type { 
	margin-bottom: 0;
}

.sumario,
summary {
	outline: none;
	cursor: pointer;
}

.sumario > summary {
	font-size: 130%;
	font-variant: small-caps;
	margin-left: -.5rem;
}

nav {
	padding: 0 0 2rem .5rem;
	transition: 1s;
}

ol {
	counter-reset: numerar;
	list-style-type: none;
	line-height: 1.5;
}

ol ol {
	padding-left: 1rem;
	font-size: .9rem;
}
/* 
  🎯 Estilo aplicado a los numerales generados con ::before en la lista del índice.

  Por qué esto está así:
  Cuando un <li> tiene la clase .current, se le aplica color 'goldenrod' para resaltarlo.
  Pero como usamos ::before para generar los números (en lugar de list-style),
  ese color también se hereda por los numerales de los demás <li> siguientes.

  Esta regla asegura que solo el numeral del .current se pinte dorado,
  y que los demás mantengan su color normal.

  🧠 Nota para mi yo del futuro (o para devs curiosos): sí, esto me volvió loco un rato.
  Gracias Neo por la pista ;)
*/
li::before {
	content: counters(numerar, '.') "";
	counter-increment: numerar;
	position: absolute;
	left: -2.5rem;
	width: 2rem;
	text-align: right;
	color: #ccc
}

li.current::before {
  color: goldenrod;
}

a {
  text-decoration: none;
  color: #ccc;
  font-weight: 400;
  margin-inline: auto;
}

article ul,
article ol{
	counter-reset: none !important;
	margin-block: 1em;
	padding-inline-start: 1em;
	margin-inline: 1.5em;
}

article ol{
	list-style-type: decimal !important;
}

article li::before{
	content: none;
  display: none;
  counter-increment: none;
}

ul ul li{
	/* padding-inline: .5em; */
	color: inherit;
}

figure{
	width: 90%;
	margin: auto;
	margin-block: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
}

ol li figure:has(img.icon) {
    margin: auto;
    display: inline;
    margin-block: 0;
}

figure img{
	width: 90%;
	margin-inline: auto;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgb(100, 100, 100);
}

figure img.icon{
	width: fit-content;
	border-radius: 3px;
	margin: 0;
	position: relative;
	top: 5px;
}

figure img.info{
	width: fit-content;
	margin: 0;
	border-radius: 10px;
	max-width: 90%;
}

.enlarged {
	width: 200%;
	position: relative;
	top: 0;
	left: 0;
	overflow-x:scroll;
	overflow-y: scroll;
	margin-inline: 0;
	cursor: zoom-out;
	scale: 1.5;
	transform-origin: top left;
}

a[role="button"],
button{
	background-color: #225;
	color: white;
	border: none;
	padding: 0px 15px;
	font-size: 15px;
	cursor: pointer;
	margin-inline: 10px;
	border-radius: 7px;
	height: 41px;
}

a[role="button"]{
	display: block;
	line-height: 41px;
	margin-inline: auto;
	width: fit-content;
}

nav button{
	margin-top: 20px;
	color: #225;
	background-color: #999;
}

footer{
	height: 10vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-shadow: 0px 2px 10px 1px rgba(130, 130, 130);
}


.hidden{
	display: flex;
}

.error-404{
	text-align: center;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.error-404 a{
	color: #000;
}

.error-404 h2{
	font-size: 2rem;
	font-weight: bold;
}

li h4{
	padding: 0;
}

article a{
	color: #225;
}

h2.index-title{
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	margin-inline: auto;
	margin-block: 1em;
}

h2.index-subtitle{
	text-align: left;
}

ol.topics-index{
	max-width: fit-content;
}

hr{
	border: none;
	border-top: 1px solid #225;
}

article.home{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.logo{
	width: 65%;
	display: block;
	margin: auto;
	max-width: 300px;
	margin-top: 2em;
}

.UPGL{
	text-align: center;
	margin: 0;
	margin-inline: auto;
	font-size: 30px;
}

section h3{
	text-align: center;
	margin-block: 1em;
}

.current{
	color: goldenrod;
}

article details{
	margin: auto;
	width: 90%;
}

article details summary{
	font-size: 1.2rem;
	font-weight: 500;
	margin-block-end: 25px;
}

iframe{
	display: block;
	margin-inline: auto;
	margin-block: 1.5em;
	border-radius: 20px;
	box-shadow: 0px 0px 10px rgb(100, 100, 100);
}

table {
	border-collapse: collapse;
	margin-bottom: 3px;
	color: #225;
	text-align: center;
	width: fit-content;
	margin: auto;
}

table td,
table th {
    padding: 5px;
    border-top: 1px solid #ebebeb;
    border: 2px solid #225;
    width: auto;
    min-width: 95px;
}

table thead th {
  vertical-align: bottom;
	border-bottom-width: 2px;
	color: #ebebeb;
	background-color: #225;
}

table td{
	font-weight: 500;
}

.table-responsive{
    display: flex;
    align-items: center;
    margin: auto;
    margin-block: 8px;
    width: fit-content;
    overflow-x: auto;
}

form{
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: fit-content;
	min-width: 200px;
	margin-inline: auto;
	margin-block: 2em;
	padding: 1em;
}
form section{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	gap: 5px;
	margin: 0;
}

form button{
	max-width: fit-content;
	margin-inline: auto;
}
form strong{
	display: block;
	margin: auto;
}

label input{
	margin-inline: 15px;
	padding: 5px;
	border: 2px solid #225;
	border-radius: 5px;
}


@media (min-width: 870px){
	body{
		overflow: hidden;
	}

	article.home{
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	header{
		height: 10vh;
		min-height: 68px;
		font-size: 16px;
		padding-block: 5px;
	}
	
	main{
		flex-direction: row;
	}

	.sumario{
		display: flex;
		width: -webkit-fill-available;
		height: 90vh;
		max-height: 90vh;
		padding: 0.5em 1.5em;
		max-width: 333px;
		flex-shrink: 0;
	}

	.topic-container{
		height: 80vh;
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
		font-weight: 400;
	}

	section{
		max-width: 90%;
		margin: auto;
	}

	section.course-index{
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}

	section.course-index nav{
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		padding: unset;
	}

	table{
		border: 0;
	}
	.hidden{
		display: none;
	}
}