/* b23-treinamento.css — o treinamento por cargo (03/11/2026).
   Direção "escuro técnico" com os tokens do painel, como a central de novidades (b18): cartão um degrau acima do fundo, borda de
   1px, um acento só (--accent no ícone, no anel e na barra; texto verde em --accent-text; botão verde com texto branco em
   --accent-strong). Escala: raio 8/12/16, espaço múltiplo de 4, 120 ms no hover; o que anima é só opacity/transform (a entrada
   do cartão e o pulso do anel) e some com prefers-reduced-motion. Peças: a lista (hub) na Ajuda e na gaveta, o convite de boas-vindas,
   o passo a passo sobre a tela (anel + cartão) e a figura da conversa. */

.trn-ajuda, .trn-veu, .trn-tour, .trn-convite-veu {
    --trn-fundo: var(--bg-card, var(--bg-sidebar, #1e1e1e));
    --trn-degrau: rgba(255, 255, 255, .04);
    --trn-borda: var(--border, rgba(255, 255, 255, .08));
    --trn-texto: var(--text-main, #e9edef);
    --trn-suave: var(--text-secondary, #aebac1);
    --trn-verde-texto: var(--accent-text, #2ecfa6);
    --trn-verde-fundo: rgba(0, 168, 132, .14);
    --trn-azul: #7cc8f8;
    --trn-azul-fundo: rgba(56, 189, 248, .14);
    --trn-ambar: #f5b041;
    --trn-ambar-fundo: rgba(245, 158, 11, .14);
    --trn-escuro: rgba(0, 0, 0, .64);
    --trn-grade: rgba(255, 255, 255, .05);
    --trn-sombra: 0 24px 64px rgba(0, 0, 0, .45);
    font-family: var(--font-sans);
    color: var(--trn-texto);
}
html.light-theme .trn-ajuda, html.light-theme .trn-veu, html.light-theme .trn-tour, html.light-theme .trn-convite-veu {
    --trn-degrau: rgba(17, 27, 33, .03);
    --trn-verde-fundo: rgba(0, 168, 132, .12);
    --trn-azul: #0369a1;
    --trn-azul-fundo: rgba(56, 189, 248, .16);
    --trn-ambar: #8a4d05;
    --trn-ambar-fundo: rgba(245, 158, 11, .16);
    --trn-escuro: rgba(8, 16, 22, .6);
    --trn-grade: rgba(17, 27, 33, .06);
    --trn-sombra: 0 24px 64px rgba(17, 27, 33, .2);
}

/* ─── Botões ──────────────────────────────────────────────────────────── */
.trn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--trn-borda);
    border-radius: 8px;
    background: transparent;
    color: var(--trn-texto);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, filter 120ms ease;
}
.trn-btn:hover { background: var(--trn-degrau); }
.trn-btn:focus-visible, .trn-link:focus-visible, .trn-cargo:focus-visible, .trn-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.trn-btn.is-primario { border-color: transparent; background: var(--accent-strong, #00806a); color: #fff; }
.trn-btn.is-primario:hover { filter: brightness(.92); background: var(--accent-strong, #00806a); }
.trn-btn.is-primario i { font-size: 12px; }
.trn-btn[disabled] { opacity: .55; cursor: default; }
.trn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--trn-verde-texto);
    cursor: pointer;
}
.trn-link:hover { text-decoration: underline; }
.trn-link i { font-size: 11px; }
.trn-x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--trn-borda);
    border-radius: 8px;
    background: transparent;
    color: var(--trn-suave);
    font-size: 15px;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.trn-x:hover { color: var(--trn-texto); background: var(--trn-degrau); }

/* ─── A lista do treinamento (na Ajuda e na gaveta) ───────────────────── */
.trn-ajuda { max-width: 960px; margin: 0 auto 48px; }
.trn-hub { display: grid; gap: 24px; }
.trn-vazio { padding: 32px 8px; text-align: center; font-size: 14px; color: var(--trn-suave); }

.trn-capa {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--trn-borda);
    border-radius: 16px;
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%), var(--trn-fundo);
    overflow: hidden;
}
/* A grade de 1px esmaecendo para o canto: textura de produto, não enfeite (a mesma do popup das novidades). */
.trn-capa::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--trn-grade) 1px, transparent 1px), linear-gradient(90deg, var(--trn-grade) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(80% 120% at 100% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(80% 120% at 100% 0%, #000 0%, transparent 70%);
    pointer-events: none;
}
.trn-capa > * { position: relative; }
.trn-capa-cabeca { display: flex; align-items: center; gap: 16px; }
.trn-capa-icone {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--trn-verde-fundo);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    font-size: 20px;
}
.trn-capa-sobre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--trn-verde-texto); }
.trn-capa-titulo { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--trn-texto); }
.trn-capa-texto { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--trn-suave); }
.trn-capa-pe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.trn-progresso { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.trn-barra { flex: 1; min-width: 48px; height: 8px; border-radius: 999px; background: var(--trn-degrau); border: 1px solid var(--trn-borda); overflow: hidden; box-sizing: border-box; }
.trn-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.trn-progresso-n { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--trn-suave); font-variant-numeric: tabular-nums; }

