:root {
    /* Palette - Darker Pastel Blue (Professional & Smooth) */
    --primary-50: #e8eaf6;
    --primary-100: #c5cae9;
    --primary-200: #9fa8da;
    --primary-300: #7986cb;
    --primary-400: #5c6bc0;
    --primary-500: #3f51b5;
    --primary-600: #3949ab;
    --primary-700: #303f9f;
    --primary-800: #283593;

    /* Neutrals */
    --neutral-bg: #f5f7fa;
    --neutral-card: #ffffff;
    --text-main: #343a40;
    --text-sec: #6c757d;

    /* Radius & Shadows */
    --radius-card: 24px;
    --radius-input: 12px;
    --shadow-card: 0 10px 30px rgba(63, 81, 181, 0.15);

    /* Animation */
    --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--neutral-bg);
    /* Soft radial background */
    background-image:
            radial-gradient(circle at 15% 50%, rgba(121, 134, 203, 0.15), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(63, 81, 181, 0.15), transparent 25%);
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
}

.login-wrapper {
    width: 100%;
    max-width: 850px;
    /* Reduced width */
    padding: 15px;
    z-index: 10;
}

.login-card {
    background: var(--neutral-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: row;
    /* Desktop Default: Left Blue, Right Form */
    overflow: hidden;
    min-height: 500px;
    /* Reduced height */
    position: relative;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .login-card {
        flex-direction: column;
        max-width: 400px;
        margin: 0 auto;
        min-height: auto;
    }

    .blue-side {
        flex-direction: row;
        padding: 0.5rem 1rem;
        min-height: auto;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
    }

    .blue-side .logo-area {
        width: 75px;
        height: 75px;
        padding: 8px;
        border-radius: 16px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .blue-side h2 {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }

    .blue-side > div[style] {
        flex-direction: row !important;
        gap: 10px;
        width: auto !important;
    }

    .form-side {
        padding: 2rem !important;
    }
}

/* LEFT SIDE: Blue Decorative Panel */
.blue-side {
    flex: 1;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2rem;
    color: white;
    text-align: center;
}

/* Floating Bubbles Animation */
.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.bubble-1 {
    width: 150px;
    height: 150px;
    top: -20px;
    left: -40px;
    animation-duration: 8s;
}

.bubble-2 {
    width: 100px;
    height: 100px;
    bottom: 40px;
    right: -20px;
    animation-duration: 6s;
    animation-delay: 1s;
}

.bubble-3 {
    width: 60px;
    height: 60px;
    top: 40%;
    right: 20%;
    animation-duration: 10s;
    animation-delay: 2s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Hide default browser password reveal button */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* Inputs modernos */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Logo Area */
.logo-area {
    position: relative;
    z-index: 2;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 45px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* RIGHT SIDE: Form Panel */
.form-side {
    flex: 1.1;
    background: #fff;
    padding: 2.5rem 3rem;
    /* Tighter padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-text h2 {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.header-text p {
    color: var(--text-sec);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* Form Inputs Fix */
.form-floating {
    margin-bottom: 1rem;
}

.form-floating>.form-control {
    border: 1px solid #ced4da;
    border-radius: var(--radius-input);
    background: transparent;
    /* Fix background issue */
    height: 50px;
    line-height: normal;
}

.form-floating>.form-control:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(63, 81, 181, 0.1);
}

.form-floating>label {
    padding: 12px 14px;
    /* Adjust label position */
    color: #6c757d;
}

.btn-login {
    background: var(--primary-500);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-input);
    padding: 0.8rem;
    width: 100%;
    border: none;
    transition: var(--transition);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    /* Space for footer */
}

.btn-login:hover {
    background: var(--primary-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.2);
}

.footer-sm {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.link-forgot {
    font-size: 0.9rem;
    color: var(--primary-500);
    text-decoration: none;
    font-weight: 500;
}

/* Ondas decorativas */
#divondas {
    opacity: 0.3;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE3NC40NzA2NCIgaGVpZ2h0PSI0Ni4zNDU5NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogPGcgY2xhc3M9ImxheWVyIj4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggZD0ibTAsMjcuNTljMCwwIDI5LjUzLDcuNiA0Ni41OCw3LjFjMTcuMDYsLTAuNSA1NS40NiwtMTIuOTQgNzcuNzUsLTE3LjE2YzIyLjI5LC00LjIxIDUwLjEzLDEwLjA2IDUwLjEzLDEwLjA2bDAsMTguNzZsLTE3NC40NywwbDAsLTE4Ljc2eiIgZmlsbD0iIzAwNzhjZSIgaWQ9InN2Z18xIiBvcGFjaXR5PSIwLjM1Ii8+CiA8L2c+Cjwvc3ZnPg==) center bottom / 500px repeat-x;
    position: fixed !important;
    height: 400px !important;
    width: 100% !important;
    bottom: 0;
    left: 0;
    animation: 5s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite normal none running wave;
    z-index: 0 !important;
    pointer-events: none;
}

#divondas2 {
    opacity: 0.3;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE3NC40NzA2NCIgaGVpZ2h0PSI0Ni4zNDU5NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogPGcgY2xhc3M9ImxheWVyIj4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggZD0ibTAsMjcuNTljMCwwIDM2LjE5LC0yMi4wMyA2Ni44MywtNS4yNWMzMC42NCwxNi43OCA1Mi4yNSwxMy45NyA2OS4zNiwxMy43MWMxNy4xMSwtMC4yNiAzOC4yOCwtOC40NiAzOC4yOCwtOC40NmwwLDE4Ljc2bC0xNzQuNDcsMGwwLC0xOC43NnoiIGZpbGw9IiMwMDc4Y2UiIGlkPSJzdmdfMSIgb3BhY2l0eT0iMC4zNSIvPgogPC9nPgo8L3N2Zz4=) center bottom / 500px repeat-x;
    position: fixed !important;
    height: 400px !important;
    width: 100% !important;
    bottom: 0;
    left: 0;
    animation: 4s cubic-bezier(0.36, 0.45, 0.63, 0.53) 0s infinite normal none running wave;
    z-index: 0 !important;
    pointer-events: none;
    transition: opacity 0.3s;
}

@keyframes wave {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -500px;
    }
}

#divondas:hover {
    opacity: 0.1;
}

#divondas2:hover {
    opacity: 0.1;
}

/* Ajuste para garantir que o login-wrapper fique acima das ondas */
.login-wrapper {
    position: relative;
    z-index: 10;
}

/* Se necessário, ajuste o z-index do login-card também */
.login-card {
    position: relative;
    z-index: 20;
}