/* static/css/style.css */

/* --- Estilos Gerais (Opcional) --- */
body {
    background-color: #f8f9fa; /* Um cinza bem claro para o fundo */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main {
    padding-top: 20px;
}

/* --- Container Responsivo para Formulários --- */
/*
  Use esta classe para agrupar os campos que devem mudar de 1 para múltiplas colunas.
*/
.form-row-responsive {
    display: flex;
    flex-direction: column; /* MOBILE-FIRST: Por padrão, tudo é uma coluna (empilhado) */
    width: 100%;
}

/* --- Grupos de Campos dentro do Container --- */
/*
  Cada campo (label + input) deve ficar dentro de um div com esta classe.
*/
.form-group-responsive {
    width: 100%; /* Em telas pequenas, cada campo ocupa a linha inteira */
    padding: 0 8px; /* Pequeno espaçamento lateral */
    margin-bottom: 1rem; /* Espaçamento padrão do Bootstrap entre os campos */
}


/* --- Media Query para Telas Maiores (Desktops) --- */
/* Quando a tela tiver 768px de largura ou mais (ponto de quebra 'md' do Bootstrap),
  as regras abaixo serão aplicadas.
*/
@media (min-width: 768px) {

    .form-row-responsive {
        flex-direction: row;  /* Em telas grandes, os itens ficam lado a lado */
        flex-wrap: wrap;      /* Permite que os itens quebrem para a próxima linha */
        margin-left: -8px;    /* Compensa o padding dos filhos */
        margin-right: -8px;   /* Compensa o padding dos filhos */
    }

    /* Regra para Layout de 2 Colunas */
    .form-row-responsive.cols-2 > .form-group-responsive {
        /*
          flex-grow: 0 -> não cresce
          flex-shrink: 0 -> não encolhe
          flex-basis: 50% -> base de 50% da largura do pai
        */
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Regra para Layout de 3 Colunas */
    .form-row-responsive.cols-3 > .form-group-responsive {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .container_logo_text {
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* Alinha à esquerda */
    }
}