/* ===================== Tabla "Cotizaciones del Día" ===================== */

.cc-cotizaciones-wrap {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}

.cc-cotizaciones {
	--cc-navy: rgb(0, 18, 58);
	--cc-navy-2: rgb(0, 40, 85);
	--cc-red: rgb(255, 0, 44);
	--cc-nuevo-blue: #003CBE;

	max-width: 460px;
	width: 100%;
	margin: 0;
	background: #ffffff;
	border-radius: 20px;
	border: 1px solid rgba(0, 18, 58, 0.08);
	box-shadow: 0 20px 45px rgba(0, 18, 58, 0.12);
	padding: 26px 26px 20px;
	font-family: var(--wd-text-font, inherit);
	position: relative;
}

.cc-cotizaciones::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 20px 20px 0 0;
	background: linear-gradient(90deg, var(--cc-navy), var(--cc-red));
}

.cc-cotizaciones-head {
	text-align: center;
	margin-bottom: 20px;
}

.cc-cotizaciones .cc-titulo {
	font-family: var(--wd-title-font, inherit);
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 4px;
	color: var(--cc-navy);
}

.cc-subtitulo {
	margin: 0;
	font-size: 12.5px;
	color: rgba(0, 18, 58, 0.5);
}

.cc-tabla {
	width: 100%;
	border-collapse: collapse;
}

.cc-tabla thead th {
	text-align: right;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(0, 18, 58, 0.45);
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(0, 18, 58, 0.08);
}

.cc-tabla thead th.cc-col-moneda {
	text-align: left;
}

.cc-fila td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 18, 58, 0.06);
}

.cc-fila:last-child td {
	border-bottom: none;
}

.cc-fila-destacada {
	background: linear-gradient(90deg, rgba(255, 0, 44, 0.06), rgba(255, 0, 44, 0));
}

.cc-fila-destacada td:first-child {
	border-radius: 10px 0 0 10px;
}

.cc-fila-destacada td:last-child {
	border-radius: 0 10px 10px 0;
}

.cc-moneda {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--cc-navy-2);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.cc-flag-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 18, 58, 0.05);
	flex-shrink: 0;
	font-size: 16px;
}

.cc-table-flag-img {
	width: 20px;
	height: 20px;
}

.cc-moneda-nombre {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.cc-badge-nuevo {
	background: var(--cc-nuevo-blue);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	padding: 2px 7px;
	border-radius: 5px;
	line-height: 1.4;
}

.cc-col-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	font-weight: 700;
	color: var(--cc-navy);
}

.cc-actualizacion {
	text-align: center;
	color: rgba(0, 18, 58, 0.45);
	font-size: 12px;
	margin: 18px 0 0;
}

.cc-empty {
	text-align: center;
	color: #888;
	padding: 20px;
}

/* Íconos genéricos compartidos con el widget (CC_Icons::html) */
.cc-icon-img {
	display: block;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.cc-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cc-red, #FF002C);
	color: #fff;
	font-weight: 800;
	font-size: 11px;
	line-height: 1;
	flex-shrink: 0;
}

.cc-icon-emoji {
	line-height: 1;
	flex-shrink: 0;
}

.cc-bcu-chart {
	max-width: 960px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid rgba(0, 18, 58, 0.08);
	border-radius: 16px;
	padding: 20px 22px 16px;
	box-shadow: 0 16px 36px rgba(0, 18, 58, 0.08);
	font-family: var(--wd-text-font, inherit);
}

.cc-bcu-chart-header {
	margin-bottom: 6px;
}

.cc-bcu-chart-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 18, 58, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.cc-bcu-chart-value-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.cc-bcu-chart-value {
	font-family: var(--wd-title-font, inherit);
	font-size: 28px;
	font-weight: 800;
	color: rgb(0, 18, 58);
}

.cc-bcu-chart-change {
	font-size: 14px;
	font-weight: 700;
}

