/**
 * Página de rastreio do pedido na loja.
 *
 * As cores são as da loja, medidas pela paleta (Solex_Conecta_Rastreio_Paleta), que
 * o servidor imprime como variáveis no escopo da raiz logo depois desta folha. No
 * modo shortcode a página é do tema, por isso as declarações usam !important: o
 * CSS do tema não controla o rastreio.
 *
 * Todo valor visual sai de token: as cores, da paleta; as medidas, os pesos, as linhas
 * e os tempos, do bloco abaixo, no mesmo escopo da paleta (no modo shortcode só a raiz
 * existe) e com os mesmos nomes do rastreio do Solex, que segue este. Os tokens que
 * compõem cor (as sombras) ficam no mesmo escopo das cores da paleta, para lê-las.
 *
 * Dentro do cartão tudo fica na superfície da loja, separado por espaço e por bordas
 * leves: o fundo da página só aparece fora dele. A cor de ação da loja pinta o que diz
 * em que pé está o pedido (o quadro da situação e o trilho das etapas já percorridas),
 * sempre como fundo sólido com a letra que a paleta mede para ele.
 */

/* A Inter da instalação (bibliotecas/inter) com font-display swap: a página declara
   fonte de reserva, então o texto aparece nela enquanto a Inter chega, em vez de
   ficar invisível até 3 s como na folha compartilhada do checkout
   (css/solex-conecta-inter.css, block porque o checkout não tem reserva), que o
   rastreio não carrega. Família com nome próprio para a regra da folha
   compartilhada, quando a página também a tiver, não decidir qual das duas vale. */
@font-face {
    font-family: "Solex Conecta Rastreio Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../bibliotecas/inter/InterVariable.woff2") format("woff2");
}

