/* =====================================================================
   Vota quién gana — banner del inicio, franja de la división y ranking.
   Ruta: assets/css/eg-quien-gana.css
   ===================================================================== */

.eg-qg { --qg-alto: 250px; }

/* ---- Carrusel (sin barra de desplazamiento; se asoma el siguiente) ---- */
.eg-qg-carrusel { position: relative; }
.eg-qg-pista {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.eg-qg-pista::-webkit-scrollbar { display: none; }
.eg-qg-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	background: #1e1e24;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
	transition: opacity .2s, background-color .2s;
}
.eg-qg-nav:hover { background: #2a2a32; }
.eg-qg-nav[disabled] { opacity: 0; pointer-events: none; }
.eg-qg-ant { left: -14px; }
.eg-qg-sig { right: -14px; }

/* ---- Banner del inicio ---- */
.eg-qg-banner {
	position: relative;
	flex: 0 0 calc(100% - 80px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	align-items: center;
	height: var(--qg-alto);
	overflow: hidden;
	scroll-snap-align: start;
	border-radius: 14px;
	background: radial-gradient(60% 120% at 78% 50%, rgba(254, 112, 6, .08), transparent 70%), linear-gradient(100deg, #0f0f12 0%, #141418 45%, #1b1b21 100%);
	border: 1px solid rgba(255, 255, 255, .06);
	box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .8);
}
.eg-qg-pista > .eg-qg-banner:only-child { flex-basis: 100%; }
.eg-qg-marca {
	position: absolute;
	right: 150px;
	top: 50%;
	width: 340px;
	height: 340px;
	object-fit: contain;
	transform: translateY(-50%);
	opacity: .07;
	filter: grayscale(.2);
	pointer-events: none;
}
.eg-qg-izq { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px 0 24px 32px; }
.eg-qg-der { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 24px 32px 24px 0; text-align: right; }
.eg-qg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 600; color: var(--eg-texto-2, #b4b4bf); }
.eg-qg-chip, .eg-qg-chip:visited {
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--eg-naranja-suave, rgba(254, 112, 6, .12));
	color: var(--eg-naranja-claro, #ff8a33) !important;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
}
.eg-qg-cruce { display: flex; align-items: center; gap: 14px; min-width: 0; }
.eg-qg-esc { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; background: #24242b; }
.eg-qg-esc img { width: 100%; height: 100%; object-fit: contain; }
.eg-qg-esc i { font-family: var(--eg-f-titulo); font-style: normal; font-weight: 900; font-size: 16px; color: #d4d4d8; }
.eg-qg-nombres {
	margin: 0 !important;
	min-width: 0;
	overflow: hidden;
	font-family: var(--eg-f-titulo) !important;
	font-size: 28px !important;
	font-style: italic;
	font-weight: 900 !important;
	line-height: 1.05 !important;
	text-transform: uppercase;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff !important;
}
.eg-qg-vs { padding: 0 6px; font-size: .68em; color: var(--eg-naranja, #fe7006); }
.eg-qg-votar { display: flex; flex-direction: column; gap: 6px; }
.eg-qg-pide { min-height: 17px; font-size: 13px; font-weight: 600; color: var(--eg-texto-2, #b4b4bf); }
.eg-qg-pide a { font-weight: 700; }
.eg-qg-ops { display: grid; gap: 8px; max-width: 560px; }
.eg-qg-ops-3 { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr); }
.eg-qg-ops-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Opción de voto: el mismo botón muestra después la barra con el %,
   así la tarjeta nunca cambia de alto. */
.eg-qg-op {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 46px;
	padding: 0 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	font: 700 14px/1 var(--eg-f-texto, inherit);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, transform .1s;
}
.eg-qg-op:hover:not(:disabled) { border-color: var(--eg-naranja, #fe7006); background: rgba(254, 112, 6, .08); }
.eg-qg-op:active:not(:disabled) { transform: scale(.98); }
.eg-qg-op:disabled { cursor: default; }
.eg-qg-op-barra { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .08); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.eg-qg-op-check { position: relative; flex: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 50%; }
.eg-qg-op-txt { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-qg-op-pct { position: relative; flex: none; font-variant-numeric: tabular-nums; }
.eg-qg-op.is-voto { border-color: var(--eg-naranja, #fe7006); }
.eg-qg-op.is-voto .eg-qg-op-barra { background: rgba(254, 112, 6, .3); }
.eg-qg-op.is-voto .eg-qg-op-check { border-color: var(--eg-naranja, #fe7006); background: radial-gradient(circle, var(--eg-naranja, #fe7006) 0 45%, transparent 50%); }
.eg-qg-op.is-gana { border-color: #22c55e; }
.eg-qg-op.is-gana .eg-qg-op-barra { background: rgba(34, 197, 94, .25); }
[data-qg-cerrado="1"] .eg-qg-op:not(.is-voto):not(.is-gana) { color: #a1a1aa; }

.eg-qg-der-tit { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--eg-texto-3, #8f8f9b); }
.eg-qg-reloj { min-height: 38px; font-family: var(--eg-f-titulo); font-size: 24px; font-weight: 800; line-height: 38px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.eg-qg-reloj b { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: #24242b; text-align: center; }
.eg-qg-reloj b:last-child { color: var(--eg-naranja, #fe7006); }
.eg-qg-premio { padding: 6px 10px; border-radius: 6px; background: var(--eg-naranja-suave, rgba(254, 112, 6, .12)); color: var(--eg-naranja-claro, #ff8a33); font-size: 13px; font-weight: 700; }
.eg-qg-premio.is-acierto { background: rgba(34, 197, 94, .14); color: #4ade80; }
.eg-qg-premio.is-falla { background: rgba(255, 255, 255, .06); color: #a1a1aa; }

.eg-qg-divs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.eg-qg-div {
	padding: 6px 12px;
	border: 0;
	border-radius: 6px;
	background: #1e1e24;
	color: var(--eg-texto-3, #8f8f9b);
	font: 700 12px/1.2 var(--eg-f-texto, inherit);
	cursor: pointer;
}
.eg-qg-div.is-activo { background: var(--eg-naranja, #fe7006); color: #1a0c02; }

/* ---- Franja compacta de la página de la división ---- */
.eg-qg-franja {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 18px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 10px;
	background: #1a1a1f;
}
.eg-qg-f-tit { flex: none; display: flex; flex-direction: column; gap: 2px; width: 118px; }
.eg-qg-f-tit b { font-family: var(--eg-f-titulo); font-size: 15px; font-style: italic; font-weight: 900; line-height: 1.05; text-transform: uppercase; color: #fff; }
.eg-qg-f-tit small { font-size: 12px; color: var(--eg-texto-3, #8f8f9b); }
.eg-qg-f-carr { flex: 1; min-width: 0; padding: 0 22px; }
.eg-qg-f-carr .eg-qg-pista { gap: 8px; }
.eg-qg-f-carr .eg-qg-nav { width: 32px; height: 32px; margin-top: -16px; }
.eg-qg-f-carr .eg-qg-ant { left: -6px; }
.eg-qg-f-carr .eg-qg-sig { right: -6px; }
.eg-qg-mini {
	flex: 0 0 auto;
	max-width: 460px;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	scroll-snap-align: start;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #1e1e24;
}
.eg-qg-mini.is-esta { border-color: rgba(254, 112, 6, .45); }
.eg-qg-mini-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eg-qg-mini-div { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--eg-naranja-claro, #ff8a33); }
.eg-qg-mini-cruce { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.eg-qg-mini-cruce i { font-style: normal; color: var(--eg-naranja, #fe7006); }
.eg-qg-ops-mini { flex: none; display: flex; gap: 4px; }
.eg-qg-ops-mini .eg-qg-op { justify-content: center; width: 40px; height: 34px; padding: 0; font-size: 12px; font-weight: 800; text-align: center; }
.eg-qg-ops-mini .eg-qg-op-txt { flex: none; }
.eg-qg-ops-mini .eg-qg-op-pct { display: none; }
.eg-qg-ops-mini .eg-qg-op.is-voto .eg-qg-op-barra, .eg-qg-ops-mini .eg-qg-op.is-gana .eg-qg-op-barra { width: 100% !important; }
.eg-qg-f-todas, .eg-qg-f-todas:visited {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--eg-naranja-suave, rgba(254, 112, 6, .12));
	color: var(--eg-naranja-claro, #ff8a33) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}
.eg-qg-f-msg { font-size: 12px; color: #fbbf24; }

/* ---- Ranking en Monedas ---- */
.eg-qg-rk { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; padding: 18px; border-radius: 12px; background: #18181d; border: 1px solid rgba(255, 255, 255, .06); }
.eg-qg-rk-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.eg-qg-rk-cab .eg-mo-sub { margin: 0 !important; }
.eg-qg-rk-cab a { font-size: 14px; font-weight: 700; }
.eg-qg-rk-txt { margin: 0 !important; font-size: 14px; color: var(--eg-texto-2, #b4b4bf); }
.eg-qg-rk-premios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eg-qg-rk-p { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 10px; font-size: 12px; font-weight: 700; text-align: center; }
.eg-qg-rk-p i { display: block; width: 34px; height: 26px; border-radius: 6px; }
.eg-qg-rk-p b { font-family: var(--eg-f-titulo); font-size: 15px; }
.eg-qg-rk-oro { border: 1px solid rgba(250, 204, 21, .55); background: linear-gradient(165deg, #2a1e06, #120d04); color: #fde68a; }
.eg-qg-rk-oro i { background: linear-gradient(160deg, #facc15, #92400e); }
.eg-qg-rk-plata { border: 1px solid rgba(212, 212, 216, .45); background: linear-gradient(165deg, #1d1d22, #121215); color: #e4e4e7; }
.eg-qg-rk-plata i { background: linear-gradient(160deg, #d4d4d8, #52525b); }
.eg-qg-rk-normal { border: 1px solid rgba(34, 197, 94, .4); background: #1e1e24; color: #bbf7d0; }
.eg-qg-rk-normal i { background: linear-gradient(160deg, #22c55e, #14532d); }
.eg-qg-rk-lista { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.eg-qg-rk-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 !important; padding: 9px 12px; border-radius: 8px; background: #1e1e24; }
.eg-qg-rk-lista li b { font-family: var(--eg-f-titulo); font-weight: 900; color: var(--eg-texto-2, #b4b4bf); }
.eg-qg-rk-lista li:nth-child(1) b { color: #facc15; }
.eg-qg-rk-lista li:nth-child(2) b { color: #d4d4d8; }
.eg-qg-rk-lista li:nth-child(3) b { color: #4ade80; }
.eg-qg-rk-lista li span { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.eg-qg-rk-lista li small { font-size: 13px; color: var(--eg-texto-2, #b4b4bf); }
.eg-qg-rk-lista li.is-yo { border: 1px solid rgba(254, 112, 6, .45); background: rgba(254, 112, 6, .08); }

/* ---- Celular ---- */
@media (max-width: 900px) {
	.eg-qg { --qg-alto: auto; }
	.eg-qg-banner { flex-basis: calc(100% - 36px); grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 360px; }
	.eg-qg-izq { padding: 18px 16px 6px; gap: 12px; }
	.eg-qg-der { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 6px 16px 18px; text-align: left; }
	.eg-qg-der-tit { flex-basis: 100%; }
	.eg-qg-reloj { font-size: 22px; min-height: 32px; line-height: 32px; }
	.eg-qg-marca { right: -60px; width: 240px; height: 240px; top: 40%; }
	.eg-qg-cruce { flex-wrap: wrap; gap: 8px 10px; }
	.eg-qg-esc { width: 40px; height: 40px; }
	.eg-qg-nombres { flex-basis: 100%; order: 3; font-size: 22px !important; white-space: normal; }
	.eg-qg-ops-3, .eg-qg-ops-2 { grid-template-columns: minmax(0, 1fr); }
	.eg-qg-nav { display: none; }
	.eg-qg-franja { flex-wrap: wrap; gap: 8px; padding: 10px; }
	.eg-qg-f-tit { flex-direction: row; align-items: baseline; gap: 8px; width: auto; flex: 1; min-width: 0; white-space: nowrap; }
	.eg-qg-f-tit b { font-size: 14px; }
	.eg-qg-f-todas { height: 30px; padding: 0 10px; font-size: 12px; }
	.eg-qg-f-carr { flex-basis: 100%; order: 3; padding: 0; }
	.eg-qg-mini { flex: 0 0 calc(100% - 44px); max-width: none; flex-direction: column; align-items: stretch; gap: 8px; }
	.eg-qg-ops-mini { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
	.eg-qg-ops-mini .eg-qg-op { width: auto; }
	.eg-qg-f-tit small { overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
	.eg-qg-pista { scroll-behavior: auto; }
	.eg-qg-op-barra { transition: none; }
}

/* ---- Color de la división (v9.368): borde con brillo, tinte y etiqueta ---- */
.eg-qg-banner {
	--qg-c: #fe7006;
	border-color: color-mix(in srgb, var(--qg-c) 45%, transparent);
	background:
		radial-gradient(55% 120% at 80% 50%, color-mix(in srgb, var(--qg-c) 16%, transparent), transparent 70%),
		linear-gradient(100deg, #0f0f12 0%, #141418 45%, #1b1b21 100%);
	box-shadow: 0 0 34px -14px var(--qg-c), inset 3px 0 0 var(--qg-c), 0 14px 32px -16px rgba(0, 0, 0, .8);
}
.eg-qg-banner .eg-qg-chip, .eg-qg-banner .eg-qg-chip:visited {
	background: color-mix(in srgb, var(--qg-c) 18%, transparent);
	color: color-mix(in srgb, var(--qg-c) 70%, #fff) !important;
}
.eg-qg-banner .eg-qg-der-tit { color: color-mix(in srgb, var(--qg-c) 45%, #a1a1aa); }
.eg-qg-mini { --qg-c: #fe7006; }
.eg-qg-mini-div { color: color-mix(in srgb, var(--qg-c) 70%, #fff); }
.eg-qg-mini.is-esta { border-color: color-mix(in srgb, var(--qg-c) 55%, transparent); box-shadow: 0 0 18px -8px var(--qg-c); }

/* ---- Botones de voto: el tema del sitio les cambiaba el color al pasar
   el mouse o al tocarlos (texto negro / fondo naranjo). Se fijan aquí. ---- */
.eg-qg .eg-qg-op, .eg-qg-franja .eg-qg-op,
.eg-qg .eg-qg-op:hover, .eg-qg-franja .eg-qg-op:hover,
.eg-qg .eg-qg-op:focus, .eg-qg-franja .eg-qg-op:focus,
.eg-qg .eg-qg-op:active, .eg-qg-franja .eg-qg-op:active {
	background: rgba(255, 255, 255, .04) !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.eg-qg .eg-qg-op:hover:not(:disabled), .eg-qg-franja .eg-qg-op:hover:not(:disabled) { border-color: var(--eg-naranja, #fe7006) !important; background: rgba(254, 112, 6, .1) !important; }
.eg-qg .eg-qg-op:focus-visible, .eg-qg-franja .eg-qg-op:focus-visible { outline: 2px solid var(--eg-naranja, #fe7006); outline-offset: 2px; }
.eg-qg .eg-qg-op.is-voto, .eg-qg-franja .eg-qg-op.is-voto { border-color: var(--eg-naranja, #fe7006) !important; }
.eg-qg .eg-qg-op.is-gana, .eg-qg-franja .eg-qg-op.is-gana { border-color: #22c55e !important; }
.eg-qg [data-qg-cerrado="1"] .eg-qg-op:not(.is-voto):not(.is-gana), .eg-qg-franja [data-qg-cerrado="1"] .eg-qg-op:not(.is-voto):not(.is-gana) { color: #a1a1aa !important; }
.eg-qg .eg-qg-nav, .eg-qg .eg-qg-nav:hover, .eg-qg .eg-qg-nav:focus, .eg-qg-franja .eg-qg-nav, .eg-qg-franja .eg-qg-nav:hover, .eg-qg-franja .eg-qg-nav:focus { background: #1e1e24 !important; color: #fff !important; }
.eg-qg .eg-qg-div:hover, .eg-qg .eg-qg-div:focus { background: #24242b !important; color: #fff !important; }
.eg-qg .eg-qg-div.is-activo, .eg-qg .eg-qg-div.is-activo:hover, .eg-qg .eg-qg-div.is-activo:focus { background: var(--eg-naranja, #fe7006) !important; color: #1a0c02 !important; }

/* Primer toque: pide confirmar (el voto es definitivo). */
.eg-qg .eg-qg-op.is-confirmar, .eg-qg-franja .eg-qg-op.is-confirmar { border-color: var(--eg-naranja, #fe7006) !important; background: rgba(254, 112, 6, .18) !important; animation: eg-qg-confirma 1s ease-in-out infinite; }
@keyframes eg-qg-confirma { 50% { box-shadow: 0 0 0 3px rgba(254, 112, 6, .35) !important; } }
.eg-qg .eg-qg-op:disabled, .eg-qg-franja .eg-qg-op:disabled { cursor: default; }
.eg-qg .eg-qg-op:disabled:not(.is-voto):not(.is-gana), .eg-qg-franja .eg-qg-op:disabled:not(.is-voto):not(.is-gana) { color: #a1a1aa !important; }