/* ============================================================
   AUTH PREMIUM — Rediseño mobile-first profesional
   Carga DESPUÉS de public.css para sobrescribir los estilos base.
   Contempla: web móvil, web desktop, PWA standalone (nativo).
   ============================================================ */

/* =================================================
   0 · VARIABLES ESPECÍFICAS DE AUTH
   ================================================= */
body.is-public-page.auth-page {
    /* Paleta enriquecida — acentos para UX premium */
    --auth-primary: #15ab92;
    --auth-primary-dark: #0e8a76;
    --auth-primary-light: #d1faf1;
    --auth-primary-glow: rgba(21, 171, 146, 0.22);
    --auth-bg: #f7fafc;
    --auth-card: #ffffff;
    --auth-ink: #0f172a;
    --auth-ink-2: #334155;
    --auth-muted: #64748b;
    --auth-muted-2: #94a3b8;
    --auth-border: #e2e8f0;
    --auth-border-strong: #cbd5e1;
    --auth-error: #dc2626;
    --auth-error-bg: #fef2f2;
    --auth-success: #059669;
    --auth-success-bg: #ecfdf5;
    --auth-warn: #d97706;
    --auth-warn-bg: #fffbeb;
    --auth-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --auth-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --auth-shadow-lg: 0 20px 40px -16px rgba(15, 23, 42, 0.14), 0 4px 14px rgba(15, 23, 42, 0.05);
    --auth-shadow-primary: 0 10px 30px -8px rgba(21, 171, 146, 0.45);
    --auth-radius: 16px;
    --auth-radius-sm: 12px;
    --auth-radius-xs: 10px;
}

/* Fuente del sistema para que todo el panel auth sienta "nativo de app" en móvil */
body.is-public-page.auth-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Inter', 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =================================================
   1 · BACKGROUND — Gradient mesh sutil
   ================================================= */
body.is-public-page.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 8%, rgba(21, 171, 146, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 92%, rgba(21, 171, 146, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(14, 138, 118, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #f7fafc 0%, #ffffff 50%, #f0fdf4 100%);
    background-attachment: fixed;
    pointer-events: none;
}

/* =================================================
   2 · SHELL — Contenedor centrado flexible
   ================================================= */
body.is-public-page.auth-page .auth-shell {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 3rem) 1rem clamp(2rem, 5vw, 3rem);
    background: transparent !important;
}

body.is-public-page.auth-page .auth-shell__inner {
    width: 100%;
    max-width: 440px;
    position: relative;
}
body.is-public-page.auth-page .auth-shell--wide .auth-shell__inner { max-width: 520px; }
body.is-public-page.auth-page .auth-shell--xwide .auth-shell__inner { max-width: 780px; }

/* =================================================
   3 · HEADER — Logo + títulos premium
   ================================================= */
body.is-public-page.auth-page .auth-head {
    text-align: center;
    margin-bottom: 1.5rem;
    animation: authFadeSlide 0.5s cubic-bezier(.16, 1, .3, 1);
}

body.is-public-page.auth-page .auth-head .ipsoo-marker,
body.is-public-page.auth-page .auth-head .auth-brand {
    display: none !important;
}

body.is-public-page.auth-page .auth-head h1 {
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: var(--auth-ink) !important;
    margin: 0 0 0.625rem !important;
}
body.is-public-page.auth-page .auth-head h1 em {
    font-style: normal !important;
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-weight: 800 !important;
}
body.is-public-page.auth-page .auth-head p {
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    color: var(--auth-muted) !important;
    line-height: 1.55 !important;
    margin: 0 auto !important;
    max-width: 360px;
}
body.is-public-page.auth-page .auth-head p strong {
    color: var(--auth-ink);
    font-weight: 600;
    word-break: break-word;
}
body.is-public-page.auth-page .auth-head p a,
body.is-public-page.auth-page .auth-head__link {
    color: var(--auth-primary-dark) !important;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid var(--auth-primary-light);
    padding-bottom: 1px;
    transition: border-color 0.15s ease;
}
body.is-public-page.auth-page .auth-head p a:hover,
body.is-public-page.auth-page .auth-head__link:hover {
    border-color: var(--auth-primary);
}

/* =================================================
   4 · CARD — Glassmorphism premium
   ================================================= */
body.is-public-page.auth-page .auth-card {
    background: var(--auth-card) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: var(--auth-radius) !important;
    box-shadow: var(--auth-shadow-lg) !important;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.75rem) clamp(1.5rem, 4vw, 2rem) !important;
    animation: authFadeScale 0.45s cubic-bezier(.16, 1, .3, 1) 0.05s both;
}

/* =================================================
   5 · FORM — Inputs premium con floating states
   ================================================= */
body.is-public-page.auth-page .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem !important;
}
body.is-public-page.auth-page .auth-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem !important;
}
@media (min-width: 480px) {
    body.is-public-page.auth-page .auth-form__row {
        grid-template-columns: repeat(2, 1fr);
    }
}
body.is-public-page.auth-page .auth-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem !important;
}

/* Label */
body.is-public-page.auth-page .auth-form__label {
    font-family: inherit !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    color: var(--auth-ink-2) !important;
    padding-left: 2px;
    margin: 0 !important;
}
body.is-public-page.auth-page .auth-form__label .req {
    color: var(--auth-error);
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    margin-left: 2px;
}
body.is-public-page.auth-page .auth-form__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
body.is-public-page.auth-page .auth-form__forgot {
    font-family: inherit !important;
    font-size: 12.5px !important;
    color: var(--auth-primary-dark) !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
body.is-public-page.auth-page .auth-form__forgot:hover {
    color: var(--auth-primary);
}

/* Input (los iOS zoom fix: mínimo 16px) */
body.is-public-page.auth-page .auth-form__input {
    width: 100%;
    padding: 0.875rem 1rem !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 500;
    color: var(--auth-ink) !important;
    background: #fafbfc !important;
    border: 1.5px solid var(--auth-border) !important;
    border-radius: var(--auth-radius-sm) !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-size-adjust: 100%;
}
body.is-public-page.auth-page .auth-form__input::placeholder {
    color: var(--auth-muted-2) !important;
    font-weight: 400;
}
body.is-public-page.auth-page .auth-form__input:hover:not(:focus) {
    border-color: var(--auth-border-strong) !important;
    background: #ffffff !important;
}
body.is-public-page.auth-page .auth-form__input:focus {
    outline: none !important;
    border-color: var(--auth-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px var(--auth-primary-glow) !important;
}
body.is-public-page.auth-page .auth-form__input:autofill,
body.is-public-page.auth-page .auth-form__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: var(--auth-ink) !important;
}

/* Input con prefix/suffix icon */
body.is-public-page.auth-page .auth-form__input-wrap {
    position: relative;
}
body.is-public-page.auth-page .auth-form__input-wrap .auth-form__input {
    padding-left: 2.75rem !important;
}
body.is-public-page.auth-page .auth-form__input-icon {
    position: absolute;
    left: 0.9375rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-muted-2);
    pointer-events: none;
    display: flex;
    align-items: center;
    transition: color 0.18s ease;
}
body.is-public-page.auth-page .auth-form__input:focus ~ .auth-form__input-icon,
body.is-public-page.auth-page .auth-form__input-wrap:focus-within .auth-form__input-icon {
    color: var(--auth-primary);
}

