/* CiviRed ePosters – galería y visor.
   Colores y fuente salen del tema (variables --cv-*); si no existen, valores por defecto. */

.cvg,
.cvg-viewer,
.cvg-rest {
	--cvg-primary: var(--cv-primary, #0B6E99);
	--cvg-secondary: var(--cv-secondary, #14A39A);
	--cvg-ink: var(--cv-ink, #161A20);
	--cvg-muted: var(--cv-muted, #5B6270);
	--cvg-line: var(--cv-line, #DDE1E7);
	--cvg-card: var(--cv-card, #FFFFFF);
	--cvg-font: var(--cv-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	/* Unidad base: crece con la pantalla (55" ≈ 24px, móvil ≈ 15px). */
	--cvg-u: clamp(15px, 2.1vmin, 30px);
	font-family: var(--cvg-font);
	color: var(--cvg-ink);
}

.cvg {
	--cvg-gap: calc(var(--cvg-u) * 1.4);
	width: 100%;
	box-sizing: border-box;
}
.cvg *,
.cvg-viewer * { box-sizing: border-box; }

.cvg-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Herramientas ------------------------------------------------------------- */

.cvg-tools {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cvg-u) * 0.9);
	margin-bottom: calc(var(--cvg-u) * 1.2);
}

.cvg-search { position: relative; }
.cvg-search svg {
	position: absolute;
	left: calc(var(--cvg-u) * 1.1);
	top: 50%;
	width: calc(var(--cvg-u) * 1.4);
	height: calc(var(--cvg-u) * 1.4);
	transform: translateY(-50%);
	color: var(--cvg-muted);
	pointer-events: none;
}
.cvg-search input.cvg-q {
	width: 100%;
	height: calc(var(--cvg-u) * 3.2);
	min-height: 48px;
	margin: 0;
	padding: 0 calc(var(--cvg-u) * 1.2) 0 calc(var(--cvg-u) * 3.2);
	border: 2px solid var(--cvg-line);
	border-radius: 999px;
	background: var(--cvg-card);
	color: var(--cvg-ink);
	font: 500 calc(var(--cvg-u) * 1.15) / 1.2 var(--cvg-font);
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.cvg-search input.cvg-q:focus {
	border-color: var(--cvg-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cvg-primary) 18%, transparent);
}

.cvg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cvg-u) * 0.5);
	padding: 2px;
}

.cvg-chip {
	min-height: 44px;
	height: calc(var(--cvg-u) * 2.3);
	padding: 0 calc(var(--cvg-u) * 1.05);
	border: 2px solid var(--cvg-line);
	border-radius: 999px;
	background: var(--cvg-card);
	color: var(--cvg-ink);
	font: 700 calc(var(--cvg-u) * 0.85) / 1 var(--cvg-font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.cvg-chip:hover { border-color: var(--cvg-primary); }
.cvg-chip.is-active {
	background: var(--cvg-primary);
	border-color: var(--cvg-primary);
	color: #fff;
}
.cvg-chip:focus-visible,
.cvg-catbtn:focus-visible,
.cvg-catclear:focus-visible,
.cvg-catpanel button:focus-visible,
.cvg-card button:focus-visible,
.cvg-viewer button:focus-visible {
	outline: 3px solid var(--cvg-primary);
	outline-offset: 3px;
}

.cvg-count {
	margin: 0;
	font-size: calc(var(--cvg-u) * 0.8);
	color: var(--cvg-muted);
}

/* Filtro de categorías con panel (cuando hay muchas) ---------------------- */

.cvg-catbar {
	display: flex;
	align-items: center;
	gap: calc(var(--cvg-u) * 0.5);
	min-width: 0;
}
.cvg-catbtn {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cvg-u) * 0.55);
	min-width: 0;
	max-width: 100%;
	min-height: 48px;
	height: calc(var(--cvg-u) * 2.6);
	padding: 0 calc(var(--cvg-u) * 1.1);
	border: 2px solid var(--cvg-line);
	border-radius: 999px;
	background: var(--cvg-card);
	color: var(--cvg-ink);
	font: 700 calc(var(--cvg-u) * 0.9) / 1 var(--cvg-font);
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}
.cvg-catbtn:hover { border-color: var(--cvg-primary); }
.cvg-catbtn svg { flex-shrink: 0; width: calc(var(--cvg-u) * 1.1); height: calc(var(--cvg-u) * 1.1); }
.cvg-catbtn__k { flex-shrink: 0; font-weight: 600; color: var(--cvg-muted); }
.cvg-catbtn__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvg-catbtn.is-active { background: var(--cvg-primary); border-color: var(--cvg-primary); color: #fff; }
.cvg-catbtn.is-active .cvg-catbtn__k { color: rgba(255, 255, 255, .8); }
.cvg-catclear {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: calc(var(--cvg-u) * 2.6);
	height: calc(var(--cvg-u) * 2.6);
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	border: 2px solid var(--cvg-line);
	border-radius: 50%;
	background: var(--cvg-card);
	color: var(--cvg-ink);
	cursor: pointer;
}
.cvg-catclear[hidden] { display: none; }
.cvg-catclear svg { width: 45%; height: 45%; }
.cvg-catclear:hover { border-color: var(--cvg-primary); color: var(--cvg-primary); }

html.cvg-noscroll, html.cvg-noscroll body { overflow: hidden; }

.cvg-catpanel {
	--cvg-primary: var(--cv-primary, #0B6E99);
	--cvg-ink: var(--cv-ink, #161A20);
	--cvg-muted: var(--cv-muted, #5B6270);
	--cvg-line: var(--cv-line, #DDE1E7);
	--cvg-card: var(--cv-card, #FFFFFF);
	--cvg-font: var(--cv-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--cvg-u: clamp(15px, 2.1vmin, 30px);
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--cvg-u) * 2);
	background: rgba(15, 18, 24, .55);
	font-family: var(--cvg-font);
	color: var(--cvg-ink);
	animation: cvg-fade .18s ease-out;
}
.cvg-catpanel[hidden] { display: none; }
.cvg-catpanel * { box-sizing: border-box; }
.cvg-catpanel__box {
	display: flex;
	flex-direction: column;
	width: min(100%, 1400px);
	max-height: 100%;
	border-radius: calc(var(--cvg-u) * 1.2);
	background: var(--cvg-card);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
	overflow: hidden;
	animation: cvg-rise .22s ease-out;
}
.cvg-catpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cvg-u) * 1);
	padding: calc(var(--cvg-u) * 1.1) calc(var(--cvg-u) * 1.4);
	border-bottom: 1px solid var(--cvg-line);
}
.cvg-catpanel__title {
	margin: 0;
	font: 800 calc(var(--cvg-u) * 1.25) / 1.2 var(--cvg-font);
	letter-spacing: -.01em;
	color: var(--cvg-ink);
}
.cvg-catpanel__close {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: calc(var(--cvg-u) * 2.6);
	height: calc(var(--cvg-u) * 2.6);
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #F1F3F6;
	color: var(--cvg-ink);
	cursor: pointer;
}
.cvg-catpanel__close svg { width: 45%; height: 45%; }
.cvg-chips--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--cvg-u) * 15)), 1fr));
	gap: calc(var(--cvg-u) * 0.6);
	padding: calc(var(--cvg-u) * 1.2) calc(var(--cvg-u) * 1.4) calc(var(--cvg-u) * 1.4);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.cvg-chips--grid .cvg-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cvg-u) * 0.7);
	height: auto;
	min-height: calc(var(--cvg-u) * 3);
	padding: calc(var(--cvg-u) * 0.6) calc(var(--cvg-u) * 0.9);
	border-radius: calc(var(--cvg-u) * 0.7);
	font-size: calc(var(--cvg-u) * 0.85);
	line-height: 1.25;
	text-align: left;
	white-space: normal;
}
.cvg-chips--grid .cvg-chip small {
	flex-shrink: 0;
	min-width: calc(var(--cvg-u) * 1.8);
	padding: .25em .55em;
	border-radius: 999px;
	background: #F1F3F6;
	color: var(--cvg-muted);
	font-size: .85em;
	font-weight: 700;
	text-align: center;
}
.cvg-chips--grid .cvg-chip.is-active small { background: rgba(255, 255, 255, .22); color: #fff; }

@keyframes cvg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvg-rise { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Móvil: el panel sube desde abajo. */
@media (max-width: 720px) {
	.cvg-catpanel { align-items: flex-end; padding: 0; }
	.cvg-catpanel__box { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; }
	.cvg-catbtn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.cvg-catpanel, .cvg-catpanel__box { animation: none; }
}

/* Rejilla ------------------------------------------------------------------ */

.cvg-grid {
	display: grid;
	grid-template-columns: repeat(var(--cvg-cols, 3), minmax(0, 1fr));
	gap: calc(var(--cvg-gap) * 1.2) var(--cvg-gap);
}
@media (orientation: landscape) and (min-width: 1200px) {
	.cvg-grid { grid-template-columns: repeat(var(--cvg-cols-h, 4), minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.cvg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
	.cvg-grid { grid-template-columns: minmax(0, 1fr); }
}

.cvg-card {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cvg-u) * 0.5);
	min-width: 0;
	animation: cvg-in .35s ease both;
}
@keyframes cvg-in { from { opacity: 0; transform: translateY(8px); } }

.cvg-thumb {
	display: block;
	width: 100%;
	margin: 0 0 calc(var(--cvg-u) * 0.2);
	padding: 0;
	border: 0;
	border-radius: calc(var(--cvg-u) * 0.5);
	background: var(--cvg-card);
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	cursor: zoom-in;
	box-shadow: 0 2px 4px rgba(22, 26, 32, .06), 0 12px 28px rgba(22, 26, 32, .10);
	transition: transform .2s, box-shadow .2s;
}
.cvg-thumb:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(22,26,32,.08), 0 18px 36px rgba(22,26,32,.14); }
.cvg-thumb:active { transform: scale(.985); }
.cvg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--cvg-card);
}
.cvg-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cvg-muted);
	font-size: calc(var(--cvg-u) * .8);
	background: repeating-linear-gradient(135deg, #f1f3f6 0 12px, #e9ecf0 12px 24px);
}

