/*
 * O tutorial de uma tela (tour.js): a tampa que pega os cliques da página, o destaque, que escurece o resto com a
 * sombra, e o cartão com a seta que aponta para ele. O destaque e o cartão têm a classe fx-app, para valerem as cores
 * do tema (--fx-*).
 */
.tr-tampa{
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: transparent;
}

.tr-luz{
    position: fixed;
    z-index: 2001;
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-primary) 85%, #fff), 0 0 0 100vmax rgba(9, 18, 32, .62);
    transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}

.tr-cartao{
    --tr-fundo: var(--fx-cartao);
    position: fixed;
    z-index: 2002;
    padding: 16px 18px 14px;
    border-radius: 16px;
    background: var(--tr-fundo);
    color: var(--fx-text);
    box-shadow: 0 18px 50px rgba(9, 18, 32, .35);
    transition: left .3s ease, top .3s ease;
}

/* no tema escuro o cartão sobe um tom, senão some no fundo escurecido */
html[data-fx-tema="escuro"] .tr-cartao{
    --tr-fundo: var(--fx-surface-alto);
}

.tr-cartao .tr-seta{
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--tr-fundo);
    transform: rotate(45deg);
}

.tr-cartao .tr-seta[hidden]{
    display: none;
}

.tr-cartao .tr-seta-alto{
    top: -7px;
    margin-left: -7px;
}

.tr-cartao .tr-seta-pe{
    bottom: -7px;
    margin-left: -7px;
}

.tr-cartao .tr-seta-esq{
    left: -7px;
    margin-top: -7px;
}

.tr-cartao .tr-seta-dir{
    right: -7px;
    margin-top: -7px;
}

.tr-cartao .tr-topo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tr-cartao .tr-conta{
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--fx-primary);
    text-transform: uppercase;
}

.tr-cartao .tr-fecha{
    border: 0;
    background: none;
    color: var(--fx-muted);
    padding: 4px;
    border-radius: 8px;
    line-height: 1;
}

.tr-cartao .tr-fecha:hover{
    color: var(--fx-text);
}

.tr-cartao .tr-titulo{
    margin: 0 0 6px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--fx-text);
}

.tr-cartao .tr-texto{
    margin: 0 0 14px;
    font-size: .93rem;
    line-height: 1.45;
    color: var(--fx-muted);
}

.tr-cartao .tr-pe{
    display: flex;
    align-items: center;
    gap: 6px;
}

.tr-cartao .tr-pontos{
    display: flex;
    gap: 5px;
    margin-right: auto;
}

.tr-cartao .tr-pontos i{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fx-outline);
}

.tr-cartao .tr-pontos i.tr-aqui{
    width: 18px;
    border-radius: 4px;
    background: var(--fx-primary);
}

.tr-cartao .tr-volta[hidden]{
    display: none;
}

/* o Avançar recebe o cursor a cada passo: fica na cor do botão, com o anel do foco, e não na cor de quando o ponteiro
   está em cima */
.fx-app.tr-cartao .tr-avanca:focus:not(:hover){
    background: var(--fx-primary);
    border-color: var(--fx-primary);
}

.fx-app.tr-cartao .tr-avanca:focus-visible{
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-primary) 35%, transparent);
}

@media (prefers-reduced-motion: reduce){
    .tr-luz,
    .tr-cartao{
        transition: none;
    }
}