/**
 * ZD Scripts TradingView — estilos del front.
 *
 * Todo va namespaceado bajo .zdts para no pisar al theme. A propósito NO se
 * define font-family: se hereda la del sitio (Flatsome), así el bloque se
 * siente parte de la página y no un injerto.
 */

.zdts {
	--zdts-ink: #171c22;
	--zdts-soft: #5b6570;
	--zdts-line: rgba(23, 28, 34, .14);
	--zdts-line-strong: rgba(23, 28, 34, .3);
	--zdts-card: #fafaf8;
	--zdts-hover: rgba(23, 28, 34, .035);
	--zdts-tag-bg: rgba(23, 28, 34, .07);
	--zdts-tema-bg: rgba(232, 163, 61, .22);
	--zdts-tema-ink: #8a5a0c;
	--zdts-num: #8a5a0c;
	--zdts-btn-bg: #171c22;
	--zdts-btn-ink: #fff;
	--zdts-chip-on-bg: #171c22;
	--zdts-chip-on-ink: #fff;
	--zdts-code-bg: #12161c;
	--zdts-code-ink: #d8e0e8;
	--zdts-accent: #e8a33d;
	--zdts-ok: #0f8a6e;
	--zdts-radius: 12px;

	color: var(--zdts-ink);
}

/*
 * Modo oscuro: para secciones con fondo oscuro. Solo cambia los tokens, así el
 * resto de las reglas sirve igual para los dos modos.
 *
 * El fondo se deja transparente a propósito (no se pinta un color propio) para
 * que el bloque tome el fondo de la sección que lo contenga, sea el que sea.
 */
.zdts--oscuro {
	--zdts-ink: #e8ecf1;
	--zdts-soft: #a9b4c0;
	--zdts-line: rgba(255, 255, 255, .14);
	--zdts-line-strong: rgba(255, 255, 255, .32);
	--zdts-card: rgba(255, 255, 255, .04);
	--zdts-hover: rgba(255, 255, 255, .06);
	--zdts-tag-bg: rgba(255, 255, 255, .09);
	--zdts-tema-bg: rgba(232, 163, 61, .2);
	--zdts-tema-ink: #f0c07a;
	--zdts-num: #e8a33d;
	--zdts-btn-bg: #fff;
	--zdts-btn-ink: #12161c;
	--zdts-chip-on-bg: #e8ecf1;
	--zdts-chip-on-ink: #12161c;
	--zdts-code-bg: #0b0e13;
}

/* Auto: sigue la preferencia del sistema del visitante. */
@media (prefers-color-scheme: dark) {
	.zdts--auto {
		--zdts-ink: #e8ecf1;
		--zdts-soft: #a9b4c0;
		--zdts-line: rgba(255, 255, 255, .14);
		--zdts-line-strong: rgba(255, 255, 255, .32);
		--zdts-card: rgba(255, 255, 255, .04);
		--zdts-hover: rgba(255, 255, 255, .06);
		--zdts-tag-bg: rgba(255, 255, 255, .09);
		--zdts-tema-bg: rgba(232, 163, 61, .2);
		--zdts-tema-ink: #f0c07a;
		--zdts-num: #e8a33d;
		--zdts-btn-bg: #fff;
		--zdts-btn-ink: #12161c;
		--zdts-chip-on-bg: #e8ecf1;
		--zdts-chip-on-ink: #12161c;
		--zdts-code-bg: #0b0e13;
	}
}

.zdts {
	max-width: 100%;
}

.zdts-item,
.zdts-body,
.zdts-list {
	min-width: 0;
}

.zdts *,
.zdts *::before,
.zdts *::after {
	box-sizing: border-box;
}