/* Password toggle button */
body.is-public-page.auth-page .auth-form__input-wrap .auth-pw-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--auth-muted);
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}
body.is-public-page.auth-page .auth-pw-toggle:hover {
    color: var(--auth-ink);
    background: var(--auth-bg);
}
body.is-public-page.auth-page .auth-form__input-wrap:has(.auth-pw-toggle) .auth-form__input {
    padding-right: 2.75rem !important;
}

/* Hints */
body.is-public-page.auth-page .auth-form__hint {
    font-family: inherit !important;
    font-size: 12px !important;
    color: var(--auth-muted) !important;
    padding-left: 2px;
    margin: 0 !important;
    line-height: 1.4;
}
body.is-public-page.auth-page .auth-form__hint--error {
    color: var(--auth-error) !important;
}

/* =================================================
   6 · CHECKBOX — Toggle-style premium
   ================================================= */
body.is-public-page.auth-page .auth-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 13.5px !important;
    color: var(--auth-ink-2) !important;
    line-height: 1.45 !important;
    padding: 0.375rem 0;
    user-select: none;
}
body.is-public-page.auth-page .auth-form__check-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
body.is-public-page.auth-page .auth-form__check-box {
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    margin-top: 1px;
    border: 1.5px solid var(--auth-border-strong) !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent !important;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
body.is-public-page.auth-page .auth-form__check:hover .auth-form__check-box {
    border-color: var(--auth-primary);
}
body.is-public-page.auth-page .auth-form__check-input:focus-visible + .auth-form__check-box {
    box-shadow: 0 0 0 4px var(--auth-primary-glow);
}
body.is-public-page.auth-page .auth-form__check-input:checked + .auth-form__check-box {
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-dark) 100%) !important;
    border-color: var(--auth-primary) !important;
    color: #ffffff !important;
    transform: scale(1);
}
body.is-public-page.auth-page .auth-form__check-text a {
    color: var(--auth-primary-dark) !important;
    border-bottom: 1.5px solid var(--auth-primary-light) !important;
    padding-bottom: 1px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
body.is-public-page.auth-page .auth-form__check-text a:hover {
    border-color: var(--auth-primary);
}

/* =================================================
   7 · BOTONES — Primary con gradient + microinteraction
   ================================================= */
body.is-public-page.auth-page .auth-form__submit,
body.is-public-page.auth-page .ipsoo-btn.auth-form__submit,
body.is-public-page.auth-page .ipsoo-btn--primary.auth-form__submit,
body.is-public-page.auth-page .verify-form__submit,
body.is-public-page.auth-page .reset-link__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    width: 100% !important;
    padding: 0.9375rem 1.25rem !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-dark) 100%) !important;
    border: none !important;
    border-radius: var(--auth-radius-sm) !important;
    box-shadow: var(--auth-shadow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    cursor: pointer;
    margin-top: 0.375rem !important;
    transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.15s ease !important;
    position: relative;
    overflow: hidden;
    min-height: 50px;
    text-decoration: none;
}
body.is-public-page.auth-page .auth-form__submit::before,
body.is-public-page.auth-page .verify-form__submit::before,
body.is-public-page.auth-page .reset-link__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.is-public-page.auth-page .auth-form__submit:hover,
body.is-public-page.auth-page .verify-form__submit:hover,
body.is-public-page.auth-page .reset-link__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px -10px rgba(21, 171, 146, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
body.is-public-page.auth-page .auth-form__submit:hover::before,
body.is-public-page.auth-page .verify-form__submit:hover::before,
body.is-public-page.auth-page .reset-link__cta:hover::before {
    opacity: 1;
}
body.is-public-page.auth-page .auth-form__submit:active,
body.is-public-page.auth-page .verify-form__submit:active,
body.is-public-page.auth-page .reset-link__cta:active {
    transform: translateY(0) scale(0.985);
}
body.is-public-page.auth-page .auth-form__submit svg,
body.is-public-page.auth-page .verify-form__submit svg {
    transition: transform 0.2s ease;
}
body.is-public-page.auth-page .auth-form__submit:hover svg {
    transform: translateX(2px);
}

/* Loading state */
body.is-public-page.auth-page .auth-form__submit.is-loading {
    pointer-events: none;
    opacity: 0.9;
}
body.is-public-page.auth-page .auth-form__submit.is-loading > * {
    opacity: 0;
}
body.is-public-page.auth-page .auth-form__submit.is-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: authSpin 0.7s linear infinite;
}

/* Secondary button */
body.is-public-page.auth-page .auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8125rem 1.25rem !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--auth-ink-2) !important;
    background: var(--auth-bg) !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: var(--auth-radius-sm) !important;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
    margin-top: 0.5rem;
}
body.is-public-page.auth-page .auth-secondary:hover {
    background: #eef2f6 !important;
    border-color: var(--auth-border-strong) !important;
    color: var(--auth-ink) !important;
}

/* =================================================
   8 · DIVIDER "o"
   ================================================= */
body.is-public-page.auth-page .auth-divider {
    display: flex;
    align-items: center;
    gap: 0.875rem !important;
    margin: 1.25rem 0 1rem !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--auth-muted-2) !important;
    font-weight: 600;
}
body.is-public-page.auth-page .auth-divider::before,
body.is-public-page.auth-page .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-border) !important;
}

/* =================================================
   9 · GOOGLE BUTTON — Premium OAuth
   ================================================= */
