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

        :root {
            --negro:          #000000;
            --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;
        }

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

        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-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);
        }

        .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: 0.5rem;
        }

        /* SUBTITULO */
        .subtitle {
            font-size: 0.9rem;
            color: var(--texto-sec);
            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);
        }

        button[type="submit"]:hover {
            background: #7D1628;

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

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

        .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;
            }
        }