/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E RECUPERAÇÃO DE SENHA
   ========================================================================== */
body.login-page-body {
    padding-top: 0 !important; 
    background-color: #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* Reutilização da classe do Perfil para Recuperação de Senha */
.card-jhap {
    background-color: #ffffff;
    border-radius: 35px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.text-roxo-jhap {
    color: var(--roxo-principal) !important;
}

/* ==========================================================================
   2. CONTAINER LOGIN - DESKTOP (EIXO X)
   ========================================================================== */
.container-login {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    width: 1000px;
    max-width: 95%;
    min-height: 600px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in { left: 0; width: 50%; z-index: 2; }
.sign-up { left: 0; width: 50%; opacity: 0; z-index: 1; }

.container-login.active .sign-in { transform: translateX(100%); opacity: 0; }
.container-login.active .sign-up { transform: translateX(100%); opacity: 1; z-index: 5; }

.form-container form {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
}

.label-login {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
    display: block;
}

.form-container input {
    background-color: #D9D9D9;
    border: none;
    margin-bottom: 12px;
    padding: 10px 20px;
    font-size: 0.9rem;
    border-radius: 12px;
    width: 100%;
    outline: none;
}

.btn-login-main {
    background-color: var(--roxo-principal);
    color: #fff;
    padding: 12px 50px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.sign-up .btn-login-main { background-color: var(--azul-escuro); }

/* --- TOGGLE DESKTOP --- */
.toggle-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    z-index: 1000;
    border-radius: 100px 0 0 100px;
}

.container-login.active .toggle-container {
    transform: translateX(-100%);
    border-radius: 0 100px 100px 0;
}

.toggle {
    height: 100%;
    background: linear-gradient(to right, var(--roxo-principal), var(--azul-escuro));
    color: #fff;
    position: relative;
    left: -100%;
    width: 200%;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.container-login.active .toggle { transform: translateX(50%); }

.toggle-panel {
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 60px;
    text-align: center;
    top: 0;
}

.toggle-left { transform: translateX(-200%); transition: all 0.6s; }
.container-login.active .toggle-left { transform: translateX(0); }

.toggle-right { right: 0; transform: translateX(0); transition: all 0.6s; }
.container-login.active .toggle-right { transform: translateX(200%); }

.btn-toggle-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 40px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   3. MOBILE (EIXO Y - VERTICAL)
   ========================================================================== */

@media (max-width: 768px) {
    .container-login {
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        border-radius: 0;
    }

    .form-container {
        width: 100% !important;
        height: 70% !important;
        left: 0 !important;
        transition: all 0.6s ease-in-out;
    }

    /* MODO SIGN-IN (Login): Form em cima, Toggle embaixo */
    .sign-in { top: 0; opacity: 1; z-index: 5; }
    .sign-up { top: 30%; opacity: 0; z-index: 1; }

    /* MODO SIGN-UP (Cadastro): Toggle em cima, Form desce para os 30% restantes */
    .container-login.active .sign-in { transform: none !important; opacity: 0; }
    .container-login.active .sign-up { 
        transform: none !important; 
        opacity: 1; 
        z-index: 5;
        top: 30% !important; /* 👈 DESCE O FORMULÁRIO PARA NÃO SER COBERTO */
    }

    .toggle-container {
        left: 0 !important;
        top: 70% !important; 
        width: 100% !important;
        height: 30% !important;
        border-radius: 40px 40px 0 0 !important;
        transform: none !important;
    }

    .container-login.active .toggle-container {
        transform: translateY(-233.3%) !important; 
        border-radius: 0 0 40px 40px !important;
    }

    .toggle {
        width: 100% !important;
        height: 200% !important;
        left: 0 !important;
        top: -100% !important;
        transform: none !important;
        background: linear-gradient(to bottom, var(--azul-escuro), var(--roxo-principal));
    }

    .container-login.active .toggle { transform: translateY(50%) !important; }

    .toggle-panel { width: 100% !important; height: 50% !important; left: 0 !important; padding: 0 40px !important; }
    .toggle-left { top: 0; transform: translateY(-100%); }
    .container-login.active .toggle-left { transform: translateY(0); }
    .toggle-right { bottom: 0; top: auto; transform: translateY(0); }
    .container-login.active .toggle-right { transform: translateY(100%); }

    .toggle-panel h1 { font-size: 1.6rem !important; }
    .toggle-panel p { font-size: 0.85rem !important; }
}