body.is-public-page.auth-page .auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.8125rem 1.25rem !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--auth-ink) !important;
    background: #ffffff !important;
    border: 1.5px solid var(--auth-border) !important;
    border-radius: var(--auth-radius-sm) !important;
    min-height: 50px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.18s ease;
    text-decoration: none !important;
}
body.is-public-page.auth-page .auth-google:hover {
    border-color: var(--auth-border-strong) !important;
    background: #fafbfc !important;
    box-shadow: var(--auth-shadow-sm);
}
body.is-public-page.auth-page .auth-google:active {
    transform: scale(0.985);
}

/* =================================================
   10 · ALERTS — Toast-style
   ================================================= */
body.is-public-page.auth-page .auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem !important;
    padding: 0.75rem 0.875rem !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    border: none !important;
    border-left: 3px solid currentColor !important;
    border-radius: var(--auth-radius-xs) !important;
    margin-bottom: 1rem !important;
    animation: authSlideDown 0.35s cubic-bezier(.16, 1, .3, 1);
}
body.is-public-page.auth-page .auth-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.9;
}
body.is-public-page.auth-page .auth-alert--ok {
    background: var(--auth-success-bg) !important;
    color: var(--auth-success) !important;
}
body.is-public-page.auth-page .auth-alert--err {
    background: var(--auth-error-bg) !important;
    color: var(--auth-error) !important;
}
body.is-public-page.auth-page .auth-alert--info {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}
body.is-public-page.auth-page .auth-alert--warn {
    background: var(--auth-warn-bg) !important;
    color: var(--auth-warn) !important;
}
body.is-public-page.auth-page .auth-alert ul {
    list-style: none;
    padding: 0;
    margin: 0.375rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-weight: 400;
}
body.is-public-page.auth-page .auth-alert ul li::before {
    content: '•';
    margin-right: 0.5rem;
    opacity: 0.7;
}
body.is-public-page.auth-page .auth-alert strong {
    font-weight: 700;
}

/* =================================================
   11 · FOOTER — Debajo del card
   ================================================= */
body.is-public-page.auth-page .auth-footer {
    margin-top: 1.25rem !important;
    text-align: center;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--auth-muted) !important;
    animation: authFadeSlide 0.5s ease 0.15s both;
}
body.is-public-page.auth-page .auth-footer a {
    color: var(--auth-ink) !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    text-decoration: none !important;
    padding: 0.25rem 0.375rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
body.is-public-page.auth-page .auth-footer a:hover {
    background: var(--auth-primary-light);
    color: var(--auth-primary-dark) !important;
}

/* Footnote legal */
body.is-public-page.auth-page .auth-footnote {
    margin-top: 0.75rem !important;
    text-align: center;
    font-family: inherit !important;
    font-size: 12px !important;
    color: var(--auth-muted-2) !important;
    line-height: 1.5;
}
body.is-public-page.auth-page .auth-footnote a {
    color: var(--auth-muted) !important;
    border-bottom: none !important;
    text-decoration: underline;
    text-decoration-color: var(--auth-border-strong);
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
body.is-public-page.auth-page .auth-footnote a:hover {
    color: var(--auth-primary-dark) !important;
}

/* =================================================
   12 · EMBLEMA (verify email)
   ================================================= */
body.is-public-page.auth-page .auth-emblem {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 1.25rem !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #d1faf1 100%) !important;
    color: var(--auth-primary) !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -8px var(--auth-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    position: relative;
    animation: authEmblemPulse 2.4s ease-in-out infinite;
}
body.is-public-page.auth-page .auth-emblem--green {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    color: #047857 !important;
    animation: authEmblemSuccess 0.6s cubic-bezier(.16, 1, .3, 1);
}

/* =================================================
   13 · STEPS list (verify email pending/success)
   ================================================= */
body.is-public-page.auth-page .auth-steps {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: var(--auth-radius-sm) !important;
    padding: 1rem 1.125rem !important;
    margin: 0.875rem 0 1.25rem !important;
}
body.is-public-page.auth-page .auth-steps__title {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--auth-ink-2) !important;
    margin: 0 0 0.625rem !important;
}
body.is-public-page.auth-page .auth-steps ol,
body.is-public-page.auth-page .auth-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    counter-reset: step;
}
body.is-public-page.auth-page .auth-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-family: inherit !important;
    font-size: 13.5px !important;
    color: var(--auth-ink-2) !important;
    line-height: 1.45 !important;
}
body.is-public-page.auth-page .auth-steps ol li::before {
    counter-increment: step;
    content: counter(step);
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border: 1.5px solid var(--auth-primary);
    color: var(--auth-primary) !important;
    font-weight: 700;
    font-size: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}
body.is-public-page.auth-page .auth-steps ul li {
    padding-left: 22px;
    position: relative;
}
body.is-public-page.auth-page .auth-steps ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background: var(--auth-primary);
    border-radius: 50%;
    min-width: 0 !important;
}
body.is-public-page.auth-page .auth-steps ul li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 3px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg);
}

/* =================================================
   14 · CHOICE CARDS (register-type)
   ================================================= */
body.is-public-page.auth-page .auth-choice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem !important;
    margin: 0 0 1.5rem !important;
}
@media (min-width: 640px) {
    body.is-public-page.auth-page .auth-choice {
        grid-template-columns: repeat(2, 1fr);
    }
}
body.is-public-page.auth-page .auth-choice__item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem !important;
    padding: 1.25rem 1.125rem 1rem !important;
    background: #ffffff !important;
    border: 1.5px solid var(--auth-border) !important;
    border-radius: var(--auth-radius) !important;
    box-shadow: var(--auth-shadow-sm) !important;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(.16, 1, .3, 1), border-color 0.18s ease, box-shadow 0.25s ease;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}
