@import "fuentes.css";
@import "normalize.min.css";
@import "open-props.min.css";
@import "sizes.min.css";
@import "buttons.min.css";
@import "shadows.min.css";
@import "colors-hsl.min.css";

/** Custom styles **/

html {
	/*
	--brand-color: var(--orange-2);
	--brand-background: var(--orange-8);
	--brand-background-hover: var(--orange-6);
	*/
	--brand-hue: 158;
	/*
	--brand-color: var(--stone-11);
	*/
	--brand-background: var(--mint-9);
	--brand-background-hover: var(--mint-6);
	--brand-background-dark: var(--mint-12);
	
	--brand-color: var(--stone-1);
	/*
	--brand-background: var(--stone-12);
	--brand-background-hover: var(--stone-10);
	--brand-background-dark: var(--stone-11);
	*/


	--text-1-light: var(--gray-11-hsl);
	--text-2-light: var(--gray-8-hsl);
	--column-rule-light: hsl(var(--gray-8-hsl) / 35%);
	/* OLD THEME
	--surface-1-light: var(--mint-1);
	--surface-2-light: var(--mint-3);
	--surface-3-light: var(--mint-4);
	--surface-4-light: var(--mint-5);
	--surface-5-light: var(--mint-6);
	--surface-2-light-alpha: hsl(var(--mint-3-hsl) / 50%);
	*/
	--surface-1-light: var(--gray-0);
	--surface-2-light: var(--gray-2);
	--surface-3-light: var(--gray-3);
	--surface-4-light: var(--gray-4);
	--surface-5-light: var(--gray-5);

	--surface-1-light-alpha: hsl(var(--gray-2-hsl) / 30%);
	--surface-2-light-alpha: hsl(var(--gray-2-hsl) / 50%);
	--surface-3-light-alpha: hsl(var(--gray-2-hsl) / 70%);
	--surface-4-light-alpha: hsl(var(--gray-2-hsl) / 90%);

	--surface-1-dark-alpha: hsl(var(--gray-9-hsl) / 30%);
	--surface-2-dark-alpha: hsl(var(--gray-9-hsl) / 50%);
	--surface-3-dark-alpha: hsl(var(--gray-9-hsl) / 70%);
	--surface-4-dark-alpha: hsl(var(--gray-9-hsl) / 90%);

	//background-color: hsl(var(--gray-9-hsl) / 30%);
	--surface-shadow-light: var(--gray-8);
	--shadow-strength-light: 2%;

	--text-1-dark: var(--gray-0-hsl);
	--text-2-dark: var(--gray-3-hsl);
	--column-rule-dark: hsl(var(--gray-3-hsl) / 35%);
	--surface-1-dark: var(--gray-10);
	--surface-2-dark: var(--gray-9);
	--surface-3-dark: var(--gray-8);
	--surface-4-dark: var(--gray-7);
	--surface-5-dark: var(--gray-6);
	--surface-shadow-dark: var(--gray-12);
	--shadow-strength-dark: 80%;
	--surface-danger: var(--red-8);
	--surface-danger-hover: hsl(var(--red-8-hsl) / 90%);
	--text-danger: var(--red-0);

	--error: var(--red-8);

	--surface-gray-light: var(--gray-2);
	--surface-gray-dark: var(--gray-12);
	--surface-stone-light: var(--stone-2);
	--surface-stone-dark: var(--stone-12);
	--surface-red-light: var(--red-2);
	--surface-red-dark: var(--red-8);
	--surface-pink-light: var(--pink-4);
	--surface-pink-dark: var(--pink-10);
	--surface-purple-light: var(--purple-4);
	--surface-purple-dark: var(--purple-8);
	--surface-violet-light: var(--violet-4);
	--surface-violet-dark: var(--violet-10);
	--surface-indigo-light: var(--indigo-4);
	--surface-indigo-dark: var(--indigo-10);
	--surface-blue-light: var(--blue-4);
	--surface-blue-dark: var(--blue-8);
	--surface-cyan-light: var(--cyan-4);
	--surface-cyan-dark: var(--cyan-9);
	--surface-teal-light: var(--teal-4);
	--surface-teal-dark: var(--teal-12);
	--surface-green-light: var(--green-4);
	--surface-green-dark: var(--green-10);
	--surface-lime-light: var(--lime-4);
	--surface-lime-dark: var(--lime-10);
	--surface-yellow-light: var(--yellow-3);
	--surface-yellow-dark: var(--yellow-8);
	--surface-orange-light: var(--orange-2);
	--surface-orange-dark: var(--orange-8);
	--surface-choco-light: var(--choco-4);
	--surface-choco-dark: var(--choco-10);
	--surface-brown-light: var(--brown-4);
	--surface-brown-dark: var(--brown-10);
	--surface-sand-light: var(--sand-4);
	--surface-sand-dark: var(--sand-8);
	--surface-camo-light: var(--camo-4);
	--surface-camo-dark: var(--camo-10);
	--surface-jungle-light: var(--jungle-4);
	--surface-jungle-dark: var(--jungle-12);
	--surface-mint-light: var(--mint-4);
	--surface-mint-dark: var(--mint-12);

	--font-size-fluid-4: clamp(2.5rem,12vw,4.5rem);
}
  
