sem classe (#divSecaoSub…):
esse
também precisa crescer, senão o campo fica espremido */
.grid-filtro form.search-form > div:not([class*="col-"]) { display: flex; flex-wrap: wrap; flex: 2 1 18rem; gap: .5rem; min-width: 0; }
.grid-filtro form.search-form > div:not([class*="col-"]) > [class*="col-"] { flex: 1 1 10rem; width: auto; max-width: none; padding: 0; }
/* ==========================================================================
Área do usuário e formulários de anúncio — faixa verde com "Minha área"
(renderizarFaixaDaAreaDoUsuario)
========================================================================== */
.faixa-pagina-rotulo { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .45rem; color: #d8f0b0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.faixa-pagina--sem-sobreposicao { padding-bottom: 2.5rem; }
.faixa-pagina--sem-sobreposicao + .container { margin-top: 1.75rem; }
.faixa-pagina--sem-sobreposicao + .container.area-usuario { padding-top: 0; }
/* ==========================================================================
Ajustes depois da etapa 4
========================================================================== */
/* Componentes do Bootstrap com fundo branco (por padrão usariam o cinza do fundo da página) */
.card { --bs-card-bg: #fff; }
.list-group { --bs-list-group-bg: #fff; }
.modal { --bs-modal-bg: #fff; }
.dropdown-menu { --bs-dropdown-bg: #fff; }
.accordion { --bs-accordion-bg: #fff; }
/* Publicidade do topo das listagens e dos detalhes: faixa baixa no lugar do bloco 970 x 250 */
.publicidade-horizontal { max-height: 120px; overflow: hidden; }
.painel-filtro:has(> .faixa-pagina) .grid-card-banner:has(.publicidade-horizontal) { padding: .75rem; }
/* Painel "Quer anunciar nesta listagem?" arredondado como os demais */
.advertising .banner { border: 1px solid var(--cj-borda); border-radius: var(--cj-raio); box-shadow: var(--cj-sombra); }
.advertising .banner:hover { border-color: var(--cj-campo-borda-hover); }
/* Painéis brancos do tema antigo (login, nova senha…) arredondados */
.grid-padrao { border: 1px solid var(--cj-borda); border-radius: var(--cj-raio); box-shadow: var(--cj-sombra); }
/* Painéis lado a lado com a mesma altura (login e contato) */
.paineis-mesma-altura > [class*="col-"] { display: flex; }
.paineis-mesma-altura > [class*="col-"] > .grid-padrao { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; padding: 1.6rem 1.75rem; }
/* Menu lateral da área do usuário: publicidade pequena em cartão, embaixo do menu */
.publicidade-lateral { min-height: 0; margin-bottom: 1rem; }
/* Painel de apresentação ao lado dos formulários (renderizarPainelDeVantagens) */
.grid-padrao > .painel-vantagens { flex: 1 1 auto; padding: 0; border: 0; box-shadow: none; }
.painel-vantagens-introducao { margin: 0 0 1.5rem !important; font-size: 1.02rem; }
.painel-vantagens-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--cj-borda); }
.painel-vantagens > ul:not(.painel-vantagens-selos) { margin-bottom: 1.5rem; } /* espaço mínimo antes do rodapé, que vai para o fim do painel */
.painel-vantagens ul.painel-vantagens-selos { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.painel-vantagens-selos li { align-items: center; gap: .4rem; color: var(--cj-texto-suave); font-size: .9rem; font-weight: 600; }
.painel-vantagens-selos li > i { width: auto; height: auto; background: none; color: var(--cj-verde-escuro); font-size: .95rem; }
.painel-vantagens a { font-weight: 600; }
/* Textos de apoio dos formulários (login e contato) */
.formulario-subtitulo { margin: -.35rem 0 1.25rem; color: var(--cj-texto-suave); }
.formulario-rodape { margin: 1rem 0 0; color: var(--cj-texto-suave); text-align: center; }
.formulario-rodape a { font-weight: 700; }
.aviso-seguranca-senha { display: flex; gap: .75rem; margin-top: auto; padding: .9rem 1rem; border-radius: .75rem; background: var(--cj-verde-claro); }
.grid-padrao form:has(+ .aviso-seguranca-senha) { margin-bottom: 1.5rem; }
.aviso-seguranca-senha i { margin-top: .2rem; color: var(--cj-verde-escuro); }
.aviso-seguranca-senha p { margin: 0; color: var(--cj-texto); font-size: .9rem; line-height: 1.5; }
/* "Quer anunciar nesta listagem?": texto à esquerda e "Anuncie grátis" como botão à direita */
.advertising .banner { display: block; padding: 1.35rem 1.6rem; }
.advertising .banner .wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.advertising .banner .title { display: block; width: auto; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.advertising .banner .submit {
display: inline-flex; flex-direction: row-reverse; align-items: center; gap: .5rem; width: auto;
padding: .7rem 1.35rem; border-radius: 999px; background: var(--cj-laranja); color: #fff !important;
font-size: 1rem; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(245, 137, 54, .6);
transition: background-color .2s ease, transform .2s ease;
}
.advertising .banner .submit i { margin: 0; color: #fff; }
.advertising a:hover .banner .submit { background: var(--cj-laranja-escuro); transform: translateY(-1px); }
@media (max-width: 575.98px) {
.advertising .banner .submit { width: 100%; justify-content: center; }
}
.painel-vantagens-redes { display: flex; align-items: center; gap: .75rem; color: var(--cj-texto-suave); font-size: .9rem; font-weight: 600; }
.painel-vantagens-redes a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cj-verde-claro); color: var(--cj-verde-escuro); }
.painel-vantagens-redes a:hover { background: var(--cj-verde); color: #fff; }
/* Contato: um único painel com um aviso curto e o formulário em duas colunas */
.contato-cartao { padding: 1.75rem 2rem; }
.contato-cartao form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.contato-cartao form > :is(h1, p, button, .form-group:has(#nome), .form-group:has(textarea), .form-group:has(.g-recaptcha)) { grid-column: 1 / -1; }
.contato-titulo { margin: 0 0 .75rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.contato-aviso { display: flex; gap: .75rem; margin: 0 0 1.5rem; padding: .9rem 1.1rem; border-radius: .75rem; background: var(--cj-verde-claro); color: var(--cj-texto); line-height: 1.55; }
.contato-aviso i { margin-top: .25rem; color: var(--cj-verde-escuro); }
.contato-aviso span { min-width: 0; overflow-wrap: anywhere; }
.contato-aviso a { font-weight: 700; }
@media (max-width: 575.98px) {
.contato-cartao { padding: 1.25rem 1.1rem; }
.contato-cartao form { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Formulários longos da área do usuário (meus dados, currículo) divididos em
seções: cada seção é um cartão com ícone, título, explicação e botão próprio.
========================================================================== */
.secoes-formulario { display: grid; gap: 1.5rem; }
.secao-formulario { scroll-margin-top: 6rem; padding: 1.5rem 1.75rem; background: #fff; border: 1px solid var(--cj-borda); border-radius: var(--cj-raio); box-shadow: var(--cj-sombra); }
.secao-formulario-topo { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.35rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--cj-borda); }
.secao-formulario-topo > i {
flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
border-radius: .75rem; background: var(--cj-verde-claro); color: var(--cj-verde-escuro); font-size: 1.15rem;
}
.secao-formulario-topo h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.secao-formulario-topo p { margin: .2rem 0 0; color: var(--cj-texto-suave); }
.secao-formulario-subtitulo { margin: 1.75rem 0 .85rem; color: var(--cj-texto-suave); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.secao-formulario-topo + .secao-formulario-subtitulo { margin-top: 0; }
.secao-formulario .form-group { margin-bottom: 0; }
.secao-formulario-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cj-borda); }
.secao-formulario-rodape .btn { min-width: 11rem; }
/* Escolha entre duas opções em forma de botão (ex.: Particular / Profissional) */
.opcoes-em-botao { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.opcoes-em-botao .btn { padding: .6rem 1.1rem; border: 1px solid var(--cj-campo-borda); border-radius: var(--cj-campo-raio); background: #fff; color: var(--cj-texto); font-weight: 600; }
.opcoes-em-botao .btn:hover { border-color: var(--cj-verde); }
.opcoes-em-botao .btn-check:checked + .btn { border-color: var(--cj-verde); background: var(--cj-verde-claro); color: var(--cj-verde-escuro); }
.opcoes-em-botao .btn-check:focus-visible + .btn { box-shadow: var(--cj-campo-anel); }
/* Foto já enviada, com a opção de excluir */
.foto-atual { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.foto-atual img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--cj-borda); }
.foto-atual p { margin: 0 0 .5rem; color: var(--cj-texto-suave); }
@media (max-width: 575.98px) {
.secao-formulario { padding: 1.15rem 1rem; }
.secao-formulario-topo > i { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.secao-formulario-rodape .btn { width: 100%; }
.opcoes-em-botao { display: flex; }
.opcoes-em-botao .btn { flex: 1 1 0; }
}
/* Seletor de foto do perfil e do currículo: quadrado pequeno, não ocupa a largura toda */
.secao-formulario .seletor-foto { max-width: 11rem; aspect-ratio: 1; }
/* ==========================================================================
Meu currículo (meu_curriculo_atualizar.php): etapas em abas com ícone e
cada formulário em um cartão (.secao-formulario, mesmo padrão de Meus dados)
========================================================================== */
.etapas-curriculo {
flex-wrap: nowrap; gap: .5rem; margin-bottom: 1.25rem; padding: .4rem;
overflow-x: auto; scrollbar-width: thin;
background: #fff; border: 1px solid var(--cj-borda); border-radius: var(--cj-raio); box-shadow: var(--cj-sombra);
}
.etapas-curriculo .nav-item { flex: 1 1 auto; }
.etapas-curriculo .nav-link {
display: flex; align-items: center; justify-content: center; gap: .5rem; height: 100%;
padding: .6rem .7rem; border-radius: .65rem; color: var(--cj-texto-suave); font-size: .94rem; font-weight: 600; white-space: nowrap;
}
.etapas-curriculo .nav-link:hover { background: var(--cj-fundo); color: var(--cj-texto); }
.etapas-curriculo .nav-link.active { background: var(--cj-verde); color: #fff; }
.etapas-curriculo .nav-link i { font-size: .95rem; }
/* A aba deixa de ser um painel branco: os cartões dos formulários ficam direto sobre o fundo */
.profile-edit.tab-pane:has(> .secao-formulario) { padding: 0; background: transparent; }
.profile-edit.tab-pane > .secao-formulario + .secao-formulario { margin-top: 1.25rem; }
/* Primeiro título do cartão: título da seção; os seguintes (ex.: endereço e contato): subtítulos */
.secao-formulario h2.heading-md { margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--cj-borda); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.secao-formulario h2.heading-md ~ h2.heading-md {
margin-top: 1.75rem; padding: 1.25rem 0 0; border-top: 1px solid var(--cj-borda); border-bottom: 0;
color: var(--cj-texto-suave); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.secao-formulario .margin-bottom-20 { margin-bottom: 0 !important; }
.secao-formulario .btn-sm { padding: .55rem 1.1rem; font-size: .95rem; }
/* Formulários de inclusão ("novo"): borda tracejada para diferenciar dos itens já cadastrados */
.secao-formulario:is(#formExpNova, #formFormacaoCursos_0, #formIdioma_0, #formSoftware_0) { border-style: dashed; background: #fcfdfb; }
.secao-formulario:is(#formExpNova, #formFormacaoCursos_0, #formIdioma_0, #formSoftware_0) h2.heading-md::before {
content: "\2b"; font: var(--fa-font-solid); margin-right: .5rem; color: var(--cj-verde-escuro);
}
@media (max-width: 575.98px) {
.etapas-curriculo .nav-link { padding: .55rem .75rem; font-size: .92rem; }
}
/* Botões "Salvar" e "Remover" dos itens do currículo lado a lado, dividindo a largura no celular */
@media (max-width: 575.98px) {
.secao-formulario [class*="col-"]:has(> .btn-sm) { display: flex; flex-wrap: wrap; gap: .5rem; }
.secao-formulario [class*="col-"]:has(> .btn-sm) > .btn { flex: 1 1 auto; margin: 0; }
}
/* Menu lateral da área do usuário: faixa separando "Excluir conta" e "Sair" dos demais links */
.list-group > .menu-area-usuario-divisoria { height: .45rem; margin: 0; border: 0; background: var(--cj-fundo); opacity: 1; }
/* Meu currículo: em telas menores as etapas quebram o nome em duas linhas, com o ícone em cima,
e cabem todas sem barra de rolagem (6 por linha; no celular, 3 por linha) */
@media (max-width: 991.98px) {
.etapas-curriculo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; overflow: visible; }
.etapas-curriculo .nav-link { flex-direction: column; gap: .3rem; padding: .55rem .3rem; font-size: .82rem; line-height: 1.2; text-align: center; white-space: normal; }
.etapas-curriculo .nav-link i { font-size: 1.05rem; }
}
@media (max-width: 575.98px) {
.etapas-curriculo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ==========================================================================
Botão de favorito (layout/favoritos.php + assets/js/favoritos.js)
========================================================================== */
.botao-favorito { cursor: pointer; }
.botao-favorito[aria-pressed="true"] i { color: #e0245e; }
.btn.botao-favorito { display: inline-flex; align-items: center; gap: .4rem; }
button.painel-padrao.botao-favorito { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; color: var(--cj-texto); font: inherit; font-weight: 600; }
/* Coração redondo sobre a foto dos cartões da página inicial */
.cartao-com-favorito { position: relative; }
.botao-favorito--icone {
position: absolute; z-index: 2; top: .6rem; right: calc(var(--bs-gutter-x) * .5 + .6rem);
display: grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0;
border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--cj-texto-suave);
box-shadow: 0 2px 8px rgba(16, 24, 40, .15); transition: transform .15s ease, color .15s ease;
}
.botao-favorito--icone:hover { transform: scale(1.08); color: #e0245e; }
.botao-favorito--icone .botao-favorito-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.botao-favorito--icone i { font-size: 1.05rem; }
/* ==========================================================================
Meus favoritos (meus_favoritos.php) e estados vazios da área do usuário
========================================================================== */
.resultado-da-area { margin: 0 0 1rem; color: var(--cj-texto-suave); }
.resultado-da-area strong { color: var(--cj-texto); font-size: 1.1rem; }
.lista-favoritos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
/* Altura fixa: a foto se ajusta ao cartão (nunca o contrário), então todos os cartões ficam iguais */
.favorito { display: flex; height: 12.75rem; overflow: hidden; background: #fff; border: 1px solid var(--cj-borda); border-radius: var(--cj-raio); box-shadow: var(--cj-sombra); transition: box-shadow .2s ease; }
.favorito:hover { box-shadow: 0 8px 22px rgba(16, 24, 40, .10); }
.favorito-foto { position: relative; flex: 0 0 9.5rem; display: grid; place-items: center; background: #eef1f4; color: #9aa3ad; font-size: 1.6rem; overflow: hidden; }
.favorito-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.favorito-corpo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .9rem 1rem; flex: 1 1 auto; }
.favorito-secao { display: flex; min-width: 0; white-space: nowrap; overflow: hidden; align-items: center; gap: .35rem; color: var(--cj-verde-escuro); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.favorito h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.favorito h3 a { color: var(--cj-texto); }
.favorito h3 a:hover { color: var(--cj-verde-escuro); }
.favorito-local { display: flex; align-items: center; gap: .35rem; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cj-texto-suave); font-size: .85rem; }
.favorito-local i { color: #8a8f98; font-size: .78rem; }
.favorito-preco { margin: 0; color: var(--cj-verde-escuro); font-size: 1.08rem; font-weight: 700; }
.favorito-corpo > * { flex-shrink: 0; } /* o título de duas linhas não pode ser espremido */
.favorito-acoes .btn { white-space: nowrap; }
/* Cartão estreito (celular ou duas colunas em tela média): botões sem ícone para caberem lado a lado */
.favorito { container-type: inline-size; }
@container (max-width: 23.5rem) {
.favorito-foto { flex-basis: 7.5rem; }
.favorito-corpo { padding-left: .85rem; padding-right: .85rem; }
.favorito-acoes { gap: .35rem; }
.favorito-acoes .btn { padding-left: .6rem; padding-right: .6rem; }
.favorito-acoes .btn i { display: none; }
}
.favorito-acoes { display: flex; flex-wrap: nowrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.favorito--indisponivel { opacity: .8; }
.favorito--indisponivel .favorito-local { white-space: normal; }
.favorito--indisponivel .favorito-foto { font-size: 1.4rem; }
.estado-vazio { padding: 3rem 1.5rem; text-align: center; background: #fff; border: 1px dashed var(--cj-campo-borda-hover); border-radius: var(--cj-raio); }
.estado-vazio > i { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%; background: var(--cj-verde-claro); color: var(--cj-verde-escuro); font-size: 1.6rem; }
.estado-vazio h2 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 800; }
.estado-vazio p { max-width: 32rem; margin: 0 auto 1.25rem; color: var(--cj-texto-suave); }
@media (max-width: 767.98px) {
.lista-favoritos { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Mensagens recebidas (minhas_mensagens.php): um cartão por anúncio, mensagens em balões
========================================================================== */
.lista-mensagens { --bs-accordion-border-color: var(--cj-borda); --bs-accordion-active-bg: #fff; --bs-accordion-active-color: var(--cj-texto); --bs-accordion-btn-focus-box-shadow: var(--cj-campo-anel); display: grid; gap: 1rem; }
.lista-mensagens .accordion-item { border: 1px solid var(--cj-borda) !important; border-radius: var(--cj-raio) !important; overflow: hidden; box-shadow: var(--cj-sombra); }
.lista-mensagens .accordion-button { gap: 1rem; padding: 1rem 1.25rem; font-weight: 700; }
.lista-mensagens .accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--cj-borda); }
.lista-mensagens-anuncio { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.lista-mensagens-contagem { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; color: var(--cj-texto-suave); font-size: .88rem; font-weight: 600; }
.lista-mensagens .accordion-body { display: grid; gap: 1rem; padding: 1.25rem; background: var(--cj-fundo); }
.mensagem { padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--cj-borda); border-radius: var(--cj-raio); }
.mensagem--nova { border-left: 4px solid #d9485a; }
.mensagem-topo { display: flex; align-items: center; gap: .75rem; }
.mensagem-avatar { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--cj-verde-claro); color: var(--cj-verde-escuro); font-weight: 800; }
.mensagem-remetente { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; min-width: 0; }
.mensagem-data { flex: 1 0 100%; color: var(--cj-texto-suave); font-size: .82rem; }
.mensagem-texto { margin: .85rem 0; padding: .85rem 1rem; border-radius: .75rem; background: var(--cj-fundo); color: var(--cj-texto); line-height: 1.6; overflow-wrap: anywhere; }
.mensagem-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.mensagem-contatos { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .9rem; }
.mensagem-contatos a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; overflow-wrap: anywhere; }
.mensagem-botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) {
.lista-mensagens .accordion-button { flex-wrap: wrap; gap: .4rem; padding: .9rem 1rem; }
.lista-mensagens-contagem { flex: 1 0 100%; }
.mensagem-botoes, .mensagem-botoes .btn { flex: 1 1 auto; }
}
/* ==========================================================================
Visualizar currículo (Minha área): barra de ações + documento em um cartão
O documento em si vem de assets/css/curriculo_documento.css
========================================================================== */
.barra-do-curriculo {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: 1rem;
padding: .85rem 1rem;
background: #fff;
border: 1px solid var(--cj-borda);
border-radius: var(--cj-raio);
box-shadow: var(--cj-sombra);
}
.barra-do-curriculo-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cartao-do-curriculo {
padding: 2.25rem 2.5rem 1.75rem;
background: #fff;
border: 1px solid var(--cj-borda);
border-top: 6px solid var(--cv-destaque, var(--cj-verde-escuro));
border-radius: var(--cj-raio-grande);
box-shadow: var(--cj-sombra);
}
@media (max-width: 575.98px) {
.barra-do-curriculo .btn { flex: 1 1 auto; }
.barra-do-curriculo-acoes { flex: 1 1 100%; }
.cartao-do-curriculo { padding: 1.25rem 1rem 1rem; }
}
/* ==========================================================================
Anunciar · listagem dos anúncios de uma categoria (layout/meus_anuncios_gerenciar.php)
========================================================================== */
.barra-gerenciar-anuncios {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem 1rem;
padding: .85rem 1rem;
background: #fff;
border: 1px solid var(--cj-borda);
border-radius: var(--cj-raio);
box-shadow: var(--cj-sombra);
}
.gerenciar-anuncios-selecionar { display: inline-flex; align-items: center; gap: .6rem; margin: 0; color: var(--cj-texto-suave); cursor: pointer; }
.gerenciar-anuncios-selecionar strong { color: var(--cj-texto); }
.gerenciar-anuncios-selecionar .form-check-input { margin: 0; }
.barra-gerenciar-anuncios-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.gerenciar-anuncios-dica { margin: .85rem .25rem 0; color: var(--cj-texto-suave); font-size: .9rem; }
.gerenciar-anuncios-dica > i { margin-right: .35rem; color: var(--cj-laranja, #f7941d); }
.gerenciar-anuncios-dica a { font-weight: 600; }
.lista-anuncios-gerenciados { display: grid; gap: .85rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.anuncio-gerenciado {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--cj-borda);
border-radius: var(--cj-raio);
box-shadow: var(--cj-sombra);
transition: box-shadow .15s ease;
}
.anuncio-gerenciado:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.anuncio-gerenciado:has(.anuncio-gerenciado-marcar:checked) { background: var(--cj-verde-claro, #f3f9ea); border-color: var(--cj-verde, #7cb82f); }
.anuncio-gerenciado--destaque { border-left: 4px solid var(--cj-laranja, #f7941d); }
.anuncio-gerenciado-marcar { flex: 0 0 auto; margin-top: .3rem; }
.anuncio-gerenciado-conteudo { flex: 1; min-width: 0; }
.anuncio-gerenciado-selos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.selo-situacao {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .15rem .6rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .02em;
}
.selo-situacao--publicado { background: #e9f5dc; color: #3f6b0c; }
.selo-situacao--em-analise { background: #fff4e0; color: #9a5b00; }
.selo-situacao--inativo { background: #eef0f2; color: #5f6368; }
.selo-situacao--destaque { background: #fff0e0; color: #b45309; }
.anuncio-gerenciado-titulo { display: block; margin: 0; color: var(--cj-texto); font-size: 1.05rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; }
.anuncio-gerenciado-detalhes { margin: .3rem 0 0; color: var(--cj-texto-suave); font-size: .88rem; line-height: 1.5; }
/* Os avisos de detalhe_anuncio.php vêm com cor inline vermelha; aqui ficam no tom de alerta do tema */
.anuncio-gerenciado-detalhes span[style] { color: #b45309 !important; font-weight: 600; }
.anuncio-gerenciado-acoes { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.anuncio-gerenciado-destacar { margin-left: auto; }
@media (max-width: 575.98px) {
.barra-gerenciar-anuncios-acoes, .barra-gerenciar-anuncios-acoes .btn { flex: 1 1 100%; }
.anuncio-gerenciado { padding: 1rem; gap: .75rem; }
.anuncio-gerenciado-acoes .btn { flex: 1 1 calc(50% - .45rem); }
.anuncio-gerenciado-destacar { margin-left: 0; flex-basis: 100% !important; }
}
/* ==========================================================================
Anunciar · formulários de inclusão e alteração (anunciar__inse_1 / _alte_1)
Seções em cartões (abrirSecaoDoFormulario) e planos de publicação lado a lado
========================================================================== */
.secao-formulario > br, .secao-formulario > .row + br { display: none; }
.secao-formulario > hr { margin: 1.25rem 0; border-color: var(--cj-borda); opacity: 1; }
.secao-formulario .margin-bottom-20 { margin-bottom: 0 !important; }
.secao-formulario .form-group.mb-3 { margin-bottom: 1rem !important; }
.secao-formulario-topo + .secao-formulario-subtitulo, .secao-formulario > .secao-formulario-subtitulo:first-child { margin-top: 0; }
/* Planos: um cartão por plano, preço e botão à direita */
.secao-publicar .select-package > div { padding: 0 !important; }
.secao-publicar .select-package > div { display: grid; gap: .85rem; }
.secao-publicar .pricing-list {
position: relative;
margin: 0;
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--cj-borda);
border-radius: var(--cj-raio);
transition: border-color .15s ease, box-shadow .15s ease;
}
.secao-publicar .pricing-list:hover { border-color: var(--cj-verde); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.secao-publicar .pricing-list + .pricing-list { border-color: #f9c79c; background: linear-gradient(135deg, #fff 60%, #fff6ee); }
.secao-publicar .pricing-list > .row { align-items: center; margin: 0; row-gap: .75rem; }
.secao-publicar .pricing-list > .row > [class*="col-"] { padding: 0; }
.secao-publicar .pricing-list > .row > [class*="col-md-9"] { padding-right: 1.25rem; }
.secao-publicar .pricing-list h3 { margin: 0 0 .25rem; padding: 0; color: var(--cj-texto); font-size: 1.1rem; font-weight: 800; }
.secao-publicar .pricing-list h3 small { margin-left: .35rem; color: var(--cj-texto-suave); font-size: .8rem; font-weight: 600; }
.secao-publicar .pricing-list p { margin: 0; color: var(--cj-texto-suave); font-size: .92rem; line-height: 1.5; }
.secao-publicar .pricing-list-price { display: grid; gap: .5rem; }
.secao-publicar .pricing-list-price h4 { margin: 0; padding: 0; color: var(--cj-texto); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.secao-publicar .pricing-list-price .btn { width: 100%; padding: .55rem 1rem; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.secao-publicar .pricing-list + .pricing-list .pricing-list-price .btn { --bs-btn-bg: var(--cj-laranja); --bs-btn-border-color: var(--cj-laranja); --bs-btn-hover-bg: var(--cj-laranja-escuro); --bs-btn-hover-border-color: var(--cj-laranja-escuro); }
/* Anúncio que já está em destaque: só o botão de salvar */
.secao-publicar > .row .btn { min-width: 12rem; }
@media (max-width: 767.98px) {
.secao-publicar .pricing-list > .row > [class*="col-md-9"] { padding-right: 0; }
.secao-publicar .pricing-list-price { grid-template-columns: auto 1fr; align-items: center; text-align: left !important; gap: 1rem; }
.secao-publicar > .row .btn { width: 100%; }
}
/* Imóveis: aviso de integração para imobiliárias, antes do formulário */
.aviso-integracao-imoveis {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1.1rem 1.35rem;
background: var(--cj-verde-claro);
border: 1px solid #cfe5b0;
border-radius: var(--cj-raio);
}
.aviso-integracao-imoveis > i {
flex: 0 0 2.6rem; display: grid; place-items: center; height: 2.6rem;
border-radius: .75rem; background: #fff; color: var(--cj-verde-escuro); font-size: 1.1rem;
}
.aviso-integracao-imoveis h2 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 800; }
.aviso-integracao-imoveis p { margin: 0 0 .75rem; color: var(--cj-texto-suave); font-size: .92rem; }
.secoes-formulario > form { display: grid; gap: 1.5rem; }
/* Espaço reservado (vazio) do carregamento das cidades: não pode ocupar uma linha inteira do grid */
.row > #divCidade2:empty { display: none; }
/* Itens do grid podem encolher (e-mails e textos longos quebram em vez de alargar a página) */
.secoes-formulario > *, .secoes-formulario > form > * { min-width: 0; }
.aviso-integracao-imoveis p { overflow-wrap: anywhere; }
/* ==========================================================================
Meus dados · foto do perfil (assets/js/foto_do_perfil.js)
Foto redonda com selo de câmera; tocar troca a imagem, que é salva na hora.
No computador fica à direita dos campos; no celular, foto e textos lado a lado.
========================================================================== */
.foto-do-perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem 1rem; }
.foto-do-perfil-quadro {
position: relative;
grid-row: span 3;
display: grid;
place-items: center;
width: 7.5rem;
aspect-ratio: 1;
margin: 0;
border: 2px dashed var(--cj-campo-borda-hover);
border-radius: 50%;
background: #f7f8fa;
color: var(--cj-texto-suave);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.foto-do-perfil-quadro:hover, .foto-do-perfil-quadro:has(input:focus-visible) { border-color: var(--cj-verde); background: var(--cj-verde-claro); color: var(--cj-verde-escuro); }
.foto-do-perfil-quadro:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(125, 186, 33, .3); }
.foto-do-perfil.tem-foto .foto-do-perfil-quadro { border: 3px solid #fff; background: #eef1f4; box-shadow: 0 0 0 1px var(--cj-borda), 0 6px 16px rgba(16, 24, 40, .12); }
.foto-do-perfil-imagem { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.foto-do-perfil-imagem[hidden] { display: none; }
.foto-do-perfil-vazia { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; text-align: center; }
.foto-do-perfil-vazia i { font-size: 1.4rem; }
.foto-do-perfil.tem-foto .foto-do-perfil-vazia { display: none; }
/* Selo de câmera sempre visível (no celular não existe "passar o mouse") e faixa "Trocar foto" no hover */
.foto-do-perfil-trocar { display: none; }
.foto-do-perfil.tem-foto .foto-do-perfil-trocar {
position: absolute;
right: .1rem;
bottom: .1rem;
display: grid;
place-items: center;
width: 2.2rem;
height: 2.2rem;
border: 2px solid #fff;
border-radius: 50%;
background: var(--cj-verde-escuro);
color: #fff;
font-size: .85rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.foto-do-perfil-trocar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.foto-do-perfil.tem-foto .foto-do-perfil-quadro:hover .foto-do-perfil-trocar { background: var(--cj-verde); }
.foto-do-perfil-carregando {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .35rem;
border-radius: 50%;
background: rgba(255, 255, 255, .78);
color: var(--cj-verde-escuro);
font-size: .8rem;
font-weight: 700;
}
.foto-do-perfil-carregando[hidden] { display: none; }
.foto-do-perfil.salvando .foto-do-perfil-quadro { pointer-events: none; }
.foto-do-perfil-ajuda { margin: 0; color: var(--cj-texto-suave); font-size: .85rem; line-height: 1.4; }
.foto-do-perfil-status { margin: 0; font-size: .85rem; font-weight: 600; }
.foto-do-perfil-status:empty { display: none; }
.foto-do-perfil-status--sucesso { color: var(--cj-verde-escuro); }
.foto-do-perfil-status--sucesso::before { content: "\f00c"; margin-right: .35rem; font: var(--fa-font-solid); }
.foto-do-perfil-status--erro { color: #b42318; }
.foto-do-perfil-excluir { justify-self: start; color: #b42318; font-size: .85rem; font-weight: 600; }
.foto-do-perfil-excluir[hidden] { display: none; }
.foto-do-perfil-excluir:hover { color: #8f1d14; }
@media (min-width: 768px) {
.coluna-da-foto { display: flex; flex-direction: column; align-items: center; text-align: center; }
.coluna-da-foto > .form-label { align-self: stretch; text-align: center; }
.foto-do-perfil { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 13rem; gap: .5rem; }
.foto-do-perfil-quadro { grid-row: auto; width: 9.5rem; margin-bottom: .35rem; }
.foto-do-perfil-excluir { justify-self: center; }
}
/* ==========================================================================
Listas de opção (assets/js/seletor.js): o