/* =========================================================
   VALIDAR CERTIFICADO — estilos
   - Tarjeta blanca para el formulario (.validador-container).
   - Pantalla de resultado: portada 1:1 desde certificado-avanxa_1.html.
     Los resets de body/* del archivo de diseño NO se incluyen; todo el
     resultado va scopeado bajo .content_validar (y con !important) para no
     chocar con el tema / Elementor.
   ========================================================= */

/* ---------- Formulario como tarjeta blanca centrada ----------
   La tarjeta va en la clase ÚNICA .avxc-form-card (solo el div del formulario).
   NO se usa .validador-container para esto: esa clase puede existir también como
   wrapper de Elementor que envuelve a form + resultado, y pintaría la cajita blanca
   alrededor del certificado validado. */
.avxc-form-card {
	background-color: #FFFFFFE6 !important;
	padding: 40px !important;
	border: 1px solid #DFDFDF !important;
	border-radius: 16px !important;
	box-shadow: 0px 4px 12px 0px rgba(144, 46, 157, 0.149) !important;
}

/* ---------- Loader (GIF) ----------
   Al pulsar Validar, el botón se oculta y aparece este GIF centrado en su lugar.
   El plugin controla su estilo por completo (el tema no conoce esta clase).

   OJO: la visibilidad la maneja SOLO el JS por estilo inline (display:none inicial ->
   display:flex al validar). NO declarar 'display' aquí: un 'display !important' en la
   hoja ganaría al 'style="display:none"' inline del markup y el GIF se vería SIEMPRE.
   El centrado (justify/align) solo surte efecto cuando el JS pone display:flex. */
.avxc-gif-loader {
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}
.avxc-gif-loader img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 320px !important;
	max-height: 100% !important;
}

/* ---------- Resultado ----------
   Defensivo: el contenedor del resultado NUNCA debe verse como la tarjeta blanca del
   formulario. Anula cualquier fondo/borde/sombra/padding heredado o de otra regla; el
   diseño del certificado vive en .content_validar .card (su propia tarjeta). */
.content_validar {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	color: #000 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.content_validar .verificacion {
	width: 100% !important;
	max-width: 560px !important;
	margin: 0 auto !important;
}

/* Tarjeta del certificado */
.content_validar .card {
	background: #fff !important;
	border: 1.5px solid #471C70 !important;
	border-radius: 20px !important;
	padding: 34px 36px !important;
	box-shadow: 0 6px 28px rgba(85, 29, 135, .06), 0 1px 3px rgba(0, 0, 0, .04) !important;
}
.content_validar .label {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #000 !important;
	margin-bottom: 10px !important;
}
.content_validar .campo {
	border: 1px solid #9558D8 !important;
	background: #faf6fd !important;
	border-radius: 8px !important;
	padding: 13px 16px !important;
	margin-bottom: 22px !important;
	color: #000 !important;
}
.content_validar .campo--nombre {
	font-weight: 600 !important;
	font-size: 18px !important;
}
.content_validar .campo--programa {
	font-weight: 400 !important;
	font-size: 16px !important;
}

/* Resultados académicos */
.content_validar .resultados-label { margin-bottom: 12px !important; }
.content_validar .resultados {
	display: flex !important;
	gap: 16px !important;
	margin-bottom: 26px !important;
	flex-wrap: wrap !important;
}
.content_validar .resultado {
	display: flex !important;
	flex-direction: column !important;
}
.content_validar .caja {
	font-family: 'Visby CF', 'Inter', system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	border-radius: 8px !important;
	padding: 12px 22px !important;
	text-align: center !important;
	min-width: 140px !important;
}
.content_validar .caja--logro {
	background: #9558D8 !important;
	color: #fff !important;
}
.content_validar .caja--nota {
	background: #fff !important;
	border: 1px solid #9558D8 !important;
	color: #000 !important;
}
.content_validar .caption {
	margin-top: 7px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #454545 !important;
	padding-left: 2px !important;
}

/* Fechas */
.content_validar .fechas {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px 40px !important;
	font-size: 16px !important;
}
.content_validar .fechas b { color: #000 !important; font-weight: 700 !important; }
.content_validar .fechas span { color: #000 !important; font-weight: 400 !important; }

/* Footer */
.content_validar .footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
	margin-top: 22px !important;
	padding: 0 6px !important;
}
.content_validar .verificado {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	max-width: 345px !important;
}
.content_validar .verificado svg {
	width: 26px !important;
	height: 26px !important;
	flex-shrink: 0 !important;
	color: #222 !important;
	margin-top: 1px !important;
}
.content_validar .verificado p {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: #454545 !important;
}
.content_validar .acciones {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 11px !important;
}
.content_validar .btn-cerrar {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #E3F853 !important;
	border: 1px solid #D1D1D1 !important;
	border-radius: 6px !important;
	padding: 12px 28px !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .4px !important;
	text-transform: uppercase !important;
	color: #222 !important;
	cursor: pointer !important;
	transition: background .15s ease !important;
}
.content_validar .btn-cerrar:hover { background: #d6eb3a !important; }
.content_validar .btn-cerrar svg { width: 18px !important; height: 18px !important; }
.content_validar .link-validar {
	background: none !important;
	border: none !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .4px !important;
	text-transform: uppercase !important;
	color: #9558D8 !important;
	cursor: pointer !important;
	text-decoration: none !important;
}
.content_validar .link-validar:hover { text-decoration: underline !important; }

/* Responsive */
@media (max-width: 520px) {
	.content_validar .card { padding: 26px 22px !important; }
	.content_validar .footer {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
	}
	.content_validar .acciones { align-items: flex-start !important; width: 100% !important; }
	.content_validar .btn-cerrar { width: 100% !important; justify-content: center !important; }
	.content_validar .resultado,
	.content_validar .caja { flex: 1 1 auto !important; }
}

/* =========================================================
   VISTA "CERTIFICADO VALIDADO"  (body.avxc-cert-shown)
   El JS añade esta clase al <body> SOLO cuando el certificado se está mostrando
   (showSuccess) y la quita al volver al formulario (resetToForm). Todo este CSS
   ya está acotado a /validar-certificado/ porque el stylesheet solo se encola donde
   está el shortcode [avxc_validar].
   ========================================================= */

/* --- Punto 1: ocultar los pasos "1" y "2" cuando el certificado está a la vista --- */
body.avxc-cert-shown .elementor-element-18c0c90 {
	display: none !important;
}

/* --- Punto 2: SOLO en la vista del certificado, ensanchar su contenedor a ~1100px ---
   El formulario se muestra SIN esta clase, así que conserva su ancho normal (~700px).
   Se ensancha el contenedor boxed de Elementor (via --content-width y el .e-con-inner)
   y se sube el tope de la tarjeta del certificado para que aproveche ese ancho. */
body.avxc-cert-shown .elementor-element-3fdddb2.e-con-boxed {
	--content-width: 1100px !important;
}
body.avxc-cert-shown .elementor-element-3fdddb2.e-con-boxed > .e-con-inner {
	max-width: 1100px !important;
}
body.avxc-cert-shown .content_validar .verificacion {
	max-width: 1100px !important;
}