/*
 * Complementos ao CSS do LMS (assets/lms/lms.css). Só o que o build do LMS não tem:
 * alguns utilitários Tailwind, o badge de status e o desenho do certificado.
 */

/* ---- Utilitários Tailwind ausentes no build do LMS ---- */
.pb-24 { padding-bottom: 6rem; }
@media (min-width: 768px) {
    .md\:pb-5 { padding-bottom: 1.25rem; }
    .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.25rem; }
}

/* ---- Badge (frappe-ui Badge, size md, variant subtle) ---- */
.selo { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 9999px; font-size: 13px; font-weight: 500; white-space: nowrap; user-select: none; }
.selo-ok { background: var(--surface-green-2, #E4FAEB); color: var(--ink-green-3, #278F5E); }
.selo-erro { background: var(--surface-red-2, #FFE7E7); color: var(--ink-red-4, #CC2929); }

/* ---- Certificado (versão web) ----
 * Mesma geometria de src/Arte.php (mm sobre 297 × 210). Posições em % da arte; tamanhos em cqw
 * (1cqw = 1% da largura = 2,97 mm no PDF), então tudo escala junto com a imagem. */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype'); }

.cert { position: relative; container-type: inline-size; aspect-ratio: 4000 / 2828; margin: 0; overflow: hidden; border-radius: 0.375rem; font-family: 'Montserrat', sans-serif; background: #001150; }
.cert-fundo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.cert-pilula { position: absolute; left: 22.825%; top: 25.495%; width: 52.975%; height: 9.194%; padding: 0 2.694cqw; box-sizing: border-box;
               display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cert-nome { font-weight: 700; color: #001150; line-height: 1; white-space: nowrap; }
.cert-cpf { font-weight: 600; font-size: 1.188cqw; line-height: 1; color: #0d2170; margin-top: 0.606cqw; letter-spacing: 0.036cqw; }

.cert-data { position: absolute; left: 0; width: 100%; top: 69.48%; text-align: center; color: #fff; font-size: 1.485cqw; line-height: 1.2; }

.cert-verif { position: absolute; left: 69.024%; top: 83.333%; width: 26.936%; display: flex; align-items: flex-end; justify-content: flex-end; }
.cert-verif-texto { text-align: right; color: #fff; font-size: 0.772cqw; line-height: 1.45; padding-right: 0.842cqw; }
.cert-verif-texto strong { font-weight: 700; font-size: 0.891cqw; letter-spacing: 0.048cqw; }
.cert-qr { width: 7.205cqw; height: 7.205cqw; padding: 0.404cqw; /* 19 mm + 1,2 mm de respiro de cada lado (border-box) */ background: #fff; border-radius: 0.505cqw; display: block; }

.cert-revogado .cert-fundo, .cert-revogado .cert-qr { filter: grayscale(1) brightness(0.8); }
.cert-carimbo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 0.6cqw 2.4cqw;
                border: 0.5cqw solid #E03636; border-radius: 1cqw; color: #E03636; background: rgba(255, 255, 255, 0.85);
                font-weight: 700; font-size: 6cqw; letter-spacing: 0.4cqw; }