@charset "utf-8";

/*==================================================
LOGIN MCTIRE
Proyecto : MCTire
Desarrollo : ColaboraWeb
==================================================*/


/*==================================================
WRAPPER
==================================================*/

.login-wrapper
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:100vh;

    padding:40px 20px;

    overflow:hidden;

    background:
    radial-gradient(
        circle at 15% 20%,
        rgba(215,25,32,.16),
        transparent 30%
    ),
    radial-gradient(
        circle at 85% 80%,
        rgba(215,25,32,.10),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        #080808 0%,
        #111111 48%,
        #191919 100%
    );
}


/*==================================================
EFECTO DE FONDO
==================================================*/

.login-wrapper::before
{
    content:"";

    position:absolute;

    inset:-20%;

    background:
    repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 75px,
        rgba(255,255,255,.018) 75px,
        rgba(255,255,255,.018) 76px
    );

    opacity:.8;

    pointer-events:none;

    animation:
    loginBackgroundMove 18s linear infinite;
}


/*==================================================
BRILLO DE FONDO
==================================================*/

.login-wrapper::after
{
    content:"";

    position:absolute;

    width:620px;

    height:620px;

    right:-220px;

    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.14),
        rgba(215,25,32,.035) 40%,
        transparent 70%
    );

    pointer-events:none;

    animation:
    loginGlow 10s ease-in-out infinite;
}


/*==================================================
DECORACIÓN EXTRA
==================================================*/

.login-wrapper
{
    isolation:isolate;
}


/*==================================================
CARD
==================================================*/

.login-card
{
    position:relative;

    z-index:5;

    width:100%;

    max-width:450px;

    padding:45px;

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

    border:
    1px solid rgba(255,255,255,.75);

    border-radius:24px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.38),
    0 0 0 1px rgba(215,25,32,.04);

    backdrop-filter:blur(16px);

    overflow:hidden;
}


/*==================================================
DETALLE SUPERIOR
==================================================*/

.login-card::before
{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:
    linear-gradient(
        90deg,
        #8f000b,
        #d71920,
        #ff4b4b,
        #d71920,
        #8f000b
    );
}


/*==================================================
DETALLE ROJO INTERNO
==================================================*/

.login-card::after
{
    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-100px;

    top:-100px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.08),
        transparent 70%
    );

    pointer-events:none;
}


/*==================================================
TÍTULO
==================================================*/

.login-title
{
    position:relative;

    z-index:2;

    margin:0;

    color:#151515;

    font-size:
    clamp(1.7rem,4vw,2.15rem);

    line-height:1.1;

    font-weight:850;

    text-align:center;

    letter-spacing:-.7px;
}


/*==================================================
LÍNEA ROJA
==================================================*/

.login-title::after
{
    content:"";

    display:block;

    width:42px;

    height:3px;

    margin:12px auto 0;

    background:
    linear-gradient(
        90deg,
        #d71920,
        #ff4b4b
    );

    border-radius:10px;
}


/*==================================================
SUBTÍTULO
==================================================*/

.login-subtitle
{
    position:relative;

    z-index:2;

    margin:
    14px 0 32px;

    color:#707070;

    text-align:center;

    font-size:.88rem;

    line-height:1.6;
}


/*==================================================
FORM
==================================================*/

.login-form
{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;
}


/*==================================================
GROUP
==================================================*/

.input-group
{
    margin-bottom:20px;
}


/*==================================================
LABEL
==================================================*/

.input-group label
{
    display:block;

    margin-bottom:8px;

    color:#222;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.2px;
}


/*==================================================
INPUT
==================================================*/

.input-group input
{
    display:block;

    width:100%;

    height:54px;

    padding:
    0 16px;

    color:#171717;

    background:#f7f7f7;

    border:
    1px solid #dedede;

    border-radius:12px;

    outline:none;

    font-family:inherit;

    font-size:.88rem;

    transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}


/*==================================================
PLACEHOLDER
==================================================*/

.input-group input::placeholder
{
    color:#9a9a9a;
}


/*==================================================
FOCUS
==================================================*/

.input-group input:focus
{
    color:#171717;

    background:#fff;

    border-color:
    var(--primary, #d71920);

    box-shadow:
    0 0 0 4px rgba(215,25,32,.10);

    transform:
    translateY(-1px);
}


/*==================================================
BOTÓN
==================================================*/

.btn-login
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:54px;

    margin-top:4px;

    padding:0 20px;

    overflow:hidden;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #d71920 0%,
        #b30816 100%
    );

    box-shadow:
    0 10px 25px rgba(215,25,32,.22);

    font-family:inherit;

    font-size:.86rem;

    font-weight:800;

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}


/*==================================================
BRILLO BOTÓN
==================================================*/

.btn-login::before
{
    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:65%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:
    skewX(-25deg);

    transition:
    left .8s ease;

    pointer-events:none;
}


.btn-login:hover::before
{
    left:150%;
}


/*==================================================
HOVER BOTÓN
==================================================*/

.btn-login:hover
{
    transform:
    translateY(-3px);

    background:
    linear-gradient(
        135deg,
        #ed252d 0%,
        #c20f1b 100%
    );

    box-shadow:
    0 16px 32px rgba(215,25,32,.30);
}


/*==================================================
ACTIVE
==================================================*/

.btn-login:active
{
    transform:
    translateY(-1px);
}


/*==================================================
ERROR
==================================================*/

