/*
 * Área do aluno — certificados e cards de conquista (M4, Tarefa B; spec §15). Folha à parte (a aluno.css
 * passou de ~60 KB); usa os tokens --ta-* e as faixas [data-band] da aluno.css.
 *
 * Componentes
 *   Selo       .ta-cert-mark (o nível de referência grande, na cor da faixa: [data-band]; .is-intensivao =
 *              marinho) > .ta-cert-mark-code ("B1") + .ta-cert-mark-sub ("QECR")
 *   Lista      .ta-certs > .ta-cert (folha do certificado: .ta-cert-head com o selo + .ta-cert-main
 *              (.ta-cert-title, .ta-cert-detail, .ta-cert-date), .ta-cert-actions (botões), .ta-cert-public
 *              (verificação pública: .ta-switch da aluno.css + .ta-cert-link com o endereço))
 *   Marcos     .ta-cert-next (próximos marcos: .ta-cert-steps > li.is-done/.is-wait/.is-next/.is-later)
 *   Card       .ta-cshare (página de compartilhar: .ta-cshare-actions, .ta-cshare-options, .ta-cshare-note) ·
 *              .ta-ccard (o card em HTML, igual ao PNG, para captura de tela: .ta-ccard-ring, .ta-ccard-body,
 *              .ta-ccard-kicker, .ta-ccard-dot, .ta-ccard-head, .ta-ccard-sub, .ta-ccard-name, .ta-ccard-foot,
 *              .ta-ccard-link). Prefixos próprios: .ta-share-* é da indicação (aluno-vendas.css).
 *   Verificar  .ta-verify (página pública /certificado/{código}: .ta-verify-status, .ta-verify-name,
 *              .ta-verify-course, .ta-verify-detail, .ta-verify-lead, .ta-verify-text, .ta-verify-meta,
 *              .ta-verify-code, .ta-verify-note)
 *   Celebração .ta-cele-share ("Compartilhar esta conquista" na tela cheia da subida e das 12/26/52 semanas)
 */

/* ===== Selo do nível de referência ===== */
.ta-cert-mark {
    --ta-mark: var(--ta-band);
    display: grid; place-content: center; text-align: center; flex: none;
    width: 76px; height: 76px; border-radius: 18px;
    background: var(--ta-mark); color: #fff;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22);
}
.ta-cert-mark.is-intensivao { --ta-mark: var(--ta-navy); }
.ta-cert-mark-code {
    font-family: var(--ta-font-head); font-weight: 700; font-size: 1.95rem; line-height: 1; letter-spacing: -.02em;
}
.ta-cert-mark.is-intensivao .ta-cert-mark-code { font-size: 1.6rem; }
.ta-cert-mark-code .ta-icon { width: 30px; height: 30px; }
.ta-cert-mark-sub { font-size: .6875rem; font-weight: 600; margin-top: .3rem; opacity: .9; }
.ta-cert-mark.is-intensivao .ta-cert-mark-sub { font-size: .625rem; }

/* ===== Lista de certificados (Eu → Certificados) ===== */
.ta-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ta-cert {
    background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
    /* a faixa de cima na cor do nível: sombra por dentro (o raio recorta sem o canto torto da borda) */
    box-shadow: inset 0 5px 0 var(--ta-band), var(--ta-shadow); padding: 1.35rem 1.1rem 1rem; display: grid; gap: 1rem;
}
.ta-cert.is-intensivao { box-shadow: inset 0 5px 0 var(--ta-navy), var(--ta-shadow); }
.ta-cert-head { display: flex; gap: 1rem; align-items: center; }
.ta-cert-main { min-width: 0; }
.ta-cert-kicker { margin: 0; font-size: .8125rem; color: var(--ta-muted); }
.ta-cert-title {
    margin: .1rem 0 0; font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy);
    font-size: 1.25rem; line-height: 1.2;
}
.ta-cert-detail { margin: .2rem 0 0; font-size: .9375rem; color: var(--ta-ink); }
.ta-cert-date { margin: .2rem 0 0; font-size: .875rem; color: var(--ta-muted); }
.ta-cert-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ta-cert-actions .ta-btn { flex: 1 1 9rem; }
.ta-cert-public { border-top: 1px solid var(--ta-line); padding-top: .9rem; display: grid; gap: .6rem; }
.ta-cert-public .ta-switch { margin: 0; }
.ta-cert-link { margin: 0; font-size: .875rem; color: var(--ta-muted); overflow-wrap: anywhere; }
.ta-cert-code { font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 600; color: var(--ta-ink); }
.ta-cert-msg { margin: 0; font-size: .875rem; }

