/*
 * O botão do tema do visitante, onde ele flutua no canto (login, troca de
 * senha, cadastro de cliente, Tutoriais e as páginas do layout público da
 * igreja, como o cadastro de membro e a verificação de documento), e os
 * ícones dos três estados, para as páginas que não trazem a regra deles.
 *
 * Pedido do dono, 01/10/2026 (FEATURE-037, §16). Mora em `public/assets`
 * para não pedir build.
 */

/* O ícone mostra o estado ATUAL: sol no claro, lua no escuro e meio-círculo
   no automático. Os três estão no HTML; o CSS escolhe pela preferência. */
.tema-icone-claro,
.tema-icone-escuro,
.tema-icone-sistema {
    display: none;
}

[data-tema-preferido="claro"] .tema-icone-claro,
[data-tema-preferido="escuro"] .tema-icone-escuro,
[data-tema-preferido="sistema"] .tema-icone-sistema {
    display: inline-block;
}

/* Sem a barra do sistema, ele flutua no canto, com fundo próprio para ser
   visto sobre o degradê do login. */
.botao-tema-visitante {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1030;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* Fora do login, o botão fica numa faixa no alto da página, no fluxo: no
   layout público da igreja (cadastro de membro, escala, verificação) e nas
   páginas do sistema sem barra (termos, cadastro de cliente) o conteúdo
   começa colado no topo, e flutuando ele cobria título, botão e etapa. */
.faixa-tema-visitante {
    display: flex;
    justify-content: flex-end;
    padding: 12px 12px 0;
}

.faixa-tema-visitante .botao-tema-visitante {
    position: static;
}