:root {
	color-scheme: light;

	/* set defaults */
	--text-1: hsl(var(--text-1-light));
	--text-2: hsl(var(--text-2-light));
	--column-rule: var(--column-rule-light);
	
	--surface-1: var(--surface-1-light);
	--surface-2: var(--surface-2-light);
	--surface-3: var(--surface-3-light);
	--surface-4: var(--surface-4-light);
	--surface-5: var(--surface-5-light);

	--surface-1-alpha: var(--surface-1-light-alpha);
	--surface-2-alpha: var(--surface-2-light-alpha);
	--surface-3-alpha: var(--surface-3-light-alpha);
	--surface-4-alpha: var(--surface-4-light-alpha);

	--surface-shadow: var(--surface-shadow-light);
	--shadow-strength: var(--shadow-strength-light);

	--surface-gray: var(--surface-gray-light);
	--surface-stone: var(--surface-stone-light);
	--surface-red: var(--surface-red-light);
	--surface-pink: var(--surface-pink-light);
	--surface-purple: var(--surface-purple-light);
	--surface-violet: var(--surface-violet-light);
	--surface-indigo: var(--surface-indigo-light);
	--surface-blue: var(--surface-blue-light);
	--surface-cyan: var(--surface-cyan-light);
	--surface-teal: var(--surface-teal-light);
	--surface-green: var(--surface-green-light);
	--surface-lime: var(--surface-lime-light);
	--surface-yellow: var(--surface-yellow-light);
	--surface-orange: var(--surface-orange-light);
	--surface-choco: var(--surface-choco-light);
	--surface-brown: var(--surface-brown-light);
	--surface-sand: var(--surface-sand-light);
	--surface-camo: var(--surface-camo-light);
	--surface-jungle: var(--surface-jungle-light);
	--surface-mint: var(--surface-mint-light);

	--surface-blue-invert: var(--surface-blue-dark);
}

[data-theme="light"] {
	color-scheme: light;

	--text-1: hsl(var(--text-1-light));
	--text-2: hsl(var(--text-2-light));
	--column-rule: var(--column-rule-light);

	--surface-1: var(--surface-1-light);
	--surface-2: var(--surface-2-light);
	--surface-3: var(--surface-3-light);
	--surface-4: var(--surface-4-light);
	--surface-5: var(--surface-5-light);

	--surface-1-alpha: var(--surface-1-light-alpha);
	--surface-2-alpha: var(--surface-2-light-alpha);
	--surface-3-alpha: var(--surface-3-light-alpha);
	--surface-4-alpha: var(--surface-4-light-alpha);

	--surface-shadow: var(--surface-shadow-light);
	--shadow-strength: var(--shadow-strength-light);
	--background-opacity: 0.4;
	--background-gradient: var(--customGradient);

	--surface-gray: var(--surface-gray-light);
	--surface-stone: var(--surface-stone-light);
	--surface-red: var(--surface-red-light);
	--surface-pink: var(--surface-pink-light);
	--surface-purple: var(--surface-purple-light);
	--surface-violet: var(--surface-violet-light);
	--surface-indigo: var(--surface-indigo-light);
	--surface-blue: var(--surface-blue-light);
	--surface-cyan: var(--surface-cyan-light);
	--surface-teal: var(--surface-teal-light);
	--surface-green: var(--surface-green-light);
	--surface-lime: var(--surface-lime-light);
	--surface-yellow: var(--surface-yellow-light);
	--surface-orange: var(--surface-orange-light);
	--surface-choco: var(--surface-choco-light);
	--surface-brown: var(--surface-brown-light);
	--surface-sand: var(--surface-sand-light);
	--surface-camo: var(--surface-camo-light);
	--surface-jungle: var(--surface-jungle-light);
	--surface-mint: var(--surface-mint-light);

	--surface-blue-invert: var(--surface-blue-dark);
}
  