/* ===== Próximos marcos ===== */
.ta-cert-next { background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); padding: 1rem 1.1rem; }
.ta-cert-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.ta-cert-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; align-items: center; padding: .5rem 0; }
.ta-cert-steps li + li { border-top: 1px dashed var(--ta-line); }
.ta-cert-step-code {
    display: grid; place-items: center; height: 2.25rem; border-radius: 10px;
    font-family: var(--ta-font-head); font-weight: 700; font-size: 1rem;
    border: 2px solid var(--ta-band); color: var(--ta-band-ink); background: #fff;
}
.ta-cert-steps li.is-done .ta-cert-step-code { background: var(--ta-band); color: #fff; }
.ta-cert-steps li.is-later .ta-cert-step-code { border-color: var(--ta-line-strong); color: var(--ta-muted); }
.ta-cert-step-text { margin: 0; font-size: .9375rem; line-height: 1.35; }
.ta-cert-step-text strong { color: var(--ta-navy); }
.ta-cert-step-text span { display: block; font-size: .8125rem; color: var(--ta-muted); }

/* ===== Compartilhar uma conquista ===== */
.ta-cshare { display: grid; gap: 1rem; justify-items: center; }
.ta-cshare-actions { display: grid; gap: .6rem; width: min(100%, 360px); }
.ta-cshare-options { width: min(100%, 360px); }
.ta-cshare-note { margin: 0; font-size: .875rem; color: var(--ta-muted); width: min(100%, 360px); }

/* A versão HTML do card (captura de tela), com o mesmo desenho do PNG (ShareCardRenderer): fundo na cor da
   faixa (marinho sem faixa), anel claro saindo pelo canto, a conquista embaixo e a faixa branca da marca */
.ta-ccard {
    --ta-card-bg: var(--ta-navy);
    position: relative; width: min(100%, 360px); aspect-ratio: 1080 / 1350; border-radius: 16px; overflow: hidden;
    background: var(--ta-card-bg); color: #fff; display: flex; flex-direction: column; margin: 0;
    font-family: var(--ta-font-body); box-shadow: 0 18px 40px -18px rgba(18, 57, 95, .5);
}
.ta-ccard[data-band] { --ta-card-bg: var(--ta-band); }
.ta-ccard-ring {
    position: absolute; left: 67.6%; top: -11.9%; width: 64.8%; aspect-ratio: 1; border-radius: 50%;
    border: calc(360px * 76 / 1080) solid rgba(255, 255, 255, .25); box-sizing: border-box;
}
.ta-ccard-body {
    position: relative; flex: 1; padding: 0 8.9% 10%; display: flex; flex-direction: column; justify-content: flex-end;
}
.ta-ccard-kicker { margin: 0; font-weight: 600; font-size: .95rem; color: #e2eaf4; display: flex; align-items: center; gap: .45rem; }
.ta-ccard-dot { width: .5rem; height: .5rem; background: var(--ta-red); flex: none; }
.ta-ccard-head {
    margin: .45rem 0 0; font-family: var(--ta-font-head); font-weight: 700; line-height: .95; letter-spacing: -.03em;
    font-size: clamp(2.5rem, 16vw, 4.1rem); overflow-wrap: anywhere;
}
.ta-ccard-sub {
    margin: 1.1rem 0 0; padding: .3rem .8rem; border-radius: var(--ta-pill); align-self: flex-start;
    background: #fff; color: var(--ta-card-bg); font-weight: 600; font-size: .875rem;
}
.ta-ccard-name { margin: .9rem 0 0; font-family: var(--ta-font-head); font-weight: 600; font-size: 1.3rem; }
.ta-ccard-foot {
    position: relative; background: #fff; color: var(--ta-navy); padding: 0 8.9%; height: 17.8%;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.ta-ccard-foot img { height: 30px; width: auto; }
.ta-ccard-link { margin: 0; font-size: .6875rem; font-weight: 600; text-align: right; overflow-wrap: anywhere; line-height: 1.35; }
.ta-ccard-link span { display: block; font-weight: 400; color: var(--ta-muted); }
[x-cloak] { display: none !important; }

/* "Compartilhar esta conquista" na tela cheia da subida de nível e das 12/26/52 semanas (fundo marinho) */
.ta-cele-share {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem;
    color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.ta-cele-share:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; border-radius: 8px; }

/* ===== Verificação pública ===== */
.ta-verify {
    background: #fff; border: 1px solid var(--ta-line); border-radius: 18px;
    box-shadow: inset 0 6px 0 var(--ta-navy), var(--ta-shadow);
    padding: 1.9rem 1.5rem 1.5rem; max-width: 34rem; margin: 1rem auto 0;
}
.ta-verify-status {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1.25rem; padding: .35rem .85rem .35rem .6rem;
    border-radius: var(--ta-pill); background: var(--ta-ok-bg); color: var(--ta-ok); font-weight: 700; font-size: .9375rem;
}
.ta-verify-check { width: 20px; height: 20px; }
.ta-verify-name {
    margin: 0; font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy);
    font-size: 2rem; line-height: 1.1; letter-spacing: -.015em; overflow-wrap: anywhere;
}
.ta-verify-course { margin: .6rem 0 0; font-family: var(--ta-font-head); font-weight: 600; font-size: 1.25rem; color: var(--ta-ink); }
.ta-verify-detail { margin: .25rem 0 0; color: var(--ta-ink); }
.ta-verify-lead {
    margin: 0; font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy); font-size: 1.5rem; line-height: 1.2;
}
.ta-verify-text { margin: .75rem 0 0; color: var(--ta-muted); line-height: 1.5; }
.ta-verify-meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.5rem 0 0; }
.ta-verify-meta dt { font-size: .8125rem; color: var(--ta-muted); }
.ta-verify-meta dd { margin: .15rem 0 0; font-weight: 600; }
.ta-verify-code { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.ta-verify-note {
    margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ta-line);
    font-size: .8125rem; color: var(--ta-muted); line-height: 1.5;
}
@media (min-width: 640px) {
    .ta-verify { padding: 2.25rem 2.5rem 2rem; margin-top: 2rem; }
    .ta-verify-name { font-size: 2.5rem; }
}