/* Garante que o corpo da página ocupe toda a altura da tela */
            html,
            body {
                height: 100%;
                margin: 0;
            }

            body {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            /* O header e o conteúdo principal crescem para empurrar o footer para baixo */
            header {
                flex: 1 0 auto;
                display: flex;
                flex-direction: column;
            }

            /* Centraliza a imagem e o conteúdo escuro */
            #intro {
                background-image: url(../images/014.jpeg);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;

                /* MUDANÇA CRUCIAL: Tiramos o position absolute */
                flex: 1;
                display: flex;
                align-items: center;
                /* Centraliza verticalmente */
                justify-content: center;
                /* Centraliza horizontalmente */
                width: 100%;
            }

            /* A camada escura interna */
            #intro>.d-flex {
                background-color: rgba(73, 69, 69, 0.8) !important;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Estilo do Rodapé */
                footer {
                    flex-shrink: 0;
                    background-color: #636262;
                    color: rgba(255, 255, 255, 0.8);
                    padding: 40px 0;
                    border-top: 4px solid var(--cor03-baoba);
                }

            /* Seus outros estilos permanecem iguais */
            #app {
                background-image: url("images/logo-centro370.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                min-height: 100px;
            }

            .login-card {
                padding: 2.5rem;
                /* Dá mais respiro para os elementos internos */
                background-color: #ffffff !important;
                border-radius: 2.5rem;
                box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3) !important;
            }

            /* Força o label a subir quando houver texto ou preenchimento automático */
            .form-outline .form-control.active~.form-label,
            .form-outline .form-control:focus~.form-label,
            .form-outline .form-control:-webkit-autofill~.form-label,
            .form-outline .form-control:not(:placeholder-shown)~.form-label {
                transform: translateY(-1rem) translateY(0.1rem) scale(0.8) !important;
                background-color: white;
                /* Adiciona fundo para não cortar a linha do box se necessário */
                padding-left: 4px;
                padding-right: 4px;
            }

            .form-label {
                z-index: 5;
                /* Garante que o label fique acima do fundo do input */
                pointer-events: none;
                /* Permite clicar no input através do label */
            }

            :root {
                --cor01-baoba: #540809;
                --cor02-baoba: #d16e2f;
                --cor03-baoba: #dcaf27;
                --cor04-baoba: #c9dc5d;
                --cor05-baoba: #8195AA;
                --cor06-baoba: #ca5858;
                --cor07-baoba: #4c6a3d;
                --cor08-baoba: #8e9e7a;
                --cor09-baoba: #939598;
                --cor10-baoba: #b1b0d2;
                --cor11-baoba: #d385a9;
            }

            .border-cor01 {
                border-top: 5px solid var(--cor01-baoba) !important;
            }

            .border-cor02 {
                border-top: 5px solid var(--cor02-baoba) !important;
            }

            .border-cor03 {
                border-top: 5px solid var(--cor03-baoba) !important;
            }

            .border-cor04 {
                border-top: 5px solid var(--cor04-baoba) !important;
            }

            .border-cor05 {
                border-top: 5px solid var(--cor05-baoba) !important;
            }

            .border-cor06 {
                border-top: 5px solid var(--cor06-baoba) !important;
            }

            .border-cor07 {
                border-top: 5px solid var(--cor07-baoba) !important;
            }

            .border-cor08 {
                border-top: 5px solid var(--cor08-baoba) !important;
            }

            .border-cor09 {
                border-top: 5px solid var(--cor09-baoba) !important;
            }

            .border-cor10 {
                border-top: 5px solid var(--cor10-baoba) !important;
            }

            .border-cor11 {
                border-top: 5px solid var(--cor11-baoba) !important;
            }