/**********************************************************/
/***** reset.css v2.0 (Eric Meyer's original version) *****/
/**********************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/******************/
/***** Layout *****/
/******************/

:root {
	--escritorio: '1000px';
	--tipo-marca: 'Arvo', serif;
	--tipo-enlanube: 'Dosis', sans-serif;
	--tipo-monoespaciado: monospace;
	--color-cielo: #68b8d7;
}

@keyframes blink {
	0% {opacity: 1;}
 	50% {opacity: 0;}
  	100% {opacity: 1;}
}

html {box-sizing: border-box; font-size: clamp(18px, 5vw, 22px); scroll-behavior: smooth;}
*, *:before, *:after {box-sizing: inherit;}

html, body {height: 100%;}

/***** Commons *****/
a {text-decoration: none;}
strong {font-weight: bold;}
.centrado {text-align: center;}
.texto {text-align: left;}
.numero {text-align: right; white-space: nowrap;}
.bloque-oculto {opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease, transform 0.6s ease;}
.bloque-oculto.visible {opacity: 1; transform: translateY(0);}

/***** Header *****/
header {position: sticky; top: 0; width: 100%; height: 50px; padding: 0.5rem 1rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 1rem; color: black; background-color: var(--color-cielo); z-index: 999;}
header h1, header form {display: inline-block;}
header h1 {font-family: var(--tipo-marca); font-size: 1rem;}
header input, header button {font-family: var(--tipo-enlanube);}

/***** Footer *****/
footer {padding: 1rem; font-family: var(--tipo-enlanube); text-align: center; border-top: 1px solid black;}

/***** Scrollbars *****/
[style*="overflow"], [style*="scroll"], textarea, pre {scrollbar-width: auto; scrollbar-color: silver black;}
[style*="overflow"]::-webkit-scrollbar, [style*="scroll"]::-webkit-scrollbar, textarea::-webkit-scrollbar, pre::-webkit-scrollbar {width: 16px; height: 16px;}
[style*="overflow"]::-webkit-scrollbar-track, [style*="scroll"]::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, pre::-webkit-scrollbar-track {background: black;}
[style*="overflow"]::-webkit-scrollbar-thumb, [style*="scroll"]::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb {background-color: silver; border-radius: 8px; border: 4px solid black;}

/***** Icons *****/
.emoji {margin: 0 10px; font-size: 0.9rem;}

/***** @media *****/
@media (prefers-reduced-motion: reduce) {
	* {animation: none; transition: none; scroll-behavior: auto;}
}

@media print {
	body {margin: 1.5cm; font-size: 12pt; color: black; background-color: white;}
	header, nav, footer {display: none !important;}
	a[href]:after {content: " (" attr(href) ")"; font-size: 10pt; color: #666;}
	h1, h2, h3, h4 {page-break-after: avoid; break-after: avoid;}
	thead {display: table-header-group;}
	img, ul, ol {page-break-inside: avoid; break-inside: avoid;}
	img {max-width: 100% !important; height: auto !important;}
}