/* ============================================
   Importadora Natsuki — Login
   Paleta Oficial
============================================ */

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

:root {
    --negro:          #222222;
    --corinto:        #9E1B32;
    --corinto-osc:    #7D1628;
    --corinto-claro:  #b52038;

    --blanco:         #F4EFE6;
    --blanco-sec:     #EBE5DB;

    --texto:          #F4EFE6;
    --texto-sec:      #C4BDB4;

    --borde:          rgba(244, 239, 230, 0.15);

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

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

/* RESET */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* BODY */
body {
    font-family: 'Inter', sans-serif;
    background: #222222;
    min-height: 100vh;

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

    padding: 2rem 1rem;
    color: #F4EFE6;
    background-image:
        radial-gradient(circle at top left,
        rgba(158, 27, 50, 0.12),
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(158, 27, 50, 0.12),
        transparent 40%);
}

/* LOGIN CARD */
.login-container {
    width: 100%;
    max-width: 400px;

    background: #2a2a2a;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radio);

    padding: 2.7rem 2.4rem;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* MARCA */
.login-container::before {
    content: 'Importadora Natsuki';

    display: block;

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #F4EFE6;

    margin-bottom: 2rem;
    padding-bottom: 1.2rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* TITULO */
.login-container h2 {
    color: #F4EFE6;

    font-size: 1.6rem;
    font-weight: 600;

    margin-bottom: 1.8rem;
}

/* ERROR */
.error {
    background: rgba(158, 27, 50, 0.15);

    border: 1px solid rgba(158, 27, 50, 0.25);

    border-left: 4px solid #9E1B32;

    color: #F4EFE6;

    padding: 0.8rem 1rem;

    border-radius: 10px;

    font-size: 0.9rem;

    margin-bottom: 1.3rem;
}

/* FORM GROUP */
.form-group {
    display: flex;
    flex-direction: column;

    gap: 0.45rem;

    margin-bottom: 1.3rem;
}

/* LABELS */
.form-group label {
    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #F4EFE6;
}

/* INPUTS */
.form-group input {
    width: 100%;

    padding: 0.85rem 1rem;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background: #333333;

    color: #F4EFE6;

    font-size: 0.95rem;

    outline: none;

    transition:
        border-color var(--transicion),
        box-shadow var(--transicion),
        background var(--transicion);
}

.form-group input::placeholder {
    color: rgba(244, 239, 230, 0.3);
}

/* HOVER */
.form-group input:hover {
    border-color: #b52038;
}

/* FOCUS */
.form-group input:focus {
    background: #2f2f2f;

    border-color: #9E1B32;

    box-shadow: 0 0 0 4px rgba(158, 27, 50, 0.18);
}

/* BOTON */
button[type="submit"] {
    width: 100%;

    padding: 0.9rem 1rem;

    margin-top: 0.5rem;

    border: none;

    border-radius: 12px;

    background: #9E1B32;

    color: #F4EFE6;

    font-size: 0.9rem;
    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background var(--transicion),
        transform var(--transicion),
        box-shadow var(--transicion);
}

/* HOVER BOTON */
button[type="submit"]:hover {
    background: #7D1628;

    box-shadow: 0 8px 22px rgba(158, 27, 50, 0.35);
}

/* CLICK */
button[type="submit"]:active {
    transform: scale(0.98);
}

/* BOTON SECUNDARIO */
.btn-secundario {
    display: block;

    text-align: center;

    margin-top: 1rem;

    padding: 0.8rem;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    color: #F4EFE6;

    text-decoration: none;

    font-size: 0.88rem;
    font-weight: 500;

    transition:
        background var(--transicion),
        color var(--transicion),
        border-color var(--transicion);
}

/* HOVER */
.btn-secundario:hover {
    background: rgba(255, 255, 255, 0.05);

    border-color: #9E1B32;

    color: #F4EFE6;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .login-container {
        padding: 2rem 1.5rem;
    }
}