#solex-conecta-rastreio-root,
body.solex-conecta-rastreio-pagina {
    --solex-conecta-rastreio-fonte: "Solex Conecta Rastreio Inter";
    --solex-conecta-rastreio-duracao: 0.2s;
    --solex-conecta-rastreio-subida: -1px;
    --solex-conecta-rastreio-borda-largura: 1px;
    --solex-conecta-rastreio-raio-circulo: 50%;
    --solex-conecta-rastreio-raio-pilula: 999px;
    --solex-conecta-rastreio-alvo-toque: 40px;

    /* O espaço em volta do cartão. */
    --solex-conecta-rastreio-respiro-pagina: 20px;

    /* O cartão. */
    --solex-conecta-rastreio-largura: 620px;
    --solex-conecta-rastreio-vao-cartao: 20px;
    --solex-conecta-rastreio-respiro-cartao: 30px;
    --solex-conecta-rastreio-raio-cartao: 26px;
    --solex-conecta-rastreio-sombra-cartao: 0 18px 56px var(--solex-conecta-rastreio-sombra);
    --solex-conecta-rastreio-linha-texto: 1.5;

    /* O cabeçalho do cartão: o logo da loja, o título e o subtítulo. */
    --solex-conecta-rastreio-vao-cabecalho: 6px;
    --solex-conecta-rastreio-logo-largura: min(200px, 72%);
    --solex-conecta-rastreio-logo-altura: 72px;
    --solex-conecta-rastreio-margem-logo: 0 0 10px;
    --solex-conecta-rastreio-logo-icone: 64px;
    --solex-conecta-rastreio-logo-icone-fonte: 26px;
    --solex-conecta-rastreio-titulo-fonte: clamp(1.5rem, 5vw, 1.9rem);
    --solex-conecta-rastreio-titulo-linha: 1.15;
    --solex-conecta-rastreio-titulo-letras: -0.03em;
    --solex-conecta-rastreio-subtitulo-fonte: 0.94rem;

    /* Os pesos e as linhas que se repetem. */
    --solex-conecta-rastreio-peso-texto: 500;
    --solex-conecta-rastreio-peso-campo: 550;
    --solex-conecta-rastreio-peso-medio: 600;
    --solex-conecta-rastreio-peso-dado: 650;
    --solex-conecta-rastreio-peso-rotulo: 700;
    --solex-conecta-rastreio-peso-forte: 750;
    --solex-conecta-rastreio-peso-titulo: 800;
    --solex-conecta-rastreio-linha-icone: 1;
    --solex-conecta-rastreio-linha-curta: 1.25;
    --solex-conecta-rastreio-linha-rotulo: 1.3;
    --solex-conecta-rastreio-linha-media: 1.35;
    --solex-conecta-rastreio-linha-nota: 1.45;

    /* O número do pedido, com o botão de copiar ao lado. */
    --solex-conecta-rastreio-vao-pedido: 6px 10px;
    --solex-conecta-rastreio-rotulo-fonte: 0.76rem;
    --solex-conecta-rastreio-rotulo-letras: 0.07em;
    --solex-conecta-rastreio-numero-fonte: 1.3rem;
    --solex-conecta-rastreio-numero-letras: -0.01em;
    --solex-conecta-rastreio-vao-copiar: 6px;
    --solex-conecta-rastreio-copiar-altura: 32px;
    --solex-conecta-rastreio-respiro-copiar: 0 11px;
    --solex-conecta-rastreio-copiar-fonte: 0.78rem;
    --solex-conecta-rastreio-copiar-icone-fonte: 0.8rem;

    /* A situação do pedido: o destaque do cartão, na cor de ação da loja. */
    --solex-conecta-rastreio-vao-status: 14px;
    --solex-conecta-rastreio-respiro-status: 18px 20px;
    --solex-conecta-rastreio-raio-status: 20px;
    --solex-conecta-rastreio-sombra-status: 0 12px 30px color-mix(in srgb, var(--solex-conecta-rastreio-acao) 30%, transparent);
    --solex-conecta-rastreio-sombra-status-ok: 0 12px 30px color-mix(in srgb, var(--solex-conecta-rastreio-ok-texto) 26%, transparent);
    --solex-conecta-rastreio-sombra-status-erro: 0 12px 30px color-mix(in srgb, var(--solex-conecta-rastreio-erro-texto) 26%, transparent);
    --solex-conecta-rastreio-status-icone: 52px;
    --solex-conecta-rastreio-status-icone-fonte: 1.45rem;
    --solex-conecta-rastreio-status-icone-fundo: color-mix(in srgb, currentColor 14%, transparent);
    --solex-conecta-rastreio-vao-status-textos: 2px;
    --solex-conecta-rastreio-status-texto-fonte: 1.12rem;
    --solex-conecta-rastreio-status-subtexto-fonte: 0.88rem;

    /* A linha do tempo. */
    --solex-conecta-rastreio-respiro-linha-tempo: 2px 4px 0;
    --solex-conecta-rastreio-etapa-marca: 36px;
    --solex-conecta-rastreio-vao-etapa: 14px;
    --solex-conecta-rastreio-respiro-etapa: 0 0 22px;
    --solex-conecta-rastreio-trilho-topo: 40px;
    --solex-conecta-rastreio-trilho-base: 4px;
    --solex-conecta-rastreio-trilho-esquerda: 17px;
    --solex-conecta-rastreio-trilho-largura: 2px;
    --solex-conecta-rastreio-etapa-borda: 2px;
    --solex-conecta-rastreio-etapa-icone-fonte: 14px;
    --solex-conecta-rastreio-pulso-recuo: -7px;
    --solex-conecta-rastreio-pulso-tempo: 1.8s;
    --solex-conecta-rastreio-pulso-inicio: 0.85;
    --solex-conecta-rastreio-pulso-fim: 1.3;
    --solex-conecta-rastreio-pulso-opacidade: 0.75;
    --solex-conecta-rastreio-pulso-parado: 0.35;
    --solex-conecta-rastreio-respiro-etapa-conteudo: 6px 0 0;
    --solex-conecta-rastreio-margem-etapa-titulo: 0 0 2px;
    --solex-conecta-rastreio-etapa-titulo-fonte: 0.98rem;
    --solex-conecta-rastreio-etapa-texto-fonte: 0.86rem;
    --solex-conecta-rastreio-vao-data: 6px;
    --solex-conecta-rastreio-margem-data: 6px 0 0;
    --solex-conecta-rastreio-data-fonte: 0.8rem;
    --solex-conecta-rastreio-data-icone-fonte: 0.74rem;

    /* O botão do WhatsApp. */
    --solex-conecta-rastreio-vao-whatsapp: 10px;
    --solex-conecta-rastreio-whatsapp-altura: 48px;
    --solex-conecta-rastreio-respiro-whatsapp: 12px 22px;
    --solex-conecta-rastreio-whatsapp-fonte: 0.95rem;
    --solex-conecta-rastreio-raio-botao: 14px;
    --solex-conecta-rastreio-sombra-whatsapp: 0 10px 24px color-mix(in srgb, var(--solex-conecta-rastreio-whatsapp) 30%, transparent);
    --solex-conecta-rastreio-sombra-whatsapp-mouse: 0 14px 30px color-mix(in srgb, var(--solex-conecta-rastreio-whatsapp) 38%, transparent);
    --solex-conecta-rastreio-whatsapp-icone-fonte: 1.3rem;

    /* O pedido não encontrado e a falha da consulta, com a dica. */
    --solex-conecta-rastreio-vao-erro: 8px;
    --solex-conecta-rastreio-respiro-erro: 20px;
    --solex-conecta-rastreio-raio-erro: 20px;
    --solex-conecta-rastreio-erro-icone-fonte: 2.35rem;
    --solex-conecta-rastreio-erro-titulo-fonte: 1.15rem;
    --solex-conecta-rastreio-erro-texto-fonte: 0.9rem;
    --solex-conecta-rastreio-margem-dica: 8px 0 0;
    --solex-conecta-rastreio-respiro-dica: 12px 14px;
    --solex-conecta-rastreio-raio-dica: 14px;
    --solex-conecta-rastreio-vao-dica-titulo: 8px;
    --solex-conecta-rastreio-margem-dica-titulo: 0 0 6px;
    --solex-conecta-rastreio-dica-titulo-fonte: 0.84rem;
    --solex-conecta-rastreio-dica-icone: 24px;
    --solex-conecta-rastreio-dica-icone-fonte: 0.74rem;
    --solex-conecta-rastreio-dica-texto-fonte: 0.82rem;
    --solex-conecta-rastreio-margem-erro-acoes: 4px 0 0;

    /* A consulta em andamento e a espera do pedido novo. */
    --solex-conecta-rastreio-vao-carregando: 10px;
    --solex-conecta-rastreio-carregando-altura: 160px;
    --solex-conecta-rastreio-respiro-carregando: 28px 20px;
    --solex-conecta-rastreio-vao-pontos: 6px;
    --solex-conecta-rastreio-margem-pontos: 0 0 4px;
    --solex-conecta-rastreio-ponto: 9px;
    --solex-conecta-rastreio-pontos-tempo: 1s;
    --solex-conecta-rastreio-ponto-atraso-2: 0.15s;
    --solex-conecta-rastreio-ponto-atraso-3: 0.3s;
    --solex-conecta-rastreio-ponto-escala: 0.7;
    --solex-conecta-rastreio-ponto-opacidade: 0.4;
    --solex-conecta-rastreio-carregando-titulo-fonte: 1rem;
    --solex-conecta-rastreio-carregando-texto-largura: 420px;
    --solex-conecta-rastreio-carregando-texto-fonte: 0.88rem;

    /* A busca. */
    --solex-conecta-rastreio-vao-busca: 10px;
    --solex-conecta-rastreio-campo-altura: 44px;
    --solex-conecta-rastreio-respiro-campo: 10px 14px;
    --solex-conecta-rastreio-campo-fonte: 0.94rem;
    --solex-conecta-rastreio-raio-campo: 13px;
    --solex-conecta-rastreio-sombra-campo-foco: 0 0 0 3px color-mix(in srgb, var(--solex-conecta-rastreio-foco) 24%, transparent);
    --solex-conecta-rastreio-vao-botao: 7px;
    --solex-conecta-rastreio-botao-altura: 44px;
    --solex-conecta-rastreio-respiro-botao: 10px 18px;
    --solex-conecta-rastreio-botao-fonte: 0.9rem;
    --solex-conecta-rastreio-sombra-botao: 0 6px 16px color-mix(in srgb, var(--solex-conecta-rastreio-acao) 28%, transparent);
    --solex-conecta-rastreio-sombra-botao-mouse: 0 10px 22px color-mix(in srgb, var(--solex-conecta-rastreio-acao) 36%, transparent);

    /* O foco e a assinatura. */
    --solex-conecta-rastreio-foco-largura: 3px;
    --solex-conecta-rastreio-foco-recuo: 3px;
    --solex-conecta-rastreio-respiro-rodape-cartao: 16px 0 0;
    --solex-conecta-rastreio-vao-assinatura: 0 4px;
    --solex-conecta-rastreio-assinatura-fonte: 0.8rem;
    --solex-conecta-rastreio-margem-assinatura-contato: 5px;
}