body.is-public-page.auth-page .auth-choice__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(21, 171, 146, 0.05), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
body.is-public-page.auth-page .auth-choice__item:hover {
    transform: translateY(-3px);
    border-color: var(--auth-primary) !important;
    box-shadow: 0 16px 32px -16px var(--auth-primary-glow), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
body.is-public-page.auth-page .auth-choice__item:hover::after {
    opacity: 1;
}
body.is-public-page.auth-page .auth-choice__item:active {
    transform: translateY(-1px) scale(0.995);
}
body.is-public-page.auth-page .auth-choice__tag {
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--auth-primary) !important;
    background: var(--auth-primary-light) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 6px;
    align-self: flex-start;
    margin-bottom: 0.25rem;
}
body.is-public-page.auth-page .auth-choice__title {
    font-family: inherit !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    color: var(--auth-ink) !important;
    margin: 0.125rem 0 0.25rem !important;
}
body.is-public-page.auth-page .auth-choice__body {
    font-family: inherit !important;
    font-size: 13.5px !important;
    color: var(--auth-muted) !important;
    line-height: 1.45 !important;
    margin: 0 0 0.625rem !important;
}
body.is-public-page.auth-page .auth-choice__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0.75rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}
body.is-public-page.auth-page .auth-choice__list li {
    font-family: inherit !important;
    font-size: 13px !important;
    color: var(--auth-ink-2) !important;
    padding-left: 1.375rem !important;
    position: relative !important;
    line-height: 1.4;
}
body.is-public-page.auth-page .auth-choice__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background: var(--auth-primary);
    border-radius: 50%;
    color: transparent !important;
}
body.is-public-page.auth-page .auth-choice__list li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 3px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg);
}
body.is-public-page.auth-page .auth-choice__cta {
    margin-top: auto;
    padding-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--auth-primary-dark) !important;
}
body.is-public-page.auth-page .auth-choice__cta::after {
    content: '→';
    font-size: 16px;
    transition: transform 0.2s ease;
}
body.is-public-page.auth-page .auth-choice__item:hover .auth-choice__cta::after {
    transform: translateX(4px);
}

/* Meta trust badges */
body.is-public-page.auth-page .auth-meta {
    margin: 1.5rem 0 0.75rem !important;
    padding: 1rem !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--auth-border) !important;
    border-radius: var(--auth-radius) !important;
    border-top-width: 1px !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