.zdts :focus-visible {
	outline: 2px solid var(--zdts-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------- filtros por tema */

.zdts-tools {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--zdts-line);
}

.zdts-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.zdts-chip {
	font-size: 13px;
	line-height: 1.2;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var(--zdts-line-strong);
	background: transparent;
	color: var(--zdts-ink);
	cursor: pointer;
	font-family: inherit;
	margin: 0;
}

.zdts-chip[aria-pressed="true"] {
	background: var(--zdts-chip-on-bg);
	border-color: var(--zdts-chip-on-bg);
	color: var(--zdts-chip-on-ink);
}

/* -------------------------------------------------------------- fórmulas */

.zdts-grid {
	display: grid;
	/* min() evita que en pantallas angostas el mínimo de 320px desborde. */
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 18px;
}

.zdts-card {
	min-width: 0;
	background: var(--zdts-card);
	border: 1px solid var(--zdts-line);
	border-radius: var(--zdts-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zdts-card > h3 {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
}

.zdts-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.zdts-tag {
	font-size: 11px;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--zdts-tag-bg);
	color: var(--zdts-soft);
}

.zdts-tag--tema {
	background: var(--zdts-tema-bg);
	color: var(--zdts-tema-ink);
}

.zdts-desc {
	margin: 0;
	color: var(--zdts-soft);
	font-size: 14.5px;
	line-height: 1.55;
}

/* Bloque de código: siempre scrollea adentro, nunca empuja el ancho de la página. */
.zdts-code {
	min-width: 0;
	background: var(--zdts-code-bg);
	border-radius: 10px;
	padding: 14px;
	overflow-x: auto;
	max-width: 100%;
}

.zdts-code pre {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--zdts-code-ink);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	white-space: pre;
	tab-size: 4;
}

.zdts-card .zdts-code {
	max-height: 190px;
	overflow-y: hidden;
}

.zdts-card .zdts-code.is-tall {
	-webkit-mask-image: linear-gradient(#000 70%, transparent);
	mask-image: linear-gradient(#000 70%, transparent);
}

/* Coloreado de sintaxis (Pine Script). Paleta pensada sobre el fondo #12161c,
   con contraste suficiente para leerse cómodo en bloques largos. */

.zdts-code .zdts-c { color: #6b7a89; font-style: italic; } /* comentario */
.zdts-code .zdts-s { color: #b9d77e; }                     /* texto entre comillas */
.zdts-code .zdts-d { color: #f0956b; }                     /* número */
.zdts-code .zdts-h { color: #f0956b; }                     /* color #RRGGBB */
.zdts-code .zdts-k { color: #cf9be8; }                     /* palabra clave */
.zdts-code .zdts-f { color: #7fb0ff; }                     /* función propia de Pine */
.zdts-code .zdts-n { color: #6fd6c4; }                     /* espacio de nombres: ta., math.… */

.zdts-foot {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: auto;
}

.zdts-copy {
	background: var(--zdts-btn-bg);
	color: var(--zdts-btn-ink);
	border: 0;
	border-radius: 10px;
	padding: 11px 16px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
	margin: 0;
	transition: background .15s ease;
}

.zdts-copy:hover {
	color: var(--zdts-btn-ink);
}

.zdts-copy.is-done {
	background: var(--zdts-ok);
	color: #fff;
}

/* ----------------------------------------------------------- pine scripts */

.zdts-list {
	border: 1px solid var(--zdts-line);
	border-radius: var(--zdts-radius);
	overflow: hidden;
	background: var(--zdts-card);
}

.zdts-item + .zdts-item {
	border-top: 1px solid var(--zdts-line);
}

.zdts-head {
	width: 100%;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: 14px;
	align-items: center;
	padding: 17px 16px;
	cursor: pointer;
	margin: 0;
}

.zdts-head:hover {
	background: var(--zdts-hover);
	color: inherit;
}

.zdts-num {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--zdts-num);
}

.zdts-name {
	min-width: 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.zdts-author {
	font-size: 13px;
	color: var(--zdts-soft);
}

.zdts-chev {
	color: var(--zdts-soft);
	transition: transform .2s ease;
	font-size: 12px;
}

.zdts-head[aria-expanded="true"] .zdts-chev {
	transform: rotate(180deg);
}

.zdts-body {
	padding: 0 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zdts-body[hidden] {
	display: none;
}

.zdts-body .zdts-code {
	max-height: 320px;
	overflow-y: auto;
}

.zdts-body .zdts-copy {
	align-self: flex-start;
}

@media (max-width: 720px) {
	.zdts-head {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.zdts-author {
		display: none;
	}

	.zdts-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zdts * {
		transition: none !important;
	}
}