/* A altura mínima conta o padding (border-box), sem rolagem sobrando em tela curta, e o cartão
   fica no alto: centralizado na vertical, ele pularia quando "Consultando…" vira o resultado. */
body.solex-conecta-rastreio-pagina {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-pagina) !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    font-family: var(--solex-conecta-rastreio-fonte), sans-serif !important;
    background: var(--solex-conecta-rastreio-fundo) !important;
}

body.solex-conecta-rastreio-pagina #solex-conecta-rastreio-root {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#solex-conecta-rastreio-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--solex-conecta-rastreio-texto) !important;
    font-family: var(--solex-conecta-rastreio-fonte), sans-serif !important;
    line-height: var(--solex-conecta-rastreio-linha-texto) !important;
    isolation: isolate !important;
}

#solex-conecta-rastreio-root,
#solex-conecta-rastreio-root *,
#solex-conecta-rastreio-root *::before,
#solex-conecta-rastreio-root *::after {
    box-sizing: border-box !important;
}

#solex-conecta-rastreio-root :where(h1, h2, p, form) {
    margin: 0 !important;
    padding: 0 !important;
}

/* Títulos, botões, campos e links recebem a fonte direto, e não por herança: no modo
   shortcode as regras do tema para esses elementos venceriam a herança da raiz. */
