/* MOB-03 / AUTH-FOOTER V2 — contrato medido a partir da APK 460 e das
 * capturas Android reais: CTA perto do rodapé, rodapé alinhado pela
 * borda SEGURA (não pelo espaço invisível reservado a outras telas).
 * O PIN numérico e o tutorial em bottom-sheet não pertencem a este layout.
 */
:root {
 --dm2-auth-primary-height:52px;
 --dm2-auth-secondary-height:48px;
 --dm2-auth-actions-gap:6px;
 --dm2-auth-bottom-gap:8px;
 --dm2-auth-cta-ground:calc(
   var(--dm2-auth-secondary-height) + var(--dm2-auth-actions-gap) + var(--dm2-auth-bottom-gap)
 );
}
.dm2-auth-screen {min-width:0;min-height:0;overflow:hidden;}
.dm2-auth-screen > .dm2-auth-footer {
 box-sizing:border-box !important;position:absolute !important;
 inset:auto 0 calc(var(--dm2-auth-cta-ground) + var(--sab)) !important;
 width:100% !important;margin:0 !important;padding:0 2rem !important;
 display:flex !important;flex-direction:column !important;
 align-items:center !important;justify-content:flex-end !important;
 gap:8px !important;flex:0 0 auto !important;z-index:20 !important;
 transform:none !important;animation:none !important;transition:none !important;
 opacity:1 !important;visibility:visible !important;
}
html.dm2-native-android :is(#view-login,#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .dm2-auth-footer {
 /* O phone-wrapper Android JÁ está dentro da área segura. */
 bottom:var(--dm2-auth-cta-ground) !important;
 padding:0 2rem !important;
}
.dm2-auth-footer > .dm2-auth-primary {
 box-sizing:border-box !important;display:flex !important;
 align-items:center !important;justify-content:center !important;
 flex:0 0 auto !important;width:100% !important;max-width:320px !important;
 min-height:var(--dm2-auth-primary-height) !important;
 padding:11px 20px !important;margin:0 !important;line-height:1.4 !important;
 text-align:center;touch-action:manipulation;
}
.dm2-auth-footer > .dm2-auth-secondary {
 box-sizing:border-box !important;min-height:48px !important;
 width:100% !important;max-width:320px !important;
 display:flex !important;align-items:center !important;
 justify-content:center !important;text-align:center;
 line-height:1.3 !important;touch-action:manipulation;
}
.dm2-auth-footer > #btn-biometric-signup-skip.dm2-auth-secondary {
 position:absolute !important;
 left:0;right:0;top:calc(100% + var(--dm2-auth-actions-gap));
 width:calc(100% - 4rem) !important;
 max-width:320px !important;height:var(--dm2-auth-secondary-height) !important;
 min-height:var(--dm2-auth-secondary-height) !important;
 margin:0 auto !important;padding:0 10px !important;
 flex:0 0 auto !important;z-index:20;
}
/* Marca no mesmo lugar da primeira tela: não deve levantar o CTA. */
#view-login > .dm2-auth-brand {
 position:absolute !important;left:0;right:0;
 bottom:calc(10px + var(--sab)) !important;
 height:18px !important;min-height:18px !important;
 margin:0 !important;padding:0 !important;line-height:18px !important;
 text-align:center !important;z-index:10;
}
html.dm2-native-android #view-login > .dm2-auth-brand {
 bottom:10px !important;
}
/* Com teclado, a WebView redimensiona: manter o MESMO contrato dentro
 * da área útil, sem somar a altura do teclado nem deixar um segundo footer
 * em fluxo; ocultar apenas a assinatura decorativa da tela inicial. */