.cvg-title {
	margin: 0;
	font: 700 calc(var(--cvg-u) * .86) / 1.3 var(--cvg-font);
	color: var(--cvg-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.cvg-author {
	margin: 0;
	font-size: calc(var(--cvg-u) * .8);
	line-height: 1.35;
	color: var(--cvg-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Pie: empuja la categoría (y en el futuro el botón Votar) al fondo de la tarjeta,
   así en cada fila los pósters quedan arriba y las categorías abajo, alineados
   aunque falte el autor o la categoría. */
.cvg-foot {
	margin-top: auto;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: calc(var(--cvg-u) * .5);
}
.cvg-card .cvg-chip {
	align-self: center;
	min-width: 0;
	flex: 0 1 auto;
	max-width: 100%;
	height: auto;
	min-height: 44px;
	padding: calc(var(--cvg-u) * .35) calc(var(--cvg-u) * .8);
	margin-top: 0;
	background: color-mix(in srgb, var(--cvg-primary) 9%, #fff);
	border-color: color-mix(in srgb, var(--cvg-primary) 35%, #fff);
	color: var(--cvg-primary);
	font-size: calc(var(--cvg-u) * .72);
	line-height: 1.25;
	white-space: normal;
	text-align: left;
}

.cvg-empty,
.cvg-error {
	margin: calc(var(--cvg-u) * 2) 0;
	text-align: center;
	color: var(--cvg-muted);
	font-size: calc(var(--cvg-u) * .95);
}
.cvg-retry {
	margin-left: .5em;
	min-height: 44px;
	padding: 0 1em;
	border: 2px solid var(--cvg-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--cvg-primary);
	font: 700 1em var(--cvg-font);
	cursor: pointer;
}
.cvg-sentinel { height: 1px; }
.cvg.is-loading .cvg-sentinel { height: calc(var(--cvg-u) * 4); background: radial-gradient(circle at 50% 50%, var(--cvg-line) 0 6px, transparent 7px) center / 28px 100% repeat-x; opacity: .8; }

/* Visor -------------------------------------------------------------------- */

html.cvg-lock,
html.cvg-lock body { overflow: hidden !important; }

.cvg-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: rgba(12, 15, 20, .92);
	color: #fff;
	opacity: 0;
	transition: opacity .2s;
	-webkit-user-select: none;
	user-select: none;
}
.cvg-viewer[hidden] { display: none; }
.cvg-viewer.is-open { opacity: 1; }

.cvg-v-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	padding: calc(var(--cvg-u) * 4) calc(var(--cvg-u) * 5.5) calc(var(--cvg-u) * 1);
}
.cvg-v-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	transform-origin: 50% 50%;
	will-change: transform;
	cursor: zoom-in;
	-webkit-user-drag: none;
}
.cvg-viewer.is-zoomed .cvg-v-img { cursor: grab; border-radius: 0; }
.cvg-v-img.is-animating { transition: transform .25s ease; }

.cvg-v-count {
	position: absolute;
	top: calc(var(--cvg-u) * 1.4);
	left: calc(var(--cvg-u) * 1.8);
	font-size: calc(var(--cvg-u) * .9);
	font-weight: 700;
	color: rgba(255, 255, 255, .8);
	z-index: 2;
}

.cvg-v-btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--cvg-u) * 3.4);
	height: calc(var(--cvg-u) * 3.4);
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s;
}
.cvg-v-btn:hover { background: rgba(255, 255, 255, .28); }
.cvg-v-btn svg { width: 46%; height: 46%; }
.cvg-v-close { top: calc(var(--cvg-u) * .9); right: calc(var(--cvg-u) * 1.4); }
.cvg-v-prev,
.cvg-v-next { top: 50%; transform: translateY(-50%); }
.cvg-v-prev { left: calc(var(--cvg-u) * 1); }
.cvg-v-next { right: calc(var(--cvg-u) * 1); }
.cvg-viewer.is-zoomed .cvg-v-prev,
.cvg-viewer.is-zoomed .cvg-v-next { opacity: 0; pointer-events: none; }

