body {
    background-color: rgb(255, 255, 255);
    color: rgb(28, 28, 28);
	/* font-family: 'Times New Roman', Times, serif; */
	/* font-weight: 300; */
	/* line-height: 1.5; */
	/* text-align: justify; */
	max-width: 130ex;
	margin-left: auto;
	margin-right: auto; 
	padding: 2em;
	/* letter-spacing: 1px; */
	/* overflow-wrap: break-word; */
}

hr {
    height: 0.5px;
    border: none;
    background-color: #ddd;
    width: 50%;
    margin: 30px auto;
}

header {
    text-align: center;
}

.title {
	font-size: 28px;
	line-height: 1em;
	margin-bottom: 20px;
}

.date {
	font-size: 14px;
	color: grey;
	font-style: italic;
}

h1, h2, h3 {
	padding-top: 1em;
	font-weight: normal;
	line-height: 1em;
	margin-bottom: 20px;
}

a {
	text-decoration: none;
	border-bottom: 1px dotted;
	cursor: pointer;
	transition: color .2s ease-out;
}

a:hover {
	color: #005577;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

cita {
	display: block;
	color: #333;
	margin: 1em 0;
	padding: 1em;
	border-left: 1px solid #ddd;
	font-style: italic;
}

cita p:last-of-type {
	margin-bottom: 0;
	text-align: right;
	font-style: normal;
}

code {
	font-family: monospace;
	font-size: inherit;
	color: #ffffff;
	background-color: #333;
	display: block; 
	padding-right: 1%;
	padding-left: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
	word-wrap: normal;
	overflow-x: auto;
}

.diff .add {color:#00ff9d;}
.diff .del {color:#ff5f5f;}
.diff .header {color:#569cd6;}
.diff .hunk {color:#d7ba7d;}
.diff .info {color:#848484;}

codeb {
    font-family: monospace;
    font-size: inherit;
    color: #ffffff;
    background-color: #333;
    display: block;
    padding: 1%;                    /* más simple */
    
    /* Lo importante para wrapping: */
    white-space: pre-wrap;          /* mantiene indentación y hace wrap */
    word-break: break-word;         /* rompe palabras largas si es necesario */
    overflow-x: hidden;             /* o "visible", pero hidden es más limpio */
    overflow-wrap: break-word;      /* respaldo moderno */}

emb {
	font-family: monospace;
	background-color: #f0f0f0;
	border-radius: 3px;
	padding: 2px 4px;
	font-size: 0.9em;
	color: #333;
}

kbd {
	font-family: monospace;
	background-color: #f0f0f0;
	border-radius: 3px;
	padding: 2px 4px;
	font-size: 0.9em;
	color: #333;
	white-space: nowrap;
	border: 1px solid #ccc;
	box-shadow: inset 0 -1px 0 #fff;
}

math {
    font-family: monospace;
    display: block;
	margin: 10px;
	word-wrap: normal;
	overflow-x: auto;
}

.subrayado {background-color:#fff981;}

@media screen and (max-width: 768px) {
	body {
		/* padding: 2em; */
		/* font-size: 85%; */
	}
}

@media (prefers-color-scheme: dark) {
	body {
		color: rgb(234, 234, 234);
		background-color: black;
	}

	a {
		color: #349dc6;
	}

	a:hover {
		color: antiquewhite;
	}

	.color-invertible {
		filter: invert(100%);
	}

	cita {
		color: lightcyan;
		border-left: 1px solid lightcyan;
	}

	code {
		color: lightcyan;
		background-color: rgb(27, 27, 27);
	}

	codeb {
		color: lightcyan;
		background-color: rgb(27, 27, 27);
	}

	emb {
		background-color: #343434;
		color: lightcyan;
	}
	
	kbd {
		background-color: #343434;
		color: #ffffff;
		border: 1px solid #211e1e;
		box-shadow: inset 0 -1px 0 #000000;
	}

	.subrayado {background-color:#373400;}
	
}