/* IslaMarket — AUTH NAV + FOOTER FIX (Premium Light)
   Cargar DESPUÉS de /assets/style.css
   Objetivo:
   - En /login /registro /olvide /reset /2fa: nav limpio + burger OK
   - Footer SIEMPRE legible (fondo claro, texto oscuro)
   - En móvil: NO ocultar el “Bienvenido…” (auth-hero visible, compacto)
*/

/* ========= AUTH BASE ========= */
body.is-auth {
    background: radial-gradient(1100px 650px at 15% 5%, rgba(77,159,255,.18), transparent 60%), radial-gradient(900px 600px at 90% 10%, rgba(0,212,170,.16), transparent 55%), linear-gradient(180deg, #f7fbff 0%, #f3f7ff 40%, #f7fbff 100%) !important;
    color: #0b1220 !important;
}

    /* ========= TOPBAR / NAV ========= */
    body.is-auth header.topbar {
        background: rgba(246,248,252,.86) !important;
        border-bottom: 1px solid rgba(20,24,36,.10) !important;
        box-shadow: 0 10px 28px rgba(20,24,36,.08) !important;
        backdrop-filter: blur(12px) !important;
    }

        body.is-auth header.topbar .container.navrow {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        body.is-auth header.topbar .brand span {
            color: rgba(20,24,36,.92) !important;
        }

        /* desktop pills */
        body.is-auth header.topbar .navlinks {
            gap: 10px !important;
            align-items: center !important;
        }

            body.is-auth header.topbar .navlinks .pill {
                padding: 8px 11px !important;
                font-size: 13px !important;
                border-radius: 999px !important;
                border: 1px solid rgba(20,24,36,.12) !important;
                background: rgba(255,255,255,.85) !important;
                color: rgba(20,24,36,.86) !important;
                box-shadow: none !important;
                transform: none !important;
            }

                body.is-auth header.topbar .navlinks .pill:hover {
                    background: rgba(255,255,255,.96) !important;
                    border-color: rgba(20,24,36,.16) !important;
                }

                body.is-auth header.topbar .navlinks .pill.is-active {
                    border-color: rgba(43,108,255,.35) !important;
                    box-shadow: 0 0 0 5px rgba(43,108,255,.10) !important;
                }

            /* CTA registro */
            body.is-auth header.topbar .navlinks a.pill[href="/registro"] {
                border: 0 !important;
                color: #071421 !important;
                background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
                box-shadow: 0 12px 26px rgba(20,24,36,.10) !important;
            }

        /* burger en auth (NO lo ocultamos) */
        body.is-auth header.topbar .burger {
            background: rgba(255,255,255,.92) !important;
            border: 1px solid rgba(20,24,36,.12) !important;
            box-shadow: 0 10px 22px rgba(20,24,36,.10) !important;
        }

        body.is-auth header.topbar .burger__line {
            background: rgba(10,20,35,.75) !important;
        }

    /* ========= AUTH LAYOUT (evita desierto pero deja footer visible) ========= */
    body.is-auth main.container {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    /* ========= AUTH SHELL ========= */
    body.is-auth .auth-shell {
        width: 100%;
        max-width: 1100px;
        margin: 22px auto 0;
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 26px;
        align-items: center;
    }

    /* Hero */
    body.is-auth .auth-hero {
        padding: 30px;
        border-radius: 22px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(12,18,32,.08);
        box-shadow: 0 22px 60px rgba(12,18,32,.10);
        backdrop-filter: blur(10px);
    }

        body.is-auth .auth-hero h1 {
            margin: 0 0 10px;
            font-size: 34px;
            color: #0b1220;
        }

        body.is-auth .auth-hero p {
            margin: 0 0 12px;
            color: rgba(11,18,32,.72);
        }

        body.is-auth .auth-hero ul {
            margin: 12px 0 0;
            padding-left: 18px;
            color: rgba(11,18,32,.78);
        }

    /* Card */
    body.is-auth .card.form.auth-form {
        max-width: 520px;
        margin: 0;
        padding: 26px;
        border-radius: 22px;
        background: rgba(255,255,255,.86) !important;
        border: 1px solid rgba(12,18,32,.10) !important;
        box-shadow: 0 22px 60px rgba(12,18,32,.12) !important;
        backdrop-filter: blur(10px);
    }

    body.is-auth .auth-form h2 {
        margin: 0 0 14px;
        font-size: 24px;
        color: #0b1220 !important;
    }

    body.is-auth .auth-form .muted {
        color: rgba(11,18,32,.70) !important;
    }

    body.is-auth .auth-form label {
        color: rgba(11,18,32,.75) !important;
        font-weight: 800;
    }

    body.is-auth .auth-form .input,
    body.is-auth .auth-form input,
    body.is-auth .auth-form select,
    body.is-auth .auth-form textarea {
        width: 100%;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(12,18,32,.12);
        background: rgba(255,255,255,.95);
        color: #0b1220 !important;
    }

    body.is-auth .auth-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    body.is-auth .btn-primary {
        flex: 1;
        border: 0;
        border-radius: 999px;
        padding: 12px 16px;
        font-weight: 900;
        color: #071421;
        background: linear-gradient(135deg, #4d9fff, #00d4aa);
        box-shadow: 0 16px 40px rgba(12,18,32,.18);
    }

    body.is-auth .btn-outline,
    body.is-auth .btn-ghost {
        border-radius: 999px;
        padding: 12px 14px;
        font-weight: 900;
        border: 1px solid rgba(12,18,32,.12);
        background: rgba(255,255,255,.75);
        color: rgba(11,18,32,.90) !important;
    }

    /* ========= FOOTER (siempre claro en auth) ========= */
    body.is-auth .im-footer {
        background: rgba(255,255,255,.70) !important;
        border-top: 1px solid rgba(12,18,32,.08) !important;
    }

        body.is-auth .im-footer,
        body.is-auth .im-footer * {
            color: rgba(11,18,32,.78) !important;
        }

    body.is-auth .im-footer__title,
    body.is-auth .im-footer__name {
        color: rgba(11,18,32,.92) !important;
    }

/* ========= MOBILE ========= */
@media (max-width: 900px) {
    /* 1 columna en móvil */
    body.is-auth .auth-shell {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    /* ✅ NO ocultamos el hero: lo compactamos */
    body.is-auth .auth-hero {
        padding: 16px;
        border-radius: 18px;
    }

        body.is-auth .auth-hero h1 {
            font-size: 22px;
            margin-bottom: 6px;
        }

        body.is-auth .auth-hero ul {
            margin-top: 8px;
        }

    /* Menú móvil desplegable */
    body.is-auth header.topbar .navlinks {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        z-index: 45;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 60px rgba(20,24,36,.18);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
    }

        body.is-auth header.topbar .navlinks.is-open {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }

        body.is-auth header.topbar .navlinks .pill {
            width: 100%;
            text-align: left;
        }
}