:root {
    --primary: #6FCF97;
    --primary-dark: #27AE60;
    --primary-soft: rgba(111, 207, 151, 0.1);
    --bg: #F0F2F5;
    --text: #1A1F36;
    --text-light: #6B7280;
    --white: #FFFFFF;
    --input-border: #E5E7EB;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
    --error-bg: #FEF2F2;
    --error-border: #FEE2E2;
    --error-text: #DC2626;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Container principal */
.login-wrapper {
    display: flex;
    width: 100%;
    max-width: 1000px;
    background: var(--white);
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lado da Logo - com elementos de engenharia */
.brand-side {
    flex: 1;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Elementos geométricos de fundo - inspirados em engenharia */
.brand-side::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        /* Linhas de gráfico/diagrama */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(255, 255, 255, 0.03) 20px,
            rgba(255, 255, 255, 0.03) 40px
        ),
        /* Círculos concêntricos - como planta baixa */
        radial-gradient(
            circle at 30% 40%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 40%
        );
    pointer-events: none;
}

/* Elementos de engenharia - engrenagens */
.brand-side::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        /* Engrenagem grande */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.03"><path fill="white" d="M50 20 L55 30 L65 30 L70 20 L80 25 L75 35 L85 40 L80 50 L90 55 L85 65 L75 60 L70 70 L60 65 L55 75 L45 75 L40 65 L30 70 L25 60 L15 65 L10 55 L20 50 L15 40 L25 35 L20 25 L30 20 L35 30 L45 30 L50 20 Z"/><circle cx="50" cy="50" r="15" fill="white"/></svg>'),
        /* Engrenagem média */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" opacity="0.03"><path fill="white" d="M40 15 L44 25 L54 25 L58 15 L68 20 L64 30 L74 35 L70 45 L80 50 L74 60 L64 55 L60 65 L50 60 L46 70 L34 70 L30 60 L20 65 L14 55 L24 50 L18 40 L28 35 L24 25 L34 20 L38 30 L48 30 L52 20 L42 15 L40 15 Z"/><circle cx="40" cy="40" r="12" fill="white"/></svg>'),
        /* Engrenagem pequena */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" opacity="0.03"><path fill="white" d="M30 10 L34 20 L44 20 L48 10 L58 15 L54 25 L64 30 L58 40 L48 35 L44 45 L34 45 L30 35 L20 40 L14 30 L24 25 L20 15 L30 10 Z"/><circle cx="30" cy="30" r="9" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: 90% 20%, 10% 80%, 50% 50%;
    background-size: 150px, 120px, 80px;
    pointer-events: none;
}

/* Linhas de blueprint/projeto */
.blueprint-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Linhas horizontais de projeto */
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 29px,
            rgba(255, 255, 255, 0.02) 29px,
            rgba(255, 255, 255, 0.02) 30px
        ),
        /* Linhas verticais de projeto */
        repeating-linear-gradient(
            to right,
            transparent,
            transparent 29px,
            rgba(255, 255, 255, 0.02) 29px,
            rgba(255, 255, 255, 0.02) 30px
        );
    pointer-events: none;
}

/* Elementos de consultoria - ícones flutuantes */
.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.floating-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.1);
    font-size: 24px;
    animation: float 6s ease-in-out infinite;
}

.floating-icon:nth-child(1) {
    top: 15%;
    left: 15%;
    font-size: 32px;
    animation-delay: 0s;
}

.floating-icon:nth-child(2) {
    top: 70%;
    left: 20%;
    font-size: 28px;
    animation-delay: 1s;
}

.floating-icon:nth-child(3) {
    top: 25%;
    right: 15%;
    font-size: 36px;
    animation-delay: 2s;
}

.floating-icon:nth-child(4) {
    bottom: 20%;
    right: 25%;
    font-size: 30px;
    animation-delay: 3s;
}

.floating-icon:nth-child(5) {
    top: 45%;
    left: 10%;
    font-size: 26px;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.logo-container {
    text-align: center;
    position: relative;
    z-index: 10;
}

.logo-icon {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho no ícone */
.logo-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0.5;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.logo-icon i {
    font-size: 56px;
    color: white;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    z-index: 2;
}

.brand-side h1 {
    color: white;
    font-size: 32px;
    font-weight: 700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    position: relative;
    z-index: 10;
}

/* Tags de especialidades */
.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

.expertise-tag {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 8px 16px;
    border-radius: 40px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.expertise-tag:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.expertise-tag i {
    margin-right: 6px;
    font-size: 12px;
}

/* Lado do Login */
.login-side {
    flex: 1;
    padding: 60px 56px;
    background: white;
}

.login-header {
    margin-bottom: 40px;
}

.login-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.login-header p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.5;
}

/* Formulário */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    color: var(--text-light);
    font-size: 18px;
    transition: color 0.2s ease;
}

input {
    width: 100%;
    height: 54px;
    padding: 0 48px;
    border: 2px solid var(--input-border);
    border-radius: 14px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    outline: none;
    background: #F9FAFB;
}

input:hover {
    background: white;
    border-color: #D1D5DB;
}

input:focus {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px var(--primary-soft);
}

input:focus + .input-icon {
    color: var(--primary);
}

.toggle-password {
    position: absolute;
    right: 16px;
    color: var(--text-light);
    cursor: pointer;
    font-size: 18px;
    transition: color 0.2s ease;
}

.toggle-password:hover {
    color: var(--primary);
}

/* Botão */
.btn-login {
    width: 100%;
    height: 54px;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(39, 174, 96, 0.3);
}

.btn-login:hover::before {
    left: 100%;
}

.btn-login:active {
    transform: translateY(0);
}

.btn-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-login i {
    margin-right: 8px;
}

/* Mensagem de erro */
.error {
    margin-top: 20px;
    padding: 14px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 12px;
    color: var(--error-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Responsividade */
@media (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
        max-width: 450px;
    }

    .brand-side {
        padding: 40px 32px;
    }

    .login-side {
        padding: 40px 32px;
    }

    .brand-side h1 {
        font-size: 28px;
    }

    .login-header h2 {
        font-size: 26px;
    }
    
    .expertise-tag {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .login-side {
        padding: 32px 24px;
    }

    .brand-side {
        padding: 32px 24px;
    }

    .logo-icon {
        width: 100px;
        height: 100px;
    }

    .logo-icon i {
        font-size: 48px;
    }

    .brand-side h1 {
        font-size: 24px;
    }
    
    .expertise-tags {
        gap: 6px;
    }
    
    .expertise-tag {
        padding: 4px 10px;
        font-size: 11px;
    }
}