/* ============================================
   Importadora Natsuki — Login
   Paleta: Blanco · Beige · Corinto
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ============================================
   Login Moderno - Paleta Negro, Vino y Crema
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
    --negro: #181818;
    --negro-sec: #252525;

    --vino: #A30D2D;
    --vino-osc: #7C0A21;
    --vino-claro: #C41C3F;

    --crema: #F3EEE7;
    --crema-sec: #E4D9CC;
    --borde: #D2C4B6;

    --texto: #222222;
    --texto-sec: #6B625B;

    --blanco: #FFFFFF;

    --sombra: rgba(0,0,0,0.18);

    --radio: 14px;
    --transicion: 0.25s ease;
}

/* ---------- General ---------- */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Inter', sans-serif;
    min-height: 100vh;

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

    background: var(--crema);

    background-image:
    radial-gradient(circle at top left,
    rgba(163,13,45,0.08),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(0,0,0,0.08),
    transparent 35%);
}

/* ---------- Contenedor ---------- */

.login-container{
    background: var(--blanco);
    border-radius: 22px;

    border: 1px solid var(--borde);

    box-shadow: 0 10px 35px var(--sombra);

    padding: 2.5rem !important;

    transition: transform var(--transicion);
}

.login-container:hover{
    transform: translateY(-2px);
}

/* ---------- Logo ---------- */

.logo{
    width: 90px;
    height: 90px;

    margin: 0 auto;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--vino), var(--vino-osc));

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

    box-shadow: 0 6px 18px rgba(163,13,45,0.25);
}

.logo i{
    color: var(--blanco);
    font-size: 3rem;
}

/* ---------- Títulos ---------- */

h2{
    color: var(--negro);
    font-weight: 700;
    margin-top: 1rem;
}

.text-muted{
    color: var(--texto-sec) !important;
    margin-bottom: 1.8rem;
}

/* ---------- Alertas ---------- */

.alert-danger{
    border: none;
    border-left: 4px solid var(--vino);

    background: #FFF1F3;
    color: var(--vino-osc);

    border-radius: 10px;
}

/* ---------- Labels ---------- */

.form-label{
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 0.45rem;
}

/* ---------- Inputs ---------- */

.input-group-text{
    background: var(--negro);
    color: var(--blanco);

    border: 1px solid var(--negro);

    border-radius: 12px 0 0 12px;
}

.form-control{
    border: 1px solid var(--borde);

    padding: 0.75rem 1rem;

    background: #FCFAF8;

    transition: all var(--transicion);
}

.form-control:focus{
    border-color: var(--vino);

    box-shadow: 0 0 0 0.2rem rgba(163,13,45,0.15);

    background: var(--blanco);
}

/* ---------- Botón ojo ---------- */

#togglePassword{
    border: 1px solid var(--borde);
    background: var(--crema);
    color: var(--texto-sec);

    transition: all var(--transicion);
}

#togglePassword:hover{
    background: var(--vino);
    color: var(--blanco);
    border-color: var(--vino);
}

/* ---------- Checkbox ---------- */

.form-check-input:checked{
    background-color: var(--vino);
    border-color: var(--vino);
}

/* ---------- Botón principal ---------- */

.btn-primary{
    background: linear-gradient(135deg, var(--vino), var(--vino-osc));
    border: none;

    padding: 0.85rem;

    font-weight: 600;

    border-radius: 12px;

    transition: all var(--transicion);
}

.btn-primary:hover{
    background: linear-gradient(135deg, var(--vino-claro), var(--vino));
    
    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(163,13,45,0.28);
}

/* ---------- Links ---------- */

.extra-links a{
    color: var(--texto-sec);

    transition: all var(--transicion);

    font-weight: 500;
}

.extra-links a:hover{
    color: var(--vino);

    transform: translateY(-1px);
}

/* ---------- Responsive ---------- */

@media(max-width: 480px){

    .login-container{
        padding: 2rem 1.4rem !important;
    }

    .extra-links{
        flex-direction: column;
        gap: 0.8rem;
    }
}