/* ==========================================================
   SPOTTER - auth.css
   Login / Registro / Recuperación de contraseña
   ========================================================== */

.auth-page {
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    /* html/body ya no scrollean (ver app.css) — acá SÍ hace falta que
       esta página pueda desplazarse sola cuando el formulario es más
       alto que la pantalla (como el de registro con los checkboxes de
       servicios), sino queda contenido atrapado sin poder verse.
       'align-items: flex-start' (no 'center') es clave: si el contenido
       se centra y sobra alto, la mitad del sobrante queda ARRIBA del
       scroll (inalcanzable, porque scrollTop no puede ser negativo) —
       con flex-start todo el sobrante cae hacia abajo, que sí se puede
       scrollear normalmente. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-brand img { height: 42px; margin-bottom: 8px; }

.auth-brand-fallback {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
}

.auth-brand-fallback span { color: var(--primary); }

.auth-slogan {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 4px;
}

.auth-footer {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.checkbox-field input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.checkbox-field label {
    font-size: 13px;
    color: var(--text-secondary);
}

.dev-notice {
    background: var(--surface-elevated);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    word-break: break-all;
}

@media (min-width: 640px) {
    .auth-card { padding: 40px; }
}