/* ═══════════════ REDEFINIÇÃO DE SENHA V2 (telas de convidado) ═══════════════
   Layout: resources/views_v2/layout/autenticacao.blade.php
   Telas:  resources/views_v2/auth/senha/{solicitar,nova,redefinida,expirado}.blade.php
   JS:     public/js/v2/auth/senha.js (melhoria progressiva)

   As cores saem das variáveis --sn2-* do styles_v2.css quando existem. As variáveis
   locais (--sn2-senha-*) concentram todas as cores fixas; o modo escuro só troca as
   variáveis em `body.dark-mode .sn2-senha` (o override do dark-mode.css para --sn2-*
   vale apenas dentro de .sn2-app, que esta tela não usa). */

.sn2-senha {
    /* superfícies */
    --sn2-senha-fundo: var(--sn2-gray-20, #F5F5F7);
    --sn2-senha-card: var(--sn2-shell-surface, #FFFFFF);
    --sn2-senha-afundado: var(--sn2-bg-sunken, #F9FAFC);
    --sn2-senha-borda: var(--sn2-border-soft, #E4EAF2);
    --sn2-senha-sombra: var(--sn2-shadow-md, 0 4px 12px rgba(44, 62, 80, .08), 0 1px 3px rgba(44, 62, 80, .04));
    --sn2-senha-sombra-xs: var(--sn2-shadow-xs, 0 1px 2px rgba(44, 62, 80, .06));

    /* texto */
    --sn2-senha-tx-1: var(--sn2-fg-1, #2C3E50);
    --sn2-senha-tx-2: var(--sn2-fg-2, #5C6C80);
    --sn2-senha-tx-3: var(--sn2-fg-3, #737F9B);

    /* campos (placeholder um pouco mais escuro que --sn2-fg-4 para passar 4.5:1) */
    --sn2-senha-campo-fundo: #FFFFFF;
    --sn2-senha-campo-borda: var(--sn2-border-1, #D8E0EC);
    --sn2-senha-campo-ph: #66758A;

    /* marca / interação */
    --sn2-senha-realce: var(--sn2-accent, #0F7ADE);
    --sn2-senha-realce-hover: var(--sn2-accent-hover, #0B68C0);
    --sn2-senha-realce-sombra: var(--sn2-shadow-brand, 0 10px 30px rgba(15, 122, 222, .22));
    --sn2-senha-foco: var(--sn2-accent, #0F7ADE);
    --sn2-senha-anel: rgba(15, 122, 222, .16);
    --sn2-senha-anel-erro: rgba(221, 75, 107, .16);
    /* link mais escuro que --sn2-accent: 13,5px precisa de 4.5:1 (#0B68C0 = 5,59:1 sobre #FFF;
       #0F7ADE daria 4,32:1). Hover #084F92 = 8,26:1. */
    --sn2-senha-link: var(--sn2-accent-hover, #0B68C0);
    --sn2-senha-link-hover: #084F92;
    --sn2-senha-fantasma-hover: var(--sn2-gray-20, #F5F5F7);
    --sn2-senha-desabilitado: var(--sn2-gray-60, #C0CFE2);
    --sn2-senha-desabilitado-tx: #FFFFFF;

    /* cabeçalhos do card (gradiente suave até a cor do card) */
    --sn2-senha-cab-azul: var(--sn2-gray-40, #E7F3FE);
    --sn2-senha-cab-verde: var(--sn2-success-bg, #D8EFDF);
    --sn2-senha-cab-laranja: var(--sn2-orange-tint, #FFF2DE);
    --sn2-senha-cab-fim: var(--sn2-shell-surface, #FFFFFF);
    --sn2-senha-ic-fundo: #FFFFFF;
    --sn2-senha-ic-azul: var(--sn2-accent, #0F7ADE);
    --sn2-senha-ic-verde-fundo: var(--sn2-success-bg, #D8EFDF);

    /* estados (texto de erro mais escuro que --sn2-red: 12px precisa de 4.5:1) */
    --sn2-senha-ok: var(--sn2-success, #23AA58);
    --sn2-senha-ok-tx: var(--sn2-success-1, #156A34);
    --sn2-senha-ok-sombra: 0 10px 30px rgba(35, 170, 88, .24);
    --sn2-senha-erro: var(--sn2-red, #DD4B6B);
    --sn2-senha-erro-tx: #B42343;
    --sn2-senha-erro-fundo: var(--sn2-red-tint, #FCE7ED);
    --sn2-senha-alerta: #EF9A29;
    --sn2-senha-alerta-borda: #F5D9AE;

    /* medidor de força (mesmas cores do protótipo aprovado) */
    --sn2-senha-forca-vazio: var(--sn2-border-soft, #E4EAF2);
    --sn2-senha-forca-1: var(--sn2-red, #DD4B6B);
    --sn2-senha-forca-2: var(--sn2-orange, #FAAF3C);
    --sn2-senha-forca-3: var(--sn2-accent, #0F7ADE);
    --sn2-senha-forca-4: var(--sn2-success, #23AA58);
    --sn2-senha-forca-tx-0: var(--sn2-fg-2, #5C6C80);
    --sn2-senha-forca-tx-1: #B42343;
    --sn2-senha-forca-tx-2: #A85A0C;
    --sn2-senha-forca-tx-3: var(--sn2-accent-hover, #0B68C0);
    --sn2-senha-forca-tx-4: var(--sn2-success-1, #156A34);
    --sn2-senha-regra-pendente: var(--sn2-gray-60, #C0CFE2);

    --sn2-senha-fonte: var(--sn2-font-sans, 'DM Sans', 'Segoe UI', system-ui, sans-serif);
    --sn2-senha-fonte-titulo: var(--sn2-font-serif, 'Source Serif 4', Georgia, serif);
}

/* ── Modo escuro: só as variáveis (contraste AA conferido sobre #222F3B / #1A2530) ── */
body.dark-mode .sn2-senha {
    color-scheme: dark;

    --sn2-senha-fundo: #1A2530;
    --sn2-senha-card: #222F3B;
    --sn2-senha-afundado: #1B2632;
    --sn2-senha-borda: #34495E;
    --sn2-senha-sombra: 0 4px 12px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .2);
    --sn2-senha-sombra-xs: 0 1px 2px rgba(0, 0, 0, .3);

    --sn2-senha-tx-1: #EEF5FB;
    --sn2-senha-tx-2: #C0CFE2;
    --sn2-senha-tx-3: #A0AAB5;

    --sn2-senha-campo-fundo: #1A2530;
    --sn2-senha-campo-borda: #4A5C72;
    --sn2-senha-campo-ph: #8D9AAB;

    --sn2-senha-realce: #0F7ADE;
    --sn2-senha-realce-hover: #0B68C0;
    --sn2-senha-realce-sombra: 0 10px 30px rgba(15, 122, 222, .28);
    --sn2-senha-foco: #50CDF9;
    --sn2-senha-anel: rgba(80, 205, 249, .28);
    --sn2-senha-anel-erro: rgba(240, 108, 136, .28);
    --sn2-senha-link: #50CDF9;
    --sn2-senha-link-hover: #8FDDFB;
    --sn2-senha-fantasma-hover: #2C3E50;
    --sn2-senha-desabilitado: #34495E;
    --sn2-senha-desabilitado-tx: #A0AAB5;

    --sn2-senha-cab-azul: #173450;
    --sn2-senha-cab-verde: #173A28;
    --sn2-senha-cab-laranja: #3D2E16;
    --sn2-senha-cab-fim: #222F3B;
    --sn2-senha-ic-fundo: #1A2530;
    --sn2-senha-ic-azul: #50CDF9;
    --sn2-senha-ic-verde-fundo: #173A28;

    --sn2-senha-ok: #23AA58;
    --sn2-senha-ok-tx: #5BD08A;
    --sn2-senha-ok-sombra: 0 10px 30px rgba(35, 170, 88, .3);
    --sn2-senha-erro: #F06C88;
    --sn2-senha-erro-tx: #FF94AA;
    --sn2-senha-erro-fundo: rgba(221, 75, 107, .16);
    --sn2-senha-alerta: #F5B860;
    --sn2-senha-alerta-borda: #6B5130;

    --sn2-senha-forca-vazio: #34495E;
    --sn2-senha-forca-1: #F06C88;
    --sn2-senha-forca-2: #FAAF3C;
    --sn2-senha-forca-3: #57AEF5;
    --sn2-senha-forca-4: #3CC473;
    --sn2-senha-forca-tx-0: #C0CFE2;
    --sn2-senha-forca-tx-1: #FF94AA;
    --sn2-senha-forca-tx-2: #F5B860;
    --sn2-senha-forca-tx-3: #7CC0F7;
    --sn2-senha-forca-tx-4: #5BD08A;
    --sn2-senha-regra-pendente: #4A5C72;
}

/* ── Base ── */
body.sn2-senha-body {
    margin: 0;
    background: #F5F5F7;
}

body.dark-mode.sn2-senha-body {
    background: #1A2530;
}

.sn2-senha,
.sn2-senha *,
.sn2-senha *::before,
.sn2-senha *::after {
    box-sizing: border-box;
}

/* classes com display próprio não podem vencer o atributo hidden */
.sn2-senha [hidden] {
    display: none !important;
}

.sn2-senha {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: calc(40px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
    background: var(--sn2-senha-fundo);
    color: var(--sn2-senha-tx-1);
    font-family: var(--sn2-senha-fonte);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light;
    overflow-wrap: break-word;
}

/* etapa 3 (nova senha): o protótipo usa 24px entre logo, card e rodapé; as outras telas, 28px */
.sn2-senha.is-compacto {
    gap: 24px;
}

/* centraliza na vertical sem cortar o topo quando o conteúdo passa da altura da tela */
.sn2-senha > :first-child {
    margin-top: auto;
}

.sn2-senha > :last-child {
    margin-bottom: auto;
}

.sn2-senha svg {
    flex: none;
}

/* ── Logo ── */
.sn2-senha-marca {
    display: flex;
    justify-content: center;
}

.sn2-senha-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 100%;
}

.sn2-senha-logo.is-escura {
    display: none;
}

body.dark-mode .sn2-senha-logo.is-clara {
    display: none;
}

body.dark-mode .sn2-senha-logo.is-escura {
    display: block;
}

/* ── Card ── */
.sn2-senha-card {
    width: 100%;
    max-width: 460px;
    background: var(--sn2-senha-card);
    border: 1px solid var(--sn2-senha-borda);
    border-radius: var(--sn2-radius-lg, 16px);
    box-shadow: var(--sn2-senha-sombra);
    overflow: hidden;
}

.sn2-senha-cab {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, var(--sn2-senha-cab-azul) 0%, var(--sn2-senha-cab-fim) 100%);
    border-bottom: 1px solid var(--sn2-senha-borda);
}

.sn2-senha-cab.is-compacto {
    gap: 12px;
    padding: 24px 28px 20px;
}

.sn2-senha-cab.is-centro {
    align-items: center;
    text-align: center;
    padding: 32px 28px 24px;
}

.sn2-senha-cab.is-sucesso {
    background: linear-gradient(180deg, var(--sn2-senha-cab-verde) 0%, var(--sn2-senha-cab-fim) 100%);
}

.sn2-senha-cab.is-alerta {
    background: linear-gradient(180deg, var(--sn2-senha-cab-laranja) 0%, var(--sn2-senha-cab-fim) 100%);
}

.sn2-senha-cab-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.sn2-senha-cab-tx {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ícone do cabeçalho: quadrado branco 44px (padrão) */
.sn2-senha-ic {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--sn2-senha-ic-fundo);
    border: 1px solid var(--sn2-senha-borda);
    box-shadow: var(--sn2-senha-sombra-xs);
    color: var(--sn2-senha-ic-azul);
}

.sn2-senha-ic.is-verde {
    background: var(--sn2-senha-ic-verde-fundo);
    border-color: transparent;
    box-shadow: none;
    color: var(--sn2-senha-ok-tx);
}

.sn2-senha-ic.is-sucesso {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: none;
    background: var(--sn2-senha-ok);
    box-shadow: var(--sn2-senha-ok-sombra);
    color: #FFFFFF;
}

.sn2-senha-ic.is-alerta {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border-color: var(--sn2-senha-alerta-borda);
    box-shadow: none;
    color: var(--sn2-senha-alerta);
}

.sn2-senha-etapa {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sn2-senha-tx-2);
}

.sn2-senha-titulo {
    margin: 0;
    font-family: var(--sn2-senha-fonte-titulo);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sn2-senha-tx-1);
}

.sn2-senha-desc {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--sn2-senha-tx-2);
}

.sn2-senha-desc strong {
    font-weight: 600;
    color: var(--sn2-senha-tx-1);
    overflow-wrap: anywhere;
}

/* chip da conta (nova senha) */
.sn2-senha-conta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    background: var(--sn2-senha-card);
    border: 1px solid var(--sn2-senha-borda);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
    color: var(--sn2-senha-tx-1);
}

.sn2-senha-conta-av {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--sn2-senha-realce);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.sn2-senha-conta-tx {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Corpo ── */
.sn2-senha-corpo {
    margin: 0;
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sn2-senha-corpo.is-compacto {
    padding: 22px 28px 26px;
    gap: 18px;
}

.sn2-senha-corpo.is-sucesso {
    gap: 16px;
}

.sn2-senha-corpo.is-alerta {
    gap: 10px;
}

/* ── Campos ── */
.sn2-senha-campo-grupo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sn2-senha-rotulo {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    color: var(--sn2-senha-tx-1);
}

.sn2-senha-obrig {
    color: var(--sn2-senha-erro);
}

.sn2-senha-campo-caixa {
    position: relative;
}

.sn2-senha-campo-ic {
    position: absolute;
    left: 12px;
    top: 14px;
    color: var(--sn2-senha-tx-3);
    pointer-events: none;
}

.sn2-senha-campo {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--sn2-senha-campo-borda);
    border-radius: var(--sn2-radius-sm, 8px);
    background: var(--sn2-senha-campo-fundo);
    color: var(--sn2-senha-tx-1);
    font: 400 14px/20px var(--sn2-senha-fonte);
    letter-spacing: -0.01em;
    /* transparente (e não none): no modo de alto contraste do Windows o contorno reaparece */
    outline: 2px solid transparent;
    outline-offset: 0;
    -webkit-appearance: none;
    appearance: none;
}

.sn2-senha-campo::placeholder {
    color: var(--sn2-senha-campo-ph);
    opacity: 1;
}

.sn2-senha-campo.tem-ic {
    padding-left: 36px;
}

.sn2-senha-campo.tem-olho {
    padding-right: 48px;
}

.sn2-senha-campo:focus {
    border-color: var(--sn2-senha-foco);
    box-shadow: 0 0 0 3px var(--sn2-senha-anel);
}

/* estados depois do foco: a borda verde/vermelha continua visível com o campo focado */
.sn2-senha-campo.is-ok {
    border-color: var(--sn2-senha-ok);
}

.sn2-senha-campo.is-erro,
.sn2-senha-campo.is-invalido {
    border-color: var(--sn2-senha-erro);
}

.sn2-senha-campo.is-erro:focus,
.sn2-senha-campo.is-invalido:focus {
    box-shadow: 0 0 0 3px var(--sn2-senha-anel-erro);
}

/* autopreenchimento do navegador sem o fundo amarelo/azul por cima do tema */
.sn2-senha-campo:-webkit-autofill {
    -webkit-text-fill-color: var(--sn2-senha-tx-1);
    caret-color: var(--sn2-senha-tx-1);
    transition: background-color 600000s 0s, color 600000s 0s;
}

.sn2-senha-dica {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--sn2-senha-tx-2);
}

/* erro do servidor abaixo do campo (padrão .sn2-error da V2: 12px/600) */
.sn2-senha-erro {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--sn2-senha-erro-tx);
}

.sn2-senha-erro svg {
    margin-top: 1px;
}

.sn2-senha-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--sn2-senha-erro-fundo);
    color: var(--sn2-senha-erro-tx);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.sn2-senha-aviso svg {
    margin-top: 1px;
}

/* ── Botões e links ── */
.sn2-senha-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 13px 18px;
    border: none;
    border-radius: 10px;
    background: var(--sn2-senha-realce);
    color: #FFFFFF;
    font: 600 14px/20px var(--sn2-senha-fonte);
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--sn2-senha-realce-sombra);
    cursor: pointer;
}

.sn2-senha-btn:hover {
    background: var(--sn2-senha-realce-hover);
    color: #FFFFFF;
    text-decoration: none;
}

.sn2-senha-btn:disabled {
    background: var(--sn2-senha-desabilitado);
    color: var(--sn2-senha-desabilitado-tx);
    box-shadow: none;
    cursor: not-allowed;
}

/* enviando: continua azul (não parece "bloqueado"), só esmaece */
.sn2-senha-btn[aria-busy="true"]:disabled {
    background: var(--sn2-senha-realce);
    color: #FFFFFF;
    opacity: .75;
    cursor: progress;
}

.sn2-senha-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--sn2-senha-campo-borda);
    border-radius: 10px;
    background: var(--sn2-senha-card);
    color: var(--sn2-senha-tx-1);
    font: 600 13.5px/20px var(--sn2-senha-fonte);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: var(--sn2-senha-sombra-xs);
    cursor: pointer;
}

.sn2-senha-btn-sec:hover:not(:disabled) {
    background: var(--sn2-senha-fantasma-hover);
}

.sn2-senha-btn-sec:disabled {
    color: var(--sn2-senha-tx-3);
    background: var(--sn2-senha-afundado);
    box-shadow: none;
    cursor: default;
}

.sn2-senha-btn-sec[aria-busy="true"]:disabled {
    cursor: progress;
}

.sn2-senha-fantasma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px;
    border-radius: 10px;
    color: var(--sn2-senha-tx-2);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.sn2-senha-fantasma:hover {
    background: var(--sn2-senha-fantasma-hover);
    color: var(--sn2-senha-tx-1);
    text-decoration: none;
}

.sn2-senha-fantasma.is-bloco {
    display: flex;
    width: 100%;
    padding: 12px 18px;
}

.sn2-senha-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--sn2-senha-link);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.sn2-senha-link:hover {
    color: var(--sn2-senha-link-hover);
    text-decoration: underline;
}

.sn2-senha a:focus-visible,
.sn2-senha button:focus-visible {
    outline: 2px solid var(--sn2-senha-foco);
    outline-offset: 2px;
}

/* ── Rodapé do card ── */
.sn2-senha-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 12px 20px;
    background: var(--sn2-senha-afundado);
    border-top: 1px solid var(--sn2-senha-borda);
}

.sn2-senha-pe-nota {
    flex: 1 1 180px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sn2-senha-tx-2);
    text-align: right;
}

/* ── Rodapé da página ── */
.sn2-senha-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--sn2-senha-tx-2);
    text-align: center;
}

/* padding + margem negativa: área de toque de 44px sem empurrar o layout do rodapé */
.sn2-senha-rodape a {
    padding: 14px 0;
    margin: -14px 0;
    color: var(--sn2-senha-tx-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sn2-senha-rodape a:hover {
    color: var(--sn2-senha-tx-1);
}

/* ── Enviado (etapa 2) ── */
.sn2-senha-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--sn2-senha-tx-1);
}

.sn2-senha-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sn2-senha-lista strong {
    font-weight: 600;
}

.sn2-senha-lista-ic {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--sn2-senha-cab-azul);
    color: var(--sn2-senha-ic-azul);
}

.sn2-senha-lista-tx {
    min-width: 0;
    padding-top: 4px;
    overflow-wrap: anywhere;
}

.sn2-senha-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sn2-senha-acoes form {
    margin: 0;
}

/* ── Nova senha (etapa 3) ── */
.sn2-senha-olho {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sn2-senha-tx-2);
    cursor: pointer;
}

/* fundo do hover recuado: não cobre a borda do campo */
.sn2-senha-olho::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 6px;
    background: transparent;
}

.sn2-senha-olho:hover {
    color: var(--sn2-senha-tx-1);
}

.sn2-senha-olho:hover::before {
    background: var(--sn2-senha-fantasma-hover);
}

.sn2-senha-olho svg {
    position: relative;
}

.sn2-senha .sn2-senha-olho:focus-visible {
    outline-offset: -3px;
}

.sn2-senha-olho .is-ocultar,
.sn2-senha-olho[aria-pressed="true"] .is-mostrar {
    display: none;
}

.sn2-senha-olho[aria-pressed="true"] .is-ocultar {
    display: block;
}

.sn2-senha-forca {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.sn2-senha-forca-barra {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.sn2-senha-forca-barra span {
    height: 4px;
    border-radius: 999px;
    background: var(--sn2-senha-forca-vazio);
}

.sn2-senha-forca[data-nivel="1"] .is-on {
    background: var(--sn2-senha-forca-1);
}

.sn2-senha-forca[data-nivel="2"] .is-on {
    background: var(--sn2-senha-forca-2);
}

.sn2-senha-forca[data-nivel="3"] .is-on {
    background: var(--sn2-senha-forca-3);
}

.sn2-senha-forca[data-nivel="4"] .is-on {
    background: var(--sn2-senha-forca-4);
}

.sn2-senha-forca-tx {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--sn2-senha-tx-2);
}

.sn2-senha-forca-tx strong {
    font-weight: 600;
    color: var(--sn2-senha-forca-tx-0);
}

.sn2-senha-forca[data-nivel="1"] .sn2-senha-forca-tx strong {
    color: var(--sn2-senha-forca-tx-1);
}

.sn2-senha-forca[data-nivel="2"] .sn2-senha-forca-tx strong {
    color: var(--sn2-senha-forca-tx-2);
}

.sn2-senha-forca[data-nivel="3"] .sn2-senha-forca-tx strong {
    color: var(--sn2-senha-forca-tx-3);
}

.sn2-senha-forca[data-nivel="4"] .sn2-senha-forca-tx strong {
    color: var(--sn2-senha-forca-tx-4);
}

.sn2-senha-regras {
    margin: 0;
    padding: 12px 14px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 18px;
    background: var(--sn2-senha-afundado);
    border: 1px solid var(--sn2-senha-borda);
    border-radius: 12px;
}

.sn2-senha-regras li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sn2-senha-tx-2);
}

.sn2-senha-regras li.is-ok {
    color: var(--sn2-senha-ok-tx);
}

.sn2-senha-regra-marca {
    flex: none;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--sn2-senha-regra-pendente);
    color: #FFFFFF;
}

.sn2-senha-regra-marca svg {
    opacity: 0;
}

.sn2-senha-regras li.is-ok .sn2-senha-regra-marca {
    background: var(--sn2-senha-ok);
}

.sn2-senha-regras li.is-ok .sn2-senha-regra-marca svg {
    opacity: 1;
}

.sn2-senha-conf-msg {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.sn2-senha-conf-msg:empty {
    margin-top: 0;
}

.sn2-senha-conf-msg.is-ok {
    color: var(--sn2-senha-ok-tx);
}

.sn2-senha-conf-msg.is-erro {
    color: var(--sn2-senha-erro-tx);
}

/* ── Redefinida ── */
.sn2-senha-nota {
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sn2-senha-tx-2);
}

.sn2-senha-nota strong {
    font-weight: 600;
    color: var(--sn2-senha-tx-1);
}

/* só para leitor de tela */
.sn2-senha-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .sn2-senha-campo {
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    }

    .sn2-senha-btn,
    .sn2-senha-btn-sec,
    .sn2-senha-fantasma,
    .sn2-senha-link,
    .sn2-senha-olho::before {
        transition: background-color 120ms ease-out, color 120ms ease-out;
    }

    .sn2-senha-forca-barra span,
    .sn2-senha-regra-marca {
        transition: background-color 200ms ease-out;
    }
}

/* ── Telas estreitas: card 100% com 16px de margem, sem rolagem horizontal ── */
@media (max-width: 520px) {
    .sn2-senha {
        gap: 24px;
        padding: calc(28px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    }

    .sn2-senha-cab,
    .sn2-senha-cab.is-compacto {
        padding: 22px 20px 18px;
    }

    .sn2-senha-cab.is-centro {
        padding: 28px 20px 22px;
    }

    .sn2-senha-corpo,
    .sn2-senha-corpo.is-compacto {
        padding: 20px 20px 24px;
    }

    /* 16px no celular: abaixo disso o Safari do iPhone dá zoom na página ao focar o campo */
    .sn2-senha-campo {
        font-size: 16px;
    }

    .sn2-senha-pe {
        padding: 10px 14px;
    }

    .sn2-senha-pe-nota {
        flex-basis: 100%;
        padding: 0 10px 6px;
        text-align: left;
    }

    .sn2-senha-titulo {
        font-size: 22px;
        line-height: 30px;
    }

    /* © numa linha, os dois links na de baixo (sem "·" sobrando no fim da linha) */
    .sn2-senha-rodape-copia {
        flex-basis: 100%;
    }

    .sn2-senha-rodape-copia + [aria-hidden="true"] {
        display: none;
    }
}

/* ═══ Modo escuro — disputas com o dark-mode.css legado ═══
   O legado pinta TODO <a> fora de .btn com #E8E8E8 !important (especificidade 0,7,2), todo
   input de texto/senha com fundo #2C3E50 !important e todo <p> com #EEF5FB. O id da raiz
   (#sn2-senha) vence essas regras sem precisar mexer no arquivo legado. */
body.dark-mode #sn2-senha a.sn2-senha-btn,
body.dark-mode #sn2-senha a.sn2-senha-btn:hover {
    color: #FFFFFF !important;
}

body.dark-mode #sn2-senha a.sn2-senha-fantasma {
    color: var(--sn2-senha-tx-2) !important;
}

body.dark-mode #sn2-senha a.sn2-senha-fantasma:hover {
    color: var(--sn2-senha-tx-1) !important;
}

body.dark-mode #sn2-senha a.sn2-senha-link {
    color: var(--sn2-senha-link) !important;
}

body.dark-mode #sn2-senha a.sn2-senha-link:hover {
    color: var(--sn2-senha-link-hover) !important;
}

body.dark-mode #sn2-senha .sn2-senha-rodape a {
    color: var(--sn2-senha-tx-2) !important;
}

body.dark-mode #sn2-senha .sn2-senha-rodape a:hover {
    color: var(--sn2-senha-tx-1) !important;
}

body.dark-mode #sn2-senha .sn2-senha-campo {
    background-color: var(--sn2-senha-campo-fundo) !important;
    border-color: var(--sn2-senha-campo-borda) !important;
    color: var(--sn2-senha-tx-1) !important;
}

body.dark-mode #sn2-senha .sn2-senha-campo:focus {
    border-color: var(--sn2-senha-foco) !important;
}

body.dark-mode #sn2-senha .sn2-senha-campo.is-ok {
    border-color: var(--sn2-senha-ok) !important;
}

body.dark-mode #sn2-senha .sn2-senha-campo.is-erro,
body.dark-mode #sn2-senha .sn2-senha-campo.is-invalido {
    border-color: var(--sn2-senha-erro) !important;
}

body.dark-mode #sn2-senha .sn2-senha-desc,
body.dark-mode #sn2-senha .sn2-senha-nota {
    color: var(--sn2-senha-tx-2);
}

body.dark-mode #sn2-senha .sn2-senha-rotulo {
    color: var(--sn2-senha-tx-1) !important;
}