:root {
            --cor-roxa: #7F5AF0;
            --cor-roxa-hover: #6948D1;
            /* Um gradiente roxo */
            --gradiente-roxo: linear-gradient(135deg, #7F5AF0 0%, #6230E0 100%);
            --cor-preta: #1C1C1E;
            --cor-cinza: #555555;
            --cor-branca: #FFFFFF;
            --cor-fundo: #F8F9FA;
            --cor-borda: #E0E0E0;
        }

        /* Aplica o fundo suave à página */
        body {
            background-color: var(--cor-fundo) !important;
            color: var(--cor-preta);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        /* Container que centraliza o card na tela */
        .auth-container {
            min-height: 100vh;
        }

        /* Card customizado */
        .auth-card {
            border: none;
            border-radius: 1rem; /* 16px, mais arredondado */
            overflow: hidden; /* Importante para o layout dividido */
        }
        
        /* Coluna da Esquerda (Visual com Gradiente) */
        .auth-visual-col {
            background: var(--gradiente-roxo);
            color: var(--cor-branca);
            /* Escondido em telas pequenas (lg = large) */
            display: none; 
        }
        
        /* Em telas 'lg' (992px) ou maiores, o visual aparece */
        @media (min-width: 992px) {
            .auth-visual-col {
                display: flex; /* Torna visível */
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }
        }
        
        .auth-visual-col h1 {
            font-weight: 700;
            font-size: 2.5rem;
        }
        .auth-visual-col p {
            font-size: 1.1rem;
            opacity: 0.8;
        }

        /* Coluna da Direita (Formulário) */
        .auth-form-col {
            padding: 2.5rem 1.5rem; /* Mais padding */
        }
        
        @media (min-width: 576px) { /* sm */
            .auth-form-col {
                padding: 3rem;
            }
        }

        /* Placeholder da Logo */
        .auth-logo {
            font-size: 30px;
            font-weight: 700;
            color: var(--cor-roxa);
            text-align: center;
            margin-bottom: 1.5rem;
        }

        /* --- SOBRESCRITAS DO BOOTSTRAP --- */
        .btn-primary {
            background-color: var(--cor-roxa);
            border-color: var(--cor-roxa);
            font-weight: 600;
            padding-top: 0.75rem; /* Botão maior */
            padding-bottom: 0.75rem;
        }
        .btn-primary:hover {
            background-color: var(--cor-roxa-hover);
            border-color: var(--cor-roxa-hover);
        }
        .btn-primary:focus, .btn-primary.focus {
            box-shadow: 0 0 0 0.25rem rgba(127, 90, 240, 0.5); 
        }

        .form-control:focus {
            border-color: var(--cor-roxa);
            box-shadow: 0 0 0 0.25rem rgba(127, 90, 240, 0.25);
        }
        
        .form-label {
            font-weight: 500;
        }
        
        /* Inputs com ícones */
        .input-group .form-control {
            /* Remove a sombra de foco duplicada */
            box-shadow: none; 
        }
        
        .input-group-text {
            background-color: var(--cor-fundo);
            border-right: 0;
            color: var(--cor-cinza);
        }
        
        .input-group input {
            border-left: 0;
            padding-left: 0;
        }

        .input-group:focus-within .input-group-text,
        .input-group:focus-within .form-control {
            border-color: var(--cor-roxa);
            /* Aplica a sombra de foco no grupo todo */
            box-shadow: 0 0 0 0.25rem rgba(127, 90, 240, 0.25);
        }
        
        /* Links de Autenticação (Roxo) */
        .auth-link {
            color: var(--cor-roxa);
            text-decoration: none;
            font-weight: 500;
        }
        .auth-link:hover {
            color: var(--cor-roxa-hover);
            text-decoration: underline;
        }
        
        /* --- LÓGICA DAS VIEWS (Telas) --- */
        .auth-view { display: none; }
        .auth-view.active { display: block; }

        .auth-title {
            font-weight: 700;
            color: var(--cor-preta);
        }
        .auth-info {
            color: var(--cor-cinza);
        }

        #codigo-modal .modal-content {
            border-radius: 1rem;
        }

        #codigo-input {
            letter-spacing: 0.35rem;
            font-weight: 700;
        }

        #codigo-modal .btn-link {
            color: var(--cor-roxa);
            font-weight: 600;
        }

        #codigo-modal .btn-link:disabled {
            color: var(--cor-cinza);
            text-decoration: none;
            opacity: 0.7;
        }