:root{
    --sw-pink: #E6169C;
    --sw-pink-light: #FF3FB4;
    --sw-purple: #5B21B6;
    --sw-purple-dark: #4C1D95;
    --sw-gradient: linear-gradient(135deg, var(--sw-pink) 0%, var(--sw-purple) 100%);
}

body{
    background-color:#fdf2f8
}

#auth{
    min-height:100vh;
    overflow-x:hidden;
    background: #fdf2f8;
}

#auth .row{
    height: 100%;
    margin: 0;
}

/* Painel esquerdo: card branco flutuante, centralizado */
#auth #auth-left-wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

#auth #auth-left{
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(91, 33, 182, 0.12);
    padding: 3rem 3.5rem;
    width: 100%;
    max-width: 480px;
    height: auto;
}

#auth #auth-left.auth-left-wide{
    max-width: 640px;
    padding: 3rem;
}

#auth #auth-left.auth-left-wide #btn-consulta{
    padding: 0.85rem 1rem;
    margin-bottom: 0;
}

#auth #auth-left .auth-logo{
    margin-bottom: 2rem;
    text-align: left;
    position: relative;
}

#auth #auth-left .auth-logo img{
    height: auto;
    min-height: 110px;
    width: auto;
    max-width: 100%;
}

#auth #auth-left .auth-title{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1a1a2e;
}

#auth #auth-left .auth-subtitle{
    color: #8b8b9e;
    font-size: 1rem;
    line-height: 1.6rem;
    margin-bottom: 1.5rem;
}

/* Inputs com ícone, estilo arredondado */
#auth #auth-left .form-control{
    border-radius: 12px;
    border: 1px solid #e5e0eb;
    padding: 0.85rem 1rem 0.85rem 2.8rem;
    height: auto;
    background-color: #fafafd;
}

#auth #auth-left .form-control:focus{
    border-color: var(--sw-purple);
    box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
    background-color: #fff;
}

/* Select2 (campo Cidade) - alinhar visual com os demais inputs */
#auth #auth-left .select2-container{
    width: 100% !important;
}

#auth #auth-left .select2-container--default .select2-selection--single{
    border-radius: 12px;
    border: 1px solid #e5e0eb;
    background-color: #fafafd;
    height: calc(1.5em + 1.7rem + 2px);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
}

#auth #auth-left .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding: 0;
    line-height: normal;
    color: #495057;
}

#auth #auth-left .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 100%;
    right: 0.75rem;
}

#auth #auth-left .select2-container--default.select2-container--focus .select2-selection--single,
#auth #auth-left .select2-container--default.select2-container--open .select2-selection--single{
    border-color: var(--sw-purple);
    box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
}

#auth #auth-left .form-control-icon{
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #b0aabb;
    font-size: 1.1rem;
}

#auth #auth-left .form-check-input:checked{
    background-color: var(--sw-purple);
    border-color: var(--sw-purple);
}

#auth #auth-left a.text-sublinhado{
    color: var(--sw-purple);
    text-decoration: underline;
}

/* Botão principal: gradiente rosa -> roxo */
#auth #auth-left .btn-primary{
    background: var(--sw-gradient);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    padding: 0.9rem 1.5rem;
    box-shadow: 0 8px 20px rgba(230, 22, 156, 0.25);
    transition: opacity 0.2s ease;
}

#auth #auth-left .btn-primary:hover{
    opacity: 0.92;
}

/* Botão secundário: contorno roxo */
#auth #auth-left .btn-success{
    background: #fff;
    border: 1px solid var(--sw-purple);
    color: var(--sw-purple);
    border-radius: 12px;
    font-weight: 600;
    padding: 0.85rem 1.5rem;
}

#auth #auth-left .btn-success:hover{
    background: #faf5ff;
}

/* Painel direito: imagem de fundo definitiva */
#auth #auth-right{
    background: url(/imgs/background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100%;
    min-height: 100vh;
}

#auth #auth-left .auth-footer-note{
    color: #a8a2b3;
    font-size: 0.8rem;
}

@media screen and (max-width: 767px){
    #auth #auth-left{
        padding: 2.5rem 2rem;
    }
}

@media screen and (max-width: 576px){
    #auth #auth-left{
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }
}

body.theme-dark #auth-right{
    background: var(--sw-gradient);
}