/* ==========================================================================
   CSS para página de Login/Cadastro - Aumentar Largura
   ========================================================================== */

/* REMOVER as alturas mínimas que eu adicionei anteriormente */
.login-card .col-md-7 {
    background: white;
    padding: 3rem 2.5rem !important;
    position: relative;
    /* REMOVER: min-height: 600px; */
    /* REMOVER: display: flex; */
    /* REMOVER: flex-direction: column; */
    /* REMOVER: justify-content: center; */
}

/* Aumentar a LARGURA do card principal */
.login-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow:
        0 15px 35px rgba(30, 58, 138, 0.1),
        0 5px 15px rgba(30, 58, 138, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin: 0 auto;
    max-width: 1000px;
    /* AUMENTAR largura máxima */
    width: 100%;
}

/* Aumentar largura do container do formulário */
.login-card .col-md-7 .card-body {
    padding: 0 !important;
    width: 100%;
    max-width: 500px;
    /* Largura máxima para o conteúdo */
    margin: 0 auto;
    /* Centralizar */
}

/* Aumentar largura dos inputs */
.login-section .form-control,
.login-section .form-select {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem !important;
    /* Padding normal */
    font-size: 1rem !important;
    /* Tamanho normal */
    transition: all 0.3s ease;
    background: white;
    width: 100% !important;
    /* Garantir largura total */
    max-width: 100%;
    /* Não ultrapassar container */
}

/* Aumentar largura dos botões */
.login-section .btn {
    border-radius: var(--radius-md);
    padding: 0.875rem 1.5rem !important;
    font-weight: 600;
    font-size: 1rem !important;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    width: 100% !important;
    /* Largura total */
}

/* Aumentar área do formulário */
.login-section {
    animation: fadeIn 0.5s ease-out;
    width: 100%;
    max-width: 500px;
    /* Largura máxima do formulário */
    margin: 0 auto;
    /* Centralizar */
}

/* Ajustar container da página para ser mais largo */
.transparencia-page .container {
    max-width: 1200px !important;
    /* Container mais largo */
    padding: 0 15px;
}

/* Ajustar grid para dar mais espaço ao formulário */
.login-card .row {
    margin: 0;
}

.login-card .col-md-7 {
    flex: 0 0 58.333333% !important;
    /* Aumentar de 7/12 para ~58% */
    max-width: 58.333333% !important;
}

.login-card .col-md-5 {
    flex: 0 0 41.666667% !important;
    /* Reduzir de 5/12 para ~42% */
    max-width: 41.666667% !important;
}

/* ================ RESPONSIVIDADE COM MAIOR LARGURA ================ */

/* Desktop grande - formulário ainda mais largo */
@media (min-width: 1200px) {
    .login-card {
        max-width: 1100px;
    }

    .login-card .col-md-7 .card-body {
        max-width: 550px;
        /* Mais largo em telas grandes */
    }

    .login-section {
        max-width: 550px;
    }

    .login-card .col-md-7 {
        flex: 0 0 60% !important;
        /* 60% da largura */
        max-width: 60% !important;
    }

    .login-card .col-md-5 {
        flex: 0 0 40% !important;
        /* 40% da largura */
        max-width: 40% !important;
    }
}

/* Tablets - manter boa largura */
@media (max-width: 991.98px) {
    .login-card {
        max-width: 95%;
    }

    .login-card .col-md-7 .card-body {
        max-width: 450px;
    }

    .login-section {
        max-width: 450px;
    }
}

/* Mobile - largura total */
@media (max-width: 768px) {
    .transparencia-page .container {
        max-width: 100% !important;
        padding: 0;
    }

    .login-card {
        max-width: 100%;
        border-radius: 0;
        margin: 0;
    }

    .login-card .col-md-7,
    .login-card .col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .login-card .col-md-7 .card-body {
        max-width: 100%;
        padding: 0 1rem !important;
    }

    .login-section {
        max-width: 100%;
    }

    .login-section .form-control,
    .login-section .form-select,
    .login-section .btn {
        width: 100% !important;
    }
}

/* Mobile pequeno */
@media (max-width: 576px) {
    .login-card .col-md-7 {
        padding: 1.5rem 1rem !important;
    }

    .login-card .col-md-7 .card-body {
        padding: 0 !important;
    }
}

/* Ajustar elementos específicos para melhor aproveitamento da largura */
.login-section .form-row,
.login-section .row {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
}

.login-section .col,
.login-section [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* Para formulário de cadastro que tem selects */
#register-section .form-select {
    width: 100% !important;
    max-width: 100% !important;
}