.login-error-container
{
    position:fixed;

    top:25px;

    left:50%;

    width:
    min(520px,calc(100% - 30px));

    z-index:2147483647;

    transform:
    translateX(-50%);
}


/*==================================================
ERROR CARD
==================================================*/

.login-error-card
{
    position:relative;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    overflow:hidden;

    background:#fff;

    border:
    1px solid rgba(215,25,32,.12);

    border-left:
    4px solid #d71920;

    border-radius:14px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.22);

    animation:
    fadeDown .45s ease;
}


/*==================================================
ERROR LIGHT
==================================================*/

.login-error-light
{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(215,25,32,.08),
        transparent 65%
    );

    pointer-events:none;
}


/*==================================================
ERROR ICON
==================================================*/

.login-error-icon
{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    flex-shrink:0;

    background:
    rgba(215,25,32,.09);

    border-radius:50%;
}


.login-error-icon svg
{
    width:25px;

    height:25px;

    fill:none;

    stroke:#d71920;

    stroke-width:2;
}


/*==================================================
ERROR CONTENT
==================================================*/

.login-error-content
{
    position:relative;

    z-index:2;

    min-width:0;
}


.login-error-content h3
{
    margin:
    0 0 4px;

    color:#181818;

    font-size:.95rem;

    font-weight:800;
}


.login-error-content p
{
    margin:0;

    color:#777;

    font-size:.78rem;

    line-height:1.5;
}


/*==================================================
ANIMACIÓN ERROR
==================================================*/

@keyframes fadeDown
{
    from
    {
        opacity:0;

        transform:
        translateY(-20px);
    }

    to
    {
        opacity:1;

        transform:
        translateY(0);
    }
}


/*==================================================
ANIMACIÓN FONDO
==================================================*/

@keyframes loginBackgroundMove
{
    0%
    {
        transform:
        translate3d(0,0,0);
    }

    50%
    {
        transform:
        translate3d(35px,20px,0);
    }

    100%
    {
        transform:
        translate3d(0,0,0);
    }
}


@keyframes loginGlow
{
    0%,
    100%
    {
        transform:
        translate3d(0,0,0);

        opacity:.75;
    }

    50%
    {
        transform:
        translate3d(-25px,25px,0);

        opacity:1;
    }
}


/*==================================================
TABLET
==================================================*/

@media(max-width:992px)
{
    .login-wrapper
    {
        padding:
        35px 18px;
    }


    .login-card
    {
        max-width:430px;

        padding:40px;
    }
}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px)
{
    .login-wrapper
    {
        min-height:100svh;

        padding:
        25px 15px;
    }


    .login-card
    {
        max-width:420px;

        padding:34px 28px;

        border-radius:20px;
    }


    .login-title
    {
        font-size:
        clamp(1.6rem,7vw,1.9rem);
    }


    .login-subtitle
    {
        margin-bottom:26px;

        font-size:.82rem;
    }


    .input-group
    {
        margin-bottom:17px;
    }


    .input-group input
    {
        height:52px;
    }


    .btn-login
    {
        height:52px;
    }
}


/*==================================================
MOBILE PEQUEÑO
==================================================*/

@media(max-width:576px)
{
    .login-wrapper
    {
        padding:
        20px 12px;
    }


    .login-card
    {
        padding:
        30px 20px;

        border-radius:18px;
    }


    .login-title
    {
        font-size:1.55rem;
    }


    .login-subtitle
    {
        margin-top:11px;

        margin-bottom:24px;

        font-size:.78rem;

        line-height:1.5;
    }


    .input-group label
    {
        font-size:.74rem;
    }


    .input-group input
    {
        height:50px;

        padding:
        0 14px;

        font-size:.84rem;

        border-radius:10px;
    }


    .btn-login
    {
        height:50px;

        border-radius:10px;

        font-size:.82rem;
    }


    .login-error-container
    {
        top:15px;

        width:
        calc(100% - 24px);
    }


    .login-error-card
    {
        gap:11px;

        padding:14px;

        border-radius:12px;
    }


    .login-error-icon
    {
        width:42px;

        height:42px;
    }


    .login-error-icon svg
    {
        width:21px;

        height:21px;
    }


    .login-error-content h3
    {
        font-size:.86rem;
    }


    .login-error-content p
    {
        font-size:.7rem;
    }
}


/*==================================================
MOBILE MUY PEQUEÑO
==================================================*/

@media(max-width:380px)
{
    .login-wrapper
    {
        padding:
        15px 10px;
    }


    .login-card
    {
        padding:
        26px 17px;
    }


    .login-title
    {
        font-size:1.4rem;
    }


    .login-subtitle
    {
        font-size:.74rem;

        margin-bottom:20px;
    }


    .input-group input
    {
        height:48px;

        font-size:.8rem;
    }


    .btn-login
    {
        height:48px;
    }
}


/*==================================================
ACCESIBILIDAD
==================================================*/

.input-group input:focus-visible,
.btn-login:focus-visible
{
    outline:
    2px solid #d71920;

    outline-offset:
    3px;
}


/*==================================================
REDUCIR MOVIMIENTO
==================================================*/

@media(prefers-reduced-motion:reduce)
{
    .login-wrapper::before,
    .login-wrapper::after
    {
        animation:none;
    }


    .btn-login,
    .btn-login::before,
    .input-group input
    {
        transition:none;
    }


    .login-error-card
    {
        animation:none;
    }
}