:root {
            --primary-color: #00C896;
            --primary-dark: #5a6fd1;
            --secondary-color: #764ba2;
            --accent-color: #ff6b6b;
            --light-bg: #f8f9fa;
            --dark-text: #2d3748;
            --light-text: #f8f9fa;
        }
        
body {
    background: radial-gradient(circle at center, #00C896 0%, #003D4C 100%);
    min-height: 100vh; /* muda de height para min-height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow-x: hidden; /* permite rolar verticalmente, mas não horizontalmente */
    z-index: 0;
    margin: 0; /* evita rolagem por margem padrão */
}



body::before {
    content: "";
    position: fixed; /* importante: 'fixed' não interfere no fluxo do conteúdo */
    top: 30px;
    left: 30px;
    width: 750px;     /* ou outro valor adequado */
    height: 834px;
    background-image: url('/imagens/pagando2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}
        
        .auth-card {
            background: #141517;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 480px;
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .auth-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: radial-gradient(circle at center, #00C896 0%, #003D4C 100%);
        }
        
        .logo-container {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .logo-container img {
            max-width: 180px;
            height: auto;
        }
        
        .auth-title {
            color: var(--dark-text);
            font-weight: 700;
            text-align: center;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .auth-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            margin: 0.5rem auto 0;
            border-radius: 3px;
        }
        
         .form-control  {
    background-color: #2c2f33 !important;
    color: #ffffff !important;
    border: 2px solid #444 !important;
    padding: 10px 11px !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
    height: calc(2.5rem + 4px) !important;
    /* Ajuste para altura consistente */
}
.form-control::placeholder  {
    color: #aaa !important;
}
.form-control:focus  {
    background-color: #2c2f33 !important;
    color: #ffffff !important;
    border-color: #00C896 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.25rem rgb(102 126 234 / 0.3) !important;
}
/* Estilo para os grupos de input */
.input-group-text  {
    background-color: #3a3d42 !important;
    color: #ffffff !important;
    border: 2px solid #444 !important;
    border-right: none !important;
}
/* Ajuste para inputs com grupo */
.input-group .form-control  {
    border-left: none !important;
}


.btn-login {
    background: radial-gradient(circle at center, #00C896 0%, #003D4C 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 14px 20px;
    font-size: 1rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

.btn-login:hover {
    background-color: rgb(64, 87, 218); /* fallback em caso de erro no gradiente */
    color: #fff;
    transform: translateY(-3px); /* ← movimento para cima */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); /* sombra mais intensa */
}

 .register-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.register-link a {
    color: #00C896; /* roxo */
    text-decoration: none; /* opcional: remove sublinhado */
    font-weight: bold;     /* opcional: deixa em negrito */
}

.register-link a:hover {
    color: #00C896; /* roxo mais escuro ao passar o mouse */
    text-decoration: underline; /* opcional: feedback visual */
}
        .btn-primary {
background: radial-gradient(circle at center, #00C896 0%, #003D4C 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 14px 20px;
    font-size: 1rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    transform: translateY(0);
        }
        
        .btn-primary:hover {
    background-color: rgb(64, 87, 218); /* fallback em caso de erro no gradiente */
    color: #fff;
    transform: translateY(-3px); /* ← movimento para cima */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); /* sombra mais intensa */
        }
        .error-message {
    background-color: rgb(255, 0, 0); /* Seu vermelho */
    color: rgb(201, 203, 206);      /* Sua cor de texto */
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    /* text-align: center; */ /* REMOVA OU COMENTE ESSA LINHA. Ela é a provável causa do texto ir para a direita */

    /* Propriedades para posicionar o botão e manter o layout original */
    position: relative; /* ESSENCIAL: Serve como referência para o botão com position: absolute */
    display: flex;      /* Permite alinhar itens internos na mesma linha */
    align-items: center; /* Alinha o ícone, texto e botão verticalmente ao centro */
    /* Remova justify-content: space-between; se o texto estiver indo para a direita por causa dele */
    /* Se o texto ainda estiver indo para a direita, tente usar 'flex-start' ou simplesmente remova justify-content. */
    /* justify-content: flex-start; /* Opcional: Garante que o conteúdo principal comece à esquerda */
    padding-right: 3rem; /* Garante espaço para o botão no canto direito, sem cobrir o texto */
    box-sizing: border-box; /* Garante que padding-right seja incluído na largura total */
}

/* Garante que o ícone tenha o espaçamento correto */
.error-message .bi-exclamation-triangle-fill {
    margin-right: 0.5rem; /* Espaçamento entre o ícone e o texto */
    flex-shrink: 0; /* Impede que o ícone encolha se o espaço for limitado */
}

/* Estilos para o botão de fechar */
.error-message .btn-close {
    position: absolute !important; /* Força o posicionamento absoluto */
    right: 1rem !important;        /* Alinha 1rem da borda direita */
    top: 50% !important;           /* Move para o meio verticalmente */
    transform: translateY(-50%) !important; /* Ajuste para centralizar perfeitamente */

    /* FORÇA A COR BRANCA */
    /* Este SVG é o ícone 'x' padrão do Bootstrap, mas com o preenchimento ajustado para branco (%23fff) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    opacity: 1 !important; /* Garante que não haja transparência */
    box-shadow: none !important; /* Remove sombras de foco do Bootstrap */
    cursor: pointer !important; /* Garante que o cursor do mouse indique que é clicável */
    filter: none !important; /* Garante que não há filtros que possam interferir com a cor */
}

/* Efeito hover para o botão (opcional, mas recomendado para feedback visual) */
.error-message .btn-close:hover {
    opacity: 0.8 !important; /* Suavemente mais transparente ao passar o mouse */
}
        
        .qr-section {
            background: #2c2f33;
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            text-align: center;
            border: 1px dashed #cbd5e0;
        }
        
        .qr-container {
            margin: 1rem auto;
            padding: 1rem;
            background: white;
            border-radius: 12px;
            display: inline-block;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .qr-container img {
            width: 180px;
            height: 180px;
        }
        
        .secret-code {
            background: var(--dark-text);
            color: white;
            padding: 0.75rem;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            letter-spacing: 2px;
            text-align: center;
            margin: 1rem 0;
            word-break: break-all;
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            color: #a0aec0;
        }
        
        .divider::before, .divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .divider::before {
            margin-right: 1rem;
        }
        
        .divider::after {
            margin-left: 1rem;
        }
        
        .auth-footer {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: #718096;
        }
        
        .auth-footer a {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
        }
        
        .auth-footer a:hover {
            text-decoration: underline;
        }
        .textos-cinzas1  {
    color: rgb(201, 203, 206);
}
        .textos-cinzas2  {
    color:#00C896;
}
        /* Animações */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .auth-card {
            animation: fadeIn 0.5s ease-out;
        }
        
        /* Responsividade */
        @media (max-width: 576px) {
            .auth-card {
                padding: 1.5rem;
            }
        }