/* CiviRed ePosters – formulario de envío y ranking. Usa las variables del tema. */

.cvf,
.cvr {
	--cvf-primary: var(--cv-primary, #0B6E99);
	--cvf-ink: var(--cv-ink, #161A20);
	--cvf-muted: var(--cv-muted, #5B6270);
	--cvf-line: var(--cv-line, #DDE1E7);
	--cvf-u: clamp(15px, 1.9vmin, 26px);
	font-family: var(--cv-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--cvf-ink);
}

.cvf { max-width: 52em; }
.cvf-form { display: flex; flex-direction: column; gap: calc(var(--cvf-u) * 1.1); }
.cvf-field { display: flex; flex-direction: column; gap: .4em; }
.cvf-field label { font-weight: 700; font-size: var(--cvf-u); }
.cvf-help { margin: 0; font-size: calc(var(--cvf-u) * .8); color: var(--cvf-muted); }

.cvf input[type="text"],
.cvf input[type="email"],
.cvf select,
.cvf textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: .7em .9em;
	border: 2px solid var(--cvf-line);
	border-radius: 12px;
	background: #fff;
	color: var(--cvf-ink);
	font: 500 var(--cvf-u) / 1.4 var(--cv-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.cvf input[type="file"] { font-size: calc(var(--cvf-u) * .9); }
.cvf input:focus,
.cvf select:focus,
.cvf textarea:focus {
	outline: none;
	border-color: var(--cvf-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cvf-primary) 18%, transparent);
}

.cvf-submit {
	align-self: flex-start;
	min-height: 52px;
	padding: 0 2em;
	border: 0;
	border-radius: 999px;
	background: var(--cvf-primary);
	color: #fff;
	font: 800 var(--cvf-u) / 1 var(--cv-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	cursor: pointer;
}
.cvf-submit:disabled { opacity: .6; cursor: wait; }

.cvf-msg { padding: 1em 1.2em; border-radius: 12px; font-weight: 600; }
.cvf-msg--ok { background: #E6F4EA; color: #1E6B34; }
.cvf-msg--error { background: #FDECEC; color: #A0262B; }

.cvf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ranking */
.cvr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--cvf-u) * .8); }
.cvr-item {
	display: grid;
	grid-template-columns: auto calc(var(--cvf-u) * 4) minmax(0, 1fr) auto;
	align-items: center;
	gap: calc(var(--cvf-u) * .9);
	padding: calc(var(--cvf-u) * .6);
	border: 1px solid var(--cvf-line);
	border-radius: 14px;
	background: #fff;
}
.cvr-pos { min-width: 2em; text-align: center; font-weight: 800; font-size: calc(var(--cvf-u) * 1.2); color: var(--cvf-primary); }
.cvr-img img { display: block; width: 100%; height: auto; border-radius: 6px; }
.cvr-text { display: flex; flex-direction: column; gap: .2em; color: var(--cvf-ink); text-decoration: none; }
.cvr-text strong { font-size: var(--cvf-u); line-height: 1.3; }
.cvr-text span { font-size: calc(var(--cvf-u) * .8); color: var(--cvf-muted); }
.cvr-votes { font-weight: 800; font-size: calc(var(--cvf-u) * 1.1); white-space: nowrap; }
.cvr-votes small { font-weight: 500; color: var(--cvf-muted); }

/* Código de acceso y plazo */
.cvf-code-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cvf-field--code input { flex: 1 1 12em; max-width: 20em; letter-spacing: .08em; text-transform: uppercase; }
.cvf-field--code input[readonly] { background: #F2FAF4; border-color: #7BC492; color: #1E6B34; }
.cvf-code-btn {
	min-height: 48px;
	padding: 0 1.4em;
	border: 0;
	border-radius: 999px;
	background: var(--cvf-primary);
	color: #fff;
	font: 800 var(--cvf-u) / 1 var(--cv-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	cursor: pointer;
}
.cvf-code-btn:disabled { opacity: .6; cursor: wait; }
.cvf-code-status { margin: 0; min-height: 1.4em; font-weight: 700; font-size: calc(var(--cvf-u) * .85); }
.cvf-code-status.is-ok { color: #1E6B34; }
.cvf-code-status.is-bad { color: #A0262B; }
.cvf-form.is-gated .cvf-rest { display: none; }
.cvf-rest { display: flex; flex-direction: column; gap: calc(var(--cvf-u) * 1.1); }
.cvf-form.is-unlocked .cvf-rest { animation: cvf-in .3s ease both; }
@keyframes cvf-in { from { opacity: 0; transform: translateY(6px); } }
.cvf-msg--closed { background: #F1F3F6; color: var(--cvf-ink); }

/* Formulario v2: vista previa, casilla de privacidad y barra de progreso */
/* Lo oculto con el atributo hidden debe quedar oculto aunque tenga display: flex. */
.cvf [hidden] { display: none !important; }
.cvf-preview {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: .4em;
	padding: .7em;
	border: 1px solid var(--cvf-line);
	border-radius: 12px;
	background: #F7F9FB;
}
.cvf-preview > .cvf-spin { display: none; }
.cvf-preview.is-busy > .cvf-spin { display: inline-block; width: 1.6em; height: 1.6em; }
.cvf-preview.is-busy img { display: none; }
.cvf-preview.is-busy .cvf-preview__txt { color: var(--cvf-muted); }
.cvf-preview img { width: calc(var(--cvf-u) * 4.5); height: auto; max-height: calc(var(--cvf-u) * 6.5); object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.cvf-preview__txt { margin: 0; font-size: calc(var(--cvf-u) * .85); font-weight: 600; color: #1E6B34; }
.cvf-preview.is-bad { background: #FDECEC; border-color: #F3B8BA; }
.cvf-preview.is-bad .cvf-preview__txt { color: #A0262B; }

.cvf-check { display: flex; gap: .7em; align-items: flex-start; font-weight: 500 !important; font-size: calc(var(--cvf-u) * .85) !important; line-height: 1.45; cursor: pointer; }
.cvf-check input { flex-shrink: 0; width: 22px; height: 22px; margin: .1em 0 0; accent-color: var(--cvf-primary); }
.cvf-check a { color: var(--cvf-primary); font-weight: 700; }

.cvf-progress { display: flex; flex-direction: column; gap: .4em; }
.cvf-progress__track { height: 12px; border-radius: 999px; background: #E9EDF2; overflow: hidden; }
.cvf-progress__bar { width: 0; height: 100%; border-radius: 999px; background: var(--cvf-primary); transition: width .2s ease; }
.cvf-progress__txt { display: flex; align-items: center; gap: .6em; margin: 0; font-size: calc(var(--cvf-u) * .85); font-weight: 700; color: var(--cvf-muted); }

/* Indicador de carga: anillo fino que gira, en el color del evento (CSS puro). */
.cvf-spin {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	border: 2.5px solid color-mix(in srgb, var(--cvf-primary) 22%, transparent);
	border-top-color: var(--cvf-primary);
	border-radius: 50%;
	animation: cvf-spin .8s linear infinite;
}
@keyframes cvf-spin { to { transform: rotate(360deg); } }
.cvf-done-ic { display: none; width: 1.35em; height: 1.35em; flex-shrink: 0; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; padding: .15em; border-radius: 50%; background: #1E8E3E; box-sizing: border-box; }

/* Procesando: la barra llena «respira» con franjas en movimiento para que se vea que sigue trabajando. */
.cvf-progress.is-processing .cvf-progress__bar {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%);
	background-size: 24px 24px;
	animation: cvf-stripes .7s linear infinite;
}
@keyframes cvf-stripes { to { background-position: 24px 0; } }

/* Completado: verde con marca de verificación. */
.cvf-progress.is-done .cvf-progress__bar { background: #1E8E3E; }
.cvf-progress.is-done .cvf-progress__txt { color: #1E6B34; }
.cvf-progress.is-done .cvf-spin { display: none; }
.cvf-progress.is-done .cvf-done-ic { display: inline-block; animation: cvf-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cvf-pop { from { transform: scale(.3); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.cvf-spin { animation-duration: 2.4s; }
	.cvf-progress.is-processing .cvf-progress__bar, .cvf-progress.is-done .cvf-done-ic { animation: none; }
}