/* main.css 
	T4.5 Global Styles
	April 2026 by CuR
*/

/* || Custom Properties */

:root {

	/* brand hsl primitives (fallback) #f85b51 */
	--hsl-brand-base: 6 92% 64%;
	--hsl-brand-strong: 6 92% 54%;
	--hsl-brand-soft: 6 92% 64%;
	--hsl-brand-contrast: 0 0% 100%;

	/* brand tokens */
	--clr-brand-base: hsl(var(--hsl-brand-base));
	--clr-brand-strong: hsl(var(--hsl-brand-strong));
	--clr-brand-soft: hsl(var(--hsl-brand-soft));
	--clr-on-brand: hsl(var(--hsl-brand-contrast));

	/* text */
	--clr-text: hsl(0 0% 10%);
	--clr-text-soft: hsl(0 0% 29%);
	--clr-text-muted: hsl(0 0% 48%);
	--clr-text-subtle: hsl(0 0% 60%);
	--clr-text-accent: var(--clr-brand-strong); /* fallback */
	--clr-text-accent: oklch(from var(--clr-brand-base) clamp(0.1, calc(l - 0.04), 0.65) c h);

	/* surfaces */
	--clr-surface-base: hsl(220 20% 97%);   /* fondo general */
	--clr-surface-content: hsl(0 0% 100%);  /* contenido principal */
	--clr-surface-elevated: hsl(0 0% 100%); /* cards, menus */
	--clr-surface-subtle: hsl(220 20% 98%); /* very light gray */
	--clr-surface-alert: hsl(55 78% 87%);   /* alerts */

	/*204 56% 98%; background stripe */

	/* black & white contrast color */
	--clr-surface-contrast: hsl(0 0% 10%);
	--clr-on-contrast: hsl(0 0% 94%);
	
	/* fonts */
	--ff-base: "Inter", system-ui, "Segoe UI", Helvetica Neue, sans-serif;
	--fs-base: 0.875rem; /* 14px */
	--fs-large: 1rem; /* 16px */
	--fs-larger: 1.125rem; /* 18px */
	--fs-largest: 1.25rem; /* 20px */
	--fs-medium: 0.8125rem /* 13px */;
	--fs-small: 0.750rem /* 12px */;
	--fs-smaller: 0.625rem /* 10px */;
	--fw-base: 400;
	--fw-bold: 500;
	--fw-bolder: 600;
	--font-spacing-dense: -0.02142857143em;

	/* borders */
	--border-color: hsl(208 44% 92%);
	--border-color-strong: hsl(208 44% 86%);
	--border-radius: 8px;
	--border-radius-sm: 6px;
	--border-radius-lg: 12px;
	
	/* generic / neutral */
	--clr-generic: hsl(207 90% 54%);
	--clr-link-neutral: #0852C5;
	--clr-error: hsl(0 100% 50%); /* red */
	
	/* layout */
	--layout-content-max-width: 1200px;
	
	--shadow-dialog:
		inset 0 0 0 1px hsl(0 0% 100% / .08),
		0 18px 40px hsl(0 0% 0% / .18),
		0 6px 14px hsl(0 0% 0% / .10);
		
	--backdrop-bg: hsl(0 0% 0% / .22);
	--backdrop-blur: 0;

	/* tags */
	--clr-success: hsl(144 63% 47%); /* green */
	--clr-warning: hsl(32 95% 46%); /* orange */
	--clr-danger: hsl(8 82% 54%); /* red */
	--clr-neutral: hsl(262 47% 63%); /* purble */
}

/* || Darkmode Colors  */

[data-theme="dark"] {
	
	/* text */
	--clr-text: hsl(0 0% 89%);
	--clr-text-soft: hsl(0 0% 69%);
	--clr-text-muted: hsl(0 0% 49%);
	--clr-text-subtle: hsl(0 0% 41%);
	--clr-text-accent: var(--clr-brand-soft); /* fallback */
	--clr-text-accent: oklch(from var(--clr-brand-base) clamp(0.6, calc(l + 0.04), 0.80) c h);

	/* surfaces */
	--clr-surface-base: hsl(220 15% 10%);			/* fondo general */
	--clr-surface-content: hsl(220 15% 14%);	/* contenido principal */
	--clr-surface-elevated: hsl(220 15% 18%);	/* cards, menus */
	--clr-surface-subtle: hsl(220 15% 12%);		/* separaciones suaves */

	/* borders */
	--border-color: hsl(220 10% 28%);
	--border-color-strong: hsl(220 10% 36%);

	/* contrast color */
	--clr-surface-contrast: hsl(0 0% 100%);
	--clr-on-contrast: hsl(0 0% 10%);

	/* links */
	--clr-link-neutral: #B3D0FF;
	--clr-error: hsl(4 78% 53%);
}

