/* Acceso y cambio de contraseña · usa las variables de app.css */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(320px, 44%) 1fr;
    background: var(--bg);
}

/* Panel de marca */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
    padding: 48px 56px;
    background: var(--brand-2);
    color: var(--brand-2-ink);
    overflow: hidden;
}
.auth-brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--brand-accent);
    opacity: .14;
    pointer-events: none;
}
.auth-logo img { display: block; height: 52px; width: auto; max-width: 240px; object-fit: contain; }
.auth-logo .auth-wordmark { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.auth-logo.has-logo .auth-wordmark { display: none; }
.auth-pitch { position: relative; z-index: 1; max-width: 420px; }
.auth-pitch strong { display: block; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.auth-pitch p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; opacity: .78; }
.auth-legal { position: relative; z-index: 1; font-size: 12px; opacity: .6; }

/* Formulario */
.auth-main {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px 24px;
}
.auth-theme { position: absolute; top: 16px; right: 16px; }
.auth-card { width: min(400px, 100%); }
.auth-card h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.auth-card > p { margin: 6px 0 24px; color: var(--text-3); font-size: 14px; }
.auth-form { display: grid; gap: 16px; }
.auth-form .ui-btn { margin-top: 6px; }
.auth-message {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--red-fg) 25%, transparent);
    background: color-mix(in srgb, var(--red-fg) 8%, transparent);
    color: var(--red-fg);
    font-size: 13.5px;
    line-height: 1.45;
}
.auth-message.success {
    border-color: color-mix(in srgb, var(--green-fg) 25%, transparent);
    background: color-mix(in srgb, var(--green-fg) 8%, transparent);
    color: var(--green-fg);
}
.auth-message[hidden] { display: none; }
.auth-foot {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-3);
    font-size: 12.5px;
}
.auth-foot a, .auth-foot button {
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.auth-foot a:hover, .auth-foot button:hover { text-decoration: underline; }
.auth-foot form { display: inline; }
.auth-secure { display: inline-flex; align-items: center; gap: 6px; }
.auth-secure svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
    .auth-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-brand { padding: 20px 24px; gap: 0; flex-direction: row; align-items: center; }
    .auth-brand::after, .auth-pitch, .auth-legal { display: none; }
    .auth-logo img { height: 36px; }
    .auth-main { place-items: start center; padding: 32px 20px 40px; }
    .auth-theme { top: -56px; right: 14px; }
    .auth-theme .ui-icon-btn { color: var(--brand-2-ink); }
}