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

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

:root {

    /* COLORES PRINCIPALES */
    --negro: #222222;
    --corinto: #9E1B32;
    --corinto-osc: #7D1628;
    --corinto-claro: #C12746;

    --blanco: #F4EFE6;
    --blanco-sec: #ECE6DC;

    /* TEXTO */
    --texto: #222222;
    --texto-sec: #5C5C5C;

    /* BORDES */
    --borde: #D8D1C7;

    /* EFECTOS */
    --sombra: rgba(0,0,0,0.12);

    /* RADIOS */
    --radio: 14px;

    /* TRANSICIONES */
    --transicion: 0.25s ease;
}

/* RESET */

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

/* BODY */

body {
    font-family: 'Inter', sans-serif;
    background: var(--blanco);
    min-height: 100vh;

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

    padding: 2rem 1rem;

    background-image:
        radial-gradient(circle at top left,
        rgba(158,27,50,0.05),
        transparent 40%),

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

/* LOGIN CARD */

.login-container {

    width: 100%;
    max-width: 400px;

    background: #FFFFFF;

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

    border-radius: var(--radio);

    padding: 2.7rem 2.4rem;

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

/* MARCA */

.login-container::before {

    content: 'Importadora Natsuki';

    display: block;

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

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

    color: var(--corinto);

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

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

/* TITULO */

.login-container h2 {

    color: var(--texto);

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

    margin-bottom: 1.8rem;
}

/* ERROR */

.error {

    background: rgba(158,27,50,0.08);

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

    border-left: 4px solid var(--corinto);

    color: var(--corinto);

    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: var(--texto-sec);
}

/* INPUTS */

.form-group input {

    width: 100%;

    padding: 0.85rem 1rem;

    border-radius: 12px;

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

    background: var(--blanco);

    color: var(--texto);

    font-size: 0.95rem;

    outline: none;

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

/* HOVER */

.form-group input:hover {

    border-color: var(--corinto-claro);
}

/* FOCUS */

.form-group input:focus {

    background: #FFFFFF;

    border-color: var(--corinto);

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

/* BOTON */

button[type="submit"] {

    width: 100%;

    padding: 0.9rem 1rem;

    margin-top: 0.5rem;

    border: none;

    border-radius: 12px;

    background: var(--corinto);

    color: white;

    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: var(--corinto-osc);

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

/* 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 var(--borde);

    color: var(--texto-sec);

    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: var(--blanco-sec);

    border-color: var(--corinto);

    color: var(--corinto);
}

/* RESPONSIVE */

@media (max-width: 480px) {

    .login-container {

        padding: 2rem 1.5rem;
    }
}