/* ===============================
   ALERTS LOGIN
================================ */

#tsparticles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.auth-container {
    position: relative;
    z-index: 2;
}

.auth-alerts{
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-bottom: 24px;
}

.auth-alert{
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 18px;

    border-radius: 18px;

    backdrop-filter: blur(10px);

    animation:
        fadeAlert .45s ease;
}


/* SUCCESS */

.auth-alert.success{
    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.12),
            rgba(22,163,74,.06)
        );

    border:
        1px solid rgba(22,163,74,.18);

    color:
        #166534;
}


/* ERROR */

.auth-alert.error{
    background:
        linear-gradient(
            135deg,
            rgba(220,38,38,.12),
            rgba(220,38,38,.06)
        );

    border:
        1px solid rgba(220,38,38,.16);

    color:
        #991b1b;
}


/* INFO */

.auth-alert.info{
    background:
        linear-gradient(
            135deg,
            rgba(0,43,131,.10),
            rgba(10,75,255,.05)
        );

    border:
        1px solid rgba(0,43,131,.12);

    color:
        var(--color-primary);
}


/* ICON */

.alert-icon{
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-weight: 700;
    font-size: .95rem;

    background:
        rgba(255,255,255,.7);

    box-shadow:
        0 4px 10px rgba(0,0,0,.05);
}


/* CONTENT */

.alert-content{
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.5;
}


/* ANIMATION */

@keyframes fadeAlert{

    from{
        opacity: 0;
        transform: translateY(-8px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }

}

/* ===============================
   LOGIN LINKS
================================ */

.auth-links{

    margin-top:22px;

    display:flex;
    flex-direction:column;
    gap:12px;
}

.auth-link{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:14px;

    border-radius:16px;

    font-weight:700;

    transition:.25s ease;

    text-decoration:none;
}


/* CREAR CUENTA */

.auth-link.register{

    background:
        linear-gradient(
            135deg,
            rgba(0,43,131,.08),
            rgba(10,75,255,.05)
        );

    border:
        1px solid rgba(0,43,131,.12);

    color:
        var(--color-primary);
}

.auth-link.register:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(0,43,131,.12),
            rgba(10,75,255,.08)
        );
}


/* RECUPERAR */

.auth-link.recovery{

    background:
        linear-gradient(
            135deg,
            rgba(245,179,1,.12),
            rgba(245,179,1,.06)
        );

    border:
        1px solid rgba(245,179,1,.18);

    color:
        #9a6700;
}

.auth-link.recovery:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(245,179,1,.18),
            rgba(245,179,1,.10)
        );
}

/* ===============================
   REGISTER LINKS
================================ */

.auth-links{

    margin-top:22px;

    display:flex;
    flex-direction:column;

    gap:12px;
}

.auth-link{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:14px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    transition:.25s ease;
}

/* LOGIN */

.auth-link.login{

    background:
        linear-gradient(
            135deg,
            rgba(0,43,131,.08),
            rgba(10,75,255,.05)
        );

    border:
        1px solid rgba(0,43,131,.12);

    color:
        var(--color-primary);
}

.auth-link.login:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(0,43,131,.12),
            rgba(10,75,255,.08)
        );

    box-shadow:
        var(--shadow-primary);
}