.cc-bcu-chart-caption {
	text-align: center;
	color: #8A93A1;
	font-size: 12.5px;
	margin: 6px 0 0;
}

/* ===================== Widget "Cotización en vivo" ===================== */
/* Colores tomados de las variables de marca del tema (--wd-primary-color,
   --wd-alternative-color) para que quede consistente con el resto del sitio. */

.cc-widget {
	--cc-w-navy: rgb(0, 18, 58);
	--cc-w-navy-2: rgb(0, 40, 85);
	--cc-w-red: rgb(255, 0, 44);
	--cc-w-green: #22c55e;

	position: relative;
	z-index: 50;
	isolation: isolate;
	width: 100%;
	max-width: 340px;
	padding: 22px 22px 20px;
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(0, 18, 58, 0.92), rgba(0, 40, 85, 0.86));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 24px 48px rgba(0, 18, 58, 0.35);
	color: #fff;
	font-family: var(--wd-text-font, inherit);
}

.cc-widget--empty {
	text-align: center;
	color: #fff;
	background: var(--cc-w-navy, #00123a);
	border-radius: 20px;
	padding: 24px;
}

.cc-widget-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cc-widget-live {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wd-title-font, inherit);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.2px;
}

.cc-widget-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cc-w-green);
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
	animation: cc-widget-pulse 2s infinite;
	flex-shrink: 0;
}

@keyframes cc-widget-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-widget-live-dot { animation: none; }
}

.cc-widget-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.cc-widget-updated {
	margin: 4px 0 18px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
}

.cc-widget-values {
	display: flex;
	gap: 28px;
	margin-bottom: 18px;
}

.cc-widget-value-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cc-widget-value-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 600;
}

.cc-widget-value {
	font-family: var(--wd-title-font, inherit);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.cc-widget-selector-wrap {
	position: relative;
	margin-bottom: 14px;
}

.cc-widget-selector {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	color: #fff !important;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	text-align: left !important;
}

.cc-widget-selector:hover,
.cc-widget-selector:focus {
	background: rgba(255, 255, 255, 0.13);
	color: #fff !important;
}

.cc-widget-selector-flag {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.cc-widget-flag-img {
	width: 20px;
	height: 20px;
}

.cc-widget-selector-label {
	flex: 1 1 auto;
}

.cc-widget-selector-chevron {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	transition: transform 0.15s ease;
}

.cc-widget-selector[aria-expanded="true"] .cc-widget-selector-chevron {
	transform: rotate(180deg);
}

.cc-widget-dropdown {
	position: absolute;
	z-index: 999 !important;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cc-w-navy-2);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	box-shadow: 0 16px 32px rgba(0, 18, 58, 0.45);
}

/* El tema trae estilos globales bastante agresivos para <ul>/<li>/<button>
   (alineación centrada, anchos automáticos), así que acá reforzamos con
   !important puntualmente en las propiedades de layout que nos importan. */
.cc-widget-dropdown li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: left !important;
	width: 100% !important;
}

.cc-widget-option {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px;
	width: 100% !important;
	padding: 9px 10px;
	background: none;
	border: none;
	border-radius: 9px;
	color: #fff !important;
	font-family: inherit;
	font-size: 13.5px;
	text-align: left !important;
	cursor: pointer;
}

.cc-widget-option:hover,
.cc-widget-option:focus {
	background: rgba(255, 255, 255, 0.1);
	color: #fff !important;
}

.cc-widget-more {
	display: block;
	width: 100%;
	padding: 11px 16px;
	background: #fff;
	border: none;
	border-radius: 14px;
	color: var(--cc-w-navy);
	font-family: inherit;
	font-weight: 600;
	font-size: 13.5px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cc-widget-more:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--cc-w-navy);
}

/* ===================== Widget "Finza" (card tipo app) ===================== */

