/*
 * ECN — Divisas.
 * Consume EXCLUSIVAMENTE los tokens de theme/ecn-brand-tokens.css.
 *
 * REGLA: aquí NO se usa el filete neón de dato propio. Esa marca certifica
 * cifra del Observatorio, con metodología de ECN. Una cotización de un banco
 * central es dato de un tercero y se pinta en la escala neutra de la marca.
 * Mezclarlos le quitaría al filete justo lo que lo hace valioso.
 */

/* ---- Ticker ---------------------------------------------------------- */
.ecn-div-tick {
	display: flex;
	align-items: center;
	gap: var(--ecn-sp-4);
	flex-wrap: wrap;
	padding: var(--ecn-sp-2) var(--ecn-sp-4);
	background: var(--ecn-negro);
	color: var(--ecn-blanco);
	font-family: var(--ecn-font-cuerpo);
	font-size: var(--ecn-fs-sm);
}

.ecn-div-tick__rotulo {
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 800, 'wdth' 82;
	font-size: var(--ecn-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ecn-rojo);
	flex: none;
}

.ecn-div-tick__lista {
	display: flex;
	align-items: center;
	gap: var(--ecn-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

.ecn-div-tick__item {
	display: flex;
	align-items: baseline;
	gap: var(--ecn-sp-2);
	white-space: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecn-div-tick__item a {
	display: flex;
	align-items: baseline;
	gap: var(--ecn-sp-2);
	color: inherit;
	text-decoration: none;
}

.ecn-div-tick__item a:hover .ecn-div-tick__par,
.ecn-div-tick__item a:focus-visible .ecn-div-tick__par {
	color: var(--ecn-blanco);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecn-div-tick__par {
	color: var(--ecn-gris-borde);
	font-size: var(--ecn-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ecn-div-tick__valor {
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 88;
	/* Cifras tabulares: al actualizarse no deben "bailar" de ancho. */
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---- Variación ------------------------------------------------------- */
/* El color nunca va solo: la flecha y el signo llevan la misma información
 * para quien no distingue rojo de verde. */
.ecn-div__var {
	font-size: var(--ecn-fs-xs);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.ecn-div__var--sube  { color: var(--ecn-variacion-positiva); }
.ecn-div__var--baja  { color: var(--ecn-variacion-negativa); }
.ecn-div__var--igual,
.ecn-div__var--nula  { color: var(--ecn-gris); }

/* El tícker tenía aquí su propio par de hexadecimales claros porque va sobre
 * negro y los semánticos de entonces estaban pensados para fondo blanco. Desde
 * el 2026-08-31 los semánticos YA son los claros, así que la excepción sobra:
 * dos sitios con el mismo color y uno solo actualizándose es cómo se desalinea
 * una paleta. */

/* ---- Ficha de par ---------------------------------------------------- */
.ecn-div-ficha {
	border: 1px solid var(--ecn-gris-borde);
	border-top: var(--ecn-ancho-linea-dato) solid var(--ecn-negro);
	background: var(--ecn-blanco);
	padding: var(--ecn-sp-5);
	margin: 0 0 var(--ecn-sp-6);
}

.ecn-div-ficha__cab {
	display: flex;
	align-items: center;
	gap: var(--ecn-sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--ecn-sp-3);
}

.ecn-div-ficha__etiqueta {
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	font-size: var(--ecn-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ecn-blanco);
	background: var(--ecn-negro);
	padding: var(--ecn-sp-1) var(--ecn-sp-2);
}

.ecn-div-ficha__aviso-tipo {
	font-size: var(--ecn-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ecn-gris);
	border: 1px solid var(--ecn-gris-borde);
	padding: var(--ecn-sp-1) var(--ecn-sp-2);
}

.ecn-div-ficha__cifra {
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' var(--ecn-cifra-wght), 'wdth' var(--ecn-cifra-wdth);
	font-size: clamp(var(--ecn-fs-xl), 6vw + 1rem, var(--ecn-fs-3xl));
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
	line-height: 1.05;
	color: var(--ecn-negro);
	margin: 0 0 var(--ecn-sp-2);
}

.ecn-div-ficha__meta {
	display: flex;
	align-items: baseline;
	gap: var(--ecn-sp-3);
	flex-wrap: wrap;
	margin: 0 0 var(--ecn-sp-4);
}

.ecn-div-ficha__fecha {
	font-size: var(--ecn-fs-sm);
	color: var(--ecn-gris);
}

.ecn-div-ficha__nota,
.ecn-div-ficha__fuente {
	font-size: var(--ecn-fs-xs);
	color: var(--ecn-gris);
	margin: 0 0 var(--ecn-sp-2);
}

.ecn-div-ficha__fuente a { color: var(--ecn-gris); }
.ecn-div-ficha__fuente a:hover { color: var(--ecn-rojo); }

/* Cotización caducada: se muestra, pero avisando. Ocultarla sin decir nada
 * sería peor; presentarla como vigente, mucho peor. */
.ecn-div-ficha--vieja {
	border-top-color: var(--ecn-rojo);
}

.ecn-div-ficha__desactualizado {
	font-size: var(--ecn-fs-sm);
	color: var(--ecn-rojo);
	border-left: 3px solid var(--ecn-rojo);
	padding-left: var(--ecn-sp-3);
	margin: 0 0 var(--ecn-sp-4);
}

.ecn-div-ficha__serie {
	margin-top: var(--ecn-sp-4);
	border-top: 1px solid var(--ecn-gris-borde);
	padding-top: var(--ecn-sp-3);
}

.ecn-div-ficha__serie summary {
	cursor: pointer;
	font-size: var(--ecn-fs-sm);
	font-variation-settings: 'wght' 600, 'wdth' 95;
	color: var(--ecn-negro);
}

.ecn-div-ficha__serie summary:focus-visible {
	outline: 2px solid var(--ecn-rojo);
	outline-offset: 2px;
}

.ecn-div-ficha__serie[open] summary {
	margin-bottom: var(--ecn-sp-3);
}

@media (max-width: 640px) {
	.ecn-div-tick {
		gap: var(--ecn-sp-2);
		padding: var(--ecn-sp-2) var(--ecn-sp-3);
	}

	.ecn-div-tick__lista {
		gap: var(--ecn-sp-4);
	}

	.ecn-div-ficha {
		padding: var(--ecn-sp-4);
	}
}