[data-theme="dark"] {
	color-scheme: dark;

	--text-1: hsl(var(--text-1-dark));
	--text-2: hsl(var(--text-2-dark));
	--column-rule: var(--column-rule-dark);
	--surface-1: var(--surface-1-dark);
	--surface-2: var(--surface-2-dark);
	--surface-3: var(--surface-3-dark);
	--surface-4: var(--surface-4-dark);
	--surface-5: var(--surface-5-dark);

	--surface-1-alpha: var(--surface-1-dark-alpha);
	--surface-2-alpha: var(--surface-2-dark-alpha);
	--surface-3-alpha: var(--surface-3-dark-alpha);
	--surface-4-alpha: var(--surface-4-dark-alpha);
	
	--surface-shadow: var(--surface-shadow-dark);
	--shadow-strength: var(--shadow-strength-dark);
	--background-opacity: 0.12;
	--background-gradient: var(--customGradient);

	--surface-gray: var(--surface-gray-dark);
	--surface-stone: var(--surface-stone-dark);
	--surface-red: var(--surface-red-dark);
	--surface-pink: var(--surface-pink-dark);
	--surface-purple: var(--surface-purple-dark);
	--surface-violet: var(--surface-violet-dark);
	--surface-indigo: var(--surface-indigo-dark);
	--surface-blue: var(--surface-blue-dark);
	--surface-cyan: var(--surface-cyan-dark);
	--surface-teal: var(--surface-teal-dark);
	--surface-green: var(--surface-green-dark);
	--surface-lime: var(--surface-lime-dark);
	--surface-yellow: var(--surface-yellow-dark);
	--surface-orange: var(--surface-orange-dark);
	--surface-choco: var(--surface-choco-dark);
	--surface-brown: var(--surface-brown-dark);
	--surface-sand: var(--surface-sand-dark);
	--surface-camo: var(--surface-camo-dark);
	--surface-jungle: var(--surface-jungle-dark);
	--surface-mint: var(--surface-mint-dark);

	--surface-blue-invert: var(--surface-blue-light);
}

:root {
    --toastContainerTop: 5rem;
    --toastContainerRight: 1rem;
    --toastContainerBottom: auto;
    --toastContainerLeft: auto;
}

:root {
	--mint-0: hsl(158 48.8% 97.5%);
	--mint-1: hsl(158 48.8% 92.5%);
	--mint-2: hsl(158 48.8% 87.5%);
	--mint-3: hsl(158 48.8% 82.5%);
	--mint-4: hsl(158 48.8% 77.5%);
	--mint-5: hsl(158 48.8% 72.5%);
	--mint-6: hsl(158 48.8% 67.5%);
	--mint-7: hsl(158 48.8% 62.5%);
	--mint-8: hsl(158 48.8% 57.5%);
	--mint-9: hsl(158 48.8% 52.5%);
	--mint-10: hsl(158 48.8% 47.5%); /* Brand color*/
	--mint-11: hsl(158 48.8% 42.5%);
	--mint-12: hsl(158 48.8% 37.5%);
	--mint-0-hsl: 158 48.8% 97.5%;
	--mint-1-hsl: 158 48.8% 92.5%;
	--mint-2-hsl: 158 48.8% 87.5%;
	--mint-3-hsl: 158 48.8% 82.5%;
	--mint-4-hsl: 158 48.8% 77.5%;
	--mint-5-hsl: 158 48.8% 72.5%;
	--mint-6-hsl: 158 48.8% 67.5%;
	--mint-7-hsl: 158 48.8% 62.5%;
	--mint-8-hsl: 158 48.8% 57.5%;
	--mint-9-hsl: 158 48.8% 52.5%;
	--mint-10-hsl: 158 48.8% 47.5%; /* Brand color*/
	--mint-11-hsl: 158 48.8% 42.5%;
	--mint-12-hsl: 158 48.8% 37.5%;
	--customGradient: radial-gradient(circle, rgba(107,23,163,1) 34%, rgba(107,23,163,0.5) 51%, rgba(107,23,163,0.1) 67%);
}

a, a:visited{
	color: var(--text-1);
	font-style: italic;
}

a:hover{
	font-weight: bold;
	text-decoration: none;
}

.primary, button.primary {
	/* background: var(--brand-background); */
	background: var(--mint-11);
	color: var(--brand-color);
	font-weight: normal;
}

.primary:hover, button.primary:hover {
	/* background: var(--brand-background-hover); */
	background: var(--mint-9);
}

/** Nav Button **/
.nav-button {
	/*
	background: transparent;
	z-index: 100;
	*/
	border: none;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	touch-action: manipulation;
	padding: var(--size-0);
	background-color: var(--brand-background);
	background-color: var(--surface-1-dark);
	color: var(--brand-color);
}

.nav-button.single {
	padding: var(--size-2) var(--size-3);
}

.nav-button:hover {
	background: var(--brand-background-hover);
	background: var(--surface-3-dark);
}

