/* OTP-06: código único de 6 números, seis caixas com leitura centralizada. */
.dm2-otp-six {
    position:relative; box-sizing:border-box; width:100%; max-width:320px;
    margin-inline:auto; min-width:0; height:52px; flex:0 0 auto;
    border:0; background:transparent; isolation:isolate;
}
.dm2-otp-cells {
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
    gap:clamp(4px,1.8vw,8px); width:100%; height:100%; pointer-events:none;
}
.dm2-otp-slot {
    display:flex; align-items:center; justify-content:center; min-width:0;
    border:1.5px solid var(--dm2-border); border-radius:10px;
    background:#FFFFFF; color:var(--dm2-primary-ink); font-family:inherit;
    font-size:clamp(18px,5vw,23px); font-weight:700; line-height:1;
    font-variant-numeric:tabular-nums; transition:border-color 120ms ease,background-color 120ms ease;
}
.dm2-otp-slot.dm2-otp-filled {border-color:var(--dm2-primary); background:var(--dm2-surface-subtle); color:var(--dm2-primary-ink);}
.dm2-otp-six.dm2-otp-focused .dm2-otp-slot.dm2-otp-next {
    border-color:var(--dm2-primary); box-shadow:inset 0 0 0 0.5px var(--dm2-primary);
}
.dm2-otp-native-input, #input-otp-code.dm2-otp-native-input {
    position:absolute !important; inset:0 !important; z-index:1 !important;
    display:block !important; box-sizing:border-box !important;
    width:100% !important; max-width:none !important; height:100% !important;
    min-height:0 !important; margin:0 !important; padding:0 !important;
    border:0 !important; border-radius:0 !important; background:transparent !important;
    box-shadow:none !important; outline:none !important;
    font-size:16px !important; letter-spacing:normal !important;
    color:transparent !important; caret-color:transparent !important;
    opacity:0.015 !important; cursor:text; -webkit-appearance:none;
}
.dm2-otp-native-input:focus {outline:none !important;box-shadow:none !important;}
.dm2-otp-native-input::placeholder {color:transparent !important;}
html.dark .dm2-otp-slot, .dark .dm2-otp-slot {
    background:var(--dm2-surface); border-color:var(--dm2-border); color:var(--dm2-primary-ink);
}
html.dark .dm2-otp-slot.dm2-otp-filled, .dark .dm2-otp-slot.dm2-otp-filled {
    background:var(--dm2-surface-subtle); border-color:var(--dm2-primary); color:var(--dm2-primary-ink);
}
@media (max-width:340px) {
    .dm2-otp-six {height:46px;max-width:280px;}
    .dm2-otp-slot {border-radius:8px;}
}
@media (prefers-reduced-motion:reduce) {.dm2-otp-slot {transition:none;}}