.cvg-v-caption {
	flex-shrink: 0;
	width: min(100%, 60em);
	margin: 0 auto;
	padding: calc(var(--cvg-u) * .6) calc(var(--cvg-u) * 2) calc(var(--cvg-u) * 1.4);
	text-align: center;
	transition: opacity .2s;
}
.cvg-viewer.is-zoomed .cvg-v-caption { opacity: 0; pointer-events: none; }
.cvg-v-title {
	margin: 0 0 .3em;
	font: 800 calc(var(--cvg-u) * 1.25) / 1.25 var(--cvg-font);
	color: #fff;
}
.cvg-v-meta {
	margin: 0 0 .7em;
	font-size: calc(var(--cvg-u) * .9);
	color: rgba(255, 255, 255, .78);
}
.cvg-v-hint {
	margin: 0;
	font-size: calc(var(--cvg-u) * .72);
	color: rgba(255, 255, 255, .6);
}

/* Votaciones ---------------------------------------------------------------- */

.cvg-screenbadge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	padding: .35em .9em;
	border-radius: 999px;
	background: #f1f3f6;
	color: var(--cvg-muted);
	font-size: calc(var(--cvg-u) * .62);
	font-weight: 700;
}
.cvg-screenbadge::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #9aa1ab; }
.cvg-screenbadge.is-open::before { background: #16a34a; }

/* Sin conexión: aviso discreto y «Votar» desactivado */
.cvg-offline {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	padding: .35em .9em;
	border-radius: 999px;
	background: #fff4d6;
	color: #7a5300;
	font-size: calc(var(--cvg-u) * .62);
	font-weight: 700;
}
.cvg-offline[hidden] { display: none; }
.cvg-offline::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #e0a100; }
.cvg-vote.is-offline,
.cvg-vote.is-offline:active {
	border-color: #c9ced6;
	background: #f1f3f6;
	color: #8a919c;
	transform: none;
	cursor: not-allowed;
}
.cvg-vote--big.is-offline,
.cvg-vote--big.is-offline:active { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .75); box-shadow: none; }