.trn-cargos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trn-cargos-rotulo { font-size: 13px; font-weight: 600; color: var(--trn-suave); margin-right: 4px; }
.trn-cargo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--trn-borda);
    border-radius: 999px;
    background: transparent;
    color: var(--trn-suave);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.trn-cargo:hover { color: var(--trn-texto); background: var(--trn-degrau); }
.trn-cargo[aria-pressed="true"] {
    color: var(--trn-verde-texto);
    background: var(--trn-verde-fundo);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--trn-borda));
}
.trn-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--trn-azul-fundo);
    color: var(--trn-azul);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.trn-aviso .trn-link { color: inherit; }

.trn-grupo { margin: 8px 0 -8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--trn-suave); }
.trn-trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trn-modulo {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--trn-borda);
    border-radius: 12px;
    background: var(--trn-degrau);
}
.trn-modulo.is-proximo { border-color: color-mix(in srgb, var(--accent) 55%, var(--trn-borda)); background: var(--trn-verde-fundo); }
.trn-modulo-n {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--trn-borda);
    border-radius: 50%;
    background: var(--trn-fundo);
    color: var(--trn-suave);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.trn-modulo.is-feito .trn-modulo-n { border-color: transparent; background: var(--accent-strong, #00806a); color: #fff; font-size: 14px; }
.trn-modulo.is-proximo .trn-modulo-n { border-color: var(--accent); color: var(--trn-verde-texto); }
.trn-modulo-corpo { flex: 1; min-width: 0; }
.trn-modulo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; color: var(--trn-suave); }
.trn-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.trn-tag.is-feito { background: var(--trn-verde-fundo); color: var(--trn-verde-texto); }
.trn-tag.is-proximo { background: var(--accent-strong, #00806a); color: #fff; }
.trn-tag.is-opcional { background: var(--trn-ambar-fundo); color: var(--trn-ambar); }
.trn-modulo-titulo { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--trn-texto); }
.trn-modulo-resumo { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--trn-suave); }
.trn-modulo-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.trn-modulo-acoes .trn-btn { height: 36px; padding: 0 12px; font-size: 13px; }

.trn-manual { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: passo; border-top: 1px solid var(--trn-borda); padding-top: 16px; }
.trn-manual[hidden] { display: none; }
.trn-manual li { position: relative; padding-left: 32px; counter-increment: passo; font-size: 14px; line-height: 1.6; color: var(--trn-suave); }
.trn-manual li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--trn-verde-fundo);
    color: var(--trn-verde-texto);
    font-size: 12px;
    font-weight: 700;
}
.trn-manual b { display: block; color: var(--trn-texto); font-size: 14px; }
.trn-manual .trn-onde, .trn-manual .trn-dica, .trn-manual .trn-cuidado { margin-top: 4px; }

/* ─── Equipe (dono e administrador) ───────────────────────────────────── */
.trn-equipe { display: grid; gap: 8px; }
.trn-equipe h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--trn-texto); }
.trn-equipe-nota { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--trn-suave); }
.trn-equipe-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--trn-borda);
    border-radius: 12px;
    background: var(--trn-degrau);
}
.trn-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--trn-verde-fundo);
    color: var(--trn-verde-texto);
    font-size: 13px;
    font-weight: 700;
}
.trn-equipe-info { flex: 1 1 140px; min-width: 0; }
.trn-equipe-info b { display: block; font-size: 14px; color: var(--trn-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-equipe-info span { font-size: 12px; color: var(--trn-suave); }
.trn-equipe-linha .trn-barra { flex: 1 1 96px; }
.trn-equipe-n { flex: 0 0 auto; min-width: 56px; text-align: right; font-size: 13px; font-weight: 600; color: var(--trn-suave); font-variant-numeric: tabular-nums; }

/* O resumo na lista de usuários (Configurações → Equipe) */
.usr-chip.trn-chip-equipe.is-completo { color: var(--trn-verde-texto, var(--accent-text)); }
.usr-chip.trn-chip-equipe.is-vazio { color: var(--trn-ambar, #f5b041); }
html.light-theme .usr-chip.trn-chip-equipe.is-vazio { color: #8a4d05; }

/* ─── A gaveta (abre pelo botão do topo, pelo menu da foto e pelo menu do celular) ─── */
.trn-veu {
    position: fixed;
    inset: 0;
    z-index: 15600;
    display: flex;
    justify-content: flex-end;
    background: rgba(0, 0, 0, .45);
}
.trn-gaveta {
    width: 100%;
    max-width: 520px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--trn-fundo);
    border-left: 1px solid var(--trn-borda);
    box-shadow: var(--trn-sombra);
    animation: trn-entra-lado 240ms ease-out;
}
.trn-gaveta:focus, .trn-convite:focus, .trn-cartao:focus { outline: none; }
.trn-gaveta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--trn-borda); }
.trn-gaveta-cab h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--trn-texto); }
.trn-gaveta-cab p { margin: 4px 0 0; font-size: 13px; color: var(--trn-suave); }
.trn-gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
.trn-gaveta .trn-capa { padding: 20px; }
.trn-gaveta .trn-modulo { padding: 12px; gap: 12px; }