body.is-public-page.auth-page .auth-meta__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
    font-family: inherit !important;
}
body.is-public-page.auth-page .auth-meta__item strong {
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--auth-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.is-public-page.auth-page .auth-meta__item span {
    font-family: inherit !important;
    font-size: 11.5px !important;
    color: var(--auth-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* =================================================
   15 · MODAL — Bottom-sheet en móvil, modal centrado en desktop
   ================================================= */
body.is-public-page.auth-page .auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    z-index: 100;
    animation: authFadeIn 0.2s ease;
}
@media (min-width: 520px) {
    body.is-public-page.auth-page .auth-modal {
        align-items: center;
        padding: 1.25rem;
    }
}
body.is-public-page.auth-page .auth-modal__panel {
    background: #ffffff !important;
    border: none !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22) !important;
    padding: 1.5rem 1.375rem calc(1.75rem + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 100% !important;
    width: 100% !important;
    animation: authSheetUp 0.28s cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 520px) {
    body.is-public-page.auth-page .auth-modal__panel {
        border-radius: var(--auth-radius) !important;
        max-width: 440px !important;
        padding: 1.75rem 1.75rem 1.75rem !important;
        animation: authFadeScale 0.28s cubic-bezier(.16, 1, .3, 1);
    }
}
body.is-public-page.auth-page .auth-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
body.is-public-page.auth-page .auth-modal__head .ipsoo-marker {
    display: none !important;
}
body.is-public-page.auth-page .auth-modal__title {
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--auth-ink) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 0.25rem !important;
}
body.is-public-page.auth-page .auth-modal__close {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: var(--auth-bg) !important;
    color: var(--auth-muted) !important;
    border: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
body.is-public-page.auth-page .auth-modal__close:hover {
    background: #e2e8f0 !important;
    color: var(--auth-ink) !important;
}
body.is-public-page.auth-page .auth-modal__actions {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem;
}
body.is-public-page.auth-page .auth-modal__actions > * {
    flex: 1;
    margin-top: 0 !important;
}

/* =================================================
   16 · PASSWORD STRENGTH METER
   ================================================= */
body.is-public-page.auth-page .auth-pw-meter {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.4375rem;
}
body.is-public-page.auth-page .auth-pw-meter__bar {
    flex: 1;
    height: 3px;
    background: var(--auth-border);
    border-radius: 2px;
    transition: background 0.25s ease;
}
body.is-public-page.auth-page .auth-pw-meter[data-strength="1"] .auth-pw-meter__bar:nth-child(-n+1) { background: #ef4444; }
body.is-public-page.auth-page .auth-pw-meter[data-strength="2"] .auth-pw-meter__bar:nth-child(-n+2) { background: #f59e0b; }
body.is-public-page.auth-page .auth-pw-meter[data-strength="3"] .auth-pw-meter__bar:nth-child(-n+3) { background: #10b981; }
body.is-public-page.auth-page .auth-pw-meter[data-strength="4"] .auth-pw-meter__bar { background: var(--auth-primary); }

body.is-public-page.auth-page .auth-pw-label {
    font-size: 11.5px;
    color: var(--auth-muted);
    font-weight: 500;
    margin-top: 0.25rem;
    padding-left: 2px;
}
body.is-public-page.auth-page .auth-pw-label[data-level="1"] { color: #dc2626; }
body.is-public-page.auth-page .auth-pw-label[data-level="2"] { color: #d97706; }
body.is-public-page.auth-page .auth-pw-label[data-level="3"] { color: #059669; }
body.is-public-page.auth-page .auth-pw-label[data-level="4"] { color: var(--auth-primary-dark); font-weight: 600; }

/* =================================================
   17 · VERIFY EMAIL — Live status indicator
   ================================================= */
body.is-public-page.auth-page .auth-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--auth-primary-light);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--auth-primary-dark);
    margin: 0 auto 0.75rem;
}
body.is-public-page.auth-page .auth-live__dot {
    width: 8px;
    height: 8px;
    background: var(--auth-primary);
    border-radius: 50%;
    animation: authLivePulse 1.6s ease-in-out infinite;
    position: relative;
}
body.is-public-page.auth-page .auth-live__dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: var(--auth-primary);
    border-radius: 50%;
    opacity: 0.35;
    animation: authLiveRing 1.6s ease-in-out infinite;
}

/* =================================================
   18 · ANIMATIONS
   ================================================= */
@keyframes authFadeSlide {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes authFadeScale {
    from { opacity: 0; transform: scale(0.98) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes authFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes authSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes authSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes authSpin {
    to { transform: rotate(360deg); }
}
@keyframes authEmblemPulse {
    0%, 100% { box-shadow: 0 8px 24px -8px var(--auth-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
    50% { box-shadow: 0 14px 36px -8px rgba(21, 171, 146, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}
@keyframes authEmblemSuccess {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes authLivePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.6; }
}
@keyframes authLiveRing {
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

/* =================================================
   19 · SMALL SCREENS (<380px)
   ================================================= */
@media (max-width: 380px) {
    body.is-public-page.auth-page .auth-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    body.is-public-page.auth-page .auth-card {
        padding: 1.25rem 1.125rem 1.375rem !important;
        border-radius: var(--auth-radius-sm) !important;
    }
    body.is-public-page.auth-page .auth-head h1 {
        font-size: 1.625rem !important;
    }
}

/* =================================================
   20 · DESKTOP — Ampliar para mayor elegancia
   ================================================= */
@media (min-width: 768px) {
    body.is-public-page.auth-page .auth-shell {
        padding: 3rem 1.5rem;
    }
    body.is-public-page.auth-page .auth-card {
        padding: 2rem 2.25rem 2.25rem !important;
    }
    body.is-public-page.auth-page .auth-head {
        margin-bottom: 1.75rem;
    }
    body.is-public-page.auth-page .auth-head h1 {
        font-size: 2.25rem !important;
    }
}

/* =================================================================
   PWA-only elements — ocultos por defecto (web), visibles en PWA
   ================================================================= */
body.is-public-page.auth-page .pwa-hero {
    display: none;
}
/* =================================================================
   21 · PWA STANDALONE — Look iOS nativo, minimalista
   Estética: blanco puro, negros, grises iOS system. Sin gradients.
   Inspiración: Apple Wallet, Apple Music, Notes, Stripe Checkout.
   ================================================================= */
@media (display-mode: standalone) {

    /* --- System font SF Pro --- */
    body.is-public-page.auth-page {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif !important;
        background: #ffffff !important;
        color: #000000 !important;
        padding-top: 0 !important;
        overscroll-behavior-y: contain;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
    }

    /* --- Ocultar chrome web y fondo decorativo --- */
    body.is-public-page.auth-page nav.fixed,
    body.is-public-page.auth-page nav[x-data],
    body.is-public-page.auth-page footer,
    body.is-public-page.auth-page .pwa-hide-on-auth {
        display: none !important;
    }
    body.is-public-page.auth-page::before {
        display: none !important;
    }

    /* --- Shell: stack vertical simple --- */
    body.is-public-page.auth-page .auth-shell {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        align-items: stretch !important;
        padding: 0 !important;
        display: block !important;
        background: #ffffff;
    }
    body.is-public-page.auth-page .auth-shell__inner {
        width: 100% !important;
        max-width: none !important;
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh;
        min-height: 100dvh;
        position: relative;
    }
    body.is-public-page.auth-page .auth-shell--xwide .auth-shell__inner,
    body.is-public-page.auth-page .auth-shell--wide .auth-shell__inner {
        max-width: none !important;
    }
    body.is-public-page.auth-page main {
        padding: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    /* ============================================================
       PWA HERO — Por defecto OCULTO en iOS (too colorful)
       Se mantienen solo las variantes --verify y --success como
       icono circle grande gris claro (estilo iOS system).
       ============================================================ */
    body.is-public-page.auth-page .pwa-hero {
        display: none !important;
    }

    /* Variantes activas: verify/success (visual feedback estado) — tamaño iOS contenido */
    body.is-public-page.auth-page .pwa-hero--verify,
    body.is-public-page.auth-page .pwa-hero--success {
        display: flex !important;
        position: relative !important;
        align-items: center;
        justify-content: center;
        background: none !important;
        border-radius: 0 !important;
        min-height: auto;
        padding: 16px 0 14px !important;
        margin: 0 !important;
        overflow: visible;
        animation: pwaFadeIn 0.4s ease;
    }
    body.is-public-page.auth-page .pwa-hero--verify::before,
    body.is-public-page.auth-page .pwa-hero--verify::after,
    body.is-public-page.auth-page .pwa-hero--success::before,
    body.is-public-page.auth-page .pwa-hero--success::after {
        display: none !important;
    }
    body.is-public-page.auth-page .pwa-hero--verify .pwa-hero__mark,
    body.is-public-page.auth-page .pwa-hero--success .pwa-hero__mark {
        width: 64px !important;
        height: 64px !important;
        background: #f2f2f7 !important;
        border-radius: 50% !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #000000 !important;
        box-shadow: none !important;
        font-size: 0 !important;
        animation: pwaIconIn 0.45s cubic-bezier(.2, 1.2, .3, 1);
    }
    body.is-public-page.auth-page .pwa-hero--success .pwa-hero__mark {
        background: #e8f7ef !important;
        color: #16a34a !important;
    }
    body.is-public-page.auth-page .pwa-hero--verify .pwa-hero__mark svg,
    body.is-public-page.auth-page .pwa-hero--success .pwa-hero__mark svg {
        width: 28px !important;
        height: 28px !important;
        stroke-width: 1.8 !important;
        stroke: currentColor !important;
    }

    /* ============================================================
       NAVIGATION BAR — Back chevron minimalista iOS
       ============================================================ */
    body.is-public-page.auth-page .pwa-close {
        display: inline-flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        align-items: center;
        justify-content: center;
        width: 32px !important;
        height: 44px !important;
        margin: 0 0 16px -6px !important;
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        color: #000000 !important;
        cursor: pointer;
        padding: 0 !important;
        align-self: flex-start;
        z-index: 1;
        transition: opacity 0.15s ease;
    }
    body.is-public-page.auth-page .pwa-close:active {
        background: transparent !important;
        transform: none !important;
        opacity: 0.35 !important;
    }
    body.is-public-page.auth-page .pwa-close svg {
        width: 26px !important;
        height: 26px !important;
        stroke-width: 2.4 !important;
    }

    /* ============================================================
       HEADER — iOS Large Title
       ============================================================ */
    body.is-public-page.auth-page .auth-head {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 4px 28px !important;
        animation: pwaFadeIn 0.35s ease;
    }
    body.is-public-page.auth-page .auth-head .ipsoo-marker,
    body.is-public-page.auth-page .auth-head .auth-brand {
        display: none !important;
    }
    body.is-public-page.auth-page .auth-head h1 {
        font-family: inherit !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        letter-spacing: -0.035em !important;
        line-height: 1.08 !important;
        color: #000000 !important;
        margin: 0 0 6px !important;
    }
    body.is-public-page.auth-page .auth-head h1 em {
        font-style: normal !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #000000 !important;
        color: #000000 !important;
        font-weight: 700 !important;
    }
    body.is-public-page.auth-page .auth-head p {
        font-family: inherit !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        color: #6b6b70 !important;
        font-weight: 400 !important;
        margin: 0 !important;
        max-width: none !important;
        text-align: left !important;
    }
    body.is-public-page.auth-page .auth-head p strong {
        color: #000000 !important;
        font-weight: 600 !important;
    }
    body.is-public-page.auth-page .auth-head p a,
    body.is-public-page.auth-page .auth-head__link {
        color: #007aff !important; /* iOS accent blue */
        font-weight: 400 !important;
        border: none !important;
        padding: 0 !important;
    }

    /* ============================================================
       CARD — Transparente (el "card" concept no existe en iOS)
       ============================================================ */
    body.is-public-page.auth-page .auth-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 4px !important;
        animation: none !important;
    }

    /* ============================================================
       FORM — Spacing iOS: 14-16px entre inputs
       ============================================================ */
    body.is-public-page.auth-page .auth-form {
        gap: 14px !important;
    }
    body.is-public-page.auth-page .auth-form__row {
        gap: 14px !important;
    }
    body.is-public-page.auth-page .auth-form__field {
        gap: 6px !important;
    }

    /* Labels minúsculos — iOS casi no los usa */
    body.is-public-page.auth-page .auth-form__label {
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #8e8e93 !important; /* iOS gray */
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 0 4px !important;
        margin: 0 !important;
    }
    body.is-public-page.auth-page .auth-form__label .req {
        color: #8e8e93 !important;
        font-weight: 400;
    }
    body.is-public-page.auth-page .auth-form__label-row {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
    }
    body.is-public-page.auth-page .auth-form__forgot {
        font-family: inherit !important;
        font-size: 14px !important;
        color: #007aff !important;
        font-weight: 400 !important;
        border: none !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

    /* ============================================================
       INPUTS — iOS filled style, gris claro sin borde
       ============================================================ */
    body.is-public-page.auth-page .auth-form__input {
        padding: 14px 16px !important;
        font-family: inherit !important;
        font-size: 17px !important; /* iOS body */
        font-weight: 400 !important;
        background: #f2f2f7 !important; /* iOS system gray 6 */
        border: 1.5px solid transparent !important;
        border-radius: 12px !important;
        color: #000000 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        min-height: 50px;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    body.is-public-page.auth-page .auth-form__input::placeholder {
        color: #8e8e93 !important;
        font-weight: 400;
    }
    body.is-public-page.auth-page .auth-form__input:hover:not(:focus) {
        background: #e9e9ee !important;
    }
    body.is-public-page.auth-page .auth-form__input:focus {
        outline: none !important;
        background: #ffffff !important;
        border-color: #000000 !important;
        box-shadow: none !important;
    }

    /* Icon prefix: escondido en iOS (no es típico) */
    body.is-public-page.auth-page .auth-form__input-wrap {
        position: relative;
    }
    body.is-public-page.auth-page .auth-form__input-wrap .auth-form__input {
        padding-left: 16px !important;
    }
    body.is-public-page.auth-page .auth-form__input-icon {
        display: none !important;
    }

    /* Password toggle iOS */
    body.is-public-page.auth-page .auth-form__input-wrap .auth-pw-toggle {
        right: 8px !important;
        color: #8e8e93 !important;
        background: transparent !important;
    }
    body.is-public-page.auth-page .auth-form__input-wrap .auth-pw-toggle:active {
        background: transparent !important;
        opacity: 0.4 !important;
    }
    body.is-public-page.auth-page .auth-form__input-wrap:has(.auth-pw-toggle) .auth-form__input {
        padding-right: 48px !important;
    }

    /* Hint text */
    body.is-public-page.auth-page .auth-form__hint {
        font-family: inherit !important;
        font-size: 13px !important;
        color: #8e8e93 !important;
        padding: 0 4px !important;
    }
    body.is-public-page.auth-page .auth-form__hint--error {
        color: #ff3b30 !important; /* iOS red */
    }

    /* ============================================================
       CHECKBOX — iOS style
       ============================================================ */
    body.is-public-page.auth-page .auth-form__check {
        font-family: inherit !important;
        font-size: 15px !important;
        color: #000000 !important;
        padding: 6px 0 !important;
        gap: 10px !important;
        line-height: 1.4 !important;
    }
    body.is-public-page.auth-page .auth-form__check-box {
        width: 22px !important;
        height: 22px !important;
        border-radius: 6px !important;
        border: 1.5px solid #d1d1d6 !important;
        background: #ffffff !important;
    }
    body.is-public-page.auth-page .auth-form__check:hover .auth-form__check-box {
        border-color: #8e8e93 !important;
    }
    body.is-public-page.auth-page .auth-form__check-input:checked + .auth-form__check-box {
        background: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }
    body.is-public-page.auth-page .auth-form__check-text a {
        color: #007aff !important;
        border: none !important;
        padding: 0 !important;
        text-decoration: none !important;
        font-weight: 400 !important;
    }

    /* ============================================================
       BUTTONS — iOS style: negro sólido primario, gris ghost secundario
       ============================================================ */
    body.is-public-page.auth-page .auth-form__submit,
    body.is-public-page.auth-page .ipsoo-btn.auth-form__submit,
    body.is-public-page.auth-page .ipsoo-btn--primary.auth-form__submit,
    body.is-public-page.auth-page .verify-form__submit,
    body.is-public-page.auth-page .reset-link__cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        letter-spacing: -0.005em !important;
        color: #ffffff !important;
        background: #000000 !important;
        border: none !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        cursor: pointer;
        margin-top: 18px !important;
        transition: opacity 0.12s ease, transform 0.08s ease !important;
        position: relative;
        overflow: hidden;
        text-decoration: none !important;
    }
    body.is-public-page.auth-page .auth-form__submit::before,
    body.is-public-page.auth-page .verify-form__submit::before,
    body.is-public-page.auth-page .reset-link__cta::before {
        display: none !important;
    }
    body.is-public-page.auth-page .auth-form__submit:hover,
    body.is-public-page.auth-page .verify-form__submit:hover,
    body.is-public-page.auth-page .reset-link__cta:hover {
        transform: none !important;
        box-shadow: none !important;
        background: #000000 !important;
    }
    body.is-public-page.auth-page .auth-form__submit:active,
    body.is-public-page.auth-page .verify-form__submit:active,
    body.is-public-page.auth-page .reset-link__cta:active {
        opacity: 0.75 !important;
        transform: scale(0.985) !important;
    }
    body.is-public-page.auth-page .auth-form__submit svg,
    body.is-public-page.auth-page .verify-form__submit svg {
        width: 16px;
        height: 16px;
        stroke-width: 2.2;
    }

    /* Loading state iOS */
    body.is-public-page.auth-page .auth-form__submit.is-loading::after {
        border-color: rgba(255, 255, 255, 0.3) !important;
        border-top-color: #ffffff !important;
    }

    /* Google button: ghost con borde fino iOS */
    body.is-public-page.auth-page .auth-google {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        background: #ffffff !important;
        border: 1.5px solid #d1d1d6 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        gap: 10px !important;
        text-decoration: none !important;
    }
    body.is-public-page.auth-page .auth-google:hover {
        background: #ffffff !important;
        border-color: #d1d1d6 !important;
        box-shadow: none !important;
    }
    body.is-public-page.auth-page .auth-google:active {
        background: #f9f9fb !important;
        transform: scale(0.985) !important;
    }

    /* Secondary button */
    body.is-public-page.auth-page .auth-secondary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        background: #f2f2f7 !important;
        border: none !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        text-decoration: none !important;
        margin-top: 10px !important;
        gap: 8px;
    }
    body.is-public-page.auth-page .auth-secondary:active {
        background: #e9e9ee !important;
        transform: scale(0.985);
    }

    /* ============================================================
       DIVIDER — iOS minimalist
       ============================================================ */
    body.is-public-page.auth-page .auth-divider {
        margin: 22px 0 16px !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #8e8e93 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    body.is-public-page.auth-page .auth-divider::before,
    body.is-public-page.auth-page .auth-divider::after {
        background: #d1d1d6 !important;
    }
    body.is-public-page.auth-page .auth-divider span {
        padding: 0 4px;
    }

    /* ============================================================
       ALERTS — iOS banner
       ============================================================ */
    body.is-public-page.auth-page .auth-alert {
        border-radius: 12px !important;
        padding: 12px 14px !important;
        border: none !important;
        border-left: none !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.4;
        margin-bottom: 14px !important;
    }
    body.is-public-page.auth-page .auth-alert--ok {
        background: #e8f7ef !important;
        color: #14814a !important;
    }
    body.is-public-page.auth-page .auth-alert--err {
        background: #ffeeee !important;
        color: #c9211f !important;
    }
    body.is-public-page.auth-page .auth-alert--info {
        background: #e9f4ff !important;
        color: #0055b3 !important;
    }
    body.is-public-page.auth-page .auth-alert--warn {
        background: #fff7e6 !important;
        color: #a2620a !important;
    }

    /* ============================================================
       FOOTER — Link sutil al final
       ============================================================ */
    body.is-public-page.auth-page .auth-footer {
        text-align: center !important;
        margin: auto 0 0 !important;
        padding: 20px 0 8px !important;
        font-family: inherit !important;
        font-size: 15px !important;
        color: #6b6b70 !important;
        background: transparent !important;
        border: none !important;
        animation: pwaFadeIn 0.35s ease 0.1s backwards;
    }
    body.is-public-page.auth-page .auth-footer a {
        color: #007aff !important;
        font-weight: 500 !important;
        background: none !important;
        padding: 0 !important;
        border: none !important;
        text-decoration: none !important;
    }
    body.is-public-page.auth-page .auth-footnote {
        padding: 8px 4px 0 !important;
        margin: 0 !important;
        font-family: inherit !important;
        font-size: 12px !important;
        color: #8e8e93 !important;
        text-align: center;
    }
    body.is-public-page.auth-page .auth-footnote a {
        color: #6b6b70 !important;
        border: none !important;
        text-decoration: none !important;
    }

    /* ============================================================
       VERIFY-EMAIL: limpiar noise en PWA
       - ocultar pasos numerados (ruido en app nativa)
       - ocultar warning de spam (el usuario ya lo sabe)
       - mantener solo: icon + título + email + live + botones
       ============================================================ */
    body.is-public-page.auth-page .auth-steps,
    body.is-public-page.auth-page .auth-alert--warn {
        display: none !important;
    }

    /* "Cambiar email": convertirlo en link de texto iOS, no botón gris */
    body.is-public-page.auth-page .verify-change.auth-secondary {
        background: transparent !important;
        border: none !important;
        color: #007aff !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        padding: 12px !important;
        min-height: auto !important;
        margin-top: 2px !important;
        box-shadow: none !important;
        gap: 0 !important;
    }
    body.is-public-page.auth-page .verify-change.auth-secondary svg {
        display: none !important;
    }
    body.is-public-page.auth-page .verify-change.auth-secondary:hover {
        background: transparent !important;
        color: #007aff !important;
    }
    body.is-public-page.auth-page .verify-change.auth-secondary:active {
        background: transparent !important;
        opacity: 0.45 !important;
        transform: none !important;
    }

    /* Live badge: centrado + separación del icon */
    body.is-public-page.auth-page .auth-live {
        display: inline-flex !important;
        margin: 0 0 20px !important;
    }

    /* Verify-form: más espacio antes del botón */
    body.is-public-page.auth-page .verify-form {
        margin-top: 8px;
    }

    /* ============================================================
       LIVE INDICATOR (verify-email-pending)
       ============================================================ */
    body.is-public-page.auth-page .auth-live {
        display: inline-flex !important;
        background: #f2f2f7 !important;
        color: #000000 !important;
        padding: 6px 12px !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: 100px;
        margin: 0 0 14px !important;
    }
    body.is-public-page.auth-page .auth-live__dot {
        background: #34c759 !important; /* iOS green */
    }
    body.is-public-page.auth-page .auth-live__dot::before {
        background: #34c759 !important;
    }

    /* ============================================================
       EMBLEMA (ocultar en PWA — pwa-hero lo reemplaza)
       ============================================================ */
    body.is-public-page.auth-page .auth-emblem {
        display: none !important;
    }

    /* ============================================================
       CHOICE CARDS (register-type) — iOS list rows
       ============================================================ */
    body.is-public-page.auth-page .auth-choice {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 4px 0 16px !important;
    }
    body.is-public-page.auth-page .auth-choice__item {
        background: #ffffff !important;
        border: 1.5px solid #e5e5ea !important;
        border-radius: 14px !important;
        padding: 16px !important;
        box-shadow: none !important;
    }
    body.is-public-page.auth-page .auth-choice__item::after {
        display: none !important;
    }
    body.is-public-page.auth-page .auth-choice__item:hover {
        transform: none !important;
        border-color: #e5e5ea !important;
        box-shadow: none !important;
    }
    body.is-public-page.auth-page .auth-choice__item:active {
        background: #f9f9fb !important;
        transform: scale(0.99) !important;
        border-color: #000000 !important;
    }
    body.is-public-page.auth-page .auth-choice__tag {
        background: #f2f2f7 !important;
        color: #6b6b70 !important;
        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        padding: 3px 8px !important;
        border-radius: 6px;
    }
    body.is-public-page.auth-page .auth-choice__title {
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        margin: 8px 0 4px !important;
        letter-spacing: -0.01em !important;
    }
    body.is-public-page.auth-page .auth-choice__body {
        font-family: inherit !important;
        font-size: 14px !important;
        color: #6b6b70 !important;
        line-height: 1.4;
        margin: 0 0 10px !important;
    }
    body.is-public-page.auth-page .auth-choice__list li {
        font-family: inherit !important;
        font-size: 13px !important;
        color: #000000 !important;
    }
    body.is-public-page.auth-page .auth-choice__list li::before,
    body.is-public-page.auth-page .auth-choice__list li::after {
        background: transparent !important;
    }
    body.is-public-page.auth-page .auth-choice__list li::before {
        background: #000000 !important;
    }
    body.is-public-page.auth-page .auth-choice__cta {
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #000000 !important;
    }
    /* Trust badges (Seguro / Gratis / Sin compromiso) — ocultos en PWA
       (innecesarios en una app nativa, el usuario ya confía) */
    body.is-public-page.auth-page .auth-meta {
        display: none !important;
    }

    /* ============================================================
       PASSWORD STRENGTH METER — discreto iOS
       ============================================================ */
    body.is-public-page.auth-page .auth-pw-meter {
        gap: 3px;
        margin-top: 6px;
    }
    body.is-public-page.auth-page .auth-pw-meter__bar {
        height: 3px;
        border-radius: 2px;
        background: #e5e5ea;
    }
    body.is-public-page.auth-page .auth-pw-meter[data-strength="1"] .auth-pw-meter__bar:nth-child(-n+1) { background: #ff3b30 !important; }
    body.is-public-page.auth-page .auth-pw-meter[data-strength="2"] .auth-pw-meter__bar:nth-child(-n+2) { background: #ff9500 !important; }
    body.is-public-page.auth-page .auth-pw-meter[data-strength="3"] .auth-pw-meter__bar:nth-child(-n+3) { background: #34c759 !important; }
    body.is-public-page.auth-page .auth-pw-meter[data-strength="4"] .auth-pw-meter__bar { background: #000000 !important; }
    body.is-public-page.auth-page .auth-pw-label {
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #8e8e93 !important;
    }

    /* ============================================================
       MODAL — iOS bottom-sheet con drag handle
       ============================================================ */
    body.is-public-page.auth-page .auth-modal {
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    body.is-public-page.auth-page .auth-modal__panel {
        border-radius: 20px 20px 0 0 !important;
        padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        background: #ffffff !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15) !important;
    }
    body.is-public-page.auth-page .auth-modal__panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: #d1d1d6;
        border-radius: 3px;
        margin: 0 auto 16px;
    }
    body.is-public-page.auth-page .auth-modal__title {
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #000000 !important;
    }
    body.is-public-page.auth-page .auth-modal__close {
        width: 30px !important;
        height: 30px !important;
        background: #f2f2f7 !important;
        color: #6b6b70 !important;
        font-size: 18px !important;
    }
}

/* ==============================================================
   ANIMACIONES PWA (iOS minimal)
   ============================================================== */
@keyframes pwaFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pwaIconIn {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

/* ==============================================================
   ANIMACIONES PWA
   ============================================================== */
@keyframes pwaHeroIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes pwaContentIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes pwaMarkEnter {
    0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
    60% { transform: scale(1.08) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes pwaMarkFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes pwaMarkSuccess {
    0% { transform: scale(0.2); opacity: 0; }
    40% { transform: scale(1.25); opacity: 1; }
    70% { transform: scale(0.92); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes pwaHeroBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -10px) scale(1.1); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}
@keyframes pwaRipple {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* iOS: safe area respetada con status bar transparente */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (display-mode: standalone) {
        body.is-public-page.auth-page {
            padding-top: env(safe-area-inset-top) !important;
        }
    }
}

/* En PWA standalone: eliminar el padding-top: 64px del <main> público
   (el navbar está oculto, así que no hace falta dejar espacio para él) */
@media (display-mode: standalone) {
    body.is-public-page.auth-page main {
        padding-top: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    /* Inputs ≥16px: evita el auto-zoom de iOS al enfocar.
       OJO: el body del login lleva solo .auth-page (sin .is-public-page) */
    body.auth-page .ax-input {
        font-size: 16px !important;
        min-height: 48px;
        border-radius: 12px;
    }
    body.auth-page .ax-btn {
        min-height: 50px;
        border-radius: 12px;
        font-size: 16px;
    }
    body.auth-page .ax-btn:active {
        transform: scale(0.98);
        opacity: 0.85;
    }
    /* El formulario respeta el home indicator */
    body.auth-page form {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* =================================================
   22 · REDUCED MOTION
   ================================================= */
@media (prefers-reduced-motion: reduce) {
    body.is-public-page.auth-page * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================================
   23 · EXTRA: tabs login/register (para futuras mejoras)
   ================================================= */
body.is-public-page.auth-page .auth-tabs {
    display: flex;
    background: var(--auth-bg);
    border-radius: var(--auth-radius-sm);
    padding: 4px;
    margin-bottom: 1.25rem;
    gap: 4px;
}
body.is-public-page.auth-page .auth-tabs__item {
    flex: 1;
    padding: 0.625rem 1rem;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--auth-muted);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
body.is-public-page.auth-page .auth-tabs__item.is-active {
    background: #ffffff;
    color: var(--auth-ink);
    box-shadow: var(--auth-shadow-sm);
}