.cvg-votewrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}
.cvg-foot .cvg-votewrap { margin-left: auto; }

.cvg-vote {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	min-height: 48px;
	height: calc(var(--cvg-u) * 2.1);
	padding: 0 calc(var(--cvg-u) * .9);
	border: 2px solid var(--cvg-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--cvg-primary);
	font: 800 calc(var(--cvg-u) * .78) / 1 var(--cvg-font);
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .25s, color .25s, transform .12s;
}
.cvg-vote:active { transform: scale(.94); }
.cvg-vote:focus-visible { outline: 3px solid var(--cvg-secondary); outline-offset: 2px; }
.cvg-vote__ic {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.cvg-vote__txt { position: relative; }
.cvg-vote.is-on { background: var(--cvg-primary); color: #fff; }
.cvg-vote.is-on .cvg-vote__ic { fill: currentColor; animation: cvg-pop .5s cubic-bezier(.3, 1.7, .5, 1); }
.cvg-vote.is-on .cvg-vote__txt { animation: cvg-rise .3s ease-out; }
.cvg-vote__cd {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, .6);
	transform-origin: left center;
	animation: cvg-drain linear forwards;
}

.cvg-vote__fx {
	position: absolute;
	left: 50%;
	bottom: 100%;
	z-index: 3;
	font: 800 calc(var(--cvg-u) * 1.3) / 1 var(--cvg-font);
	color: var(--cvg-primary);
	pointer-events: none;
	animation: cvg-plus 1s ease-out forwards;
}
.cvg-vote__fx.is-minus { color: var(--cvg-muted); animation-name: cvg-minus; }
.cvg-vote__burst {
	position: absolute;
	left: calc(var(--cvg-u) * 1.5);
	top: 50%;
	width: 0;
	height: 0;
	z-index: 3;
	pointer-events: none;
}
.cvg-vote__burst i {
	position: absolute;
	left: -5px;
	top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cvg-secondary);
	animation: cvg-burst .7s ease-out forwards;
}
.cvg-vote__burst i:nth-child(even) { background: var(--cvg-primary); width: 8px; height: 8px; }
.cvg-vote__burst i:nth-child(1) { --a: 0deg; }
.cvg-vote__burst i:nth-child(2) { --a: 45deg; }
.cvg-vote__burst i:nth-child(3) { --a: 90deg; }
.cvg-vote__burst i:nth-child(4) { --a: 135deg; }
.cvg-vote__burst i:nth-child(5) { --a: 180deg; }
.cvg-vote__burst i:nth-child(6) { --a: 225deg; }
.cvg-vote__burst i:nth-child(7) { --a: 270deg; }
.cvg-vote__burst i:nth-child(8) { --a: 315deg; }