#solex-conecta-rastreio-root :where(h1, h2, button, input, a) {
    font-family: var(--solex-conecta-rastreio-fonte), sans-serif !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--solex-conecta-rastreio-vao-cartao) !important;
    width: min(100%, var(--solex-conecta-rastreio-largura)) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: var(--solex-conecta-rastreio-respiro-cartao) !important;
    overflow: hidden !important;
    color: var(--solex-conecta-rastreio-texto) !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-borda) !important;
    border-radius: var(--solex-conecta-rastreio-raio-cartao) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-cartao) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-container > * {
    margin: 0 !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-cabecalho) !important;
    text-align: center !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-logo {
    display: block !important;
    width: auto !important;
    max-width: var(--solex-conecta-rastreio-logo-largura) !important;
    height: auto !important;
    max-height: var(--solex-conecta-rastreio-logo-altura) !important;
    margin: var(--solex-conecta-rastreio-margem-logo) !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-logo-placeholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--solex-conecta-rastreio-logo-icone) !important;
    height: var(--solex-conecta-rastreio-logo-icone) !important;
    margin: var(--solex-conecta-rastreio-margem-logo) !important;
    color: var(--solex-conecta-rastreio-acao-texto) !important;
    font-size: var(--solex-conecta-rastreio-logo-icone-fonte) !important;
    border-radius: var(--solex-conecta-rastreio-raio-circulo) !important;
    background: var(--solex-conecta-rastreio-acao) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-title {
    color: var(--solex-conecta-rastreio-tinta) !important;
    font-size: var(--solex-conecta-rastreio-titulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-forte) !important;
    line-height: var(--solex-conecta-rastreio-titulo-linha) !important;
    letter-spacing: var(--solex-conecta-rastreio-titulo-letras) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-subtitle {
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-subtitulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-texto) !important;
    line-height: var(--solex-conecta-rastreio-linha-nota) !important;
}