.nav-button svg{
	filter: none;
	flex-shrink: 0;
}
nav .nav-button svg{
	filter: none;
	flex-shrink: 0;
	margin: 0;
}

.tButton svg{
	/*block-size: var(--size-6);
	inline-size: var(--size-6);*/
	filter: none;
	flex-shrink: 0;
}

._toastMsg {
	font-size: var(--font-size-1);
}

html, body {
	font-family: 'Inter', sans-serif;
}

body {
	background-color: var(--surface-1);
	color: var(--text-1);
	position: relative;
}

.noSelect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.center{
	text-align: center;
}

.errorText{
	font-size: var(--font-size-2);
	margin-bottom: 1rem;
}
.errorText a{
	color: var(--text-1);
	font-weight: bold;
	font-style: italic;
}
.errorText a:hover{
	color: var(--brand-color);
	background-color: var(--brand-background);
	text-decoration: none;
	padding: 0.3rem;
}
.bookmark svg{
	stroke: rgb(255, 255, 255);
	fill: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(0px 0px 4px rgba(216, 20, 255, 0.8));
}

.ghost{
	opacity: 0.5;
}

.fontSmall{
	font-size: var(--font-size-00);
}

.btnDanger{
	background-color: var(--surface-danger);
	color: var(--text-danger);
	font-weight: normal;
}

.btnDanger:hover{
	background-color: var(--surface-danger-hover);
}

.brandLink, .brandLink:visited{
	color: var(--brand-color);
	font-style: normal;
}

.brandLink:hover{
	text-decoration: none;
	font-weight: bold;
}
.background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--background-gradient), var(--noise-5);
	filter: var(--noise-filter-1);
	background-size: cover;
	opacity: var(--background-opacity);
	display: none;
}

.innerWrapper{
	display: block;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.innerWrapper{
		display: flex;
		margin: auto;
	}
}

@media(min-width: 1024px) {
	.innerWrapper:not(.isFullWidth){
		max-width: 960px;
		padding: 0 20px;
	}
}

@media(min-width: 1216px) {
	.innerWrapper:not(.isFullWidth){
		max-width: 1152px;
	}
}

@media(min-width: 1408px) {
	.innerWrapper:not(.isFullWidth) {
		max-width: 1344px;
	}
}
/* Estilos para las páginas y apps */
.excerpt{
	width: 100%;
	max-inline-size: none;
	text-align: center;
	margin: var(--size-4) 0;
	padding: var(--size-4);
	color: var(--text-1);
}
.page-content{
	display: block;
	width: 100%;
	margin-bottom: var(--size-fluid-7);
}
.columns{
	columns: 3 200px;
	column-rule: var(--column-rule) solid 1px;
	column-gap: var(--size-7);
	column-fill: auto;
}
.updated{
	text-align: right;
	margin-top: var(--size-10);
	width: 100%;
}
.page-title{
	text-align: left;
	margin-top: var(--size-8);
	font-size: var(--font-size-fluid-4);
}
.page-content > h1, .page-content > h2, .page-content > h3, .page-content > h4, .page-content > h5, .page-content > h6{
	margin-block-start: var(--size-8);
	margin-block-end: var(--size-4);
	max-inline-size: none;
	writing-mode: horizontal-tb;
	column-span: all;
}
.page-content > h2{
	font-size: var(--font-size-fluid-1);
	writing-mode: horizontal-tb;
	column-span: all;
}
.page-content > p{
	max-inline-size: none;
	margin-block-end: var(--size-2);
	writing-mode: horizontal-tb;
}
.padding{
	padding: var(--size-3);
}
.expand{
	column-span: all;
}
/** Estilos para las mini-apps **/
.mini-app{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--size-3);
	column-span: all;
}
code{
	color: var(--surface-2);
	background-color: var(--text-1);
	padding: 0.2rem;
	border-radius: 0.2rem;
}
/* Otros estilos */
.blueLinks a{
	font-style: normal;
	font-weight: bold;
	color: var(--surface-blue-invert);
	text-decoration: underline;
}
/** Estilos para scrollbars **/
@supports (scrollbar-color: auto) {
	.withScrollBar{
		scrollbar-color: var(--surface-1) var(--surface-3);
		scrollbar-width: thin;
	}
}
@supports selector(::-webkit-scrollbar) {
	.withScrollBar::-webkit-scrollbar {
		width: 10px; /* Mostly for vertical scrollbars */
		height: 10px; /* Mostly for horizontal scrollbars */
	}
	.withScrollBar::-webkit-scrollbar-thumb { /* Foreground */
		background: var(--surface-1);
	}
	.withScrollBar::-webkit-scrollbar-track { /* Background */
		background: var(--surface-3);
	}
}