/* || Base */

html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-size: 16px; /* base control */
	scrollbar-gutter: stable;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	color: var(--clr-text);
	background: var(--clr-surface-base);
	font-family: var(--ff-base);
	font-size: var(--fs-base);
	line-height: 1.5;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

img {
	display: block;
	max-width: 100%;
}

figure {
	margin: 0;
}

input, textarea, select {
	font: inherit;
}

button {
	user-select: none;
}

table {
	border-collapse: collapse;	
}


/* || Modifiers */

.text--large {
	font-size: var(--fs-large);
}

.text--small {
	font-size: var(--fs-small);
}

.text--smaller {
	font-size: var(--fs-smaller);
}

.text--condensed {
	letter-spacing: var(--font-spacing-dense);
}

.text--accent.text--accent {
	color: var(--clr-text-accent);
}

.no-scroll {
	overflow: hidden;
	overscroll-behavior: none;
}


:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 1px dashed var(--border-color-strong);
	outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}


/* || Vue templates */

[v-cloak] {
	display: none !important;
}


/* || Layout */

.main-content {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-block-size: 100svh;
	container-name: main;
	container-type: inline-size;
}

.main-content[data-main-bg="true"] {
	background-attachment: fixed;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.base-inner {
	width: 100%;
	max-width: var(--layout-content-max-width);
	margin-inline: auto;
	padding-block: 0; /* top, bottom */
	padding-inline: 0; /* left, rigth */
}

@container main (width < 1220px) {
	.base-inner {
		padding-inline: 1rem;
	}
}

@container main (width < 768px) {
	.base-inner {
		padding-inline: .25rem;
	}
}

.fa-svg-icon { /* font awesom svg icon */
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
}

.base-link {
	color: var(--clr-link-neutral);
	text-decoration: none;
	font-weight: var(--fw-bolder);
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	gap: .25rem;

	transition:
		color .15s ease,
		opacity .15s ease;
}

button.base-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-size: inherit;
}

.base-link:hover {
	opacity: 0.86;
}

.base-link--back::before {
	content: "←";
	font-size: .85em;
	margin-top: .24em;
	transition: transform .15s ease;
}

.base-link:hover::before {
	transform: translateX(-2px);
}

.base-link--inline {
	text-decoration: underline;
	font-weight: inherit;
}

.base-link--inline:hover {
	text-decoration: none;
}

.base-link--muted {
	color: var(--clr-text-subtle);
	font-weight: var(--fw-base);
}

.base-link--muted:hover {
	color: var(--clr-text);
}

.base-title {
	color: var(--clr-text);
	font-weight: var(--fw-bold);
	font-size: var(--font-size, .9375rem); /* 15px */
	line-height: normal;
	letter-spacing: var(--font-spacing-dense);
}

.base-subtitle {
	color: var(--clr-text-subtle);
	font-weight: var(--fw-bold);
	font-size: .75rem; /* 12px */
}

.base-legend {
	font-size: max(.8125rem, .75em);
	color: var(--clr-text-soft);
	font-weight: var(--fw-base);
	line-height: inherit;
	letter-spacing: inherit;
}

.base-title:has(.base-legend) {
	display: flex;
	flex-direction: column;
	gap: .1875em;
}

.base-help-text {
	font-size: .75rem;
	color: var(--clr-text-subtle);
	padding-top: .375rem;
}

/* || Backdrop */

::backdrop {
	background: var(--backdrop-bg);
	backdrop-filter: blur(var(--backdrop-blur));
	-webkit-backdrop-filter: blur(var(--backdrop-blur));
}


/* || Base button */

.base-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;

	height: 2.5rem; 
	padding-inline: .875rem;
	min-width: 5rem;

	color: var(--clr-text);
	background: var(--clr-surface-elevated);
	border: 1px solid var(--border-color);
	border-radius: 999px;

	font: inherit;
	font-weight: var(--fw-bolder);
	text-decoration: none;
	cursor: pointer;

	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.base-button:hover {
	background: var(--clr-surface-subtle);
}

.base-button--accent {
	background: var(--clr-brand-base);
	border-color: var(--clr-brand-base);
	color: var(--clr-on-brand);
}

/* || Accent Button */

.base-button--accent:hover {
	background: var(--clr-brand-strong);
	border-color: var(--clr-brand-strong);
}

.base-button--accent:active {
	background: var(--clr-brand-strong);
}

.base-button--accent:focus-visible {
	box-shadow: 0 0 0 2px hsl(var(--clr-brand-base) / 0.25);
}


/* || Primary Button */

.base-button--primary {
	border: none;
	background: var(--clr-surface-contrast);
	color: var(--clr-on-contrast);
}

