/* Tour do card — ver card-tour.js para o porquê de tudo ser `absolute`. */
/* O botão fica à esquerda do X, na mesma linha e com a mesma medida, para os
dois lerem como um par de controles do card e não como dois enfeites. */
.dialog-tour {
position: absolute;
top: 15px;
right: 56px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid #e1e7ef;
border-radius: 50%;
background: #f8fafc;
color: #6d7c90;
cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.dialog-tour:hover {
border-color: #b9cdf0;
background: #eef4ff;
color: var(--color-primary, #2f62d8);
}
.dialog-tour:focus-visible {
outline: 2px solid var(--color-focus, #416eec);
outline-offset: 2px;
}
/* Interrogação desenhada, não escrita: o glifo "?" da fonte do sistema
desalinha do centro do círculo pela mesma razão que o × desalinhava
(ui-refinement.css). Máscara SVG centra no próprio viewBox.
Sem o círculo do desenho: a moldura redonda é do BOTÃO, e repeti-la no
glifo dava duas bordas concêntricas onde o X tem uma. */
.dialog-tour > span {
width: 13px;
height: 13px;
background: currentColor;
-webkit-mask: var(--ui-tour-glyph) center / contain no-repeat;
mask: var(--ui-tour-glyph) center / contain no-repeat;
}
:root {
--ui-tour-glyph: url('data:image/svg+xml;utf8, é o bloco
de contenção — ele tem `position: fixed` (ui-motion.css) e `scale`. */
/* FAIXA 46–49. Nada da página pode declarar z-index acima da .topbar (50) —
tools/test-camada-topbar-20260821.mjs trava isso, porque a topbar cria
contexto de empilhamento e um valor maior pintaria por cima do painel de
avisos aberto. Aqui o risco nem existe (tudo mora dentro de um
modal, na camada superior), mas o invariante vale para a página inteira. A
faixa fica acima do que o card tem de mais alto — dicas de campo (45),
menus e calendários (12), rodapé grudado (4) — e abaixo da topbar. */
.card-tour-veil {
position: absolute;
/* -2px cobre a franja de subpixel do zoom do painel. O diálogo com o tour
aberto recorta o excesso no próprio raio, sem deixar linha branca. */
inset: -2px;
z-index: 46;
background: rgba(9, 18, 32, .55);
border-radius: inherit;
cursor: pointer;
animation: card-tour-fade .18s ease both;
}
/* O raio antialiasa o fundo branco e, com o zoom do painel, sobra um fio
claro por fora do card. O anel de 2px é a cor do véu sobre o branco e
cobre esse fio. */
dialog.card-tour-on {
overflow: hidden;
outline: 2px solid rgb(120, 125, 132);
outline-offset: -1px;
box-shadow: 0 20px 60px #14274455;
}
/* O fundo da página tem seu próprio escurecimento (o ::backdrop nativo, a 40%),
mais claro que o véu. Durante o tour os dois passam a ter a MESMA tinta: se o
pedido é que só o campo da vez fique aceso, uma moldura mais clara em volta do
card contradiz isso e ainda puxa o olho para fora. */
dialog.card-tour-on::backdrop {
background: rgba(9, 18, 32, .72);
transition: background .18s ease;
}
/* O véu do card é MAIS CLARO que o do fundo, de propósito. Na primeira versão
os dois tinham a mesma tinta e o card sumia: o tour explica campos, e quem
lê o balão precisa continuar enxergando o formulário em volta para saber do
que ele está falando. A gradação fundo > card > campo dá o destaque sem
apagar o contexto. */
/* A franja branca na borda vinha do véu morar dentro da rolagem: ele não
chegava no raio do diálogo, e a sombra de espalhar pintava um anel. Agora o
véu é filho do diálogo, sangra 2px e `dialog.card-tour-on` recorta no raio.
Não pinte o fundo do card com a tinta do véu: os vãos entre campos escurecem
duas vezes. */
/* O campo da vez sobe acima do véu e volta à cor normal. O fundo branco é
necessário: sem ele o escuro apareceria pelos vãos entre rótulo e controle. */
.card-tour-spot {
position: relative;
z-index: 47;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(255, 255, 255, .55), 0 14px 34px rgba(9, 18, 32, .28);
}
/* O contorno herdado dos cartões de modalidade some sob o realce; sem isto o
cartão selecionado perde a borda azul justamente quando é o assunto. */
.card-tour-spot.vacation-mode,
.card-tour-spot fieldset { background: #fff; }
.card-tour-bubble {
position: absolute;
z-index: 48;
width: max-content;
max-width: 340px;
padding: 13px 15px 12px;
border: 1px solid #d8e2f0;
border-radius: 13px;
background: #fff;
box-shadow: 0 18px 40px rgba(9, 18, 32, .3);
color: #40516a;
font-size: 12px;
line-height: 1.5;
animation: card-tour-rise .2s ease both;
}
.card-tour-bubble::before {
/* A seta aponta para o campo — para cima na posição normal, para baixo
quando o balão precisou virar. */
content: "";
position: absolute;
left: 22px;
width: 11px;
height: 11px;
border: 1px solid #d8e2f0;
background: #fff;
transform: rotate(45deg);
}
.card-tour-bubble:not(.is-above)::before {
top: -6.5px;
border-right: 0;
border-bottom: 0;
}
.card-tour-bubble.is-above::before {
bottom: -6.5px;
border-top: 0;
border-left: 0;
}
/* A barra do passo atual é o próprio ponto esticado, não um elemento à parte:
assim a régua mede sempre o mesmo — um item por passo — e a posição se lê
pela contagem de cada lado. */
.card-tour-steps {
display: flex;
align-items: center;
gap: 5px;
/* Empurra o grupo de botões para a direita — é ela que separa "onde estou"
de "o que faço", e por isso o recuo automático saiu do Voltar. */
margin-right: auto;
padding-right: 4px;
}
.card-tour-dot {
width: 6px;
height: 6px;
flex: 0 0 auto;
border-radius: var(--radius-pill, 999px);
background: #cbd7e6;
transition: width .22s ease, background .22s ease;
}
.card-tour-dot.is-current {
width: 20px;
background: var(--color-primary, #2f62d8);
}
.card-tour-bubble strong {
display: block;
margin-bottom: 4px;
color: #12233c;
font-size: 13.5px;
font-weight: 760;
letter-spacing: -.01em;
}
.card-tour-bubble p { margin: 0; }
.card-tour-bubble p + p { margin-top: 6px; }
.card-tour-mark {
color: #7d91a8;
font-weight: 700;
}
.card-tour-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
}
.card-tour-actions button {
min-height: 30px;
padding: 0 13px;
border: 0;
border-radius: var(--radius-pill, 999px);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
/* Pular sem peso: é saída, não escolha. Fica junto dos outros dois porque a
régua já ocupa a esquerda, e três alvos soltos em pontos diferentes da linha
custam mais para varrer do que três juntos com pesos diferentes. */
.card-tour-skip {
background: transparent;
color: #7b8ba1;
}
.card-tour-skip:hover { color: #40516a; }
.card-tour-back {
border: 1px solid #dfe5ed !important;
background: #fff;
color: #3a4b62;
}
.card-tour-next {
background: var(--color-primary, #2f62d8);
color: #fff;
}
.card-tour-next:hover { background: var(--color-primary-hover, #2a58c2); }
.card-tour-actions button:focus-visible {
outline: 2px solid var(--color-focus, #416eec);
outline-offset: 2px;
}
/* Enquanto o tour roda, o rodapé grudado sairia por cima do véu (z-index 4 no
seu próprio contexto, mas com fundo branco sólido). Baixá-lo mantém o card
inteiro no escuro, menos o campo da vez. */
.card-tour-on .vacation-form-actions,
.card-tour-on .form-actions { z-index: 1; }
/* O X e o próprio botão do tour continuam alcançáveis por cima do véu: sair é
sempre possível. Mas param de brilhar.
Eles nasceram com fundo e borda claros para se destacar sobre o card branco.
Com o card escuro, esse mesmo desenho vira o ponto mais claro da tela e
disputa a atenção com o campo em foco — que é o único que deveria estar
aceso. Ficam em tinta clara e translúcida, que sobre o véu lê como cinza:
presentes, alcançáveis, calados. O contraste volta no hover e no foco, onde
a intenção de usá-los já existe. */
.card-tour-on .dialog-close,
.card-tour-on .dialog-tour {
z-index: 49;
border-color: transparent;
background: transparent;
color: rgba(226, 234, 245, .4);
}
.card-tour-on .dialog-close:hover,
.card-tour-on .dialog-tour:hover {
border-color: rgba(226, 234, 245, .32);
background: rgba(226, 234, 245, .14);
color: rgba(240, 245, 251, .92);
}
/* Foco por teclado precisa de contraste real: quem chega aqui sem o ponteiro
não tem o hover para confirmar onde está. */
.card-tour-on .dialog-close:focus-visible,
.card-tour-on .dialog-tour:focus-visible {
background: rgba(226, 234, 245, .16);
color: #f2f6fb;
}
/* OS ENFEITES DE CAMPO SE RECOLHEM DURANTE O TOUR.
O "i" das dicas e o botão de calendário são desenhados para o card claro:
círculo branco, borda clara, ícone cinza. Sob o véu o ícone some e sobra a
bolha, que vira uma mancha clara sem função espalhada pelo formulário — e
são justamente as manchas que competem com o campo em foco.
Há também a razão de conteúdo: os "i" respondem "o que é este campo?" um a
um, que é exatamente o que o balão está fazendo agora, e melhor. Dois
explicadores na tela ao mesmo tempo é um a mais.
No campo da vez eles voltam: ali o card está aceso e tudo deve parecer
normal, inclusive poder abrir o calendário. */
.card-tour-on .j-field-tip,
.card-tour-on .j-action-tip::after {
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
/* O botão de calendário precisa de mais peso que a regra de campo bloqueado
(`.vacation-form-grid .date-picker.is-locked .date-picker-open`, que fixa
`opacity: .72`) — e eram justamente os campos travados que mostravam as
bolhas mais visíveis. O `:not()` exclui o campo da vez, que é a mesma caixa
que recebe `.card-tour-spot`, então ali a cascata normal volta a valer e um
campo bloqueado continua parecendo bloqueado. */
.card-tour-on .date-picker:not(.card-tour-spot) .date-picker-open {
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
.card-tour-on .card-tour-spot .j-field-tip {
opacity: 1;
pointer-events: auto;
}
@keyframes card-tour-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes card-tour-rise {
from { opacity: 0; transform: translateY(6px) }
to { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
.card-tour-veil, .card-tour-bubble { animation: none }
.card-tour-dot { transition: none }
}
@media (max-width: 720px) {
.dialog-tour { right: 50px; }
.card-tour-bubble { max-width: calc(100% - 28px); }
}