/* Aumentar largura do select de tipo de usuário */
#user_type {
    width: 100% !important;
}

/* Ajustar checkboxes para ficarem alinhados */
.login-section .form-check {
    display: flex;
    align-items: center;
    width: 100%;
}

.login-section .form-check-input {
    flex-shrink: 0;
    margin-right: 0.5rem;
    margin-top: 0 !important;
}

.login-section .form-check-label {
    flex-grow: 1;
}

/* Aumentar área dos links */
.login-section a {
    display: inline-block;
    width: auto;
    text-align: center;
}

/* Centralizar conteúdo do formulário */
.login-card .col-md-7 .text-center {
    width: 100%;
}

/* Ajustar logo para não ficar muito grande */
.login-form-logo {
    max-height: 80px !important;
    width: auto;
    margin-bottom: 1.5rem !important;
}

/* Ajustar título */
.login-card .col-md-7 h3 {
    font-size: 1.75rem !important;
    /* Tamanho normal */
    margin-bottom: 0.75rem !important;
}

.login-card .col-md-7 .text-muted {
    font-size: 1rem !important;
    /* Tamanho normal */
    margin-bottom: 2rem !important;
}

/* REMOVER qualquer altura mínima que estava limitando */
.login-section,
#login-section,
#register-section,
#lostpassword-section {
    min-height: auto !important;
    /* Altura automática */
    height: auto !important;
}

.login-form-container {
    min-height: auto !important;
    height: auto !important;
}

/* Ajustar espaçamento entre elementos do formulário */
.login-section .mb-3 {
    margin-bottom: 1.25rem !important;
    /* Espaço normal */
}

.login-section .mb-4 {
    margin-bottom: 1.5rem !important;
    /* Um pouco mais para seções */
}

/* Garantir que alertas usem toda a largura disponível */
.login-section .alert {
    width: 100% !important;
    max-width: 100% !important;
}

/* Para grupos de inputs lado a lado (se houver) */
.login-section .input-group {
    width: 100% !important;
}

/* Ajustar padding interno do card-body se necessário */
@media (min-width: 769px) {
    .login-card .col-md-7 .card-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ==========================================================================
   CORREÇÃO DA ORDEM NO MOBILE - Formulário em cima, informações embaixo
   ========================================================================== */

/* NO MOBILE: Forçar ordem específica */
@media (max-width: 768px) {

    /* IMPORTANTE: Sobrescrever qualquer ordem do Bootstrap */
    .login-card .col-md-7.order-2.order-md-1 {
        order: 1 !important;
        /* FORMULÁRIO PRIMEIRO */
        -webkit-order: 1 !important;
    }

    .login-card .col-md-5.order-1.order-md-2 {
        order: 2 !important;
        /* INFORMAÇÕES DEPOIS */
        -webkit-order: 2 !important;
    }

    /* Garantir que as divs sejam block e ocupem 100% */
    .login-card .col-md-7,
    .login-card .col-md-5 {
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Remover qualquer float ou display flex que possa interferir */
    .login-card .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ajustar bordas para mobile */
    .login-card .col-md-7 {
        border-radius: 16px 16px 0 0 !important;
    }

    .login-card .col-md-5 {
        border-radius: 0 0 16px 16px !important;
    }
}

/* Garantir que no desktop a ordem volte ao normal */
@media (min-width: 769px) {
    .login-card .col-md-7.order-2.order-md-1 {
        order: 1;
        /* Esquerda */
    }

    .login-card .col-md-5.order-1.order-md-2 {
        order: 2;
        /* Direita */
    }

    .login-card .row {
        display: flex !important;
        flex-direction: row !important;
    }
}

/* Se ainda tiver problemas, tente este código mais agressivo: */
@media (max-width: 768px) {

    /* Reset completo da ordem */
    .login-card .row>div {
        order: 0 !important;
        -webkit-order: 0 !important;
    }

    /* Seletor específico para a coluna do formulário */
    .login-card .row>div:nth-child(1) {
        order: 1 !important;
        -webkit-order: 1 !important;
    }

    /* Seletor específico para a coluna das informações */
    .login-card .row>div:nth-child(2) {
        order: 2 !important;
        -webkit-order: 2 !important;
    }
}

/* Solução alternativa usando display grid */
@media (max-width: 768px) {
    .login-card .row {
        display: grid !important;
        grid-template-areas:
            "formulario"
            "informacoes";
        grid-template-rows: auto auto;
    }

    .login-card .col-md-7 {
        grid-area: formulario;
    }

    .login-card .col-md-5 {
        grid-area: informacoes;
    }
}