/* ─── O convite de boas-vindas ────────────────────────────────────────── */
.trn-convite-veu {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
    box-sizing: border-box;
}
.trn-convite {
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--trn-borda);
    border-radius: 16px;
    background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 62%), var(--trn-fundo);
    box-shadow: var(--trn-sombra);
    box-sizing: border-box;
    animation: trn-entra 240ms ease-out;
}
.trn-convite h2 { margin: 16px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--trn-texto); }
.trn-convite p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--trn-suave); }
.trn-convite-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.trn-convite-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--trn-texto); }
.trn-convite-lista i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--trn-verde-fundo);
    color: var(--trn-verde-texto);
    font-size: 10px;
}
.trn-convite-pe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 24px; }

/* ─── O passo a passo sobre a tela ────────────────────────────────────── */
.trn-tour { position: fixed; inset: 0; z-index: 17000; overflow: hidden; pointer-events: none; }
/* A camada que segura o clique: a pessoa lê o passo e olha a tela, sem apertar nada por engano. */
.trn-bloqueio { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.trn-tour.sem-foco .trn-bloqueio { background: var(--trn-escuro); }
.trn-tour.is-celular .trn-bloqueio { background: rgba(0, 0, 0, .4); }
.trn-foco {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px var(--trn-escuro);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}
.trn-foco.is-visivel { opacity: 1; }
.trn-foco::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid var(--accent);
    border-radius: 16px;
    opacity: 0;
    animation: trn-pulso 1.8s ease-out infinite;
}
/* A moldura e a seta moram aqui (a seta sai da borda: este elemento NÃO pode rolar); quem rola é o .trn-cartao-corpo. */
.trn-cartao {
    position: absolute;
    width: min(380px, calc(100vw - 32px));
    box-sizing: border-box;
    border: 1px solid var(--trn-borda);
    border-radius: 16px;
    background: var(--trn-fundo);
    box-shadow: var(--trn-sombra);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 150ms ease;
}
.trn-cartao.is-visivel { opacity: 1; animation: trn-entra 240ms ease-out; }
.trn-cartao-corpo { box-sizing: border-box; max-height: calc(100dvh - 34px); overflow-y: auto; padding: 20px; border-radius: inherit; }
.trn-cartao::before {
    content: '';
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    background: var(--trn-fundo);
    border: 1px solid var(--trn-borda);
    transform: rotate(45deg);
}
.trn-cartao[data-lado="direita"]::before { display: block; left: -7px; top: var(--seta, 28px); margin-top: -6px; border-top: 0; border-right: 0; }
.trn-cartao[data-lado="esquerda"]::before { display: block; right: -7px; top: var(--seta, 28px); margin-top: -6px; border-bottom: 0; border-left: 0; }
.trn-cartao[data-lado="abaixo"]::before { display: block; top: -7px; left: var(--seta, 28px); margin-left: -6px; border-right: 0; border-bottom: 0; }
.trn-cartao[data-lado="acima"]::before { display: block; bottom: -7px; left: var(--seta, 28px); margin-left: -6px; border-top: 0; border-left: 0; }

.trn-cartao-topo { display: flex; align-items: center; gap: 12px; }
.trn-cartao-quem { flex: 1; min-width: 0; }
.trn-cartao-passo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--trn-verde-texto); }
.trn-cartao-modulo { margin-top: 2px; font-size: 12px; color: var(--trn-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-cartao .trn-barra { margin: 12px 0 16px; }
.trn-previa { display: block; margin: -4px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--trn-azul-fundo); color: var(--trn-azul); font-size: 12px; font-weight: 600; line-height: 1.5; }
.trn-cartao h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--trn-texto); }
.trn-texto { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--trn-suave); }
.trn-texto strong { color: var(--trn-texto); font-weight: 700; }
.trn-tecla {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--trn-borda);
    border-radius: 6px;
    background: var(--trn-degrau);
    color: var(--trn-texto);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.trn-onde, .trn-dica, .trn-cuidado, .trn-nota {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
}
.trn-onde i, .trn-dica i, .trn-cuidado i, .trn-nota i { flex: 0 0 auto; margin-top: 3px; font-size: 12px; }
.trn-onde { background: var(--trn-degrau); color: var(--trn-suave); }
.trn-dica { background: var(--trn-verde-fundo); color: var(--trn-verde-texto); }
.trn-cuidado { background: var(--trn-ambar-fundo); color: var(--trn-ambar); }
.trn-nota { background: var(--trn-azul-fundo); color: var(--trn-azul); }
.trn-cartao-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.trn-cartao-pe .trn-btn:only-child { margin-left: auto; }

