/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 29 2026 | 17:20:24 */
/**
 * educa-certificados.css
 *
 * Estilos de la página pública de verificación de certificados.
 *
 * Se carga mediante Simple Custom CSS and JS.
 *
 * Nomenclatura BEM con prefijo educa-. No se usa !important: si algo no
 * se aplica, será por competir con estilos en línea de Astra y conviene
 * resolverlo por especificidad, no por fuerza bruta.
 *
 * Nota: esta hoja NO llega al PDF del certificado. mPDF genera el documento
 * sin cargar los estilos del sitio, así que el aspecto del código impreso
 * se define en el bloque contenedor dentro del Certificate Builder.
 *
 * Changelog:
 *   1.1.0 - Sustituido el borde izquierdo destacado por un borde completo
 *           de 2 px en las tres variantes de resultado.
 *   1.0.0 - Versión inicial.
 */

/* -------------------------------------------------------------------------
 * Contenedor
 * ---------------------------------------------------------------------- */

.educa-verificacion {
	max-width: 46rem;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Formulario
 * ---------------------------------------------------------------------- */

.educa-verificacion__formulario {
	margin-bottom: 2rem;
}

.educa-verificacion__etiqueta {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.educa-verificacion__grupo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.educa-verificacion__campo {
	flex: 1 1 18rem;
	padding: 0.75rem 1rem;
	border: 1px solid #c7ccd6;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.educa-verificacion__campo:focus {
	outline: 2px solid #3858d6;
	outline-offset: 1px;
	border-color: #3858d6;
}

.educa-verificacion__boton {
	flex: 0 0 auto;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 4px;
	background-color: #3858d6;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.educa-verificacion__boton:hover,
.educa-verificacion__boton:focus {
	background-color: #2b45a8;
}

.educa-verificacion__ayuda {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: #5b6472;
}

/* -------------------------------------------------------------------------
 * Resultado
 *
 * Borde completo de 2 px. El color del borde diferencia el veredicto sin
 * depender sólo del fondo, que en pantallas con poco contraste se pierde.
 * ---------------------------------------------------------------------- */

.educa-verificacion__resultado {
	padding: 1.5rem;
	border: 2px solid #c7ccd6;
	border-radius: 6px;
	background-color: #f4f6fb;
}

.educa-verificacion__resultado--valido {
	border-color: #2f8a4c;
	background-color: #eef7f1;
}

.educa-verificacion__resultado--invalido {
	border-color: #b3282d;
	background-color: #fbeeee;
}

.educa-verificacion__resultado--espera {
	border-color: #b07d1a;
	background-color: #fcf6e8;
}

.educa-verificacion__veredicto {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.educa-verificacion__resultado--valido .educa-verificacion__veredicto {
	color: #226637;
}

.educa-verificacion__resultado--invalido .educa-verificacion__veredicto {
	color: #8c2024;
}

.educa-verificacion__mensaje {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Lista de datos
 * ---------------------------------------------------------------------- */

.educa-verificacion__datos {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.educa-verificacion__termino {
	margin: 0;
	font-weight: 700;
	color: #5b6472;
}

.educa-verificacion__valor {
	margin: 0;
}

.educa-verificacion__valor--codigo {
	font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
	letter-spacing: 0.05em;
}

.educa-verificacion__legal {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #d5dce6;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #5b6472;
}

/* -------------------------------------------------------------------------
 * Adaptación a pantallas estrechas
 * ---------------------------------------------------------------------- */

@media (max-width: 40rem) {

	.educa-verificacion__datos {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.educa-verificacion__valor {
		margin-bottom: 0.75rem;
	}

	.educa-verificacion__boton {
		flex: 1 1 100%;
	}
}