.cc-finza-widget {
	--cf-blue-1: #0047D6;
	--cf-blue-2: #003CBE;
	--cf-accent: #50A0FF;

	max-width: 300px;
	margin: 0 auto;
	padding: 22px 22px 20px;
	border-radius: 28px;
	background: linear-gradient(160deg, var(--cf-blue-1), var(--cf-blue-2));
	box-shadow: 0 24px 48px rgba(10, 31, 99, 0.35);
	font-family: var(--wd-text-font, inherit);
	color: #fff;
}

.cc-finza-widget--empty {
	text-align: center;
	color: #fff;
	background: var(--cf-blue-2, #003CBE);
	border-radius: 28px;
	padding: 24px;
	max-width: 300px;
	margin: 0 auto;
}

.cc-finza-widget-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.cc-finza-logo {
	font-family: var(--wd-title-font, inherit);
	font-weight: 800;
	font-size: 20px;
	color: #fff;
	line-height: 1;
}

.cc-finza-logo-arrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	margin-left: 2px;
	transform: translateY(-4px);
}

.cc-finza-bell {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.85);
}

.cc-finza-label {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.cc-finza-updated {
	margin: 2px 0 18px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.55);
}

.cc-finza-values {
	display: flex;
	gap: 30px;
	margin-bottom: 16px;
}

.cc-finza-value-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cc-finza-value-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 600;
}

.cc-finza-value {
	font-family: var(--wd-title-font, inherit);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.cc-finza-currency-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 14px;
	padding: 10px 14px;
	margin-bottom: 14px;
}

.cc-finza-currency-flag {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.cc-finza-flag-img {
	width: 22px;
	height: 22px;
}

.cc-finza-currency-label {
	color: var(--cc-w-navy, #00123A);
	font-size: 13.5px;
	font-weight: 500;
}

.cc-finza-cta {
	display: block;
	width: 100%;
	padding: 13px 16px;
	background: var(--cf-accent);
	border-radius: 14px;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
}

a.cc-finza-cta:hover {
	background: #3D8CE0;
	color: #fff;
}

.cc-finza-cta--sin-link {
	cursor: default;
	opacity: 0.92;
}

/* ===================== Ajustes responsive mobile ===================== */

.cc-tabla-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
	.cc-cotizaciones {
		padding: 20px 16px 16px;
	}

	.cc-moneda {
		/* En mobile dejamos que el nombre pase a una segunda línea en vez de
		   forzar una sola línea sin cortes — eso era lo que empujaba a la
		   tabla a desbordar el ancho de la card. */
		white-space: normal;
		align-items: flex-start;
		gap: 8px;
	}

	.cc-flag-wrap {
		width: 26px;
		height: 26px;
		margin-top: 1px;
	}

	.cc-moneda-nombre {
		font-size: 13px;
	}

	.cc-col-num {
		font-size: 13.5px;
	}

	.cc-badge-nuevo {
		font-size: 9px;
		padding: 1px 5px;
	}
}

@media (max-width: 360px) {
	.cc-col-num {
		font-size: 12.5px;
	}
}

/* ===================== Widget "grilla" (todas las monedas en la card azul) ===================== */

.cc-grid-widget {
	max-width: 320px;
}

.cc-grid-widget-head-row {
	display: grid;
	grid-template-columns: 1fr 64px 64px;
	gap: 6px;
	padding: 0 2px 6px;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 600;
}

.cc-grid-widget-head-row span:nth-child(2),
.cc-grid-widget-head-row span:nth-child(3) {
	text-align: right;
}

.cc-grid-widget-rows {
	margin-bottom: 16px;
}

.cc-grid-widget-row {
	display: grid;
	grid-template-columns: 1fr 64px 64px;
	align-items: center;
	gap: 6px;
	padding: 9px 2px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-grid-widget-row:last-child {
	padding-bottom: 0;
}

.cc-grid-widget-moneda {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cc-grid-widget-num {
	text-align: right;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.cc-widget-more--sin-link {
	cursor: default;
}