.trn-fim { text-align: center; padding: 8px 0 0; }
.trn-fim-icone {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--trn-verde-fundo);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    font-size: 24px;
}
.trn-fim h3 { margin-top: 16px; font-size: 20px; }
.trn-fim .trn-texto { margin-top: 8px; }
.trn-fim-acoes { display: grid; gap: 8px; margin-top: 20px; }

/* A figura da conversa: o que dizer de um botão que só existe com uma conversa aberta. */
.trn-fig { margin: 0 0 16px; }
.trn-fig svg { display: block; width: 100%; height: auto; }
.trn-fig figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--trn-suave); }
.trn-fig-moldura { fill: var(--trn-degrau); stroke: var(--trn-borda); stroke-width: 1; }
.trn-fig-faixa { fill: none; stroke: var(--trn-borda); stroke-width: 1; }
.trn-fig-forma { fill: color-mix(in srgb, var(--trn-suave) 22%, transparent); }
.trn-fig-balao { fill: color-mix(in srgb, var(--trn-suave) 14%, transparent); }
.trn-fig-balao.is-meu { fill: var(--trn-verde-fundo); }
.trn-fig-campo { fill: var(--trn-fundo); stroke: var(--trn-borda); stroke-width: 1; }
.trn-fig-ponto { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 2; }
.trn-fig-ponto.is-pulso { animation: trn-pulso-svg 1.8s ease-in-out infinite; }
.trn-fig-atender { fill: var(--accent-strong, #00806a); }
.trn-fig-branco { fill: #fff; font: 700 11px var(--font-sans, sans-serif); }

@keyframes trn-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes trn-entra-lado { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes trn-pulso { 0% { opacity: .7; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes trn-pulso-svg { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
    .trn-gaveta, .trn-convite, .trn-cartao.is-visivel { animation: none; }
    .trn-foco::after, .trn-fig-ponto.is-pulso { animation: none; }
    .trn-foco, .trn-cartao { transition: none; }
}

/* ─── Toque e celular: alvo de 44px; o passo vira folha de baixo, sem anel ─── */
@media (pointer: coarse) {
    .trn-btn, .trn-cargo, .trn-x { min-height: 44px; }
    .trn-x { min-width: 44px; }
    .trn-link { min-height: 44px; }
}
.trn-tour.is-celular .trn-cartao {
    left: 0 !important;
    right: 0;
    bottom: 0;
    top: auto !important;
    width: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
}
.trn-tour.is-celular .trn-cartao-corpo { max-height: min(80dvh, 600px); padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); }
.trn-tour.is-celular .trn-cartao::before { display: none !important; }
.trn-tour.is-celular.sem-foco .trn-foco { display: none; }
/* Passo com alvo no celular (celular.alvo): o anel escurece o resto da tela; se o alvo é a barra de baixo, o cartão flutua acima dela, sem cobri-la. */
.trn-tour.is-celular:not(.sem-foco) .trn-bloqueio { background: transparent; }
.trn-tour.is-celular .trn-cartao.is-erguido { left: 8px !important; right: 8px; border-radius: 16px; border-bottom: 1px solid var(--trn-borda); }
.trn-tour.is-celular .trn-cartao.is-erguido .trn-cartao-corpo { padding-bottom: 16px; max-height: min(70dvh, 520px); }
.trn-tour.is-celular .trn-btn { height: 44px; }
@media (max-width: 960px) {
    .trn-gaveta { max-width: none; border-left: 0; }
    .trn-gaveta-cab { padding-top: calc(16px + env(safe-area-inset-top)); }
}
@media (max-width: 720px) {
    .trn-capa { padding: 20px; }
    .trn-capa-cabeca { align-items: flex-start; }
    .trn-capa-pe .trn-btn { width: 100%; }
    .trn-convite-veu { align-items: flex-end; padding: 0; }
    .trn-convite { max-width: none; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border-bottom: 0; }
    .trn-convite-pe .trn-btn { flex: 1 1 auto; }
    .trn-modulo { padding: 12px; gap: 12px; }
    .trn-equipe-linha { flex-wrap: wrap; }
    .trn-equipe-linha .trn-barra { order: 5; flex-basis: 100%; }
}