/* ==========================================================================
   Qamuz base: design tokens + protection from the active theme's styles.

   Every Qamuz component reads its colors and fonts from these variables, so the
   look can be changed without touching the component CSS:
     - Qamuz AI → Ajustes → Apariencia (whole site), printed right after this file
     - Elementor → widget → Estilo → "Colores Qamuz" (one widget)
     - any CSS: .my-section { --qz-accent: #ff3366; }
   ========================================================================== */

:root {
	--qz-bg: #070a10;
	--qz-side: #0a0e15;
	--qz-surface: #0e131c;
	--qz-raised: #141b27;
	--qz-hover: #121926;
	--qz-line: #222b3a;
	--qz-line-strong: #2e3a4e;
	--qz-ink: #e7ecf5;
	--qz-soft: #9aa4b8;
	--qz-accent: #19e3ff;
	--qz-accent-ink: #031015;
	--qz-danger: #ff5d73;
	--qz-ok: #3ddc84;
	--qz-side-w: 248px;
	--qz-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
	--qz-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
	--qz-mono: "JetBrains Mono", ui-monospace, monospace;
	--qz-l-max: 1200px;
	--qz-l-gutter: clamp(16px, 4vw, 40px);
}

/* Areas painted with artwork (banners, hero slides, cover art, video frames) stay dark
   in every palette so their text keeps its contrast. */
.qz-banner,
.qz-hero,
.qz-card__cover,
.qz-mv__screen,
.qz-mv__shot,
.qz-mv__thumb {
	--qz-bg: #070a10;
	--qz-surface: #0e131c;
	--qz-side: #0a0e15;
	--qz-ink: #e7ecf5;
	--qz-soft: #b4bccb;
	--qz-line: rgba(231, 236, 245, 0.16);
	--qz-line-strong: rgba(231, 236, 245, 0.28);
}

/* ---------- scope: Qamuz widgets and shortcodes on any theme ---------- */

.qz-scope {
	color: var(--qz-ink);
	font-family: var(--qz-sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Outside the app pages a widget brings its own background (change it with --qz-bg). */
:where(body:not(.qz-app-page)) .qz-scope {
	background-color: var(--qz-bg);
}

/* Layouts follow the width the component gets (a narrow theme column, a sidebar, full width),
   not only the window width. */
.qz-mv,
.qz-library,
.qz-catalog,
.qz-cq {
	container: qz / inline-size;
}

:where(.qz-scope, body.qz-app-page) [hidden] {
	display: none !important;
}

:where(.qz-scope, body.qz-app-page),
:where(.qz-scope, body.qz-app-page) *,
:where(.qz-scope, body.qz-app-page) *::before,
:where(.qz-scope, body.qz-app-page) *::after {
	box-sizing: border-box;
}

/*
 * Undo the theme's global form styles (button colors, input borders, uppercase text…) inside
 * Qamuz components, back to the browser defaults the components were designed on. The
 * component rules load after this file, so they still win.
 */
:where(.qz-scope, body.qz-app-page) :is(button, [type="button"], [type="submit"], [type="reset"], input, select, textarea) {
	all: revert;
	font: inherit;
	letter-spacing: inherit;
}

:where(.qz-scope, body.qz-app-page) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	font-family: var(--qz-display);
	letter-spacing: normal;
	text-transform: none;
}

:where(.qz-scope, body.qz-app-page) :is(p, ul, ol, figure, blockquote) {
	letter-spacing: normal;
}

:where(.qz-scope, body.qz-app-page) a {
	color: var(--qz-accent);
	text-underline-offset: 3px;
	box-shadow: none;
}

:where(.qz-scope, body.qz-app-page) svg {
	max-width: none;
}

:where(.qz-scope, body.qz-app-page) img {
	max-width: 100%;
}

body.qz-app-page {
	background: var(--qz-bg);
	color: var(--qz-ink);
}

/* Logo image (Qamuz AI → Ajustes → Logo, the site logo, or the widget's Logo section). */
.qz-logo .qz-logo__img {
	display: block;
	width: auto;
	max-width: 220px;
	height: var(--qz-logo-h, 28px);
	object-fit: contain;
	object-position: left center;
}

html.qz-collapsed .qz-sidebar .qz-logo__img {
	max-width: 44px;
	object-fit: cover;
}