/* Página · Verificar certificado · full-width, sin sidebar, título centrado.
   El .wrap (1280px) viene de uxdivi-core.css (slug en SLUGS_USING_CORE). */

.ux-verify { padding: 56px 0 80px; }
.ux-verify__title {
  text-align: center;
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink, #F5F8FF);
  margin: 0 0 36px;
}
.ux-verify__empty { text-align: center; color: #8694B3; }
.ux-verify__empty code { color: #62E5FF; }

/* Wrapper del resultado · SIN caja, centrado, ancho cómodo. */
.ux-cert-verify { max-width: 820px; margin: 0 auto; text-align: center; color: #C9D4EE; font-family: system-ui, sans-serif; }
.ux-cert-verify__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(34, 211, 154, 0.12); color: #22D39A;
  font-size: 14px; font-weight: 600; margin-bottom: 22px;
}

/* El certificado real (JPG de fondo + datos superpuestos). */
.ux-cert-doc {
  position: relative; width: 100%; max-width: 820px; margin: 0 auto;
  aspect-ratio: 1.414 / 1;
  background-size: cover; background-position: center;
  border: 1px solid rgba(98, 229, 255, 0.18); border-radius: 14px;
  container-type: inline-size; overflow: hidden;
}
.ux-cert-doc span { position: absolute; left: 0; width: 100%; text-align: center; line-height: 1.15; }
/* Posiciones calibradas para el diseño v3 (formato-certificado-uxdivi-2026-v3): "OTORGADO A" → nombre, curso, fecha; código abajo-izquierda. */
.ux-cert-doc__nombre { top: 49.5%; color: #F5F8FF; font-weight: 700; font-size: 4.4cqw; letter-spacing: -0.02em; white-space: nowrap; }
.ux-cert-doc__curso { top: 64.5%; color: #EAF0FF; font-weight: 600; font-size: 2.1cqw; padding: 0 14%; box-sizing: border-box; }
.ux-cert-doc__fecha { top: 71%; color: #8694B3; font-size: 1.45cqw; }
.ux-cert-doc span.ux-cert-doc__code { top: auto; bottom: 5.5%; left: 6%; right: auto; width: auto; text-align: left; color: #9FB0D4; font-size: 1.3cqw; letter-spacing: 0.02em; }

/* Tarjeta de datos verificados. */
.ux-cert-verify__data { width: 100%; max-width: 620px; margin: 22px auto 0; border-collapse: collapse; font-size: 14px; text-align: left; }
.ux-cert-verify__data td { padding: 9px 2px; border-bottom: 1px solid rgba(148, 163, 198, 0.10); }
.ux-cert-verify__data td:first-child { color: #7E8AA8; }
.ux-cert-verify__data td:last-child { text-align: right; color: #EAF0FF; }
.ux-cert-verify__id { font-family: monospace; font-size: 13px; color: #9FB0D4; }
.ux-cert-verify__data a { color: #62E5FF; text-decoration: none; }

/* Estado inválido. */
.ux-cert-verify--invalid { padding: 32px 0; }
.ux-cert-verify--invalid h2 { color: #fff; margin: 0 0 8px; }

@media (max-width: 700px) {
  .ux-verify { padding: 36px 0 56px; }
  .ux-verify__title { font-size: 27px; margin-bottom: 24px; }
  .ux-cert-doc__nombre { font-size: 5cqw; }
}