/* Número do pedido em linha, no próprio cartão, com o botão de copiar ao lado. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-pedido {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--solex-conecta-rastreio-vao-pedido) !important;
    text-align: center !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-pedido-label {
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-rotulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-rotulo) !important;
    line-height: var(--solex-conecta-rastreio-linha-rotulo) !important;
    letter-spacing: var(--solex-conecta-rastreio-rotulo-letras) !important;
    text-transform: uppercase !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-pedido-numero {
    color: var(--solex-conecta-rastreio-tinta) !important;
    font-size: var(--solex-conecta-rastreio-numero-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-titulo) !important;
    line-height: var(--solex-conecta-rastreio-linha-curta) !important;
    letter-spacing: var(--solex-conecta-rastreio-numero-letras) !important;
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-copiar {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-copiar) !important;
    min-height: var(--solex-conecta-rastreio-copiar-altura) !important;
    margin: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-copiar) !important;
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-copiar-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-rotulo) !important;
    line-height: var(--solex-conecta-rastreio-linha-icone) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-borda) !important;
    border-radius: var(--solex-conecta-rastreio-raio-pilula) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
    box-shadow: none !important;
    transition: border-color var(--solex-conecta-rastreio-duracao) ease, color var(--solex-conecta-rastreio-duracao) ease, background-color var(--solex-conecta-rastreio-duracao) ease !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-copiar:hover {
    color: var(--solex-conecta-rastreio-tinta) !important;
    border-color: var(--solex-conecta-rastreio-borda-forte) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-copiar.copiado {
    color: var(--solex-conecta-rastreio-ok-texto) !important;
    border-color: var(--solex-conecta-rastreio-ok-borda) !important;
    background: var(--solex-conecta-rastreio-ok-fundo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-copiar.falhou {
    color: var(--solex-conecta-rastreio-erro-texto) !important;
    border-color: var(--solex-conecta-rastreio-erro-borda) !important;
    background: var(--solex-conecta-rastreio-erro-fundo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-copiar i {
    color: inherit !important;
    font-size: var(--solex-conecta-rastreio-copiar-icone-fonte) !important;
}

/* A situação do pedido é o destaque da página: fundo sólido na cor de ação da loja,
   com a letra que a paleta mede para o botão. O verde do entregue e o vermelho do
   cancelado vêm da paleta como letra legível sobre a superfície, então a superfície
   se lê sobre eles. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-status {
    display: flex !important;
    align-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-status) !important;
    width: 100% !important;
    padding: var(--solex-conecta-rastreio-respiro-status) !important;
    text-align: left !important;
    color: var(--solex-conecta-rastreio-acao-texto) !important;
    border: 0 !important;
    border-radius: var(--solex-conecta-rastreio-raio-status) !important;
    background: var(--solex-conecta-rastreio-acao) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-status) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-status.entregue {
    color: var(--solex-conecta-rastreio-superficie) !important;
    background: var(--solex-conecta-rastreio-ok-texto) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-status-ok) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-status.cancelado {
    color: var(--solex-conecta-rastreio-superficie) !important;
    background: var(--solex-conecta-rastreio-erro-texto) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-status-erro) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-status-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--solex-conecta-rastreio-status-icone) !important;
    height: var(--solex-conecta-rastreio-status-icone) !important;
    color: inherit !important;
    font-size: var(--solex-conecta-rastreio-status-icone-fonte) !important;
    line-height: var(--solex-conecta-rastreio-linha-icone) !important;
    border-radius: var(--solex-conecta-rastreio-raio-circulo) !important;
    background: var(--solex-conecta-rastreio-status-icone-fundo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-status-textos {
    display: grid !important;
    gap: var(--solex-conecta-rastreio-vao-status-textos) !important;
    min-width: 0 !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-status-text {
    color: inherit !important;
    font-size: var(--solex-conecta-rastreio-status-texto-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-titulo) !important;
    line-height: var(--solex-conecta-rastreio-linha-curta) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-status-subtext {
    color: inherit !important;
    font-size: var(--solex-conecta-rastreio-status-subtexto-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-texto) !important;
    line-height: var(--solex-conecta-rastreio-linha-nota) !important;
}

/* Linha do tempo como progresso: o trilho sai de cada etapa até a seguinte, na cor de
   ação quando a etapa já foi percorrida e na borda quando a seguinte ainda não chegou. A
   etapa concluída tem a marca cheia, a atual o contorno com o pulso e a pendente só o
   contorno leve.
   Quem diz a situação de cada etapa é a marca (o ícone dentro dela e o contorno da atual,
   na tinta) e o texto, que contrastam com a superfície. A cor de ação pura do trilho, do
   pulso e dos pontos de "consultando" é enfeite e fica clara demais sobre a superfície
   quando a cor de ação da loja é clara; o tom escurecido dela, que daria contraste a
   esses traços, ficou de fora por decisão do usuário. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-timeline {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-linha-tempo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: var(--solex-conecta-rastreio-etapa-marca) minmax(0, 1fr) !important;
    column-gap: var(--solex-conecta-rastreio-vao-etapa) !important;
    min-width: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-etapa) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step:last-child {
    padding-bottom: 0 !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: var(--solex-conecta-rastreio-trilho-topo) !important;
    bottom: var(--solex-conecta-rastreio-trilho-base) !important;
    left: var(--solex-conecta-rastreio-trilho-esquerda) !important;
    width: var(--solex-conecta-rastreio-trilho-largura) !important;
    border-radius: var(--solex-conecta-rastreio-raio-pilula) !important;
    background: var(--solex-conecta-rastreio-borda) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.concluido:not(:last-child)::after {
    background: var(--solex-conecta-rastreio-acao) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step-icon {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--solex-conecta-rastreio-etapa-marca) !important;
    height: var(--solex-conecta-rastreio-etapa-marca) !important;
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-etapa-icone-fonte) !important;
    border: var(--solex-conecta-rastreio-etapa-borda) solid var(--solex-conecta-rastreio-borda) !important;
    border-radius: var(--solex-conecta-rastreio-raio-circulo) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.concluido .solex-conecta-rastreio-step-icon {
    color: var(--solex-conecta-rastreio-acao-texto) !important;
    border-color: var(--solex-conecta-rastreio-acao) !important;
    background: var(--solex-conecta-rastreio-acao) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.atual .solex-conecta-rastreio-step-icon {
    color: var(--solex-conecta-rastreio-tinta) !important;
    border-color: var(--solex-conecta-rastreio-tinta) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
}

/* O pulso da etapa atual anima só transform e opacity. A opacidade fica só na animação:
   declarada aqui com !important, ela venceria os quadros dela, e o halo nunca apareceria. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-step.atual .solex-conecta-rastreio-step-icon::after {
    content: "" !important;
    position: absolute !important;
    inset: var(--solex-conecta-rastreio-pulso-recuo) !important;
    border: var(--solex-conecta-rastreio-etapa-borda) solid var(--solex-conecta-rastreio-acao) !important;
    border-radius: var(--solex-conecta-rastreio-raio-circulo) !important;
    pointer-events: none !important;
    animation: solex-conecta-rastreio-pulso var(--solex-conecta-rastreio-pulso-tempo) ease-out infinite !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.cancelado .solex-conecta-rastreio-step-icon {
    color: var(--solex-conecta-rastreio-superficie) !important;
    border-color: var(--solex-conecta-rastreio-erro-texto) !important;
    background: var(--solex-conecta-rastreio-erro-texto) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.cancelado .solex-conecta-rastreio-step-icon::after {
    content: none !important;
    animation: none !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step-content {
    min-width: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-etapa-conteudo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step-title {
    margin: var(--solex-conecta-rastreio-margem-etapa-titulo) !important;
    color: var(--solex-conecta-rastreio-tinta) !important;
    font-size: var(--solex-conecta-rastreio-etapa-titulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-forte) !important;
    line-height: var(--solex-conecta-rastreio-linha-media) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step-desc {
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-etapa-texto-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-texto) !important;
    line-height: var(--solex-conecta-rastreio-linha-nota) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step-data {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-data) !important;
    max-width: 100% !important;
    margin: var(--solex-conecta-rastreio-margem-data) !important;
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-data-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-dado) !important;
    line-height: var(--solex-conecta-rastreio-linha-rotulo) !important;
    overflow-wrap: anywhere !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step-data i {
    color: inherit !important;
    font-size: var(--solex-conecta-rastreio-data-icone-fonte) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.pendente .solex-conecta-rastreio-step-title {
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-weight: var(--solex-conecta-rastreio-peso-dado) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-step.cancelado .solex-conecta-rastreio-step-title {
    color: var(--solex-conecta-rastreio-erro-texto) !important;
}

/* O botão do WhatsApp usa o verde do WhatsApp, reconhecível em qualquer loja, que a
   paleta guarda com a letra que se lê sobre ele. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-whatsapp {
    display: flex !important;
    justify-content: center !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-whatsapp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--solex-conecta-rastreio-vao-whatsapp) !important;
    min-height: var(--solex-conecta-rastreio-whatsapp-altura) !important;
    padding: var(--solex-conecta-rastreio-respiro-whatsapp) !important;
    color: var(--solex-conecta-rastreio-whatsapp-texto) !important;
    font-size: var(--solex-conecta-rastreio-whatsapp-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-forte) !important;
    line-height: var(--solex-conecta-rastreio-linha-curta) !important;
    text-align: center !important;
    text-decoration: none !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-whatsapp) !important;
    border-radius: var(--solex-conecta-rastreio-raio-botao) !important;
    background: var(--solex-conecta-rastreio-whatsapp) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-whatsapp) !important;
    transition: transform var(--solex-conecta-rastreio-duracao) ease, box-shadow var(--solex-conecta-rastreio-duracao) ease !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-whatsapp-btn:hover {
    color: var(--solex-conecta-rastreio-whatsapp-texto) !important;
    text-decoration: none !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-whatsapp-mouse) !important;
    transform: translateY(var(--solex-conecta-rastreio-subida)) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-whatsapp-btn i {
    color: inherit !important;
    font-size: var(--solex-conecta-rastreio-whatsapp-icone-fonte) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro {
    display: grid !important;
    justify-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-erro) !important;
    padding: var(--solex-conecta-rastreio-respiro-erro) !important;
    text-align: center !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-erro-borda) !important;
    border-radius: var(--solex-conecta-rastreio-raio-erro) !important;
    background: var(--solex-conecta-rastreio-erro-fundo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-icon {
    color: var(--solex-conecta-rastreio-erro-texto) !important;
    font-size: var(--solex-conecta-rastreio-erro-icone-fonte) !important;
    line-height: var(--solex-conecta-rastreio-linha-icone) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-title {
    color: var(--solex-conecta-rastreio-erro-texto) !important;
    font-size: var(--solex-conecta-rastreio-erro-titulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-forte) !important;
    line-height: var(--solex-conecta-rastreio-linha-rotulo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-text {
    color: var(--solex-conecta-rastreio-texto-erro) !important;
    font-size: var(--solex-conecta-rastreio-erro-texto-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-texto) !important;
    line-height: var(--solex-conecta-rastreio-linha-texto) !important;
    overflow-wrap: anywhere !important;
}

/* A dica fica na superfície dentro do quadro do erro, com o ícone num círculo da cor de
   ação. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-dica {
    width: 100% !important;
    margin: var(--solex-conecta-rastreio-margem-dica) !important;
    padding: var(--solex-conecta-rastreio-respiro-dica) !important;
    text-align: left !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-borda) !important;
    border-radius: var(--solex-conecta-rastreio-raio-dica) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-dica-title {
    display: flex !important;
    align-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-dica-titulo) !important;
    margin: var(--solex-conecta-rastreio-margem-dica-titulo) !important;
    color: var(--solex-conecta-rastreio-tinta) !important;
    font-size: var(--solex-conecta-rastreio-dica-titulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-forte) !important;
    line-height: var(--solex-conecta-rastreio-linha-media) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-dica-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--solex-conecta-rastreio-dica-icone) !important;
    height: var(--solex-conecta-rastreio-dica-icone) !important;
    color: var(--solex-conecta-rastreio-acao-texto) !important;
    font-size: var(--solex-conecta-rastreio-dica-icone-fonte) !important;
    border-radius: var(--solex-conecta-rastreio-raio-circulo) !important;
    background: var(--solex-conecta-rastreio-acao) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-dica-text {
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-dica-texto-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-texto) !important;
    line-height: var(--solex-conecta-rastreio-linha-nota) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-acoes {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: var(--solex-conecta-rastreio-margem-erro-acoes) !important;
}

/* Estado "consultando" e espera do pedido novo: bloco na superfície, com os pontos na
   cor da loja animados só por transform e opacity. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-carregando) !important;
    min-height: var(--solex-conecta-rastreio-carregando-altura) !important;
    padding: var(--solex-conecta-rastreio-respiro-carregando) !important;
    text-align: center !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-borda) !important;
    border-radius: var(--solex-conecta-rastreio-raio-erro) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-pontos {
    display: flex !important;
    gap: var(--solex-conecta-rastreio-vao-pontos) !important;
    margin: var(--solex-conecta-rastreio-margem-pontos) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-pontos b {
    display: block !important;
    width: var(--solex-conecta-rastreio-ponto) !important;
    height: var(--solex-conecta-rastreio-ponto) !important;
    border-radius: var(--solex-conecta-rastreio-raio-pilula) !important;
    background: var(--solex-conecta-rastreio-acao) !important;
    animation: solex-conecta-rastreio-pontos var(--solex-conecta-rastreio-pontos-tempo) ease-in-out infinite !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-pontos b:nth-child(2) {
    animation-delay: var(--solex-conecta-rastreio-ponto-atraso-2) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-pontos b:nth-child(3) {
    animation-delay: var(--solex-conecta-rastreio-ponto-atraso-3) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-titulo {
    color: var(--solex-conecta-rastreio-tinta) !important;
    font-size: var(--solex-conecta-rastreio-carregando-titulo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-forte) !important;
    line-height: var(--solex-conecta-rastreio-linha-media) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-texto {
    max-width: var(--solex-conecta-rastreio-carregando-texto-largura) !important;
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-carregando-texto-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-medio) !important;
    line-height: var(--solex-conecta-rastreio-linha-nota) !important;
}

@keyframes solex-conecta-rastreio-pontos {
    0%, 80%, 100% {
        transform: scale(var(--solex-conecta-rastreio-ponto-escala));
        opacity: var(--solex-conecta-rastreio-ponto-opacidade);
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes solex-conecta-rastreio-pulso {
    0% {
        transform: scale(var(--solex-conecta-rastreio-pulso-inicio));
        opacity: var(--solex-conecta-rastreio-pulso-opacidade);
    }
    100% {
        transform: scale(var(--solex-conecta-rastreio-pulso-fim));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #solex-conecta-rastreio-root .solex-conecta-rastreio-carregando-pontos b {
        animation: none !important;
        opacity: 1 !important;
    }

    #solex-conecta-rastreio-root .solex-conecta-rastreio-step.atual .solex-conecta-rastreio-step-icon::after {
        animation: none !important;
        opacity: var(--solex-conecta-rastreio-pulso-parado) !important;
        transform: none !important;
    }
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-busca {
    width: 100% !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-busca-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--solex-conecta-rastreio-vao-busca) !important;
    width: 100% !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-busca-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--solex-conecta-rastreio-campo-altura) !important;
    margin: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-campo) !important;
    color: var(--solex-conecta-rastreio-texto) !important;
    font-size: var(--solex-conecta-rastreio-campo-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-campo) !important;
    line-height: var(--solex-conecta-rastreio-linha-rotulo) !important;
    outline: none !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-borda-forte) !important;
    border-radius: var(--solex-conecta-rastreio-raio-campo) !important;
    background: var(--solex-conecta-rastreio-superficie) !important;
    box-shadow: none !important;
    transition: border-color var(--solex-conecta-rastreio-duracao) ease, box-shadow var(--solex-conecta-rastreio-duracao) ease !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-busca-input::placeholder {
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    opacity: 1 !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-busca-input:focus {
    border-color: var(--solex-conecta-rastreio-foco) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-campo-foco) !important;
}

/* "Tentar de novo" e "Buscar" são o mesmo botão: as duas ações principais da página. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-busca-btn,
#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--solex-conecta-rastreio-vao-botao) !important;
    min-height: var(--solex-conecta-rastreio-botao-altura) !important;
    margin: 0 !important;
    padding: var(--solex-conecta-rastreio-respiro-botao) !important;
    color: var(--solex-conecta-rastreio-acao-texto) !important;
    font-size: var(--solex-conecta-rastreio-botao-fonte) !important;
    font-weight: var(--solex-conecta-rastreio-peso-rotulo) !important;
    line-height: var(--solex-conecta-rastreio-linha-curta) !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    border: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-acao) !important;
    border-radius: var(--solex-conecta-rastreio-raio-campo) !important;
    background: var(--solex-conecta-rastreio-acao) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-botao) !important;
    transition: transform var(--solex-conecta-rastreio-duracao) ease, box-shadow var(--solex-conecta-rastreio-duracao) ease !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-busca-btn:hover,
#solex-conecta-rastreio-root .solex-conecta-rastreio-erro-btn:hover {
    color: var(--solex-conecta-rastreio-acao-texto) !important;
    box-shadow: var(--solex-conecta-rastreio-sombra-botao-mouse) !important;
    transform: translateY(var(--solex-conecta-rastreio-subida)) !important;
}

#solex-conecta-rastreio-root :where(.solex-conecta-rastreio-busca-input, .solex-conecta-rastreio-busca-btn, .solex-conecta-rastreio-erro-btn, .solex-conecta-rastreio-whatsapp-btn, .solex-conecta-rastreio-copiar, .solex-conecta-rastreio-dev-signature):focus-visible {
    outline: var(--solex-conecta-rastreio-foco-largura) solid var(--solex-conecta-rastreio-foco) !important;
    outline-offset: var(--solex-conecta-rastreio-foco-recuo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-footer {
    padding: var(--solex-conecta-rastreio-respiro-rodape-cartao) !important;
    text-align: center !important;
    border-top: var(--solex-conecta-rastreio-borda-largura) solid var(--solex-conecta-rastreio-borda) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-signature,
#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: var(--solex-conecta-rastreio-vao-assinatura) !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* O link da assinatura é alvo de toque: a altura mínima chega aos 40px, que as duas
   linhas dele sozinhas não alcançam. */
