/* Estilos públicos para [tasas_colombia] - tablero por país */
.tasasc-board {
	max-width: 680px;
	margin: 0 auto;
	background: linear-gradient(180deg, #0b4aa8 0%, #0a3b85 100%);
	padding: 44px 12px 16px; /* más compacto */
	border-radius: 16px;
	position: relative;
}
.tasasc-board__head {
	background: #ffffff;
	border-radius: 22px 22px 0px 0px;
	padding: 56px 14px 12px; /* antes 44px 14px 12px: más aire para la moneda */
	position: relative;
	text-align: center;
}
.tasasc-coin { position: absolute; top: 0; left: 50%; transform: translate(-50%, -42%); width: clamp(96px, 18vw, 150px); height: auto; z-index: 2; pointer-events: none; }
.tasasc-title { font-size: 28px; color: #0d122b; font-weight: 900; margin: 0; }
.tasasc-date { margin: 8px auto 6px; padding: 5px 10px; font-size: 13px; }
/* Refuerzo para evitar overrides del tema */
.tasasc-board__head .tasasc-date { display: inline-block; background: #1656c1; color: #fff; border-radius: 8px; font-weight: 700; }

/* País */
.tasasc-country { background: #ffffff;overflow: hidden; }
/* Zebra */
.tasasc-board > .tasasc-country:nth-of-type(even) { background: #eef2f6; }

.tasasc-country__header {
	display: flex; align-items: center; justify-content: center;
	gap: 8px; padding: 6px 12px 4px; /* antes 8px 12px */
	background: transparent; text-align: center;
	margin-top: 20px;
}
.tasasc-flag { width: 36px; height: 36px; }
.tasasc-country__name { font-size: 22px; font-weight: 800; color: #0d122b; letter-spacing: .5px; }

/* Pagadores */
.tasasc-payers { 
    gap: 75px;
    justify-content: center;
    display: flex
;}
.tasasc-payers--two { grid-template-columns: 1fr 1fr; }
.tasasc-payers--one { grid-template-columns: 1fr; }

/* Pagador: reordenar a icono -> tasa -> nombre usando Grid y centrar verticalmente */
.tasasc-payer {
	display: grid;
	grid-template-areas:
		"icon"
		"rate"
		"name";
	justify-items: center;
	align-content: center; /* centra verticalmente dentro de la celda */
	row-gap: 4px;
	text-align: center;
	min-height: 140px; /* altura uniforme de cada cajita */
}
/* Aplana el contenedor de marca para que sus hijos (icono y nombre) participen en el grid del padre */
.tasasc-payer__brand { display: contents; }
.tasasc-logo { display: block; grid-area: icon; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.tasasc-payer__rate { grid-area: rate; margin-top: 0; font-weight: 800; font-size: 26px; line-height: 1.05; color: #0b0f1a; }
.tasasc-payer__name { grid-area: name; font-weight: 700; font-size: 16px; line-height: 1.1; color: #0b0f1a; }

/* Nota opcional */
.tasasc-note { margin: 6px 14px 4px; font-size: 12px; text-align: center; color: #475569; }

/* Responsive */
@media (max-width: 720px) {
	.tasasc-title { font-size: 24px; }
	/* Mantener dos columnas en mobile */
	.tasasc-payers--two { grid-template-columns: 1fr 1fr; }
	.tasasc-payer__rate { font-size: 24px; }
	.tasasc-payer { min-height: 120px; }
}

/* Desktop: limita tamaño de la moneda y ajusta solape */
@media (min-width: 900px) {
	.tasasc-coin { width: 140px !important; transform: translate(-50%, -56%); }
	.tasasc-board__head { padding-top: 68px; }
	.tasasc-flag { width: 40px; height: 40px; }
	.tasasc-country__name { font-size: 24px; }
	.tasasc-payer__rate { font-size: 28px; }
	.tasasc-payer { min-height: 150px; }
}

@media (min-width: 1280px) {
	.tasasc-coin { width: 150px !important; transform: translate(-50%, -58%); }
	.tasasc-board__head { padding-top: 74px; }
	.tasasc-flag { width: 42px; height: 42px; }
	.tasasc-country__name { font-size: 26px; }
	.tasasc-payer { min-height: 160px; }
}