/* En el visor: botón grande */
.cvg-v-vote {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--cvg-u) * .5);
	margin: calc(var(--cvg-u) * .2) 0 calc(var(--cvg-u) * .8);
}
.cvg-vote--big {
	height: calc(var(--cvg-u) * 3.2);
	padding: 0 calc(var(--cvg-u) * 1.6);
	border-color: #fff;
	font-size: calc(var(--cvg-u) * 1.05);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.cvg-vote--big.is-on { border-color: var(--cvg-primary); }
.cvg-vote--big .cvg-vote__cd { height: 5px; }
.cvg-votewrap--big .cvg-vote__fx {
	font-size: calc(var(--cvg-u) * 2.4);
	color: var(--cvg-secondary);
	text-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.cvg-votewrap--big .cvg-vote__fx.is-minus { color: rgba(255, 255, 255, .75); }
.cvg-votewrap--big .cvg-vote__burst { left: 50%; }
.cvg-votewrap--big .cvg-vote__burst i { left: -7px; top: -7px; width: 14px; height: 14px; animation-name: cvg-burst-big; animation-duration: .8s; }
.cvg-votewrap--big .cvg-vote__burst i:nth-child(even) { background: #fff; width: 10px; height: 10px; left: -5px; top: -5px; }
.cvg-v-thanks {
	margin: 0;
	font-size: calc(var(--cvg-u) * .95);
	font-weight: 700;
	color: #fff;
}
.cvg-v-thanks.is-on { animation: cvg-rise .3s ease-out; }
.cvg-v-undo {
	margin: 0;
	font-size: calc(var(--cvg-u) * .72);
	color: rgba(255, 255, 255, .65);
}

.cvg-toast {
	position: fixed;
	left: 50%;
	bottom: 12vh;
	z-index: 100002;
	max-width: min(90vw, 32em);
	padding: .8em 1.2em;
	border-radius: 14px;
	background: #161a20;
	color: #fff;
	font: 600 clamp(15px, 2.1vmin, 26px) / 1.3 var(--cv-font, system-ui, sans-serif);
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	opacity: 0;
	transform: translate(-50%, 20px);
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.cvg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Pantalla de reposo -------------------------------------------------------- */

.cvg-rest {
	position: fixed;
	inset: 0;
	z-index: 100003;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cvg-u) * 1.5);
	padding: calc(var(--cvg-u) * 3.5) calc(var(--cvg-u) * 2) calc(var(--cvg-u) * 2.5);
	color: #fff;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	transition: opacity .45s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}
.cvg-rest[hidden] { display: none; }
.cvg-rest.is-on { opacity: 1; }
.cvg-rest:focus-visible { outline: 4px solid #fff; outline-offset: -8px; }
.cvg-rest > * { position: relative; }

.cvg-rest__bg,
.cvg-rest__slides,
.cvg-rest__shade { position: absolute !important; inset: 0; }
.cvg-rest__bg {
	inset: -20%;
	/* Predomina el color principal: el secundario suele ser claro (amarillo, verde…) y el texto es blanco. */
	background: linear-gradient(135deg, var(--cvg-primary) 0%, var(--cvg-primary) 35%, color-mix(in srgb, var(--cvg-secondary) 55%, var(--cvg-primary)) 70%, var(--cvg-primary) 100%);
	background-size: 180% 180%;
	animation: cvg-drift 18s ease-in-out infinite alternate;
}
.cvg-rest--imagen .cvg-rest__bg {
	inset: 0;
	background: #0d1220 center / cover no-repeat;
	animation: cvg-kb 20s ease-in-out infinite alternate;
}
.cvg-rest--carrusel .cvg-rest__bg { background: #0d1220; animation: none; inset: 0; }
.cvg-rest__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.cvg-rest__slide.is-on { opacity: 1; }
.cvg-rest__slide img {
	max-width: 80%;
	max-height: 80%;
	border-radius: 8px;
	opacity: .38;
	filter: blur(1.5px);
	animation: cvg-kb 12s ease-in-out infinite alternate;
}
.cvg-rest__shade { background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .5) 100%); }
.cvg-rest--imagen .cvg-rest__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .6) 100%); }