#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-signature {
    min-height: var(--solex-conecta-rastreio-alvo-toque) !important;
    color: var(--solex-conecta-rastreio-texto-suave) !important;
    font-size: var(--solex-conecta-rastreio-assinatura-fonte) !important;
    line-height: var(--solex-conecta-rastreio-linha-media) !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color var(--solex-conecta-rastreio-duracao) ease !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-label,
#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-name,
#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-name strong,
#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-contact {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: var(--solex-conecta-rastreio-peso-texto) !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-name strong {
    color: var(--solex-conecta-rastreio-tinta) !important;
    font-weight: var(--solex-conecta-rastreio-peso-rotulo) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-accent {
    display: block !important;
    flex-basis: 100% !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-contact {
    display: inline-flex !important;
    justify-content: center !important;
    flex-basis: 100% !important;
    margin-top: var(--solex-conecta-rastreio-margem-assinatura-contato) !important;
}

#solex-conecta-rastreio-root .solex-conecta-rastreio-dev-signature:hover {
    color: var(--solex-conecta-rastreio-tinta) !important;
    text-decoration: none !important;
}

@media (max-width: 949px) {
    #solex-conecta-rastreio-root,
    body.solex-conecta-rastreio-pagina {
        --solex-conecta-rastreio-respiro-pagina: 10px;
        --solex-conecta-rastreio-vao-cartao: 18px;
        --solex-conecta-rastreio-respiro-cartao: 20px;
        --solex-conecta-rastreio-raio-cartao: 22px;
        --solex-conecta-rastreio-logo-largura: min(180px, 70%);
        --solex-conecta-rastreio-logo-altura: 64px;
        --solex-conecta-rastreio-logo-icone: 56px;
        --solex-conecta-rastreio-logo-icone-fonte: 22px;
        --solex-conecta-rastreio-titulo-fonte: 1.45rem;
        --solex-conecta-rastreio-copiar-altura: var(--solex-conecta-rastreio-alvo-toque);
        --solex-conecta-rastreio-vao-status: 12px;
        --solex-conecta-rastreio-respiro-status: 16px;
        --solex-conecta-rastreio-raio-status: 18px;
        --solex-conecta-rastreio-status-icone: 46px;
        --solex-conecta-rastreio-status-icone-fonte: 1.3rem;
        /* 16px no campo, para o Safari do iPhone não ampliar a tela ao focar. */
        --solex-conecta-rastreio-campo-fonte: 16px;
        --solex-conecta-rastreio-respiro-erro: 16px;
        --solex-conecta-rastreio-raio-erro: 18px;
        --solex-conecta-rastreio-respiro-carregando: 16px;
        --solex-conecta-rastreio-respiro-rodape-cartao: 14px 0 0;
    }

    body.solex-conecta-rastreio-pagina {
        align-items: flex-start !important;
    }

    #solex-conecta-rastreio-root .solex-conecta-rastreio-container {
        width: 100% !important;
        margin: var(--solex-conecta-rastreio-respiro-pagina) auto !important;
    }

    #solex-conecta-rastreio-root .solex-conecta-rastreio-busca-form {
        grid-template-columns: 1fr !important;
    }

    #solex-conecta-rastreio-root .solex-conecta-rastreio-busca-btn,
    #solex-conecta-rastreio-root .solex-conecta-rastreio-erro-btn,
    #solex-conecta-rastreio-root .solex-conecta-rastreio-whatsapp-btn {
        width: 100% !important;
    }
}