html.dm2-native-android body.dm2-keyboard-open :is(#view-login,#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .dm2-auth-footer {
 position:absolute !important;inset:auto 0 var(--dm2-auth-cta-ground) !important;
 width:100% !important;margin:0 !important;padding:0 2rem !important;
 transform:none !important;gap:8px !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-login > .dm2-auth-brand {
 display:none !important;
}
/* OTP / teclado: a versão anterior empilhava ícone, título, campo e ajuda
 * no alto porque forçava justify-content:flex-start e reduzia tudo.
 * O topo mantém respiro e o painel utiliza o espaço livre até o CTA;
 * em telas realmente pequenas, somente esse painel rola.
 */
html.dm2-native-android body.dm2-keyboard-open #view-otp.dm2-auth-screen {
 padding-top:20px !important;
 padding-bottom:132px !important;
 justify-content:flex-start !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-brand-block {
 flex:0 0 auto !important;
 margin-top:clamp(8px,8vh,42px) !important;
 margin-bottom:0 !important;transform:none !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-code-panel {
 flex:1 1 auto !important;min-height:0 !important;
 padding:8px 0 12px !important;margin:0 !important;
 display:flex !important;flex-direction:column !important;
 justify-content:center !important;gap:12px !important;
 overflow-y:auto !important;overscroll-behavior:contain !important;
 scroll-padding:12px !important;transform:none !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-code-panel > #input-otp-code,
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-code-panel > #resend-otp-wrapper {
 flex:0 0 auto !important;
}
@media (max-height:450px) {
 html.dm2-native-android body.dm2-keyboard-open #view-otp.dm2-auth-screen {
  padding-top:8px !important;padding-bottom:128px !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-brand-block {
  margin-top:8px !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-code-panel {
  justify-content:flex-start !important;overflow-y:auto !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-email-signup > div:first-of-type > div:first-child {
  display:none !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-email-signup > div:first-of-type {
  margin-top:2px !important;
 }
}
/* Acessibilidade: não animar a âncora dos botões quando a tela abre. */
@media (prefers-reduced-motion:reduce) {
 .dm2-auth-footer,.dm2-auth-footer .dm2-auth-primary {animation:none !important;transition:none !important;}
}
/* O onboarding mantém um override legado de maior especificidade que
 * mudava o footer para position:relative com teclado: invalidá-lo em V2. */
html.dm2-native-android body.dm2-keyboard-open #view-onboarding > div.dm2-auth-footer:last-of-type {
 position:absolute !important;
 inset:auto 0 var(--dm2-auth-cta-ground) !important;
 width:100% !important;margin:0 !important;padding:0 2rem !important;
 transform:none !important;flex:0 0 auto !important;
}
/* 116px reservados à ação, deixando o centro do formulário respirar. */
@media (min-height:451px) {
 html.dm2-native-android body.dm2-keyboard-open #view-otp.dm2-auth-screen {
  padding-bottom:116px !important;
 }
}
/* MOB-03 / Header & Footer V3 — mesma estrutura para TERMOS, CÓDIGO,
 * APELIDO, BIOMETRIA; a home de acesso conserva a marca/gráfico próprios.
 * A ação secundária da biometria fica junto ao texto explicativo, sem
 * obrigar o botão principal a ficar alto nas demais telas.
 */
:root { --dm2-auth-cta-ground:38px; --dm2-auth-icon-size:56px; }
html.dm2-native-android :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .dm2-auth-heading {
 box-sizing:border-box !important;
 margin-top:3.5rem !important;
 width:100% !important;flex:0 0 auto !important;
 text-align:center !important;transform:none !important;
}
html.dm2-native-android .dm2-auth-heading > .dm2-auth-heading-icon {
 box-sizing:border-box !important;
 width:var(--dm2-auth-icon-size) !important;
 height:var(--dm2-auth-icon-size) !important;
 min-height:var(--dm2-auth-icon-size) !important;
 margin:0 auto 1rem !important;
 border-radius:50% !important;
 display:flex !important;align-items:center !important;
 justify-content:center !important;
}
html.dm2-native-android .dm2-auth-heading > .dm2-auth-heading-icon svg {
 width:28px !important;height:28px !important;
}
html.dm2-native-android #view-biometric-signup .dm2-auth-heading > #btn-biometric-signup-skip {
 box-sizing:border-box !important;position:relative !important;
 inset:auto !important;display:flex !important;
 width:100% !important;max-width:320px !important;
 min-height:48px !important;height:48px !important;
 margin:12px auto 0 !important;padding:0 10px !important;
 font-size:13px !important;line-height:1.3 !important;
 align-items:center !important;justify-content:center !important;
 touch-action:manipulation;
}
/* No Android com teclado, os quatro cabeçalhos começam em uma
 * coordenada comum, sem amontoar o código na altura do botão Voltar.
 * Quando o teclado deixa pouquíssima altura, só o conteúdo central rola.
 */
html.dm2-native-android body.dm2-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup).dm2-auth-screen {
 padding-top:20px !important;
}
html.dm2-native-android body.dm2-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .dm2-auth-heading {
 margin-top:3.5rem !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp .dm2-auth-heading > .dm2-auth-heading-icon {
 width:44px !important;height:44px !important;min-height:44px !important;
 margin-bottom:10px !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp .dm2-auth-heading > .dm2-auth-heading-icon svg {
 width:23px !important;height:23px !important;
}
/* A ajuda extensa é dispensável enquanto se digita; volta ao fechar
 * o teclado. O reenvio e seu contador permanecem sempre visíveis. */
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-delivery-help {
 display:none !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-code-panel {
 gap:12px !important;padding:12px 0 !important;
 justify-content:center !important;
}
@media (max-height:450px) {
 html.dm2-native-android body.dm2-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .dm2-auth-heading {
  margin-top:12px !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-code-panel {
  justify-content:flex-start !important;
 }
}
/* Ajustes finais por especificidade: #otp-brand-block e o primeiro div do
 * apelido tinham regras antigas individuais que anulavam a âncora comum. */
html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-brand-block.dm2-auth-heading,
html.dm2-native-android body.dm2-keyboard-open #view-onboarding > div.dm2-auth-heading:first-of-type {
 margin-top:3.5rem !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp .dm2-auth-heading > .dm2-auth-heading-icon {
 width:56px !important;height:56px !important;min-height:56px !important;
 margin-bottom:10px !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-otp .dm2-auth-heading > .dm2-auth-heading-icon svg {
 width:28px !important;height:28px !important;
}
@media (max-height:450px) {
 html.dm2-native-android body.dm2-keyboard-open #view-otp #otp-brand-block.dm2-auth-heading,
 html.dm2-native-android body.dm2-keyboard-open #view-onboarding > div.dm2-auth-heading:first-of-type {
  margin-top:12px !important;
 }
}
/* Menor viewport: mesmo ícone nas quatro telas. Reduzir todos a 44px
 * é melhor que esconder só o ícone de Termos, como fazia o legado. */
@media (max-height:450px) {
 html.dm2-native-android body.dm2-keyboard-open #view-email-signup > div.dm2-auth-heading:first-of-type > .dm2-auth-heading-icon {
  display:flex !important;
 }
 html.dm2-native-android body.dm2-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) .dm2-auth-heading-icon {
  width:44px !important;height:44px !important;min-height:44px !important;
  margin-bottom:8px !important;
 }
 html.dm2-native-android body.dm2-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) .dm2-auth-heading-icon svg {
  width:22px !important;height:22px !important;
 }
}
@media (max-height:450px) {
 html.dm2-native-android body.dm2-keyboard-open #view-email-signup > div.dm2-auth-heading:first-of-type {
  margin-top:12px !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-otp .dm2-auth-heading > .dm2-auth-heading-icon {
  width:44px !important;height:44px !important;min-height:44px !important;
  margin-bottom:8px !important;
 }
}
/* Campos em viewport com IME: separar fisicamente a área de preenchimento
 * do rodapé em vez de centralizar um flex com padding-bottom legado. */
html.dm2-native-android body.dm2-keyboard-open #view-onboarding > div:nth-of-type(2),
html.dm2-native-android body.dm2-keyboard-open #view-email-signup > div:nth-of-type(2) {
 box-sizing:border-box !important;
 position:absolute !important;
 inset:max(175px,48%) 2rem 130px !important;
 display:flex !important;flex-direction:column !important;
 min-height:0 !important;height:auto !important;
 padding:0 !important;margin:0 !important;
 justify-content:center !important;align-items:center !important;
 overflow-y:auto !important;overscroll-behavior:contain !important;
}
@media (max-height:450px) {
 html.dm2-native-android body.dm2-keyboard-open #view-biometric-signup .dm2-auth-heading > p {
  line-height:1.2 !important;
 }
 html.dm2-native-android body.dm2-keyboard-open #view-biometric-signup .dm2-auth-heading > #btn-biometric-signup-skip {
  margin-top:0 !important;
 }
}
/* MOB-03 / apelido com teclado: o contêiner central tinha width:100% herdado
 * de w-full + inset horizontal de 2rem. CSS ignorava right e deslocava o
 * campo 32px para a direita. Ajustar só a largura do contêiner, não o fluxo. */