.cvg-rest__top { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cvg-u) * .8); }
.cvg-rest__logo {
	max-width: min(70vw, calc(var(--cvg-u) * 20));
	padding: calc(var(--cvg-u) * 1) calc(var(--cvg-u) * 1.4);
	border-radius: calc(var(--cvg-u) * .9);
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.cvg-rest__logo img { display: block; max-width: 100%; max-height: calc(var(--cvg-u) * 7); margin: 0 auto; }
.cvg-rest__site { font: 800 calc(var(--cvg-u) * 1.6) / 1.2 var(--cvg-font); }
.cvg-rest__label {
	font: 800 calc(var(--cvg-u) * 2.6) / 1.1 var(--cvg-font);
	letter-spacing: -.01em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}
.cvg-rest__sub { font-size: calc(var(--cvg-u) * 1.05); font-weight: 600; opacity: .92; }

.cvg-rest__mid { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cvg-u) * .8); }
.cvg-rest__hand {
	width: calc(var(--cvg-u) * 3.4);
	height: calc(var(--cvg-u) * 3.4);
	fill: none;
	stroke: #fff;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	animation: cvg-tap 2.2s ease-in-out infinite;
}
.cvg-rest__cta {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--cvg-u) * 3.6);
	padding: calc(var(--cvg-u) * .6) calc(var(--cvg-u) * 2);
	border-radius: 999px;
	background: #fff;
	color: var(--cvg-primary);
	font: 800 calc(var(--cvg-u) * 1.2) / 1.2 var(--cvg-font);
	animation: cvg-pulse 2.2s ease-in-out infinite;
}
.cvg-rest__alt { font-size: calc(var(--cvg-u) * .8); opacity: .85; }

