.pm-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #EDF1F6;
}

.pm-auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.pm-auth__form-inner {
    width: 100%;
    max-width: 380px;
}

.pm-auth__aside {
    background: linear-gradient(160deg, #10243E, #0C1D31);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px;
}

.pm-auth__aside-inner {
    max-width: 420px;
}

.pm-auth__eyebrow {
    font-size: 13px;
    color: #3DD9A8;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.pm-auth__headline {
    font-family: var(--pm-font-title);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.8px;
    margin-bottom: 16px;
}

.pm-auth__lead {
    color: #9DB2C9;
    font-size: 16px;
    line-height: 1.6;
}

.pm-auth__stats {
    display: flex;
    gap: 26px;
    margin-top: 34px;
}

.pm-auth__stat-value {
    font-family: var(--pm-font-title);
    font-weight: 700;
    font-size: 24px;
}

.pm-auth__stat-label {
    font-size: 13px;
    color: #7E90A4;
}

.pm-auth__title {
    font-family: var(--pm-font-title);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -.6px;
    margin-bottom: 8px;
}

.pm-auth__subtitle {
    color: #5D6A7A;
    font-size: 15px;
    margin-bottom: 30px;
}

.pm-auth__error {
    color: #C0392B;
    margin-bottom: 12px;
}

.pm-auth__forgot {
    text-align: right;
    margin-bottom: 22px;
}

.pm-auth__forgot a {
    font-size: 13px;
    color: #5D6A7A;
}

.pm-auth__footer {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    color: #5D6A7A;
}

.pm-auth__footer a {
    font-weight: 600;
}

.pm-field {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #42556A;
    margin-bottom: 7px;
}

.pm-input {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid #DDE5EC;
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 18px;
    background: #fff;
}

/* No `outline: none` here, and no border-only focus state: a border-colour swap
   was ~1.9:1 against the resting border, which is not a focus indicator. The
   visible ring comes from the global :focus-visible rule in premonet.css; the
   border tint below is only a supporting cue. */
.pm-input:focus {
    border-color: #087C60;
}

/* Un solo campo para el código de 6 dígitos. Antes eran seis cajas de un carácter con
   un input oculto detrás: se veía bien pero era invisible para los gestores de
   contraseñas, que no tenían dónde escribir el TOTP. El espaciado grande conserva la
   sensación de "código" sin partir el campo en seis. */
.pm-otp-input {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .5em;
    /* Compensa el letter-spacing del último dígito, que si no descentra el texto. */
    text-indent: .5em;
    font-family: var(--pm-font-mono, ui-monospace, monospace);
}

.pm-otp-input::placeholder {
    color: #C7D2DC;
    letter-spacing: .5em;
}

.pm-btn-primary {
    width: 100%;
    background: #0BA47E;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 12px 26px -12px rgba(11, 164, 126, .7);
}

@media (max-width: 880px) {
    .pm-auth {
        grid-template-columns: 1fr;
    }

    .pm-auth__aside {
        display: none;
    }
}