html.dm2-native-android body.dm2-keyboard-open #view-onboarding > div:nth-of-type(2) {
 width:auto !important;
 left:2rem !important;
 right:2rem !important;
 max-width:none !important;
}
html.dm2-native-android body.dm2-keyboard-open #view-onboarding #onboarding-name {
 box-sizing:border-box !important;
 width:100% !important;
 max-width:320px !important;
 min-width:0 !important;
}

/* DM²: mesma composição de digitação do Cash4DS, adaptada à marca verde. */
html.dm2-native-android body.dm2-keyboard-open #view-login {
    padding-top: 3rem !important;
    padding-bottom: 0.4rem !important;
    justify-content: flex-start !important;
}
html.dm2-native-android #login-brand-block,
html.dm2-native-android #login-brand-block h1,
html.dm2-native-android #login-brand-block p,
html.dm2-native-android #login-graphic,
html.dm2-native-android #login-access-panel {
    transition: opacity 140ms ease, transform 150ms ease, max-height 150ms ease, margin 150ms ease, padding 150ms ease !important;
}
html.dm2-native-android body.dm2-keyboard-open #login-brand-block {
    margin-top: 2rem !important;
    transform: translateY(0) !important;
}
html.dm2-native-android body.dm2-keyboard-open #login-brand-block h1 {
    font-size: 3rem !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem !important;
}
html.dm2-native-android body.dm2-keyboard-open #login-brand-block p {
    font-size: 15px !important;
    line-height: 1.4 !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
}
html.dm2-native-android body.dm2-keyboard-open #login-graphic {
    display: none !important;
}
html.dm2-native-android body.dm2-keyboard-open #login-access-panel {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.35rem !important;
    gap: 0.45rem !important;
    transform: none !important;
}
html.dm2-native-android body.dm2-keyboard-open #login-access-panel #acesso-timer {
    min-height: 16px !important;
    font-size: 12px !important;
}
@media (prefers-reduced-motion: reduce) {
    html.dm2-native-android #login-brand-block,
    html.dm2-native-android #login-brand-block h1,
    html.dm2-native-android #login-brand-block p,
    html.dm2-native-android #login-graphic,
    html.dm2-native-android #login-access-panel {
        transition: none !important;
    }
}

/* Identidade verde somente no acesso/onboarding. */
:is(#view-splash,#view-login,#view-email-signup,#view-otp,#view-onboarding,#view-pin) .text-gradient-metallic {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--dm2-primary-ink) !important;
}
:is(#view-login,#view-email-signup,#view-otp,#view-onboarding,#view-pin) input:focus {
    border-color: var(--dm2-primary) !important;
    --tw-ring-color: var(--dm2-primary) !important;
}
#view-login #login-graphic { color: var(--dm2-primary); }