.cvg-rest__votes {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .7em 1.2em;
	border-radius: calc(var(--cvg-u) * .8);
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .35);
	font: 700 calc(var(--cvg-u) * .95) / 1.3 var(--cvg-font);
}
.cvg-rest__votes svg { width: 1.4em; height: 1.4em; flex-shrink: 0; fill: #fff; }
.cvg-rest__count { font-size: calc(var(--cvg-u) * .85); opacity: .8; }

/* QR para votar desde el móvil (lateral del reposo) */
.cvg-rest__qr {
	position: absolute !important;
	right: calc(var(--cvg-u) * 2);
	bottom: calc(var(--cvg-u) * 8.4);
	width: calc(var(--cvg-u) * 14.5);
	box-sizing: border-box;
	padding: calc(var(--cvg-u) * 1.15) calc(var(--cvg-u) * 1.15) calc(var(--cvg-u) * 1.05);
	border-radius: calc(var(--cvg-u) * 1.25);
	background: #fff;
	color: #1f2328;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--cvg-u) * .6);
	text-align: center;
}
.cvg-rest__qr[hidden] { display: none; }
@media (orientation: landscape) {
	.cvg-rest__qr { bottom: auto; top: 50%; transform: translateY(-50%); right: calc(var(--cvg-u) * 2.8); }
}
.cvg-rest__qrhead { display: flex; align-items: center; gap: calc(var(--cvg-u) * .45); }
.cvg-rest__qrphone {
	width: calc(var(--cvg-u) * 1.3);
	height: calc(var(--cvg-u) * 1.3);
	flex-shrink: 0;
	fill: none;
	stroke: var(--cvg-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cvg-rest__qrtitle {
	font: 800 calc(var(--cvg-u) * 1.1) / 1.15 var(--cvg-font);
	text-align: left;
	white-space: pre-line;
}
.cvg-rest__qrcode { width: calc(var(--cvg-u) * 11); height: calc(var(--cvg-u) * 11); }
.cvg-rest__qrcode svg { display: block; width: 100%; height: 100%; }
.cvg-rest__qrscan { font: 700 calc(var(--cvg-u) * .88) / 1.3 var(--cvg-font); }
.cvg-rest__qralt { font-size: calc(var(--cvg-u) * .7); line-height: 1.35; color: #4b5260; white-space: pre-line; }

/* Aviso en el móvil tras abrir el QR */
.cvg-mnote {
	margin: 0 0 calc(var(--cvg-u) * .9);
	padding: .8em 1em;
	border-radius: 12px;
	font-size: .95rem;
	line-height: 1.45;
	font-weight: 600;
}
.cvg-mnote--ok { background: #e7f5ec; border: 1px solid #9ed3b0; color: #145a32; }
.cvg-mnote--warn { background: #fff4e5; border: 1px solid #f3c27a; color: #7a4100; }

@keyframes cvg-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes cvg-kb { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes cvg-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cvg-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
	50% { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.cvg-rest__bg, .cvg-rest__slide img, .cvg-rest__hand, .cvg-rest__cta { animation: none; }
}

@keyframes cvg-pop { from { transform: scale(.3); } to { transform: scale(1); } }
@keyframes cvg-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cvg-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes cvg-plus {
	0% { opacity: 0; transform: translate(-50%, 12px) scale(.5); }
	20% { opacity: 1; transform: translate(-50%, -6px) scale(1.2); }
	100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
@keyframes cvg-minus {
	0% { opacity: 0; transform: translate(-50%, -20px) scale(1.2); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, 30px) scale(.9); }
}
@keyframes cvg-burst {
	from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
	to { opacity: 0; transform: rotate(var(--a)) translateY(-58px) scale(.2); }
}
@keyframes cvg-burst-big {
	from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
	to { opacity: 0; transform: rotate(var(--a)) translateY(-130px) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
	.cvg-vote__fx, .cvg-vote__burst { display: none; }
	.cvg-vote.is-on .cvg-vote__ic, .cvg-vote.is-on .cvg-vote__txt, .cvg-v-thanks.is-on { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cvg-card { animation: none; }
	.cvg-viewer, .cvg-v-img.is-animating { transition: none; }
}