/* =====================================================================
   Configurações: seções com título à esquerda, convite, membros e ações de dados
   Fonte: /mockup/css/style.css (seção 16) e /mockup/js/pages/configuracoes.js. Views: app/views/configuracoes
   ===================================================================== */
.config-secao + .config-secao { margin-top: var(--espaco-4); }
.config-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--espaco-6); }
.config-grade > header h3 { font-size: var(--tamanho-lg); }
.config-grade > header p { color: var(--texto-2); font-size: 13.5px; margin-top: var(--espaco-1); }
@media (max-width: 900px) { .config-grade { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-3-5); } }

/* No mockup, style="gap:14px" no cabeçalho do perfil e style="align-items:flex-end" + min-width nas linhas campo + botão */
.perfil-identidade { gap: var(--espaco-3-5); }
.config-linha { align-items: flex-end; }
.config-campo-largo { min-width: 220px; }
.config-campo-curto { min-width: 180px; }

.codigo-convite { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 26px; font-weight: var(--peso-bold); letter-spacing: .28em; padding: var(--espaco-2-5) var(--espaco-4); border-radius: var(--raio-sm); background: var(--superficie-2); border: 1px dashed var(--borda-forte); display: inline-block; }
.membros > li { display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-2-5) 0; }
.membros > li + li { border-top: 1px solid var(--borda); }
.zona-perigo { border-color: color-mix(in srgb, var(--despesa) 35%, var(--borda)); }

.acao-dado { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); padding: var(--espaco-3) 0; flex-wrap: wrap; }
.acao-dado + .acao-dado { border-top: 1px solid var(--borda); }
.acao-dado > div { flex: 1; min-width: 220px; }
.acao-dado strong { display: block; font-size: 14.5px; }
/* Rails: no mockup a regra valia para todo <span> da linha e pegava também o texto dos botões
   ("Apagar tudo" ficava cinza sobre o vermelho); aqui vale só para a explicação */
.acao-dado > div > span { display: block; color: var(--texto-2); font-size: var(--tamanho-sm); }