.base-button--primary:hover {
	background: hsl(from var(--clr-surface-contrast) h s l / .94);
}

.base-button:disabled,
.base-button.is-disabled {
	opacity: .85;
	cursor: not-allowed;
	pointer-events: none;

	background: var(--clr-surface-subtle);
	border-color: var(--border-color);
	color: var(--clr-text-subtle);
}


/* || Base button modifiers */

.base-button--sm {
	height: 1.75rem;
	font-size: var(--fs-small);
	/*padding-inline: .625rem;*/
}

/* || Base select */

.base-select {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--clr-surface-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding-inline: .75rem;
	height: 2.5rem;
	width: 100%;
	min-width: 0;
}

.base-select > select {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	color: var(--clr-text);
	cursor: pointer;
	height: 100%;
	width: 100%;
	min-width: 0;
	padding-right: 1.25rem; /* espacio para icono */

	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.base-select::after {
	content: "";
	margin-left: auto;
	color: hsl(from var(--clr-text) h s l / 0.4);
	width: 0.3rem;
	height: 0.3rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 0.2s ease, color 0.2s ease;
	pointer-events: none;
}

.base-select:hover {
	border-color: var(--border-color-strong);
}

.base-select--sm {
	height: 2rem;
	font-size: var(--fs-small);
}


/* || Base paragraph */

.base-paragraph {
	color: var(--clr-text-soft);
	font-size: var(--fs-base);
	line-height: var(--line-height, 1.6);
	text-wrap: pretty;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* || Base avatar */

.base-avatar {
	flex: 0 0 auto;
	width: var(--size, 2.5rem);
	height: var(--size, 2.5rem);
	border-radius: 50%;
	/*overflow: hidden;*/
	background: var(--clr-surface-subtle);
	container-type: inline-size;
}

.base-avatar > :is(.is-photo, .is-fallback) {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.base-avatar:has(.is-photo) {
	/*border: 1px solid var(--border-color);*/
}

.base-avatar .is-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: var(--fs-base); /* fallback */
	font-size: clamp(.625rem, 30cqw, 3rem);
	font-weight: var(--fw-bolder);
	color: var(--clr-on-contrast);
	background: var(--clr-surface-contrast);
}


/* || Base note */

.base-note {
	margin-block: var(--padding-block, 1rem);
	padding: 1rem 1.25rem;

	color: var(--clr-text-muted);
	font-size: var(--fs-medium);
	line-height: 1.6;

	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	background: var(--clr-surface-elevated);
}

.base-note strong {
	color: var(--clr-text-accent);
}


/* || Tooltip */

.base-tooltip {
	position: fixed;
	z-index: 9999;
	max-width: 16rem;
	padding: .35rem .55rem;
	border-radius: .375rem;
	background: hsl(from var(--clr-surface-contrast) h s l / .82);
	color: var(--clr-on-contrast);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 0);
	transition: opacity 150ms ease;
	will-change: top, left;
}

.base-tooltip.is-visible {
	opacity: 1;
}


/* || Dialog : close button */

.dialog__close {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--clr-text-soft);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.dialog__close:hover {
	background: var(--clr-surface-subtle);
	color: var(--clr-text);
}


/* Generic Aligns */

.ta-center {
	text-align: center;
}

.ta-right {
	text-align: right;
}


/* Layout Patterns */

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, 1rem);
	min-width: 0;
}

.pile {
	display: grid;
	grid-template-areas: "pile";
	place-items: center;
}

.pile > * {
	grid-area: pile;
}


.test {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
	font-size: 1.5rem;
}

.component-00 {
	color: var(--clr-text);
}

.component-01 {
	color: var(--clr-text-soft);
}

.component-03 {
	color: var(--clr-text-muted);
}

.component-04 {
	color: var(--clr-text-subtle);
}


.component-1 {
	color: var(--clr-brand-base);
}

.component-2 {
	color: var(--clr-brand-strong);
}

.component-3 {
	color: var(--clr-brand-soft);
}

.component-4 {
	color: var(--clr-on-brand);
	background: var(--clr-brand-base);
}

.component-5 {
	color: var(--clr-text-accent);
}

.component-6 {
	color: oklch(from var(--clr-brand-strong) clamp(0.1, calc(l - 0.04), 0.65) c h);
}

.component-7 {
	color: var(--clr-link-neutral);
}

.test-00 {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	gap: 2rem;
}

.component-001 {
	color: var(--clr-text);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: .5rem 1rem;
}

.component-002 {
	color: var(--clr-text);
	border: 1px solid var(--border-color-strong);
	border-radius: var(--border-radius);
	padding: .5rem 1rem;
}

/* || Responsive */

@media (max-width: 768px) {
	.only-desktop {
		display: none !important;
	}
}


/* || Utilities */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* || Components */